@atlaskit/ds-explorations 5.0.8 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/ds-explorations
 
+## 5.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.0
+
+### Minor Changes
+
+- [`644c0f593ae62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/644c0f593ae62) -
+  Adds new semantic background and text tokens.
+
+  **Background Tokens (`background.[semantics].subtler.*`):**
+
+  Added `subtler` variants for semantic background colors with default, hovered, and pressed states:
+  - `background.success.subtler.[default|hovered|pressed]`
+  - `background.warning.subtler.[default|hovered|pressed]`
+  - `background.danger.subtler.[default|hovered|pressed]`
+  - `background.information.subtler.[default|hovered|pressed]`
+  - `background.discovery.subtler.[default|hovered|pressed]`
+
+  **Text Tokens (`text.[semantics].bolder`):**
+
+  Added `bolder` variants for semantic text colors to ensure proper contrast on colored backgrounds:
+  - `text.success.bolder`
+  - `text.warning.bolder`
+  - `text.danger.bolder`
+  - `text.information.bolder`
+  - `text.discovery.bolder`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.8
 
 ### Patch Changes

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

@@ -58,11 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = exports.default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b617768b23d7eed85bbd7563acdd2bcb>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 var backgroundActiveColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({
@@ -320,6 +320,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-danger-pressed, #FFB8B2)"
     }
   }),
+  'danger.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-danger-subtler-pressed, #FD9891)"
+    }
+  }),
   'danger.bold': (0, _react2.css)({
     '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #872821)"
@@ -330,6 +335,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-warning-pressed, #FBD779)"
     }
   }),
+  'warning.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-warning-subtler-pressed, #FBC828)"
+    }
+  }),
   'warning.bold': (0, _react2.css)({
     '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #F68909)"
@@ -340,6 +350,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-success-pressed, #BDE97C)"
     }
   }),
+  'success.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-success-subtler-pressed, #B3DF72)"
+    }
+  }),
   'success.bold': (0, _react2.css)({
     '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #3F5224)"
@@ -350,6 +365,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-discovery-pressed, #E3BDFA)"
     }
   }),
+  'discovery.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)"
+    }
+  }),
   'discovery.bold': (0, _react2.css)({
     '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #673286)"
@@ -360,6 +380,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-information-pressed, #ADCBFB)"
     }
   }),
+  'information.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-information-subtler-pressed, #8FB8F6)"
+    }
+  }),
   'information.bold': (0, _react2.css)({
     '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #144794)"
@@ -637,6 +662,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
     }
   }),
+  'danger.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-danger-subtler-hovered, #FFB8B2)"
+    }
+  }),
   'danger.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -647,6 +677,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-warning-hovered, #FCE4A6)"
     }
   }),
+  'warning.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-warning-subtler-hovered, #FBD779)"
+    }
+  }),
   'warning.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #FCA700)"
@@ -657,6 +692,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-success-hovered, #D3F1A7)"
     }
   }),
+  'success.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-success-subtler-hovered, #BDE97C)"
+    }
+  }),
   'success.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #4C6B1F)"
@@ -667,6 +707,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-discovery-hovered, #EED7FC)"
     }
   }),
+  'discovery.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-discovery-subtler-hovered, #E3BDFA)"
+    }
+  }),
   'discovery.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #803FA5)"
@@ -677,6 +722,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-information-hovered, #CFE1FD)"
     }
   }),
+  'information.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-information-subtler-hovered, #ADCBFB)"
+    }
+  }),
   'information.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #1558BC)"

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

@@ -9,9 +9,9 @@ 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::4703c360d730c573909b95c97af0ce41>>
+ * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 var _default = exports.default = {
   'neutral.bold': 'inverse',

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

@@ -53,11 +53,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b617768b23d7eed85bbd7563acdd2bcb>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 
 const backgroundActiveColorMap = {
@@ -316,6 +316,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-danger-pressed, #FFB8B2)"
     }
   }),
+  'danger.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-danger-subtler-pressed, #FD9891)"
+    }
+  }),
   'danger.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #872821)"
@@ -326,6 +331,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-warning-pressed, #FBD779)"
     }
   }),
+  'warning.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-warning-subtler-pressed, #FBC828)"
+    }
+  }),
   'warning.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #F68909)"
@@ -336,6 +346,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-success-pressed, #BDE97C)"
     }
   }),
+  'success.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-success-subtler-pressed, #B3DF72)"
+    }
+  }),
   'success.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #3F5224)"
@@ -346,6 +361,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-discovery-pressed, #E3BDFA)"
     }
   }),
+  'discovery.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)"
+    }
+  }),
   'discovery.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #673286)"
@@ -356,6 +376,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-information-pressed, #ADCBFB)"
     }
   }),
+  'information.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-information-subtler-pressed, #8FB8F6)"
+    }
+  }),
   'information.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #144794)"
@@ -633,6 +658,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
     }
   }),
+  'danger.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-danger-subtler-hovered, #FFB8B2)"
+    }
+  }),
   'danger.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -643,6 +673,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-warning-hovered, #FCE4A6)"
     }
   }),
+  'warning.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-warning-subtler-hovered, #FBD779)"
+    }
+  }),
   'warning.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #FCA700)"
@@ -653,6 +688,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-success-hovered, #D3F1A7)"
     }
   }),
+  'success.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-success-subtler-hovered, #BDE97C)"
+    }
+  }),
   'success.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #4C6B1F)"
@@ -663,6 +703,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-discovery-hovered, #EED7FC)"
     }
   }),
+  'discovery.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-discovery-subtler-hovered, #E3BDFA)"
+    }
+  }),
   'discovery.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #803FA5)"
@@ -673,6 +718,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-information-hovered, #CFE1FD)"
     }
   }),
+  'information.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-information-subtler-hovered, #ADCBFB)"
+    }
+  }),
   'information.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #1558BC)"

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

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4703c360d730c573909b95c97af0ce41>>
+ * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 export default {
   'neutral.bold': 'inverse',

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

@@ -52,11 +52,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b617768b23d7eed85bbd7563acdd2bcb>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 
 var backgroundActiveColorMap = {
@@ -315,6 +315,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-danger-pressed, #FFB8B2)"
     }
   }),
+  'danger.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-danger-subtler-pressed, #FD9891)"
+    }
+  }),
   'danger.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-danger-bold-pressed, #872821)"
@@ -325,6 +330,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-warning-pressed, #FBD779)"
     }
   }),
+  'warning.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-warning-subtler-pressed, #FBC828)"
+    }
+  }),
   'warning.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-warning-bold-pressed, #F68909)"
@@ -335,6 +345,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-success-pressed, #BDE97C)"
     }
   }),
+  'success.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-success-subtler-pressed, #B3DF72)"
+    }
+  }),
   'success.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-success-bold-pressed, #3F5224)"
@@ -345,6 +360,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-discovery-pressed, #E3BDFA)"
     }
   }),
+  'discovery.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)"
+    }
+  }),
   'discovery.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-discovery-bold-pressed, #673286)"
@@ -355,6 +375,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-information-pressed, #ADCBFB)"
     }
   }),
+  'information.subtler': css({
+    '&:active': {
+      backgroundColor: "var(--ds-background-information-subtler-pressed, #8FB8F6)"
+    }
+  }),
   'information.bold': css({
     '&:active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #144794)"
@@ -632,6 +657,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
     }
   }),
+  'danger.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-danger-subtler-hovered, #FFB8B2)"
+    }
+  }),
   'danger.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -642,6 +672,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-warning-hovered, #FCE4A6)"
     }
   }),
+  'warning.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-warning-subtler-hovered, #FBD779)"
+    }
+  }),
   'warning.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-warning-bold-hovered, #FCA700)"
@@ -652,6 +687,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-success-hovered, #D3F1A7)"
     }
   }),
+  'success.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-success-subtler-hovered, #BDE97C)"
+    }
+  }),
   'success.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-success-bold-hovered, #4C6B1F)"
@@ -662,6 +702,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-discovery-hovered, #EED7FC)"
     }
   }),
+  'discovery.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-discovery-subtler-hovered, #E3BDFA)"
+    }
+  }),
   'discovery.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-discovery-bold-hovered, #803FA5)"
@@ -672,6 +717,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-information-hovered, #CFE1FD)"
     }
   }),
+  'information.subtler': css({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-information-subtler-hovered, #ADCBFB)"
+    }
+  }),
   'information.bold': css({
     '&:hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #1558BC)"

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

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4703c360d730c573909b95c97af0ce41>>
+ * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/types/components/interaction-surface.partial.d.ts

@@ -25,13 +25,13 @@ declare const InteractionSurface: ({ appearance, children, testId }: Interaction
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b617768b23d7eed85bbd7563acdd2bcb>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
-type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
+type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.subtler' | 'danger.bold' | 'warning' | 'warning.subtler' | 'warning.bold' | 'success' | 'success.subtler' | 'success.bold' | 'discovery' | 'discovery.subtler' | 'discovery.bold' | 'information' | 'information.subtler' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
 /**
  * @codegenEnd
  */

package/dist/types/internal/color-map.d.ts

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4703c360d730c573909b95c97af0ce41>>
+ * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 declare const _default: {
     readonly 'neutral.bold': "inverse";

package/dist/types-ts4.5/components/interaction-surface.partial.d.ts

@@ -25,13 +25,13 @@ declare const InteractionSurface: ({ appearance, children, testId }: Interaction
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b617768b23d7eed85bbd7563acdd2bcb>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
-type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
+type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.subtler' | 'danger.bold' | 'warning' | 'warning.subtler' | 'warning.bold' | 'success' | 'success.subtler' | 'success.bold' | 'discovery' | 'discovery.subtler' | 'discovery.bold' | 'information' | 'information.subtler' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
 /**
  * @codegenEnd
  */

package/dist/types-ts4.5/internal/color-map.d.ts

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4703c360d730c573909b95c97af0ce41>>
+ * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::b763fb6c355b33e6fbf23afb996f817f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 declare const _default: {
     readonly 'neutral.bold': "inverse";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "5.0.8",
+	"version": "5.1.1",
 	"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 		"prepare": "yarn ak-postbuild"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tokens": "^9.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -34,9 +34,9 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^5.2.0",
-		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/textfield": "^8.0.0",
+		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/primitives": "^17.0.0",
+		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@testing-library/react": "^13.4.0",
 		"fs-extra": "^4.0.2",