@atlaskit/tokens 0.10.3 → 0.10.6

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/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = void 0;
 var THEMES = ['light', 'dark'];
 exports.THEMES = THEMES;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
@@ -17,4 +17,6 @@ var LONG_SHORT_MAPPING = {
   'atlassian-light': 'light',
   'atlassian-dark': 'dark'
 };
-exports.LONG_SHORT_MAPPING = LONG_SHORT_MAPPING;
+exports.LONG_SHORT_MAPPING = LONG_SHORT_MAPPING;
+var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");
+exports.TOKEN_NOT_FOUND_CSS_VAR = TOKEN_NOT_FOUND_CSS_VAR;

package/dist/cjs/get-token.js

@@ -11,15 +11,22 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
+var _constants = require("./constants");
+
 var name = "@atlaskit/tokens";
-var version = "0.10.3";
+var version = "0.10.6";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];
 
   if (process.env.NODE_ENV !== 'production' && !token) {
-    (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " for ").concat(name, "@").concat(version));
     token = _tokenNames.default['utility.UNSAFE_util.MISSING_TOKEN'];
+    (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " for ").concat(name, "@").concat(version));
+  } // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
+
+
+  if (!token) {
+    token = _constants.TOKEN_NOT_FOUND_CSS_VAR;
   }
 
   var tokenCall = fallback ? "var(".concat(token, ", ").concat(fallback, ")") : "var(".concat(token, ")");

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

@@ -362,9 +362,10 @@ var color = {
           '[default]': {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].[default]',
               description: 'Use for the background of elements used to reinforce our brand.'
             }
@@ -372,9 +373,10 @@ var color = {
           hovered: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].hovered',
               description: 'Hovered state for color.background.brand'
             }
@@ -382,9 +384,10 @@ var color = {
           pressed: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].pressed',
               description: 'Pressed state for color.background.brand'
             }
@@ -627,9 +630,10 @@ var color = {
         '[default]': {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.8.3',
+            deleted: '0.10.5',
             replacement: 'color.background.inverse.subtle.[default]',
             description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
           }
@@ -650,9 +654,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for backgrounds of elements in a selected state'
           }
@@ -660,9 +665,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for color.background.selected'
           }
@@ -696,9 +702,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
@@ -706,9 +713,10 @@ var color = {
         pressed: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
@@ -716,9 +724,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
           }

package/dist/cjs/version.json

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

package/dist/es2019/artifacts/rename-mapping.js

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::dd934162c3393bce214d694d47bbcf2a>>
+ * @codegen <<SignedSource::51fbaf5510a3fead6a2844d4df866a77>>
  * @codegenCommand yarn build tokens
  */
 const renameMapper = [{
@@ -117,27 +117,27 @@ const renameMapper = [{
   "replacement": "color.background.accent.magenta.subtle"
 }, {
   "path": "color.background.inverse.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.inverse.subtle.[default]"
 }, {
   "path": "color.background.brand.[default].[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.brand.[default].hovered",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.brand.[default].pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.selected.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.selected.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.blanket",
@@ -237,15 +237,15 @@ const renameMapper = [{
   "replacement": "color.background.input.[default]"
 }, {
   "path": "color.background.subtleBrand.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.subtleBrand.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.subtleBrand.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.subtleDanger.hover",

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::9d619d23cbcf93e5c937313843744a22>>
+ * @codegen <<SignedSource::2790b3e5387d05c20675eb77bb4ec986>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -2886,9 +2886,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.1.0",
     "deprecated": "0.8.3",
+    "deleted": "0.10.5",
     "replacement": "color.background.inverse.subtle.[default]",
     "description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."
   },
@@ -2898,9 +2899,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.1.0",
       "deprecated": "0.8.3",
+      "deleted": "0.10.5",
       "replacement": "color.background.inverse.subtle.[default]",
       "description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."
     },
@@ -3226,9 +3228,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.6.0",
     "deprecated": "0.6.2",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].[default]",
     "description": "Use for the background of elements used to reinforce our brand."
   },
@@ -3238,9 +3241,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.6.0",
       "deprecated": "0.6.2",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].[default]",
       "description": "Use for the background of elements used to reinforce our brand."
     },
@@ -3251,9 +3255,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.6.0",
     "deprecated": "0.6.2",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].hovered",
     "description": "Hovered state for color.background.brand"
   },
@@ -3263,9 +3268,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.6.0",
       "deprecated": "0.6.2",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].hovered",
       "description": "Hovered state for color.background.brand"
     },
@@ -3276,9 +3282,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.6.0",
     "deprecated": "0.6.2",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].pressed",
     "description": "Pressed state for color.background.brand"
   },
@@ -3288,9 +3295,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.6.0",
       "deprecated": "0.6.2",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].pressed",
       "description": "Pressed state for color.background.brand"
     },
@@ -3427,9 +3435,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.1.0",
     "deprecated": "0.6.0",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].[default]",
     "description": "Use for backgrounds of elements in a selected state"
   },
@@ -3439,9 +3448,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.1.0",
       "deprecated": "0.6.0",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].[default]",
       "description": "Use for backgrounds of elements in a selected state"
     },
@@ -3452,9 +3462,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.1.0",
     "deprecated": "0.6.0",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].hovered",
     "description": "Hover state for color.background.selected"
   },
@@ -3464,9 +3475,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.1.0",
       "deprecated": "0.6.0",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].hovered",
       "description": "Hover state for color.background.selected"
     },
@@ -4755,9 +4767,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].hovered",
     "description": "Hover state for background.subtleBrand"
   },
@@ -4767,9 +4780,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].hovered",
       "description": "Hover state for background.subtleBrand"
     },
@@ -4780,9 +4794,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].pressed",
     "description": "Pressed state for background.subtleBrand"
   },
@@ -4792,9 +4807,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].pressed",
       "description": "Pressed state for background.subtleBrand"
     },
@@ -4805,9 +4821,10 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "paint",
-    "state": "deprecated",
+    "state": "deleted",
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
+    "deleted": "0.10.5",
     "replacement": "color.background.selected.[default].[default]",
     "description": "Use for subdued backgrounds of UI elements like information section messages and in progress lozenges."
   },
@@ -4817,9 +4834,10 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "paint",
-      "state": "deprecated",
+      "state": "deleted",
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
+      "deleted": "0.10.5",
       "replacement": "color.background.selected.[default].[default]",
       "description": "Use for subdued backgrounds of UI elements like information section messages and in progress lozenges."
     },