@atlaskit/tokens 1.5.1 → 1.6.0

package/figma/atlassian-legacy-light.json

@@ -15,7 +15,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#DE350B"
     },
@@ -24,7 +24,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold red accent backgrounds."
+        "description": "Use for red text on subtle red accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#BF2600"
     },
@@ -33,7 +33,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#F18D13"
     },
@@ -42,7 +42,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold orange accent backgrounds."
+        "description": "Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#B65C02"
     },
@@ -51,7 +51,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#FF991F"
     },
@@ -60,7 +60,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold yellow accent backgrounds."
+        "description": "Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#FF8B00"
     },
@@ -69,7 +69,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#00875A"
     },
@@ -78,7 +78,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold green accent backgrounds."
+        "description": "Use for green text on subtle green accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#006644"
     },
@@ -87,7 +87,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#00A3BF"
     },
@@ -96,7 +96,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold teal accent backgrounds."
+        "description": "Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#008DA6"
     },
@@ -105,7 +105,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#0052CC"
     },
@@ -114,7 +114,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold blue accent backgrounds."
+        "description": "Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#0747A6"
     },
@@ -123,7 +123,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#5243AA"
     },
@@ -132,7 +132,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold purple accent backgrounds."
+        "description": "Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#403294"
     },
@@ -141,7 +141,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for magenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#E774BB"
     },
@@ -150,7 +150,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold magenta accent backgrounds."
+        "description": "Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#DA62AC"
     },

package/figma/atlassian-light.json

@@ -15,7 +15,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#AE2A19"
     },
@@ -24,7 +24,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold red accent backgrounds."
+        "description": "Use for red text on subtle red accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#601E16"
     },
@@ -33,7 +33,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#974F0C"
     },
@@ -42,7 +42,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold orange accent backgrounds."
+        "description": "Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#5F3811"
     },
@@ -51,7 +51,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#7F5F01"
     },
@@ -60,7 +60,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold yellow accent backgrounds."
+        "description": "Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#533F04"
     },
@@ -69,7 +69,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#216E4E"
     },
@@ -78,7 +78,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold green accent backgrounds."
+        "description": "Use for green text on subtle green accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#164B35"
     },
@@ -87,7 +87,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#206B74"
     },
@@ -96,7 +96,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold teal accent backgrounds."
+        "description": "Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#1D474C"
     },
@@ -105,7 +105,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#0055CC"
     },
@@ -114,7 +114,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold blue accent backgrounds."
+        "description": "Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#09326C"
     },
@@ -123,7 +123,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#5E4DB2"
     },
@@ -132,7 +132,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold purple accent backgrounds."
+        "description": "Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#352C63"
     },
@@ -141,7 +141,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Use for magenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags."
+        "description": "Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#943D73"
     },
@@ -150,7 +150,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.7.0",
-        "description": "Use on bold magenta accent backgrounds."
+        "description": "Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color."
       },
       "value": "#50253F"
     },

package/figma/atlassian-shape.json

@@ -4,56 +4,74 @@
     "Shape/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."
       },
       "value": 2
     },
+    "Shape/border.radius": {
+      "attributes": {
+        "group": "shape",
+        "state": "active",
+        "introduced": "1.5.2",
+        "description": "The default border radius."
+      },
+      "value": 4
+    },
     "Shape/border.radius.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."
       },
       "value": 4
     },
     "Shape/border.radius.200": {
       "attributes": {
         "group": "shape",
-        "state": "experimental",
+        "state": "active",
         "introduced": "1.1.0",
-        "description": "Experimental, description needs to be amended"
+        "description": "Used for smaller cards."
       },
       "value": 8
     },
     "Shape/border.radius.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."
       },
       "value": 12
     },
     "Shape/border.radius.400": {
       "attributes": {
         "group": "shape",
-        "state": "experimental",
+        "state": "active",
         "introduced": "1.1.0",
-        "description": "Experimental, description needs to be amended"
+        "description": "Used for modals."
       },
       "value": 16
     },
-    "Shape/border.radius.round": {
+    "Shape/border.radius.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."
       },
-      "value": "50%"
+      "value": 32032
+    },
+    "Shape/border.width": {
+      "attributes": {
+        "group": "shape",
+        "state": "active",
+        "introduced": "1.5.2",
+        "description": "The default border width."
+      },
+      "value": 1
     },
     "Shape/border.width.0": {
       "attributes": {
@@ -67,18 +85,18 @@
     "Shape/border.width.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."
       },
       "value": 1
     },
     "Shape/border.width.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."
       },
       "value": 2
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -71,14 +71,15 @@
     "@atlaskit/docs": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/ds-explorations": "^2.2.0",
-    "@atlaskit/dynamic-table": "^14.9.0",
+    "@atlaskit/dynamic-table": "^14.10.0",
     "@atlaskit/grid": "^0.11.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/primitives": "^0.9.0",
+    "@atlaskit/primitives": "^0.12.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
+    "@atlaskit/spinner": "^15.5.1",
     "@atlaskit/tag": "^11.5.0",
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/theme": "^12.5.0",

package/report.api.md

@@ -25,6 +25,16 @@ interface ActiveThemeState extends ThemeState {
 
 // @public
 export type ActiveTokens =
+  | 'border.radius'
+  | 'border.radius.050'
+  | 'border.radius.100'
+  | 'border.radius.200'
+  | 'border.radius.300'
+  | 'border.radius.400'
+  | 'border.radius.circle'
+  | 'border.width'
+  | 'border.width.050'
+  | 'border.width.100'
   | 'color.background.accent.blue.bolder'
   | 'color.background.accent.blue.subtle'
   | 'color.background.accent.blue.subtler'
@@ -349,6 +359,74 @@ export type ActiveTokens =
 // @public (undocumented)
 type ActiveTokenState = 'active';
 
+// @public (undocumented)
+type BaseRadiusToken = keyof typeof baseRadiusTokens;
+
+// @public (undocumented)
+const baseRadiusTokens: {
+  readonly Radius050: {
+    readonly value: 2;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Radius100: {
+    readonly value: 4;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Radius200: {
+    readonly value: 8;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Radius300: {
+    readonly value: 12;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Radius400: {
+    readonly value: 16;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly RadiusCircle: {
+    readonly value: 32032;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+};
+
+// @public (undocumented)
+type BaseSizeToken = keyof typeof baseSizeTokens;
+
+// @public (undocumented)
+const baseSizeTokens: {
+  readonly Size0: {
+    readonly value: 0;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Size050: {
+    readonly value: 1;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+  readonly Size100: {
+    readonly value: 2;
+    readonly attributes: {
+      readonly group: 'shape';
+    };
+  };
+};
+
 // @public (undocumented)
 const baseSpacingTokens: {
   readonly Space0: {
@@ -442,15 +520,6 @@ export type CSSToken = CSSTokenMap[keyof CSSTokenMap];
 
 // @public (undocumented)
 type CSSTokenMap = {
-  'border.radius.050': 'var(--ds-radius-050)';
-  'border.radius.100': 'var(--ds-radius-100)';
-  'border.radius.200': 'var(--ds-radius-200)';
-  'border.radius.300': 'var(--ds-radius-300)';
-  'border.radius.400': 'var(--ds-radius-400)';
-  'border.radius.round': 'var(--ds-radius-round)';
-  'border.width.0': 'var(--ds-width-0)';
-  'border.width.050': 'var(--ds-width-050)';
-  'border.width.100': 'var(--ds-width-100)';
   'color.text': 'var(--ds-text)';
   'color.text.accent.red': 'var(--ds-text-accent-red)';
   'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
@@ -737,6 +806,17 @@ type CSSTokenMap = {
   'opacity.disabled': 'var(--ds-opacity-disabled)';
   'opacity.loading': 'var(--ds-opacity-loading)';
   'utility.UNSAFE.transparent': 'var(--ds-UNSAFE-transparent)';
+  'border.radius.050': 'var(--ds-border-radius-050)';
+  'border.radius': 'var(--ds-border-radius)';
+  'border.radius.100': 'var(--ds-border-radius-100)';
+  'border.radius.200': 'var(--ds-border-radius-200)';
+  'border.radius.300': 'var(--ds-border-radius-300)';
+  'border.radius.400': 'var(--ds-border-radius-400)';
+  'border.radius.circle': 'var(--ds-border-radius-circle)';
+  'border.width': 'var(--ds-border-width)';
+  'border.width.0': 'var(--ds-border-width-0)';
+  'border.width.050': 'var(--ds-border-width-050)';
+  'border.width.100': 'var(--ds-border-width-100)';
   'space.0': 'var(--ds-space-0)';
   'space.025': 'var(--ds-space-025)';
   'space.050': 'var(--ds-space-050)';
@@ -843,6 +923,7 @@ export const getThemeHtmlAttrs: ({
   colorMode,
   dark,
   light,
+  shape,
   spacing,
   typography,
 }?: Partial<ThemeState>) => Record<string, string>;
@@ -854,6 +935,7 @@ export const getThemeStyles: ({
   light,
   spacing,
   typography,
+  shape,
 }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
 
 // @public
@@ -879,6 +961,16 @@ export type Groups =
 
 // @public
 type InternalTokenIds =
+  | 'border.radius.050'
+  | 'border.radius.100'
+  | 'border.radius.200'
+  | 'border.radius.300'
+  | 'border.radius.400'
+  | 'border.radius.[default]'
+  | 'border.radius.circle'
+  | 'border.width.050'
+  | 'border.width.100'
+  | 'border.width.[default]'
   | 'color.background.accent.blue.bolder'
   | 'color.background.accent.blue.subtle'
   | 'color.background.accent.blue.subtler'
@@ -1225,6 +1317,7 @@ export const setGlobalTheme: ({
   colorMode,
   dark,
   light,
+  shape,
   spacing,
   typography,
 }?: Partial<ThemeState>) => Promise<UnbindFn>;
@@ -1245,6 +1338,12 @@ export type ShadowToken<BaseToken> = DesignToken<
   'shadow'
 >;
 
+// @public
+type ShapePaletteToken = BaseRadiusToken | BaseSizeToken;
+
+// @public (undocumented)
+export type ShapeToken = DesignToken<ShapePaletteToken, 'shape'>;
+
 // @public
 type SpacingPaletteToken = keyof typeof baseSpacingTokens;
 
@@ -1330,13 +1429,15 @@ export interface ThemeState {
   // (undocumented)
   colorMode: ThemeColorModes;
   // (undocumented)
-  dark: ThemeIds;
+  dark: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
+  // (undocumented)
+  light: Extract<ThemeIds, 'dark' | 'legacy-dark' | 'legacy-light' | 'light'>;
   // (undocumented)
-  light: ThemeIds;
+  shape?: Extract<ThemeIds, 'shape'>;
   // (undocumented)
-  spacing?: ThemeIds;
+  spacing?: Extract<ThemeIds, 'spacing'>;
   // (undocumented)
-  typography?: ThemeIds;
+  typography?: Extract<ThemeIds, 'typography'>;
 }
 
 // @public
@@ -1376,15 +1477,6 @@ type Tokens = typeof tokens;
 
 // @public
 const tokens: {
-  readonly 'border.radius.050': '--ds-radius-050';
-  readonly 'border.radius.100': '--ds-radius-100';
-  readonly 'border.radius.200': '--ds-radius-200';
-  readonly 'border.radius.300': '--ds-radius-300';
-  readonly 'border.radius.400': '--ds-radius-400';
-  readonly 'border.radius.round': '--ds-radius-round';
-  readonly 'border.width.0': '--ds-width-0';
-  readonly 'border.width.050': '--ds-width-050';
-  readonly 'border.width.100': '--ds-width-100';
   readonly 'color.text': '--ds-text';
   readonly 'color.text.accent.red': '--ds-text-accent-red';
   readonly 'color.text.accent.red.bolder': '--ds-text-accent-red-bolder';
@@ -1671,6 +1763,17 @@ const tokens: {
   readonly 'opacity.disabled': '--ds-opacity-disabled';
   readonly 'opacity.loading': '--ds-opacity-loading';
   readonly 'utility.UNSAFE.transparent': '--ds-UNSAFE-transparent';
+  readonly 'border.radius.050': '--ds-border-radius-050';
+  readonly 'border.radius': '--ds-border-radius';
+  readonly 'border.radius.100': '--ds-border-radius-100';
+  readonly 'border.radius.200': '--ds-border-radius-200';
+  readonly 'border.radius.300': '--ds-border-radius-300';
+  readonly 'border.radius.400': '--ds-border-radius-400';
+  readonly 'border.radius.circle': '--ds-border-radius-circle';
+  readonly 'border.width': '--ds-border-width';
+  readonly 'border.width.0': '--ds-border-width-0';
+  readonly 'border.width.050': '--ds-border-width-050';
+  readonly 'border.width.100': '--ds-border-width-100';
   readonly 'space.0': '--ds-space-0';
   readonly 'space.025': '--ds-space-025';
   readonly 'space.050': '--ds-space-050';