@atlaskit/tokens 0.10.5 → 0.10.8

package/dist/cjs/tokens/default/color/border.js

@@ -15,6 +15,14 @@ var color = {
           description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
         }
       },
+      bold: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          introduced: '0.10.8',
+          description: 'A neutral border option that passes min 3:1 contrast ratios.'
+        }
+      },
       inverse: {
         attributes: {
           group: 'paint',

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

@@ -162,7 +162,7 @@ var 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/cjs/version.json

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

package/dist/es2019/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::65fed9d3a0df2e2c1ccee929e1349bb4>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -23,6 +23,8 @@ const 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 @@ const 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,7 +74,9 @@ const 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.bold': '#758195',
   'color.border.inverse': '#FFFFFF',
   'color.border.focused': '#388BFF',
   'color.border.input': '#091E4224',
@@ -133,6 +138,10 @@ const 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/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::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegen <<SignedSource::3acc6507214a2d925fd75bce0549f0ab>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
@@ -20,6 +20,8 @@ const 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 @@ const 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,7 +71,9 @@ const 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.bold': '--ds-border-bold',
   'color.border.inverse': '--ds-border-inverse',
   'color.border.focused': '--ds-border-focused',
   'color.border.input': '--ds-border-input',
@@ -130,6 +135,10 @@ const 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/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::2790b3e5387d05c20675eb77bb4ec986>>
+ * @codegen <<SignedSource::f6554dd5fa7c18bf2250697f2e567297>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -339,6 +339,48 @@ const 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 @@ const 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 @@ const 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",
@@ -1410,6 +1494,27 @@ const tokens = [{
   },
   "name": "color.border.[default]",
   "path": ["color", "border", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.8",
+    "description": "A neutral border option that passes min 3:1 contrast ratios."
+  },
+  "value": "#738496",
+  "filePath": "src/tokens/atlassian-dark/color/border.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.8",
+      "description": "A neutral border option that passes min 3:1 contrast ratios."
+    },
+    "value": "DN600"
+  },
+  "name": "color.border.bold",
+  "path": ["color", "border", "bold"]
 }, {
   "attributes": {
     "group": "paint",
@@ -1721,7 +1826,7 @@ const 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 +1836,7 @@ const 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 +1847,7 @@ const 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 +1857,7 @@ const 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 +1892,7 @@ const 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 +1905,7 @@ const 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 +2904,90 @@ const 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",