@central-design-system/components 3.2.1 → 3.3.0

package/src/themes/css/promoLight.css

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: -0.5rem;
+  --cds-shadow-y-minus-300: -0.375rem;
+  --cds-shadow-y-minus-200: -0.25rem;
+  --cds-shadow-y-minus-100: -0.125rem;
+  --cds-shadow-y-400: 0.5rem;
+  --cds-shadow-y-300: 0.375rem;
+  --cds-shadow-y-200: 0.25rem;
+  --cds-shadow-y-100: 0.125rem;
+  --cds-shadow-x-minus-400: -0.5rem;
+  --cds-shadow-x-minus-300: -0.375rem;
+  --cds-shadow-x-minus-200: -0.25rem;
+  --cds-shadow-x-minus-100: -0.125rem;
+  --cds-shadow-x-400: 0.5rem;
+  --cds-shadow-x-300: 0.375rem;
+  --cds-shadow-x-200: 0.25rem;
+  --cds-shadow-x-100: 0.125rem;
+  --cds-shadow-blur-400: 0.75rem;
+  --cds-shadow-blur-300: 0.5rem;
+  --cds-shadow-blur-200: 0.25rem;
+  --cds-shadow-blur-100: 0.125rem;
+  --cds-font-weight-regular: 400;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: Arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 255, 255, 255;
+  --cds-color-surface-primary: 255, 255, 255;
+  --cds-color-surface-overlay: 39, 42, 48, 0.5;
+  --cds-color-surface-inverse: 64, 70, 83;
+  --cds-color-surface-elevated: 255, 255, 255;
+  --cds-color-status-warning-surface: 166, 132, 10;
+  --cds-color-status-warning-line: 182, 146, 16;
+  --cds-color-status-warning-fill-hover: 222, 192, 72;
+  --cds-color-status-warning-fill: 242, 219, 130;
+  --cds-color-status-warning-content: 88, 64, 1;
+  --cds-color-status-success-surface: 60, 156, 44;
+  --cds-color-status-success-line: 80, 169, 70;
+  --cds-color-status-success-fill-hover: 151, 210, 131;
+  --cds-color-status-success-fill: 188, 232, 171;
+  --cds-color-status-success-content: 0, 80, 5;
+  --cds-color-status-progress-surface: 25, 143, 216;
+  --cds-color-status-progress-line: 43, 157, 233;
+  --cds-color-status-progress-fill-hover: 144, 200, 255;
+  --cds-color-status-progress-fill: 195, 223, 255;
+  --cds-color-status-progress-content: 0, 72, 113;
+  --cds-color-status-info-surface: 130, 138, 151;
+  --cds-color-status-info-line: 146, 152, 164;
+  --cds-color-status-info-fill-hover: 192, 195, 203;
+  --cds-color-status-info-fill: 218, 221, 226;
+  --cds-color-status-info-content: 64, 70, 83;
+  --cds-color-status-indication-surface: 209, 69, 63;
+  --cds-color-status-indication-line: 209, 69, 63;
+  --cds-color-status-indication-fill-hover: 255, 174, 158;
+  --cds-color-status-indication-fill: 255, 209, 198;
+  --cds-color-status-indication-content: 131, 17, 24;
+  --cds-color-status-danger-surface: 209, 69, 63;
+  --cds-color-status-danger-line: 209, 69, 63;
+  --cds-color-status-danger-fill-hover: 255, 174, 158;
+  --cds-color-status-danger-fill: 255, 209, 198;
+  --cds-color-status-danger-content: 131, 17, 24;
+  --cds-color-page-primary: 236, 238, 242;
+  --cds-color-other-teal-surface: 58, 150, 158;
+  --cds-color-other-teal-line: 60, 165, 173;
+  --cds-color-other-teal-fill-hover: 72, 214, 219;
+  --cds-color-other-teal-fill: 161, 233, 233;
+  --cds-color-other-teal-content: 2, 43, 47;
+  --cds-color-other-purple-surface: 169, 111, 222;
+  --cds-color-other-purple-line: 179, 129, 225;
+  --cds-color-other-purple-fill-hover: 214, 184, 239;
+  --cds-color-other-purple-fill: 232, 213, 246;
+  --cds-color-other-purple-content: 47, 15, 80;
+  --cds-color-other-pink-surface: 210, 92, 184;
+  --cds-color-other-pink-line: 219, 112, 196;
+  --cds-color-other-pink-fill-hover: 243, 172, 231;
+  --cds-color-other-pink-fill: 248, 209, 242;
+  --cds-color-other-pink-content: 66, 13, 53;
+  --cds-color-other-lime-surface: 120, 146, 44;
+  --cds-color-other-lime-line: 133, 161, 45;
+  --cds-color-other-lime-fill-hover: 182, 204, 101;
+  --cds-color-other-lime-fill: 212, 228, 144;
+  --cds-color-other-lime-content: 32, 41, 1;
+  --cds-color-other-lemon-surface: 142, 140, 35;
+  --cds-color-other-lemon-line: 157, 155, 37;
+  --cds-color-other-lemon-fill-hover: 203, 198, 95;
+  --cds-color-other-lemon-fill: 230, 223, 131;
+  --cds-color-other-lemon-content: 40, 38, 1;
+  --cds-color-other-indigo-surface: 128, 126, 236;
+  --cds-color-other-indigo-line: 145, 141, 236;
+  --cds-color-other-indigo-fill-hover: 195, 189, 249;
+  --cds-color-other-indigo-fill: 221, 217, 252;
+  --cds-color-other-indigo-content: 31, 31, 85;
+  --cds-color-other-cyan-surface: 67, 151, 134;
+  --cds-color-other-cyan-line: 72, 166, 146;
+  --cds-color-other-cyan-fill-hover: 88, 216, 190;
+  --cds-color-other-cyan-fill: 159, 235, 216;
+  --cds-color-other-cyan-content: 5, 43, 36;
+  --cds-color-other-chocolate-surface: 172, 127, 88;
+  --cds-color-other-chocolate-line: 183, 143, 109;
+  --cds-color-other-chocolate-fill-hover: 216, 190, 169;
+  --cds-color-other-chocolate-fill: 231, 217, 204;
+  --cds-color-other-chocolate-content: 54, 29, 1;
+  --cds-color-line-tertiary-hover: 175, 179, 189;
+  --cds-color-line-tertiary: 204, 207, 214;
+  --cds-color-line-selected-hover: 41, 120, 212;
+  --cds-color-line-selected: 77, 152, 249;
+  --cds-color-line-secondary-hover: 146, 152, 164;
+  --cds-color-line-secondary: 175, 179, 189;
+  --cds-color-line-primary-hover: 114, 121, 135;
+  --cds-color-line-primary: 146, 152, 164;
+  --cds-color-line-focus-outline: 164, 197, 254;
+  --cds-color-line-focus: 77, 152, 249;
+  --cds-color-line-elevated: 255, 255, 255;
+  --cds-color-line-disable: 192, 195, 203;
+  --cds-color-fill-selected-hover: 41, 120, 212;
+  --cds-color-fill-selected: 77, 152, 249;
+  --cds-color-fill-secondary-hover: 204, 207, 214;
+  --cds-color-fill-secondary-active: 192, 195, 203;
+  --cds-color-fill-secondary: 218, 221, 226;
+  --cds-color-fill-primary-hover: 218, 221, 226;
+  --cds-color-fill-primary-active: 204, 207, 214;
+  --cds-color-fill-primary: 255, 255, 255;
+  --cds-color-fill-elevated: 255, 255, 255;
+  --cds-color-fill-disable: 218, 221, 226;
+  --cds-color-content-tertiary: 114, 121, 135;
+  --cds-color-content-secondary: 79, 86, 102;
+  --cds-color-content-primary: 33, 38, 49;
+  --cds-color-content-placeholder: 130, 138, 151;
+  --cds-color-content-on-dark: 255, 255, 255;
+  --cds-color-content-link-visited: 189, 73, 162;
+  --cds-color-content-link: 41, 120, 212;
+  --cds-color-content-inverse: 255, 255, 255;
+  --cds-color-content-disable: 146, 152, 164;
+  --cds-color-brand-secondary-hover: 254, 192, 178;
+  --cds-color-brand-secondary-border: 255, 209, 198;
+  --cds-color-brand-secondary-active: 255, 174, 158;
+  --cds-color-brand-secondary: 255, 209, 198;
+  --cds-color-brand-primary-hover: 228, 89, 79;
+  --cds-color-brand-primary-content: 131, 17, 24;
+  --cds-color-brand-primary-border: 209, 69, 63;
+  --cds-color-brand-primary-active: 244, 106, 93;
+  --cds-color-brand-primary: 209, 69, 63;
+}

package/src/themes/index.ts

@@ -4,5 +4,7 @@ export { default as cdsLight } from './cdsLight';
 export { default as cdsDark } from './cdsDark';
 export { default as b2bLight } from './b2bLight';
 export { default as b2bDark } from './b2bDark';
+export { default as promoLight } from './promoLight';
+export { default as promoDark } from './promoDark';
 
 export { default as colors } from './colors';

package/src/themes/promoDark.ts

@@ -0,0 +1,191 @@
+import colors from './colors';
+
+export default {
+  dark: true,
+  colors: {
+    'surface-secondary': colors.silver.dark25,
+    'surface-primary': colors.silver.dark10,
+    'surface-overlay': colors.alpha.dark800,
+    'surface-inverse': colors.silver.dark900,
+    'surface-elevated': colors.silver.dark25,
+    'status-warning-surface': colors.yellow.dark600,
+    'status-warning-line': colors.yellow.dark500,
+    'status-warning-fill-hover': colors.yellow.dark200,
+    'status-warning-fill': colors.yellow.dark50,
+    'status-warning-content': colors.yellow.dark900,
+    'status-success-surface': colors.green.dark600,
+    'status-success-line': colors.green.dark500,
+    'status-success-fill-hover': colors.green.dark200,
+    'status-success-fill': colors.green.dark50,
+    'status-success-content': colors.green.dark900,
+    'status-progress-surface': colors.sky.dark600,
+    'status-progress-line': colors.sky.dark500,
+    'status-progress-fill-hover': colors.sky.dark200,
+    'status-progress-fill': colors.sky.dark50,
+    'status-progress-content': colors.sky.dark900,
+    'status-info-surface': colors.silver.dark600,
+    'status-info-line': colors.silver.dark500,
+    'status-info-fill-hover': colors.silver.dark200,
+    'status-info-fill': colors.silver.dark50,
+    'status-info-content': colors.silver.dark900,
+    'status-indication-surface': colors.red.dark700,
+    'status-indication-line': colors.red.dark700,
+    'status-indication-fill-hover': colors.red.dark200,
+    'status-indication-fill': colors.red.dark50,
+    'status-indication-content': colors.red.dark900,
+    'status-danger-surface': colors.red.dark700,
+    'status-danger-line': colors.red.dark700,
+    'status-danger-fill-hover': colors.red.dark200,
+    'status-danger-fill': colors.red.dark50,
+    'status-danger-content': colors.red.dark900,
+    'page-primary': colors.gray.dark0,
+    'other-teal-surface': colors.teal.dark600,
+    'other-teal-line': colors.teal.dark500,
+    'other-teal-fill-hover': colors.teal.dark200,
+    'other-teal-fill': colors.teal.dark50,
+    'other-teal-content': colors.teal.dark950,
+    'other-purple-surface': colors.purple.dark600,
+    'other-purple-line': colors.purple.dark500,
+    'other-purple-fill-hover': colors.purple.dark200,
+    'other-purple-fill': colors.purple.dark50,
+    'other-purple-content': colors.purple.dark950,
+    'other-pink-surface': colors.pink.dark600,
+    'other-pink-line': colors.pink.dark500,
+    'other-pink-fill-hover': colors.pink.dark200,
+    'other-pink-fill': colors.pink.dark50,
+    'other-pink-content': colors.pink.dark950,
+    'other-lime-surface': colors.lime.dark600,
+    'other-lime-line': colors.lime.dark500,
+    'other-lime-fill-hover': colors.lime.dark200,
+    'other-lime-fill': colors.lime.dark50,
+    'other-lime-content': colors.lime.dark950,
+    'other-lemon-surface': colors.lemon.dark600,
+    'other-lemon-line': colors.lemon.dark500,
+    'other-lemon-fill-hover': colors.lemon.dark200,
+    'other-lemon-fill': colors.lemon.dark50,
+    'other-lemon-content': colors.lemon.dark950,
+    'other-indigo-surface': colors.indigo.dark600,
+    'other-indigo-line': colors.indigo.dark500,
+    'other-indigo-fill-hover': colors.indigo.dark200,
+    'other-indigo-fill': colors.indigo.dark50,
+    'other-indigo-content': colors.indigo.dark950,
+    'other-cyan-surface': colors.cyan.dark600,
+    'other-cyan-line': colors.cyan.dark500,
+    'other-cyan-fill-hover': colors.cyan.dark200,
+    'other-cyan-fill': colors.cyan.dark50,
+    'other-cyan-content': colors.cyan.dark950,
+    'other-chocolate-surface': colors.chocolate.dark600,
+    'other-chocolate-line': colors.chocolate.dark500,
+    'other-chocolate-fill-hover': colors.chocolate.dark200,
+    'other-chocolate-fill': colors.chocolate.dark50,
+    'other-chocolate-content': colors.chocolate.dark950,
+    'line-tertiary-hover': colors.silver.dark300,
+    'line-tertiary': colors.silver.dark100,
+    'line-selected-hover': colors.blue.dark700,
+    'line-selected': colors.blue.dark500,
+    'line-secondary-hover': colors.silver.dark500,
+    'line-secondary': colors.silver.dark300,
+    'line-primary-hover': colors.silver.dark700,
+    'line-primary': colors.silver.dark500,
+    'line-focus-outline': colors.blue.dark100,
+    'line-focus': colors.blue.dark500,
+    'line-elevated': colors.alpha.silver400,
+    'line-disable': colors.silver.dark200,
+    'fill-selected-hover': colors.blue.dark700,
+    'fill-selected': colors.blue.dark500,
+    'fill-secondary-hover': colors.silver.dark100,
+    'fill-secondary-active': colors.silver.dark200,
+    'fill-secondary': colors.silver.dark50,
+    'fill-primary-hover': colors.silver.dark50,
+    'fill-primary-active': colors.silver.dark100,
+    'fill-primary': colors.silver.dark10,
+    'fill-elevated': colors.silver.dark300,
+    'fill-disable': colors.silver.dark50,
+    'content-tertiary': colors.silver.dark700,
+    'content-secondary': colors.silver.dark800,
+    'content-primary': colors.silver.dark950,
+    'content-placeholder': colors.silver.dark600,
+    'content-on-dark': colors.gray.dark1000,
+    'content-link-visited': colors.purple.dark700,
+    'content-link': colors.blue.dark700,
+    'content-inverse': colors.gray.dark0,
+    'content-disable': colors.silver.dark500,
+    'brand-secondary-hover': colors.red.dark50,
+    'brand-secondary-border': colors.red.dark100,
+    'brand-secondary-active': colors.red.dark100,
+    'brand-secondary': colors.red.dark10,
+    'brand-primary-hover': colors.red.dark100,
+    'brand-primary-content': colors.red.dark900,
+    'brand-primary-border': colors.red.dark300,
+    'brand-primary-active': colors.red.dark50,
+    'brand-primary': colors.red.dark300
+  },
+  variables: {
+    'spacing-900': '4rem',
+    'spacing-800': '3rem',
+    'spacing-700': '2.5rem',
+    'spacing-600': '2rem',
+    'spacing-500': '1.5rem',
+    'spacing-50': '0.125rem',
+    'spacing-400': '1rem',
+    'spacing-300': '0.75rem',
+    'spacing-200': '0.5rem',
+    'spacing-1100': '6rem',
+    'spacing-1000': '5rem',
+    'spacing-100': '0.25rem',
+    'shadow-y-minus-400': '0rem',
+    'shadow-y-minus-300': '0rem',
+    'shadow-y-minus-200': '0rem',
+    'shadow-y-minus-100': '0rem',
+    'shadow-y-400': '0rem',
+    'shadow-y-300': '0rem',
+    'shadow-y-200': '0rem',
+    'shadow-y-100': '0rem',
+    'shadow-x-minus-400': '0rem',
+    'shadow-x-minus-300': '0rem',
+    'shadow-x-minus-200': '0rem',
+    'shadow-x-minus-100': '0rem',
+    'shadow-x-400': '0rem',
+    'shadow-x-300': '0rem',
+    'shadow-x-200': '0rem',
+    'shadow-x-100': '0rem',
+    'shadow-blur-400': '0rem',
+    'shadow-blur-300': '0rem',
+    'shadow-blur-200': '0rem',
+    'shadow-blur-100': '0rem',
+    'font-weight-regular': 400,
+    'font-weight-bold': 700,
+    'font-size-900': '3.25rem',
+    'font-size-800': '2.75rem',
+    'font-size-700': '2.25rem',
+    'font-size-600': '1.75rem',
+    'font-size-500': '1.5rem',
+    'font-size-50': '0.625rem',
+    'font-size-400': '1.25rem',
+    'font-size-300': '1rem',
+    'font-size-200': '0.875rem',
+    'font-size-1100': '4.5rem',
+    'font-size-1000': '3.75rem',
+    'font-size-100': '0.75rem',
+    'font-line-height-900': '4rem',
+    'font-line-height-800': '3rem',
+    'font-line-height-700': '2.5rem',
+    'font-line-height-600': '2rem',
+    'font-line-height-500': '1.75rem',
+    'font-line-height-50': '0.75rem',
+    'font-line-height-400': '1.5rem',
+    'font-line-height-300': '1.25rem',
+    'font-line-height-200': '1rem',
+    'font-line-height-1100': '5.5rem',
+    'font-line-height-1000': '4.5rem',
+    'font-line-height-100': '0.875rem',
+    'font-letter-spacing-500': '0.0625rem',
+    'font-family': 'Arial',
+    'border-radius-300': '0.5rem',
+    'border-radius-200': '0.25rem',
+    'border-radius-100': '0.125rem',
+    'border-200': '0.125rem',
+    'border-100': '0.0625rem',
+    'base-unit': '16px'
+  }
+};

package/src/themes/promoLight.ts

@@ -0,0 +1,191 @@
+import colors from './colors';
+
+export default {
+  dark: false,
+  colors: {
+    'surface-secondary': colors.gray.light0,
+    'surface-primary': colors.gray.light0,
+    'surface-overlay': colors.alpha.dark500,
+    'surface-inverse': colors.silver.light900,
+    'surface-elevated': colors.gray.light0,
+    'status-warning-surface': colors.yellow.light600,
+    'status-warning-line': colors.yellow.light500,
+    'status-warning-fill-hover': colors.yellow.light200,
+    'status-warning-fill': colors.yellow.light50,
+    'status-warning-content': colors.yellow.light900,
+    'status-success-surface': colors.green.light600,
+    'status-success-line': colors.green.light500,
+    'status-success-fill-hover': colors.green.light200,
+    'status-success-fill': colors.green.light50,
+    'status-success-content': colors.green.light900,
+    'status-progress-surface': colors.sky.light600,
+    'status-progress-line': colors.sky.light500,
+    'status-progress-fill-hover': colors.sky.light200,
+    'status-progress-fill': colors.sky.light50,
+    'status-progress-content': colors.sky.light900,
+    'status-info-surface': colors.silver.light600,
+    'status-info-line': colors.silver.light500,
+    'status-info-fill-hover': colors.silver.light200,
+    'status-info-fill': colors.silver.light50,
+    'status-info-content': colors.silver.light900,
+    'status-indication-surface': colors.red.light700,
+    'status-indication-line': colors.red.light700,
+    'status-indication-fill-hover': colors.red.light200,
+    'status-indication-fill': colors.red.light50,
+    'status-indication-content': colors.red.light900,
+    'status-danger-surface': colors.red.light700,
+    'status-danger-line': colors.red.light700,
+    'status-danger-fill-hover': colors.red.light200,
+    'status-danger-fill': colors.red.light50,
+    'status-danger-content': colors.red.light900,
+    'page-primary': colors.silver.light10,
+    'other-teal-surface': colors.teal.light600,
+    'other-teal-line': colors.teal.light500,
+    'other-teal-fill-hover': colors.teal.light200,
+    'other-teal-fill': colors.teal.light50,
+    'other-teal-content': colors.teal.light950,
+    'other-purple-surface': colors.purple.light600,
+    'other-purple-line': colors.purple.light500,
+    'other-purple-fill-hover': colors.purple.light200,
+    'other-purple-fill': colors.purple.light50,
+    'other-purple-content': colors.purple.light950,
+    'other-pink-surface': colors.pink.light600,
+    'other-pink-line': colors.pink.light500,
+    'other-pink-fill-hover': colors.pink.light200,
+    'other-pink-fill': colors.pink.light50,
+    'other-pink-content': colors.pink.light950,
+    'other-lime-surface': colors.lime.light600,
+    'other-lime-line': colors.lime.light500,
+    'other-lime-fill-hover': colors.lime.light200,
+    'other-lime-fill': colors.lime.light50,
+    'other-lime-content': colors.lime.light950,
+    'other-lemon-surface': colors.lemon.light600,
+    'other-lemon-line': colors.lemon.light500,
+    'other-lemon-fill-hover': colors.lemon.light200,
+    'other-lemon-fill': colors.lemon.light50,
+    'other-lemon-content': colors.lemon.light950,
+    'other-indigo-surface': colors.indigo.light600,
+    'other-indigo-line': colors.indigo.light500,
+    'other-indigo-fill-hover': colors.indigo.light200,
+    'other-indigo-fill': colors.indigo.light50,
+    'other-indigo-content': colors.indigo.light950,
+    'other-cyan-surface': colors.cyan.light600,
+    'other-cyan-line': colors.cyan.light500,
+    'other-cyan-fill-hover': colors.cyan.light200,
+    'other-cyan-fill': colors.cyan.light50,
+    'other-cyan-content': colors.cyan.light950,
+    'other-chocolate-surface': colors.chocolate.light600,
+    'other-chocolate-line': colors.chocolate.light500,
+    'other-chocolate-fill-hover': colors.chocolate.light200,
+    'other-chocolate-fill': colors.chocolate.light50,
+    'other-chocolate-content': colors.chocolate.light950,
+    'line-tertiary-hover': colors.silver.light300,
+    'line-tertiary': colors.silver.light100,
+    'line-selected-hover': colors.blue.light700,
+    'line-selected': colors.blue.light500,
+    'line-secondary-hover': colors.silver.light500,
+    'line-secondary': colors.silver.light300,
+    'line-primary-hover': colors.silver.light700,
+    'line-primary': colors.silver.light500,
+    'line-focus-outline': colors.blue.light200,
+    'line-focus': colors.blue.light500,
+    'line-elevated': colors.alpha.light0,
+    'line-disable': colors.silver.light200,
+    'fill-selected-hover': colors.blue.light700,
+    'fill-selected': colors.blue.light500,
+    'fill-secondary-hover': colors.silver.light100,
+    'fill-secondary-active': colors.silver.light200,
+    'fill-secondary': colors.silver.light50,
+    'fill-primary-hover': colors.silver.light50,
+    'fill-primary-active': colors.silver.light100,
+    'fill-primary': colors.gray.light0,
+    'fill-elevated': colors.gray.light0,
+    'fill-disable': colors.silver.light50,
+    'content-tertiary': colors.silver.light700,
+    'content-secondary': colors.silver.light800,
+    'content-primary': colors.silver.light950,
+    'content-placeholder': colors.silver.light600,
+    'content-on-dark': colors.gray.light0,
+    'content-link-visited': colors.pink.light700,
+    'content-link': colors.blue.light700,
+    'content-inverse': colors.gray.light0,
+    'content-disable': colors.silver.light500,
+    'brand-secondary-hover': colors.red.light100,
+    'brand-secondary-border': colors.red.light50,
+    'brand-secondary-active': colors.red.light200,
+    'brand-secondary': colors.red.light50,
+    'brand-primary-hover': colors.red.light600,
+    'brand-primary-content': colors.red.light900,
+    'brand-primary-border': colors.red.light700,
+    'brand-primary-active': colors.red.light500,
+    'brand-primary': colors.red.light700
+  },
+  variables: {
+    'spacing-900': '4rem',
+    'spacing-800': '3rem',
+    'spacing-700': '2.5rem',
+    'spacing-600': '2rem',
+    'spacing-500': '1.5rem',
+    'spacing-50': '0.125rem',
+    'spacing-400': '1rem',
+    'spacing-300': '0.75rem',
+    'spacing-200': '0.5rem',
+    'spacing-1100': '6rem',
+    'spacing-1000': '5rem',
+    'spacing-100': '0.25rem',
+    'shadow-y-minus-400': '-0.5rem',
+    'shadow-y-minus-300': '-0.375rem',
+    'shadow-y-minus-200': '-0.25rem',
+    'shadow-y-minus-100': '-0.125rem',
+    'shadow-y-400': '0.5rem',
+    'shadow-y-300': '0.375rem',
+    'shadow-y-200': '0.25rem',
+    'shadow-y-100': '0.125rem',
+    'shadow-x-minus-400': '-0.5rem',
+    'shadow-x-minus-300': '-0.375rem',
+    'shadow-x-minus-200': '-0.25rem',
+    'shadow-x-minus-100': '-0.125rem',
+    'shadow-x-400': '0.5rem',
+    'shadow-x-300': '0.375rem',
+    'shadow-x-200': '0.25rem',
+    'shadow-x-100': '0.125rem',
+    'shadow-blur-400': '0.75rem',
+    'shadow-blur-300': '0.5rem',
+    'shadow-blur-200': '0.25rem',
+    'shadow-blur-100': '0.125rem',
+    'font-weight-regular': 400,
+    'font-weight-bold': 700,
+    'font-size-900': '3.25rem',
+    'font-size-800': '2.75rem',
+    'font-size-700': '2.25rem',
+    'font-size-600': '1.75rem',
+    'font-size-500': '1.5rem',
+    'font-size-50': '0.625rem',
+    'font-size-400': '1.25rem',
+    'font-size-300': '1rem',
+    'font-size-200': '0.875rem',
+    'font-size-1100': '4.5rem',
+    'font-size-1000': '3.75rem',
+    'font-size-100': '0.75rem',
+    'font-line-height-900': '4rem',
+    'font-line-height-800': '3rem',
+    'font-line-height-700': '2.5rem',
+    'font-line-height-600': '2rem',
+    'font-line-height-500': '1.75rem',
+    'font-line-height-50': '0.75rem',
+    'font-line-height-400': '1.5rem',
+    'font-line-height-300': '1.25rem',
+    'font-line-height-200': '1rem',
+    'font-line-height-1100': '5.5rem',
+    'font-line-height-1000': '4.5rem',
+    'font-line-height-100': '0.875rem',
+    'font-letter-spacing-500': '0.0625rem',
+    'font-family': 'Arial',
+    'border-radius-300': '0.5rem',
+    'border-radius-200': '0.25rem',
+    'border-radius-100': '0.125rem',
+    'border-200': '0.125rem',
+    'border-100': '0.0625rem',
+    'base-unit': '16px'
+  }
+};