@zendeskgarden/react-notifications 9.0.0-next.8 → 9.0.0

package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js

@@ -5,47 +5,97 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 import { colorStyles as colorStyles$1 } from './StyledGlobalAlertClose.js';
 
-const COMPONENT_ID = 'notifications.global-alert.button';
+const COMPONENT_ID = 'notifications.global_alert.button';
 function colorStyles(props) {
-  if (props.isBasic) {
+  const {
+    $alertType,
+    isBasic,
+    theme
+  } = props;
+  if (isBasic) {
     return colorStyles$1(props);
   }
-  let backgroundColor;
-  let hoverBackgroundColor;
-  let activeBackgroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let bgVariable;
+  let offsetOptions;
+  let offsetHoverOptions;
+  let offsetActiveOptions;
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      backgroundColor = getColorV8('successHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('successHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('successHue', 1000, props.theme);
-      focusColor = 'successHue';
+      bgVariable = 'background.successEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      backgroundColor = getColorV8('dangerHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme);
-      focusColor = 'dangerHue';
+      bgVariable = 'background.dangerEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.dangerEmphasis';
       break;
     case 'warning':
-      backgroundColor = getColorV8('warningHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('warningHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
+      bgVariable = 'background.warningEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.warning';
       break;
     case 'info':
-      focusColor = 'primaryHue';
+      bgVariable = 'background.primaryEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.primary';
       break;
   }
-  return css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme,
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetOptions,
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetHoverOptions,
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetActiveOptions,
+    theme
+  });
+  return css(["background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, getColor({
+    hue: 'white',
+    theme
+  }), hoverBackgroundColor, focusStyles({
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     }
   }), activeBackgroundColor);
 }
@@ -56,20 +106,10 @@ function sizeStyles(props) {
 }
 const StyledGlobalAlertButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
-  focusInset: false,
-  isDanger: false,
-  isLink: false,
-  isNeutral: false,
-  isPill: false,
-  isStretched: false,
-  size: 'small'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlertButton",
   componentId: "sc-1txe91a-0"
 })(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlertButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledGlobalAlertButton };

package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js

@@ -5,51 +5,81 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'notifications.global-alert.close';
+const COMPONENT_ID = 'notifications.global_alert.close';
 const colorStyles = props => {
+  const {
+    $alertType,
+    theme
+  } = props;
   let hoverBackgroundColor;
   let hoverForegroundColor;
   let activeBackgroundColor;
   let activeForegroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'successHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.dangerEmphasis';
       break;
     case 'warning':
-      hoverBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.08);
-      hoverForegroundColor = getColorV8('warningHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.2);
-      activeForegroundColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
-      break;
-    case 'info':
-      hoverBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.08);
-      hoverForegroundColor = getColorV8('primaryHue', 800, props.theme);
-      activeBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.2);
-      activeForegroundColor = getColorV8('primaryHue', 900, props.theme);
-      focusColor = 'primaryHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[100],
+        theme
+      });
+      hoverForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 200,
+        theme
+      });
+      activeBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[200],
+        theme
+      });
+      activeForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 300,
+        theme
+      });
+      focusVariable = 'foreground.warning';
       break;
+    default:
+      focusVariable = 'foreground.primary';
   }
   return css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     }
   }), activeBackgroundColor, activeForegroundColor);
 };
@@ -61,14 +91,10 @@ const sizeStyles = props => {
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
-  size: 'small'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"
 })(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlertClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledGlobalAlertClose, colorStyles };

package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert.content';
+const COMPONENT_ID = 'notifications.global_alert.content';
 const StyledGlobalAlertContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
 })(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlertContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledGlobalAlertContent };

package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js

@@ -4,33 +4,59 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import React__default, { Children } from 'react';
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert.icon';
+const COMPONENT_ID = 'notifications.global_alert.icon';
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.space.base * 5} - ${size}) / 2`);
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledGlobalAlertIcon = styled(_ref => {
+const colorStyles = _ref => {
   let {
-    children,
-    ...props
+    theme,
+    $alertType
   } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+  let color;
+  switch ($alertType) {
+    case 'success':
+      color = getColor({
+        variable: 'foreground.success',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'error':
+      color = getColor({
+        variable: 'foreground.danger',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'warning':
+      color = getColor({
+        variable: 'foreground.warning',
+        theme
+      });
+      break;
+    case 'info':
+      color = getColor({
+        variable: 'foreground.primary',
+        theme
+      });
+      break;
+  }
+  return css(["color:", ";"], color);
+};
+const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlertIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledGlobalAlertIcon };

package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js

@@ -5,34 +5,42 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert.title';
-const colorStyles = props => {
+const COMPONENT_ID = 'notifications.global_alert.title';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
   let color;
-  switch (props.alertType) {
+  switch ($alertType) {
     case 'success':
     case 'error':
-      color = props.theme.palette.white;
+      color = theme.palette.white;
       break;
     case 'warning':
-      color = getColorV8('warningHue', 900, props.theme);
+      color = getColor({
+        variable: 'foreground.warningEmphasis',
+        theme
+      });
       break;
     case 'info':
-      color = getColorV8('primaryHue', 800, props.theme);
+      color = getColor({
+        variable: 'foreground.primary',
+        offset: 200,
+        theme
+      });
       break;
   }
   return css(["color:", ";"], color);
 };
 const StyledGlobalAlertTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
-})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlertTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledGlobalAlertTitle };

package/dist/esm/utils/icons.js

@@ -15,11 +15,11 @@ const validationIcons = {
   warning: SvgAlertWarningStroke,
   info: SvgInfoStroke
 };
-const validationHues = {
-  success: 'successHue',
-  error: 'dangerHue',
-  warning: 'warningHue',
-  info: 'neutralHue'
+const validationTypes = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info'
 };
 
-export { validationHues, validationIcons };
+export { validationIcons, validationTypes };