@atlaskit/tokens 1.5.2 → 1.6.0

package/dist/cjs/tokens/atlassian-shape/shape.js

@@ -11,6 +11,9 @@ exports.default = void 0;
 var shape = {
   border: {
     width: {
+      '[default]': {
+        value: 'Size050'
+      },
       '0': {
         value: 'Size0'
       },
@@ -22,6 +25,9 @@ var shape = {
       }
     },
     radius: {
+      '[default]': {
+        value: 'Radius100'
+      },
       '050': {
         value: 'Radius050'
       },
@@ -37,7 +43,7 @@ var shape = {
       '400': {
         value: 'Radius400'
       },
-      round: {
+      circle: {
         value: 'RadiusCircle'
       }
     }

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.2",
+	"version": "1.6.0",
 	"sideEffects": [
 		"**/*.css"
 	]

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-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;
 }
 `;

package/dist/es2019/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
  */
 const 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 @@ const 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/es2019/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
  */
 const 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 @@ const 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',

package/dist/es2019/artifacts/tokens-raw/atlassian-dark-new-input-border.js

@@ -1,82 +1,16 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f091852abdb216a4ab49dfd79884c4d4>>
+ * @codegen <<SignedSource::2c7e6a36e75ad8b32981cc4bbaa378db>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers."
-  },
-  "value": "#A6C5E229",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers."
-    },
-    "value": "DarkNeutral300A"
-  },
-  "name": "color.border.[default]",
-  "path": ["color", "border", "[default]"],
-  "cleanName": "color.border"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders of elements in a disabled state."
-  },
-  "value": "#A1BDD914",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders of elements in a disabled state."
-    },
-    "value": "DarkNeutral200A"
-  },
-  "name": "color.border.disabled",
-  "path": ["color", "border", "disabled"],
-  "cleanName": "color.border.disabled"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for focus rings of elements in a focus state."
-  },
-  "value": "#85B8FF",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for focus rings of elements in a focus state."
-    },
-    "value": "Blue300"
-  },
-  "name": "color.border.focused",
-  "path": ["color", "border", "focused"],
-  "cleanName": "color.border.focused"
-}, {
   "attributes": {
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
     "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#738496",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
   "isSource": true,
   "original": {
@@ -86,208 +20,10 @@ const tokens = [{
       "introduced": "0.6.0",
       "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "DarkNeutral600"
+    "value": "DarkNeutral500"
   },
   "name": "color.border.input",
   "path": ["color", "border", "input"],
   "cleanName": "color.border.input"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders on bold backgrounds."
-  },
-  "value": "#161A1D",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders on bold backgrounds."
-    },
-    "value": "DarkNeutral0"
-  },
-  "name": "color.border.inverse",
-  "path": ["color", "border", "inverse"],
-  "cleanName": "color.border.inverse"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.2",
-    "description": "Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items."
-  },
-  "value": "#579DFF",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.2",
-      "description": "Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items."
-    },
-    "value": "Blue400"
-  },
-  "name": "color.border.selected",
-  "path": ["color", "border", "selected"],
-  "cleanName": "color.border.selected"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons."
-  },
-  "value": "#579DFF",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons."
-    },
-    "value": "Blue400"
-  },
-  "name": "color.border.brand",
-  "path": ["color", "border", "brand"],
-  "cleanName": "color.border.brand"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders communicating critical information, such as the borders on invalid text fields."
-  },
-  "value": "#EF5C48",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders communicating critical information, such as the borders on invalid text fields."
-    },
-    "value": "Red500"
-  },
-  "name": "color.border.danger",
-  "path": ["color", "border", "danger"],
-  "cleanName": "color.border.danger"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders communicating caution."
-  },
-  "value": "#CF9F02",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders communicating caution."
-    },
-    "value": "Yellow500"
-  },
-  "name": "color.border.warning",
-  "path": ["color", "border", "warning"],
-  "cleanName": "color.border.warning"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders communicating a favorable outcome, such as the borders on validated text fields."
-  },
-  "value": "#2ABB7F",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders communicating a favorable outcome, such as the borders on validated text fields."
-    },
-    "value": "Green500"
-  },
-  "name": "color.border.success",
-  "path": ["color", "border", "success"],
-  "cleanName": "color.border.success"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders communicating change or something new, such as the borders in onboarding spotlights."
-  },
-  "value": "#8F7EE7",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders communicating change or something new, such as the borders in onboarding spotlights."
-    },
-    "value": "Purple500"
-  },
-  "name": "color.border.discovery",
-  "path": ["color", "border", "discovery"],
-  "cleanName": "color.border.discovery"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.6.0",
-    "description": "Use for borders communicating information or something in-progress."
-  },
-  "value": "#388BFF",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.6.0",
-      "description": "Use for borders communicating information or something in-progress."
-    },
-    "value": "Blue500"
-  },
-  "name": "color.border.information",
-  "path": ["color", "border", "information"],
-  "cleanName": "color.border.information"
-}, {
-  "attributes": {
-    "group": "paint",
-    "state": "active",
-    "introduced": "0.10.8",
-    "description": "A neutral border option that passes min 3:1 contrast ratios."
-  },
-  "value": "#738496",
-  "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
-  "isSource": true,
-  "original": {
-    "attributes": {
-      "group": "paint",
-      "state": "active",
-      "introduced": "0.10.8",
-      "description": "A neutral border option that passes min 3:1 contrast ratios."
-    },
-    "value": "DarkNeutral600"
-  },
-  "name": "color.border.bold",
-  "path": ["color", "border", "bold"],
-  "cleanName": "color.border.bold"
 }];
 export default tokens;