@atlaskit/tokens 0.10.6 → 0.10.9

package/dist/esm/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7cdaec19ecd5c921bc01bf32e95ed909>>
+ * @codegen <<SignedSource::27eae6ae1ffaceb474ba5af373b377f1>>
  * @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": "#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",
@@ -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": "#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",
@@ -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": "#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",
@@ -1410,6 +1494,27 @@ var 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": "#758195",
+  "filePath": "src/tokens/atlassian-light/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": "N600"
+  },
+  "name": "color.border.bold",
+  "path": ["color", "border", "bold"]
 }, {
   "attributes": {
     "group": "paint",
@@ -1721,7 +1826,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",
@@ -1731,7 +1836,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"
   },
@@ -1742,7 +1847,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",
@@ -1752,7 +1857,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"
   },
@@ -1787,7 +1892,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",
@@ -1800,7 +1905,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"
   },
@@ -2799,6 +2904,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/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "0.10.6";
+var version = "0.10.9";
 
 function token(path, fallback) {
   var token = tokens[path];

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

@@ -65,6 +65,14 @@ var color = {
           bolder: {
             value: 'M200'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'DN800'
+          },
+          bolder: {
+            value: 'DN1000'
+          }
         }
       }
     },
@@ -93,6 +101,9 @@ var color = {
         },
         magenta: {
           value: 'M500'
+        },
+        gray: {
+          value: 'DN600'
         }
       }
     },
@@ -121,6 +132,9 @@ var color = {
         },
         magenta: {
           value: 'M500'
+        },
+        gray: {
+          value: 'DN600'
         }
       }
     },
@@ -237,6 +251,20 @@ var color = {
           bolder: {
             value: 'M400'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'DN300'
+          },
+          subtler: {
+            value: 'DN400'
+          },
+          subtle: {
+            value: 'DN500'
+          },
+          bolder: {
+            value: 'DN700'
+          }
         }
       }
     }

package/dist/esm/tokens/atlassian-dark/color/border.js

@@ -4,6 +4,9 @@ var color = {
       '[default]': {
         value: 'DN300A'
       },
+      bold: {
+        value: 'DN600'
+      },
       inverse: {
         value: 'DN0'
       },

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

@@ -65,6 +65,14 @@ var color = {
           bolder: {
             value: 'M900'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'N800'
+          },
+          bolder: {
+            value: 'N1000'
+          }
         }
       }
     },
@@ -93,6 +101,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -121,6 +132,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -237,6 +251,20 @@ var color = {
           bolder: {
             value: 'M700'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'N200'
+          },
+          subtler: {
+            value: 'N300'
+          },
+          subtle: {
+            value: 'N500'
+          },
+          bolder: {
+            value: 'N700'
+          }
         }
       }
     }

package/dist/esm/tokens/atlassian-light/color/border.js

@@ -4,6 +4,9 @@ var color = {
       '[default]': {
         value: 'N300A'
       },
+      bold: {
+        value: 'N600'
+      },
       inverse: {
         value: 'N0'
       },

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

@@ -145,6 +145,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.'
+            }
+          }
         }
       }
     },
@@ -213,6 +231,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.'
+          }
         }
       }
     },
@@ -281,6 +307,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.'
+          }
         }
       }
     },
@@ -300,7 +334,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: {
@@ -308,7 +342,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: {
@@ -557,6 +591,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/esm/tokens/default/color/border.js

@@ -9,6 +9,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/esm/tokens/default/deprecated/deprecated.js

@@ -156,7 +156,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/esm/version.json

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

package/dist/types/artifacts/token-default-values.d.ts

@@ -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
  */
 declare const defaultTokenValues: {
@@ -23,6 +23,8 @@ declare const defaultTokenValues: {
     readonly 'color.text.accent.teal.bolder': "#1D474C";
     readonly 'color.text.accent.magenta': "#943D73";
     readonly 'color.text.accent.magenta.bolder': "#50253F";
+    readonly 'color.text.accent.gray': "#44546F";
+    readonly 'color.text.accent.gray.bolder': "#172B4D";
     readonly 'color.text': "#172B4D";
     readonly 'color.text.subtle': "#44546F";
     readonly 'color.text.subtlest': "#626F86";
@@ -51,6 +53,7 @@ declare const defaultTokenValues: {
     readonly 'color.icon.accent.purple': "#8270DB";
     readonly 'color.icon.accent.teal': "#1D9AAA";
     readonly 'color.icon.accent.magenta': "#CD519D";
+    readonly 'color.icon.accent.gray': "#758195";
     readonly 'color.icon': "#44546F";
     readonly 'color.icon.subtle': "#626F86";
     readonly 'color.icon.inverse': "#FFFFFF";
@@ -71,7 +74,9 @@ declare const defaultTokenValues: {
     readonly 'color.border.accent.purple': "#8270DB";
     readonly 'color.border.accent.teal': "#1D9AAA";
     readonly 'color.border.accent.magenta': "#CD519D";
+    readonly 'color.border.accent.gray': "#758195";
     readonly 'color.border': "#091E4224";
+    readonly 'color.border.bold': "#758195";
     readonly 'color.border.inverse': "#FFFFFF";
     readonly 'color.border.focused': "#388BFF";
     readonly 'color.border.input': "#091E4224";
@@ -133,6 +138,10 @@ declare const defaultTokenValues: {
     readonly 'color.background.accent.magenta.bolder': "#AE4787";
     readonly 'color.background.accent.magenta': "#FDD0EC";
     readonly 'color.background.accent.magenta.bold': "#E774BB";
+    readonly 'color.background.accent.gray.subtlest': "#F1F2F4";
+    readonly 'color.background.accent.gray.subtler': "#DCDFE4";
+    readonly 'color.background.accent.gray.subtle': "#8993A5";
+    readonly 'color.background.accent.gray.bolder': "#626F86";
     readonly 'color.background.disabled': "#091E420F";
     readonly 'color.background.inverse.subtle': "#00000029";
     readonly 'color.background.inverse.subtle.hovered': "#0000003D";