@atlaskit/tokens 0.1.1 → 0.4.0

package/dist/cjs/artifacts/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/babel-plugin/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/babel-plugin/plugin.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = plugin;
+
+var t = _interopRequireWildcard(require("@babel/types"));
+
+var _tokenDefaultValues = _interopRequireDefault(require("../artifacts/token-default-values"));
+
+var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function plugin() {
+  return {
+    visitor: {
+      CallExpression: function (_CallExpression) {
+        function CallExpression(_x, _x2) {
+          return _CallExpression.apply(this, arguments);
+        }
+
+        CallExpression.toString = function () {
+          return _CallExpression.toString();
+        };
+
+        return CallExpression;
+      }(function (path, state) {
+        var tokenImportScope = getTokenImportScope(path);
+
+        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
+
+
+        var tokenName = path.node.arguments[0].value;
+        var cssTokenValue = _tokenNames.default[tokenName];
+
+        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
+
+        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];
+
+        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
+
+        tokenImportScope.crawl();
+      }),
+      Program: {
+        exit: function exit(path) {
+          path.traverse({
+            ImportDeclaration: function ImportDeclaration(path) {
+              // remove import of 'token'
+              if (path.node.source.value !== '@atlaskit/tokens') {
+                return;
+              }
+
+              path.get('specifiers').forEach(function (specifier) {
+                if (!specifier.isImportSpecifier()) {
+                  return;
+                }
+
+                if (getNonAliasedImportName(specifier.node) !== 'token') {
+                  return;
+                }
+
+                var binding = path.scope.bindings[getAliasedImportName(specifier.node)]; // if no longer used, remove
+
+                if (!binding.referenced) {
+                  specifier.remove();
+                }
+              }); // remove '@atlaskit/tokens' import if it is no longer needed
+
+              if (path.get('specifiers').length === 0) {
+                path.remove();
+              }
+            }
+          });
+        }
+      }
+    }
+  };
+}
+
+function getDefaultFallback(tokenName) {
+  return _tokenDefaultValues.default[tokenName];
+}
+
+function getNonAliasedImportName(node) {
+  if (t.isIdentifier(node.imported)) {
+    return node.imported.name;
+  }
+
+  return node.imported.value;
+}
+
+function getAliasedImportName(node) {
+  return node.local.name;
+}
+/**
+ * Determine if the current call is to a token function, and
+ * return the relevant scope
+ */
+
+
+function getTokenImportScope(path) {
+  var callee = path.node.callee;
+
+  if (!t.isIdentifier(callee)) {
+    return undefined;
+  }
+
+  var binding = getTokenBinding(path.scope, callee.name);
+
+  if (!binding || !t.isImportSpecifier(binding.path.node)) {
+    return undefined;
+  }
+
+  return getNonAliasedImportName(binding.path.node) === 'token' ? binding.scope : undefined;
+}
+
+function getTokenBinding(scope, name) {
+  if (!scope) {
+    return undefined;
+  }
+
+  if (scope.bindings[name]) {
+    return scope.bindings[name];
+  } else {
+    return getTokenBinding(scope.parent, name);
+  }
+}

package/dist/cjs/entry-points/rename-mapping.js

@@ -12,4 +12,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _renameMapping = _interopRequireDefault(require("../tokens/rename-mapping"));
+var _renameMapping = _interopRequireDefault(require("../artifacts/rename-mapping"));

package/dist/cjs/entry-points/token-names.js

@@ -12,4 +12,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _tokenNames = _interopRequireDefault(require("../tokens/token-names"));
+var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));

package/dist/cjs/figma/synchronize-figma-tokens.js

@@ -102,28 +102,29 @@ function synchronizeFigmaTokens(themeName, tokens) {
       style.name = renameMap[style.name];
     }
 
-    var token = tokens[style.name];
-
-    if (token) {
-      if (token.attributes.group !== 'shadow') {
-        // Effect exists in our token set.
-        // The token is no longer an effect style, time to remove it!
-        console.log("=> ".concat(style.name, " is no longer a shadow, removing!"));
-        style.remove();
-      } else {
-        // It's still an effect! Update it.
-        console.log("=> ".concat(style.name, " shadow style has been updated!"));
-        style.effects = createEffects(token.value);
-        style.description = token.attributes.description || ''; // Remove from themeValues so it isn't picked up as a new token.
-
-        delete tokens[style.name];
-      }
-    } else if (style.name.startsWith(themeName)) {
-      // The local style was in our theme, but no more!
-      // It's time to delete it.
+    var token = tokens[style.name]; // The local style was in our theme, but no more!
+    // It's time to delete it.
+
+    if (!token) {
       console.log("=> ".concat(style.name, " shadow style no longer exists, removing."));
       style.remove();
+      return;
     }
+
+    if (token.attributes.group !== 'shadow') {
+      // Effect exists in our token set.
+      // The token is no longer an effect style, time to remove it!
+      console.log("=> ".concat(style.name, " is no longer a shadow, removing!"));
+      style.remove();
+      return;
+    } // It's still an effect! Update it.
+
+
+    console.log("=> ".concat(style.name, " shadow style has been updated!"));
+    style.effects = createEffects(token.value);
+    style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
+
+    delete tokens[style.name];
   }); // Iterate through all local figma styles first
   // If it still exists in themeValues, update it (and then remove from themeValues)
   // If it doesn't exist, delete the local figma style
@@ -137,29 +138,30 @@ function synchronizeFigmaTokens(themeName, tokens) {
       style.name = renameMap[style.name];
     }
 
-    var token = tokens[style.name];
-
-    if (token) {
-      if (token.attributes.group !== 'paint') {
-        // The token is no longer a paint style, time to remove it!
-        console.log("=> ".concat(style.name, " is no longer a paint, removing!"));
-        style.remove();
-      } else {
-        // Local style exists that also exists in our tokens!
-        // Update it and then remove from themeValues.
-        console.log("=> ".concat(style.name, " paint style has been updated!")); // Mutating is how Figma updates.
-
-        style.paints = [createPaint(token.value)];
-        style.description = token.attributes.description || ''; // Remove from themeValues so it isn't picked up as a new token.
-
-        delete tokens[style.name];
-      }
-    } else if (style.name.startsWith(themeName)) {
-      // The local style was in our theme, but no more!
-      // It's time to delete it.
+    var token = tokens[style.name]; // The local style was in our theme, but no more!
+    // It's time to delete it.
+
+    if (!token) {
       console.log("=> ".concat(style.name, " paint style no longer exists, removing."));
       style.remove();
+      return;
     }
+
+    if (token.attributes.group !== 'paint') {
+      // The token is no longer a paint style, time to remove it!
+      console.log("=> ".concat(style.name, " is no longer a paint, removing!"));
+      style.remove();
+      return;
+    } // Local style exists that also exists in our tokens!
+    // Update it and then remove from themeValues.
+
+
+    console.log("=> ".concat(style.name, " paint style has been updated!")); // Mutating is how Figma updates.
+
+    style.paints = [createPaint(token.value)];
+    style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
+
+    delete tokens[style.name];
   }); // eslint-disable-next-line guard-for-in
 
   for (var key in tokens) {
@@ -168,7 +170,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
     if (token.attributes.group === 'paint') {
       var newStyle = figma.createPaintStyle();
       newStyle.name = key;
-      newStyle.description = token.attributes.description || '';
+      newStyle.description = (token.attributes.description || '').trim();
       newStyle.paints = [createPaint(token.value)];
       console.log("=> ".concat(key, " paint style has been added!"));
     }
@@ -177,7 +179,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
       var _newStyle = figma.createEffectStyle();
 
       _newStyle.name = key;
-      _newStyle.description = token.attributes.description || '';
+      _newStyle.description = (token.attributes.description || '').trim();
       _newStyle.effects = createEffects(token.value);
       console.log("=> ".concat(key, " shadow style has been added!"));
     }

package/dist/cjs/get-token.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _tokenNames = _interopRequireDefault(require("./tokens/token-names"));
+var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 function token(path, fallback) {
   if (process.env.NODE_ENV !== 'production' && !_tokenNames.default[path]) {

package/dist/cjs/tokens/atlassian-dark/utility/utility.js

@@ -8,6 +8,9 @@ var utility = {
   UNSAFE_util: {
     transparent: {
       value: 'transparent'
+    },
+    MISSING_TOKEN: {
+      value: '#FA11F2'
     }
   }
 };

package/dist/cjs/tokens/atlassian-light/utility/utility.js

@@ -8,6 +8,9 @@ var utility = {
   UNSAFE_util: {
     transparent: {
       value: 'transparent'
+    },
+    MISSING_TOKEN: {
+      value: '#FA11F2'
     }
   }
 };

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

@@ -10,79 +10,92 @@ var color = {
       boldBlue: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       boldGreen: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       boldOrange: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       boldPurple: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       boldRed: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       boldTeal: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
       subtleBlue: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtleGreen: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtleMagenta: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtleOrange: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtlePurple: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtleRed: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
       subtleTeal: {
         attributes: {
           group: 'paint',
-          description: ''
+          state: 'active',
+          description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       }
     }