@atlaskit/tokens 0.10.6 → 0.10.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tokens
 
+## 0.10.7
+
+### Patch Changes
+
+- [`cb8723a7974`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8723a7974) - Introduces a new set of neutral accent tokens:
+
+  - `color.background.accent.gray.bolder`
+  - `color.background.accent.gray.subtle`
+  - `color.background.accent.gray.subtler`
+  - `color.background.accent.gray.subtlest`
+  - `color.border.accent.gray`
+  - `color.icon.accent.gray`
+  - `color.text.accent.gray`
+  - `color.text.accent.gray.bolder`
+
 ## 0.10.6
 
 ### Patch Changes

package/css/atlassian-dark.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::72839d415565553fa9a4a239d93dc7e1>>
+ * @codegen <<SignedSource::72c4c7f8d16e9e200a1e7d4b601e83f8>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="dark"] {
@@ -20,6 +20,8 @@ html[data-theme="dark"] {
   --ds-text-accent-teal-bolder: #C1F0F5;
   --ds-text-accent-magenta: #F797D2;
   --ds-text-accent-magenta-bolder: #FDD0EC;
+  --ds-text-accent-gray: #9FADBC;
+  --ds-text-accent-gray-bolder: #C7D1DB;
   --ds-text: #C7D1DB;
   --ds-text-subtle: #9FADBC;
   --ds-text-subtlest: #8696A7;
@@ -48,6 +50,7 @@ html[data-theme="dark"] {
   --ds-icon-accent-purple: #8F7EE7;
   --ds-icon-accent-teal: #37B4C3;
   --ds-icon-accent-magenta: #DA62AC;
+  --ds-icon-accent-gray: #738496;
   --ds-icon: #9FADBC;
   --ds-icon-subtle: #8696A7;
   --ds-icon-inverse: #161A1D;
@@ -68,6 +71,7 @@ html[data-theme="dark"] {
   --ds-border-accent-purple: #8F7EE7;
   --ds-border-accent-teal: #37B4C3;
   --ds-border-accent-magenta: #DA62AC;
+  --ds-border-accent-gray: #738496;
   --ds-border: #A6C5E229;
   --ds-border-inverse: #161A1D;
   --ds-border-focused: #85B8FF;
@@ -130,6 +134,10 @@ html[data-theme="dark"] {
   --ds-background-accent-magenta-bolder: #E774BB;
   --ds-background-accent-magenta: #50253F;
   --ds-background-accent-magenta-bold: #AE4787;
+  --ds-background-accent-gray-subtlest: #2C333A;
+  --ds-background-accent-gray-subtler: #454F59;
+  --ds-background-accent-gray-subtle: #5C6C7A;
+  --ds-background-accent-gray-bolder: #8696A7;
   --ds-background-disabled: #A1BDD914;
   --ds-background-inverse-subtle: #FFFFFF29;
   --ds-background-inverse-subtle-hovered: #FFFFFF3D;

package/css/atlassian-light.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2e7937ac84595597ac1147c208f1d259>>
+ * @codegen <<SignedSource::36363c01cdfd5db57a96f4475f9a6a82>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="light"] {
@@ -20,6 +20,8 @@ html[data-theme="light"] {
   --ds-text-accent-teal-bolder: #1D474C;
   --ds-text-accent-magenta: #943D73;
   --ds-text-accent-magenta-bolder: #50253F;
+  --ds-text-accent-gray: #44546F;
+  --ds-text-accent-gray-bolder: #172B4D;
   --ds-text: #172B4D;
   --ds-text-subtle: #44546F;
   --ds-text-subtlest: #626F86;
@@ -48,6 +50,7 @@ html[data-theme="light"] {
   --ds-icon-accent-purple: #8270DB;
   --ds-icon-accent-teal: #1D9AAA;
   --ds-icon-accent-magenta: #CD519D;
+  --ds-icon-accent-gray: #758195;
   --ds-icon: #44546F;
   --ds-icon-subtle: #626F86;
   --ds-icon-inverse: #FFFFFF;
@@ -68,6 +71,7 @@ html[data-theme="light"] {
   --ds-border-accent-purple: #8270DB;
   --ds-border-accent-teal: #1D9AAA;
   --ds-border-accent-magenta: #CD519D;
+  --ds-border-accent-gray: #758195;
   --ds-border: #091E4224;
   --ds-border-inverse: #FFFFFF;
   --ds-border-focused: #388BFF;
@@ -130,6 +134,10 @@ html[data-theme="light"] {
   --ds-background-accent-magenta-bolder: #AE4787;
   --ds-background-accent-magenta: #FDD0EC;
   --ds-background-accent-magenta-bold: #E774BB;
+  --ds-background-accent-gray-subtlest: #F1F2F4;
+  --ds-background-accent-gray-subtler: #DCDFE4;
+  --ds-background-accent-gray-subtle: #8993A5;
+  --ds-background-accent-gray-bolder: #626F86;
   --ds-background-disabled: #091E420F;
   --ds-background-inverse-subtle: #00000029;
   --ds-background-inverse-subtle-hovered: #0000003D;

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

@@ -10,7 +10,7 @@ exports.default = void 0;
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -30,6 +30,8 @@ var defaultTokenValues = {
   'color.text.accent.teal.bolder': '#1D474C',
   'color.text.accent.magenta': '#943D73',
   'color.text.accent.magenta.bolder': '#50253F',
+  'color.text.accent.gray': '#44546F',
+  'color.text.accent.gray.bolder': '#172B4D',
   'color.text': '#172B4D',
   'color.text.subtle': '#44546F',
   'color.text.subtlest': '#626F86',
@@ -58,6 +60,7 @@ var defaultTokenValues = {
   'color.icon.accent.purple': '#8270DB',
   'color.icon.accent.teal': '#1D9AAA',
   'color.icon.accent.magenta': '#CD519D',
+  'color.icon.accent.gray': '#758195',
   'color.icon': '#44546F',
   'color.icon.subtle': '#626F86',
   'color.icon.inverse': '#FFFFFF',
@@ -78,6 +81,7 @@ var defaultTokenValues = {
   'color.border.accent.purple': '#8270DB',
   'color.border.accent.teal': '#1D9AAA',
   'color.border.accent.magenta': '#CD519D',
+  'color.border.accent.gray': '#758195',
   'color.border': '#091E4224',
   'color.border.inverse': '#FFFFFF',
   'color.border.focused': '#388BFF',
@@ -140,6 +144,10 @@ var defaultTokenValues = {
   'color.background.accent.magenta.bolder': '#AE4787',
   'color.background.accent.magenta': '#FDD0EC',
   'color.background.accent.magenta.bold': '#E774BB',
+  'color.background.accent.gray.subtlest': '#F1F2F4',
+  'color.background.accent.gray.subtler': '#DCDFE4',
+  'color.background.accent.gray.subtle': '#8993A5',
+  'color.background.accent.gray.bolder': '#626F86',
   'color.background.disabled': '#091E420F',
   'color.background.inverse.subtle': '#00000029',
   'color.background.inverse.subtle.hovered': '#0000003D',

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegen <<SignedSource::b251fc1793ba7f689b4c3707310c1556>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -27,6 +27,8 @@ var tokens = {
   'color.text.accent.teal.bolder': '--ds-text-accent-teal-bolder',
   'color.text.accent.magenta': '--ds-text-accent-magenta',
   'color.text.accent.magenta.bolder': '--ds-text-accent-magenta-bolder',
+  'color.text.accent.gray': '--ds-text-accent-gray',
+  'color.text.accent.gray.bolder': '--ds-text-accent-gray-bolder',
   'color.text': '--ds-text',
   'color.text.subtle': '--ds-text-subtle',
   'color.text.subtlest': '--ds-text-subtlest',
@@ -55,6 +57,7 @@ var tokens = {
   'color.icon.accent.purple': '--ds-icon-accent-purple',
   'color.icon.accent.teal': '--ds-icon-accent-teal',
   'color.icon.accent.magenta': '--ds-icon-accent-magenta',
+  'color.icon.accent.gray': '--ds-icon-accent-gray',
   'color.icon': '--ds-icon',
   'color.icon.subtle': '--ds-icon-subtle',
   'color.icon.inverse': '--ds-icon-inverse',
@@ -75,6 +78,7 @@ var tokens = {
   'color.border.accent.purple': '--ds-border-accent-purple',
   'color.border.accent.teal': '--ds-border-accent-teal',
   'color.border.accent.magenta': '--ds-border-accent-magenta',
+  'color.border.accent.gray': '--ds-border-accent-gray',
   'color.border': '--ds-border',
   'color.border.inverse': '--ds-border-inverse',
   'color.border.focused': '--ds-border-focused',
@@ -137,6 +141,10 @@ var tokens = {
   'color.background.accent.magenta.bolder': '--ds-background-accent-magenta-bolder',
   'color.background.accent.magenta': '--ds-background-accent-magenta',
   'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',
+  'color.background.accent.gray.subtlest': '--ds-background-accent-gray-subtlest',
+  'color.background.accent.gray.subtler': '--ds-background-accent-gray-subtler',
+  'color.background.accent.gray.subtle': '--ds-background-accent-gray-subtle',
+  'color.background.accent.gray.bolder': '--ds-background-accent-gray-bolder',
   'color.background.disabled': '--ds-background-disabled',
   'color.background.inverse.subtle': '--ds-background-inverse-subtle',
   'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2790b3e5387d05c20675eb77bb4ec986>>
+ * @codegen <<SignedSource::3354689a803bcf6799054d3faa65df85>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -346,6 +346,48 @@ var tokens = [{
   },
   "name": "color.text.accent.magenta.bolder",
   "path": ["color", "text", "accent", "magenta", "bolder"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.5",
+    "description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
+  },
+  "value": "#9FADBC",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.5",
+      "description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
+    },
+    "value": "DN800"
+  },
+  "name": "color.text.accent.gray.[default]",
+  "path": ["color", "text", "accent", "gray", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.5",
+    "description": "Use for text and icons on gray subtle accent backgrounds."
+  },
+  "value": "#C7D1DB",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.5",
+      "description": "Use for text and icons on gray subtle accent backgrounds."
+    },
+    "value": "DN1000"
+  },
+  "name": "color.text.accent.gray.bolder",
+  "path": ["color", "text", "accent", "gray", "bolder"]
 }, {
   "attributes": {
     "group": "paint",
@@ -976,6 +1018,27 @@ var tokens = [{
   },
   "name": "color.icon.accent.magenta",
   "path": ["color", "icon", "accent", "magenta"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.5",
+    "description": "Use for icons on non-bold gray accent backgrounds, such as file type icons."
+  },
+  "value": "#738496",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.5",
+      "description": "Use for icons on non-bold gray accent backgrounds, such as file type icons."
+    },
+    "value": "DN600"
+  },
+  "name": "color.icon.accent.gray",
+  "path": ["color", "icon", "accent", "gray"]
 }, {
   "attributes": {
     "group": "paint",
@@ -1396,6 +1459,27 @@ var tokens = [{
   },
   "name": "color.border.accent.magenta",
   "path": ["color", "border", "accent", "magenta"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.5",
+    "description": "Use for borders on non-bold gray accent backgrounds."
+  },
+  "value": "#738496",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.5",
+      "description": "Use for borders on non-bold gray accent backgrounds."
+    },
+    "value": "DN600"
+  },
+  "name": "color.border.accent.gray",
+  "path": ["color", "border", "accent", "gray"]
 }, {
   "attributes": {
     "group": "paint",
@@ -1728,7 +1812,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.7.0",
-    "description": "Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+    "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
   },
   "value": "#09326C",
   "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
@@ -1738,7 +1822,7 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.7.0",
-      "description": "Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+      "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
     },
     "value": "B900"
   },
@@ -1749,7 +1833,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.7.0",
-    "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+    "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
   },
   "value": "#0055CC",
   "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
@@ -1759,7 +1843,7 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.7.0",
-      "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+      "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
     },
     "value": "B800"
   },
@@ -1794,7 +1878,7 @@ var tokens = [{
     "deprecated": "0.7.0",
     "deleted": "0.8.0",
     "replacement": "color.background.accent.blue.subtler",
-    "description": "Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+    "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
   },
   "value": "#09326C",
   "filePath": "src/tokens/atlassian-dark/deprecated/deprecated.tsx",
@@ -1807,7 +1891,7 @@ var tokens = [{
       "deprecated": "0.7.0",
       "deleted": "0.8.0",
       "replacement": "color.background.accent.blue.subtler",
-      "description": "Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags."
+      "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
     },
     "value": "B900"
   },
@@ -2806,6 +2890,90 @@ var tokens = [{
   },
   "name": "color.background.accent.magenta.bold",
   "path": ["color", "background", "accent", "magenta", "bold"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.7.0",
+    "description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
+  },
+  "value": "#2C333A",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.7.0",
+      "description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
+    },
+    "value": "DN300"
+  },
+  "name": "color.background.accent.gray.subtlest",
+  "path": ["color", "background", "accent", "gray", "subtlest"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.7.0",
+    "description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
+  },
+  "value": "#454F59",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.7.0",
+      "description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
+    },
+    "value": "DN400"
+  },
+  "name": "color.background.accent.gray.subtler",
+  "path": ["color", "background", "accent", "gray", "subtler"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.7.0",
+    "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
+  },
+  "value": "#5C6C7A",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.7.0",
+      "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
+    },
+    "value": "DN500"
+  },
+  "name": "color.background.accent.gray.subtle",
+  "path": ["color", "background", "accent", "gray", "subtle"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "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",
+  "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "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": "DN700"
+  },
+  "name": "color.background.accent.gray.bolder",
+  "path": ["color", "background", "accent", "gray", "bolder"]
 }, {
   "attributes": {
     "group": "paint",