@atlaskit/tokens 0.6.2 → 0.7.1

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

@@ -26,8 +26,8 @@ function createPaint(hex) {
   }
 
   if (hexValue.length === 4) {
-    // We have a half hex, double it!
-    hexValue = `${hexValue}${hexValue.slice(1)}`;
+    // We have a 3 character shorthand hex, expand it!
+    hexValue = hexValue.split('').map(char => char === '#' ? char : `${char}${char}`).join('');
   }
 
   if (hexValue.length !== 9 && hexValue.length !== 7) {
@@ -74,6 +74,30 @@ function createEffects(value) {
     };
   });
 }
+/**
+ * Formats a token description for use in Figma,
+ * including deprecated warnings
+ *
+ * @param token
+ */
+
+
+function formatDescription(token) {
+  let 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
+    const replacements = Array.isArray(token.attributes.replacement) ? token.attributes.replacement.join(' | ') : token.attributes.replacement; // If the token has replacements, prefix them to the description
+
+    const prefix = replacements ? `use ${replacements} instead` : 'do not use';
+    description = `DEPRECATED ${prefix}. \n${description}`;
+  }
+
+  return description;
+}
+
 /**
  * Adds tokens under a specified theme as paint styles to Figma.
  *
@@ -81,8 +105,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, renameMap = {}) {
   const figma = window.figma;
   const localPaintStyles = figma.getLocalPaintStyles();
@@ -115,7 +137,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
 
     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.
+    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
@@ -152,7 +174,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
     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.
+    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
@@ -163,7 +185,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
     if (token.attributes.group === 'paint') {
       const newStyle = figma.createPaintStyle();
       newStyle.name = key;
-      newStyle.description = (token.attributes.description || '').trim();
+      newStyle.description = formatDescription(token);
       newStyle.paints = [createPaint(token.value)];
       console.log(`=> ${key} paint style has been added!`);
     }
@@ -171,7 +193,7 @@ function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {
     if (token.attributes.group === 'shadow') {
       const newStyle = figma.createEffectStyle();
       newStyle.name = key;
-      newStyle.description = (token.attributes.description || '').trim();
+      newStyle.description = formatDescription(token);
       newStyle.effects = createEffects(token.value);
       console.log(`=> ${key} shadow style has been added!`);
     }
@@ -182,7 +204,8 @@ if (typeof module !== 'undefined') {
   module.exports = {
     synchronizeFigmaTokens,
     createPaint,
-    createEffects
+    createEffects,
+    formatDescription
   };
 }
 

package/dist/es2019/get-token.js

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

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

@@ -3,28 +3,68 @@ const 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 @@ const 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/es2019/tokens/atlassian-dark/color/background.js

@@ -1,7 +1,17 @@
 const color = {
   color: {
     blanket: {
-      value: 'DN-100A'
+      '[default]': {
+        value: 'DN-100A'
+      },
+      // @ts-ignore temporary value (B600 8% opacity)
+      selected: {
+        value: '#1D7AFCCC'
+      },
+      // @ts-ignore temporary value (R600 8% opacity)
+      danger: {
+        value: '#E34935CC'
+      }
     },
     background: {
       disabled: {

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

@@ -42,19 +42,85 @@ const 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/es2019/tokens/atlassian-dark/elevation/surface.js

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

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

@@ -3,28 +3,68 @@ const 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 @@ const 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/es2019/tokens/atlassian-light/color/background.js

@@ -1,7 +1,17 @@
 const color = {
   color: {
     blanket: {
-      value: 'N500A'
+      '[default]': {
+        value: 'N500A'
+      },
+      // @ts-ignore temporary value (B500 8% opacity)
+      selected: {
+        value: '#388BFFCC'
+      },
+      // @ts-ignore temporary value (R500 8% opacity)
+      danger: {
+        value: '#EF5C48CC'
+      }
     },
     background: {
       disabled: {