@zendeskgarden/react-dropdowns.legacy 9.0.0-next.18 → 9.0.0-next.20

package/dist/esm/styled/items/StyledAddItem.js

@@ -5,17 +5,20 @@
 * 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.add_item';
 const StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
-})(["color:", ";", ";"], props => !props.disabled && getColorV8('primaryHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["color:", ";", ";"], props => !props.disabled && getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledAddItem.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/StyledItem.js

@@ -5,8 +5,7 @@
 * 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 { rgba } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item';
 const getItemPaddingVertical = props => {
@@ -16,22 +15,33 @@ const getItemPaddingVertical = props => {
   return `${props.theme.space.base * 2}px`;
 };
 const getColorStyles = props => {
+  const backgroundColor = props.isFocused ? getColor({
+    theme: props.theme,
+    variable: 'background.primaryEmphasis',
+    transparency: props.theme.opacity[100]
+  }) : 'inherit';
   let foregroundColor;
-  let backgroundColor;
   if (props.disabled) {
-    foregroundColor = getColorV8('neutralHue', 400, props.theme);
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.disabled'
+    });
   } else if (props.isDanger) {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.danger'
+    });
   } else {
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
-    backgroundColor = props.isFocused ? getColorV8('primaryHue', 600, props.theme, 0.08) : 'inherit';
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.default'
+    });
   }
   return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledItem = styled.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",

package/dist/esm/styled/items/StyledItemIcon.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { getItemPaddingVertical } from './StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.item_icon';
@@ -15,11 +15,14 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
 StyledItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/StyledItemMeta.js

@@ -5,16 +5,19 @@
 * 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item_meta';
 const StyledItemMeta = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColor({
+  theme: props.theme,
+  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+}), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledItemMeta.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/StyledNextIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.next_item_icon';
 const NextIconComponent = _ref => {
@@ -16,14 +16,17 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.0.0-next.18',
+    "data-garden-version": '9.0.0-next.20',
     className: className
   });
 };
 const StyledNextIcon = styled(NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1nzkdnq-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.disabled'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNextIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/StyledNextItem.js

@@ -12,7 +12,7 @@ import { StyledItemIcon } from './StyledItemIcon.js';
 const COMPONENT_ID = 'dropdowns.next_item';
 const StyledNextItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"

package/dist/esm/styled/items/StyledPreviousIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.previous_item_icon';
 const PreviousIconComponent = _ref => {
@@ -16,14 +16,17 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.0.0-next.18',
+    "data-garden-version": '9.0.0-next.20',
     className: className
   });
 };
 const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-1n1t07s-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPreviousIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/StyledPreviousItem.js

@@ -11,7 +11,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.previous_item';
 const StyledPreviousItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"

package/dist/esm/styled/items/header/StyledHeaderIcon.js

@@ -5,16 +5,19 @@
 * 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
-})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/items/header/StyledHeaderItem.js

@@ -17,7 +17,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"

package/dist/esm/styled/items/media/StyledMediaBody.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.media_body';
 const StyledMediaBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"

package/dist/esm/styled/items/media/StyledMediaFigure.js

@@ -22,7 +22,7 @@ _ref => {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"

package/dist/esm/styled/items/media/StyledMediaItem.js

@@ -11,7 +11,7 @@ import { StyledItem } from '../StyledItem.js';
 const COMPONENT_ID = 'dropdowns.media_item';
 const StyledMediaItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"

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

@@ -11,7 +11,7 @@ import { getArrowPosition } from '../../utils/garden-placements.js';
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",

package/dist/esm/styled/menu/StyledMenuWrapper.js

@@ -11,7 +11,7 @@ import { getMenuPosition } from '../../utils/garden-placements.js';
 const COMPONENT_ID = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",

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

@@ -5,17 +5,20 @@
 * 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.separator';
 const StyledSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-oncsf0-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColor({
+  theme: props.theme,
+  variable: 'border.subtle'
+})}`, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSeparator.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/multiselect/StyledMultiselectInput.js

@@ -20,7 +20,7 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",

package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"

package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js

@@ -22,7 +22,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"

package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js

@@ -5,16 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isDisabled ? getColorV8('neutralHue', 400, props.theme) : getColorV8('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
+  theme: props.theme,
+  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
+}), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledMultiselectMoreAnchor.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/select/StyledFauxInput.js

@@ -11,7 +11,7 @@ import { FauxInput } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'dropdowns.faux_input';
 const StyledFauxInput = styled(FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({

package/dist/esm/styled/select/StyledInput.js

@@ -12,7 +12,7 @@ const COMPONENT_ID = 'dropdowns.input';
 const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",

package/dist/esm/styled/select/StyledSelect.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.select';
 const StyledSelect = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"

package/dist/index.cjs.js

@@ -289,7 +289,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$m = 'dropdowns.menu';
 const StyledMenu = styled__default.default.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
@@ -306,7 +306,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -325,12 +325,15 @@ StyledMenuWrapper.defaultProps = {
 const COMPONENT_ID$k = 'dropdowns.separator';
 const StyledSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-oncsf0-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${reactTheming.getColor({
+  theme: props.theme,
+  variable: 'border.subtle'
+})}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledSeparator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -343,22 +346,33 @@ const getItemPaddingVertical = props => {
   return `${props.theme.space.base * 2}px`;
 };
 const getColorStyles = props => {
+  const backgroundColor = props.isFocused ? reactTheming.getColor({
+    theme: props.theme,
+    variable: 'background.primaryEmphasis',
+    transparency: props.theme.opacity[100]
+  }) : 'inherit';
   let foregroundColor;
-  let backgroundColor;
   if (props.disabled) {
-    foregroundColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
+    foregroundColor = reactTheming.getColor({
+      theme: props.theme,
+      variable: 'foreground.disabled'
+    });
   } else if (props.isDanger) {
-    foregroundColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? polished.rgba(foregroundColor, 0.08) : 'inherit';
+    foregroundColor = reactTheming.getColor({
+      theme: props.theme,
+      variable: 'foreground.danger'
+    });
   } else {
-    foregroundColor = reactTheming.getColorV8('foreground', 600 , props.theme);
-    backgroundColor = props.isFocused ? reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08) : 'inherit';
+    foregroundColor = reactTheming.getColor({
+      theme: props.theme,
+      variable: 'foreground.default'
+    });
   }
   return styled.css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledItem = styled__default.default.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -371,11 +385,14 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.add_item';
 const StyledAddItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
-})(["color:", ";", ";"], props => !props.disabled && reactTheming.getColorV8('primaryHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["color:", ";", ";"], props => !props.disabled && reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledAddItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -383,11 +400,14 @@ StyledAddItem.defaultProps = {
 const COMPONENT_ID$h = 'dropdowns.item_meta';
 const StyledItemMeta = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => reactTheming.getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => reactTheming.getColor({
+  theme: props.theme,
+  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+}), props => props.theme.fontSizes.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledItemMeta.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -398,11 +418,14 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : reactTheming.getColorV8('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
 StyledItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -410,7 +433,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$f = 'dropdowns.next_item';
 const StyledNextItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"
@@ -442,14 +465,17 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '9.0.0-next.18',
+    "data-garden-version": '9.0.0-next.20',
     className: className
   });
 };
 const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1nzkdnq-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.disabled'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledNextIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -457,7 +483,7 @@ StyledNextIcon.defaultProps = {
 const COMPONENT_ID$d = 'dropdowns.previous_item';
 const StyledPreviousItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"
@@ -489,14 +515,17 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.0.0-next.18',
+    "data-garden-version": '9.0.0-next.20',
     className: className
   });
 };
 const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-1n1t07s-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledPreviousIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -504,11 +533,14 @@ StyledPreviousIcon.defaultProps = {
 const COMPONENT_ID$b = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
-})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledHeaderIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -522,7 +554,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"
@@ -534,7 +566,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.media_body';
 const StyledMediaBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"
@@ -557,7 +589,7 @@ _ref => {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"
@@ -569,7 +601,7 @@ StyledMediaFigure.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.media_item';
 const StyledMediaItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"
@@ -581,7 +613,7 @@ StyledMediaItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
 const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -596,7 +628,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
 const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -609,7 +641,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.select';
 const StyledSelect = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"
@@ -630,7 +662,7 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.20',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",
@@ -655,7 +687,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"
@@ -667,7 +699,7 @@ StyledMultiselectItemsContainer.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"
@@ -679,11 +711,14 @@ StyledMultiselectItemWrapper.defaultProps = {
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isDisabled ? reactTheming.getColorV8('neutralHue', 400, props.theme) : reactTheming.getColorV8('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
+  theme: props.theme,
+  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
+}), props => !props.isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledMultiselectMoreAnchor.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns.legacy",
-  "version": "9.0.0-next.18",
+  "version": "9.0.0-next.20",
   "description": "Components relating to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-selection": "^2.0.0",
     "@zendeskgarden/container-utilities": "^1.0.14",
-    "@zendeskgarden/react-forms": "^9.0.0-next.18",
+    "@zendeskgarden/react-forms": "^9.0.0-next.20",
     "downshift": "^7.0.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.18",
+    "@zendeskgarden/react-theming": "^9.0.0-next.20",
     "@zendeskgarden/svg-icons": "7.1.1",
     "lodash.debounce": "4.0.8"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "31680e30a7c9b1f2bd1f8f711f540dfaaf4ee4ec"
+  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
 }