@atlaskit/ds-explorations 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 2.0.1
+
+### Patch Changes
+
+- [`290b1f069bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/290b1f069bd) - Regenerate codegen styles
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/components/box.partial.js

@@ -282,11 +282,11 @@ var 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>>
  */
 var paddingMap = {
   'space.0': (0, _react2.css)({
@@ -427,21 +427,18 @@ var paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::04c05379e7c6ad157383d5f77e66911a>>
  * @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::e348c7cd343cf53ff944fdb7023c577a>>
  */
 var borderColorMap = {
   'color.border': (0, _react2.css)({
     borderColor: "var(--ds-border, #091e4221)"
   }),
-  bold: (0, _react2.css)({
-    borderColor: "var(--ds-border-bold, #344563)"
-  }),
-  inverse: (0, _react2.css)({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  disabled: (0, _react2.css)({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   focused: (0, _react2.css)({
     borderColor: "var(--ds-border-focused, #4C9AFF)"
@@ -449,15 +446,15 @@ var borderColorMap = {
   input: (0, _react2.css)({
     borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
-  disabled: (0, _react2.css)({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  brand: (0, _react2.css)({
-    borderColor: "var(--ds-border-brand, #0052CC)"
+  inverse: (0, _react2.css)({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   selected: (0, _react2.css)({
     borderColor: "var(--ds-border-selected, #0052CC)"
   }),
+  brand: (0, _react2.css)({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     borderColor: "var(--ds-border-danger, #FF5630)"
   }),
@@ -472,18 +469,21 @@ var borderColorMap = {
   }),
   information: (0, _react2.css)({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: (0, _react2.css)({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 var backgroundColorMap = {
   disabled: (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
-  'inverse.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
   input: (0, _react2.css)({
     backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
+  'inverse.subtle': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
   neutral: (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
@@ -493,15 +493,15 @@ var backgroundColorMap = {
   'neutral.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
-  'brand.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
   selected: (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
+  'brand.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
@@ -544,31 +544,31 @@ var backgroundColorMap = {
   'elevation.surface': (0, _react2.css)({
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
-  'elevation.surface.sunken': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.overlay': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   }),
   'elevation.surface.raised': (0, _react2.css)({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  'elevation.surface.sunken': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   })
 };
 var shadowMap = {
-  raised: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  }),
   overflow: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
   }),
-  'overflow.spread': (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
   'overflow.perimeter': (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
   }),
+  'overflow.spread': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
   overlay: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
   })
 };
 

package/dist/cjs/components/inline.partial.js

@@ -120,11 +120,11 @@ Inline.displayName = 'Inline';
 var _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>>
  */
 
 exports.default = _default;

package/dist/cjs/components/interaction-surface.partial.js

@@ -58,23 +58,23 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
+ * @codegen <<SignedSource::86378a9df36e53f14f179490e5850418>>
  * @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::e348c7cd343cf53ff944fdb7023c577a>>
  */
 
 exports.default = _default;
 var backgroundActiveColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -92,11 +92,6 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -107,6 +102,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
@@ -162,26 +162,26 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 var backgroundHoverColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -199,11 +199,6 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -214,6 +209,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
@@ -269,14 +269,14 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })
 };

package/dist/cjs/components/stack.partial.js

@@ -84,11 +84,11 @@ Stack.displayName = 'Stack';
 var _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>>
  */
 
 exports.default = _default;

package/dist/cjs/components/text.partial.js

@@ -140,11 +140,11 @@ var Text = function Text(_ref) {
 var _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>>
  */
 
 exports.default = _default;
@@ -223,34 +223,28 @@ var lineHeightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d88a2527302fee634bec7ae405e9217b>>
+ * @codegen <<SignedSource::ca24871d7a06dd779f21c85960ded8ba>>
  * @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::e348c7cd343cf53ff944fdb7023c577a>>
  */
 var textColorMap = {
   'color.text': (0, _react2.css)({
     color: "var(--ds-text, #172B4D)"
   }),
-  subtle: (0, _react2.css)({
-    color: "var(--ds-text-subtle, #42526E)"
-  }),
-  subtlest: (0, _react2.css)({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
   disabled: (0, _react2.css)({
     color: "var(--ds-text-disabled, #A5ADBA)"
   }),
   inverse: (0, _react2.css)({
     color: "var(--ds-text-inverse, #FFFFFF)"
   }),
-  brand: (0, _react2.css)({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
   selected: (0, _react2.css)({
     color: "var(--ds-text-selected, #0052CC)"
   }),
+  brand: (0, _react2.css)({
+    color: "var(--ds-text-brand, #0065FF)"
+  }),
   danger: (0, _react2.css)({
     color: "var(--ds-text-danger, #DE350B)"
   }),
@@ -268,6 +262,12 @@ var textColorMap = {
   }),
   information: (0, _react2.css)({
     color: "var(--ds-text-information, #0052CC)"
+  }),
+  subtlest: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, #7A869A)"
+  }),
+  subtle: (0, _react2.css)({
+    color: "var(--ds-text-subtle, #42526E)"
   })
 };
 /**

package/dist/cjs/internal/color-map.js

@@ -10,20 +10,20 @@ exports.default = void 0;
  *
  * 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::2ca647ee8f34f9282287118d86be4585>>
  * @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::e348c7cd343cf53ff944fdb7023c577a>>
  */
 var _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',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"sideEffects": false
 }

package/dist/es2019/components/box.partial.js

@@ -264,11 +264,11 @@ const 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({
@@ -409,21 +409,18 @@ const paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::04c05379e7c6ad157383d5f77e66911a>>
  * @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::e348c7cd343cf53ff944fdb7023c577a>>
  */
 const borderColorMap = {
   'color.border': css({
     borderColor: "var(--ds-border, #091e4221)"
   }),
-  bold: css({
-    borderColor: "var(--ds-border-bold, #344563)"
-  }),
-  inverse: css({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  disabled: css({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   focused: css({
     borderColor: "var(--ds-border-focused, #4C9AFF)"
@@ -431,15 +428,15 @@ const borderColorMap = {
   input: css({
     borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
-  disabled: css({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  brand: css({
-    borderColor: "var(--ds-border-brand, #0052CC)"
+  inverse: css({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   selected: css({
     borderColor: "var(--ds-border-selected, #0052CC)"
   }),
+  brand: css({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
   danger: css({
     borderColor: "var(--ds-border-danger, #FF5630)"
   }),
@@ -454,18 +451,21 @@ const borderColorMap = {
   }),
   information: css({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: css({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 const backgroundColorMap = {
   disabled: css({
     backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
-  'inverse.subtle': css({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
   input: css({
     backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
+  'inverse.subtle': css({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
   neutral: css({
     backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
@@ -475,15 +475,15 @@ const backgroundColorMap = {
   'neutral.bold': css({
     backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
-  'brand.bold': css({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
   selected: css({
     backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': css({
     backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
+  'brand.bold': css({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
   danger: css({
     backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
@@ -526,31 +526,31 @@ const backgroundColorMap = {
   'elevation.surface': css({
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
-  'elevation.surface.sunken': css({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.overlay': css({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   }),
   'elevation.surface.raised': css({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
-  'elevation.surface.overlay': css({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  'elevation.surface.sunken': css({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   })
 };
 const shadowMap = {
-  raised: css({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  }),
   overflow: css({
     boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
   }),
-  'overflow.spread': css({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
   'overflow.perimeter': css({
     boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
   }),
+  'overflow.spread': css({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
   overlay: css({
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: css({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
   })
 };
 

package/dist/es2019/components/inline.partial.js

@@ -111,11 +111,11 @@ Inline.displayName = 'Inline';
 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 = {