@atlaskit/tokens 6.0.0 → 6.1.0

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

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c6c0b8c2ca5e429f25fe4035e374a0c5>>
+ * @codegen <<SignedSource::f755c03a62ad1c3a129f21e10a2669d5>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
-    "introduced": "1.1.0",
-    "description": "Used for selection indicators, like tabs."
+    "suggest": ["2px"],
+    "introduced": "6.1.0",
+    "description": "Used for small containers such as badges."
   },
   "value": "2px",
   "filePath": "schema/themes/atlassian-shape/shape.tsx",
@@ -23,20 +24,141 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
-      "introduced": "1.1.0",
-      "description": "Used for selection indicators, like tabs."
+      "suggest": ["2px"],
+      "introduced": "6.1.0",
+      "description": "Used for small containers such as badges."
     },
-    "value": "Radius050"
+    "value": "Radius02"
   },
-  "name": "border.radius.050",
-  "path": ["border", "radius", "050"],
-  "cleanName": "border.radius.050"
+  "name": "radius.xsmall",
+  "path": ["radius", "xsmall"],
+  "cleanName": "radius.xsmall"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["4px"],
+    "introduced": "6.1.0",
+    "description": "Used for labels."
+  },
+  "value": "4px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["4px"],
+      "introduced": "6.1.0",
+      "description": "Used for labels."
+    },
+    "value": "Radius04"
+  },
+  "name": "radius.small",
+  "path": ["radius", "small"],
+  "cleanName": "radius.small"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["6px"],
+    "introduced": "6.1.0",
+    "description": "Used for buttons and inputs."
+  },
+  "value": "6px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["6px"],
+      "introduced": "6.1.0",
+      "description": "Used for buttons and inputs."
+    },
+    "value": "Radius06"
+  },
+  "name": "radius.medium",
+  "path": ["radius", "medium"],
+  "cleanName": "radius.medium"
 }, {
   "attributes": {
     "group": "shape",
     "state": "active",
-    "suggest": ["3px", "4px"],
+    "suggest": ["8px"],
+    "introduced": "6.1.0",
+    "description": "Used for cards and small containers."
+  },
+  "value": "8px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["8px"],
+      "introduced": "6.1.0",
+      "description": "Used for cards and small containers."
+    },
+    "value": "Radius08"
+  },
+  "name": "radius.large",
+  "path": ["radius", "large"],
+  "cleanName": "radius.large"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["12px"],
+    "introduced": "6.1.0",
+    "description": "Used for modals and large containers."
+  },
+  "value": "12px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["12px"],
+      "introduced": "6.1.0",
+      "description": "Used for modals and large containers."
+    },
+    "value": "Radius12"
+  },
+  "name": "radius.xlarge",
+  "path": ["radius", "xlarge"],
+  "cleanName": "radius.xlarge"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["50%"],
+    "introduced": "6.1.0",
+    "description": "Used for circular containers, like a rounded button."
+  },
+  "value": "9999px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["50%"],
+      "introduced": "6.1.0",
+      "description": "Used for circular containers, like a rounded button."
+    },
+    "value": "Radius99"
+  },
+  "name": "radius.full",
+  "path": ["radius", "full"],
+  "cleanName": "radius.full"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "deprecated",
     "introduced": "1.5.2",
+    "deprecated": "6.1.0",
     "description": "The default border radius."
   },
   "value": "4px",
@@ -45,12 +167,12 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
-      "suggest": ["3px", "4px"],
+      "state": "deprecated",
       "introduced": "1.5.2",
+      "deprecated": "6.1.0",
       "description": "The default border radius."
     },
-    "value": "Radius100"
+    "value": "Radius04"
   },
   "name": "border.radius.[default]",
   "path": ["border", "radius", "[default]"],
@@ -58,8 +180,33 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
+    "introduced": "1.1.0",
+    "deprecated": "6.1.0",
+    "description": "Used for selection indicators, like tabs."
+  },
+  "value": "2px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "deprecated",
+      "introduced": "1.1.0",
+      "deprecated": "6.1.0",
+      "description": "Used for selection indicators, like tabs."
+    },
+    "value": "Radius02"
+  },
+  "name": "border.radius.050",
+  "path": ["border", "radius", "050"],
+  "cleanName": "border.radius.050"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "deprecated",
     "introduced": "1.1.0",
+    "deprecated": "6.1.0",
     "description": "Used for buttons and inputs."
   },
   "value": "4px",
@@ -68,11 +215,12 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.1.0",
+      "deprecated": "6.1.0",
       "description": "Used for buttons and inputs."
     },
-    "value": "Radius100"
+    "value": "Radius04"
   },
   "name": "border.radius.100",
   "path": ["border", "radius", "100"],
@@ -80,8 +228,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
     "introduced": "1.1.0",
+    "deprecated": "6.1.0",
     "description": "Used for smaller cards."
   },
   "value": "8px",
@@ -90,11 +239,12 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.1.0",
+      "deprecated": "6.1.0",
       "description": "Used for smaller cards."
     },
-    "value": "Radius200"
+    "value": "Radius08"
   },
   "name": "border.radius.200",
   "path": ["border", "radius", "200"],
@@ -102,8 +252,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
     "introduced": "1.1.0",
+    "deprecated": "6.1.0",
     "description": "Used for cards and larger containers."
   },
   "value": "12px",
@@ -112,11 +263,12 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.1.0",
+      "deprecated": "6.1.0",
       "description": "Used for cards and larger containers."
     },
-    "value": "Radius300"
+    "value": "Radius12"
   },
   "name": "border.radius.300",
   "path": ["border", "radius", "300"],
@@ -124,8 +276,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
     "introduced": "1.1.0",
+    "deprecated": "6.1.0",
     "description": "Used for modals."
   },
   "value": "16px",
@@ -134,11 +287,12 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.1.0",
+      "deprecated": "6.1.0",
       "description": "Used for modals."
     },
-    "value": "Radius400"
+    "value": "Radius16"
   },
   "name": "border.radius.400",
   "path": ["border", "radius", "400"],
@@ -146,23 +300,23 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
-    "suggest": ["50%"],
+    "state": "deprecated",
     "introduced": "1.1.0",
+    "deprecated": "6.1.0",
     "description": "Used for circular containers, like a rounded button."
   },
-  "value": "32032px",
+  "value": "9999px",
   "filePath": "schema/themes/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
-      "suggest": ["50%"],
+      "state": "deprecated",
       "introduced": "1.1.0",
+      "deprecated": "6.1.0",
       "description": "Used for circular containers, like a rounded button."
     },
-    "value": "RadiusCircle"
+    "value": "Radius99"
   },
   "name": "border.radius.circle",
   "path": ["border", "radius", "circle"],
@@ -171,7 +325,7 @@ var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
-    "suggest": ["1px", "2px"],
+    "suggest": ["1px"],
     "introduced": "1.5.2",
     "description": "The default border width. Used for all borders."
   },
@@ -182,11 +336,11 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
-      "suggest": ["1px", "2px"],
+      "suggest": ["1px"],
       "introduced": "1.5.2",
       "description": "The default border width. Used for all borders."
     },
-    "value": "Size050"
+    "value": "BorderWidth1"
   },
   "name": "border.width.[default]",
   "path": ["border", "width", "[default]"],
@@ -194,8 +348,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "deprecated",
     "introduced": "1.2.1",
+    "deprecated": "6.1.0",
     "description": "Used for zero width borders."
   },
   "value": "0px",
@@ -204,8 +359,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "deprecated",
       "introduced": "1.2.1",
+      "deprecated": "6.1.0",
       "description": "Used for zero width borders."
     },
     "value": "Size0"
@@ -216,8 +372,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
     "introduced": "1.5.2",
+    "deprecated": "6.1.0",
     "description": "Used for indicators like tab and menu selected states."
   },
   "value": "3px",
@@ -226,8 +383,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.5.2",
+      "deprecated": "6.1.0",
       "description": "Used for indicators like tab and menu selected states."
     },
     "value": "Size200"
@@ -238,8 +396,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "active",
+    "state": "deprecated",
     "introduced": "1.5.2",
+    "deprecated": "6.1.0",
     "description": "Used for focus, active or selected inputs."
   },
   "value": "2px",
@@ -248,14 +407,63 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "active",
+      "state": "deprecated",
       "introduced": "1.5.2",
+      "deprecated": "6.1.0",
       "description": "Used for focus, active or selected inputs."
     },
-    "value": "Size100"
+    "value": "BorderWidth2"
   },
   "name": "border.width.outline",
   "path": ["border", "width", "outline"],
   "cleanName": "border.width.outline"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["2px"],
+    "introduced": "6.1.0",
+    "description": "Use for selected states."
+  },
+  "value": "2px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["2px"],
+      "introduced": "6.1.0",
+      "description": "Use for selected states."
+    },
+    "value": "BorderWidth2"
+  },
+  "name": "border.width.selected",
+  "path": ["border", "width", "selected"],
+  "cleanName": "border.width.selected"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "suggest": ["2px"],
+    "introduced": "6.1.0",
+    "description": "Use for focused states."
+  },
+  "value": "2px",
+  "filePath": "schema/themes/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "suggest": ["2px"],
+      "introduced": "6.1.0",
+      "description": "Use for focused states."
+    },
+    "value": "BorderWidth2"
+  },
+  "name": "border.width.focused",
+  "path": ["border", "width", "focused"],
+  "cleanName": "border.width.focused"
 }];
 var _default = exports.default = tokens;

package/dist/cjs/constants.js

@@ -9,6 +9,6 @@ var COLOR_MODE_ATTRIBUTE = exports.COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 var CONTRAST_MODE_ATTRIBUTE = exports.CONTRAST_MODE_ATTRIBUTE = 'data-contrast-mode';
 var CUSTOM_THEME_ATTRIBUTE = exports.CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 var CSS_PREFIX = exports.CSS_PREFIX = 'ds';
-var CSS_VAR_FULL = exports.CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
+var CSS_VAR_FULL = exports.CSS_VAR_FULL = ['opacity', 'font', 'space', 'border', 'radius'];
 var TOKEN_NOT_FOUND_CSS_VAR = exports.TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");
 var CURRENT_SURFACE_CSS_VAR = exports.CURRENT_SURFACE_CSS_VAR = "--".concat(CSS_PREFIX, "-elevation-surface-current");

package/dist/cjs/entry-points/token-metadata.codegen.js

@@ -9,7 +9,7 @@ exports.tokens = void 0;
  *
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::c6f9eb087d49a14806a7713cb8306e06>>
+ * @codegen <<SignedSource::2f0d0ffb7abcc77f7b99efa4241047a4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -1968,56 +1968,6 @@ var tokens = exports.tokens = [{
   path: ['utility', 'elevation', 'surface', 'current'],
   description: "A dynamic token that represents the current surface color set by a parent element. It defaults to the 'elevation.surface' token value.",
   exampleValue: '#FFFFFF'
-}, {
-  name: 'border.radius.050',
-  path: ['border', 'radius', '050'],
-  description: 'Used for selection indicators, like tabs.',
-  exampleValue: '0.125rem'
-}, {
-  name: 'border.radius',
-  path: ['border', 'radius', '[default]'],
-  description: 'The default border radius.',
-  exampleValue: '0.25rem'
-}, {
-  name: 'border.radius.100',
-  path: ['border', 'radius', '100'],
-  description: 'Used for buttons and inputs.',
-  exampleValue: '0.25rem'
-}, {
-  name: 'border.radius.200',
-  path: ['border', 'radius', '200'],
-  description: 'Used for smaller cards.',
-  exampleValue: '0.5rem'
-}, {
-  name: 'border.radius.300',
-  path: ['border', 'radius', '300'],
-  description: 'Used for cards and larger containers.',
-  exampleValue: '0.75rem'
-}, {
-  name: 'border.radius.400',
-  path: ['border', 'radius', '400'],
-  description: 'Used for modals.',
-  exampleValue: '1rem'
-}, {
-  name: 'border.radius.circle',
-  path: ['border', 'radius', 'circle'],
-  description: 'Used for circular containers, like a rounded button.',
-  exampleValue: '2002rem'
-}, {
-  name: 'border.width',
-  path: ['border', 'width', '[default]'],
-  description: 'The default border width. Used for all borders.',
-  exampleValue: '0.0625rem'
-}, {
-  name: 'border.width.indicator',
-  path: ['border', 'width', 'indicator'],
-  description: 'Used for indicators like tab and menu selected states.',
-  exampleValue: '0.1875rem'
-}, {
-  name: 'border.width.outline',
-  path: ['border', 'width', 'outline'],
-  description: 'Used for focus, active or selected inputs.',
-  exampleValue: '0.125rem'
 }, {
   name: 'space.0',
   path: ['space', '0'],
@@ -2253,4 +2203,99 @@ var tokens = exports.tokens = [{
   path: ['font', 'family', 'brand', 'body'],
   description: 'For our brand body text. Uses Charlie Text.',
   exampleValue: '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  name: 'radius.xsmall',
+  path: ['radius', 'xsmall'],
+  description: 'Used for small containers such as badges.',
+  exampleValue: '0.125rem'
+}, {
+  name: 'radius.small',
+  path: ['radius', 'small'],
+  description: 'Used for labels.',
+  exampleValue: '0.25rem'
+}, {
+  name: 'radius.medium',
+  path: ['radius', 'medium'],
+  description: 'Used for buttons and inputs.',
+  exampleValue: '0.375rem'
+}, {
+  name: 'radius.large',
+  path: ['radius', 'large'],
+  description: 'Used for cards and small containers.',
+  exampleValue: '0.5rem'
+}, {
+  name: 'radius.xlarge',
+  path: ['radius', 'xlarge'],
+  description: 'Used for modals and large containers.',
+  exampleValue: '0.75rem'
+}, {
+  name: 'radius.full',
+  path: ['radius', 'full'],
+  description: 'Used for circular containers, like a rounded button.',
+  exampleValue: '624.9375rem'
+}, {
+  name: 'border.radius',
+  path: ['border', 'radius', '[default]'],
+  description: 'The default border radius.',
+  exampleValue: '0.25rem'
+}, {
+  name: 'border.radius.050',
+  path: ['border', 'radius', '050'],
+  description: 'Used for selection indicators, like tabs.',
+  exampleValue: '0.125rem'
+}, {
+  name: 'border.radius.100',
+  path: ['border', 'radius', '100'],
+  description: 'Used for buttons and inputs.',
+  exampleValue: '0.25rem'
+}, {
+  name: 'border.radius.200',
+  path: ['border', 'radius', '200'],
+  description: 'Used for smaller cards.',
+  exampleValue: '0.5rem'
+}, {
+  name: 'border.radius.300',
+  path: ['border', 'radius', '300'],
+  description: 'Used for cards and larger containers.',
+  exampleValue: '0.75rem'
+}, {
+  name: 'border.radius.400',
+  path: ['border', 'radius', '400'],
+  description: 'Used for modals.',
+  exampleValue: '1rem'
+}, {
+  name: 'border.radius.circle',
+  path: ['border', 'radius', 'circle'],
+  description: 'Used for circular containers, like a rounded button.',
+  exampleValue: '624.9375rem'
+}, {
+  name: 'border.width',
+  path: ['border', 'width', '[default]'],
+  description: 'The default border width. Used for all borders.',
+  exampleValue: '0.0625rem'
+}, {
+  name: 'border.width.0',
+  path: ['border', 'width', '0'],
+  description: 'Used for zero width borders.',
+  exampleValue: '0rem'
+}, {
+  name: 'border.width.indicator',
+  path: ['border', 'width', 'indicator'],
+  description: 'Used for indicators like tab and menu selected states.',
+  exampleValue: '0.1875rem'
+}, {
+  name: 'border.width.outline',
+  path: ['border', 'width', 'outline'],
+  description: 'Used for focus, active or selected inputs.',
+  exampleValue: '0.125rem'
+}, {
+  name: 'border.width.selected',
+  path: ['border', 'width', 'selected'],
+  description: 'Use for selected states.',
+  exampleValue: '0.125rem'
+}, {
+  name: 'border.width.focused',
+  path: ['border', 'width', 'focused'],
+  description: 'Use for focused states.',
+  exampleValue: '0.125rem'
 }];

package/dist/cjs/theme-config.js

@@ -45,7 +45,7 @@ var themeContrastModes = ['more', 'no-preference', 'auto'];
  *
  * These ids must be kebab case
  */
-var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'light-brand-refresh', 'dark', 'dark-future', 'dark-increased-contrast', 'dark-brand-refresh', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'typography', 'typography-adg3', 'typography-modernized', 'typography-refreshed'];
+var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'light-brand-refresh', 'dark', 'dark-future', 'dark-increased-contrast', 'dark-brand-refresh', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'shape-rounder', 'shape-roundest', 'typography', 'typography-adg3', 'typography-modernized', 'typography-refreshed'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
@@ -175,7 +175,23 @@ var themeConfig = {
   },
   'atlassian-shape': {
     id: 'shape',
-    displayName: 'Atlassian Shape',
+    displayName: 'Shape',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
+  },
+  'atlassian-shape-rounder': {
+    id: 'shape-rounder',
+    displayName: 'Shape (Rounder)',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
+  },
+  'atlassian-shape-roundest': {
+    id: 'shape-roundest',
+    displayName: 'Shape (Roundest)',
     palette: 'shapePalette',
     attributes: {
       type: 'shape'