@atlaskit/tokens 1.6.0 → 1.8.0

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * 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 = [{
@@ -31,6 +31,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",
@@ -757,6 +801,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",
@@ -1219,6 +1285,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",
@@ -1681,6 +1769,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",
@@ -4189,6 +4365,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/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./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/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./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/cjs/palettes/palette.js

@@ -585,6 +585,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/cjs/set-global-theme.js

@@ -45,10 +45,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);
     }
@@ -56,6 +57,16 @@ var getThemePreferences = function getThemePreferences(themeState) {
   if ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.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 (0, _toConsumableArray2.default)(new Set(themePreferences));
 };
 
@@ -66,6 +77,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.
  *
@@ -194,6 +206,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.
  *
@@ -209,19 +222,19 @@ 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 _regenerator.default.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,
@@ -320,10 +333,21 @@ 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 ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark: dark,
+      light: light,
+      shape: 'shape',
+      spacing: 'spacing',
+      typography: typography
+    };
+  }
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
   return _ref10 = {}, (0, _defineProperty2.default)(_ref10, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref10, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
 };

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

@@ -72,6 +72,14 @@ var color = {
             value: 'Magenta200'
           }
         },
+        lime: {
+          '[default]': {
+            value: 'Lime300'
+          },
+          bolder: {
+            value: 'Lime200'
+          }
+        },
         gray: {
           '[default]': {
             value: 'DarkNeutral800'
@@ -108,6 +116,9 @@ var color = {
         magenta: {
           value: 'Magenta500'
         },
+        lime: {
+          value: 'Lime500'
+        },
         gray: {
           value: 'DarkNeutral600'
         }
@@ -139,6 +150,9 @@ var color = {
         magenta: {
           value: 'Magenta500'
         },
+        lime: {
+          value: 'Lime500'
+        },
         gray: {
           value: 'DarkNeutral600'
         }
@@ -258,6 +272,20 @@ var color = {
             value: 'Magenta400'
           }
         },
+        lime: {
+          subtlest: {
+            value: 'Lime1000'
+          },
+          subtler: {
+            value: 'Lime900'
+          },
+          subtle: {
+            value: 'Lime800'
+          },
+          bolder: {
+            value: 'Lime400'
+          }
+        },
         gray: {
           subtlest: {
             value: 'DarkNeutral300'

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

@@ -387,6 +387,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]': {