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

package/dist/esm/styled/StyledBase.js

@@ -5,35 +5,70 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
 
-const boxShadow = props => {
-  const {
-    theme
-  } = props;
+const COMPONENT_ID = 'notifications.base_container';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type,
+    $isFloating
+  } = _ref;
   const {
     space,
     shadows
   } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = getColorV8('chromeHue', 600, theme, 0.15);
-  return shadows.lg(offsetY, blurRadius, color);
-};
-const colorStyles = props => {
-  let backgroundColor;
-  let borderColor;
-  let foregroundColor;
-  if (props.hue) {
-    backgroundColor = getColorV8(props.hue, 100, props.theme);
-    borderColor = getColorV8(props.hue, 300, props.theme);
-    foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
+  let bgVariable;
+  let borderVariable;
+  let fgVariable;
+  if (!$isFloating && $type && !!validationTypes[$type]) {
+    switch ($type) {
+      case validationTypes.success:
+        bgVariable = 'background.success';
+        borderVariable = 'border.success';
+        fgVariable = 'foreground.success';
+        break;
+      case validationTypes.error:
+        bgVariable = 'background.danger';
+        borderVariable = 'border.danger';
+        fgVariable = 'foreground.danger';
+        break;
+      case validationTypes.warning:
+        bgVariable = 'background.warning';
+        borderVariable = 'border.warning';
+        fgVariable = 'foreground.warning';
+        break;
+      case validationTypes.info:
+        bgVariable = 'background.subtle';
+        borderVariable = 'border.default';
+        fgVariable = 'foreground.subtle';
+        break;
+    }
   } else {
-    backgroundColor = getColorV8('background', 600 , props.theme);
-    borderColor = getColorV8('neutralHue', 300, props.theme);
-    foregroundColor = getColorV8('neutralHue', 800, props.theme);
+    bgVariable = 'background.raised';
+    borderVariable = 'border.default';
+    fgVariable = 'foreground.default';
   }
-  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    theme
+  });
+  const borderColor = getColor({
+    variable: borderVariable,
+    theme
+  });
+  const foregroundColor = getColor({
+    variable: fgVariable,
+    theme
+  });
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const boxShadow = $isFloating ? shadows.lg(offsetY, blurRadius, getColor({
+    variable: 'shadow.large',
+    theme
+  })) : undefined;
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
 const padding = props => {
   const {
@@ -43,12 +78,12 @@ const padding = props => {
   const paddingHorizontal = `${space.base * 10}px`;
   return `${paddingVertical} ${paddingHorizontal}`;
 };
-const StyledBase = styled.div.withConfig({
+const StyledBase = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
+}).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
-})(["position:relative;border:", ";border-radius:", ";box-shadow:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";"], props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.isFloating && boxShadow, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles);
-StyledBase.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledBase };

package/dist/esm/styled/StyledIcon.js

@@ -4,15 +4,55 @@
 * 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 styled from 'styled-components';
-import { StyledBaseIcon, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
 
-const StyledIcon = styled(StyledBaseIcon).withConfig({
+const COMPONENT_ID = 'notifications.icon';
+const sizeStyles = _ref => {
+  let {
+    theme: {
+      rtl,
+      space
+    }
+  } = _ref;
+  return css(["right:", ";left:", ";margin-top:", "px;"], rtl && `${space.base * 4}px`, !rtl && `${space.base * 4}px`, space.base / 2);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    $type
+  } = _ref2;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.subtle';
+      break;
+    default:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  return css(["color:", ";"], color);
+};
+const StyledIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
+}).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;", " ", " ", ""], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledIcon };

package/dist/esm/styled/StyledNotification.js

@@ -6,57 +6,48 @@
 */
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { TYPE } from '../types/index.js';
 import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
 
 const COMPONENT_ID = 'notifications.notification';
 const colorStyles = props => {
   const {
-    type,
+    $type,
     theme
   } = props;
-  const {
-    colors
-  } = theme;
-  const {
-    successHue,
-    dangerHue,
-    warningHue
-  } = colors;
-  let color;
-  switch (type) {
-    case 'success':
-      color = getColorV8(successHue, 600, theme);
-      break;
-    case 'error':
-      color = getColorV8(dangerHue, 600, theme);
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
       break;
-    case 'warning':
-      color = getColorV8(warningHue, 700, theme);
+    case validationTypes.error:
+      variable = 'foreground.danger';
       break;
-    case 'info':
-      color = getColorV8('foreground', 600 , theme);
+    case validationTypes.warning:
+      variable = 'foreground.warning';
       break;
-    default:
-      color = 'inherit';
+    case validationTypes.info:
+      variable = 'foreground.default';
       break;
   }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : 'inherit';
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledNotification = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
 })(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNotification.propTypes = {
-  type: PropTypes.oneOf(TYPE)
-};
-StyledNotification.defaultProps = {
-  theme: DEFAULT_THEME
+  $type: PropTypes.oneOf(TYPE)
 };
 
 export { StyledNotification };

package/dist/esm/styled/StyledWell.js

@@ -4,20 +4,41 @@
 * 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 styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase.js';
 
 const COMPONENT_ID = 'notifications.well';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFloating,
+    $isRecessed
+  } = _ref;
+  let backgroundVariable;
+  if ($isRecessed) {
+    backgroundVariable = 'background.recessed';
+  } else if ($isFloating) {
+    backgroundVariable = 'background.raised';
+  } else {
+    backgroundVariable = 'background.default';
+  }
+  const foreground = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const background = getColor({
+    variable: backgroundVariable,
+    theme
+  });
+  return css(["background-color:", ";color:", ";"], background, foreground);
+};
 const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColorV8('neutralHue', 100, props.theme), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledWell.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", " ", ";"], colorStyles, p => retrieveComponentStyles(COMPONENT_ID, p));
 
 export { StyledWell };

package/dist/esm/styled/content/StyledClose.js

@@ -4,22 +4,64 @@
 * 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 styled from 'styled-components';
-import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../../utils/icons.js';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'notifications.close';
-const StyledClose = styled.button.attrs({
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  let variable;
+  switch ($type) {
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    default:
+      variable = 'foreground.subtle';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  const hoverColor = getColor({
+    variable,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeColor = getColor({
+    variable,
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  return css(["color:", ";&:hover{background-color:transparent;color:", ";}&:active{background-color:transparent;color:", ";}"], color, hoverColor, activeColor);
+};
+const StyledClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
-})(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.hue ? getColorV8(props.hue, 800, props.theme) : getColorV8('neutralHue', 800, props.theme), props => focusStyles({
-  theme: props.theme,
-  inset: true
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledClose };

package/dist/esm/styled/content/StyledParagraph.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.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
 })(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledParagraph };

package/dist/esm/styled/content/StyledTitle.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'notifications.title';
 const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
-})(["margin:0;color:", ";font-weight:", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["margin:0;color:", ";font-weight:", ";", ";"], p => getColor({
+  variable: 'foreground.default',
+  theme: p.theme
+}), props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTitle };

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

@@ -5,56 +5,131 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert';
-const colorStyles = props => {
+const COMPONENT_ID = 'notifications.global_alert';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
   let borderColor;
   let backgroundColor;
   let foregroundColor;
   let anchorHoverColor;
   let anchorActiveColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      borderColor = getColorV8('successHue', 700, props.theme);
-      backgroundColor = getColorV8('successHue', 600, props.theme);
-      foregroundColor = getColorV8('successHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'successHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.successEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.successEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.success',
+          offset: -600,
+          theme
+        });
+        anchorHoverColor = theme.palette.white;
+        anchorActiveColor = theme.palette.white;
+        focusVariable = 'foreground.successEmphasis';
+        break;
+      }
     case 'error':
-      borderColor = getColorV8('dangerHue', 700, props.theme);
-      backgroundColor = getColorV8('dangerHue', 600, props.theme);
-      foregroundColor = getColorV8('dangerHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.dangerEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.dangerEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.danger',
+          offset: -600,
+          theme
+        });
+        anchorActiveColor = theme.palette.white;
+        anchorHoverColor = theme.palette.white;
+        focusVariable = 'foreground.dangerEmphasis';
+        break;
+      }
     case 'warning':
-      borderColor = getColorV8('warningHue', 400, props.theme);
-      backgroundColor = getColorV8('warningHue', 300, props.theme);
-      foregroundColor = getColorV8('warningHue', 800, props.theme);
-      anchorHoverColor = getColorV8('warningHue', 900, props.theme);
-      anchorActiveColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.warningEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.warningEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.warning';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
     case 'info':
-      borderColor = getColorV8('primaryHue', 300, props.theme);
-      backgroundColor = getColorV8('primaryHue', 200, props.theme);
-      foregroundColor = getColorV8('primaryHue', 700, props.theme);
-      anchorHoverColor = getColorV8('primaryHue', 800, props.theme);
-      anchorActiveColor = getColorV8('primaryHue', 900, props.theme);
-      focusColor = 'primaryHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.primaryEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.primaryEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.primary';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
   }
-  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
+  const boxShadow = `0 ${theme.borderWidths.sm} ${theme.borderWidths.sm} ${borderColor}`;
   return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     },
     styles: {
       color: 'inherit'
@@ -73,13 +148,10 @@ const sizeStyles = props => {
 };
 const StyledGlobalAlert = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
 })(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles, colorStyles, props => props.theme.borderRadii.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGlobalAlert.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledGlobalAlert };