@atlaskit/tokens 0.10.32 → 0.10.34

package/dist/cjs/artifacts/typescript/atlassian-spacing-token-default-values.js

@@ -11,86 +11,86 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::05c2fcc3d0dba0931605dc98f7540009>>
+ * @codegen <<SignedSource::070fc18ba91d3a0673dcabb4f936f8d9>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
-  'spacing.scale.0': '0px',
-  'spacing.scale.100': '8px',
-  'spacing.scale.150': '12px',
-  'spacing.scale.200': '16px',
-  'spacing.scale.250': '20px',
-  'spacing.scale.300': '24px',
-  'spacing.scale.400': '32px',
-  'spacing.scale.500': '40px',
-  'spacing.scale.600': '48px',
-  'spacing.scale.025': '2px',
-  'spacing.scale.050': '4px',
-  'spacing.scale.075': '6px',
-  'spacing.scaleLinear.0': '0px',
-  'spacing.scaleLinear.100': '2px',
-  'spacing.scaleLinear.200': '4px',
-  'spacing.scaleLinear.300': '6px',
-  'spacing.scaleLinear.400': '8px',
-  'spacing.scaleLinear.500': '12px',
-  'spacing.scaleLinear.600': '16px',
-  'spacing.scaleLinear.700': '20px',
-  'spacing.scaleLinear.800': '24px',
-  'spacing.scaleLinear.900': '32px',
-  'spacing.scaleLinear.1000': '40px',
-  'spacing.scaleLinear.1100': '48px',
-  'spacing.pixel.0': '0px',
-  'spacing.pixel.2': '2px',
-  'spacing.pixel.4': '4px',
-  'spacing.pixel.6': '6px',
-  'spacing.pixel.8': '8px',
-  'spacing.pixel.12': '12px',
-  'spacing.pixel.16': '16px',
-  'spacing.pixel.20': '20px',
-  'spacing.pixel.24': '24px',
-  'spacing.pixel.32': '32px',
-  'spacing.pixel.40': '40px',
-  'spacing.pixel.48': '48px',
-  'spacing.size.none': '0px',
-  'spacing.size.xxxxSmall': '2px',
-  'spacing.size.xxxSmall': '4px',
-  'spacing.size.xxSmall': '6px',
-  'spacing.size.xsmall': '8px',
-  'spacing.size.small': '12px',
-  'spacing.size.medium': '16px',
-  'spacing.size.large': '20px',
-  'spacing.size.xlarge': '24px',
-  'spacing.size.xxlarge': '32px',
-  'spacing.size.xxxlarge': '40px',
-  'spacing.size.xxxxlarge': '48px',
-  'spacing.ecl.element.2': '2px',
-  'spacing.ecl.element.4': '4px',
-  'spacing.ecl.element.6': '6px',
-  'spacing.ecl.element.8': '8px',
-  'spacing.ecl.container.12': '12px',
-  'spacing.ecl.container.16': '16px',
-  'spacing.ecl.container.20': '20px',
-  'spacing.ecl.container.24': '24px',
-  'spacing.ecl.layout.32': '32px',
-  'spacing.ecl.layout.40': '40px',
-  'spacing.ecl.layout.64': '48px',
-  'spacing.ccc.component.2': '2px',
-  'spacing.ccc.component.4': '4px',
-  'spacing.ccc.component.6': '6px',
-  'spacing.ccc.component.8': '8px',
-  'spacing.ccc.content.12': '12px',
-  'spacing.ccc.content.16': '16px',
-  'spacing.ccc.content.20': '20px',
-  'spacing.ccc.content.24': '24px',
-  'spacing.ccc.container.32': '32px',
-  'spacing.ccc.container.40': '40px',
-  'spacing.ccc.container.48': '48px',
-  'spacing.gap.100': '8px',
-  'spacing.gap.200': '16px',
-  'spacing.gap.300': '24px',
-  'spacing.inset.100': '8px',
-  'spacing.inset.200': '16px',
-  'spacing.inset.300': '24px'
+  'spacing.scale.0': '0',
+  'spacing.scale.100': '0.5rem',
+  'spacing.scale.150': '0.75rem',
+  'spacing.scale.200': '1rem',
+  'spacing.scale.250': '1.25rem',
+  'spacing.scale.300': '1.5rem',
+  'spacing.scale.400': '2rem',
+  'spacing.scale.500': '2.5rem',
+  'spacing.scale.600': '3rem',
+  'spacing.scale.025': '0.125rem',
+  'spacing.scale.050': '0.25rem',
+  'spacing.scale.075': '0.375rem',
+  'spacing.scaleLinear.0': '0',
+  'spacing.scaleLinear.100': '0.125rem',
+  'spacing.scaleLinear.200': '0.25rem',
+  'spacing.scaleLinear.300': '0.375rem',
+  'spacing.scaleLinear.400': '0.5rem',
+  'spacing.scaleLinear.500': '0.75rem',
+  'spacing.scaleLinear.600': '1rem',
+  'spacing.scaleLinear.700': '1.25rem',
+  'spacing.scaleLinear.800': '1.5rem',
+  'spacing.scaleLinear.900': '2rem',
+  'spacing.scaleLinear.1000': '2.5rem',
+  'spacing.scaleLinear.1100': '3rem',
+  'spacing.pixel.0': '0',
+  'spacing.pixel.2': '0.125rem',
+  'spacing.pixel.4': '0.25rem',
+  'spacing.pixel.6': '0.375rem',
+  'spacing.pixel.8': '0.5rem',
+  'spacing.pixel.12': '0.75rem',
+  'spacing.pixel.16': '1rem',
+  'spacing.pixel.20': '1.25rem',
+  'spacing.pixel.24': '1.5rem',
+  'spacing.pixel.32': '2rem',
+  'spacing.pixel.40': '2.5rem',
+  'spacing.pixel.48': '3rem',
+  'spacing.size.none': '0',
+  'spacing.size.xxxxSmall': '0.125rem',
+  'spacing.size.xxxSmall': '0.25rem',
+  'spacing.size.xxSmall': '0.375rem',
+  'spacing.size.xsmall': '0.5rem',
+  'spacing.size.small': '0.75rem',
+  'spacing.size.medium': '1rem',
+  'spacing.size.large': '1.25rem',
+  'spacing.size.xlarge': '1.5rem',
+  'spacing.size.xxlarge': '2rem',
+  'spacing.size.xxxlarge': '2.5rem',
+  'spacing.size.xxxxlarge': '3rem',
+  'spacing.ecl.element.2': '0.125rem',
+  'spacing.ecl.element.4': '0.25rem',
+  'spacing.ecl.element.6': '0.375rem',
+  'spacing.ecl.element.8': '0.5rem',
+  'spacing.ecl.container.12': '0.75rem',
+  'spacing.ecl.container.16': '1rem',
+  'spacing.ecl.container.20': '1.25rem',
+  'spacing.ecl.container.24': '1.5rem',
+  'spacing.ecl.layout.32': '2rem',
+  'spacing.ecl.layout.40': '2.5rem',
+  'spacing.ecl.layout.64': '3rem',
+  'spacing.ccc.component.2': '0.125rem',
+  'spacing.ccc.component.4': '0.25rem',
+  'spacing.ccc.component.6': '0.375rem',
+  'spacing.ccc.component.8': '0.5rem',
+  'spacing.ccc.content.12': '0.75rem',
+  'spacing.ccc.content.16': '1rem',
+  'spacing.ccc.content.20': '1.25rem',
+  'spacing.ccc.content.24': '1.5rem',
+  'spacing.ccc.container.32': '2rem',
+  'spacing.ccc.container.40': '2.5rem',
+  'spacing.ccc.container.48': '3rem',
+  'spacing.gap.100': '0.5rem',
+  'spacing.gap.200': '1rem',
+  'spacing.gap.300': '1.5rem',
+  'spacing.inset.100': '0.5rem',
+  'spacing.inset.200': '1rem',
+  'spacing.inset.300': '1.5rem'
 };
 var _default = defaultTokenValues;
 exports.default = _default;

package/dist/cjs/get-token.js

@@ -14,8 +14,29 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.10.32";
-
+var version = "0.10.34";
+
+/**
+ * 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.
+ *
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
+ *
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
+ *
+ * @example
+ * ```
+ * <div
+ *   css={{
+ *     backgroundColor: token('elevation.surface.raised', N0),
+ *     boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
+ *     padding: token('spacing.scale.100', '8px'),
+ *   }}
+ * />
+ * ```
+ *
+ */
 function token(path, fallback) {
   var token = _tokenNames.default[path];
 

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

@@ -8,73 +8,73 @@ var scale = {
   spacing: {
     scale: {
       Space0: {
-        value: '0px',
+        value: '0',
         attributes: {
           group: 'scale'
         }
       },
       Space025: {
-        value: '2px',
+        value: '0.125rem',
         attributes: {
           group: 'scale'
         }
       },
       Space050: {
-        value: '4px',
+        value: '0.25rem',
         attributes: {
           group: 'scale'
         }
       },
       Space075: {
-        value: '6px',
+        value: '0.375rem',
         attributes: {
           group: 'scale'
         }
       },
       Space100: {
-        value: '8px',
+        value: '0.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space150: {
-        value: '12px',
+        value: '0.75rem',
         attributes: {
           group: 'scale'
         }
       },
       Space200: {
-        value: '16px',
+        value: '1rem',
         attributes: {
           group: 'scale'
         }
       },
       Space250: {
-        value: '20px',
+        value: '1.25rem',
         attributes: {
           group: 'scale'
         }
       },
       Space300: {
-        value: '24px',
+        value: '1.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space400: {
-        value: '32px',
+        value: '2rem',
         attributes: {
           group: 'scale'
         }
       },
       Space500: {
-        value: '40px',
+        value: '2.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space600: {
-        value: '48px',
+        value: '3rem',
         attributes: {
           group: 'scale'
         }

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

@@ -11,6 +11,18 @@ var _constants = require("./constants");
 
 var _themeConfig = _interopRequireDefault(require("./theme-config"));
 
+/**
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
+ *
+ * @param {string} themeId - Which theme should be used by default.
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
+ *
+ * @example
+ * ```
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
+ * setGlobalTheme('light', true);
+ * ```
+ */
 var setGlobalTheme = function setGlobalTheme(themeId) {
   var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var theme = Object.values(_themeConfig.default).find(function (_ref) {

package/dist/cjs/version.json

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

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

@@ -1,17 +1,17 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9ec4d3766ad54f86aa1d9891b0f32317>>
+ * @codegen <<SignedSource::e1fc16f85d9f95330fadb08536a38997>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
-  "value": "0px",
+  "value": "0",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "0px",
+    "value": "0",
     "attributes": {
       "group": "scale"
     }
@@ -19,14 +19,14 @@ const tokens = [{
   "name": "spacing.scale.Space0",
   "path": ["spacing", "scale", "Space0"]
 }, {
-  "value": "2px",
+  "value": "0.125rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "2px",
+    "value": "0.125rem",
     "attributes": {
       "group": "scale"
     }
@@ -34,14 +34,14 @@ const tokens = [{
   "name": "spacing.scale.Space025",
   "path": ["spacing", "scale", "Space025"]
 }, {
-  "value": "4px",
+  "value": "0.25rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "4px",
+    "value": "0.25rem",
     "attributes": {
       "group": "scale"
     }
@@ -49,14 +49,14 @@ const tokens = [{
   "name": "spacing.scale.Space050",
   "path": ["spacing", "scale", "Space050"]
 }, {
-  "value": "6px",
+  "value": "0.375rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "6px",
+    "value": "0.375rem",
     "attributes": {
       "group": "scale"
     }
@@ -64,14 +64,14 @@ const tokens = [{
   "name": "spacing.scale.Space075",
   "path": ["spacing", "scale", "Space075"]
 }, {
-  "value": "8px",
+  "value": "0.5rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "8px",
+    "value": "0.5rem",
     "attributes": {
       "group": "scale"
     }
@@ -79,14 +79,14 @@ const tokens = [{
   "name": "spacing.scale.Space100",
   "path": ["spacing", "scale", "Space100"]
 }, {
-  "value": "12px",
+  "value": "0.75rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "12px",
+    "value": "0.75rem",
     "attributes": {
       "group": "scale"
     }
@@ -94,14 +94,14 @@ const tokens = [{
   "name": "spacing.scale.Space150",
   "path": ["spacing", "scale", "Space150"]
 }, {
-  "value": "16px",
+  "value": "1rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "16px",
+    "value": "1rem",
     "attributes": {
       "group": "scale"
     }
@@ -109,14 +109,14 @@ const tokens = [{
   "name": "spacing.scale.Space200",
   "path": ["spacing", "scale", "Space200"]
 }, {
-  "value": "20px",
+  "value": "1.25rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "20px",
+    "value": "1.25rem",
     "attributes": {
       "group": "scale"
     }
@@ -124,14 +124,14 @@ const tokens = [{
   "name": "spacing.scale.Space250",
   "path": ["spacing", "scale", "Space250"]
 }, {
-  "value": "24px",
+  "value": "1.5rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "24px",
+    "value": "1.5rem",
     "attributes": {
       "group": "scale"
     }
@@ -139,14 +139,14 @@ const tokens = [{
   "name": "spacing.scale.Space300",
   "path": ["spacing", "scale", "Space300"]
 }, {
-  "value": "32px",
+  "value": "2rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "32px",
+    "value": "2rem",
     "attributes": {
       "group": "scale"
     }
@@ -154,14 +154,14 @@ const tokens = [{
   "name": "spacing.scale.Space400",
   "path": ["spacing", "scale", "Space400"]
 }, {
-  "value": "40px",
+  "value": "2.5rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "40px",
+    "value": "2.5rem",
     "attributes": {
       "group": "scale"
     }
@@ -169,14 +169,14 @@ const tokens = [{
   "name": "spacing.scale.Space500",
   "path": ["spacing", "scale", "Space500"]
 }, {
-  "value": "48px",
+  "value": "3rem",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "48px",
+    "value": "3rem",
     "attributes": {
       "group": "scale"
     }

package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -6485,10 +6485,10 @@ const tokens = [{
     "radius": 8,
     "offset": {
       "x": 0,
-      "y": 8
+      "y": 0
     },
     "color": "#091e423f",
-    "opacity": 0.08
+    "opacity": 0.16
   }, {
     "radius": 1,
     "offset": {
@@ -6511,10 +6511,10 @@ const tokens = [{
       "radius": 8,
       "offset": {
         "x": 0,
-        "y": 8
+        "y": 0
       },
       "color": "N50A",
-      "opacity": 0.08
+      "opacity": 0.16
     }, {
       "radius": 1,
       "offset": {