@zendeskgarden/react-dropdowns 9.0.0-next.11 → 9.0.0-next.13

package/dist/esm/views/combobox/StyledOptionIcon.js

@@ -6,9 +6,31 @@
 */
 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 = 'dropdowns.combobox.option.icon';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isDisabled,
+    $type
+  } = _ref;
+  let variable;
+  if ($isDisabled) {
+    variable = 'foreground.disabled';
+  } else if ($type === 'danger') {
+    variable = 'foreground.danger';
+  } else if ($type === 'add') {
+    variable = 'foreground.primary';
+  } else {
+    variable = 'foreground.subtle';
+  }
+  const color = getColor({
+    theme,
+    variable
+  });
+  return css(["color:", ";"], color);
+};
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
@@ -17,11 +39,11 @@ const sizeStyles = props => {
 };
 const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledOptionIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/views/combobox/StyledOptionMeta.js

@@ -5,11 +5,19 @@
 * 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 = 'dropdowns.combobox.option.meta';
-const colorStyles = props => {
-  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    isDisabled
+  } = _ref;
+  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const color = getColor({
+    theme,
+    variable
+  });
   return css(["color:", ";"], color);
 };
 const sizeStyles = props => {
@@ -19,7 +27,7 @@ const sizeStyles = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"

package/dist/esm/views/combobox/StyledOptionTypeIcon.js

@@ -6,19 +6,29 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledOption, getMinHeight } from './StyledOption.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
-const colorStyles = props => {
-  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  const opacity = $type && $type !== 'danger' ? 1 : 0;
   let color;
-  if (props.$type === 'add' || props.$type === 'danger') {
+  if ($type === 'add') {
     color = 'inherit';
-  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
-    color = getColorV8('neutralHue', 600, props.theme);
+  } else if ($type === 'header' || $type === 'next' || $type === 'previous') {
+    color = getColor({
+      theme,
+      variable: 'foreground.subtle'
+    });
   } else {
-    color = getColorV8('primaryHue', 600, props.theme);
+    color = getColor({
+      theme,
+      variable: 'foreground.primary'
+    });
   }
   return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
 };
@@ -36,7 +46,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"

package/dist/esm/views/combobox/StyledTag.js

@@ -6,17 +6,20 @@
 */
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Tag } from '@zendeskgarden/react-tags';
 
 const COMPONENT_ID = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
-})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColorV8('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor({
+  theme: props.theme,
+  variable: 'foreground.disabled'
+}), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTag.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/views/combobox/StyledTagsButton.js

@@ -5,18 +5,24 @@
 * 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';
 import { StyledValue } from './StyledValue.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.tags_button';
-const colorStyles = props => {
-  const color = getColorV8('primaryHue', 600, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
   return css(["color:", ";&:disabled{color:inherit;}"], color);
 };
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"

package/dist/esm/views/combobox/StyledTrigger.js

@@ -6,58 +6,89 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { getHeight } from './StyledInput.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.trigger';
-const colorStyles = props => {
-  const SHADE = 600;
-  let hue = 'neutralHue';
-  if (props.validation === 'success') {
-    hue = 'successHue';
-  } else if (props.validation === 'warning') {
-    hue = 'warningHue';
-  } else if (props.validation === 'error') {
-    hue = 'dangerHue';
-  }
-  const backgroundColor = props.isBare ? 'transparent' : getColorV8('background', 600 , props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    validation,
+    isBare,
+    isLabelHovered,
+    focusInset
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundColor = isBare ? 'transparent' : getColor({
+    theme,
+    variable: 'background.default'
+  });
   let borderColor;
+  let borderVariable;
   let hoverBorderColor;
   let focusBorderColor;
-  let focusShade;
-  if (props.validation) {
-    borderColor = getColorV8(hue, SHADE, props.theme);
-    hoverBorderColor = borderColor;
-    if (props.validation === 'warning') {
-      focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
-      focusShade = SHADE + 100;
-    } else {
-      focusBorderColor = borderColor;
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
     }
+    borderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+    hoverBorderColor = borderColor;
+    focusBorderColor = borderColor;
   } else {
-    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+    borderColor = getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    borderVariable = 'border.primaryEmphasis';
+    hoverBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = props.isBare ? undefined : getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
+  const disabledBackgroundColor = isBare ? undefined : getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   const focusSelector = `
     &:focus-within:not([aria-disabled='true']),
     &:focus-visible
   `;
-  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, getColorV8('foreground', 600 , props.theme), hoverBorderColor, focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, focusStyles({
+    theme,
+    inset: focusInset,
     color: {
-      hue: focusBorderColor,
-      shade: focusShade
+      variable: borderVariable
     },
     selector: focusSelector,
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !props.isBare
+    condition: !isBare
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles = props => {
@@ -82,7 +113,7 @@ const sizeStyles = props => {
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"

package/dist/esm/views/combobox/StyledValue.js

@@ -5,17 +5,24 @@
 * 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';
 import { sizeStyles } from './StyledInput.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.value';
-const colorStyles = props => {
-  const foregroundColor = props.isPlaceholder && getColorV8('neutralHue', 400, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    isPlaceholder
+  } = _ref;
+  const foregroundColor = isPlaceholder && getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   return css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"

package/dist/esm/views/menu/StyledFloatingMenu.js

@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
 const COMPONENT_ID = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"

package/dist/esm/views/menu/StyledItem.js

@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
 const COMPONENT_ID = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"

package/dist/esm/views/menu/StyledItemContent.js

@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
 const COMPONENT_ID = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"

package/dist/esm/views/menu/StyledItemGroup.js

@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
 const COMPONENT_ID = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"

package/dist/esm/views/menu/StyledItemIcon.js

@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
 const COMPONENT_ID = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"

package/dist/esm/views/menu/StyledItemMeta.js

@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
 const COMPONENT_ID = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"

package/dist/esm/views/menu/StyledItemTypeIcon.js

@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"

package/dist/esm/views/menu/StyledMenu.js

@@ -11,13 +11,13 @@ import { StyledListbox } from '../combobox/StyledListbox.js';
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
 })(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, {
   size: `${props.theme.space.base * 2}px`,
-  inset: '2px',
+  inset: '1.5px',
   animationModifier: '[data-garden-animate-arrow="true"]'
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledMenu.defaultProps = {

package/dist/esm/views/menu/StyledSeparator.js

@@ -11,7 +11,7 @@ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"