@zendeskgarden/react-notifications 9.0.0-next.13 → 9.0.0-next.15

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

@@ -5,50 +5,81 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
+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);
 };
@@ -59,12 +90,12 @@ const sizeStyles = props => {
   return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart);
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
-  'data-garden-version': '9.0.0-next.13',
-  size: 'small'
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.15'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"
-})(["", ";", ";"], sizeStyles, colorStyles);
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertClose.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } 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.13'
+  'data-garden-version': '9.0.0-next.15'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"

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

@@ -6,22 +6,58 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, 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 colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
+  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.13'
+  'data-garden-version': '9.0.0-next.15'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,32 +5,43 @@
 * 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, DEFAULT_THEME, 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.13'
+  'data-garden-version': '9.0.0-next.15'
 }).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));
+})(["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
 };

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 };