@atlaskit/tokens 1.12.0 → 1.13.0

package/dist/es2019/artifacts/themes/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f7875b9dcadbda9f45d61b1e4eaa3c10>>
+ * @codegen <<SignedSource::e604987b15cfe0a366b3286681388a27>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -149,9 +149,15 @@ html[data-color-mode="dark"][data-theme~="dark:dark"] {
   --ds-background-selected-bold: #579DFF;
   --ds-background-selected-bold-hovered: #85B8FF;
   --ds-background-selected-bold-pressed: #CCE0FF;
+  --ds-background-brand-subtlest: #092957;
+  --ds-background-brand-subtlest-hovered: #09326C;
+  --ds-background-brand-subtlest-pressed: #0055CC;
   --ds-background-brand-bold: #579DFF;
   --ds-background-brand-bold-hovered: #85B8FF;
   --ds-background-brand-bold-pressed: #CCE0FF;
+  --ds-background-brand-boldest: #E9F2FF;
+  --ds-background-brand-boldest-hovered: #CCE0FF;
+  --ds-background-brand-boldest-pressed: #85B8FF;
   --ds-background-danger: #4F1C16;
   --ds-background-danger-hovered: #601E16;
   --ds-background-danger-pressed: #AE2A19;

package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::14cda525a141150d5667a66bc997b8d3>>
+ * @codegen <<SignedSource::1be3f0bcebfb31cee85358d44c955235>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -149,9 +149,15 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-dark"] {
   --ds-background-selected-bold: #0052CC;
   --ds-background-selected-bold-hovered: #0065FF;
   --ds-background-selected-bold-pressed: #0747A6;
+  --ds-background-brand-subtlest: #0747A6;
+  --ds-background-brand-subtlest-hovered: #0052CC;
+  --ds-background-brand-subtlest-pressed: #0747A6;
   --ds-background-brand-bold: #0052CC;
   --ds-background-brand-bold-hovered: #0065FF;
   --ds-background-brand-bold-pressed: #0747A6;
+  --ds-background-brand-boldest: #B3D4FF;
+  --ds-background-brand-boldest-hovered: #DEEBFF;
+  --ds-background-brand-boldest-pressed: #4C9AFF;
   --ds-background-danger: #FFEBE6;
   --ds-background-danger-hovered: #FFBDAD;
   --ds-background-danger-pressed: #FF8F73;

package/dist/es2019/artifacts/themes/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b26866f21e474d3a67f6b1454ba31352>>
+ * @codegen <<SignedSource::9bf19250d90797c5238589fae51defe5>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -149,9 +149,15 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-light"] {
   --ds-background-selected-bold: #0052CC;
   --ds-background-selected-bold-hovered: #2684FF;
   --ds-background-selected-bold-pressed: #0052CC;
+  --ds-background-brand-subtlest: #B3D4FF;
+  --ds-background-brand-subtlest-hovered: #DEEBFF;
+  --ds-background-brand-subtlest-pressed: #4C9AFF;
   --ds-background-brand-bold: #0052CC;
   --ds-background-brand-bold-hovered: #0065FF;
   --ds-background-brand-bold-pressed: #0747A6;
+  --ds-background-brand-boldest: #0747A6;
+  --ds-background-brand-boldest-hovered: #0052CC;
+  --ds-background-brand-boldest-pressed: #0747A6;
   --ds-background-danger: #FFEBE6;
   --ds-background-danger-hovered: #FFBDAD;
   --ds-background-danger-pressed: #FF8F73;

package/dist/es2019/artifacts/themes/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4775571c3069bfd6624c6d9e47870342>>
+ * @codegen <<SignedSource::b43cd34188f48573ad15a23eeca733c5>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -149,9 +149,15 @@ html[data-color-mode="dark"][data-theme~="dark:light"] {
   --ds-background-selected-bold: #0C66E4;
   --ds-background-selected-bold-hovered: #0055CC;
   --ds-background-selected-bold-pressed: #09326C;
+  --ds-background-brand-subtlest: #E9F2FF;
+  --ds-background-brand-subtlest-hovered: #CCE0FF;
+  --ds-background-brand-subtlest-pressed: #85B8FF;
   --ds-background-brand-bold: #0C66E4;
   --ds-background-brand-bold-hovered: #0055CC;
   --ds-background-brand-bold-pressed: #09326C;
+  --ds-background-brand-boldest: #092957;
+  --ds-background-brand-boldest-hovered: #09326C;
+  --ds-background-brand-boldest-pressed: #0055CC;
   --ds-background-danger: #FFEDEB;
   --ds-background-danger-hovered: #FFD2CC;
   --ds-background-danger-pressed: #FF9C8F;

package/dist/es2019/artifacts/token-default-values.js

@@ -4,7 +4,7 @@
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::499f1e0d59fe76d1553081545be939f7>>
+ * @codegen <<SignedSource::cd2ec139d4552898a3fc16a50aac159c>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -150,9 +150,15 @@ const defaultTokenValues = {
   'color.background.selected.bold': '#0C66E4',
   'color.background.selected.bold.hovered': '#0055CC',
   'color.background.selected.bold.pressed': '#09326C',
+  'color.background.brand.subtlest': '#E9F2FF',
+  'color.background.brand.subtlest.hovered': '#CCE0FF',
+  'color.background.brand.subtlest.pressed': '#85B8FF',
   'color.background.brand.bold': '#0C66E4',
   'color.background.brand.bold.hovered': '#0055CC',
   'color.background.brand.bold.pressed': '#09326C',
+  'color.background.brand.boldest': '#092957',
+  'color.background.brand.boldest.hovered': '#09326C',
+  'color.background.brand.boldest.pressed': '#0055CC',
   'color.background.danger': '#FFEDEB',
   'color.background.danger.hovered': '#FFD2CC',
   'color.background.danger.pressed': '#FF9C8F',

package/dist/es2019/artifacts/token-names.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0c77b46d428791fb0288b991d64320bc>>
+ * @codegen <<SignedSource::ee9558f71e21d57dd7abb1686236b1ed>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
@@ -146,9 +146,15 @@ const tokens = {
   'color.background.selected.bold': '--ds-background-selected-bold',
   'color.background.selected.bold.hovered': '--ds-background-selected-bold-hovered',
   'color.background.selected.bold.pressed': '--ds-background-selected-bold-pressed',
+  'color.background.brand.subtlest': '--ds-background-brand-subtlest',
+  'color.background.brand.subtlest.hovered': '--ds-background-brand-subtlest-hovered',
+  'color.background.brand.subtlest.pressed': '--ds-background-brand-subtlest-pressed',
   'color.background.brand.bold': '--ds-background-brand-bold',
   'color.background.brand.bold.hovered': '--ds-background-brand-bold-hovered',
   'color.background.brand.bold.pressed': '--ds-background-brand-bold-pressed',
+  'color.background.brand.boldest': '--ds-background-brand-boldest',
+  'color.background.brand.boldest.hovered': '--ds-background-brand-boldest-hovered',
+  'color.background.brand.boldest.pressed': '--ds-background-brand-boldest-pressed',
   'color.background.danger': '--ds-background-danger',
   'color.background.danger.hovered': '--ds-background-danger-hovered',
   'color.background.danger.pressed': '--ds-background-danger-pressed',

package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ef57ce0e826f5bdada61d5bcbbfbcfcb>>
+ * @codegen <<SignedSource::10dbc24fd477fa86fa9ecfdb19000ddf>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#092957",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "Blue1000"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#09326C",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "Blue900"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#0055CC",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "Blue800"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#85B8FF",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
@@ -3164,7 +3230,7 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "Blue300"
   },
@@ -3176,7 +3242,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#CCE0FF",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
@@ -3186,13 +3252,79 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "Blue200"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#E9F2FF",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "Blue100"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#CCE0FF",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "Blue200"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#85B8FF",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "Blue300"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0752455125a2970afd988a456ef7a00b>>
+ * @codegen <<SignedSource::6601df15e45294ebfb575b1b034a2aa7>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#0052CC",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "B400"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0065FF",
   "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
@@ -3164,7 +3230,7 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "B300"
   },
@@ -3176,7 +3242,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#0747A6",
   "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
@@ -3186,13 +3252,79 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "B500"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#B3D4FF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "B75"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#DEEBFF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "B50"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#4C9AFF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "B100"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",