@atlaskit/tokens 0.10.32 → 0.10.34

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

@@ -4,85 +4,85 @@
  * 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'
 };
 export default defaultTokenValues;

package/dist/esm/get-token.js

@@ -2,8 +2,29 @@ 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 = "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 = tokens[path];
 

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

@@ -2,73 +2,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/esm/set-global-theme.js

@@ -1,5 +1,17 @@
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import themeConfig from './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;

package/dist/esm/version.json

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

package/dist/types/artifacts/palettes-raw/spacing-scale.d.ts

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

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

@@ -1,80 +1,80 @@
 declare const defaultTokens: {
-    '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";
     'color.text.accent.blue': "#0055CC";
     'color.text.accent.blue.bolder': "#09326C";
     'color.text.accent.red': "#AE2A19";

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

@@ -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
  */
 declare const tokens: ({

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

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