@atlaskit/tokens 1.5.1 → 1.6.0

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

@@ -7,6 +7,14 @@ exports.default = void 0;
 var shape = {
   border: {
     width: {
+      '[default]': {
+        attributes: {
+          group: 'shape',
+          state: 'active',
+          introduced: '1.5.2',
+          description: 'The default border width.'
+        }
+      },
       '0': {
         attributes: {
           group: 'shape',
@@ -18,67 +26,75 @@ var 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/cjs/utils/theme-state-transformer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.themeStringToObject = exports.themeObjectToString = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _themeConfig = require("../theme-config");
-var themeKinds = ['light', 'dark', 'spacing', 'typography'];
+var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -44,6 +44,7 @@ var themeStringToObject = function 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/cjs/utils/token-order.js

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

package/dist/cjs/version.json

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

package/dist/es2019/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 const generatedPairs = [{
@@ -183,38 +183,6 @@ export const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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 const 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/es2019/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
  */
 const tokens = [{
@@ -79,14 +79,14 @@ const 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/es2019/artifacts/themes/atlassian-dark-new-input-border.js

@@ -1,24 +1,12 @@
 /**
  * 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 `
 html[data-color-mode="light"][data-theme~="light:dark"],
 html[data-color-mode="dark"][data-theme~="dark:dark"] {
   color-scheme: dark;
-  --ds-border: #A6C5E229;
-  --ds-border-disabled: #A1BDD914;
-  --ds-border-focused: #85B8FF;
-  --ds-border-input: #738496;
-  --ds-border-inverse: #161A1D;
-  --ds-border-selected: #579DFF;
-  --ds-border-brand: #579DFF;
-  --ds-border-danger: #EF5C48;
-  --ds-border-warning: #CF9F02;
-  --ds-border-success: #2ABB7F;
-  --ds-border-discovery: #8F7EE7;
-  --ds-border-information: #388BFF;
-  --ds-border-bold: #738496;
+  --ds-border-input: #596773;
 }
 `;

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

@@ -1,24 +1,12 @@
 /**
  * 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 `
 html[data-color-mode="light"][data-theme~="light:light"],
 html[data-color-mode="dark"][data-theme~="dark:light"] {
   color-scheme: light;
-  --ds-border: #091E4224;
-  --ds-border-disabled: #091E420F;
-  --ds-border-focused: #388BFF;
-  --ds-border-input: #758195;
-  --ds-border-inverse: #FFFFFF;
-  --ds-border-selected: #0C66E4;
-  --ds-border-brand: #0C66E4;
-  --ds-border-danger: #E34935;
-  --ds-border-warning: #D97008;
-  --ds-border-success: #22A06B;
-  --ds-border-discovery: #8270DB;
-  --ds-border-information: #1D7AFC;
-  --ds-border-bold: #758195;
+  --ds-border-input: #8590A2;
 }
 `;

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

@@ -1,18 +1,20 @@
 /**
  * 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 `
 html[data-theme~="shape:shape"] {
-  --ds-radius-050: 0.125rem;
-  --ds-radius-100: 0.25rem;
-  --ds-radius-200: 0.5rem;
-  --ds-radius-300: 0.75rem;
-  --ds-radius-400: 1rem;
-  --ds-radius-round: 50%;
-  --ds-width-0: 0rem;
-  --ds-width-050: 0.0625rem;
-  --ds-width-100: 0.125rem;
+  --ds-border-radius-050: 0.125rem;
+  --ds-border-radius: 0.25rem;
+  --ds-border-radius-100: 0.25rem;
+  --ds-border-radius-200: 0.5rem;
+  --ds-border-radius-300: 0.75rem;
+  --ds-border-radius-400: 1rem;
+  --ds-border-radius-circle: 2002rem;
+  --ds-border-width: 0.0625rem;
+  --ds-border-width-0: 0rem;
+  --ds-border-width-050: 0.0625rem;
+  --ds-border-width-100: 0.125rem;
 }
 `;