@atlaskit/tokens 1.10.2 → 1.11.1

package/dist/es2019/set-global-theme.js

@@ -52,9 +52,6 @@ const getThemePreferences = themeState => {
 
   // Load shape and spacing by default, currently behind a feature flag
   if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('shape')) {
-      themePreferences.push('shape');
-    }
     if (!themePreferences.includes('spacing')) {
       themePreferences.push('spacing');
     }
@@ -199,12 +196,12 @@ export const getThemeHtmlAttrs = ({
     typography
   };
 
-  // Load shape and spacing by default, currently behind a feature flag
+  // Load spacing by default, currently behind a feature flag
   if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
     themePreferences = {
       dark,
       light,
-      shape: 'shape',
+      shape,
       spacing: 'spacing',
       typography
     };

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

@@ -11,11 +11,11 @@ const shape = {
       '0': {
         value: 'Size0'
       },
-      '050': {
-        value: 'Size050'
-      },
-      '100': {
+      outline: {
         value: 'Size100'
+      },
+      indicator: {
+        value: 'Size200'
       }
     },
     radius: {

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

@@ -5,8 +5,9 @@ const shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['1px', '2px'],
           introduced: '1.5.2',
-          description: 'The default border width.'
+          description: 'The default border width. Used for all borders.'
         }
       },
       '0': {
@@ -14,23 +15,23 @@ const shape = {
           group: 'shape',
           state: 'experimental',
           introduced: '1.2.1',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for zero width borders.'
         }
       },
-      '050': {
+      outline: {
         attributes: {
           group: 'shape',
           state: 'active',
-          introduced: '1.1.0',
-          description: 'Used for all borders and dividers.'
+          introduced: '1.5.2',
+          description: 'Used for focus, active or selected inputs.'
         }
       },
-      '100': {
+      indicator: {
         attributes: {
           group: 'shape',
           state: 'active',
-          introduced: '1.1.0',
-          description: 'Used for bolder dividers and interaction states.'
+          introduced: '1.5.2',
+          description: 'Used for indicators like tab and menu selected states.'
         }
       }
     },
@@ -39,6 +40,7 @@ const shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['3px', '4px'],
           introduced: '1.5.2',
           description: 'The default border radius.'
         }
@@ -87,6 +89,7 @@ const shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['50%'],
           introduced: '1.1.0',
           description: 'Used for circular containers, like a rounded button.'
         }

package/dist/es2019/version.json

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

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::ba57ec0a6991ab386479b6c9006397ba>>
+ * @codegen <<SignedSource::b929a0286651ecabd7f635e23b71f002>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -138,5 +138,20 @@ var tokens = [{
   },
   "name": "border.width.Size100",
   "path": ["border", "width", "Size100"]
+}, {
+  "value": "3px",
+  "attributes": {
+    "group": "shape"
+  },
+  "filePath": "src/palettes/shape-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 3,
+    "attributes": {
+      "group": "shape"
+    }
+  },
+  "name": "border.width.Size200",
+  "path": ["border", "width", "Size200"]
 }];
 export default tokens;

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::861a4448ac467155c8290f2b211e99c5>>
+ * @codegen <<SignedSource::57c7e229053412965e492af01b042778>>
  * @codegenCommand yarn build tokens
  */
-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";
+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-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n}\n";

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

@@ -4,7 +4,7 @@
  * 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::5d1a0a49014fb279849c19fdd2909317>>
+ * @codegen <<SignedSource::a2442c19bc018ff0c9f4f96c2bfa54ab>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -317,8 +317,8 @@ var defaultTokenValues = {
   'border.radius.circle': '2002rem',
   'border.width': '0.0625rem',
   'border.width.0': '0rem',
-  'border.width.050': '0.0625rem',
-  'border.width.100': '0.125rem',
+  'border.width.indicator': '0.1875rem',
+  'border.width.outline': '0.125rem',
   'space.0': '0rem',
   'space.025': '0.125rem',
   'space.050': '0.25rem',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::87bc2dd9f7bab2c43fbdcafbd9e9e3ac>>
+ * @codegen <<SignedSource::0c77b46d428791fb0288b991d64320bc>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -313,8 +313,8 @@ var tokens = {
   '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',
+  'border.width.indicator': '--ds-border-width-indicator',
+  'border.width.outline': '--ds-border-width-outline',
   'space.0': '--ds-space-0',
   'space.025': '--ds-space-025',
   'space.050': '--ds-space-050',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8b50feb722f3a686c5a45c85ec5545b2>>
+ * @codegen <<SignedSource::475f699859423669fdb3de04f32b3560>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -29,6 +29,7 @@ var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
+    "suggest": ["3px", "4px"],
     "introduced": "1.5.2",
     "description": "The default border radius."
   },
@@ -39,6 +40,7 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
+      "suggest": ["3px", "4px"],
       "introduced": "1.5.2",
       "description": "The default border radius."
     },
@@ -139,6 +141,7 @@ var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
+    "suggest": ["50%"],
     "introduced": "1.1.0",
     "description": "Used for circular containers, like a rounded button."
   },
@@ -149,6 +152,7 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
+      "suggest": ["50%"],
       "introduced": "1.1.0",
       "description": "Used for circular containers, like a rounded button."
     },
@@ -161,8 +165,9 @@ var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
+    "suggest": ["1px", "2px"],
     "introduced": "1.5.2",
-    "description": "The default border width."
+    "description": "The default border width. Used for all borders."
   },
   "value": "1px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -171,8 +176,9 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
+      "suggest": ["1px", "2px"],
       "introduced": "1.5.2",
-      "description": "The default border width."
+      "description": "The default border width. Used for all borders."
     },
     "value": "Size050"
   },
@@ -184,7 +190,7 @@ var tokens = [{
     "group": "shape",
     "state": "experimental",
     "introduced": "1.2.1",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for zero width borders."
   },
   "value": "0px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -194,7 +200,7 @@ var tokens = [{
       "group": "shape",
       "state": "experimental",
       "introduced": "1.2.1",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for zero width borders."
     },
     "value": "Size0"
   },
@@ -205,30 +211,30 @@ var tokens = [{
   "attributes": {
     "group": "shape",
     "state": "active",
-    "introduced": "1.1.0",
-    "description": "Used for all borders and dividers."
+    "introduced": "1.5.2",
+    "description": "Used for indicators like tab and menu selected states."
   },
-  "value": "1px",
+  "value": "3px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
     "attributes": {
       "group": "shape",
       "state": "active",
-      "introduced": "1.1.0",
-      "description": "Used for all borders and dividers."
+      "introduced": "1.5.2",
+      "description": "Used for indicators like tab and menu selected states."
     },
-    "value": "Size050"
+    "value": "Size200"
   },
-  "name": "border.width.050",
-  "path": ["border", "width", "050"],
-  "cleanName": "border.width.050"
+  "name": "border.width.indicator",
+  "path": ["border", "width", "indicator"],
+  "cleanName": "border.width.indicator"
 }, {
   "attributes": {
     "group": "shape",
     "state": "active",
-    "introduced": "1.1.0",
-    "description": "Used for bolder dividers and interaction states."
+    "introduced": "1.5.2",
+    "description": "Used for focus, active or selected inputs."
   },
   "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -237,13 +243,13 @@ var tokens = [{
     "attributes": {
       "group": "shape",
       "state": "active",
-      "introduced": "1.1.0",
-      "description": "Used for bolder dividers and interaction states."
+      "introduced": "1.5.2",
+      "description": "Used for focus, active or selected inputs."
     },
     "value": "Size100"
   },
-  "name": "border.width.100",
-  "path": ["border", "width", "100"],
-  "cleanName": "border.width.100"
+  "name": "border.width.outline",
+  "path": ["border", "width", "outline"],
+  "cleanName": "border.width.outline"
 }];
 export default tokens;

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.10.2";
+var version = "1.11.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.10.2";
+var version = "1.11.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

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

@@ -20,6 +20,12 @@ var baseSizeTokens = {
     attributes: {
       group: 'shape'
     }
+  },
+  Size200: {
+    value: 3,
+    attributes: {
+      group: 'shape'
+    }
   }
 };
 var baseRadiusTokens = {

package/dist/esm/set-global-theme.js

@@ -55,9 +55,6 @@ var getThemePreferences = function getThemePreferences(themeState) {
 
   // Load shape and spacing by default, currently behind a feature flag
   if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('shape')) {
-      themePreferences.push('shape');
-    }
     if (!themePreferences.includes('spacing')) {
       themePreferences.push('spacing');
     }
@@ -293,12 +290,12 @@ export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     typography: typography
   };
 
-  // Load shape and spacing by default, currently behind a feature flag
+  // Load spacing by default, currently behind a feature flag
   if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
     themePreferences = {
       dark: dark,
       light: light,
-      shape: 'shape',
+      shape: shape,
       spacing: 'spacing',
       typography: typography
     };

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

@@ -11,11 +11,11 @@ var shape = {
       '0': {
         value: 'Size0'
       },
-      '050': {
-        value: 'Size050'
-      },
-      '100': {
+      outline: {
         value: 'Size100'
+      },
+      indicator: {
+        value: 'Size200'
       }
     },
     radius: {

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

@@ -5,8 +5,9 @@ var shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['1px', '2px'],
           introduced: '1.5.2',
-          description: 'The default border width.'
+          description: 'The default border width. Used for all borders.'
         }
       },
       '0': {
@@ -14,23 +15,23 @@ var shape = {
           group: 'shape',
           state: 'experimental',
           introduced: '1.2.1',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for zero width borders.'
         }
       },
-      '050': {
+      outline: {
         attributes: {
           group: 'shape',
           state: 'active',
-          introduced: '1.1.0',
-          description: 'Used for all borders and dividers.'
+          introduced: '1.5.2',
+          description: 'Used for focus, active or selected inputs.'
         }
       },
-      '100': {
+      indicator: {
         attributes: {
           group: 'shape',
           state: 'active',
-          introduced: '1.1.0',
-          description: 'Used for bolder dividers and interaction states.'
+          introduced: '1.5.2',
+          description: 'Used for indicators like tab and menu selected states.'
         }
       }
     },
@@ -39,6 +40,7 @@ var shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['3px', '4px'],
           introduced: '1.5.2',
           description: 'The default border radius.'
         }
@@ -87,6 +89,7 @@ var shape = {
         attributes: {
           group: 'shape',
           state: 'active',
+          suggest: ['50%'],
           introduced: '1.1.0',
           description: 'Used for circular containers, like a rounded button.'
         }

package/dist/esm/version.json

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

package/dist/types/artifacts/palettes-raw/shape-palette.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ba57ec0a6991ab386479b6c9006397ba>>
+ * @codegen <<SignedSource::b929a0286651ecabd7f635e23b71f002>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {

package/dist/types/artifacts/themes/atlassian-shape.d.ts

@@ -1,7 +1,7 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::861a4448ac467155c8290f2b211e99c5>>
+ * @codegen <<SignedSource::57c7e229053412965e492af01b042778>>
  * @codegenCommand yarn build tokens
  */
-declare const _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";
+declare const _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-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n}\n";
 export default _default;

package/dist/types/artifacts/token-default-values.d.ts

@@ -4,7 +4,7 @@
  * 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::5d1a0a49014fb279849c19fdd2909317>>
+ * @codegen <<SignedSource::a2442c19bc018ff0c9f4f96c2bfa54ab>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
@@ -317,8 +317,8 @@ declare const defaultTokenValues: {
     readonly 'border.radius.circle': "2002rem";
     readonly 'border.width': "0.0625rem";
     readonly 'border.width.0': "0rem";
-    readonly 'border.width.050': "0.0625rem";
-    readonly 'border.width.100': "0.125rem";
+    readonly 'border.width.indicator': "0.1875rem";
+    readonly 'border.width.outline': "0.125rem";
     readonly 'space.0': "0rem";
     readonly 'space.025': "0.125rem";
     readonly 'space.050': "0.25rem";

package/dist/types/artifacts/token-names.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::87bc2dd9f7bab2c43fbdcafbd9e9e3ac>>
+ * @codegen <<SignedSource::0c77b46d428791fb0288b991d64320bc>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {
@@ -313,8 +313,8 @@ declare const tokens: {
     readonly 'border.radius.circle': "--ds-border-radius-circle";
     readonly 'border.width': "--ds-border-width";
     readonly 'border.width.0': "--ds-border-width-0";
-    readonly 'border.width.050': "--ds-border-width-050";
-    readonly 'border.width.100': "--ds-border-width-100";
+    readonly 'border.width.indicator': "--ds-border-width-indicator";
+    readonly 'border.width.outline': "--ds-border-width-outline";
     readonly 'space.0': "--ds-space-0";
     readonly 'space.025': "--ds-space-025";
     readonly 'space.050': "--ds-space-050";
@@ -660,8 +660,8 @@ export type CSSTokenMap = {
     'border.radius.circle': 'var(--ds-border-radius-circle)';
     'border.width': 'var(--ds-border-width)';
     'border.width.0': 'var(--ds-border-width-0)';
-    'border.width.050': 'var(--ds-border-width-050)';
-    'border.width.100': 'var(--ds-border-width-100)';
+    'border.width.indicator': 'var(--ds-border-width-indicator)';
+    'border.width.outline': 'var(--ds-border-width-outline)';
     'space.0': 'var(--ds-space-0)';
     'space.025': 'var(--ds-space-025)';
     'space.050': 'var(--ds-space-050)';

package/dist/types/artifacts/tokens-raw/atlassian-shape.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8b50feb722f3a686c5a45c85ec5545b2>>
+ * @codegen <<SignedSource::475f699859423669fdb3de04f32b3560>>
  * @codegenCommand yarn build tokens
  */
-declare const tokens: {
+declare const tokens: ({
     attributes: {
         group: string;
         state: string;
         introduced: string;
         description: string;
+        suggest?: undefined;
     };
     value: string;
     filePath: string;
@@ -19,11 +20,36 @@ declare const tokens: {
             state: string;
             introduced: string;
             description: string;
+            suggest?: undefined;
         };
         value: string;
     };
     name: string;
     path: string[];
     cleanName: string;
-}[];
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        suggest: string[];
+        introduced: string;
+        description: string;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            suggest: string[];
+            introduced: string;
+            description: string;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+})[];
 export default tokens;