@atlaskit/tokens 1.6.0 → 1.8.0

package/dist/es2019/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
  */
 const tokens = [{
@@ -25,6 +25,50 @@ const 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 @@ const 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 @@ const 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 @@ const 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 @@ const 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/es2019/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.6.0";
+const 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/es2019/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';
 const name = "@atlaskit/tokens";
-const version = "1.6.0";
+const 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/es2019/palettes/palette.js

@@ -579,6 +579,76 @@ const 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/es2019/set-global-theme.js

@@ -35,11 +35,12 @@ const getThemePreferences = themeState => {
     colorMode,
     dark,
     light,
+    shape,
     spacing,
     typography
   } = themeState;
   const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [spacing, typography].forEach(themeId => {
+  [shape, spacing, typography].forEach(themeId => {
     if (themeId) {
       themePreferences.push(themeId);
     }
@@ -47,6 +48,16 @@ const getThemePreferences = themeState => {
   if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
     themePreferences.push(`${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 [...new Set(themePreferences)];
 };
 
@@ -57,6 +68,7 @@ const 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.
  *
@@ -125,6 +137,7 @@ const setGlobalTheme = async ({
  * @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.
  *
@@ -135,9 +148,9 @@ export const getThemeStyles = async ({
   colorMode = themeStateDefaults['colorMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
-  shape = themeStateDefaults['shape']
+  typography = themeStateDefaults['typography']
 } = {}) => {
   const themePreferences = getThemePreferences({
     colorMode,
@@ -195,13 +208,24 @@ export const getThemeHtmlAttrs = ({
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography']
 } = {}) => {
-  const themePreferences = {
+  let themePreferences = {
     dark,
     light,
+    shape,
     spacing,
-    typography,
-    shape
+    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,
+      light,
+      shape: 'shape',
+      spacing: 'spacing',
+      typography
+    };
+  }
   const themeAttribute = themeObjectToString(themePreferences);
   return {
     [THEME_DATA_ATTRIBUTE]: themeAttribute,

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

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

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

@@ -381,6 +381,32 @@ const 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/es2019/tokens/atlassian-legacy-dark/color/accent.js

@@ -70,6 +70,16 @@ const color = {
             value: '#FDD0EC'
           }
         },
+        lime: {
+          // @ts-expect-error
+          '[default]': {
+            value: '#4C6B1F'
+          },
+          // @ts-expect-error
+          bolder: {
+            value: '#37471F'
+          }
+        },
         gray: {
           '[default]': {
             value: 'DN300'
@@ -108,6 +118,10 @@ const color = {
         magenta: {
           value: '#DA62AC'
         },
+        // @ts-expect-error
+        lime: {
+          value: '#6A9A23'
+        },
         gray: {
           value: 'DN600'
         }
@@ -141,6 +155,10 @@ const color = {
         magenta: {
           value: '#DA62AC'
         },
+        // @ts-expect-error
+        lime: {
+          value: '#6A9A23'
+        },
         gray: {
           value: 'DN600'
         }
@@ -268,6 +286,24 @@ const 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'