@atlaskit/tokens 0.10.32 → 0.10.34

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

@@ -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
  */
 declare const defaultTokenValues: {
-    readonly 'spacing.scale.0': "0px";
-    readonly 'spacing.scale.100': "8px";
-    readonly 'spacing.scale.150': "12px";
-    readonly 'spacing.scale.200': "16px";
-    readonly 'spacing.scale.250': "20px";
-    readonly 'spacing.scale.300': "24px";
-    readonly 'spacing.scale.400': "32px";
-    readonly 'spacing.scale.500': "40px";
-    readonly 'spacing.scale.600': "48px";
-    readonly 'spacing.scale.025': "2px";
-    readonly 'spacing.scale.050': "4px";
-    readonly 'spacing.scale.075': "6px";
-    readonly 'spacing.scaleLinear.0': "0px";
-    readonly 'spacing.scaleLinear.100': "2px";
-    readonly 'spacing.scaleLinear.200': "4px";
-    readonly 'spacing.scaleLinear.300': "6px";
-    readonly 'spacing.scaleLinear.400': "8px";
-    readonly 'spacing.scaleLinear.500': "12px";
-    readonly 'spacing.scaleLinear.600': "16px";
-    readonly 'spacing.scaleLinear.700': "20px";
-    readonly 'spacing.scaleLinear.800': "24px";
-    readonly 'spacing.scaleLinear.900': "32px";
-    readonly 'spacing.scaleLinear.1000': "40px";
-    readonly 'spacing.scaleLinear.1100': "48px";
-    readonly 'spacing.pixel.0': "0px";
-    readonly 'spacing.pixel.2': "2px";
-    readonly 'spacing.pixel.4': "4px";
-    readonly 'spacing.pixel.6': "6px";
-    readonly 'spacing.pixel.8': "8px";
-    readonly 'spacing.pixel.12': "12px";
-    readonly 'spacing.pixel.16': "16px";
-    readonly 'spacing.pixel.20': "20px";
-    readonly 'spacing.pixel.24': "24px";
-    readonly 'spacing.pixel.32': "32px";
-    readonly 'spacing.pixel.40': "40px";
-    readonly 'spacing.pixel.48': "48px";
-    readonly 'spacing.size.none': "0px";
-    readonly 'spacing.size.xxxxSmall': "2px";
-    readonly 'spacing.size.xxxSmall': "4px";
-    readonly 'spacing.size.xxSmall': "6px";
-    readonly 'spacing.size.xsmall': "8px";
-    readonly 'spacing.size.small': "12px";
-    readonly 'spacing.size.medium': "16px";
-    readonly 'spacing.size.large': "20px";
-    readonly 'spacing.size.xlarge': "24px";
-    readonly 'spacing.size.xxlarge': "32px";
-    readonly 'spacing.size.xxxlarge': "40px";
-    readonly 'spacing.size.xxxxlarge': "48px";
-    readonly 'spacing.ecl.element.2': "2px";
-    readonly 'spacing.ecl.element.4': "4px";
-    readonly 'spacing.ecl.element.6': "6px";
-    readonly 'spacing.ecl.element.8': "8px";
-    readonly 'spacing.ecl.container.12': "12px";
-    readonly 'spacing.ecl.container.16': "16px";
-    readonly 'spacing.ecl.container.20': "20px";
-    readonly 'spacing.ecl.container.24': "24px";
-    readonly 'spacing.ecl.layout.32': "32px";
-    readonly 'spacing.ecl.layout.40': "40px";
-    readonly 'spacing.ecl.layout.64': "48px";
-    readonly 'spacing.ccc.component.2': "2px";
-    readonly 'spacing.ccc.component.4': "4px";
-    readonly 'spacing.ccc.component.6': "6px";
-    readonly 'spacing.ccc.component.8': "8px";
-    readonly 'spacing.ccc.content.12': "12px";
-    readonly 'spacing.ccc.content.16': "16px";
-    readonly 'spacing.ccc.content.20': "20px";
-    readonly 'spacing.ccc.content.24': "24px";
-    readonly 'spacing.ccc.container.32': "32px";
-    readonly 'spacing.ccc.container.40': "40px";
-    readonly 'spacing.ccc.container.48': "48px";
-    readonly 'spacing.gap.100': "8px";
-    readonly 'spacing.gap.200': "16px";
-    readonly 'spacing.gap.300': "24px";
-    readonly 'spacing.inset.100': "8px";
-    readonly 'spacing.inset.200': "16px";
-    readonly 'spacing.inset.300': "24px";
+    readonly 'spacing.scale.0': "0";
+    readonly 'spacing.scale.100': "0.5rem";
+    readonly 'spacing.scale.150': "0.75rem";
+    readonly 'spacing.scale.200': "1rem";
+    readonly 'spacing.scale.250': "1.25rem";
+    readonly 'spacing.scale.300': "1.5rem";
+    readonly 'spacing.scale.400': "2rem";
+    readonly 'spacing.scale.500': "2.5rem";
+    readonly 'spacing.scale.600': "3rem";
+    readonly 'spacing.scale.025': "0.125rem";
+    readonly 'spacing.scale.050': "0.25rem";
+    readonly 'spacing.scale.075': "0.375rem";
+    readonly 'spacing.scaleLinear.0': "0";
+    readonly 'spacing.scaleLinear.100': "0.125rem";
+    readonly 'spacing.scaleLinear.200': "0.25rem";
+    readonly 'spacing.scaleLinear.300': "0.375rem";
+    readonly 'spacing.scaleLinear.400': "0.5rem";
+    readonly 'spacing.scaleLinear.500': "0.75rem";
+    readonly 'spacing.scaleLinear.600': "1rem";
+    readonly 'spacing.scaleLinear.700': "1.25rem";
+    readonly 'spacing.scaleLinear.800': "1.5rem";
+    readonly 'spacing.scaleLinear.900': "2rem";
+    readonly 'spacing.scaleLinear.1000': "2.5rem";
+    readonly 'spacing.scaleLinear.1100': "3rem";
+    readonly 'spacing.pixel.0': "0";
+    readonly 'spacing.pixel.2': "0.125rem";
+    readonly 'spacing.pixel.4': "0.25rem";
+    readonly 'spacing.pixel.6': "0.375rem";
+    readonly 'spacing.pixel.8': "0.5rem";
+    readonly 'spacing.pixel.12': "0.75rem";
+    readonly 'spacing.pixel.16': "1rem";
+    readonly 'spacing.pixel.20': "1.25rem";
+    readonly 'spacing.pixel.24': "1.5rem";
+    readonly 'spacing.pixel.32': "2rem";
+    readonly 'spacing.pixel.40': "2.5rem";
+    readonly 'spacing.pixel.48': "3rem";
+    readonly 'spacing.size.none': "0";
+    readonly 'spacing.size.xxxxSmall': "0.125rem";
+    readonly 'spacing.size.xxxSmall': "0.25rem";
+    readonly 'spacing.size.xxSmall': "0.375rem";
+    readonly 'spacing.size.xsmall': "0.5rem";
+    readonly 'spacing.size.small': "0.75rem";
+    readonly 'spacing.size.medium': "1rem";
+    readonly 'spacing.size.large': "1.25rem";
+    readonly 'spacing.size.xlarge': "1.5rem";
+    readonly 'spacing.size.xxlarge': "2rem";
+    readonly 'spacing.size.xxxlarge': "2.5rem";
+    readonly 'spacing.size.xxxxlarge': "3rem";
+    readonly 'spacing.ecl.element.2': "0.125rem";
+    readonly 'spacing.ecl.element.4': "0.25rem";
+    readonly 'spacing.ecl.element.6': "0.375rem";
+    readonly 'spacing.ecl.element.8': "0.5rem";
+    readonly 'spacing.ecl.container.12': "0.75rem";
+    readonly 'spacing.ecl.container.16': "1rem";
+    readonly 'spacing.ecl.container.20': "1.25rem";
+    readonly 'spacing.ecl.container.24': "1.5rem";
+    readonly 'spacing.ecl.layout.32': "2rem";
+    readonly 'spacing.ecl.layout.40': "2.5rem";
+    readonly 'spacing.ecl.layout.64': "3rem";
+    readonly 'spacing.ccc.component.2': "0.125rem";
+    readonly 'spacing.ccc.component.4': "0.25rem";
+    readonly 'spacing.ccc.component.6': "0.375rem";
+    readonly 'spacing.ccc.component.8': "0.5rem";
+    readonly 'spacing.ccc.content.12': "0.75rem";
+    readonly 'spacing.ccc.content.16': "1rem";
+    readonly 'spacing.ccc.content.20': "1.25rem";
+    readonly 'spacing.ccc.content.24': "1.5rem";
+    readonly 'spacing.ccc.container.32': "2rem";
+    readonly 'spacing.ccc.container.40': "2.5rem";
+    readonly 'spacing.ccc.container.48': "3rem";
+    readonly 'spacing.gap.100': "0.5rem";
+    readonly 'spacing.gap.200': "1rem";
+    readonly 'spacing.gap.300': "1.5rem";
+    readonly 'spacing.inset.100': "0.5rem";
+    readonly 'spacing.inset.200': "1rem";
+    readonly 'spacing.inset.300': "1.5rem";
 };
 export default defaultTokenValues;

package/dist/types/get-token.d.ts

@@ -1,4 +1,25 @@
 import tokens, { CSSTokenMap } from './artifacts/token-names';
 declare type Tokens = typeof tokens;
+/**
+ * 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'),
+ *   }}
+ * />
+ * ```
+ *
+ */
 declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
 export default token;

package/dist/types/set-global-theme.d.ts

@@ -1,3 +1,15 @@
 import { ThemeIds } 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);
+ * ```
+ */
 declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
 export default setGlobalTheme;

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/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-ts4.0/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: ({

package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-token-default-values.d.ts

@@ -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
  */
 declare const defaultTokenValues: {
-    readonly 'spacing.scale.0': "0px";
-    readonly 'spacing.scale.100': "8px";
-    readonly 'spacing.scale.150': "12px";
-    readonly 'spacing.scale.200': "16px";
-    readonly 'spacing.scale.250': "20px";
-    readonly 'spacing.scale.300': "24px";
-    readonly 'spacing.scale.400': "32px";
-    readonly 'spacing.scale.500': "40px";
-    readonly 'spacing.scale.600': "48px";
-    readonly 'spacing.scale.025': "2px";
-    readonly 'spacing.scale.050': "4px";
-    readonly 'spacing.scale.075': "6px";
-    readonly 'spacing.scaleLinear.0': "0px";
-    readonly 'spacing.scaleLinear.100': "2px";
-    readonly 'spacing.scaleLinear.200': "4px";
-    readonly 'spacing.scaleLinear.300': "6px";
-    readonly 'spacing.scaleLinear.400': "8px";
-    readonly 'spacing.scaleLinear.500': "12px";
-    readonly 'spacing.scaleLinear.600': "16px";
-    readonly 'spacing.scaleLinear.700': "20px";
-    readonly 'spacing.scaleLinear.800': "24px";
-    readonly 'spacing.scaleLinear.900': "32px";
-    readonly 'spacing.scaleLinear.1000': "40px";
-    readonly 'spacing.scaleLinear.1100': "48px";
-    readonly 'spacing.pixel.0': "0px";
-    readonly 'spacing.pixel.2': "2px";
-    readonly 'spacing.pixel.4': "4px";
-    readonly 'spacing.pixel.6': "6px";
-    readonly 'spacing.pixel.8': "8px";
-    readonly 'spacing.pixel.12': "12px";
-    readonly 'spacing.pixel.16': "16px";
-    readonly 'spacing.pixel.20': "20px";
-    readonly 'spacing.pixel.24': "24px";
-    readonly 'spacing.pixel.32': "32px";
-    readonly 'spacing.pixel.40': "40px";
-    readonly 'spacing.pixel.48': "48px";
-    readonly 'spacing.size.none': "0px";
-    readonly 'spacing.size.xxxxSmall': "2px";
-    readonly 'spacing.size.xxxSmall': "4px";
-    readonly 'spacing.size.xxSmall': "6px";
-    readonly 'spacing.size.xsmall': "8px";
-    readonly 'spacing.size.small': "12px";
-    readonly 'spacing.size.medium': "16px";
-    readonly 'spacing.size.large': "20px";
-    readonly 'spacing.size.xlarge': "24px";
-    readonly 'spacing.size.xxlarge': "32px";
-    readonly 'spacing.size.xxxlarge': "40px";
-    readonly 'spacing.size.xxxxlarge': "48px";
-    readonly 'spacing.ecl.element.2': "2px";
-    readonly 'spacing.ecl.element.4': "4px";
-    readonly 'spacing.ecl.element.6': "6px";
-    readonly 'spacing.ecl.element.8': "8px";
-    readonly 'spacing.ecl.container.12': "12px";
-    readonly 'spacing.ecl.container.16': "16px";
-    readonly 'spacing.ecl.container.20': "20px";
-    readonly 'spacing.ecl.container.24': "24px";
-    readonly 'spacing.ecl.layout.32': "32px";
-    readonly 'spacing.ecl.layout.40': "40px";
-    readonly 'spacing.ecl.layout.64': "48px";
-    readonly 'spacing.ccc.component.2': "2px";
-    readonly 'spacing.ccc.component.4': "4px";
-    readonly 'spacing.ccc.component.6': "6px";
-    readonly 'spacing.ccc.component.8': "8px";
-    readonly 'spacing.ccc.content.12': "12px";
-    readonly 'spacing.ccc.content.16': "16px";
-    readonly 'spacing.ccc.content.20': "20px";
-    readonly 'spacing.ccc.content.24': "24px";
-    readonly 'spacing.ccc.container.32': "32px";
-    readonly 'spacing.ccc.container.40': "40px";
-    readonly 'spacing.ccc.container.48': "48px";
-    readonly 'spacing.gap.100': "8px";
-    readonly 'spacing.gap.200': "16px";
-    readonly 'spacing.gap.300': "24px";
-    readonly 'spacing.inset.100': "8px";
-    readonly 'spacing.inset.200': "16px";
-    readonly 'spacing.inset.300': "24px";
+    readonly 'spacing.scale.0': "0";
+    readonly 'spacing.scale.100': "0.5rem";
+    readonly 'spacing.scale.150': "0.75rem";
+    readonly 'spacing.scale.200': "1rem";
+    readonly 'spacing.scale.250': "1.25rem";
+    readonly 'spacing.scale.300': "1.5rem";
+    readonly 'spacing.scale.400': "2rem";
+    readonly 'spacing.scale.500': "2.5rem";
+    readonly 'spacing.scale.600': "3rem";
+    readonly 'spacing.scale.025': "0.125rem";
+    readonly 'spacing.scale.050': "0.25rem";
+    readonly 'spacing.scale.075': "0.375rem";
+    readonly 'spacing.scaleLinear.0': "0";
+    readonly 'spacing.scaleLinear.100': "0.125rem";
+    readonly 'spacing.scaleLinear.200': "0.25rem";
+    readonly 'spacing.scaleLinear.300': "0.375rem";
+    readonly 'spacing.scaleLinear.400': "0.5rem";
+    readonly 'spacing.scaleLinear.500': "0.75rem";
+    readonly 'spacing.scaleLinear.600': "1rem";
+    readonly 'spacing.scaleLinear.700': "1.25rem";
+    readonly 'spacing.scaleLinear.800': "1.5rem";
+    readonly 'spacing.scaleLinear.900': "2rem";
+    readonly 'spacing.scaleLinear.1000': "2.5rem";
+    readonly 'spacing.scaleLinear.1100': "3rem";
+    readonly 'spacing.pixel.0': "0";
+    readonly 'spacing.pixel.2': "0.125rem";
+    readonly 'spacing.pixel.4': "0.25rem";
+    readonly 'spacing.pixel.6': "0.375rem";
+    readonly 'spacing.pixel.8': "0.5rem";
+    readonly 'spacing.pixel.12': "0.75rem";
+    readonly 'spacing.pixel.16': "1rem";
+    readonly 'spacing.pixel.20': "1.25rem";
+    readonly 'spacing.pixel.24': "1.5rem";
+    readonly 'spacing.pixel.32': "2rem";
+    readonly 'spacing.pixel.40': "2.5rem";
+    readonly 'spacing.pixel.48': "3rem";
+    readonly 'spacing.size.none': "0";
+    readonly 'spacing.size.xxxxSmall': "0.125rem";
+    readonly 'spacing.size.xxxSmall': "0.25rem";
+    readonly 'spacing.size.xxSmall': "0.375rem";
+    readonly 'spacing.size.xsmall': "0.5rem";
+    readonly 'spacing.size.small': "0.75rem";
+    readonly 'spacing.size.medium': "1rem";
+    readonly 'spacing.size.large': "1.25rem";
+    readonly 'spacing.size.xlarge': "1.5rem";
+    readonly 'spacing.size.xxlarge': "2rem";
+    readonly 'spacing.size.xxxlarge': "2.5rem";
+    readonly 'spacing.size.xxxxlarge': "3rem";
+    readonly 'spacing.ecl.element.2': "0.125rem";
+    readonly 'spacing.ecl.element.4': "0.25rem";
+    readonly 'spacing.ecl.element.6': "0.375rem";
+    readonly 'spacing.ecl.element.8': "0.5rem";
+    readonly 'spacing.ecl.container.12': "0.75rem";
+    readonly 'spacing.ecl.container.16': "1rem";
+    readonly 'spacing.ecl.container.20': "1.25rem";
+    readonly 'spacing.ecl.container.24': "1.5rem";
+    readonly 'spacing.ecl.layout.32': "2rem";
+    readonly 'spacing.ecl.layout.40': "2.5rem";
+    readonly 'spacing.ecl.layout.64': "3rem";
+    readonly 'spacing.ccc.component.2': "0.125rem";
+    readonly 'spacing.ccc.component.4': "0.25rem";
+    readonly 'spacing.ccc.component.6': "0.375rem";
+    readonly 'spacing.ccc.component.8': "0.5rem";
+    readonly 'spacing.ccc.content.12': "0.75rem";
+    readonly 'spacing.ccc.content.16': "1rem";
+    readonly 'spacing.ccc.content.20': "1.25rem";
+    readonly 'spacing.ccc.content.24': "1.5rem";
+    readonly 'spacing.ccc.container.32': "2rem";
+    readonly 'spacing.ccc.container.40': "2.5rem";
+    readonly 'spacing.ccc.container.48': "3rem";
+    readonly 'spacing.gap.100': "0.5rem";
+    readonly 'spacing.gap.200': "1rem";
+    readonly 'spacing.gap.300': "1.5rem";
+    readonly 'spacing.inset.100': "0.5rem";
+    readonly 'spacing.inset.200': "1rem";
+    readonly 'spacing.inset.300': "1.5rem";
 };
 export default defaultTokenValues;

package/dist/types-ts4.0/get-token.d.ts

@@ -1,4 +1,25 @@
 import tokens, { CSSTokenMap } from './artifacts/token-names';
 declare type Tokens = typeof tokens;
+/**
+ * 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'),
+ *   }}
+ * />
+ * ```
+ *
+ */
 declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
 export default token;

package/dist/types-ts4.0/set-global-theme.d.ts

@@ -1,3 +1,15 @@
 import { ThemeIds } 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);
+ * ```
+ */
 declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
 export default setGlobalTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.32",
+  "version": "0.10.34",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",