@atlaskit/tokens 1.4.4 → 1.5.0

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

@@ -1,29 +1,29 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2bb692b141bab7de1129474ea0fe281e>>
+ * @codegen <<SignedSource::3e4dc097014124b77e69b832281f37ed>>
  * @codegenCommand yarn build tokens
  */
 export default `
 html[data-theme~="typography:typography"] {
   --ds-font-family-monospace: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
   --ds-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  --ds-font-size-050: 11px;
-  --ds-font-size-075: 12px;
-  --ds-font-size-100: 14px;
-  --ds-font-size-200: 16px;
-  --ds-font-size-300: 20px;
-  --ds-font-size-400: 24px;
-  --ds-font-size-500: 29px;
-  --ds-font-size-600: 35px;
+  --ds-font-size-050: 0.6875rem;
+  --ds-font-size-075: 0.75rem;
+  --ds-font-size-100: 0.875rem;
+  --ds-font-size-200: 1rem;
+  --ds-font-size-300: 1.25rem;
+  --ds-font-size-400: 1.5rem;
+  --ds-font-size-500: 1.8125rem;
+  --ds-font-size-600: 2.1875rem;
   --ds-font-weight-bold: 700;
   --ds-font-weight-medium: 500;
   --ds-font-weight-regular: 400;
   --ds-font-weight-semibold: 600;
-  --ds-font-lineHeight-100: 16px;
-  --ds-font-lineHeight-200: 20px;
-  --ds-font-lineHeight-300: 24px;
-  --ds-font-lineHeight-400: 28px;
-  --ds-font-lineHeight-500: 32px;
-  --ds-font-lineHeight-600: 40px;
+  --ds-font-lineHeight-100: 1rem;
+  --ds-font-lineHeight-200: 1.25rem;
+  --ds-font-lineHeight-300: 1.5rem;
+  --ds-font-lineHeight-400: 1.75rem;
+  --ds-font-lineHeight-500: 2rem;
+  --ds-font-lineHeight-600: 2.5rem;
 }
 `;

package/dist/es2019/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::9c962af7a2afdab3160e3f3a2b285a8a>>
+ * @codegen <<SignedSource::856ff062171d44deb03158a6fa7d7bd1>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -14,7 +14,7 @@ const defaultTokenValues = {
   'border.radius.300': '0.75rem',
   'border.radius.400': '1rem',
   'border.radius.round': '50%',
-  'border.width.0': '0',
+  'border.width.0': '0rem',
   'border.width.050': '0.0625rem',
   'border.width.100': '0.125rem',
   'color.text': '#172B4D',
@@ -303,7 +303,7 @@ const defaultTokenValues = {
   'opacity.disabled': '0.4',
   'opacity.loading': '0.2',
   'utility.UNSAFE.transparent': 'transparent',
-  'space.0': '0',
+  'space.0': '0rem',
   'space.025': '0.125rem',
   'space.050': '0.25rem',
   'space.075': '0.375rem',
@@ -319,23 +319,23 @@ const defaultTokenValues = {
   'space.1000': '5rem',
   'font.family.monospace': '"SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace',
   'font.family.sans': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-  'font.size.050': '11px',
-  'font.size.075': '12px',
-  'font.size.100': '14px',
-  'font.size.200': '16px',
-  'font.size.300': '20px',
-  'font.size.400': '24px',
-  'font.size.500': '29px',
-  'font.size.600': '35px',
+  'font.size.050': '0.6875rem',
+  'font.size.075': '0.75rem',
+  'font.size.100': '0.875rem',
+  'font.size.200': '1rem',
+  'font.size.300': '1.25rem',
+  'font.size.400': '1.5rem',
+  'font.size.500': '1.8125rem',
+  'font.size.600': '2.1875rem',
   'font.weight.bold': '700',
   'font.weight.medium': '500',
   'font.weight.regular': '400',
   'font.weight.semibold': '600',
-  'font.lineHeight.100': '16px',
-  'font.lineHeight.200': '20px',
-  'font.lineHeight.300': '24px',
-  'font.lineHeight.400': '28px',
-  'font.lineHeight.500': '32px',
-  'font.lineHeight.600': '40px'
+  'font.lineHeight.100': '1rem',
+  'font.lineHeight.200': '1.25rem',
+  'font.lineHeight.300': '1.5rem',
+  'font.lineHeight.400': '1.75rem',
+  'font.lineHeight.500': '2rem',
+  'font.lineHeight.600': '2.5rem'
 };
 export default defaultTokenValues;

package/dist/es2019/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::f4523de23a205d43950d1b24f656f952>>
+ * @codegen <<SignedSource::7cdaa82f55e6537ca0b68d196db9e1d6>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -10,7 +10,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.125rem",
+  "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -32,7 +32,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.25rem",
+  "value": "4px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -54,7 +54,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.5rem",
+  "value": "8px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -76,7 +76,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.75rem",
+  "value": "12px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -98,7 +98,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "1rem",
+  "value": "16px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -142,7 +142,7 @@ const tokens = [{
     "introduced": "1.2.1",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0",
+  "value": "0px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -164,7 +164,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.0625rem",
+  "value": "1px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
@@ -186,7 +186,7 @@ const tokens = [{
     "introduced": "1.1.0",
     "description": "Experimental, description needs to be amended"
   },
-  "value": "0.125rem",
+  "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cfa1d518948d5dc23821d17cab0cb52a>>
+ * @codegen <<SignedSource::c89f0dcd1df97245a694a1a77741bb39>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -8,10 +8,9 @@ const tokens = [{
     "group": "spacing",
     "state": "active",
     "introduced": "0.12.0",
-    "pixelValue": "0px",
     "description": "Equates to `0`. Can be used for resetting default spacing styles."
   },
-  "value": "0",
+  "value": "0px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -19,7 +18,6 @@ const tokens = [{
       "group": "spacing",
       "state": "active",
       "introduced": "0.12.0",
-      "pixelValue": "0px",
       "description": "Equates to `0`. Can be used for resetting default spacing styles."
     },
     "value": "Space0"
@@ -33,10 +31,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["1px", "3px"],
     "introduced": "0.12.0",
-    "pixelValue": "2px",
     "description": "Use for spacing in compact scenarios. The smallest value in our scale."
   },
-  "value": "0.125rem",
+  "value": "2px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -45,7 +42,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["1px", "3px"],
       "introduced": "0.12.0",
-      "pixelValue": "2px",
       "description": "Use for spacing in compact scenarios. The smallest value in our scale."
     },
     "value": "Space025"
@@ -59,10 +55,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["3px", "5px"],
     "introduced": "0.12.0",
-    "pixelValue": "4px",
     "description": "Use for spacing in compact scenarios."
   },
-  "value": "0.25rem",
+  "value": "4px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -71,7 +66,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["3px", "5px"],
       "introduced": "0.12.0",
-      "pixelValue": "4px",
       "description": "Use for spacing in compact scenarios."
     },
     "value": "Space050"
@@ -85,10 +79,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["5px", "7px"],
     "introduced": "0.12.0",
-    "pixelValue": "6px",
     "description": "Use for spacing in compact scenarios."
   },
-  "value": "0.375rem",
+  "value": "6px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -97,7 +90,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["5px", "7px"],
       "introduced": "0.12.0",
-      "pixelValue": "6px",
       "description": "Use for spacing in compact scenarios."
     },
     "value": "Space075"
@@ -111,10 +103,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["7px", "9px"],
     "introduced": "0.12.0",
-    "pixelValue": "8px",
     "description": "Use for gutter spacing."
   },
-  "value": "0.5rem",
+  "value": "8px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -123,7 +114,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["7px", "9px"],
       "introduced": "0.12.0",
-      "pixelValue": "8px",
       "description": "Use for gutter spacing."
     },
     "value": "Space100"
@@ -137,10 +127,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["10px", "11px", "13px", "14px"],
     "introduced": "0.12.0",
-    "pixelValue": "12px",
     "description": "Helpful guidance goes here"
   },
-  "value": "0.75rem",
+  "value": "12px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -149,7 +138,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["10px", "11px", "13px", "14px"],
       "introduced": "0.12.0",
-      "pixelValue": "12px",
       "description": "Helpful guidance goes here"
     },
     "value": "Space150"
@@ -163,10 +151,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["14px", "15px", "17px", "18px"],
     "introduced": "0.12.0",
-    "pixelValue": "16px",
     "description": "Use for gutter spacing."
   },
-  "value": "1rem",
+  "value": "16px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -175,7 +162,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["14px", "15px", "17px", "18px"],
       "introduced": "0.12.0",
-      "pixelValue": "16px",
       "description": "Use for gutter spacing."
     },
     "value": "Space200"
@@ -189,10 +175,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["19px", "21px", "22px", "23px"],
     "introduced": "0.12.0",
-    "pixelValue": "20px",
     "description": "Use for gutter spacing."
   },
-  "value": "1.25rem",
+  "value": "20px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -201,7 +186,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["19px", "21px", "22px", "23px"],
       "introduced": "0.12.0",
-      "pixelValue": "20px",
       "description": "Use for gutter spacing."
     },
     "value": "Space250"
@@ -215,10 +199,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["23px", "25px", "26px", "27px", "28px"],
     "introduced": "0.12.0",
-    "pixelValue": "24px",
     "description": "Use for gutter spacing."
   },
-  "value": "1.5rem",
+  "value": "24px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -227,7 +210,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["23px", "25px", "26px", "27px", "28px"],
       "introduced": "0.12.0",
-      "pixelValue": "24px",
       "description": "Use for gutter spacing."
     },
     "value": "Space300"
@@ -241,10 +223,9 @@ const tokens = [{
     "state": "active",
     "suggest": ["28px", "29px", "30px", "31px", "33px", "34px", "35px"],
     "introduced": "0.12.0",
-    "pixelValue": "32px",
     "description": "Use for gutter spacing."
   },
-  "value": "2rem",
+  "value": "32px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -253,7 +234,6 @@ const tokens = [{
       "state": "active",
       "suggest": ["28px", "29px", "30px", "31px", "33px", "34px", "35px"],
       "introduced": "0.12.0",
-      "pixelValue": "32px",
       "description": "Use for gutter spacing."
     },
     "value": "Space400"
@@ -266,10 +246,9 @@ const tokens = [{
     "group": "spacing",
     "state": "active",
     "introduced": "0.12.0",
-    "pixelValue": "40px",
     "description": "Use for larger layout-specific spacing."
   },
-  "value": "2.5rem",
+  "value": "40px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -277,7 +256,6 @@ const tokens = [{
       "group": "spacing",
       "state": "active",
       "introduced": "0.12.0",
-      "pixelValue": "40px",
       "description": "Use for larger layout-specific spacing."
     },
     "value": "Space500"
@@ -290,10 +268,9 @@ const tokens = [{
     "group": "spacing",
     "state": "active",
     "introduced": "0.12.0",
-    "pixelValue": "48px",
     "description": "Use for larger layout-specific spacing."
   },
-  "value": "3rem",
+  "value": "48px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -301,7 +278,6 @@ const tokens = [{
       "group": "spacing",
       "state": "active",
       "introduced": "0.12.0",
-      "pixelValue": "48px",
       "description": "Use for larger layout-specific spacing."
     },
     "value": "Space600"
@@ -314,10 +290,9 @@ const tokens = [{
     "group": "spacing",
     "state": "active",
     "introduced": "0.12.0",
-    "pixelValue": "64px",
     "description": "Use for larger layout-specific spacing."
   },
-  "value": "4rem",
+  "value": "64px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -325,7 +300,6 @@ const tokens = [{
       "group": "spacing",
       "state": "active",
       "introduced": "0.12.0",
-      "pixelValue": "64px",
       "description": "Use for larger layout-specific spacing."
     },
     "value": "Space800"
@@ -338,10 +312,9 @@ const tokens = [{
     "group": "spacing",
     "state": "active",
     "introduced": "0.12.0",
-    "pixelValue": "80px",
     "description": "Use for larger layout-specific spacing."
   },
-  "value": "5rem",
+  "value": "80px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
@@ -349,7 +322,6 @@ const tokens = [{
       "group": "spacing",
       "state": "active",
       "introduced": "0.12.0",
-      "pixelValue": "80px",
       "description": "Use for larger layout-specific spacing."
     },
     "value": "Space1000"

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.4.4";
+const version = "1.5.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.4.4";
+const version = "1.5.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

@@ -4,19 +4,19 @@
 
 const baseSizeTokens = {
   Size0: {
-    value: '0',
+    value: 0,
     attributes: {
       group: 'shape'
     }
   },
   Size050: {
-    value: '0.0625rem',
+    value: 1,
     attributes: {
       group: 'shape'
     }
   },
   Size100: {
-    value: '0.125rem',
+    value: 2,
     attributes: {
       group: 'shape'
     }
@@ -24,31 +24,31 @@ const baseSizeTokens = {
 };
 const baseRadiusTokens = {
   Radius050: {
-    value: '0.125rem',
+    value: 2,
     attributes: {
       group: 'shape'
     }
   },
   Radius100: {
-    value: '0.25rem',
+    value: 4,
     attributes: {
       group: 'shape'
     }
   },
   Radius200: {
-    value: '0.5rem',
+    value: 8,
     attributes: {
       group: 'shape'
     }
   },
   Radius300: {
-    value: '0.75rem',
+    value: 12,
     attributes: {
       group: 'shape'
     }
   },
   Radius400: {
-    value: '1rem',
+    value: 16,
     attributes: {
       group: 'shape'
     }

package/dist/es2019/palettes/spacing-scale.js

@@ -4,90 +4,88 @@
 
 const baseSpacingTokens = {
   Space0: {
-    value: '0',
+    value: 0,
     attributes: {
       group: 'spacing'
     }
   },
   Space025: {
-    value: '0.125rem',
+    value: 2,
     attributes: {
       group: 'spacing'
     }
   },
   Space050: {
-    value: '0.25rem',
+    value: 4,
     attributes: {
       group: 'spacing'
     }
   },
   Space075: {
-    value: '0.375rem',
+    value: 6,
     attributes: {
       group: 'spacing'
     }
   },
   Space100: {
-    value: '0.5rem',
+    value: 8,
     attributes: {
       group: 'spacing'
     }
   },
   Space150: {
-    value: '0.75rem',
+    value: 12,
     attributes: {
       group: 'spacing'
     }
   },
   Space200: {
-    value: '1rem',
+    value: 16,
     attributes: {
       group: 'spacing'
     }
   },
   Space250: {
-    value: '1.25rem',
+    value: 20,
     attributes: {
       group: 'spacing'
     }
   },
   Space300: {
-    value: '1.5rem',
+    value: 24,
     attributes: {
       group: 'spacing'
     }
   },
   Space400: {
-    value: '2rem',
+    value: 32,
     attributes: {
       group: 'spacing'
     }
   },
   Space500: {
-    value: '2.5rem',
+    value: 40,
     attributes: {
       group: 'spacing'
     }
   },
   Space600: {
-    value: '3rem',
+    value: 48,
     attributes: {
       group: 'spacing'
     }
   },
   Space800: {
-    value: '4rem',
+    value: 64,
     attributes: {
       group: 'spacing'
-    },
-    pixelValue: '64px'
+    }
   },
   Space1000: {
-    value: '5rem',
+    value: 80,
     attributes: {
       group: 'spacing'
-    },
-    pixelValue: '80px'
+    }
   }
 };
 const spacingPalette = {