@atlaskit/tokens 0.10.6 → 0.10.7

package/dist/es2019/tokens/default/color/accent.js

@@ -145,6 +145,24 @@ const color = {
               description: 'Use on bold magenta accent backgrounds.'
             }
           }
+        },
+        gray: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text and icons on gray subtle accent backgrounds.'
+            }
+          }
         }
       }
     },
@@ -213,6 +231,14 @@ const color = {
             introduced: '0.6.0',
             description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.'
+          }
         }
       }
     },
@@ -281,6 +307,14 @@ const color = {
             introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for borders on non-bold gray accent backgrounds.'
+          }
         }
       }
     },
@@ -300,7 +334,7 @@ const color = {
               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.'
             }
           },
           subtle: {
@@ -308,7 +342,7 @@ const color = {
               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.'
             }
           },
           bolder: {
@@ -557,6 +591,40 @@ const color = {
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
             }
           }
+        },
+        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. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
+            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.'
+            }
+          },
+          subtle: {
+            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.'
+            }
+          },
+          bolder: {
+            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.'
+            }
+          }
         }
       }
     }

package/dist/es2019/tokens/default/deprecated/deprecated.js

@@ -156,7 +156,7 @@ const color = {
               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.'
             }
           },
           bold: {

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.6",
+	"version": "0.10.7",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -23,6 +23,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',
@@ -51,6 +53,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',
@@ -71,6 +74,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',
@@ -133,6 +137,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/esm/artifacts/token-names.js

@@ -1,6 +1,6 @@
 /**
  * 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 = {
@@ -20,6 +20,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',
@@ -48,6 +50,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',
@@ -68,6 +71,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',
@@ -130,6 +134,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/esm/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::2790b3e5387d05c20675eb77bb4ec986>>
+ * @codegen <<SignedSource::3354689a803bcf6799054d3faa65df85>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -339,6 +339,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",
@@ -969,6 +1011,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",
@@ -1389,6 +1452,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",
@@ -1721,7 +1805,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",
@@ -1731,7 +1815,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"
   },
@@ -1742,7 +1826,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",
@@ -1752,7 +1836,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"
   },
@@ -1787,7 +1871,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",
@@ -1800,7 +1884,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"
   },
@@ -2799,6 +2883,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",