@atlaskit/tokens 0.6.3 → 0.7.0

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

@@ -26,8 +26,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) {
@@ -74,6 +76,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.
  *
@@ -81,8 +107,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;
@@ -116,7 +140,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
@@ -153,7 +177,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
@@ -164,7 +188,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!"));
     }
@@ -173,7 +197,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!"));
     }
@@ -184,7 +208,8 @@ if (typeof module !== 'undefined') {
   module.exports = {
     synchronizeFigmaTokens: synchronizeFigmaTokens,
     createPaint: createPaint,
-    createEffects: createEffects
+    createEffects: createEffects,
+    formatDescription: formatDescription
   };
 }
 

package/dist/esm/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.6.3";
+var version = "0.7.0";
 
 function token(path, fallback) {
   var token = tokens[path];

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

@@ -3,28 +3,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'
+          }
         }
       }
     },
@@ -87,67 +127,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/esm/tokens/atlassian-dark/deprecated/deprecated.js

@@ -42,19 +42,85 @@ 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: 'DN200A'
+            value: 'B1000'
           },
           hovered: {
-            value: 'DN300A'
+            value: 'B900'
           },
           pressed: {
-            value: 'DN400A'
+            value: 'B800'
           }
         }
       },

package/dist/esm/tokens/atlassian-light/color/accent.js

@@ -3,28 +3,68 @@ var color = {
     text: {
       accent: {
         blue: {
-          value: 'B800'
+          '[default]': {
+            value: 'B800'
+          },
+          bolder: {
+            value: 'B900'
+          }
         },
         red: {
-          value: 'R800'
+          '[default]': {
+            value: 'R800'
+          },
+          bolder: {
+            value: 'R900'
+          }
         },
         orange: {
-          value: 'O800'
+          '[default]': {
+            value: 'O800'
+          },
+          bolder: {
+            value: 'O900'
+          }
         },
         yellow: {
-          value: 'Y800'
+          '[default]': {
+            value: 'Y800'
+          },
+          bolder: {
+            value: 'Y900'
+          }
         },
         green: {
-          value: 'G800'
+          '[default]': {
+            value: 'G800'
+          },
+          bolder: {
+            value: 'G900'
+          }
         },
         purple: {
-          value: 'P800'
+          '[default]': {
+            value: 'P800'
+          },
+          bolder: {
+            value: 'P900'
+          }
         },
         teal: {
-          value: 'T800'
+          '[default]': {
+            value: 'T800'
+          },
+          bolder: {
+            value: 'T900'
+          }
         },
         magenta: {
-          value: 'M800'
+          '[default]': {
+            value: 'M800'
+          },
+          bolder: {
+            value: 'M900'
+          }
         }
       }
     },
@@ -87,67 +127,115 @@ var color = {
     background: {
       accent: {
         blue: {
-          '[default]': {
+          subtlest: {
+            value: 'B100'
+          },
+          subtler: {
             value: 'B200'
           },
-          bold: {
+          subtle: {
             value: 'B400'
+          },
+          bolder: {
+            value: 'B700'
           }
         },
         red: {
-          '[default]': {
+          subtlest: {
+            value: 'R100'
+          },
+          subtler: {
             value: 'R200'
           },
-          bold: {
+          subtle: {
             value: 'R400'
+          },
+          bolder: {
+            value: 'R700'
           }
         },
         orange: {
-          '[default]': {
+          subtlest: {
+            value: 'O100'
+          },
+          subtler: {
             value: 'O200'
           },
-          bold: {
+          subtle: {
             value: 'O400'
+          },
+          bolder: {
+            value: 'O700'
           }
         },
         yellow: {
-          '[default]': {
+          subtlest: {
+            value: 'Y100'
+          },
+          subtler: {
             value: 'Y200'
           },
-          bold: {
+          subtle: {
             value: 'Y400'
+          },
+          bolder: {
+            value: 'Y700'
           }
         },
         green: {
-          '[default]': {
+          subtlest: {
+            value: 'G100'
+          },
+          subtler: {
             value: 'G200'
           },
-          bold: {
+          subtle: {
             value: 'G400'
+          },
+          bolder: {
+            value: 'G700'
           }
         },
         purple: {
-          '[default]': {
+          subtlest: {
+            value: 'P100'
+          },
+          subtler: {
             value: 'P200'
           },
-          bold: {
+          subtle: {
             value: 'P400'
+          },
+          bolder: {
+            value: 'P700'
           }
         },
         teal: {
-          '[default]': {
+          subtlest: {
+            value: 'T100'
+          },
+          subtler: {
             value: 'T200'
           },
-          bold: {
+          subtle: {
             value: 'T400'
+          },
+          bolder: {
+            value: 'T700'
           }
         },
         magenta: {
-          '[default]': {
+          subtlest: {
+            value: 'M100'
+          },
+          subtler: {
             value: 'M200'
           },
-          bold: {
+          subtle: {
             value: 'M400'
+          },
+          bolder: {
+            value: 'M700'
           }
         }
       }

package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js

@@ -42,6 +42,72 @@ var color = {
       }
     },
     background: {
+      accent: {
+        blue: {
+          '[default]': {
+            value: 'B200'
+          },
+          bold: {
+            value: 'B400'
+          }
+        },
+        red: {
+          '[default]': {
+            value: 'R200'
+          },
+          bold: {
+            value: 'R400'
+          }
+        },
+        orange: {
+          '[default]': {
+            value: 'O200'
+          },
+          bold: {
+            value: 'O400'
+          }
+        },
+        yellow: {
+          '[default]': {
+            value: 'Y200'
+          },
+          bold: {
+            value: 'Y400'
+          }
+        },
+        green: {
+          '[default]': {
+            value: 'G200'
+          },
+          bold: {
+            value: 'G400'
+          }
+        },
+        purple: {
+          '[default]': {
+            value: 'P200'
+          },
+          bold: {
+            value: 'P400'
+          }
+        },
+        teal: {
+          '[default]': {
+            value: 'T200'
+          },
+          bold: {
+            value: 'T400'
+          }
+        },
+        magenta: {
+          '[default]': {
+            value: 'M200'
+          },
+          bold: {
+            value: 'M400'
+          }
+        }
+      },
       blanket: {
         value: 'N500A'
       },