@atlaskit/tokens 1.5.1 → 1.6.0

package/dist/es2019/tokens/default/shape/shape.js

@@ -1,6 +1,14 @@
 const shape = {
   border: {
     width: {
+      '[default]': {
+        attributes: {
+          group: 'shape',
+          state: 'active',
+          introduced: '1.5.2',
+          description: 'The default border width.'
+        }
+      },
       '0': {
         attributes: {
           group: 'shape',
@@ -12,67 +20,75 @@ const shape = {
       '050': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for all borders and dividers.'
         }
       },
       '100': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for bolder dividers and interaction states.'
         }
       }
     },
     radius: {
+      '[default]': {
+        attributes: {
+          group: 'shape',
+          state: 'active',
+          introduced: '1.5.2',
+          description: 'The default border radius.'
+        }
+      },
       '050': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for selection indicators, like tabs.'
         }
       },
       '100': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for buttons and inputs.'
         }
       },
       '200': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for smaller cards.'
         }
       },
       '300': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for cards and larger containers.'
         }
       },
       '400': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for modals.'
         }
       },
-      round: {
+      circle: {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for circular containers, like a rounded button.'
         }
       }
     }

package/dist/es2019/utils/theme-state-transformer.js

@@ -1,5 +1,5 @@
 import { themeIds } from '../theme-config';
-const themeKinds = ['light', 'dark', 'spacing', 'typography'];
+const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;
 };
@@ -27,6 +27,7 @@ export const themeStringToObject = themeState => {
       themeObject[kind] = id;
     }
     if (isThemeKind(kind) && isThemeIds(id)) {
+      // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
     return themeObject;

package/dist/es2019/utils/token-order.js

@@ -21,7 +21,7 @@ export const tokenOrder = [{
   path: 'utility',
   subpaths: []
 }, {
-  path: 'shape',
+  path: 'border',
   subpaths: ['radius', 'width']
 }, {
   path: 'space',

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.5.1",
+	"version": "1.6.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/artifacts/generated-pairs.js

@@ -4,7 +4,7 @@
  * Auto-generated list of token pairings that may need to have sufficient contrast.
  * Not currently used by tests, but is used by the custom theme contrast checker example
  *
- * @codegen <<SignedSource::349f00c184fe40bca26982001eabb94c>>
+ * @codegen <<SignedSource::ec8e2d34c5152b1b66186e14b261c0f1>>
  * @codegenCommand yarn build tokens
  */
 export var generatedPairs = [{
@@ -183,38 +183,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.red.bolder',
   background: 'color.background.accent.red.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.red.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.orange',
   background: 'color.background.accent.orange.subtlest',
@@ -223,10 +191,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.orange',
   background: 'color.background.accent.orange.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.orange.bolder',
   background: 'color.background.accent.orange.subtlest',
@@ -239,34 +203,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.orange.bolder',
   background: 'color.background.accent.orange.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.orange.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.yellow',
   background: 'color.background.accent.yellow.subtlest',
@@ -275,14 +211,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.yellow',
   background: 'color.background.accent.yellow.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.yellow.bolder',
   background: 'color.background.accent.yellow.subtlest',
@@ -295,30 +223,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.yellow.bolder',
   background: 'color.background.accent.yellow.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.yellow.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.green',
   background: 'color.background.accent.green.subtlest',
@@ -327,18 +231,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.green',
   background: 'color.background.accent.green.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.green.bolder',
   background: 'color.background.accent.green.subtlest',
@@ -351,26 +243,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.green.bolder',
   background: 'color.background.accent.green.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.green.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.teal',
   background: 'color.background.accent.teal.subtlest',
@@ -379,22 +251,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.teal',
   background: 'color.background.accent.teal.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.teal.bolder',
   background: 'color.background.accent.teal.subtlest',
@@ -407,22 +263,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.teal.bolder',
   background: 'color.background.accent.teal.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.teal.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.blue',
   background: 'color.background.accent.blue.subtlest',
@@ -431,26 +271,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.blue',
   background: 'color.background.accent.blue.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.blue.bolder',
   background: 'color.background.accent.blue.subtlest',
@@ -463,18 +283,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.blue.bolder',
   background: 'color.background.accent.blue.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.blue.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.purple',
   background: 'color.background.accent.purple.subtlest',
@@ -483,30 +291,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.purple',
   background: 'color.background.accent.purple.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.purple.bolder',
   background: 'color.background.accent.purple.subtlest',
@@ -519,14 +303,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.purple.bolder',
   background: 'color.background.accent.purple.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.purple.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.magenta',
   background: 'color.background.accent.magenta.subtlest',
@@ -535,34 +311,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.magenta',
   background: 'color.background.accent.magenta.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.magenta.bolder',
   background: 'color.background.accent.magenta.subtlest',
@@ -575,10 +323,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.magenta.bolder',
   background: 'color.background.accent.magenta.subtle',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.magenta.bolder',
-  background: 'color.background.accent.gray.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.gray',
   background: 'color.background.accent.gray.subtlest',
@@ -587,38 +331,6 @@ export var generatedPairs = [{
   foreground: 'color.text.accent.gray',
   background: 'color.background.accent.gray.subtler',
   desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.red.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.orange.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.yellow.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.green.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.teal.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.blue.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.purple.subtle',
-  desiredContrast: 4.5
-}, {
-  foreground: 'color.text.accent.gray.bolder',
-  background: 'color.background.accent.magenta.subtle',
-  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.gray.bolder',
   background: 'color.background.accent.gray.subtlest',

package/dist/esm/artifacts/palettes-raw/shape-palette.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a2e59b8e1421ca4ad026a5b2161824b2>>
+ * @codegen <<SignedSource::ba57ec0a6991ab386479b6c9006397ba>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -79,14 +79,14 @@ var tokens = [{
   "name": "border.radius.Radius400",
   "path": ["border", "radius", "Radius400"]
 }, {
-  "value": "50%",
+  "value": "32032px",
   "attributes": {
     "group": "shape"
   },
   "filePath": "src/palettes/shape-palette.tsx",
   "isSource": true,
   "original": {
-    "value": "50%",
+    "value": 32032,
     "attributes": {
       "group": "shape"
     }

package/dist/esm/artifacts/themes/atlassian-dark-new-input-border.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
+ * @codegen <<SignedSource::b255ff03ae4f781bb3016003a111bed0>>
  * @codegenCommand yarn build tokens
  */
-export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border: #A6C5E229;\n  --ds-border-disabled: #A1BDD914;\n  --ds-border-focused: #85B8FF;\n  --ds-border-input: #738496;\n  --ds-border-inverse: #161A1D;\n  --ds-border-selected: #579DFF;\n  --ds-border-brand: #579DFF;\n  --ds-border-danger: #EF5C48;\n  --ds-border-warning: #CF9F02;\n  --ds-border-success: #2ABB7F;\n  --ds-border-discovery: #8F7EE7;\n  --ds-border-information: #388BFF;\n  --ds-border-bold: #738496;\n}\n";
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border-input: #596773;\n}\n";

package/dist/esm/artifacts/themes/atlassian-light-new-input-border.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
+ * @codegen <<SignedSource::b14cc1106ad737bfef0b77e4b645c1df>>
  * @codegenCommand yarn build tokens
  */
-export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n  color-scheme: light;\n  --ds-border: #091E4224;\n  --ds-border-disabled: #091E420F;\n  --ds-border-focused: #388BFF;\n  --ds-border-input: #758195;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0C66E4;\n  --ds-border-brand: #0C66E4;\n  --ds-border-danger: #E34935;\n  --ds-border-warning: #D97008;\n  --ds-border-success: #22A06B;\n  --ds-border-discovery: #8270DB;\n  --ds-border-information: #1D7AFC;\n  --ds-border-bold: #758195;\n}\n";
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n  color-scheme: light;\n  --ds-border-input: #8590A2;\n}\n";

package/dist/esm/artifacts/themes/atlassian-shape.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01d88a41c27f9a921fe1a40fec0a7ba0>>
+ * @codegen <<SignedSource::861a4448ac467155c8290f2b211e99c5>>
  * @codegenCommand yarn build tokens
  */
-export default "\nhtml[data-theme~=\"shape:shape\"] {\n  --ds-radius-050: 0.125rem;\n  --ds-radius-100: 0.25rem;\n  --ds-radius-200: 0.5rem;\n  --ds-radius-300: 0.75rem;\n  --ds-radius-400: 1rem;\n  --ds-radius-round: 50%;\n  --ds-width-0: 0rem;\n  --ds-width-050: 0.0625rem;\n  --ds-width-100: 0.125rem;\n}\n";
+export default "\nhtml[data-theme~=\"shape:shape\"] {\n  --ds-border-radius-050: 0.125rem;\n  --ds-border-radius: 0.25rem;\n  --ds-border-radius-100: 0.25rem;\n  --ds-border-radius-200: 0.5rem;\n  --ds-border-radius-300: 0.75rem;\n  --ds-border-radius-400: 1rem;\n  --ds-border-radius-circle: 2002rem;\n  --ds-border-width: 0.0625rem;\n  --ds-border-width-0: 0rem;\n  --ds-border-width-050: 0.0625rem;\n  --ds-border-width-100: 0.125rem;\n}\n";

package/dist/esm/artifacts/token-default-values.js

@@ -4,19 +4,10 @@
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::856ff062171d44deb03158a6fa7d7bd1>>
+ * @codegen <<SignedSource::cc9231cd2b7a9797c51b4b8b742bab92>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
-  'border.radius.050': '0.125rem',
-  'border.radius.100': '0.25rem',
-  'border.radius.200': '0.5rem',
-  'border.radius.300': '0.75rem',
-  'border.radius.400': '1rem',
-  'border.radius.round': '50%',
-  'border.width.0': '0rem',
-  'border.width.050': '0.0625rem',
-  'border.width.100': '0.125rem',
   'color.text': '#172B4D',
   'color.text.accent.red': '#AE2A19',
   'color.text.accent.red.bolder': '#601E16',
@@ -303,6 +294,17 @@ var defaultTokenValues = {
   'opacity.disabled': '0.4',
   'opacity.loading': '0.2',
   'utility.UNSAFE.transparent': 'transparent',
+  'border.radius.050': '0.125rem',
+  'border.radius': '0.25rem',
+  'border.radius.100': '0.25rem',
+  'border.radius.200': '0.5rem',
+  'border.radius.300': '0.75rem',
+  'border.radius.400': '1rem',
+  'border.radius.circle': '2002rem',
+  'border.width': '0.0625rem',
+  'border.width.0': '0rem',
+  'border.width.050': '0.0625rem',
+  'border.width.100': '0.125rem',
   'space.0': '0rem',
   'space.025': '0.125rem',
   'space.050': '0.25rem',

package/dist/esm/artifacts/token-names.js

@@ -1,18 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::462a85d7e15b8fb4e0c4225b94e89903>>
+ * @codegen <<SignedSource::488b6f348c638f30edc95365a3de0725>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
-  'border.radius.050': '--ds-radius-050',
-  'border.radius.100': '--ds-radius-100',
-  'border.radius.200': '--ds-radius-200',
-  'border.radius.300': '--ds-radius-300',
-  'border.radius.400': '--ds-radius-400',
-  'border.radius.round': '--ds-radius-round',
-  'border.width.0': '--ds-width-0',
-  'border.width.050': '--ds-width-050',
-  'border.width.100': '--ds-width-100',
   'color.text': '--ds-text',
   'color.text.accent.red': '--ds-text-accent-red',
   'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
@@ -299,6 +290,17 @@ var tokens = {
   'opacity.disabled': '--ds-opacity-disabled',
   'opacity.loading': '--ds-opacity-loading',
   'utility.UNSAFE.transparent': '--ds-UNSAFE-transparent',
+  'border.radius.050': '--ds-border-radius-050',
+  'border.radius': '--ds-border-radius',
+  'border.radius.100': '--ds-border-radius-100',
+  'border.radius.200': '--ds-border-radius-200',
+  'border.radius.300': '--ds-border-radius-300',
+  'border.radius.400': '--ds-border-radius-400',
+  'border.radius.circle': '--ds-border-radius-circle',
+  'border.width': '--ds-border-width',
+  'border.width.0': '--ds-border-width-0',
+  'border.width.050': '--ds-border-width-050',
+  'border.width.100': '--ds-border-width-100',
   'space.0': '--ds-space-0',
   'space.025': '--ds-space-025',
   'space.050': '--ds-space-050',