@atlaskit/primitives 0.5.0 → 0.7.0

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -1,208 +1,264 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
-"const backgroundColorMap = {
-  'accent.red.subtlest': css({
-    backgroundColor: token('color.background.accent.red.subtlest', '#FF8F73'),
-  }),
-  'accent.red.subtler': css({
-    backgroundColor: token('color.background.accent.red.subtler', '#FF7452'),
-  }),
-  'accent.red.subtle': css({
-    backgroundColor: token('color.background.accent.red.subtle', '#DE350B'),
-  }),
-  'accent.red.bolder': css({
-    backgroundColor: token('color.background.accent.red.bolder', '#DE350B'),
-  }),
-  'accent.orange.subtlest': css({
-    backgroundColor: token(
-      'color.background.accent.orange.subtlest',
-      '#F18D13',
-    ),
-  }),
-  'accent.orange.subtler': css({
-    backgroundColor: token('color.background.accent.orange.subtler', '#B65C02'),
-  }),
-  'accent.orange.subtle': css({
-    backgroundColor: token('color.background.accent.orange.subtle', '#5F3811'),
-  }),
-  'accent.orange.bolder': css({
-    backgroundColor: token('color.background.accent.orange.bolder', '#43290F'),
-  }),
-  'accent.yellow.subtlest': css({
-    backgroundColor: token(
-      'color.background.accent.yellow.subtlest',
-      '#FFE380',
-    ),
-  }),
-  'accent.yellow.subtler': css({
-    backgroundColor: token('color.background.accent.yellow.subtler', '#FFC400'),
-  }),
-  'accent.yellow.subtle': css({
-    backgroundColor: token('color.background.accent.yellow.subtle', '#FF991F'),
-  }),
-  'accent.yellow.bolder': css({
-    backgroundColor: token('color.background.accent.yellow.bolder', '#FF991F'),
-  }),
-  'accent.green.subtlest': css({
-    backgroundColor: token('color.background.accent.green.subtlest', '#79F2C0'),
-  }),
-  'accent.green.subtler': css({
-    backgroundColor: token('color.background.accent.green.subtler', '#57D9A3'),
-  }),
-  'accent.green.subtle': css({
-    backgroundColor: token('color.background.accent.green.subtle', '#00875A'),
-  }),
-  'accent.green.bolder': css({
-    backgroundColor: token('color.background.accent.green.bolder', '#00875A'),
-  }),
-  'accent.teal.subtlest': css({
-    backgroundColor: token('color.background.accent.teal.subtlest', '#79E2F2'),
-  }),
-  'accent.teal.subtler': css({
-    backgroundColor: token('color.background.accent.teal.subtler', '#00C7E6'),
-  }),
-  'accent.teal.subtle': css({
-    backgroundColor: token('color.background.accent.teal.subtle', '#00A3BF'),
-  }),
-  'accent.teal.bolder': css({
-    backgroundColor: token('color.background.accent.teal.bolder', '#00A3BF'),
-  }),
-  'accent.blue.subtlest': css({
-    backgroundColor: token('color.background.accent.blue.subtlest', '#4C9AFF'),
-  }),
-  'accent.blue.subtler': css({
-    backgroundColor: token('color.background.accent.blue.subtler', '#2684FF'),
-  }),
-  'accent.blue.subtle': css({
-    backgroundColor: token('color.background.accent.blue.subtle', '#0052CC'),
-  }),
-  'accent.blue.bolder': css({
-    backgroundColor: token('color.background.accent.blue.bolder', '#0052CC'),
-  }),
-  'accent.purple.subtlest': css({
-    backgroundColor: token(
-      'color.background.accent.purple.subtlest',
-      '#998DD9',
-    ),
-  }),
-  'accent.purple.subtler': css({
-    backgroundColor: token('color.background.accent.purple.subtler', '#8777D9'),
-  }),
-  'accent.purple.subtle': css({
-    backgroundColor: token('color.background.accent.purple.subtle', '#5243AA'),
-  }),
-  'accent.purple.bolder': css({
-    backgroundColor: token('color.background.accent.purple.bolder', '#5243AA'),
-  }),
-  'accent.magenta.subtlest': css({
-    backgroundColor: token(
-      'color.background.accent.magenta.subtlest',
-      '#E774BB',
-    ),
-  }),
-  'accent.magenta.subtler': css({
-    backgroundColor: token(
-      'color.background.accent.magenta.subtler',
-      '#E774BB',
-    ),
-  }),
-  'accent.magenta.subtle': css({
-    backgroundColor: token('color.background.accent.magenta.subtle', '#E774BB'),
-  }),
-  'accent.magenta.bolder': css({
-    backgroundColor: token('color.background.accent.magenta.bolder', '#E774BB'),
-  }),
-  'accent.gray.subtlest': css({
-    backgroundColor: token('color.background.accent.gray.subtlest', '#6B778C'),
-  }),
-  'accent.gray.subtler': css({
-    backgroundColor: token('color.background.accent.gray.subtler', '#5E6C84'),
-  }),
-  'accent.gray.subtle': css({
-    backgroundColor: token('color.background.accent.gray.subtle', '#42526E'),
-  }),
-  'accent.gray.bolder': css({
-    backgroundColor: token('color.background.accent.gray.bolder', '#505F79'),
-  }),
-  disabled: css({
-    backgroundColor: token('color.background.disabled', '#091e4289'),
-  }),
-  input: css({
-    backgroundColor: token('color.background.input', '#FAFBFC'),
-  }),
-  'inverse.subtle': css({
-    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
-  }),
-  neutral: css({
-    backgroundColor: token('color.background.neutral', '#DFE1E6'),
-  }),
-  'neutral.subtle': css({
-    backgroundColor: token('color.background.neutral.subtle', 'transparent'),
-  }),
-  'neutral.bold': css({
-    backgroundColor: token('color.background.neutral.bold', '#42526E'),
-  }),
-  selected: css({
-    backgroundColor: token('color.background.selected', '#DEEBFF'),
-  }),
-  'selected.bold': css({
-    backgroundColor: token('color.background.selected.bold', '#0052CC'),
-  }),
-  'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', '#0052CC'),
-  }),
-  danger: css({
-    backgroundColor: token('color.background.danger', '#FFEBE6'),
-  }),
-  'danger.bold': css({
-    backgroundColor: token('color.background.danger.bold', '#DE350B'),
-  }),
-  warning: css({
-    backgroundColor: token('color.background.warning', '#FFFAE6'),
-  }),
-  'warning.bold': css({
-    backgroundColor: token('color.background.warning.bold', '#FFAB00'),
-  }),
-  success: css({
-    backgroundColor: token('color.background.success', '#E3FCEF'),
-  }),
-  'success.bold': css({
-    backgroundColor: token('color.background.success.bold', '#00875A'),
-  }),
-  discovery: css({
-    backgroundColor: token('color.background.discovery', '#EAE6FF'),
-  }),
-  'discovery.bold': css({
-    backgroundColor: token('color.background.discovery.bold', '#5243AA'),
-  }),
-  information: css({
-    backgroundColor: token('color.background.information', '#DEEBFF'),
-  }),
-  'information.bold': css({
-    backgroundColor: token('color.background.information.bold', '#0052CC'),
-  }),
-  'color.blanket': css({
-    backgroundColor: token('color.blanket', '#091e4289'),
-  }),
-  'color.blanket.selected': css({
-    backgroundColor: token('color.blanket.selected', '#388BFF14'),
-  }),
-  'color.blanket.danger': css({
-    backgroundColor: token('color.blanket.danger', '#EF5C4814'),
-  }),
-  'elevation.surface': css({
-    backgroundColor: token('elevation.surface', '#FFFFFF'),
-  }),
-  'elevation.surface.overlay': css({
-    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
-  }),
-  'elevation.surface.raised': css({
-    backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
-  }),
-  'elevation.surface.sunken': css({
-    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
-  }),
+"export const backgroundColorMap = {
+  'accent.red.subtlest': token(
+    'color.background.accent.red.subtlest',
+    '#FF8F73',
+  ),
+  'accent.red.subtler': token('color.background.accent.red.subtler', '#FF7452'),
+  'accent.red.subtle': token('color.background.accent.red.subtle', '#DE350B'),
+  'accent.red.bolder': token('color.background.accent.red.bolder', '#DE350B'),
+  'accent.orange.subtlest': token(
+    'color.background.accent.orange.subtlest',
+    '#F18D13',
+  ),
+  'accent.orange.subtler': token(
+    'color.background.accent.orange.subtler',
+    '#B65C02',
+  ),
+  'accent.orange.subtle': token(
+    'color.background.accent.orange.subtle',
+    '#5F3811',
+  ),
+  'accent.orange.bolder': token(
+    'color.background.accent.orange.bolder',
+    '#43290F',
+  ),
+  'accent.yellow.subtlest': token(
+    'color.background.accent.yellow.subtlest',
+    '#FFE380',
+  ),
+  'accent.yellow.subtler': token(
+    'color.background.accent.yellow.subtler',
+    '#FFC400',
+  ),
+  'accent.yellow.subtle': token(
+    'color.background.accent.yellow.subtle',
+    '#FF991F',
+  ),
+  'accent.yellow.bolder': token(
+    'color.background.accent.yellow.bolder',
+    '#FF991F',
+  ),
+  'accent.green.subtlest': token(
+    'color.background.accent.green.subtlest',
+    '#79F2C0',
+  ),
+  'accent.green.subtler': token(
+    'color.background.accent.green.subtler',
+    '#57D9A3',
+  ),
+  'accent.green.subtle': token(
+    'color.background.accent.green.subtle',
+    '#00875A',
+  ),
+  'accent.green.bolder': token(
+    'color.background.accent.green.bolder',
+    '#00875A',
+  ),
+  'accent.teal.subtlest': token(
+    'color.background.accent.teal.subtlest',
+    '#79E2F2',
+  ),
+  'accent.teal.subtler': token(
+    'color.background.accent.teal.subtler',
+    '#00C7E6',
+  ),
+  'accent.teal.subtle': token('color.background.accent.teal.subtle', '#00A3BF'),
+  'accent.teal.bolder': token('color.background.accent.teal.bolder', '#00A3BF'),
+  'accent.blue.subtlest': token(
+    'color.background.accent.blue.subtlest',
+    '#4C9AFF',
+  ),
+  'accent.blue.subtler': token(
+    'color.background.accent.blue.subtler',
+    '#2684FF',
+  ),
+  'accent.blue.subtle': token('color.background.accent.blue.subtle', '#0052CC'),
+  'accent.blue.bolder': token('color.background.accent.blue.bolder', '#0052CC'),
+  'accent.purple.subtlest': token(
+    'color.background.accent.purple.subtlest',
+    '#998DD9',
+  ),
+  'accent.purple.subtler': token(
+    'color.background.accent.purple.subtler',
+    '#8777D9',
+  ),
+  'accent.purple.subtle': token(
+    'color.background.accent.purple.subtle',
+    '#5243AA',
+  ),
+  'accent.purple.bolder': token(
+    'color.background.accent.purple.bolder',
+    '#5243AA',
+  ),
+  'accent.magenta.subtlest': token(
+    'color.background.accent.magenta.subtlest',
+    '#E774BB',
+  ),
+  'accent.magenta.subtler': token(
+    'color.background.accent.magenta.subtler',
+    '#E774BB',
+  ),
+  'accent.magenta.subtle': token(
+    'color.background.accent.magenta.subtle',
+    '#E774BB',
+  ),
+  'accent.magenta.bolder': token(
+    'color.background.accent.magenta.bolder',
+    '#E774BB',
+  ),
+  'accent.gray.subtlest': token(
+    'color.background.accent.gray.subtlest',
+    '#6B778C',
+  ),
+  'accent.gray.subtler': token(
+    'color.background.accent.gray.subtler',
+    '#5E6C84',
+  ),
+  'accent.gray.subtle': token('color.background.accent.gray.subtle', '#42526E'),
+  'accent.gray.bolder': token('color.background.accent.gray.bolder', '#505F79'),
+  disabled: token('color.background.disabled', '#091e4289'),
+  input: token('color.background.input', '#FAFBFC'),
+  'input.hovered': token('color.background.input.hovered', '#EBECF0'),
+  'input.pressed': token('color.background.input.pressed', '#FFFFFF'),
+  'inverse.subtle': token('color.background.inverse.subtle', '#00000029'),
+  'inverse.subtle.hovered': token(
+    'color.background.inverse.subtle.hovered',
+    '#0000003D',
+  ),
+  'inverse.subtle.pressed': token(
+    'color.background.inverse.subtle.pressed',
+    '#00000052',
+  ),
+  neutral: token('color.background.neutral', '#DFE1E6'),
+  'neutral.hovered': token('color.background.neutral.hovered', '#091e4214'),
+  'neutral.pressed': token('color.background.neutral.pressed', '#B3D4FF'),
+  'neutral.subtle': token('color.background.neutral.subtle', 'transparent'),
+  'neutral.subtle.hovered': token(
+    'color.background.neutral.subtle.hovered',
+    '#091e4214',
+  ),
+  'neutral.subtle.pressed': token(
+    'color.background.neutral.subtle.pressed',
+    '#B3D4FF',
+  ),
+  'neutral.bold': token('color.background.neutral.bold', '#42526E'),
+  'neutral.bold.hovered': token(
+    'color.background.neutral.bold.hovered',
+    '#505F79',
+  ),
+  'neutral.bold.pressed': token(
+    'color.background.neutral.bold.pressed',
+    '#344563',
+  ),
+  selected: token('color.background.selected', '#DEEBFF'),
+  'selected.hovered': token('color.background.selected.hovered', '#B3D4FF'),
+  'selected.pressed': token('color.background.selected.pressed', '#4C9AFF'),
+  'selected.bold': token('color.background.selected.bold', '#0052CC'),
+  'selected.bold.hovered': token(
+    'color.background.selected.bold.hovered',
+    '#2684FF',
+  ),
+  'selected.bold.pressed': token(
+    'color.background.selected.bold.pressed',
+    '#0052CC',
+  ),
+  'brand.bold': token('color.background.brand.bold', '#0052CC'),
+  'brand.bold.hovered': token('color.background.brand.bold.hovered', '#0065FF'),
+  'brand.bold.pressed': token('color.background.brand.bold.pressed', '#0747A6'),
+  danger: token('color.background.danger', '#FFEBE6'),
+  'danger.hovered': token('color.background.danger.hovered', '#FFBDAD'),
+  'danger.pressed': token('color.background.danger.pressed', '#FF8F73'),
+  'danger.bold': token('color.background.danger.bold', '#DE350B'),
+  'danger.bold.hovered': token(
+    'color.background.danger.bold.hovered',
+    '#FF5630',
+  ),
+  'danger.bold.pressed': token(
+    'color.background.danger.bold.pressed',
+    '#BF2600',
+  ),
+  warning: token('color.background.warning', '#FFFAE6'),
+  'warning.hovered': token('color.background.warning.hovered', '#FFF0B3'),
+  'warning.pressed': token('color.background.warning.pressed', '#FFE380'),
+  'warning.bold': token('color.background.warning.bold', '#FFAB00'),
+  'warning.bold.hovered': token(
+    'color.background.warning.bold.hovered',
+    '#FFC400',
+  ),
+  'warning.bold.pressed': token(
+    'color.background.warning.bold.pressed',
+    '#FF991F',
+  ),
+  success: token('color.background.success', '#E3FCEF'),
+  'success.hovered': token('color.background.success.hovered', '#ABF5D1'),
+  'success.pressed': token('color.background.success.pressed', '#79F2C0'),
+  'success.bold': token('color.background.success.bold', '#00875A'),
+  'success.bold.hovered': token(
+    'color.background.success.bold.hovered',
+    '#57D9A3',
+  ),
+  'success.bold.pressed': token(
+    'color.background.success.bold.pressed',
+    '#00875A',
+  ),
+  discovery: token('color.background.discovery', '#EAE6FF'),
+  'discovery.hovered': token('color.background.discovery.hovered', '#C0B6F2'),
+  'discovery.pressed': token('color.background.discovery.pressed', '#998DD9'),
+  'discovery.bold': token('color.background.discovery.bold', '#5243AA'),
+  'discovery.bold.hovered': token(
+    'color.background.discovery.bold.hovered',
+    '#8777D9',
+  ),
+  'discovery.bold.pressed': token(
+    'color.background.discovery.bold.pressed',
+    '#5243AA',
+  ),
+  information: token('color.background.information', '#DEEBFF'),
+  'information.hovered': token(
+    'color.background.information.hovered',
+    '#B3D4FF',
+  ),
+  'information.pressed': token(
+    'color.background.information.pressed',
+    '#4C9AFF',
+  ),
+  'information.bold': token('color.background.information.bold', '#0052CC'),
+  'information.bold.hovered': token(
+    'color.background.information.bold.hovered',
+    '#2684FF',
+  ),
+  'information.bold.pressed': token(
+    'color.background.information.bold.pressed',
+    '#0052CC',
+  ),
+  'color.blanket': token('color.blanket', '#091e4289'),
+  'color.blanket.selected': token('color.blanket.selected', '#388BFF14'),
+  'color.blanket.danger': token('color.blanket.danger', '#EF5C4814'),
+  'elevation.surface': token('elevation.surface', '#FFFFFF'),
+  'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
+  'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
+  'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
+  'elevation.surface.overlay.hovered': token(
+    'elevation.surface.overlay.hovered',
+    '#FAFBFC',
+  ),
+  'elevation.surface.overlay.pressed': token(
+    'elevation.surface.overlay.pressed',
+    '#F4F5F7',
+  ),
+  'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
+  'elevation.surface.raised.hovered': token(
+    'elevation.surface.raised.hovered',
+    '#FAFBFC',
+  ),
+  'elevation.surface.raised.pressed': token(
+    'elevation.surface.raised.pressed',
+    '#F4F5F7',
+  ),
+  'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
 } as const;
 
 export type BackgroundColor = keyof typeof backgroundColorMap;
@@ -210,73 +266,29 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
 `;
 
 exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
-"const borderColorMap = {
-  'color.border': css({
-    borderColor: token('color.border', '#091e4221'),
-  }),
-  'accent.red': css({
-    borderColor: token('color.border.accent.red', '#FF5630'),
-  }),
-  'accent.orange': css({
-    borderColor: token('color.border.accent.orange', '#D94008'),
-  }),
-  'accent.yellow': css({
-    borderColor: token('color.border.accent.yellow', '#FFAB00'),
-  }),
-  'accent.green': css({
-    borderColor: token('color.border.accent.green', '#36B37E'),
-  }),
-  'accent.teal': css({
-    borderColor: token('color.border.accent.teal', '#00B8D9'),
-  }),
-  'accent.blue': css({
-    borderColor: token('color.border.accent.blue', '#0065FF'),
-  }),
-  'accent.purple': css({
-    borderColor: token('color.border.accent.purple', '#6554C0'),
-  }),
-  'accent.magenta': css({
-    borderColor: token('color.border.accent.magenta', '#CD519D'),
-  }),
-  'accent.gray': css({
-    borderColor: token('color.border.accent.gray', '#5E6C84'),
-  }),
-  disabled: css({
-    borderColor: token('color.border.disabled', '#FAFBFC'),
-  }),
-  focused: css({
-    borderColor: token('color.border.focused', '#4C9AFF'),
-  }),
-  input: css({
-    borderColor: token('color.border.input', '#FAFBFC'),
-  }),
-  inverse: css({
-    borderColor: token('color.border.inverse', '#FFFFFF'),
-  }),
-  selected: css({
-    borderColor: token('color.border.selected', '#0052CC'),
-  }),
-  brand: css({
-    borderColor: token('color.border.brand', '#0052CC'),
-  }),
-  danger: css({
-    borderColor: token('color.border.danger', '#FF5630'),
-  }),
-  warning: css({
-    borderColor: token('color.border.warning', '#FFC400'),
-  }),
-  success: css({
-    borderColor: token('color.border.success', '#00875A'),
-  }),
-  discovery: css({
-    borderColor: token('color.border.discovery', '#998DD9'),
-  }),
-  information: css({
-    borderColor: token('color.border.information', '#0065FF'),
-  }),
-  bold: css({
-    borderColor: token('color.border.bold', '#344563'),
-  }),
+"export const borderColorMap = {
+  'color.border': token('color.border', '#091e4221'),
+  'accent.red': token('color.border.accent.red', '#FF5630'),
+  'accent.orange': token('color.border.accent.orange', '#D94008'),
+  'accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
+  'accent.green': token('color.border.accent.green', '#36B37E'),
+  'accent.teal': token('color.border.accent.teal', '#00B8D9'),
+  'accent.blue': token('color.border.accent.blue', '#0065FF'),
+  'accent.purple': token('color.border.accent.purple', '#6554C0'),
+  'accent.magenta': token('color.border.accent.magenta', '#CD519D'),
+  'accent.gray': token('color.border.accent.gray', '#5E6C84'),
+  disabled: token('color.border.disabled', '#FAFBFC'),
+  focused: token('color.border.focused', '#4C9AFF'),
+  input: token('color.border.input', '#FAFBFC'),
+  inverse: token('color.border.inverse', '#FFFFFF'),
+  selected: token('color.border.selected', '#0052CC'),
+  brand: token('color.border.brand', '#0052CC'),
+  danger: token('color.border.danger', '#FF5630'),
+  warning: token('color.border.warning', '#FFC400'),
+  success: token('color.border.success', '#00875A'),
+  discovery: token('color.border.discovery', '#998DD9'),
+  information: token('color.border.information', '#0065FF'),
+  bold: token('color.border.bold', '#344563'),
 } as const;
 
 export type BorderColor = keyof typeof borderColorMap;
@@ -284,100 +296,38 @@ export type BorderColor = keyof typeof borderColorMap;
 `;
 
 exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
-"const textColorMap = {
-  'color.text': css({
-    color: token('color.text', '#172B4D'),
-  }),
-  'accent.red': css({
-    color: token('color.text.accent.red', '#DE350B'),
-  }),
-  'accent.red.bolder': css({
-    color: token('color.text.accent.red.bolder', '#BF2600'),
-  }),
-  'accent.orange': css({
-    color: token('color.text.accent.orange', '#F18D13'),
-  }),
-  'accent.orange.bolder': css({
-    color: token('color.text.accent.orange.bolder', '#B65C02'),
-  }),
-  'accent.yellow': css({
-    color: token('color.text.accent.yellow', '#FF991F'),
-  }),
-  'accent.yellow.bolder': css({
-    color: token('color.text.accent.yellow.bolder', '#FF8B00'),
-  }),
-  'accent.green': css({
-    color: token('color.text.accent.green', '#00875A'),
-  }),
-  'accent.green.bolder': css({
-    color: token('color.text.accent.green.bolder', '#006644'),
-  }),
-  'accent.teal': css({
-    color: token('color.text.accent.teal', '#00A3BF'),
-  }),
-  'accent.teal.bolder': css({
-    color: token('color.text.accent.teal.bolder', '#008DA6'),
-  }),
-  'accent.blue': css({
-    color: token('color.text.accent.blue', '#0052CC'),
-  }),
-  'accent.blue.bolder': css({
-    color: token('color.text.accent.blue.bolder', '#0747A6'),
-  }),
-  'accent.purple': css({
-    color: token('color.text.accent.purple', '#5243AA'),
-  }),
-  'accent.purple.bolder': css({
-    color: token('color.text.accent.purple.bolder', '#403294'),
-  }),
-  'accent.magenta': css({
-    color: token('color.text.accent.magenta', '#E774BB'),
-  }),
-  'accent.magenta.bolder': css({
-    color: token('color.text.accent.magenta.bolder', '#DA62AC'),
-  }),
-  'accent.gray': css({
-    color: token('color.text.accent.gray', '#505F79'),
-  }),
-  'accent.gray.bolder': css({
-    color: token('color.text.accent.gray.bolder', '#172B4D'),
-  }),
-  disabled: css({
-    color: token('color.text.disabled', '#A5ADBA'),
-  }),
-  inverse: css({
-    color: token('color.text.inverse', '#FFFFFF'),
-  }),
-  selected: css({
-    color: token('color.text.selected', '#0052CC'),
-  }),
-  brand: css({
-    color: token('color.text.brand', '#0065FF'),
-  }),
-  danger: css({
-    color: token('color.text.danger', '#DE350B'),
-  }),
-  warning: css({
-    color: token('color.text.warning', '#974F0C'),
-  }),
-  'warning.inverse': css({
-    color: token('color.text.warning.inverse', '#172B4D'),
-  }),
-  success: css({
-    color: token('color.text.success', '#006644'),
-  }),
-  discovery: css({
-    color: token('color.text.discovery', '#403294'),
-  }),
-  information: css({
-    color: token('color.text.information', '#0052CC'),
-  }),
-  subtlest: css({
-    color: token('color.text.subtlest', '#7A869A'),
-  }),
-  subtle: css({
-    color: token('color.text.subtle', '#42526E'),
-  }),
+"export const textColorMap = {
+  'color.text': token('color.text', '#172B4D'),
+  'accent.red': token('color.text.accent.red', '#DE350B'),
+  'accent.red.bolder': token('color.text.accent.red.bolder', '#BF2600'),
+  'accent.orange': token('color.text.accent.orange', '#F18D13'),
+  'accent.orange.bolder': token('color.text.accent.orange.bolder', '#B65C02'),
+  'accent.yellow': token('color.text.accent.yellow', '#FF991F'),
+  'accent.yellow.bolder': token('color.text.accent.yellow.bolder', '#FF8B00'),
+  'accent.green': token('color.text.accent.green', '#00875A'),
+  'accent.green.bolder': token('color.text.accent.green.bolder', '#006644'),
+  'accent.teal': token('color.text.accent.teal', '#00A3BF'),
+  'accent.teal.bolder': token('color.text.accent.teal.bolder', '#008DA6'),
+  'accent.blue': token('color.text.accent.blue', '#0052CC'),
+  'accent.blue.bolder': token('color.text.accent.blue.bolder', '#0747A6'),
+  'accent.purple': token('color.text.accent.purple', '#5243AA'),
+  'accent.purple.bolder': token('color.text.accent.purple.bolder', '#403294'),
+  'accent.magenta': token('color.text.accent.magenta', '#E774BB'),
+  'accent.magenta.bolder': token('color.text.accent.magenta.bolder', '#DA62AC'),
+  'accent.gray': token('color.text.accent.gray', '#505F79'),
+  'accent.gray.bolder': token('color.text.accent.gray.bolder', '#172B4D'),
+  disabled: token('color.text.disabled', '#A5ADBA'),
+  inverse: token('color.text.inverse', '#FFFFFF'),
+  selected: token('color.text.selected', '#0052CC'),
+  brand: token('color.text.brand', '#0065FF'),
+  danger: token('color.text.danger', '#DE350B'),
+  warning: token('color.text.warning', '#974F0C'),
+  'warning.inverse': token('color.text.warning.inverse', '#172B4D'),
+  success: token('color.text.success', '#006644'),
+  discovery: token('color.text.discovery', '#403294'),
+  information: token('color.text.information', '#0052CC'),
+  subtlest: token('color.text.subtlest', '#7A869A'),
+  subtle: token('color.text.subtle', '#42526E'),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;