@atlaskit/ds-explorations 2.0.0 → 2.0.2

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

@@ -5,12 +5,12 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   disabled: css({
     backgroundColor: token('color.background.disabled', '#091e4289'),
   }),
-  'inverse.subtle': css({
-    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
-  }),
   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'),
   }),
@@ -20,15 +20,15 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   'neutral.bold': css({
     backgroundColor: token('color.background.neutral.bold', '#42526E'),
   }),
-  'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', '#0052CC'),
-  }),
   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'),
   }),
@@ -71,14 +71,14 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   'elevation.surface': css({
     backgroundColor: token('elevation.surface', '#FFFFFF'),
   }),
-  'elevation.surface.sunken': css({
-    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
+  'elevation.surface.overlay': css({
+    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
   }),
   'elevation.surface.raised': css({
     backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
   }),
-  'elevation.surface.overlay': css({
-    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
+  'elevation.surface.sunken': css({
+    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
   }),
 } as const;
 
@@ -91,11 +91,8 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   'color.border': css({
     borderColor: token('color.border', '#091e4221'),
   }),
-  bold: css({
-    borderColor: token('color.border.bold', '#344563'),
-  }),
-  inverse: css({
-    borderColor: token('color.border.inverse', '#FFFFFF'),
+  disabled: css({
+    borderColor: token('color.border.disabled', '#FAFBFC'),
   }),
   focused: css({
     borderColor: token('color.border.focused', '#4C9AFF'),
@@ -103,15 +100,15 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   input: css({
     borderColor: token('color.border.input', '#FAFBFC'),
   }),
-  disabled: css({
-    borderColor: token('color.border.disabled', '#FAFBFC'),
-  }),
-  brand: css({
-    borderColor: token('color.border.brand', '#0052CC'),
+  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'),
   }),
@@ -127,6 +124,9 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   information: css({
     borderColor: token('color.border.information', '#0065FF'),
   }),
+  bold: css({
+    borderColor: token('color.border.bold', '#344563'),
+  }),
 } as const;
 
 export type BorderColor = keyof typeof borderColorMap;
@@ -135,14 +135,14 @@ export type BorderColor = keyof typeof borderColorMap;
 
 exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
 "const backgroundActiveColorMap = {
+  input: css({
+    ':active': { backgroundColor: token('color.background.input.pressed') },
+  }),
   'inverse.subtle': css({
     ':active': {
       backgroundColor: token('color.background.inverse.subtle.pressed'),
     },
   }),
-  input: css({
-    ':active': { backgroundColor: token('color.background.input.pressed') },
-  }),
   neutral: css({
     ':active': { backgroundColor: token('color.background.neutral.pressed') },
   }),
@@ -156,11 +156,6 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
       backgroundColor: token('color.background.neutral.bold.pressed'),
     },
   }),
-  'brand.bold': css({
-    ':active': {
-      backgroundColor: token('color.background.brand.bold.pressed'),
-    },
-  }),
   selected: css({
     ':active': { backgroundColor: token('color.background.selected.pressed') },
   }),
@@ -169,6 +164,11 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
       backgroundColor: token('color.background.selected.bold.pressed'),
     },
   }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.bold.pressed'),
+    },
+  }),
   danger: css({
     ':active': { backgroundColor: token('color.background.danger.pressed') },
   }),
@@ -214,23 +214,23 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   'elevation.surface': css({
     ':active': { backgroundColor: token('elevation.surface.pressed') },
   }),
-  'elevation.surface.raised': css({
-    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
-  }),
   'elevation.surface.overlay': css({
     ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
   }),
+  'elevation.surface.raised': css({
+    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
+  }),
 };
 
 const backgroundHoverColorMap = {
+  input: css({
+    ':hover': { backgroundColor: token('color.background.input.hovered') },
+  }),
   'inverse.subtle': css({
     ':hover': {
       backgroundColor: token('color.background.inverse.subtle.hovered'),
     },
   }),
-  input: css({
-    ':hover': { backgroundColor: token('color.background.input.hovered') },
-  }),
   neutral: css({
     ':hover': { backgroundColor: token('color.background.neutral.hovered') },
   }),
@@ -244,9 +244,6 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.neutral.bold.hovered'),
     },
   }),
-  'brand.bold': css({
-    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
-  }),
   selected: css({
     ':hover': { backgroundColor: token('color.background.selected.hovered') },
   }),
@@ -255,6 +252,9 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.selected.bold.hovered'),
     },
   }),
+  'brand.bold': css({
+    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
+  }),
   danger: css({
     ':hover': { backgroundColor: token('color.background.danger.hovered') },
   }),
@@ -300,12 +300,12 @@ const backgroundHoverColorMap = {
   'elevation.surface': css({
     ':hover': { backgroundColor: token('elevation.surface.hovered') },
   }),
-  'elevation.surface.raised': css({
-    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
-  }),
   'elevation.surface.overlay': css({
     ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
   }),
+  'elevation.surface.raised': css({
+    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
+  }),
 };
 
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
@@ -317,24 +317,18 @@ exports[`@atlaskit/design-system-explorations text styles are generated correctl
   'color.text': css({
     color: token('color.text', '#172B4D'),
   }),
-  subtle: css({
-    color: token('color.text.subtle', '#42526E'),
-  }),
-  subtlest: css({
-    color: token('color.text.subtlest', '#7A869A'),
-  }),
   disabled: css({
     color: token('color.text.disabled', '#A5ADBA'),
   }),
   inverse: css({
     color: token('color.text.inverse', '#FFFFFF'),
   }),
-  brand: css({
-    color: token('color.text.brand', '#0065FF'),
-  }),
   selected: css({
     color: token('color.text.selected', '#0052CC'),
   }),
+  brand: css({
+    color: token('color.text.brand', '#0065FF'),
+  }),
   danger: css({
     color: token('color.text.danger', '#DE350B'),
   }),
@@ -353,6 +347,12 @@ exports[`@atlaskit/design-system-explorations text styles are generated correctl
   information: css({
     color: token('color.text.information', '#0052CC'),
   }),
+  subtlest: css({
+    color: token('color.text.subtlest', '#7A869A'),
+  }),
+  subtle: css({
+    color: token('color.text.subtle', '#42526E'),
+  }),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/src/components/box.partial.tsx

@@ -350,11 +350,11 @@ export type Height = keyof typeof heightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::99c5403dd8b57b15bf1240cc456b6b16>>
+ * @codegen <<SignedSource::dd066079dac7b8cd6f947965a2f1a744>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 const paddingMap = {
   'space.0': css({
@@ -503,21 +503,18 @@ export type PaddingInline = keyof typeof paddingInlineMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const borderColorMap = {
   'color.border': css({
     borderColor: token('color.border', '#091e4221'),
   }),
-  bold: css({
-    borderColor: token('color.border.bold', '#344563'),
-  }),
-  inverse: css({
-    borderColor: token('color.border.inverse', '#FFFFFF'),
+  disabled: css({
+    borderColor: token('color.border.disabled', '#FAFBFC'),
   }),
   focused: css({
     borderColor: token('color.border.focused', '#4C9AFF'),
@@ -525,15 +522,15 @@ const borderColorMap = {
   input: css({
     borderColor: token('color.border.input', '#FAFBFC'),
   }),
-  disabled: css({
-    borderColor: token('color.border.disabled', '#FAFBFC'),
-  }),
-  brand: css({
-    borderColor: token('color.border.brand', '#0052CC'),
+  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'),
   }),
@@ -549,6 +546,9 @@ const borderColorMap = {
   information: css({
     borderColor: token('color.border.information', '#0065FF'),
   }),
+  bold: css({
+    borderColor: token('color.border.bold', '#344563'),
+  }),
 } as const;
 
 export type BorderColor = keyof typeof borderColorMap;
@@ -557,12 +557,12 @@ const backgroundColorMap = {
   disabled: css({
     backgroundColor: token('color.background.disabled', '#091e4289'),
   }),
-  'inverse.subtle': css({
-    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
-  }),
   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'),
   }),
@@ -572,15 +572,15 @@ const backgroundColorMap = {
   'neutral.bold': css({
     backgroundColor: token('color.background.neutral.bold', '#42526E'),
   }),
-  'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', '#0052CC'),
-  }),
   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'),
   }),
@@ -623,44 +623,44 @@ const backgroundColorMap = {
   'elevation.surface': css({
     backgroundColor: token('elevation.surface', '#FFFFFF'),
   }),
-  'elevation.surface.sunken': css({
-    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
+  'elevation.surface.overlay': css({
+    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
   }),
   'elevation.surface.raised': css({
     backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
   }),
-  'elevation.surface.overlay': css({
-    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
+  'elevation.surface.sunken': css({
+    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
   }),
 } as const;
 
 export type BackgroundColor = keyof typeof backgroundColorMap;
 
 const shadowMap = {
-  raised: css({
-    boxShadow: token(
-      'elevation.shadow.raised',
-      '0px 1px 1px #091e423f, 0px 0px 1px #091e4221',
-    ),
-  }),
   overflow: css({
     boxShadow: token(
       'elevation.shadow.overflow',
       '0px 0px 8px #091e423f, 0px 0px 1px #091e424f',
     ),
   }),
-  'overflow.spread': css({
-    boxShadow: token('elevation.shadow.overflow.spread', '#091e4229'),
-  }),
   'overflow.perimeter': css({
     boxShadow: token('elevation.shadow.overflow.perimeter', '#091e421f'),
   }),
+  'overflow.spread': css({
+    boxShadow: token('elevation.shadow.overflow.spread', '#091e4229'),
+  }),
   overlay: css({
     boxShadow: token(
       'elevation.shadow.overlay',
       '0px 8px 12px #091e423f, 0px 0px 1px #091e424f',
     ),
   }),
+  raised: css({
+    boxShadow: token(
+      'elevation.shadow.raised',
+      '0px 1px 1px #091e423f, 0px 0px 1px #091e4221',
+    ),
+  }),
 } as const;
 
 export type Shadow = keyof typeof shadowMap;

package/src/components/inline.partial.tsx

@@ -151,11 +151,11 @@ export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0a2a4380b534d14cdad759ff2d33a6c8>>
+ * @codegen <<SignedSource::e4218f7c850d1484a192d5b8b5dce136>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 const columnGapMap = {
   'space.0': css({

package/src/components/interaction-surface.partial.tsx

@@ -70,21 +70,21 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
+ * @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const backgroundActiveColorMap = {
+  input: css({
+    ':active': { backgroundColor: token('color.background.input.pressed') },
+  }),
   'inverse.subtle': css({
     ':active': {
       backgroundColor: token('color.background.inverse.subtle.pressed'),
     },
   }),
-  input: css({
-    ':active': { backgroundColor: token('color.background.input.pressed') },
-  }),
   neutral: css({
     ':active': { backgroundColor: token('color.background.neutral.pressed') },
   }),
@@ -98,11 +98,6 @@ const backgroundActiveColorMap = {
       backgroundColor: token('color.background.neutral.bold.pressed'),
     },
   }),
-  'brand.bold': css({
-    ':active': {
-      backgroundColor: token('color.background.brand.bold.pressed'),
-    },
-  }),
   selected: css({
     ':active': { backgroundColor: token('color.background.selected.pressed') },
   }),
@@ -111,6 +106,11 @@ const backgroundActiveColorMap = {
       backgroundColor: token('color.background.selected.bold.pressed'),
     },
   }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.bold.pressed'),
+    },
+  }),
   danger: css({
     ':active': { backgroundColor: token('color.background.danger.pressed') },
   }),
@@ -156,23 +156,23 @@ const backgroundActiveColorMap = {
   'elevation.surface': css({
     ':active': { backgroundColor: token('elevation.surface.pressed') },
   }),
-  'elevation.surface.raised': css({
-    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
-  }),
   'elevation.surface.overlay': css({
     ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
   }),
+  'elevation.surface.raised': css({
+    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
+  }),
 };
 
 const backgroundHoverColorMap = {
+  input: css({
+    ':hover': { backgroundColor: token('color.background.input.hovered') },
+  }),
   'inverse.subtle': css({
     ':hover': {
       backgroundColor: token('color.background.inverse.subtle.hovered'),
     },
   }),
-  input: css({
-    ':hover': { backgroundColor: token('color.background.input.hovered') },
-  }),
   neutral: css({
     ':hover': { backgroundColor: token('color.background.neutral.hovered') },
   }),
@@ -186,9 +186,6 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.neutral.bold.hovered'),
     },
   }),
-  'brand.bold': css({
-    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
-  }),
   selected: css({
     ':hover': { backgroundColor: token('color.background.selected.hovered') },
   }),
@@ -197,6 +194,9 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.selected.bold.hovered'),
     },
   }),
+  'brand.bold': css({
+    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
+  }),
   danger: css({
     ':hover': { backgroundColor: token('color.background.danger.hovered') },
   }),
@@ -242,12 +242,12 @@ const backgroundHoverColorMap = {
   'elevation.surface': css({
     ':hover': { backgroundColor: token('elevation.surface.hovered') },
   }),
-  'elevation.surface.raised': css({
-    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
-  }),
   'elevation.surface.overlay': css({
     ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
   }),
+  'elevation.surface.raised': css({
+    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
+  }),
 };
 
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;

package/src/components/stack.partial.tsx

@@ -107,11 +107,11 @@ export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac9028ae231558f3eedd10f0db04a8fe>>
+ * @codegen <<SignedSource::91d26b1ace8b38363779ae85a7ddc51b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 const rowGapMap = {
   'space.0': css({

package/src/components/text.partial.tsx

@@ -189,11 +189,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bd36caff8bedb3bdc89b6f2311c6160a>>
+ * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::39bc8db0f376f5635a25be0137792642>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
  */
 const fontSizeMap = {
   'size.050': css({
@@ -287,34 +287,28 @@ export type LineHeight = keyof typeof lineHeightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d88a2527302fee634bec7ae405e9217b>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const textColorMap = {
   'color.text': css({
     color: token('color.text', '#172B4D'),
   }),
-  subtle: css({
-    color: token('color.text.subtle', '#42526E'),
-  }),
-  subtlest: css({
-    color: token('color.text.subtlest', '#7A869A'),
-  }),
   disabled: css({
     color: token('color.text.disabled', '#A5ADBA'),
   }),
   inverse: css({
     color: token('color.text.inverse', '#FFFFFF'),
   }),
-  brand: css({
-    color: token('color.text.brand', '#0065FF'),
-  }),
   selected: css({
     color: token('color.text.selected', '#0052CC'),
   }),
+  brand: css({
+    color: token('color.text.brand', '#0065FF'),
+  }),
   danger: css({
     color: token('color.text.danger', '#DE350B'),
   }),
@@ -333,6 +327,12 @@ const textColorMap = {
   information: css({
     color: token('color.text.information', '#0052CC'),
   }),
+  subtlest: css({
+    color: token('color.text.subtlest', '#7A869A'),
+  }),
+  subtle: css({
+    color: token('color.text.subtle', '#42526E'),
+  }),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/src/internal/color-map.tsx

@@ -3,20 +3,20 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::55412dc750db330e0a2a51918237e29f>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export default {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',
-  'brand.bold': 'inverse',
-  'brand.bold.hovered': 'inverse',
-  'brand.bold.pressed': 'inverse',
   'selected.bold': 'inverse',
   'selected.bold.hovered': 'inverse',
   'selected.bold.pressed': 'inverse',
+  'brand.bold': 'inverse',
+  'brand.bold.hovered': 'inverse',
+  'brand.bold.pressed': 'inverse',
   'danger.bold': 'inverse',
   'danger.bold.hovered': 'inverse',
   'danger.bold.pressed': 'inverse',