@atlaskit/tokens 1.5.2 → 1.7.0

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

@@ -1,14 +1,14 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7cdaa82f55e6537ca0b68d196db9e1d6>>
+ * @codegen <<SignedSource::8b50feb722f3a686c5a45c85ec5545b2>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
   "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."
   },
   "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -16,9 +16,9 @@ const tokens = [{
   "original": {
     "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."
     },
     "value": "Radius050"
   },
@@ -28,9 +28,31 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
+    "introduced": "1.5.2",
+    "description": "The default border radius."
+  },
+  "value": "4px",
+  "filePath": "src/tokens/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "introduced": "1.5.2",
+      "description": "The default border radius."
+    },
+    "value": "Radius100"
+  },
+  "name": "border.radius.[default]",
+  "path": ["border", "radius", "[default]"],
+  "cleanName": "border.radius"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for buttons and inputs."
   },
   "value": "4px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -38,9 +60,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for buttons and inputs."
     },
     "value": "Radius100"
   },
@@ -50,9 +72,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for smaller cards."
   },
   "value": "8px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -60,9 +82,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for smaller cards."
     },
     "value": "Radius200"
   },
@@ -72,9 +94,9 @@ const tokens = [{
 }, {
   "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."
   },
   "value": "12px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -82,9 +104,9 @@ const tokens = [{
   "original": {
     "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."
     },
     "value": "Radius300"
   },
@@ -94,9 +116,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for modals."
   },
   "value": "16px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -104,9 +126,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for modals."
     },
     "value": "Radius400"
   },
@@ -116,25 +138,47 @@ const tokens = [{
 }, {
   "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."
   },
-  "value": "50%",
+  "value": "32032px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
     "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."
     },
     "value": "RadiusCircle"
   },
-  "name": "border.radius.round",
-  "path": ["border", "radius", "round"],
-  "cleanName": "border.radius.round"
+  "name": "border.radius.circle",
+  "path": ["border", "radius", "circle"],
+  "cleanName": "border.radius.circle"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "introduced": "1.5.2",
+    "description": "The default border width."
+  },
+  "value": "1px",
+  "filePath": "src/tokens/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "introduced": "1.5.2",
+      "description": "The default border width."
+    },
+    "value": "Size050"
+  },
+  "name": "border.width.[default]",
+  "path": ["border", "width", "[default]"],
+  "cleanName": "border.width"
 }, {
   "attributes": {
     "group": "shape",
@@ -160,9 +204,9 @@ const tokens = [{
 }, {
   "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."
   },
   "value": "1px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -170,9 +214,9 @@ const tokens = [{
   "original": {
     "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."
     },
     "value": "Size050"
   },
@@ -182,9 +226,9 @@ const tokens = [{
 }, {
   "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."
   },
   "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -192,9 +236,9 @@ const tokens = [{
   "original": {
     "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."
     },
     "value": "Size100"
   },

package/dist/es2019/constants.js

@@ -2,5 +2,5 @@ export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds';
-export const CSS_VAR_FULL = ['opacity', 'font', 'space'];
+export const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.5.2";
+const version = "1.7.0";
 /**
  * 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/es2019/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';
 const name = "@atlaskit/tokens";
-const version = "1.5.2";
+const version = "1.7.0";
 /**
  * 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/es2019/palettes/shape-palette.js

@@ -54,7 +54,8 @@ const baseRadiusTokens = {
     }
   },
   RadiusCircle: {
-    value: '50%',
+    // The year atlassian was founded in rem
+    value: 32032,
     attributes: {
       group: 'shape'
     }

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

@@ -16,6 +16,7 @@ const themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
+  shape: undefined,
   spacing: undefined,
   typography: undefined
 };
@@ -34,11 +35,12 @@ const getThemePreferences = themeState => {
     colorMode,
     dark,
     light,
+    shape,
     spacing,
     typography
   } = themeState;
   const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [spacing, typography].forEach(themeId => {
+  [shape, spacing, typography].forEach(themeId => {
     if (themeId) {
       themePreferences.push(themeId);
     }
@@ -46,6 +48,16 @@ const getThemePreferences = themeState => {
   if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
     themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
   }
+
+  // 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');
+    }
+  }
   return [...new Set(themePreferences)];
 };
 
@@ -56,6 +68,7 @@ const getThemePreferences = themeState => {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -70,6 +83,7 @@ const setGlobalTheme = async ({
   colorMode = themeStateDefaults['colorMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography']
 } = {}) => {
@@ -77,6 +91,7 @@ const setGlobalTheme = async ({
     colorMode,
     dark,
     light,
+    shape,
     spacing,
     typography
   });
@@ -105,6 +120,7 @@ const setGlobalTheme = async ({
     colorMode,
     dark,
     light,
+    shape,
     spacing,
     typography
   });
@@ -121,6 +137,7 @@ const setGlobalTheme = async ({
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -131,6 +148,7 @@ export const getThemeStyles = async ({
   colorMode = themeStateDefaults['colorMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography']
 } = {}) => {
@@ -138,6 +156,7 @@ export const getThemeStyles = async ({
     colorMode,
     dark,
     light,
+    shape,
     spacing,
     typography
   });
@@ -185,15 +204,28 @@ export const getThemeHtmlAttrs = ({
   colorMode = themeStateDefaults['colorMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography']
 } = {}) => {
-  const themePreferences = {
+  let themePreferences = {
     dark,
     light,
+    shape,
     spacing,
     typography
   };
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark,
+      light,
+      shape: 'shape',
+      spacing: 'spacing',
+      typography
+    };
+  }
   const themeAttribute = themeObjectToString(themePreferences);
   return {
     [THEME_DATA_ATTRIBUTE]: themeAttribute,

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

@@ -5,6 +5,9 @@
 const shape = {
   border: {
     width: {
+      '[default]': {
+        value: 'Size050'
+      },
       '0': {
         value: 'Size0'
       },
@@ -16,6 +19,9 @@ const shape = {
       }
     },
     radius: {
+      '[default]': {
+        value: 'Radius100'
+      },
       '050': {
         value: 'Radius050'
       },
@@ -31,7 +37,7 @@ const shape = {
       '400': {
         value: 'Radius400'
       },
-      round: {
+      circle: {
         value: 'RadiusCircle'
       }
     }

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.2",
+	"version": "1.7.0",
 	"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::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-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',