Repository: uber-web/baseui
Pull request #538 (2018-11-26 17:37:14)

feat(themes): add dark theme
Preview: https://deploy-preview-538--baseui.netlify.com/dark/


Patch:
diff --git a/.storybook-dark/.babelrc b/.storybook-dark/.babelrc
new file mode 100644
index 000000000..3eeb33a71
--- /dev/null
+++ b/.storybook-dark/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../.babelrc"
+}
diff --git a/.storybook-dark/addons.js b/.storybook-dark/addons.js
new file mode 100644
index 000000000..e2173abe1
--- /dev/null
+++ b/.storybook-dark/addons.js
@@ -0,0 +1,1 @@
+import '../.storybook-base/addons.js';
diff --git a/.storybook-dark/config.js b/.storybook-dark/config.js
new file mode 100644
index 000000000..ebea48957
--- /dev/null
+++ b/.storybook-dark/config.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import {configure, addDecorator} from '@storybook/react';
+import {themes} from '@storybook/components';
+import {withOptions, setOptions} from '@storybook/addon-options';
+import {Provider as StyletronProvider} from 'styletron-react';
+import {Client as Styletron} from 'styletron-engine-atomic';
+import {ThemeProvider} from '../src/styles';
+import {DarkTheme} from '../src/themes';
+import {withInfo} from '@storybook/addon-info';
+import {checkA11y} from '@storybook/addon-a11y';
+import {withKnobs} from '@storybook/addon-knobs';
+
+withOptions({
+  name: 'baseui',
+  url: 'https://github.com/uber-web/baseui',
+});
+
+setOptions({
+  theme: {
+    ...themes.normal,
+    mainFill: '#141414',
+    mainBackground: '#1F1F1F',
+    mainTextColor: '#CCCCCC',
+    dimmedTextColor: '#CCCCCC',
+  },
+});
+
+const engine = new Styletron();
+
+// automatically import all files ending in *.stories.js
+const req = require.context(
+  '../src',
+  true,
+  /^((?!template-component\/).)*.stories.js$/,
+);
+function loadStories() {
+  require('../docs/pages/pages.js');
+  req.keys().forEach(filename => req(filename));
+}
+
+// this should be first decorator to avoid extra code to be parsed here
+addDecorator(withInfo);
+
+addDecorator(withKnobs);
+addDecorator(checkA11y);
+
+// Add providers for theme and styletron
+addDecorator(story => {
+  return (
+    <StyletronProvider value={engine}>
+      <ThemeProvider theme={DarkTheme}>{story()}</ThemeProvider>
+    </StyletronProvider>
+  );
+});
+
+configure(loadStories, module);
diff --git a/.storybook-dark/preview-head.html b/.storybook-dark/preview-head.html
new file mode 100644
index 000000000..21c8ea2b5
--- /dev/null
+++ b/.storybook-dark/preview-head.html
@@ -0,0 +1,6 @@
+<style type="text/css">
+  body {
+    font-family: "Helvetica Neue", Helvetica, sans-serif !important;
+    color: #ffffff;
+  }
+</style>
diff --git a/.storybook-dark/webpack.config.js b/.storybook-dark/webpack.config.js
new file mode 100644
index 000000000..f54b3347f
--- /dev/null
+++ b/.storybook-dark/webpack.config.js
@@ -0,0 +1,1 @@
+module.exports = require('../.storybook-base/webpack.config');
diff --git a/package.json b/package.json
index dfa0a2d74..44bb6674b 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "test": "yarn lint && yarn flow && yarn unit-test",
     "storybook": "start-storybook -p 6006",
     "storybook:move": "start-storybook -c .storybook-move -p 6006",
-    "build-storybook": "build-storybook -o docs && build-storybook -c .storybook-move -o docs/move",
+    "storybook:dark": "start-storybook -c .storybook-dark -p 6006",
+    "build-storybook": "build-storybook -o docs && build-storybook -c .storybook-move -o docs/move && build-storybook -c .storybook-dark -o docs/dark",
     "storybook:screener": "screener-storybook --conf screener.config.js",
     "storybook:screener:ngrok": "node ./node_modules/screener-ngrok/postinstall.js",
     "storybook:screener:ci": "yarn storybook:screener:ngrok && yarn storybook:screener",
diff --git a/src/accordion/styled-components.js b/src/accordion/styled-components.js
index 8eafd93fa..2394cd1d6 100644
--- a/src/accordion/styled-components.js
+++ b/src/accordion/styled-components.js
@@ -28,9 +28,9 @@ export const Header = styled('h3', (props: SharedStylePropsT) => {
   } = props;
   return {
     ...typography.font450,
-    color: colors.black,
+    color: colors.foreground,
     cursor: $disabled ? 'not-allowed' : 'pointer',
-    backgroudColor: colors.white,
+    background: colors.listHeaderFill,
     paddingTop: sizing.scale600,
     paddingBottom: sizing.scale600,
     paddingLeft: sizing.scale700,
@@ -43,8 +43,11 @@ export const Header = styled('h3', (props: SharedStylePropsT) => {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
+    ':hover': {
+      color: colors.linkHover,
+    },
     ':focus': {
-      backgroudColor: colors.mono400,
+      backgroudColor: colors.background,
     },
   };
 });
@@ -53,7 +56,7 @@ export const ToggleIcon = styled('svg', props => {
   const {$theme, $disabled, $color} = props;
   return {
     ...getSvgStyles(props),
-    color: $color || $theme.colors.mono600,
+    color: $color || $theme.colors.foreground,
     cursor: $disabled ? 'not-allowed' : 'pointer',
     position: 'absolute',
     right: '12px',
@@ -67,7 +70,8 @@ export const Content = styled('div', (props: SharedStylePropsT) => {
   } = props;
   return {
     ...typography.font300,
-    backgroundColor: colors.mono200,
+    backgroundColor: colors.background,
+    color: colors.foreground,
     paddingTop: $expanded ? sizing.scale800 : 0,
     paddingBottom: $expanded ? sizing.scale1000 : 0,
     paddingLeft: sizing.scale800,
@@ -76,7 +80,7 @@ export const Content = styled('div', (props: SharedStylePropsT) => {
     marginBottom: 0,
     marginLeft: 0,
     marginRight: 0,
-    borderBottom: $expanded ? `1px solid ${colors.mono500}` : 'none',
+    borderBottom: $expanded ? `1px solid ${colors.border}` : 'none',
     boxSizing: 'border-box',
     height: $expanded ? 'auto' : '0',
     maxHeight: $expanded ? '100%' : '0',
diff --git a/src/card/styled-components.js b/src/card/styled-components.js
index 2401dd6e9..92e881665 100644
--- a/src/card/styled-components.js
+++ b/src/card/styled-components.js
@@ -15,7 +15,7 @@ export const Body = styled('div', ({$theme}) => {
   const {colors, sizing, typography} = $theme;
   return {
     marginBottom: sizing.scale600,
-    color: colors.mono800,
+    color: colors.foregroundAlt,
     ...typography.font400,
   };
 });
@@ -38,11 +38,12 @@ export const HeaderImage = styled('img', ({$theme}) => {
 });
 
 export const Root = styled('div', ({$theme}) => {
-  const {borders, lighting} = $theme;
+  const {borders, lighting, colors} = $theme;
   return {
     ...borders.border300,
     boxShadow: lighting.shadow400,
     borderRadius: borders.radius200,
+    backgroundColor: colors.backgroundAlt,
   };
 });
 
@@ -65,7 +66,7 @@ export const Title = styled('h1', ({$hasThumbnail, $theme}) => {
   const {colors, sizing, typography} = $theme;
   return {
     ...typography.font600,
-    color: colors.black,
+    color: colors.foreground,
     fontSize: $hasThumbnail ? sizing.scale600 : sizing.scale700,
     fontWeight: 500,
     margin: `0 0 ${sizing.scale300} 0`,
diff --git a/src/checkbox/styled-components.js b/src/checkbox/styled-components.js
index 0fbcba214..197f1264b 100644
--- a/src/checkbox/styled-components.js
+++ b/src/checkbox/styled-components.js
@@ -18,7 +18,7 @@ function getBorderColor(props) {
   } else if ($isError) {
     return colors.negative400;
   } else {
-    return colors.mono700;
+    return colors.tickBorder;
   }
 }
 
@@ -48,7 +48,7 @@ function getBackgroundColor(props) {
   const isToggle = $checkmarkType === STYLE_TYPE.toggle;
   const {colors} = $theme;
   if ($disabled) {
-    return isToggle ? colors.mono600 : colors.mono300;
+    return isToggle ? colors.sliderTrackFillDisabled : colors.tickFillDisabled;
   } else if ($isError && ($isIndeterminate || $checked)) {
     if ($isActive || $isFocused) {
       return colors.negative600;
@@ -75,11 +75,11 @@ function getBackgroundColor(props) {
     }
   } else {
     if ($isActive || $isFocused) {
-      return isToggle ? colors.mono800 : colors.mono500;
+      return isToggle ? colors.sliderTrackFillActive : colors.tickFillActive;
     } else if ($isHovered) {
-      return isToggle ? colors.mono700 : colors.mono400;
+      return isToggle ? colors.sliderTrackFillHover : colors.tickFillHover;
     } else {
-      return isToggle ? colors.mono600 : 'transparent';
+      return isToggle ? colors.sliderTrackFill : colors.tickFill;
     }
   }
 }
@@ -87,13 +87,13 @@ function getBackgroundColor(props) {
 function getCheckBackgroundColor(props) {
   const {$disabled, $theme} = props;
   const {colors} = $theme;
-  return $disabled ? colors.mono600 : colors.mono100;
+  return $disabled ? colors.mono600 : colors.tickMarkFill;
 }
 
 function getLabelColor(props) {
   const {$disabled, $theme} = props;
   const {colors} = $theme;
-  return $disabled ? colors.mono600 : colors.mono1000;
+  return $disabled ? colors.foregroundAlt : colors.foreground;
 }
 
 export const Root = styled('label', props => {
@@ -124,9 +124,9 @@ function getToggleThumbColor(props) {
   } = props;
   const {colors} = $theme;
   if ($disabled) {
-    return colors.mono600;
+    return colors.sliderBorderDisabled;
   } else if ($isActive || $isFocused || $isHovered) {
-    return colors.primary400;
+    return colors.sliderBorderHover;
   } else if ($isError) {
     if ($isActive || $isFocused) {
       return colors.negative200;
@@ -136,14 +136,16 @@ function getToggleThumbColor(props) {
       return colors.negative50;
     }
   } else {
-    return colors.mono600;
+    return colors.sliderBorder;
   }
 }
 
 const getToggleCheckMarkStyles = props => {
   const {$checked, $theme, $disabled} = props;
   const {animation, colors} = $theme;
-  const backgroundColor = $disabled ? colors.mono500 : colors.white;
+  const backgroundColor = $disabled
+    ? colors.sliderHandleFillDisabled
+    : colors.sliderHandleFill;
   const toggleThumbColor = getToggleThumbColor(props);
   const toggleSVG =
     `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_d)"><rect x="4" y="3" width="24" height="24" rx="4" fill="` +
diff --git a/src/form-control/styled-components.js b/src/form-control/styled-components.js
index caae03e30..c00897044 100644
--- a/src/form-control/styled-components.js
+++ b/src/form-control/styled-components.js
@@ -16,7 +16,7 @@ export const Label = styled('label', props => {
   return {
     ...typography.font350,
     fontWeight: 500,
-    color: $disabled ? colors.mono700 : colors.mono1000,
+    color: $disabled ? colors.foregroundAlt : colors.foreground,
     cursor: $disabled ? 'not-allowed' : 'auto',
     display: 'block',
     paddingTop: '0',
@@ -40,7 +40,7 @@ export const Caption = styled('div', props => {
     color:
       $error && typeof $error !== 'boolean'
         ? colors.negative400
-        : colors.mono800,
+        : colors.foregroundAlt,
     paddingTop: '0',
     paddingRight: '0',
     paddingBottom: '0',
diff --git a/src/input/styled-components.js b/src/input/styled-components.js
index 36ca6cee4..b6f8d6c77 100644
--- a/src/input/styled-components.js
+++ b/src/input/styled-components.js
@@ -56,7 +56,7 @@ export const Root = styled('div', props => {
   } = props;
   return {
     ...getFont($size, typography),
-    color: colors.mono1000,
+    color: colors.foreground,
     display: 'flex',
     width: '100%',
   };
@@ -70,10 +70,10 @@ export const InputEnhancer = styled('div', props => {
   } = props;
   return {
     ...getFont($size, typography),
-    color: colors.mono900,
+    color: colors.foreground,
     display: 'flex',
     ...getInputPadding($size, sizing),
-    backgroundColor: colors.mono400,
+    backgroundColor: colors.inputFill,
     borderRadius: getDecoratorBorderRadius($position, sizing.scale100),
   };
 });
@@ -89,26 +89,26 @@ export const getInputContainerStyles = (props: SharedPropsT) => {
   } = props;
   return {
     ...getFont($size, typography),
-    color: $disabled ? colors.mono600 : colors.mono1000,
+    color: $disabled ? colors.inputTextDisabled : colors.foreground,
     boxSizing: 'border-box',
     display: 'flex',
     width: '100%',
     backgroundColor: $disabled
-      ? colors.mono300
+      ? colors.inputFillDisabled
       : $isFocused
-        ? colors.mono100
+        ? colors.background
         : $error
-          ? colors.negative50
-          : colors.mono200,
+          ? colors.inputFillError
+          : colors.inputFill,
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: $disabled
-      ? colors.mono300
+      ? colors.inputFillDisabled
       : $error
         ? colors.negative400
         : $isFocused
           ? colors.primary400
-          : colors.mono200,
+          : colors.inputFill,
     borderRadius: borders.useRoundedCorners
       ? getBorderRadius($adjoined, sizing.scale100)
       : '0px',
@@ -138,7 +138,7 @@ export const getInputStyles = (props: SharedPropsT) => {
   } = props;
   return {
     ...getFont($size, typography),
-    color: $disabled ? colors.mono600 : colors.mono1000,
+    color: $disabled ? colors.foregroundAlt : colors.foreground,
     caretColor: $error ? colors.negative400 : colors.primary,
     boxSizing: 'border-box',
     backgroundColor: 'transparent',
@@ -150,7 +150,7 @@ export const getInputStyles = (props: SharedPropsT) => {
     maxWidth: '100%',
     cursor: $disabled ? 'not-allowed' : 'text',
     '::placeholder': {
-      color: $disabled ? colors.mono600 : colors.mono700,
+      color: $disabled ? colors.inputTextDisabled : colors.foregroundAlt,
     },
   };
 };
diff --git a/src/menu/styled-components.js b/src/menu/styled-components.js
index 0b75b1775..99d728c05 100644
--- a/src/menu/styled-components.js
+++ b/src/menu/styled-components.js
@@ -20,7 +20,7 @@ export const List = styled('ul', ({$theme}: StyledPropsT) => ({
   position: 'relative',
   margin: 0,
   padding: 0,
-  background: $theme.colors.white,
+  background: $theme.colors.backgroundAlt,
   borderRadius: $theme.borders.radius300,
   boxShadow: $theme.lighting.shadow600,
   overflow: 'auto',
@@ -34,13 +34,13 @@ export const ListItem = styled(
       : $theme.typography.font300),
     position: 'relative',
     display: 'block',
-    color: $isHighlighted ? $theme.colors.primary : $theme.colors.black,
+    color: $isHighlighted ? $theme.colors.primary : $theme.colors.foreground,
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
     transitionDuration: $theme.animation.timing100,
     transitionTimingFunction: $theme.animation.easeOutCurve,
     ':hover': {
-      backgroundColor: $theme.colors.mono300,
+      backgroundColor: $theme.colors.menuFillHover,
     },
     paddingTop:
       $size === OPTION_LIST_SIZE.compact
@@ -80,7 +80,7 @@ export const ListItemProfile = styled('li', ({$theme}: StyledPropsT) => ({
   transitionDuration: $theme.animation.timing100,
   transitionTimingFunction: $theme.animation.easeOutCurve,
   ':hover': {
-    backgroundColor: $theme.colors.mono300,
+    backgroundColor: $theme.colors.menuFillHover,
   },
   ':first-child': {
     marginTop: $theme.sizing.scale300,
@@ -113,18 +113,18 @@ export const ProfileLabelsContainer = styled('div', ({$theme}) => ({
 
 export const ProfileTitle = styled('h6', ({$theme}) => ({
   ...$theme.typography.font450,
-  color: $theme.colors.black,
+  color: $theme.colors.foreground,
   margin: 0,
 }));
 
 export const ProfileSubtitle = styled('p', ({$theme}) => ({
   ...$theme.typography.font300,
-  color: $theme.colors.black,
+  color: $theme.colors.foreground,
   margin: 0,
 }));
 
 export const ProfileBody = styled('p', ({$theme}) => ({
   ...$theme.typography.font200,
   margin: 0,
-  color: $theme.colors.mono800,
+  color: $theme.colors.foregroundAlt,
 }));
diff --git a/src/modal/styled-components.js b/src/modal/styled-components.js
index 1173ce2f1..c811bab3e 100644
--- a/src/modal/styled-components.js
+++ b/src/modal/styled-components.js
@@ -89,7 +89,7 @@ export const Dialog = styled('div', (props: SharedStylePropsT) => {
   const {$animate, $isOpen, $isVisible, $size, $theme} = props;
   return {
     position: 'relative',
-    backgroundColor: $theme.colors.background,
+    backgroundColor: $theme.colors.backgroundAlt,
     borderRadius: $theme.borders.useRoundedCorners
       ? $theme.borders.radius200
       : '0px',
@@ -149,7 +149,7 @@ export const Close = styled('button', (props: SharedStylePropsT) => {
 
 export const ModalHeader = styled('div', ({$theme}: StyledComponentPropT) => ({
   ...$theme.typography.font500,
-  color: $theme.colors.black,
+  color: $theme.colors.foreground,
   marginTop: $theme.sizing.scale900,
   marginBottom: $theme.sizing.scale600,
   marginLeft: $theme.sizing.scale800,
@@ -159,7 +159,7 @@ export const ModalHeader = styled('div', ({$theme}: StyledComponentPropT) => ({
 
 export const ModalBody = styled('div', ({$theme}: StyledComponentPropT) => ({
   ...$theme.typography.font300,
-  color: $theme.colors.mono800,
+  color: $theme.colors.foregroundAlt,
   marginTop: $theme.sizing.scale600,
   marginLeft: $theme.sizing.scale800,
   marginRight: $theme.sizing.scale800,
diff --git a/src/pagination/styled-components.js b/src/pagination/styled-components.js
index e82acf2f6..722f3143f 100644
--- a/src/pagination/styled-components.js
+++ b/src/pagination/styled-components.js
@@ -37,6 +37,6 @@ export const DropdownMenu = styled(StyledList, ({$theme}) => ({
 }));
 
 export const DropdownButton = styled(StyledBaseButton, ({$theme}) => ({
-  color: $theme.colors.black,
+  color: $theme.colors.foreground,
   minWidth: `calc(${$theme.sizing.scale1600} + ${$theme.sizing.scale400})`,
 }));
diff --git a/src/popover/styled-components.js b/src/popover/styled-components.js
index 67d9c0155..6e0a7ddf2 100644
--- a/src/popover/styled-components.js
+++ b/src/popover/styled-components.js
@@ -61,7 +61,7 @@ export const Body = styled('div', getBodyStyles);
 export function getArrowStyles(props: SharedStylePropsT) {
   const {$arrowOffset, $placement, $theme} = props;
   return {
-    backgroundColor: $theme.colors.background,
+    backgroundColor: $theme.colors.backgroundAlt,
     boxShadow: $theme.lighting.shadow600,
     width: `${ARROW_WIDTH}px`,
     height: `${ARROW_WIDTH}px`,
@@ -82,7 +82,8 @@ export const Arrow = styled('div', getArrowStyles);
  */
 export function getInnerStyles({$theme}: SharedStylePropsT) {
   return {
-    backgroundColor: $theme.colors.background,
+    backgroundColor: $theme.colors.backgroundAlt,
+    color: $theme.colors.foreground,
     borderRadius: $theme.borders.useRoundedCorners
       ? $theme.borders.radius300
       : '0px',
diff --git a/src/progress-steps/styled-components.js b/src/progress-steps/styled-components.js
index a0fb6d73f..3c1ad575d 100644
--- a/src/progress-steps/styled-components.js
+++ b/src/progress-steps/styled-components.js
@@ -95,11 +95,11 @@ export const StyledContent = styled('div', ({$theme}: StyledStepPropsT) => {
 export const StyledContentTitle = styled(
   'div',
   ({$theme, $isActive}: StyledStepPropsT) => {
-    let color = $theme.colors.mono700;
+    let color = $theme.colors.foregroundAlt;
     let font = $theme.typography.font400;
 
     if ($isActive) {
-      color = $theme.colors.mono1000;
+      color = $theme.colors.foreground;
       font = $theme.typography.font450;
     }
 
diff --git a/src/radio/styled-components.js b/src/radio/styled-components.js
index 6f862ff7f..05fef021b 100644
--- a/src/radio/styled-components.js
+++ b/src/radio/styled-components.js
@@ -32,7 +32,7 @@ function getLabelPadding(props) {
 function getLabelColor(props) {
   const {$disabled, $theme} = props;
   const {colors} = $theme;
-  return $disabled ? colors.mono600 : colors.mono1000;
+  return $disabled ? colors.foregroundAlt : colors.foreground;
 }
 
 export const RadioGroupRoot = styled('div', props => {
diff --git a/src/styles/types.js b/src/styles/types.js
index 0538aa4e4..567c31550 100644
--- a/src/styles/types.js
+++ b/src/styles/types.js
@@ -107,6 +107,51 @@ export type ColorsT = {
   linkVisited: string,
   linkHover: string,
 
+  // Lists
+  listHeaderFill: string,
+  listBodyFill: string,
+  listIconFill: string,
+  listBorder: string,
+
+  // Ticks
+  tickFill: string,
+  tickFillHover: string,
+  tickFillActive: string,
+  tickFillSelected: string,
+  tickFillSelectedHover: string,
+  tickFillSelectedHoverActive: string,
+  tickFillDisabled: string,
+  tickBorder: string,
+  tickMarkFill: string,
+
+  // Slider
+  sliderTrackFill: string,
+  sliderTrackFillHover: string,
+  sliderTrackFillActive: string,
+  sliderTrackFillSelected: string,
+  sliderTrackFillSelectedHover: string,
+  sliderTrackFillSelectedActive: string,
+  sliderTrackFillDisabled: string,
+  sliderHandleFill: string,
+  sliderHandleFillHover: string,
+  sliderHandleFillActive: string,
+  sliderHandleFillSelected: string,
+  sliderHandleFillSelectedHover: string,
+  sliderHandleFillSelectedActive: string,
+  sliderHandleFillDisabled: string,
+  sliderBorder: string,
+  sliderBorderHover: string,
+  sliderBorderDisabled: string,
+
+  // Input
+  inputFill: string,
+  inputFillError: string,
+  inputFillDisabled: string,
+  inputTextDisabled: string,
+
+  // Menu
+  menuFillHover: string,
+
   // Shadow
   shadowFocus: string,
   shadowError: string,
diff --git a/src/themes/creator.js b/src/themes/creator.js
index a521a6ea2..bf3780f9c 100644
--- a/src/themes/creator.js
+++ b/src/themes/creator.js
@@ -10,6 +10,8 @@ import type {ThemeT} from '../styles/types';
 import type {PrimitivesT} from './types';
 import deepMerge from '../utils/deep-merge';
 
+const WHITE = '#FFFFFF';
+
 export default function createTheme(
   primitives: PrimitivesT,
   overrides?: {},
@@ -78,8 +80,8 @@ export default function createTheme(
 
       // Background
       background: primitives.mono100,
-      backgroundAlt: primitives.mono800,
-      backgroundInv: primitives.mono100,
+      backgroundAlt: primitives.mono100,
+      backgroundInv: primitives.mono1000,
 
       // Foreground
       foreground: primitives.mono1000,
@@ -120,6 +122,51 @@ export default function createTheme(
       // Shadow
       shadowFocus: 'rgba(39, 110, 241, 0.32)',
       shadowError: 'rgba(229, 73, 55, 0.32)',
+
+      // List
+      listHeaderFill: WHITE,
+      listBodyFill: primitives.mono200,
+      listIconFill: primitives.mono500,
+      listBorder: primitives.mono500,
+
+      // Tick
+      tickFill: 'transparent',
+      tickFillHover: primitives.mono400,
+      tickFillActive: primitives.mono500,
+      tickFillSelected: primitives.primary400,
+      tickFillSelectedHover: primitives.primary500,
+      tickFillSelectedHoverActive: primitives.primary600,
+      tickFillDisabled: primitives.mono400,
+      tickBorder: primitives.mono700,
+      tickMarkFill: WHITE,
+
+      // Slider
+      sliderTrackFill: primitives.mono600,
+      sliderTrackFillHover: primitives.mono700,
+      sliderTrackFillActive: primitives.mono800,
+      sliderTrackFillSelected: primitives.primary400,
+      sliderTrackFillSelectedHover: primitives.primary500,
+      sliderTrackFillSelectedActive: primitives.primary600,
+      sliderTrackFillDisabled: primitives.mono600,
+      sliderHandleFill: WHITE,
+      sliderHandleFillHover: WHITE,
+      sliderHandleFillActive: WHITE,
+      sliderHandleFillSelected: WHITE,
+      sliderHandleFillSelectedHover: WHITE,
+      sliderHandleFillSelectedActive: WHITE,
+      sliderHandleFillDisabled: primitives.mono500,
+      sliderBorder: primitives.mono500,
+      sliderBorderHover: primitives.primary400,
+      sliderBorderDisabled: primitives.mono600,
+
+      // Inputs
+      inputFill: primitives.mono200,
+      inputFillError: primitives.negative50,
+      inputFillDisabled: primitives.mono300,
+      inputTextDisabled: primitives.mono600,
+
+      // Menu
+      menuFillHover: primitives.mono300,
     },
     typography: {
       font100: {
diff --git a/src/themes/dark-theme-primitives.js b/src/themes/dark-theme-primitives.js
new file mode 100644
index 000000000..67890fd0b
--- /dev/null
+++ b/src/themes/dark-theme-primitives.js
@@ -0,0 +1,60 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import type {PrimitivesT} from './types';
+
+// color constants
+export const primitives: PrimitivesT = {
+  primary50: '#EDF3FE',
+  primary100: '#D2E0FC',
+  primary200: '#9CBCF8',
+  primary300: '#548BF4',
+  primary400: '#276EF1',
+  primary500: '#174EB6',
+  primary600: '#123D90',
+  primary700: '#0C2960',
+
+  negative50: '#FDF0EF',
+  negative100: '#FADBD7',
+  negative200: '#F4AFA7',
+  negative300: '#EB7567',
+  negative400: '#E54937',
+  negative500: '#AE372A',
+  negative600: '#892C21',
+  negative700: '#5C1D16',
+
+  warning50: '#FEF3EC',
+  warning100: '#FBE2CF',
+  warning200: '#F6BA8B',
+  warning300: '#F19248',
+  warning400: '#ED6F0E',
+  warning500: '#B4540B',
+  warning600: '#8E4308',
+  warning700: '#5F2C06',
+
+  positive50: '#EBF8F2',
+  positive100: '#CDEDDE',
+  positive200: '#88D3B0',
+  positive300: '#43B982',
+  positive400: '#07A35A',
+  positive500: '#057C44',
+  positive600: '#046236',
+  positive700: '#034124',
+
+  mono100: '#CCCCCC',
+  mono200: '#999999',
+  mono300: '#7A7A7A',
+  mono400: '#5C5C5C',
+  mono500: '#3D3D3D',
+  mono600: '#292929',
+  mono700: '#1F1F1F',
+  mono800: '#141414',
+  mono900: '#111111',
+  mono1000: '#000000',
+
+  primaryFontFamily: '"Helvetica Neue", arial, sans-serif',
+};
diff --git a/src/themes/dark-theme.js b/src/themes/dark-theme.js
new file mode 100644
index 000000000..270ce204d
--- /dev/null
+++ b/src/themes/dark-theme.js
@@ -0,0 +1,108 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import createTheme from './creator';
+import {primitives} from './dark-theme-primitives';
+
+const WHITE = '#FFFFFF';
+
+export const DarkTheme = createTheme(
+  {
+    ...primitives,
+  },
+  {
+    colors: {
+      // Semantic Colors
+
+      // Background
+      background: primitives.mono800,
+      backgroundAlt: primitives.mono700,
+      backgroundInv: primitives.mono100,
+
+      // Foreground
+      foreground: primitives.mono100,
+      foregroundAlt: primitives.mono300,
+      foregroundInv: primitives.mono1000,
+
+      // Borders
+      border: primitives.mono600,
+      borderAlt: primitives.mono700,
+      borderFocus: primitives.primary400,
+      borderError: primitives.negative400,
+
+      // Buttons
+      buttonPrimaryFill: primitives.primary400,
+      buttonPrimaryText: '#FFFFFF',
+      buttonPrimaryHover: primitives.primary500,
+      buttonPrimaryActive: primitives.primary600,
+      buttonSecondaryFill: primitives.mono500,
+      buttonSecondaryText: primitives.mono100,
+      buttonSecondaryHover: primitives.mono400,
+      buttonSecondaryActive: primitives.mono300,
+      buttonTertiaryFill: primitives.mono700,
+      buttonTertiaryText: primitives.mono100,
+      buttonTertiaryHover: primitives.mono600,
+      buttonTertiaryActive: primitives.mono500,
+      buttonMinimalFill: 'transparent',
+      buttonMinimalText: primitives.primary400,
+      buttonMinimalHover: primitives.mono600,
+      buttonMinimalActive: primitives.mono500,
+      buttonDisabledFill: primitives.mono700,
+      buttonDisabledText: primitives.mono500,
+
+      // Links
+      linkText: primitives.primary300,
+      linkVisited: primitives.primary300,
+      linkHover: primitives.primary400,
+
+      // List
+      listHeaderFill: primitives.mono600,
+      listBodyFill: primitives.mono700,
+      listIconFill: primitives.mono100,
+      listBorder: primitives.mono500,
+
+      // Tick
+      tickFill: 'transparent',
+      tickFillHover: primitives.mono200,
+      tickFillActive: primitives.mono300,
+      tickFillSelected: primitives.primary400,
+      tickFillSelectedHover: primitives.primary500,
+      tickFillSelectedHoverActive: primitives.primary600,
+      tickFillDisabled: primitives.mono600,
+      tickBorder: primitives.mono400,
+      tickMarkFill: WHITE,
+
+      // Slider
+      sliderTrackFill: primitives.mono500,
+      sliderTrackFillHover: primitives.mono600,
+      sliderTrackFillActive: primitives.mono700,
+      sliderTrackFillSelected: primitives.primary700,
+      sliderTrackFillSelectedActive: primitives.primary700,
+      sliderTrackFillSelectedHover: primitives.primary700,
+      sliderTrackFillDisabled: primitives.mono600,
+      sliderHandleFill: primitives.mono300,
+      sliderHandleFillHover: primitives.mono300,
+      sliderHandleFillActive: primitives.mono300,
+      sliderHandleFillSelected: primitives.primary500,
+      sliderHandleFillSelectedHover: primitives.primary600,
+      sliderHandleFillSelectedActive: primitives.primary700,
+      sliderHandleFillDisabled: primitives.mono600,
+      sliderBorder: WHITE,
+      sliderBorderHover: WHITE,
+      sliderBorderDisabled: primitives.mono400,
+
+      // Input
+      inputFill: primitives.mono600,
+      inputFillError: primitives.mono600,
+      inputFillDisabled: primitives.mono700,
+      inputTextDisabled: primitives.mono500,
+
+      // Menu
+      menuFillHover: primitives.mono600,
+    },
+  },
+);
diff --git a/src/themes/index.js b/src/themes/index.js
index 8ef256f8c..b172d837d 100644
--- a/src/themes/index.js
+++ b/src/themes/index.js
@@ -8,9 +8,10 @@ LICENSE file in the root directory of this source tree.
 import createTheme from './creator';
 import {primitives as lightThemePrimitives} from './light-theme-primitives';
 import {LightThemeMove} from './light-theme-with-move';
+import {DarkTheme} from './dark-theme';
 
 export const LightTheme = createTheme(lightThemePrimitives);
 
-export {createTheme, LightThemeMove, lightThemePrimitives};
+export {createTheme, LightThemeMove, lightThemePrimitives, DarkTheme};
 
 export * from './types';


Test patch:
diff --git a/src/accordion/__tests__/__snapshots__/styled-components.test.js.snap b/src/accordion/__tests__/__snapshots__/styled-components.test.js.snap
index 90d8aee84..d862ddc57 100644
--- a/src/accordion/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/accordion/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,9 +2,10 @@
 
 exports[`Accordion styled components Basic render: StyledContent has correct styles when expanded and disabled is set to true 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono200",
-  "borderBottom": "1px solid $theme.colors.mono500",
+  "backgroundColor": "$theme.colors.background",
+  "borderBottom": "1px solid $theme.colors.border",
   "boxSizing": "border-box",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -29,9 +30,10 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledContent has correct styles when expanded is set to false 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono200",
+  "backgroundColor": "$theme.colors.background",
   "borderBottom": "none",
   "boxSizing": "border-box",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -56,9 +58,10 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledContent has correct styles when expanded is set to true 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono200",
-  "borderBottom": "1px solid $theme.colors.mono500",
+  "backgroundColor": "$theme.colors.background",
+  "borderBottom": "1px solid $theme.colors.border",
   "boxSizing": "border-box",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -83,9 +86,10 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledContent has correct styles when not expanded and disabled is set to true 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono200",
+  "backgroundColor": "$theme.colors.background",
   "borderBottom": "none",
   "boxSizing": "border-box",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -111,12 +115,15 @@ Object {
 exports[`Accordion styled components Basic render: StyledHeader has correct styles when expanded and disabled is set to true 1`] = `
 Object {
   ":focus": Object {
-    "backgroudColor": "$theme.colors.mono400",
+    "backgroudColor": "$theme.colors.background",
+  },
+  ":hover": Object {
+    "color": "$theme.colors.linkHover",
   },
   "alignItems": "center",
-  "backgroudColor": "$theme.colors.white",
+  "background": "$theme.colors.listHeaderFill",
   "borderBottom": "1px solid $theme.colors.mono500",
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "not-allowed",
   "display": "flex",
   "fontFamily": "$theme.typography.font450.fontFamily",
@@ -138,12 +145,15 @@ Object {
 exports[`Accordion styled components Basic render: StyledHeader has correct styles when expanded is set to false 1`] = `
 Object {
   ":focus": Object {
-    "backgroudColor": "$theme.colors.mono400",
+    "backgroudColor": "$theme.colors.background",
+  },
+  ":hover": Object {
+    "color": "$theme.colors.linkHover",
   },
   "alignItems": "center",
-  "backgroudColor": "$theme.colors.white",
+  "background": "$theme.colors.listHeaderFill",
   "borderBottom": "1px solid $theme.colors.mono400",
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "flex",
   "fontFamily": "$theme.typography.font450.fontFamily",
@@ -165,12 +175,15 @@ Object {
 exports[`Accordion styled components Basic render: StyledHeader has correct styles when expanded is set to true 1`] = `
 Object {
   ":focus": Object {
-    "backgroudColor": "$theme.colors.mono400",
+    "backgroudColor": "$theme.colors.background",
+  },
+  ":hover": Object {
+    "color": "$theme.colors.linkHover",
   },
   "alignItems": "center",
-  "backgroudColor": "$theme.colors.white",
+  "background": "$theme.colors.listHeaderFill",
   "borderBottom": "1px solid $theme.colors.mono500",
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "flex",
   "fontFamily": "$theme.typography.font450.fontFamily",
@@ -192,12 +205,15 @@ Object {
 exports[`Accordion styled components Basic render: StyledHeader has correct styles when not expanded and disabled is set to true 1`] = `
 Object {
   ":focus": Object {
-    "backgroudColor": "$theme.colors.mono400",
+    "backgroudColor": "$theme.colors.background",
+  },
+  ":hover": Object {
+    "color": "$theme.colors.linkHover",
   },
   "alignItems": "center",
-  "backgroudColor": "$theme.colors.white",
+  "background": "$theme.colors.listHeaderFill",
   "borderBottom": "1px solid $theme.colors.mono400",
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "not-allowed",
   "display": "flex",
   "fontFamily": "$theme.typography.font450.fontFamily",
@@ -250,7 +266,7 @@ exports[`Accordion styled components Basic render: StyledRoot has correct styles
 
 exports[`Accordion styled components Basic render: StyledToggleIcon has correct styles when expanded and disabled is set to true 1`] = `
 Object {
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.foreground",
   "cursor": "not-allowed",
   "display": "inline-block",
   "fill": "currentColor",
@@ -263,7 +279,7 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledToggleIcon has correct styles when expanded is set to false 1`] = `
 Object {
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "inline-block",
   "fill": "currentColor",
@@ -276,7 +292,7 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledToggleIcon has correct styles when expanded is set to true 1`] = `
 Object {
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "inline-block",
   "fill": "currentColor",
@@ -289,7 +305,7 @@ Object {
 
 exports[`Accordion styled components Basic render: StyledToggleIcon has correct styles when not expanded and disabled is set to true 1`] = `
 Object {
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.foreground",
   "cursor": "not-allowed",
   "display": "inline-block",
   "fill": "currentColor",
diff --git a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
index 122f0a7df..1784c38da 100644
--- a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when  1`] = `
 Object {
-  "backgroundColor": "transparent",
+  "backgroundColor": "$theme.colors.tickFill",
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono700",
+  "borderColor": "$theme.colors.tickBorder",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
@@ -30,7 +30,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isActive 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -57,7 +57,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isFocused 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -84,7 +84,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isHovered 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary500",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -111,7 +111,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -137,7 +137,7 @@ Object {
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $disabled $checked 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono300",
+  "backgroundColor": "$theme.colors.tickFillDisabled",
   "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono600\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
@@ -164,7 +164,7 @@ Object {
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $disabled 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono300",
+  "backgroundColor": "$theme.colors.tickFillDisabled",
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
@@ -191,11 +191,11 @@ Object {
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isActive 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono500",
+  "backgroundColor": "$theme.colors.tickFillActive",
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono700",
+  "borderColor": "$theme.colors.tickBorder",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
@@ -219,7 +219,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isActive 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -246,7 +246,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isFocused 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -273,7 +273,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isHovered 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative500",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -300,7 +300,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono100\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -434,11 +434,11 @@ Object {
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isFocused 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono500",
+  "backgroundColor": "$theme.colors.tickFillActive",
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono700",
+  "borderColor": "$theme.colors.tickBorder",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
@@ -461,11 +461,11 @@ Object {
 
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isHovered 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono400",
+  "backgroundColor": "$theme.colors.tickFillHover",
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono700",
+  "borderColor": "$theme.colors.tickBorder",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
@@ -489,7 +489,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isIndeterminate 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"2\\" viewBox=\\"0 0 12 2\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><line x1=\\"1\\" y1=\\"-1\\" x2=\\"11\\" y2=\\"-1\\" transform=\\"translate(0 2)\\" stroke=\\"%24theme.colors.mono100\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"2\\" viewBox=\\"0 0 12 2\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><line x1=\\"1\\" y1=\\"-1\\" x2=\\"11\\" y2=\\"-1\\" transform=\\"translate(0 2)\\" stroke=\\"%24theme.colors.tickMarkFill\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -526,7 +526,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel : has correct styles when  1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -539,7 +539,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel : has correct styles when $isError 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -552,7 +552,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel : has correct styles when disabled 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -565,7 +565,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel Label: StyledLabel has correct styles when set to bottom 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -578,7 +578,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel Label: StyledLabel has correct styles when set to left 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -591,7 +591,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel Label: StyledLabel has correct styles when set to right 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
@@ -604,7 +604,7 @@ Object {
 
 exports[`Checkbox styled components StyledLabel Label: StyledLabel has correct styles when set to top 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "flex": null,
   "fontFamily": "$theme.typography.font350.fontFamily",
   "fontSize": "$theme.typography.font350.fontSize",
diff --git a/src/form-control/__tests__/__snapshots__/styled-components.test.js.snap b/src/form-control/__tests__/__snapshots__/styled-components.test.js.snap
index dc683494a..498d0f7ba 100644
--- a/src/form-control/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/form-control/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormControl - Label and Caption for controls StyledCaption - basic render: StyledCaption has correct default styles 1`] = `
 Object {
-  "color": "$theme.colors.mono800",
+  "color": "$theme.colors.foregroundAlt",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -20,7 +20,7 @@ Object {
 
 exports[`FormControl - Label and Caption for controls StyledCaption - basic render: StyledCaption has correct styles when compact and error is boolean 1`] = `
 Object {
-  "color": "$theme.colors.mono800",
+  "color": "$theme.colors.foregroundAlt",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -56,7 +56,7 @@ Object {
 
 exports[`FormControl - Label and Caption for controls StyledLabel - basic render: StyledLabel has correct default styles 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "cursor": "auto",
   "display": "block",
   "fontFamily": "$theme.typography.font350.fontFamily",
@@ -76,7 +76,7 @@ Object {
 
 exports[`FormControl - Label and Caption for controls StyledLabel - basic render: StyledLabel has correct styles when compact and disabled 1`] = `
 Object {
-  "color": "$theme.colors.mono700",
+  "color": "$theme.colors.foregroundAlt",
   "cursor": "not-allowed",
   "display": "block",
   "fontFamily": "$theme.typography.font350.fontFamily",
diff --git a/src/input/__tests__/__snapshots__/styled-components.test.js.snap b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
index 19d7dfdef..bda804862 100644
--- a/src/input/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
@@ -3,14 +3,14 @@
 exports[`Input - StyledInput - basic render: StyledInput has correct default styles 1`] = `
 Object {
   "::placeholder": Object {
-    "color": "$theme.colors.mono700",
+    "color": "$theme.colors.foregroundAlt",
   },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "cursor": "text",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -29,14 +29,14 @@ Object {
 exports[`Input - StyledInput - basic render: StyledInput has correct styles when compact and disabled 1`] = `
 Object {
   "::placeholder": Object {
-    "color": "$theme.colors.mono600",
+    "color": "$theme.colors.inputTextDisabled",
   },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.foregroundAlt",
   "cursor": "not-allowed",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -54,14 +54,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct default styles 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono200",
-  "borderColor": "$theme.colors.mono200",
+  "backgroundColor": "$theme.colors.inputFill",
+  "borderColor": "$theme.colors.inputFill",
   "borderRadius": "$theme.sizing.scale100",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -76,14 +76,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when compact 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.primary400",
   "borderRadius": "$theme.sizing.scale100",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowFocus",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -98,14 +98,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when disabled 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono300",
-  "borderColor": "$theme.colors.mono300",
+  "backgroundColor": "$theme.colors.inputFillDisabled",
+  "borderColor": "$theme.colors.inputFillDisabled",
   "borderRadius": "0",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.inputTextDisabled",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -120,14 +120,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when error 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.negative400",
   "borderRadius": "0",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowError",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -142,14 +142,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when focused 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.primary400",
   "borderRadius": "$theme.sizing.scale100",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowFocus",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -164,14 +164,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when has end enhancer 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.primary400",
   "borderRadius": "$theme.sizing.scale100 0 0 $theme.sizing.scale100",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowFocus",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -186,14 +186,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when has start and end enhancers 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.primary400",
   "borderRadius": "0",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowFocus",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -208,14 +208,14 @@ Object {
 
 exports[`Input - StyledInputContainer - basic render: StyledInputContainer has correct styles when has start enhancer 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono100",
+  "backgroundColor": "$theme.colors.background",
   "borderColor": "$theme.colors.primary400",
   "borderRadius": "0 $theme.sizing.scale100 $theme.sizing.scale100 0",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px $theme.colors.shadowFocus",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -252,9 +252,9 @@ Object {
 
 exports[`Input - StyledInputEnhancer - basic render: StyledInputEnhancer has correct styles when compact and end position 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono400",
+  "backgroundColor": "$theme.colors.inputFill",
   "borderRadius": "0 $theme.sizing.scale100 $theme.sizing.scale100 0",
-  "color": "$theme.colors.mono900",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
@@ -269,9 +269,9 @@ Object {
 
 exports[`Input - StyledInputEnhancer - basic render: StyledInputEnhancer has correct styles when default size and start position 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.mono400",
+  "backgroundColor": "$theme.colors.inputFill",
   "borderRadius": "$theme.sizing.scale100 0 0 $theme.sizing.scale100",
-  "color": "$theme.colors.mono900",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -286,7 +286,7 @@ Object {
 
 exports[`Input - StyledRoot - basic render: StyledRoot has correct default styles 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -298,7 +298,7 @@ Object {
 
 exports[`Input - StyledRoot - basic render: StyledRoot has correct styles when compact 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
diff --git a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
index 3918a9dfb..410893590 100644
--- a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Menu Styled Components List - basic render: correct styles 1`] = `
 Object {
-  "background": "$theme.colors.white",
+  "background": "$theme.colors.backgroundAlt",
   "borderRadius": "$theme.borders.radius300",
   "boxShadow": "$theme.lighting.shadow600",
   "margin": 0,
@@ -18,12 +18,12 @@ Object {
     "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
-    "backgroundColor": "$theme.colors.mono300",
+    "backgroundColor": "$theme.colors.menuFillHover",
   },
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
   },
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "block",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -47,12 +47,12 @@ Object {
     "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
-    "backgroundColor": "$theme.colors.mono300",
+    "backgroundColor": "$theme.colors.menuFillHover",
   },
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
   },
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "block",
   "fontFamily": "$theme.typography.font200.fontFamily",
@@ -76,7 +76,7 @@ Object {
     "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
-    "backgroundColor": "$theme.colors.mono300",
+    "backgroundColor": "$theme.colors.menuFillHover",
   },
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
@@ -105,7 +105,7 @@ Object {
     "marginTop": "$theme.sizing.scale300",
   },
   ":hover": Object {
-    "backgroundColor": "$theme.colors.mono300",
+    "backgroundColor": "$theme.colors.menuFillHover",
   },
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
@@ -126,7 +126,7 @@ Object {
 
 exports[`Menu Styled Components ProfileBody - basic render: correct styles 1`] = `
 Object {
-  "color": "$theme.colors.mono800",
+  "color": "$theme.colors.foregroundAlt",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -164,7 +164,7 @@ Object {
 
 exports[`Menu Styled Components ProfileSubtitle - basic render: correct styles 1`] = `
 Object {
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -175,7 +175,7 @@ Object {
 
 exports[`Menu Styled Components ProfileTitle - basic render: correct styles 1`] = `
 Object {
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font450.fontFamily",
   "fontSize": "$theme.typography.font450.fontSize",
   "fontWeight": "$theme.typography.font450.fontWeight",
diff --git a/src/modal/__tests__/__snapshots__/styled-components.test.js.snap b/src/modal/__tests__/__snapshots__/styled-components.test.js.snap
index 5409108af..40e9e16e4 100644
--- a/src/modal/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/modal/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Modal styled components ModalBody - basic render: ModalBody has correct styles 1`] = `
 Object {
-  "color": "$theme.colors.mono800",
+  "color": "$theme.colors.foregroundAlt",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -34,7 +34,7 @@ Object {
 
 exports[`Modal styled components ModalHeader - basic render: ModalHeader has correct styles 1`] = `
 Object {
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font500.fontFamily",
   "fontSize": "$theme.typography.font500.fontSize",
   "fontWeight": "$theme.typography.font500.fontWeight",
@@ -90,7 +90,7 @@ Object {
   ":focus": Object {
     "outline": "none",
   },
-  "backgroundColor": "$theme.colors.background",
+  "backgroundColor": "$theme.colors.backgroundAlt",
   "borderRadius": "$theme.borders.radius200",
   "margin": "$theme.sizing.scale600",
   "maxWidth": "100%",
diff --git a/src/pagination/__tests__/__snapshots__/styled-components.test.js.snap b/src/pagination/__tests__/__snapshots__/styled-components.test.js.snap
index 21a86182a..e8abcf137 100644
--- a/src/pagination/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/pagination/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Pagination Styled Components DropdownButton - basic renders: correct styles 1`] = `
 Object {
-  "color": "$theme.colors.black",
+  "color": "$theme.colors.foreground",
   "minWidth": "calc($theme.sizing.scale1600 + $theme.sizing.scale400)",
 }
 `;
diff --git a/src/popover/__tests__/__snapshots__/styled-components.test.js.snap b/src/popover/__tests__/__snapshots__/styled-components.test.js.snap
index 15bdcd3db..0605747a9 100644
--- a/src/popover/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/popover/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Popover styled components StyledArrow - basic render: StyledArrow has correct styles 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.background",
+  "backgroundColor": "$theme.colors.backgroundAlt",
   "boxShadow": "$theme.lighting.shadow600",
   "height": "9px",
   "left": "10px",
@@ -52,8 +52,9 @@ Object {
 
 exports[`Popover styled components StyledInner - basic render: StyledInner has correct styles 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.background",
+  "backgroundColor": "$theme.colors.backgroundAlt",
   "borderRadius": "$theme.borders.radius300",
+  "color": "$theme.colors.foreground",
   "position": "relative",
   "zIndex": 2,
 }
diff --git a/src/radio/__tests__/__snapshots__/styled-components.test.js.snap b/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
index e10b29b17..4263ea13c 100644
--- a/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
@@ -12,7 +12,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel : has correct styles when  1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -24,7 +24,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel : has correct styles when $isError 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -36,7 +36,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel : has correct styles when disabled 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -48,7 +48,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to bottom 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -60,7 +60,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to left 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -72,7 +72,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to right 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
@@ -84,7 +84,7 @@ Object {
 
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to top 1`] = `
 Object {
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font400.fontFamily",
   "fontSize": "$theme.typography.font400.fontSize",
   "fontWeight": "$theme.typography.font400.fontWeight",
diff --git a/src/select/__tests__/__snapshots__/styled-components.test.js.snap b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
index eff03eb64..02edc1d74 100644
--- a/src/select/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
@@ -51,14 +51,14 @@ Object {
 exports[`Select styled components StyledInput Input: StyledInput has correct styles 1`] = `
 Object {
   "::placeholder": Object {
-    "color": "$theme.colors.mono700",
+    "color": "$theme.colors.foregroundAlt",
   },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "flexGrow": "1",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -78,14 +78,14 @@ Object {
 exports[`Select styled components StyledInputContainer InputContainer: StyledInputContainer has correct styles 1`] = `
 Object {
   "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
+  "backgroundColor": "$theme.colors.inputFill",
   "borderColor": "$theme.colors.mono200",
   "borderRadius": undefined,
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "display": "flex",
   "flexWrap": "wrap",
   "fontFamily": "$theme.typography.font300.fontFamily",
diff --git a/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap b/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
index fe5d68ce6..0520db076 100644
--- a/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
@@ -3,17 +3,17 @@
 exports[`Textarea Textarea element - basic render: Textarea has correct default styles 1`] = `
 Object {
   "::placeholder": Object {
-    "color": "$theme.colors.mono700",
+    "color": "$theme.colors.foregroundAlt",
   },
-  "backgroundColor": "$theme.colors.mono200",
-  "borderColor": "$theme.colors.mono200",
+  "backgroundColor": "$theme.colors.inputFill",
+  "borderColor": "$theme.colors.inputFill",
   "borderRadius": undefined,
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.mono1000",
+  "color": "$theme.colors.foreground",
   "cursor": "text",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -36,17 +36,17 @@ Object {
 exports[`Textarea Textarea element - basic render: Textarea has correct styles when compact and disabled 1`] = `
 Object {
   "::placeholder": Object {
-    "color": "$theme.colors.mono600",
+    "color": "$theme.colors.inputTextDisabled",
   },
-  "backgroundColor": "$theme.colors.mono300",
-  "borderColor": "$theme.colors.mono300",
+  "backgroundColor": "$theme.colors.inputFillDisabled",
+  "borderColor": "$theme.colors.inputFillDisabled",
   "borderRadius": undefined,
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.mono600",
+  "color": "$theme.colors.inputTextDisabled",
   "cursor": "not-allowed",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
diff --git a/src/tooltip/__tests__/__snapshots__/styled-components.test.js.snap b/src/tooltip/__tests__/__snapshots__/styled-components.test.js.snap
index 29e5b0772..0850f5cd5 100644
--- a/src/tooltip/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/tooltip/__tests__/__snapshots__/styled-components.test.js.snap
@@ -56,6 +56,7 @@ exports[`Tooltip styled components StyledInner - basic render: StyledInner has c
 Object {
   "backgroundColor": "$theme.tooltip.backgroundColor",
   "borderRadius": "$theme.borders.radius200",
+  "color": "$theme.colors.foreground",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",