@atlaskit/tokens 0.2.0 → 0.4.1

package/dist/es2019/artifacts/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { default } from './plugin';

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

@@ -0,0 +1,151 @@
+import * as t from '@babel/types';
+import tokenDefaultValues from '../artifacts/token-default-values';
+import tokenNames from '../artifacts/token-names';
+export default function plugin() {
+  return {
+    visitor: {
+      CallExpression(path, state) {
+        const 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 ${path.node.arguments.length} arguments`);
+        } // Check the token exists
+
+
+        const tokenName = path.node.arguments[0].value;
+        const cssTokenValue = tokenNames[tokenName];
+
+        if (!cssTokenValue) {
+          throw new Error(`token '${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(${cssTokenValue}, ${getDefaultFallback(tokenName)})`);
+          } else {
+            replacementNode = t.stringLiteral(`var(${cssTokenValue})`);
+          }
+        } // Handle fallbacks
+
+
+        const 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(${cssTokenValue}, ${fallback.value})` : `var(${cssTokenValue})`);
+        } else if (t.isExpression(fallback)) {
+          // Expressions should be placed in a template string/literal
+          replacementNode = t.templateLiteral([t.templateElement({
+            cooked: `var(${cssTokenValue}, `,
+            // Currently we create a "raw" value by inserting escape characters via regex (https://github.com/babel/babel/issues/9242)
+            raw: `var(${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(path) {
+          path.traverse({
+            ImportDeclaration(path) {
+              // remove import of 'token'
+              if (path.node.source.value !== '@atlaskit/tokens') {
+                return;
+              }
+
+              path.get('specifiers').forEach(specifier => {
+                if (!specifier.isImportSpecifier()) {
+                  return;
+                }
+
+                if (getNonAliasedImportName(specifier.node) !== 'token') {
+                  return;
+                }
+
+                const 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[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) {
+  const callee = path.node.callee;
+
+  if (!t.isIdentifier(callee)) {
+    return undefined;
+  }
+
+  const 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/es2019/entry-points/rename-mapping.js

@@ -1 +1 @@
-export { default } from '../tokens/rename-mapping';
+export { default } from '../artifacts/rename-mapping';

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

@@ -1 +1 @@
-export { default } from '../tokens/token-names';
+export { default } from '../artifacts/token-names';

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

@@ -95,28 +95,29 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
       style.name = renameMap[style.name];
     }
 
-    const 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(`=> ${style.name} is no longer a shadow, removing!`);
-        style.remove();
-      } else {
-        // It's still an effect! Update it.
-        console.log(`=> ${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.
+    const token = tokens[style.name]; // The local style was in our theme, but no more!
+    // It's time to delete it.
+
+    if (!token) {
       console.log(`=> ${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(`=> ${style.name} is no longer a shadow, removing!`);
+      style.remove();
+      return;
+    } // It's still an effect! Update it.
+
+
+    console.log(`=> ${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
@@ -130,29 +131,30 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
       style.name = renameMap[style.name];
     }
 
-    const 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(`=> ${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(`=> ${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.
+    const token = tokens[style.name]; // The local style was in our theme, but no more!
+    // It's time to delete it.
+
+    if (!token) {
       console.log(`=> ${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(`=> ${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(`=> ${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 (const key in tokens) {
@@ -161,7 +163,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
     if (token.attributes.group === 'paint') {
       const newStyle = figma.createPaintStyle();
       newStyle.name = key;
-      newStyle.description = token.attributes.description || '';
+      newStyle.description = (token.attributes.description || '').trim();
       newStyle.paints = [createPaint(token.value)];
       console.log(`=> ${key} paint style has been added!`);
     }
@@ -169,7 +171,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
     if (token.attributes.group === 'shadow') {
       const newStyle = figma.createEffectStyle();
       newStyle.name = key;
-      newStyle.description = token.attributes.description || '';
+      newStyle.description = (token.attributes.description || '').trim();
       newStyle.effects = createEffects(token.value);
       console.log(`=> ${key} shadow style has been added!`);
     }

package/dist/es2019/get-token.js

@@ -1,4 +1,4 @@
-import tokens from './tokens/token-names';
+import tokens from './artifacts/token-names';
 
 function token(path, fallback) {
   if (process.env.NODE_ENV !== 'production' && !tokens[path]) {

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

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

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

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

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

@@ -4,79 +4,92 @@ const 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.'
         }
       }
     }