@atlaskit/tokens 0.10.6 → 0.10.7

package/dist/cjs/artifacts/tokens-raw/atlassian-light.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::7cdaec19ecd5c921bc01bf32e95ed909>>
+ * @codegen <<SignedSource::9b6960398363032e220473a356d04712>>
  * @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": "#44546F",
+  "filePath": "src/tokens/atlassian-light/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": "N800"
+  },
+  "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": "#172B4D",
+  "filePath": "src/tokens/atlassian-light/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": "N1000"
+  },
+  "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": "#758195",
+  "filePath": "src/tokens/atlassian-light/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": "N600"
+  },
+  "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": "#758195",
+  "filePath": "src/tokens/atlassian-light/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": "N600"
+  },
+  "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": "#CCE0FF",
   "filePath": "src/tokens/atlassian-light/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": "B200"
   },
@@ -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": "#579DFF",
   "filePath": "src/tokens/atlassian-light/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": "B400"
   },
@@ -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": "#CCE0FF",
   "filePath": "src/tokens/atlassian-light/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": "B200"
   },
@@ -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": "#F1F2F4",
+  "filePath": "src/tokens/atlassian-light/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": "N200"
+  },
+  "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": "#DCDFE4",
+  "filePath": "src/tokens/atlassian-light/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": "N300"
+  },
+  "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": "#8993A5",
+  "filePath": "src/tokens/atlassian-light/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": "N500"
+  },
+  "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": "#626F86",
+  "filePath": "src/tokens/atlassian-light/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": "N700"
+  },
+  "name": "color.background.accent.gray.bolder",
+  "path": ["color", "background", "accent", "gray", "bolder"]
 }, {
   "attributes": {
     "group": "paint",

package/dist/cjs/get-token.js

@@ -14,7 +14,7 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.10.6";
+var version = "0.10.7";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

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

@@ -71,6 +71,14 @@ var color = {
           bolder: {
             value: 'M200'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'DN800'
+          },
+          bolder: {
+            value: 'DN1000'
+          }
         }
       }
     },
@@ -99,6 +107,9 @@ var color = {
         },
         magenta: {
           value: 'M500'
+        },
+        gray: {
+          value: 'DN600'
         }
       }
     },
@@ -127,6 +138,9 @@ var color = {
         },
         magenta: {
           value: 'M500'
+        },
+        gray: {
+          value: 'DN600'
         }
       }
     },
@@ -243,6 +257,20 @@ var color = {
           bolder: {
             value: 'M400'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'DN300'
+          },
+          subtler: {
+            value: 'DN400'
+          },
+          subtle: {
+            value: 'DN500'
+          },
+          bolder: {
+            value: 'DN700'
+          }
         }
       }
     }

package/dist/cjs/tokens/atlassian-light/color/accent.js

@@ -71,6 +71,14 @@ var color = {
           bolder: {
             value: 'M900'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'N800'
+          },
+          bolder: {
+            value: 'N1000'
+          }
         }
       }
     },
@@ -99,6 +107,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -127,6 +138,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -243,6 +257,20 @@ var color = {
           bolder: {
             value: 'M700'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'N200'
+          },
+          subtler: {
+            value: 'N300'
+          },
+          subtle: {
+            value: 'N500'
+          },
+          bolder: {
+            value: 'N700'
+          }
         }
       }
     }

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

@@ -151,6 +151,24 @@ var 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.'
+            }
+          }
         }
       }
     },
@@ -219,6 +237,14 @@ var 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.'
+          }
         }
       }
     },
@@ -287,6 +313,14 @@ var 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.'
+          }
         }
       }
     },
@@ -306,7 +340,7 @@ var 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: {
@@ -314,7 +348,7 @@ var 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: {
@@ -563,6 +597,40 @@ var 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/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.6",
+	"version": "0.10.7",
 	"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::a819b31f00d394be417445acd67bd024>>
  * @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,6 +74,7 @@ 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.inverse': '#FFFFFF',
   'color.border.focused': '#388BFF',
@@ -133,6 +137,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::b251fc1793ba7f689b4c3707310c1556>>
  * @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,6 +71,7 @@ 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.inverse': '--ds-border-inverse',
   'color.border.focused': '--ds-border-focused',
@@ -130,6 +134,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',