@atlaskit/tokens 1.6.0 → 1.8.0

package/dist/esm/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2246b2d7c94a1fe562f7860f3b40764b>>
+ * @codegen <<SignedSource::148c69092f499e3fd244297f7a130fbf>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -25,6 +25,50 @@ var tokens = [{
   "name": "color.text.[default]",
   "path": ["color", "text", "[default]"],
   "cleanName": "color.text"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color."
+  },
+  "value": "#4C6B1F",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color."
+    },
+    "value": "Lime800"
+  },
+  "name": "color.text.accent.lime.[default]",
+  "path": ["color", "text", "accent", "lime", "[default]"],
+  "cleanName": "color.text.accent.lime"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.7.0",
+    "description": "Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color."
+  },
+  "value": "#37471F",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.7.0",
+      "description": "Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color."
+    },
+    "value": "Lime900"
+  },
+  "name": "color.text.accent.lime.bolder",
+  "path": ["color", "text", "accent", "lime", "bolder"],
+  "cleanName": "color.text.accent.lime.bolder"
 }, {
   "attributes": {
     "group": "paint",
@@ -751,6 +795,28 @@ var tokens = [{
   "name": "color.icon.[default]",
   "path": ["color", "icon", "[default]"],
   "cleanName": "color.icon"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
+  },
+  "value": "#6A9A23",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
+    },
+    "value": "Lime600"
+  },
+  "name": "color.icon.accent.lime",
+  "path": ["color", "icon", "accent", "lime"],
+  "cleanName": "color.icon.accent.lime"
 }, {
   "attributes": {
     "group": "paint",
@@ -1213,6 +1279,28 @@ var tokens = [{
   "name": "color.border.[default]",
   "path": ["color", "border", "[default]"],
   "cleanName": "color.border"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for lime borders on non-bold backgrounds when there is no meaning tied to the color."
+  },
+  "value": "#6A9A23",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for lime borders on non-bold backgrounds when there is no meaning tied to the color."
+    },
+    "value": "Lime600"
+  },
+  "name": "color.border.accent.lime",
+  "path": ["color", "border", "accent", "lime"],
+  "cleanName": "color.border.accent.lime"
 }, {
   "attributes": {
     "group": "paint",
@@ -1675,6 +1763,94 @@ var tokens = [{
   "name": "color.border.bold",
   "path": ["color", "border", "bold"],
   "cleanName": "color.border.bold"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
+  },
+  "value": "#EEFBDA",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
+    },
+    "value": "Lime100"
+  },
+  "name": "color.background.accent.lime.subtlest",
+  "path": ["color", "background", "accent", "lime", "subtlest"],
+  "cleanName": "color.background.accent.lime.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for for backgrounds when there is no meaning tied to the color, such as colored tags."
+  },
+  "value": "#D3F1A7",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for for backgrounds when there is no meaning tied to the color, such as colored tags."
+    },
+    "value": "Lime200"
+  },
+  "name": "color.background.accent.lime.subtler",
+  "path": ["color", "background", "accent", "lime", "subtler"],
+  "cleanName": "color.background.accent.lime.subtler"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags."
+  },
+  "value": "#94C748",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags."
+    },
+    "value": "Lime400"
+  },
+  "name": "color.background.accent.lime.subtle",
+  "path": ["color", "background", "accent", "lime", "subtle"],
+  "cleanName": "color.background.accent.lime.subtle"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.6.0",
+    "description": "Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
+  },
+  "value": "#5B7F24",
+  "filePath": "src/tokens/atlassian-light/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.6.0",
+      "description": "Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
+    },
+    "value": "Lime700"
+  },
+  "name": "color.background.accent.lime.bolder",
+  "path": ["color", "background", "accent", "lime", "bolder"],
+  "cleanName": "color.background.accent.lime.bolder"
 }, {
   "attributes": {
     "group": "paint",
@@ -4183,6 +4359,138 @@ var tokens = [{
   "name": "color.chart.categorical.8.hovered",
   "path": ["color", "chart", "categorical", "8", "hovered"],
   "cleanName": "color.chart.categorical.8.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "For data visualisation only."
+  },
+  "value": "#6A9A23",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "For data visualisation only."
+    },
+    "value": "Lime600"
+  },
+  "name": "color.chart.lime.bold.[default]",
+  "path": ["color", "chart", "lime", "bold", "[default]"],
+  "cleanName": "color.chart.lime.bold"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "Hovered state of color.chart.lime.bold."
+  },
+  "value": "#5B7F24",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "Hovered state of color.chart.lime.bold."
+    },
+    "value": "Lime700"
+  },
+  "name": "color.chart.lime.bold.hovered",
+  "path": ["color", "chart", "lime", "bold", "hovered"],
+  "cleanName": "color.chart.lime.bold.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "For data visualisation only."
+  },
+  "value": "#5B7F24",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "For data visualisation only."
+    },
+    "value": "Lime700"
+  },
+  "name": "color.chart.lime.bolder.[default]",
+  "path": ["color", "chart", "lime", "bolder", "[default]"],
+  "cleanName": "color.chart.lime.bolder"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "Hovered state of color.chart.lime.bolder."
+  },
+  "value": "#4C6B1F",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "Hovered state of color.chart.lime.bolder."
+    },
+    "value": "Lime800"
+  },
+  "name": "color.chart.lime.bolder.hovered",
+  "path": ["color", "chart", "lime", "bolder", "hovered"],
+  "cleanName": "color.chart.lime.bolder.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "For data visualisation only."
+  },
+  "value": "#4C6B1F",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "For data visualisation only."
+    },
+    "value": "Lime800"
+  },
+  "name": "color.chart.lime.boldest.[default]",
+  "path": ["color", "chart", "lime", "boldest", "[default]"],
+  "cleanName": "color.chart.lime.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.13.3",
+    "description": "Hovered state of color.chart.lime.boldest."
+  },
+  "value": "#37471F",
+  "filePath": "src/tokens/atlassian-light/color/chart.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.13.3",
+      "description": "Hovered state of color.chart.lime.boldest."
+    },
+    "value": "Lime900"
+  },
+  "name": "color.chart.lime.boldest.hovered",
+  "path": ["color", "chart", "lime", "boldest", "hovered"],
+  "cleanName": "color.chart.lime.boldest.hovered"
 }, {
   "attributes": {
     "group": "paint",

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.6.0";
+var version = "1.8.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ 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 = "1.6.0";
+var version = "1.8.0";
 /**
  * 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.

package/dist/esm/palettes/palette.js

@@ -579,6 +579,76 @@ var palette = {
           category: 'magenta'
         }
       },
+      Lime100: {
+        value: '#EEFBDA',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime200: {
+        value: '#D3F1A7',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime300: {
+        value: '#B3DF72',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime400: {
+        value: '#94C748',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime500: {
+        value: '#82B536',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime600: {
+        value: '#6A9A23',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime700: {
+        value: '#5B7F24',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime800: {
+        value: '#4C6B1F',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime900: {
+        value: '#37471F',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
+      Lime1000: {
+        value: '#2A3818',
+        attributes: {
+          group: 'palette',
+          category: 'lime'
+        }
+      },
       'DarkNeutral-100': {
         value: '#101214',
         attributes: {

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

@@ -39,10 +39,11 @@ var getThemePreferences = function getThemePreferences(themeState) {
   var colorMode = themeState.colorMode,
     dark = themeState.dark,
     light = themeState.light,
+    shape = themeState.shape,
     spacing = themeState.spacing,
     typography = themeState.typography;
   var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [spacing, typography].forEach(function (themeId) {
+  [shape, spacing, typography].forEach(function (themeId) {
     if (themeId) {
       themePreferences.push(themeId);
     }
@@ -50,6 +51,16 @@ var getThemePreferences = function getThemePreferences(themeState) {
   if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
     themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
   }
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    if (!themePreferences.includes('shape')) {
+      themePreferences.push('shape');
+    }
+    if (!themePreferences.includes('spacing')) {
+      themePreferences.push('spacing');
+    }
+  }
   return _toConsumableArray(new Set(themePreferences));
 };
 
@@ -60,6 +71,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -188,6 +200,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -203,19 +216,19 @@ export var getThemeStyles = /*#__PURE__*/function () {
       dark,
       _ref7$light,
       light,
+      _ref7$shape,
+      shape,
       _ref7$spacing,
       spacing,
       _ref7$typography,
       typography,
-      _ref7$shape,
-      shape,
       themePreferences,
       results,
       _args4 = arguments;
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape;
+          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
@@ -313,10 +326,21 @@ export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   var themePreferences = {
     dark: dark,
     light: light,
+    shape: shape,
     spacing: spacing,
-    typography: typography,
-    shape: shape
+    typography: typography
   };
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark: dark,
+      light: light,
+      shape: 'shape',
+      spacing: 'spacing',
+      typography: typography
+    };
+  }
   var themeAttribute = themeObjectToString(themePreferences);
   return _ref10 = {}, _defineProperty(_ref10, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_ref10, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
 };

package/dist/esm/tokens/atlassian-dark/color/accent.js

@@ -66,6 +66,14 @@ var color = {
             value: 'Magenta200'
           }
         },
+        lime: {
+          '[default]': {
+            value: 'Lime300'
+          },
+          bolder: {
+            value: 'Lime200'
+          }
+        },
         gray: {
           '[default]': {
             value: 'DarkNeutral800'
@@ -102,6 +110,9 @@ var color = {
         magenta: {
           value: 'Magenta500'
         },
+        lime: {
+          value: 'Lime500'
+        },
         gray: {
           value: 'DarkNeutral600'
         }
@@ -133,6 +144,9 @@ var color = {
         magenta: {
           value: 'Magenta500'
         },
+        lime: {
+          value: 'Lime500'
+        },
         gray: {
           value: 'DarkNeutral600'
         }
@@ -252,6 +266,20 @@ var color = {
             value: 'Magenta400'
           }
         },
+        lime: {
+          subtlest: {
+            value: 'Lime1000'
+          },
+          subtler: {
+            value: 'Lime900'
+          },
+          subtle: {
+            value: 'Lime800'
+          },
+          bolder: {
+            value: 'Lime400'
+          }
+        },
         gray: {
           subtlest: {
             value: 'DarkNeutral300'

package/dist/esm/tokens/atlassian-dark/color/chart.js

@@ -381,6 +381,32 @@ var color = {
           }
         }
       },
+      lime: {
+        bold: {
+          '[default]': {
+            value: 'Teal500'
+          },
+          hovered: {
+            value: 'Teal400'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Teal400'
+          },
+          hovered: {
+            value: 'Teal300'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Teal300'
+          },
+          hovered: {
+            value: 'Teal200'
+          }
+        }
+      },
       gray: {
         bold: {
           '[default]': {

package/dist/esm/tokens/atlassian-legacy-dark/color/accent.js

@@ -70,6 +70,16 @@ var color = {
             value: '#FDD0EC'
           }
         },
+        lime: {
+          // @ts-expect-error
+          '[default]': {
+            value: '#4C6B1F'
+          },
+          // @ts-expect-error
+          bolder: {
+            value: '#37471F'
+          }
+        },
         gray: {
           '[default]': {
             value: 'DN300'
@@ -108,6 +118,10 @@ var color = {
         magenta: {
           value: '#DA62AC'
         },
+        // @ts-expect-error
+        lime: {
+          value: '#6A9A23'
+        },
         gray: {
           value: 'DN600'
         }
@@ -141,6 +155,10 @@ var color = {
         magenta: {
           value: '#DA62AC'
         },
+        // @ts-expect-error
+        lime: {
+          value: '#6A9A23'
+        },
         gray: {
           value: 'DN600'
         }
@@ -268,6 +286,24 @@ var color = {
             value: '#E774BB'
           }
         },
+        lime: {
+          // @ts-expect-error
+          subtlest: {
+            value: '#EEFBDA'
+          },
+          // @ts-expect-error
+          subtler: {
+            value: '#D3F1A7'
+          },
+          // @ts-expect-error
+          subtle: {
+            value: '#94C748'
+          },
+          // @ts-expect-error
+          bolder: {
+            value: '#5B7F24'
+          }
+        },
         gray: {
           subtlest: {
             value: 'DN300'