@atlaskit/tokens 1.8.0 → 1.9.0

package/figma/atlassian-dark.json

@@ -8,7 +8,7 @@
         "introduced": "0.6.0",
         "description": "Use for primary text, such as body copy, sentence case headers, and buttons."
       },
-      "value": "#C7D1DB"
+      "value": "#B6C2CF"
     },
     "Dark/color.text.accent.lime": {
       "attributes": {
@@ -206,7 +206,7 @@
         "introduced": "0.6.0",
         "description": "Use for text on bold backgrounds."
       },
-      "value": "#161A1D"
+      "value": "#1D2125"
     },
     "Dark/color.text.selected": {
       "attributes": {
@@ -251,7 +251,7 @@
         "introduced": "0.6.0",
         "description": "Use for text when on bold warning backgrounds."
       },
-      "value": "#161A1D"
+      "value": "#1D2125"
     },
     "Dark/color.text.success": {
       "attributes": {
@@ -287,7 +287,7 @@
         "introduced": "0.6.0",
         "description": "Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text."
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.text.subtle": {
       "attributes": {
@@ -431,7 +431,7 @@
         "introduced": "0.6.0",
         "description": "Use for icons on bold backgrounds."
       },
-      "value": "#161A1D"
+      "value": "#1D2125"
     },
     "Dark/color.icon.selected": {
       "attributes": {
@@ -476,7 +476,7 @@
         "introduced": "0.6.0",
         "description": "Use for icons when on bold warning backgrounds."
       },
-      "value": "#161A1D"
+      "value": "#1D2125"
     },
     "Dark/color.icon.success": {
       "attributes": {
@@ -512,7 +512,7 @@
         "introduced": "0.6.0",
         "description": "Use for icons paired with color.text.subtle"
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.border": {
       "attributes": {
@@ -764,7 +764,7 @@
         "introduced": "0.7.0",
         "description": "Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#391813"
+      "value": "#4F1C16"
     },
     "Dark/color.background.accent.red.subtler": {
       "attributes": {
@@ -800,7 +800,7 @@
         "introduced": "0.7.0",
         "description": "Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#43290F"
+      "value": "#4A2B0F"
     },
     "Dark/color.background.accent.orange.subtler": {
       "attributes": {
@@ -836,7 +836,7 @@
         "introduced": "0.7.0",
         "description": "Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#3D2E00"
+      "value": "#3F3102"
     },
     "Dark/color.background.accent.yellow.subtler": {
       "attributes": {
@@ -872,7 +872,7 @@
         "introduced": "0.7.0",
         "description": "Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#133527"
+      "value": "#143C2B"
     },
     "Dark/color.background.accent.green.subtler": {
       "attributes": {
@@ -908,7 +908,7 @@
         "introduced": "0.7.0",
         "description": "Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#153337"
+      "value": "#15373B"
     },
     "Dark/color.background.accent.teal.subtler": {
       "attributes": {
@@ -944,7 +944,7 @@
         "introduced": "0.7.0",
         "description": "Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#082145"
+      "value": "#092957"
     },
     "Dark/color.background.accent.blue.subtler": {
       "attributes": {
@@ -980,7 +980,7 @@
         "introduced": "0.7.0",
         "description": "Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#231C3F"
+      "value": "#2B2451"
     },
     "Dark/color.background.accent.purple.subtler": {
       "attributes": {
@@ -1016,7 +1016,7 @@
         "introduced": "0.7.0",
         "description": "Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
       },
-      "value": "#341829"
+      "value": "#421F34"
     },
     "Dark/color.background.accent.magenta.subtler": {
       "attributes": {
@@ -1079,7 +1079,7 @@
         "introduced": "0.7.0",
         "description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.background.disabled": {
       "attributes": {
@@ -1097,7 +1097,7 @@
         "introduced": "0.6.0",
         "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
       },
-      "value": "#1D2125"
+      "value": "#22272B"
     },
     "Dark/color.background.input.hovered": {
       "attributes": {
@@ -1106,7 +1106,7 @@
         "introduced": "0.6.0",
         "description": "Hovered state for color.background.input"
       },
-      "value": "#22272B"
+      "value": "#282E33"
     },
     "Dark/color.background.input.pressed": {
       "attributes": {
@@ -1115,7 +1115,7 @@
         "introduced": "0.6.0",
         "description": "Pressed state for color.background.input"
       },
-      "value": "#1D2125"
+      "value": "#22272B"
     },
     "Dark/color.background.inverse.subtle": {
       "attributes": {
@@ -1232,7 +1232,7 @@
         "introduced": "0.6.2",
         "description": "Use for the background of elements in a selected state, such as in opened dropdown buttons."
       },
-      "value": "#082145"
+      "value": "#092957"
     },
     "Dark/color.background.selected.hovered": {
       "attributes": {
@@ -1313,7 +1313,7 @@
         "introduced": "0.6.0",
         "description": "Use for backgrounds communicating critical information, such in error section messages."
       },
-      "value": "#391813"
+      "value": "#4F1C16"
     },
     "Dark/color.background.danger.hovered": {
       "attributes": {
@@ -1367,7 +1367,7 @@
         "introduced": "0.6.0",
         "description": "Use for backgrounds communicating caution, such as in warning section messages."
       },
-      "value": "#3D2E00"
+      "value": "#3F3102"
     },
     "Dark/color.background.warning.hovered": {
       "attributes": {
@@ -1421,7 +1421,7 @@
         "introduced": "0.6.0",
         "description": "Use for backgrounds communicating a favorable outcome, such as in success section messages."
       },
-      "value": "#133527"
+      "value": "#143C2B"
     },
     "Dark/color.background.success.hovered": {
       "attributes": {
@@ -1475,7 +1475,7 @@
         "introduced": "0.6.0",
         "description": "Use for backgrounds communicating change or something new, such as in discovery section messages."
       },
-      "value": "#231C3F"
+      "value": "#2B2451"
     },
     "Dark/color.background.discovery.hovered": {
       "attributes": {
@@ -1529,7 +1529,7 @@
         "introduced": "0.6.0",
         "description": "Use for backgrounds communicating information or something in-progress, such as in information section messages."
       },
-      "value": "#082145"
+      "value": "#092957"
     },
     "Dark/color.background.information.hovered": {
       "attributes": {
@@ -1583,7 +1583,7 @@
         "introduced": "0.0.15",
         "description": "Use for the screen overlay that appears with modal dialogs"
       },
-      "value": "#03040442"
+      "value": "#10121499"
     },
     "Dark/color.blanket.selected": {
       "attributes": {
@@ -1853,7 +1853,7 @@
         "introduced": "0.13.3",
         "description": "Hovered state of color.chart.neutral."
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.chart.red.bold": {
       "attributes": {
@@ -2303,7 +2303,7 @@
         "introduced": "0.13.3",
         "description": "Hovered state of color.chart.gray.bold."
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.chart.gray.bolder": {
       "attributes": {
@@ -2312,7 +2312,7 @@
         "introduced": "0.13.3",
         "description": "For data visualisation only."
       },
-      "value": "#8696A7"
+      "value": "#8C9BAB"
     },
     "Dark/color.chart.gray.bolder.hovered": {
       "attributes": {
@@ -2546,7 +2546,7 @@
         "introduced": "0.6.0",
         "description": "Use as the primary background for the UI."
       },
-      "value": "#161A1D"
+      "value": "#1D2125"
     },
     "Dark/elevation.surface.hovered": {
       "attributes": {
@@ -2555,7 +2555,7 @@
         "introduced": "0.10.20",
         "description": "Hovered state of elevation.surface"
       },
-      "value": "#1D2125"
+      "value": "#22272B"
     },
     "Dark/elevation.surface.pressed": {
       "attributes": {
@@ -2564,7 +2564,7 @@
         "introduced": "0.10.20",
         "description": "Pressed state of elevation.surface"
       },
-      "value": "#22272B"
+      "value": "#282E33"
     },
     "Dark/elevation.surface.overlay": {
       "attributes": {
@@ -2573,7 +2573,7 @@
         "introduced": "0.6.0",
         "description": "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."
       },
-      "value": "#22272B"
+      "value": "#282E33"
     },
     "Dark/elevation.surface.overlay.hovered": {
       "attributes": {
@@ -2591,7 +2591,7 @@
         "introduced": "0.10.20",
         "description": "Pressed state of elevation.surface.overlay"
       },
-      "value": "#454F59"
+      "value": "#38414A"
     },
     "Dark/elevation.surface.raised": {
       "attributes": {
@@ -2600,7 +2600,7 @@
         "introduced": "0.6.0",
         "description": "Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised."
       },
-      "value": "#1D2125"
+      "value": "#22272B"
     },
     "Dark/elevation.surface.raised.hovered": {
       "attributes": {
@@ -2609,7 +2609,7 @@
         "introduced": "0.10.20",
         "description": "Hovered state of elevation.surface.raised"
       },
-      "value": "#22272B"
+      "value": "#282E33"
     },
     "Dark/elevation.surface.raised.pressed": {
       "attributes": {
@@ -2627,7 +2627,7 @@
         "introduced": "0.6.0",
         "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
       },
-      "value": "#101214"
+      "value": "#161A1D"
     },
     "Dark/elevation.shadow.overflow": {
       "attributes": {
@@ -2691,7 +2691,7 @@
             "x": 0,
             "y": 0
           },
-          "opacity": 0.04,
+          "opacity": 0.12,
           "inset": true
         },
         {

package/figma/atlassian-light-new-input-border.json

@@ -0,0 +1,15 @@
+{
+  "name": "Light new-input-border",
+  "tokens": {
+    "Light new-input-border/color.border.input": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "0.6.0",
+        "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
+      },
+      "value": "#8590A2"
+    }
+  },
+  "renameMap": {}
+}

package/figma/atlassian-light.json

@@ -1727,7 +1727,7 @@
         "introduced": "0.13.3",
         "description": "Hovered state of color.chart.categorical.5."
       },
-      "value": "#082145"
+      "value": "#092957"
     },
     "Light/color.chart.categorical.6": {
       "attributes": {
@@ -1763,7 +1763,7 @@
         "introduced": "0.13.3",
         "description": "Hovered state of color.chart.categorical.7."
       },
-      "value": "#341829"
+      "value": "#421F34"
     },
     "Light/color.chart.categorical.8": {
       "attributes": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/docs": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.9.0",
@@ -98,6 +98,7 @@
     "@types/chroma-js": "^2.4.0",
     "@types/chrome": "^0.0.171",
     "chroma-js": "^2.4.2",
+    "color-blend": "^4.0.0",
     "copy-webpack-plugin": "^6.4.0",
     "echarts": "^5.4.1",
     "echarts-for-react": "^3.0.2",
@@ -106,6 +107,7 @@
     "prettier": "^2.8.0",
     "react": "^16.8.0",
     "react-use-clipboard": "^1.0.0",
+    "react-window": "^1.8.8",
     "recharts": "^1.8.5",
     "style-dictionary": "^3.0.0",
     "ts-node": "^10.9.1",
@@ -127,13 +129,7 @@
     }
   },
   "platform-feature-flags": {
-    "design-system-team.dark-theme-iteration_dk1ln": {
-      "type": "boolean"
-    },
-    "platform.design-system-team.dark-iteration-confluence_e2t22": {
-      "type": "boolean"
-    },
-    "platform.design-system-team.update-border-input_ff9l1": {
+    "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
     "platform.design-system-team.space-and-shape-tokens_q5me6": {

package/report.api.md

@@ -1415,13 +1415,15 @@ interface ThemeConfig {
   // (undocumented)
   displayName: string;
   // (undocumented)
-  id: ThemeIds;
+  id: ThemeIds | ThemeOverrideIds;
+  // (undocumented)
+  override?: ThemeIds;
   // (undocumented)
   palette: Palettes;
 }
 
 // @public (undocumented)
-export const themeConfig: Record<Themes, ThemeConfig>;
+export const themeConfig: Record<ThemeOverrides | Themes, ThemeConfig>;
 
 // @public (undocumented)
 export type ThemeIds = (typeof themeIds)[number];
@@ -1456,6 +1458,20 @@ export class ThemeMutationObserver {
 // @public
 export const themeObjectToString: (themeState: Partial<ThemeState>) => string;
 
+// @public (undocumented)
+type ThemeOverrideIds = (typeof themeOverrideIds)[number];
+
+// @public
+const themeOverrideIds: readonly [
+  'light-new-input-border',
+  'dark-new-input-border',
+];
+
+// @public
+type ThemeOverrides =
+  | 'atlassian-dark-new-input-border'
+  | 'atlassian-light-new-input-border';
+
 // @public
 export type Themes =
   | 'atlassian-dark'

package/tmp/api-report-tmp.d.ts

@@ -662,13 +662,15 @@ interface ThemeConfig {
     // (undocumented)
     displayName: string;
     // (undocumented)
-    id: ThemeIds;
+    id: ThemeIds | ThemeOverrideIds;
+    // (undocumented)
+    override?: ThemeIds;
     // (undocumented)
     palette: Palettes;
 }
 
 // @public (undocumented)
-export const themeConfig: Record<Themes, ThemeConfig>;
+export const themeConfig: Record<ThemeOverrides | Themes, ThemeConfig>;
 
 // @public (undocumented)
 export type ThemeIds = (typeof themeIds)[number];
@@ -695,6 +697,15 @@ export class ThemeMutationObserver {
 // @public
 export const themeObjectToString: (themeState: Partial<ThemeState>) => string;
 
+// @public (undocumented)
+type ThemeOverrideIds = (typeof themeOverrideIds)[number];
+
+// @public
+const themeOverrideIds: readonly ["light-new-input-border", "dark-new-input-border"];
+
+// @public
+type ThemeOverrides = 'atlassian-dark-new-input-border' | 'atlassian-light-new-input-border';
+
 // @public
 export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
 

package/dist/cjs/tokens/atlassian-dark-iteration/color/accent.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    background: {
-      accent: {
-        blue: {
-          subtlest: {
-            // @ts-ignore new value for Blue1000
-            value: '#092957'
-          }
-        },
-        red: {
-          subtlest: {
-            // @ts-ignore new value for Red1000
-            value: '#4F1C16'
-          }
-        },
-        orange: {
-          subtlest: {
-            // @ts-ignore new value for Orange1000
-            value: '#4A2B0F'
-          }
-        },
-        yellow: {
-          subtlest: {
-            // @ts-ignore new value for Yellow1000
-            value: '#3F3102'
-          }
-        },
-        green: {
-          subtlest: {
-            // @ts-ignore new value for Green1000
-            value: '#143C2B'
-          }
-        },
-        purple: {
-          subtlest: {
-            // @ts-ignore new value for Purple1000
-            value: '#2B2451'
-          }
-        },
-        teal: {
-          subtlest: {
-            // @ts-ignore new value for Teal1000
-            value: '#15373B'
-          }
-        },
-        magenta: {
-          subtlest: {
-            // @ts-ignore new value for Magenta1000
-            value: '#421F34'
-          }
-        },
-        gray: {
-          bolder: {
-            // @ts-ignore new value for DarkNeautral700
-            value: '#8C9BAB'
-          }
-        }
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/background.js

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    blanket: {
-      // @ts-ignore DarkNeutral-100 at 60% not currently available
-      '[default]': {
-        value: '#10121499'
-      }
-    },
-    background: {
-      input: {
-        '[default]': {
-          value: 'DarkNeutral200'
-        },
-        hovered: {
-          // @ts-ignore DarkNeutral250 not currently available
-          value: '#282E33'
-        },
-        pressed: {
-          value: 'DarkNeutral200'
-        }
-      },
-      selected: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Blue1000
-            value: '#092957'
-          }
-        }
-      },
-      danger: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Red1000
-            value: '#4F1C16'
-          }
-        }
-      },
-      warning: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Yellow1000
-            value: '#3F3102'
-          }
-        }
-      },
-      success: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Green1000
-            value: '#143C2B'
-          }
-        }
-      },
-      discovery: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Purple1000
-            value: '#2B2451'
-          }
-        }
-      },
-      information: {
-        '[default]': {
-          '[default]': {
-            // @ts-ignore new value for Blue1000
-            value: '#092957'
-          }
-        }
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/chart.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    chart: {
-      neutral: {
-        hovered: {
-          // @ts-ignore new value for DarkNeautral700
-          value: '#8C9BAB'
-        }
-      },
-      gray: {
-        bold: {
-          hovered: {
-            // @ts-ignore new value for DarkNeautral700
-            value: '#8C9BAB'
-          }
-        },
-        bolder: {
-          '[default]': {
-            // @ts-ignore new value for DarkNeautral700
-            value: '#8C9BAB'
-          }
-        }
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;