diff --git a/package-lock.json b/package-lock.json
index 75643dbb00d..e26493b8793 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32986,6 +32986,48 @@
       "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "node_modules/netlify-cli/node_modules/@types/http-cache-semantics": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz",
@@ -33025,6 +33067,12 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "node_modules/netlify-cli/node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/@types/node": {
       "version": "20.9.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz",
@@ -33040,12 +33088,34 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "extraneous": true
+    },
+    "node_modules/netlify-cli/node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/@types/retry": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
     "node_modules/netlify-cli/node_modules/@types/yargs-parser": {
       "version": "20.2.1",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
@@ -33501,6 +33571,22 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/netlify-cli/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "extraneous": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/netlify-cli/node_modules/ajv-formats": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
@@ -36882,6 +36968,12 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/netlify-cli/node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/fast-json-stringify": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.7.0.tgz",
@@ -39390,6 +39482,12 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
diff --git a/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx b/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx
index 78484cca841..38383e37408 100644
--- a/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx
+++ b/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx
@@ -6,10 +6,10 @@
  */
 
 import React, { useRef } from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import styled from 'styled-components';
 import { Combobox, Field, Option } from '@zendeskgarden/react-dropdowns';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { Paragraph } from '@zendeskgarden/react-typography';
 
 interface IArgs {
@@ -20,13 +20,13 @@ export const StyledContainer = styled.div`
   position: relative;
   border: ${p => p.theme.borders.sm};
   border-radius: ${p => p.theme.borderRadii.md};
-  border-color: ${p => getColorV8('neutralHue', 300, p.theme)};
+  border-color: ${p => getColor({ theme: p.theme, variable: 'border.default' })};
   padding: ${p => p.theme.space.md};
   max-height: 300px;
   overflow: clip;
 `;
 
-export const ListboxStory: Story<IArgs> = ({ listboxAppendToNode }) => {
+export const ListboxStory: StoryFn<IArgs> = ({ listboxAppendToNode }) => {
   const portalNode = useRef<HTMLDivElement>(null);
 
   return (
diff --git a/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx b/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx
index ec519abcff7..02ef9e016aa 100644
--- a/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx
+++ b/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx
@@ -8,12 +8,13 @@
 import React, { HTMLAttributes, InputHTMLAttributes, forwardRef } from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import userEvent from '@testing-library/user-event';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 import { IComboboxProps, ISelectedOption } from '../../types';
 import { Combobox } from './Combobox';
 import { OptGroup } from './OptGroup';
 import { Option } from './Option';
 import { Field } from './Field';
+import { rgba } from 'polished';
 
 interface ITestComboboxProps extends IComboboxProps {
   fieldTestId?: string;
@@ -99,7 +100,7 @@ describe('Combobox', () => {
 
     await user.hover(label);
 
-    expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.blue[600], {
+    expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.blue[700], {
       modifier: ':hover'
     });
   });
@@ -228,9 +229,13 @@ describe('Combobox', () => {
     const input = getByTestId('input');
 
     expect(trigger).toHaveAttribute('aria-disabled', 'true');
-    expect(trigger).toHaveStyleRule('background-color', PALETTE_V8.grey[100], {
-      modifier: '[aria-disabled="true"]'
-    });
+    expect(trigger).toHaveStyleRule(
+      'background-color',
+      rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[100]),
+      {
+        modifier: '[aria-disabled="true"]'
+      }
+    );
     expect(input).toHaveAttribute('disabled');
   });
 
@@ -451,8 +456,8 @@ describe('Combobox', () => {
       const combobox = getByTestId('combobox');
       const message = getByTestId('message');
 
-      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]);
-      expect(message).toHaveStyleRule('color', PALETTE_V8.green[600]);
+      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.green[700]);
+      expect(message).toHaveStyleRule('color', PALETTE.green[700]);
       expect(message.firstChild).not.toBeNull();
     });
 
@@ -461,8 +466,8 @@ describe('Combobox', () => {
       const combobox = getByTestId('combobox');
       const message = getByTestId('message');
 
-      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.yellow[600]);
-      expect(message).toHaveStyleRule('color', PALETTE_V8.yellow[700]);
+      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[700]);
+      expect(message).toHaveStyleRule('color', PALETTE.yellow[700]);
       expect(message.firstChild).not.toBeNull();
     });
 
@@ -471,8 +476,8 @@ describe('Combobox', () => {
       const combobox = getByTestId('combobox');
       const message = getByTestId('message');
 
-      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]);
-      expect(message).toHaveStyleRule('color', PALETTE_V8.red[600]);
+      expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.red[700]);
+      expect(message).toHaveStyleRule('color', PALETTE.red[700]);
       expect(message.firstChild).not.toBeNull();
     });
   });
diff --git a/packages/dropdowns/src/elements/combobox/Option.spec.tsx b/packages/dropdowns/src/elements/combobox/Option.spec.tsx
index 974698fb2b3..a824898612f 100644
--- a/packages/dropdowns/src/elements/combobox/Option.spec.tsx
+++ b/packages/dropdowns/src/elements/combobox/Option.spec.tsx
@@ -7,7 +7,7 @@
 
 import React, { HTMLAttributes, forwardRef } from 'react';
 import { render } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { IOptionProps } from '../../types';
 import { Field } from './Field';
 import { Combobox } from './Combobox';
@@ -84,7 +84,7 @@ describe('Option', () => {
     const tag = getByTestId('tag');
 
     expect(option).toHaveAttribute('aria-disabled', 'true');
-    expect(option).toHaveStyleRule('color', PALETTE_V8.grey[400], {
+    expect(option).toHaveStyleRule('color', PALETTE.grey[600], {
       modifier: '[aria-disabled="true"]'
     });
     expect(tag).not.toHaveAttribute('tabindex');
@@ -127,7 +127,7 @@ describe('Option', () => {
       const option = getByTestId('option');
 
       expect(option.firstChild).toHaveStyleRule('opacity', '1');
-      expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
+      expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
       expect(option.firstChild).toHaveStyleRule('left', '12px');
     });
 
@@ -136,7 +136,7 @@ describe('Option', () => {
       const option = getByTestId('option');
 
       expect(option.firstChild).toHaveStyleRule('opacity', '1');
-      expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
+      expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
       expect(option.firstChild).toHaveStyleRule('right', '12px');
     });
 
@@ -144,14 +144,14 @@ describe('Option', () => {
       const { getByTestId } = render(<TestOption type="add" />);
       const option = getByTestId('option');
 
-      expect(option).toHaveStyleRule('color', PALETTE_V8.blue[600]);
+      expect(option).toHaveStyleRule('color', PALETTE.blue[700]);
     });
 
     it('renders "danger" as expected', () => {
       const { getByTestId } = render(<TestOption type="danger" />);
       const option = getByTestId('option');
 
-      expect(option).toHaveStyleRule('color', PALETTE_V8.red[600]);
+      expect(option).toHaveStyleRule('color', PALETTE.red[700]);
     });
   });
 
@@ -176,7 +176,7 @@ describe('Option', () => {
       );
       const meta = getByTestId('meta');
 
-      expect(meta).toHaveStyleRule('color', PALETTE_V8.grey[600]);
+      expect(meta).toHaveStyleRule('color', PALETTE.grey[700]);
     });
   });
 });
diff --git a/packages/dropdowns/src/elements/combobox/Option.tsx b/packages/dropdowns/src/elements/combobox/Option.tsx
index 18497bb1e46..497f793ed95 100644
--- a/packages/dropdowns/src/elements/combobox/Option.tsx
+++ b/packages/dropdowns/src/elements/combobox/Option.tsx
@@ -26,7 +26,7 @@ import { toOption } from './utils';
 
 const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
   ({ children, icon, isDisabled, isHidden, isSelected, label, type, value, ...props }, ref) => {
-    const contextValue = useMemo(() => ({ isDisabled }), [isDisabled]);
+    const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);
     const { activeValue, getOptionProps, isCompact } = useComboboxContext();
     const isActive = value === activeValue;
     const optionRef = useRef<HTMLLIElement>(null);
@@ -76,7 +76,11 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
           <StyledOptionTypeIcon $isCompact={isCompact} $type={type}>
             {renderActionIcon(type)}
           </StyledOptionTypeIcon>
-          {icon && <StyledOptionIcon>{icon}</StyledOptionIcon>}
+          {icon && (
+            <StyledOptionIcon $isDisabled={isDisabled} $type={type}>
+              {icon}
+            </StyledOptionIcon>
+          )}
           <StyledOptionContent>{children || label || value}</StyledOptionContent>
         </StyledOption>
       </OptionContext.Provider>
diff --git a/packages/dropdowns/src/elements/menu/Item.tsx b/packages/dropdowns/src/elements/menu/Item.tsx
index 5039fd13a82..8109d4fa069 100644
--- a/packages/dropdowns/src/elements/menu/Item.tsx
+++ b/packages/dropdowns/src/elements/menu/Item.tsx
@@ -78,7 +78,7 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
       }
     };
 
-    const contextValue = useMemo(() => ({ isDisabled }), [isDisabled]);
+    const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);
 
     return (
       <ItemContext.Provider value={contextValue}>
@@ -93,7 +93,11 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
           <StyledItemTypeIcon $isCompact={isCompact} $type={type}>
             {renderActionIcon(type)}
           </StyledItemTypeIcon>
-          {icon && <StyledItemIcon>{icon}</StyledItemIcon>}
+          {icon && (
+            <StyledItemIcon $isDisabled={isDisabled} $type={type}>
+              {icon}
+            </StyledItemIcon>
+          )}
           <StyledItemContent>{children || label}</StyledItemContent>
         </StyledItem>
       </ItemContext.Provider>
diff --git a/packages/dropdowns/src/elements/menu/Menu.spec.tsx b/packages/dropdowns/src/elements/menu/Menu.spec.tsx
index 0427e43ec6b..d4f340a2405 100644
--- a/packages/dropdowns/src/elements/menu/Menu.spec.tsx
+++ b/packages/dropdowns/src/elements/menu/Menu.spec.tsx
@@ -14,7 +14,7 @@ import { Menu } from './Menu';
 import { ItemGroup } from './ItemGroup';
 import { Item } from './Item';
 import { Separator } from './Separator';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 interface TestMenuProps extends Omit<IMenuProps, 'button'> {
   button?: IMenuProps['button'];
@@ -311,7 +311,7 @@ describe('Menu', () => {
       const item = getByTestId('item');
       const icon = item.querySelector('svg')!;
 
-      expect(item).toHaveStyleRule('color', PALETTE_V8.red[600]);
+      expect(item).toHaveStyleRule('color', PALETTE.red[700]);
       expect(icon).not.toBeVisible();
     });
 
diff --git a/packages/dropdowns/src/views/combobox/StyledInput.ts b/packages/dropdowns/src/views/combobox/StyledInput.ts
index 363f6a18942..fad3c65bd0f 100644
--- a/packages/dropdowns/src/views/combobox/StyledInput.ts
+++ b/packages/dropdowns/src/views/combobox/StyledInput.ts
@@ -10,8 +10,8 @@ import { hideVisually, math } from 'polished';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8,
-  getLineHeight
+  getLineHeight,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.input';
@@ -23,8 +23,8 @@ interface IStyledInputProps extends ThemeProps<DefaultTheme> {
   isMultiselectable?: boolean;
 }
 
-const colorStyles = (props: IStyledInputProps) => {
-  const placeholderColor = getColorV8('neutralHue', 400, props.theme);
+const colorStyles = ({ theme }: IStyledInputProps) => {
+  const placeholderColor = getColor({ theme, variable: 'foreground.disabled' });
 
   return css`
     background-color: inherit;
diff --git a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts
index 9c0a3948a7f..220028385ae 100644
--- a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts
+++ b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts
@@ -10,8 +10,8 @@ import { math } from 'polished';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8,
-  StyledBaseIcon
+  StyledBaseIcon,
+  getColor
 } from '@zendeskgarden/react-theming';
 import { getHeight as getInputHeight } from './StyledInput';
 import { StyledTrigger } from './StyledTrigger';
@@ -26,24 +26,25 @@ interface IStyledInputIconProps extends ThemeProps<DefaultTheme> {
   $isRotated?: boolean;
 }
 
-const colorStyles = (props: IStyledInputIconProps) => {
-  const color = getColorV8('neutralHue', 600, props.theme);
-  const focusColor = getColorV8('neutralHue', 700, props.theme);
-  const disabledColor = getColorV8('neutralHue', 400, props.theme);
+const colorStyles = ({ theme, $isLabelHovered }: IStyledInputIconProps) => {
+  const options = { theme, variable: 'foreground.subtle' };
+  const color = getColor(options);
+  const focusColor = getColor({ ...options, dark: { offset: -100 }, light: { offset: 100 } });
+  const disabledColor = getColor({ theme, variable: 'foreground.disabled' });
 
   return css`
-    color: ${props.$isLabelHovered ? focusColor : color};
+    color: ${$isLabelHovered ? focusColor : color};
 
     /* stylelint-disable selector-no-qualifying-type */
-    ${StyledTrigger}:hover &,
-    ${StyledTrigger}:focus-within &,
-    ${StyledTrigger}:focus & {
+    ${StyledTrigger}:hover &&,
+    ${StyledTrigger}:focus-within &&,
+    ${StyledTrigger}:focus && {
       color: ${focusColor};
     }
     /* stylelint-enable selector-no-qualifying-type */
 
     /* stylelint-disable-next-line */
-    ${StyledTrigger}[aria-disabled='true'] & {
+    ${StyledTrigger}[aria-disabled='true'] && {
       color: ${disabledColor};
     }
   `;
diff --git a/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts b/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts
index be10fbe1d7c..637808d66e1 100644
--- a/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts
+++ b/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts
@@ -6,12 +6,12 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, 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.separator';
 
-const colorStyles = (props: ThemeProps<DefaultTheme>) => {
-  const backgroundColor = getColorV8('neutralHue', 200, props.theme);
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  const backgroundColor = getColor({ theme, variable: 'border.subtle' });
 
   return css`
     background-color: ${backgroundColor};
diff --git a/packages/dropdowns/src/views/combobox/StyledOption.ts b/packages/dropdowns/src/views/combobox/StyledOption.ts
index 5952e1a3467..fa4b1838051 100644
--- a/packages/dropdowns/src/views/combobox/StyledOption.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOption.ts
@@ -7,7 +7,7 @@
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { OptionType } from '../../types';
 
 const COMPONENT_ID = 'dropdowns.combobox.option';
@@ -18,28 +18,32 @@ export interface IStyledOptionProps extends ThemeProps<DefaultTheme> {
   $type?: OptionType | 'header' | 'group';
 }
 
-const colorStyles = (props: IStyledOptionProps) => {
+const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
   let backgroundColor;
   let boxShadow;
 
-  if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
-    const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
+  if (isActive && $type !== 'group' && $type !== 'header') {
+    const variable = 'background.primaryEmphasis';
 
-    backgroundColor = getColorV8(hue, 600, props.theme, 0.08);
+    backgroundColor = getColor({ theme, variable, transparency: theme.opacity[100] });
     boxShadow = `inset ${
-      props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md
-    } 0 ${getColorV8(hue, 600, props.theme)}`;
+      theme.rtl ? `-${theme.shadowWidths.md}` : theme.shadowWidths.md
+    } 0 ${getColor({ theme, variable })}`;
   }
 
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  let foregroundColor = getColorV8('foreground', 600 /* default shade */, props.theme);
+  let foregroundVariable;
 
-  if (props.$type === 'add') {
-    foregroundColor = getColorV8('primaryHue', 600, props.theme)!;
-  } else if (props.$type === 'danger') {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme)!;
+  if ($type === 'add') {
+    foregroundVariable = 'foreground.primary';
+  } else if ($type === 'danger') {
+    foregroundVariable = 'foreground.danger';
+  } else {
+    foregroundVariable = 'foreground.default';
   }
 
+  const foregroundColor = getColor({ theme, variable: foregroundVariable });
+  const disabledForegroundColor = getColor({ theme, variable: 'foreground.disabled' });
+
   return css`
     box-shadow: ${boxShadow};
     background-color: ${backgroundColor};
diff --git a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts
index a4bdf8192fb..163def55dd1 100644
--- a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts
@@ -10,11 +10,38 @@ import { math } from 'polished';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  StyledBaseIcon
+  StyledBaseIcon,
+  getColor
 } from '@zendeskgarden/react-theming';
+import { OptionType } from '../../types';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.icon';
 
+export interface IStyledOptionIconProps extends ThemeProps<DefaultTheme> {
+  $isDisabled?: boolean;
+  $type?: OptionType;
+}
+
+const colorStyles = ({ theme, $isDisabled, $type }: IStyledOptionIconProps) => {
+  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: ThemeProps<DefaultTheme>) => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
@@ -32,11 +59,13 @@ const sizeStyles = (props: ThemeProps<DefaultTheme>) => {
 export const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledOptionIconProps>`
   flex-shrink: 0;
 
   ${sizeStyles};
 
+  ${colorStyles};
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
diff --git a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
index 9262efc7de7..e29f0d333e8 100644
--- a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, 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';
 
@@ -14,8 +14,9 @@ export interface IStyledOptionMetaProps extends ThemeProps<DefaultTheme> {
   isDisabled?: boolean;
 }
 
-const colorStyles = (props: IStyledOptionMetaProps) => {
-  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+const colorStyles = ({ theme, isDisabled }: IStyledOptionMetaProps) => {
+  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const color = getColor({ theme, variable });
 
   return css`
     color: ${color};
diff --git a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts
index 0032c196f40..5febf6848fa 100644
--- a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts
+++ b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts
@@ -9,9 +9,9 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
 import { math } from 'polished';
 import {
   retrieveComponentStyles,
-  getColorV8,
   DEFAULT_THEME,
-  StyledBaseIcon
+  StyledBaseIcon,
+  getColor
 } from '@zendeskgarden/react-theming';
 import { StyledOption, getMinHeight as getOptionMinHeight } from './StyledOption';
 import { OptionType } from '../../types';
@@ -23,16 +23,16 @@ export interface IStyledOptionTypeIconProps extends ThemeProps<DefaultTheme> {
   $type?: OptionType | 'header';
 }
 
-const colorStyles = (props: IStyledOptionTypeIconProps) => {
-  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
+const colorStyles = ({ theme, $type }: IStyledOptionTypeIconProps) => {
+  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`
diff --git a/packages/dropdowns/src/views/combobox/StyledTag.ts b/packages/dropdowns/src/views/combobox/StyledTag.ts
index 877cc87480f..9fb029f3a7d 100644
--- a/packages/dropdowns/src/views/combobox/StyledTag.ts
+++ b/packages/dropdowns/src/views/combobox/StyledTag.ts
@@ -7,7 +7,7 @@
 
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { Tag } from '@zendeskgarden/react-tags';
 
 const COMPONENT_ID = 'dropdowns.combobox.tag';
@@ -17,7 +17,8 @@ export const StyledTag = styled(Tag).attrs({
   'data-garden-version': PACKAGE_VERSION
 })`
   &[aria-disabled='true'] {
-    color: ${props => (props.hue ? undefined : getColorV8('neutralHue', 400, props.theme))};
+    color: ${props =>
+      props.hue ? undefined : getColor({ theme: props.theme, variable: 'foreground.disabled' })};
   }
 
   &[hidden] {
diff --git a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
index e2e35d701d2..082a89064ce 100644
--- a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
+++ b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
-import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledValue } from './StyledValue';
 
 const COMPONENT_ID = 'dropdowns.combobox.tags_button';
@@ -15,8 +15,8 @@ interface IStyledTagsButtonProps extends ThemeProps<DefaultTheme> {
   isCompact?: boolean;
 }
 
-const colorStyles = (props: IStyledTagsButtonProps) => {
-  const color = getColorV8('primaryHue', 600, props.theme);
+const colorStyles = ({ theme }: IStyledTagsButtonProps) => {
+  const color = getColor({ theme, variable: 'foreground.primary' });
 
   return css`
     color: ${color};
diff --git a/packages/dropdowns/src/views/combobox/StyledTrigger.ts b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
index 56cbe3bc4a8..ed9af421475 100644
--- a/packages/dropdowns/src/views/combobox/StyledTrigger.ts
+++ b/packages/dropdowns/src/views/combobox/StyledTrigger.ts
@@ -10,8 +10,8 @@ import { math } from 'polished';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8,
-  focusStyles
+  focusStyles,
+  getColor
 } from '@zendeskgarden/react-theming';
 import { Validation } from '../../types';
 import { getHeight as getInputHeight } from './StyledInput';
@@ -30,68 +30,72 @@ interface IStyledTriggerProps extends ThemeProps<DefaultTheme> {
   validation?: Validation;
 }
 
-const colorStyles = (props: IStyledTriggerProps) => {
-  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
+const colorStyles = ({
+  theme,
+  validation,
+  isBare,
+  isLabelHovered,
+  focusInset
+}: IStyledTriggerProps) => {
+  const foregroundColor = getColor({ theme, variable: 'foreground.default' });
+  const backgroundColor = isBare
     ? 'transparent'
-    : getColorV8('background', 600 /* default shade */, props.theme);
+    : getColor({ theme, variable: 'background.default' });
   let borderColor: string | undefined;
+  let borderVariable: string | undefined;
   let hoverBorderColor: string | undefined;
   let focusBorderColor: string | undefined;
-  let focusShade: number | undefined;
-
-  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
+  const disabledBackgroundColor = isBare
     ? undefined
-    : getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
+    : 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: ${props.isLabelHovered ? hoverBorderColor : borderColor};
+    border-color: ${isLabelHovered ? hoverBorderColor : borderColor};
     background-color: ${backgroundColor};
-    color: ${getColorV8('foreground', 600 /* default shade */, props.theme)};
+    color: ${foregroundColor};
 
     &:hover {
       border-color: ${hoverBorderColor};
     }
 
     ${focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      color: { hue: focusBorderColor, shade: focusShade },
+      theme,
+      inset: focusInset,
+      color: { variable: borderVariable },
       selector: focusSelector,
       styles: { borderColor: focusBorderColor },
-      condition: !props.isBare
+      condition: !isBare
     })}
 
     &[aria-disabled='true'] {
diff --git a/packages/dropdowns/src/views/combobox/StyledValue.ts b/packages/dropdowns/src/views/combobox/StyledValue.ts
index fe1d3c71b64..bf3113e174f 100644
--- a/packages/dropdowns/src/views/combobox/StyledValue.ts
+++ b/packages/dropdowns/src/views/combobox/StyledValue.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, 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';
 
 const COMPONENT_ID = 'dropdowns.combobox.value';
@@ -21,8 +21,8 @@ interface IStyledValueProps extends ThemeProps<DefaultTheme> {
   isPlaceholder?: boolean;
 }
 
-const colorStyles = (props: IStyledValueProps) => {
-  const foregroundColor = props.isPlaceholder && getColorV8('neutralHue', 400, props.theme);
+const colorStyles = ({ theme, isPlaceholder }: IStyledValueProps) => {
+  const foregroundColor = isPlaceholder && getColor({ theme, variable: 'foreground.disabled' });
 
   return css`
     color: ${foregroundColor};
diff --git a/packages/forms/src/styled/common/StyledHint.ts b/packages/forms/src/styled/common/StyledHint.ts
index 0d38b99562e..96530c602a3 100644
--- a/packages/forms/src/styled/common/StyledHint.ts
+++ b/packages/forms/src/styled/common/StyledHint.ts
@@ -7,10 +7,10 @@
 
 import styled from 'styled-components';
 import {
-  getColorV8,
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.input_hint';
@@ -23,7 +23,7 @@ export const StyledHint = styled.div.attrs(props => ({
   display: block;
   vertical-align: middle; /* support hint inline with input layout */
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('neutralHue', 600, props.theme)};
+  color: ${props => getColor({ theme: props.theme, variable: 'foreground.subtle' })};
   font-size: ${props => props.theme.fontSizes.md};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/forms/src/styled/common/StyledLabel.ts b/packages/forms/src/styled/common/StyledLabel.ts
index 105eaf68d4c..bcb01211a54 100644
--- a/packages/forms/src/styled/common/StyledLabel.ts
+++ b/packages/forms/src/styled/common/StyledLabel.ts
@@ -11,7 +11,7 @@ import {
   retrieveComponentStyles,
   DEFAULT_THEME,
   getLineHeight,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.input_label';
@@ -31,7 +31,7 @@ export const StyledLabel = styled.label.attrs(props => ({
   direction: ${props => props.theme.rtl && 'rtl'};
   vertical-align: middle; /* support label inline with input layout */
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${props => getColor({ theme: props.theme, variable: 'foreground.default' })};
   font-size: ${props => props.theme.fontSizes.md};
   font-weight: ${props =>
     props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold};
diff --git a/packages/forms/src/styled/common/StyledMessage.spec.tsx b/packages/forms/src/styled/common/StyledMessage.spec.tsx
index 434289f3ba2..68bdc03fc8b 100644
--- a/packages/forms/src/styled/common/StyledMessage.spec.tsx
+++ b/packages/forms/src/styled/common/StyledMessage.spec.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledMessage } from './StyledMessage';
 import { StyledLabel } from './StyledLabel';
 
@@ -28,19 +28,19 @@ describe('StyledMessage', () => {
     it('renders "success" styling if provided', () => {
       const { container } = render(<StyledMessage validation="success" />);
 
-      expect(container.firstChild).toHaveStyleRule('color', getColorV8('successHue', 600));
+      expect(container.firstChild).toHaveStyleRule('color', PALETTE.green[700]);
     });
 
     it('renders "warning" styling if provided', () => {
       const { container } = render(<StyledMessage validation="warning" />);
 
-      expect(container.firstChild).toHaveStyleRule('color', getColorV8('warningHue', 700));
+      expect(container.firstChild).toHaveStyleRule('color', PALETTE.yellow[700]);
     });
 
     it('renders "error" styling if provided', () => {
       const { container } = render(<StyledMessage validation="error" />);
 
-      expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue', 600));
+      expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
     });
   });
 
diff --git a/packages/forms/src/styled/common/StyledMessage.ts b/packages/forms/src/styled/common/StyledMessage.ts
index 3622eec8ea2..6d6a00aa9b7 100644
--- a/packages/forms/src/styled/common/StyledMessage.ts
+++ b/packages/forms/src/styled/common/StyledMessage.ts
@@ -10,8 +10,8 @@ import { math } from 'polished';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8,
-  getLineHeight
+  getLineHeight,
+  getColor
 } from '@zendeskgarden/react-theming';
 import { Validation } from '../../types';
 import { StyledMessageIcon } from './StyledMessageIcon';
@@ -21,29 +21,48 @@ export interface IStyledMessageProps {
   validation?: Validation;
 }
 
-const validationStyles = (props: IStyledMessageProps & ThemeProps<DefaultTheme>) => {
-  const rtl = props.theme.rtl;
-  const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
-  let color;
-
-  if (props.validation === 'error') {
-    color = getColorV8('dangerHue', 600, props.theme);
-  } else if (props.validation === 'success') {
-    color = getColorV8('successHue', 600, props.theme);
-  } else if (props.validation === 'warning') {
-    color = getColorV8('warningHue', 700, props.theme);
+const COMPONENT_ID = 'forms.input_message';
+
+const colorStyles = ({ theme, validation }: IStyledMessageProps & ThemeProps<DefaultTheme>) => {
+  let variable;
+
+  if (validation === 'error') {
+    variable = 'foreground.danger';
+  } else if (validation === 'success') {
+    variable = 'foreground.success';
+  } else if (validation === 'warning') {
+    variable = 'foreground.warning';
   } else {
-    color = getColorV8('neutralHue', 700, props.theme);
+    variable = 'foreground.subtle';
   }
 
+  const foregroundColor = getColor({ theme, variable });
+
   return css`
-    /* stylelint-disable-next-line property-no-unknown */
-    padding-${rtl ? 'right' : 'left'}: ${props.validation && padding};
-    color: ${color};
+    color: ${foregroundColor};
   `;
 };
 
-const COMPONENT_ID = 'forms.input_message';
+const sizeStyles = ({ theme, validation }: IStyledMessageProps & ThemeProps<DefaultTheme>) => {
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
+  const marginTop = `${theme.space.base}px`;
+  const paddingHorizontal = validation
+    ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`)
+    : undefined;
+
+  return css`
+    /* stylelint-disable-next-line property-no-unknown */
+    padding-${theme.rtl ? 'right' : 'left'}: ${paddingHorizontal};
+    line-height: ${lineHeight};
+    font-size: ${fontSize};
+
+    /* stylelint-disable-next-line */
+    ${StyledLabel}:not([hidden]) + & {
+      margin-top: ${marginTop};
+    }
+  `;
+};
 
 export const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': (props as any)['data-garden-id'] || COMPONENT_ID,
@@ -53,10 +72,10 @@ export const StyledMessage = styled.div.attrs(props => ({
   display: inline-block;
   position: relative;
   vertical-align: middle; /* support message inline with input layout */
-  line-height: ${props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm)};
-  font-size: ${props => props.theme.fontSizes.sm};
 
-  ${props => validationStyles(props)};
+  ${sizeStyles};
+
+  ${colorStyles};
 
   & ${StyledMessageIcon} {
     position: absolute;
@@ -67,7 +86,6 @@ export const StyledMessage = styled.div.attrs(props => ({
   /* stylelint-disable-next-line */
   ${StyledLabel}:not([hidden]) + & {
     display: block;
-    margin-top: ${props => math(`${props.theme.space.base} * 1px`)};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/theming/src/utils/menuStyles.ts b/packages/theming/src/utils/menuStyles.ts
index 3712d80656c..5123c3118f3 100644
--- a/packages/theming/src/utils/menuStyles.ts
+++ b/packages/theming/src/utils/menuStyles.ts
@@ -50,6 +50,28 @@ const animationStyles = (position: MenuPosition, options: MenuOptions) => {
   `;
 };
 
+const colorStyles = (theme: DefaultTheme) => {
+  const backgroundColor = getColor({ theme, variable: 'background.raised' });
+  const borderColor = getColor({ theme, variable: 'border.default' });
+  const boxShadowColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    dark: { transparency: theme.opacity[800] },
+    light: { transparency: theme.opacity[200] }
+  });
+  const boxShadowBlurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 5 : 6)}px`;
+  const boxShadowOffsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
+  const foregroundColor = getColor({ theme, variable: 'foreground.default' });
+
+  return css`
+    border-color: ${borderColor};
+    box-shadow: ${theme.shadows.lg(boxShadowOffsetY, boxShadowBlurRadius, boxShadowColor)};
+    background-color: ${backgroundColor};
+    color: ${foregroundColor};
+  `;
+};
+
 const hiddenStyles = (options: MenuOptions) => {
   const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
 
@@ -112,23 +134,18 @@ export default function menuStyles(position: MenuPosition, options: MenuOptions
       position: relative; /* [2] */
       margin: 0; /* [3] */
       box-sizing: border-box;
-      border: ${theme.borders.sm} ${getColor({ theme, variable: 'border.default' })};
+      border: ${theme.borders.sm};
       border-radius: ${theme.borderRadii.md};
-      box-shadow: ${theme.shadows.lg(
-        `${theme.space.base * 5}px`,
-        `${theme.space.base * 7.5}px`,
-        getColor({ theme, hue: 'chromeHue', shade: 600, transparency: 0.15 })
-      )};
-      background-color: ${getColor({ theme, variable: 'background.raised' })};
       cursor: default; /* [4] */
       padding: 0; /* [3] */
       text-align: ${theme.rtl ? 'right' : 'left'};
       white-space: normal; /* [5] */
-      color: ${getColor({ theme, variable: 'foreground.default' })};
       font-size: ${theme.fontSizes.md};
       font-weight: ${theme.fontWeights.regular};
       direction: ${theme.rtl && 'rtl'};
 
+      ${colorStyles(theme)};
+
       /* stylelint-disable-next-line selector-max-compound-selectors */
       :focus {
         outline: none;