@atlaskit/tokens 0.6.1 → 0.7.0

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

@@ -32,8 +32,10 @@ function createPaint(hex) {
   }
 
   if (hexValue.length === 4) {
-    // We have a half hex, double it!
-    hexValue = "".concat(hexValue).concat(hexValue.slice(1));
+    // We have a 3 character shorthand hex, expand it!
+    hexValue = hexValue.split('').map(function (char) {
+      return char === '#' ? char : "".concat(char).concat(char);
+    }).join('');
   }
 
   if (hexValue.length !== 9 && hexValue.length !== 7) {
@@ -80,6 +82,30 @@ function createEffects(value) {
     };
   });
 }
+/**
+ * Formats a token description for use in Figma,
+ * including deprecated warnings
+ *
+ * @param token
+ */
+
+
+function formatDescription(token) {
+  var description = token.attributes.description.trim() || '';
+
+  if (token.attributes.state === 'deprecated') {
+    // The token is deprecated. Prefix a warning to the description!
+    // If the token has multiple replacement options,
+    // flatten them into a string
+    var replacements = Array.isArray(token.attributes.replacement) ? token.attributes.replacement.join(' | ') : token.attributes.replacement; // If the token has replacements, prefix them to the description
+
+    var prefix = replacements ? "use ".concat(replacements, " instead") : 'do not use';
+    description = "DEPRECATED ".concat(prefix, ". \n").concat(description);
+  }
+
+  return description;
+}
+
 /**
  * Adds tokens under a specified theme as paint styles to Figma.
  *
@@ -87,8 +113,6 @@ function createEffects(value) {
  * @param {*} tokens
  * @param {*} renameMap mapping object for tokens that should be renamed. example { 'old/token': 'new/token'}
  */
-
-
 function synchronizeFigmaTokens(themeName, tokens) {
   var renameMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var figma = window.figma;
@@ -122,7 +146,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
 
     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.
+    style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.
 
     delete tokens[style.name];
   }); // Iterate through all local figma styles first
@@ -159,7 +183,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
     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.
+    style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.
 
     delete tokens[style.name];
   }); // eslint-disable-next-line guard-for-in
@@ -170,7 +194,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
     if (token.attributes.group === 'paint') {
       var newStyle = figma.createPaintStyle();
       newStyle.name = key;
-      newStyle.description = (token.attributes.description || '').trim();
+      newStyle.description = formatDescription(token);
       newStyle.paints = [createPaint(token.value)];
       console.log("=> ".concat(key, " paint style has been added!"));
     }
@@ -179,7 +203,7 @@ function synchronizeFigmaTokens(themeName, tokens) {
       var _newStyle = figma.createEffectStyle();
 
       _newStyle.name = key;
-      _newStyle.description = (token.attributes.description || '').trim();
+      _newStyle.description = formatDescription(token);
       _newStyle.effects = createEffects(token.value);
       console.log("=> ".concat(key, " shadow style has been added!"));
     }
@@ -190,6 +214,7 @@ if (typeof module !== 'undefined') {
   module.exports = {
     synchronizeFigmaTokens: synchronizeFigmaTokens,
     createPaint: createPaint,
-    createEffects: createEffects
+    createEffects: createEffects,
+    formatDescription: formatDescription
   };
 }

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.6.1";
+var version = "0.7.0";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

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

@@ -9,28 +9,68 @@ var color = {
     text: {
       accent: {
         blue: {
-          value: 'B300'
+          '[default]': {
+            value: 'B300'
+          },
+          bolder: {
+            value: 'B200'
+          }
         },
         red: {
-          value: 'R300'
+          '[default]': {
+            value: 'R300'
+          },
+          bolder: {
+            value: 'R200'
+          }
         },
         orange: {
-          value: 'O300'
+          '[default]': {
+            value: 'O300'
+          },
+          bolder: {
+            value: 'O200'
+          }
         },
         yellow: {
-          value: 'Y300'
+          '[default]': {
+            value: 'Y300'
+          },
+          bolder: {
+            value: 'Y200'
+          }
         },
         green: {
-          value: 'G300'
+          '[default]': {
+            value: 'G300'
+          },
+          bolder: {
+            value: 'G200'
+          }
         },
         purple: {
-          value: 'P300'
+          '[default]': {
+            value: 'P300'
+          },
+          bolder: {
+            value: 'P200'
+          }
         },
         teal: {
-          value: 'T300'
+          '[default]': {
+            value: 'T300'
+          },
+          bolder: {
+            value: 'T200'
+          }
         },
         magenta: {
-          value: 'M300'
+          '[default]': {
+            value: 'M300'
+          },
+          bolder: {
+            value: 'M200'
+          }
         }
       }
     },
@@ -93,67 +133,115 @@ var color = {
     background: {
       accent: {
         blue: {
-          '[default]': {
+          subtlest: {
+            value: 'B1000'
+          },
+          subtler: {
             value: 'B900'
           },
-          bold: {
-            value: 'B700'
+          subtle: {
+            value: 'B800'
+          },
+          bolder: {
+            value: 'B400'
           }
         },
         red: {
-          '[default]': {
+          subtlest: {
+            value: 'R1000'
+          },
+          subtler: {
             value: 'R900'
           },
-          bold: {
-            value: 'R700'
+          subtle: {
+            value: 'R800'
+          },
+          bolder: {
+            value: 'R400'
           }
         },
         orange: {
-          '[default]': {
+          subtlest: {
+            value: 'O1000'
+          },
+          subtler: {
             value: 'O900'
           },
-          bold: {
-            value: 'O700'
+          subtle: {
+            value: 'O800'
+          },
+          bolder: {
+            value: 'O400'
           }
         },
         yellow: {
-          '[default]': {
+          subtlest: {
+            value: 'Y1000'
+          },
+          subtler: {
             value: 'Y900'
           },
-          bold: {
-            value: 'Y700'
+          subtle: {
+            value: 'Y800'
+          },
+          bolder: {
+            value: 'Y400'
           }
         },
         green: {
-          '[default]': {
+          subtlest: {
+            value: 'G1000'
+          },
+          subtler: {
             value: 'G900'
           },
-          bold: {
-            value: 'G700'
+          subtle: {
+            value: 'G800'
+          },
+          bolder: {
+            value: 'G400'
           }
         },
         purple: {
-          '[default]': {
+          subtlest: {
+            value: 'P1000'
+          },
+          subtler: {
             value: 'P900'
           },
-          bold: {
-            value: 'P700'
+          subtle: {
+            value: 'P800'
+          },
+          bolder: {
+            value: 'P400'
           }
         },
         teal: {
-          '[default]': {
+          subtlest: {
+            value: 'T1000'
+          },
+          subtler: {
             value: 'T900'
           },
-          bold: {
-            value: 'T700'
+          subtle: {
+            value: 'T800'
+          },
+          bolder: {
+            value: 'T400'
           }
         },
         magenta: {
-          '[default]': {
+          subtlest: {
+            value: 'M1000'
+          },
+          subtler: {
             value: 'M900'
           },
-          bold: {
-            value: 'M700'
+          subtle: {
+            value: 'M800'
+          },
+          bolder: {
+            value: 'M400'
           }
         }
       }

package/dist/cjs/tokens/atlassian-dark/color/background.js

@@ -65,15 +65,28 @@ var color = {
         }
       },
       brand: {
+        bold: {
+          '[default]': {
+            value: 'B400'
+          },
+          hovered: {
+            value: 'B300'
+          },
+          pressed: {
+            value: 'B200'
+          }
+        }
+      },
+      selected: {
         '[default]': {
           '[default]': {
-            value: 'DN200A'
+            value: 'B1000'
           },
           hovered: {
-            value: 'DN300A'
+            value: 'B900'
           },
           pressed: {
-            value: 'DN400A'
+            value: 'B800'
           }
         },
         bold: {

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

@@ -22,6 +22,9 @@ var color = {
       brand: {
         value: 'B400'
       },
+      selected: {
+        value: 'B400'
+      },
       danger: {
         value: 'R500'
       },

package/dist/cjs/tokens/atlassian-dark/color/icon.js

@@ -22,6 +22,9 @@ var color = {
       brand: {
         value: 'B400'
       },
+      selected: {
+        value: 'B400'
+      },
       danger: {
         value: 'R500'
       },

package/dist/cjs/tokens/atlassian-dark/color/text.js

@@ -25,6 +25,9 @@ var color = {
       brand: {
         value: 'B400'
       },
+      selected: {
+        value: 'B400'
+      },
       danger: {
         value: 'R300'
       },

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

@@ -48,9 +48,88 @@ var color = {
       }
     },
     background: {
+      accent: {
+        blue: {
+          '[default]': {
+            value: 'B900'
+          },
+          bold: {
+            value: 'B700'
+          }
+        },
+        red: {
+          '[default]': {
+            value: 'R900'
+          },
+          bold: {
+            value: 'R700'
+          }
+        },
+        orange: {
+          '[default]': {
+            value: 'O900'
+          },
+          bold: {
+            value: 'O700'
+          }
+        },
+        yellow: {
+          '[default]': {
+            value: 'Y900'
+          },
+          bold: {
+            value: 'Y700'
+          }
+        },
+        green: {
+          '[default]': {
+            value: 'G900'
+          },
+          bold: {
+            value: 'G700'
+          }
+        },
+        purple: {
+          '[default]': {
+            value: 'P900'
+          },
+          bold: {
+            value: 'P700'
+          }
+        },
+        teal: {
+          '[default]': {
+            value: 'T900'
+          },
+          bold: {
+            value: 'T700'
+          }
+        },
+        magenta: {
+          '[default]': {
+            value: 'M900'
+          },
+          bold: {
+            value: 'M700'
+          }
+        }
+      },
       blanket: {
         value: 'DN-100A'
       },
+      brand: {
+        '[default]': {
+          '[default]': {
+            value: 'B1000'
+          },
+          hovered: {
+            value: 'B900'
+          },
+          pressed: {
+            value: 'B800'
+          }
+        }
+      },
       boldBrand: {
         resting: {
           value: 'B400'
@@ -132,9 +211,6 @@ var color = {
         },
         hover: {
           value: 'DN300A'
-        },
-        pressed: {
-          value: 'DN400A'
         }
       },
       subtleBorderedNeutral: {
@@ -246,9 +322,6 @@ var color = {
       },
       onBoldWarning: {
         value: 'DN0'
-      },
-      selected: {
-        value: 'B400'
       }
     },
     border: {

package/dist/cjs/tokens/atlassian-dark/elevation/surface.js

@@ -11,7 +11,7 @@ var elevation = {
         value: 'DN0'
       },
       sunken: {
-        value: 'DN-100A'
+        value: 'DN-100'
       },
       raised: {
         value: 'DN100'