chore: use parent theme callback

Co-authored-by: Florent <ze-flo@users.noreply.github.com>

Author: geotrev

packages/notifications/src/elements/global-alert/GlobalAlert.tsx

@@ -5,8 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, useContext, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
 import InfoIcon from '@zendeskgarden/svg-icons/src/16/info-stroke.svg';
 import ErrorIcon from '@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg';
 import WarningIcon from '@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg';
@@ -19,8 +20,6 @@ import { GlobalAlertButton } from './GlobalAlertButton';
 import { GlobalAlertClose } from './GlobalAlertClose';
 import { GlobalAlertContent } from './GlobalAlertContent';
 import { GlobalAlertTitle } from './GlobalAlertTitle';
-import { DefaultTheme, ThemeContext, ThemeProvider } from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 /**
  * 1. Global Alert always renders with light theme colors
@@ -36,15 +35,9 @@ const GlobalAlertComponent = forwardRef<HTMLDivElement, IGlobalAlertProps>(
       warning: <WarningIcon />,
       info: <InfoIcon />
     }[type];
-    const theme = useContext(ThemeContext) || DEFAULT_THEME;
-    /* [1] */
-    const lightTheme: DefaultTheme = useMemo(
-      () => ({ ...theme, colors: { ...theme.colors, base: 'light' } }),
-      [theme]
-    );
 
     return (
-      <ThemeProvider theme={lightTheme}>
+      <ThemeProvider theme={theme => ({ ...theme, colors: { ...theme.colors, base: 'light' } })}>
         <GlobalAlertContext.Provider value={useMemo(() => ({ type }), [type])}>
           {/* [2] */}
           {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}