@atlaskit/tokens 0.10.5 → 0.10.8

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::27eae6ae1ffaceb474ba5af373b377f1>>
  * @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",
@@ -1417,6 +1501,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",
@@ -1728,7 +1833,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 +1843,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 +1854,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 +1864,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 +1899,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 +1912,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 +2911,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/babel-plugin/plugin.js

@@ -22,75 +22,79 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function plugin() {
   return {
     visitor: {
-      CallExpression: function (_CallExpression) {
-        function CallExpression(_x, _x2) {
-          return _CallExpression.apply(this, arguments);
-        }
+      Program: {
+        enter: function enter(path, state) {
+          path.traverse({
+            CallExpression: function (_CallExpression) {
+              function CallExpression(_x) {
+                return _CallExpression.apply(this, arguments);
+              }
 
-        CallExpression.toString = function () {
-          return _CallExpression.toString();
-        };
+              CallExpression.toString = function () {
+                return _CallExpression.toString();
+              };
 
-        return CallExpression;
-      }(function (path, state) {
-        var tokenImportScope = getTokenImportScope(path);
+              return CallExpression;
+            }(function (path) {
+              var tokenImportScope = getTokenImportScope(path);
 
-        if (!tokenImportScope) {
-          return;
-        } // Check arguments have correct format
+              if (!tokenImportScope) {
+                return;
+              } // Check arguments have correct format
 
 
-        if (!path.node.arguments[0]) {
-          throw new Error("token() requires at least one argument");
-        } else if (!t.isStringLiteral(path.node.arguments[0])) {
-          throw new Error("token() must have a string as the first argument");
-        } else if (path.node.arguments.length > 2) {
-          throw new Error("token() does not accept ".concat(path.node.arguments.length, " arguments"));
-        } // Check the token exists
+              if (!path.node.arguments[0]) {
+                throw new Error("token() requires at least one argument");
+              } else if (!t.isStringLiteral(path.node.arguments[0])) {
+                throw new Error("token() must have a string as the first argument");
+              } else if (path.node.arguments.length > 2) {
+                throw new Error("token() does not accept ".concat(path.node.arguments.length, " arguments"));
+              } // Check the token exists
 
 
-        var tokenName = path.node.arguments[0].value;
-        var cssTokenValue = _tokenNames.default[tokenName];
+              var tokenName = path.node.arguments[0].value;
+              var cssTokenValue = _tokenNames.default[tokenName];
 
-        if (!cssTokenValue) {
-          throw new Error("token '".concat(tokenName, "' does not exist"));
-        }
+              if (!cssTokenValue) {
+                throw new Error("token '".concat(tokenName, "' does not exist"));
+              }
 
-        var replacementNode; // if no fallback is set, optionally find one from the default theme
+              var replacementNode; // if no fallback is set, optionally find one from the default theme
 
-        if (path.node.arguments.length < 2) {
-          if (state.opts.shouldUseAutoFallback) {
-            replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
-          } else {
-            replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
-          }
-        } // Handle fallbacks
+              if (path.node.arguments.length < 2) {
+                if (state.opts.shouldUseAutoFallback) {
+                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
+                } else {
+                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
+                }
+              } // Handle fallbacks
 
 
-        var fallback = path.node.arguments[1];
+              var fallback = path.node.arguments[1];
 
-        if (t.isStringLiteral(fallback)) {
-          // String literals can be concatenated into css variable call
-          // Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
-          replacementNode = t.stringLiteral(fallback.value ? "var(".concat(cssTokenValue, ", ").concat(fallback.value, ")") : "var(".concat(cssTokenValue, ")"));
-        } else if (t.isExpression(fallback)) {
-          // Expressions should be placed in a template string/literal
-          replacementNode = t.templateLiteral([t.templateElement({
-            cooked: "var(".concat(cssTokenValue, ", "),
-            // Currently we create a "raw" value by inserting escape characters via regex (https://github.com/babel/babel/issues/9242)
-            raw: "var(".concat(cssTokenValue.replace(/\\|`|\${/g, '\\$&'), ", ")
-          }, false), t.templateElement({
-            raw: ')',
-            cooked: ')'
-          }, true)], [fallback]);
-        } // Replace path and call scope.crawl() to refresh the scope bindings + references
+              if (t.isStringLiteral(fallback)) {
+                // String literals can be concatenated into css variable call
+                // Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
+                replacementNode = t.stringLiteral(fallback.value ? "var(".concat(cssTokenValue, ", ").concat(fallback.value, ")") : "var(".concat(cssTokenValue, ")"));
+              } else if (t.isExpression(fallback)) {
+                // Expressions should be placed in a template string/literal
+                replacementNode = t.templateLiteral([t.templateElement({
+                  cooked: "var(".concat(cssTokenValue, ", "),
+                  // Currently we create a "raw" value by inserting escape characters via regex (https://github.com/babel/babel/issues/9242)
+                  raw: "var(".concat(cssTokenValue.replace(/\\|`|\${/g, '\\$&'), ", ")
+                }, false), t.templateElement({
+                  raw: ')',
+                  cooked: ')'
+                }, true)], [fallback]);
+              } // Replace path and call scope.crawl() to refresh the scope bindings + references
 
 
-        replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
+              replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
 
-        tokenImportScope.crawl();
-      }),
-      Program: {
+              tokenImportScope.crawl();
+            })
+          });
+        },
         exit: function exit(path) {
           path.traverse({
             ImportDeclaration: function ImportDeclaration(path) {

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.5";
+var version = "0.10.8";
 
 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-dark/color/border.js

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

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/atlassian-light/color/border.js

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

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.'
+            }
+          }
         }
       }
     }