Design tokens v3.0.1

packages/design-tokens/CHANGELOG.md

@@ -1,8 +1,19 @@
 # Changelog
 
+## 3.0.1
+
+### Changed
+
+- `typography.fontWeights.italic` is marked as deprecated and will be removed in next major version
+
+### Added
+
+- `typography.fontWeights.italic.style` is added, replacing deprecated `typography.fontWeights.italic`
+- `typography.fontWeights.italic.weight` is added, giving a default weight to italic type
+
 ## 3.0.0
 
-## Changed
+### Changed
 
 - (breaking) Many tokens have been renamed to bring the generated tokens in line with the intended token names from Figma
 - (breaking) `brand` color tokens renamed to `theme` to differentiate from [BC Visual Identity Program](https://www2.gov.bc.ca/gov/content?id=CCB4862101CD43C195FF395CAED00F95)
@@ -14,7 +25,7 @@
 - (breaking) File names for JavaScript tokens are renamed from `variables.js` to `index.js` for shorter import statements
 - Tokens in `layout` group use `rem` equivalent of previous `px` values where possible in Figma
 
-## Added
+### Added
 
 - `primaryBlue` (equal to `blue100`) and `primaryGold` (equal to `gold100`) dedicated color tokens added
 - `smallBody` font size added at 0.875rem (the old `label` size)
@@ -23,7 +34,7 @@
 - TypeScript type definitions are shipped with the JavaScript tokens
 - Heading level 6 `typography` group tokens added
 
-## Removed
+### Removed
 
 - (breaking) Removed `surface.size` (legacy testing tokens)
 - (breaking) Removed `surface.borderRadius` (these were duplicates from the `layout` group)

packages/design-tokens/build-output.js

@@ -1,27 +1,118 @@
-import { registerTransforms } from "@tokens-studio/sd-transforms";
+import { register } from "@tokens-studio/sd-transforms";
 import StyleDictionary from "style-dictionary";
 
-registerTransforms(StyleDictionary);
+register(StyleDictionary);
 
-const sd = StyleDictionary.extend({
+// TODO: Remove the `bcds` custom transformations and keep the default new
+//       behavior for these tokens when we have a breaking change that will
+//       move us to a new major version.
+
+// Matches 6 or 8 digit hex color codes
+const hexColorRegex = /#([0-9a-fA-F]{6}([0-9a-fA-F]{2})?)/g;
+
+// Keep old capitalization of hex codes behavior.
+StyleDictionary.registerTransform({
+  name: "bcds/color/uppercase",
+  type: "value",
+  filter: function (token) {
+    return token.type === "color";
+  },
+  transform: function (token) {
+    return hexColorRegex.test(token)
+      ? token.original.value.toUpperCase()
+      : token.original.value;
+  },
+});
+
+// Matches dimension rules with leading "0" characters like "0px"
+const leadingZeroValueRegex = /^0(?:em||px|rem|%)$/g;
+
+// Keep old "0" dimension value behavior where units are left off the "0" token.
+StyleDictionary.registerTransform({
+  name: "bcds/css/size/zero",
+  type: "value",
+  filter: function (token) {
+    return token.type === "dimension";
+  },
+  transform: function (token) {
+    return leadingZeroValueRegex.test(token) ? "0" : token.original.value;
+  },
+});
+
+StyleDictionary.registerTransform({
+  name: "bcds/js/size/zero",
+  type: "value",
+  filter: function (token) {
+    return token.type === "dimension";
+  },
+  transform: function (token) {
+    // `layout.margin.none` was already using "0rem" so handle it specifically.
+    if (["layoutMarginNone", "bcdsLayoutMarginNone"].includes(token.name)) {
+      return "0rem";
+    }
+
+    return token.value === "0rem" ? "0" : token.value;
+  },
+});
+
+// Keep old "italic" font v3 values.
+// Without this transformation, the order of the `font` shorthand tokens for the
+// italic font faces has its first two values flipped. The new default format
+// with Style Dictionary v4 and sd-transforms v1 is better - it matches the CSS
+// `font` shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/font
+StyleDictionary.registerTransform({
+  name: "bcds/typography/italic",
+  type: "value",
+  transitive: true,
+  filter: function (token) {
+    if (token.type === "typography" && token?.name?.includes("Italic")) {
+      return true;
+    }
+
+    return false;
+  },
+  transform: function (token) {
+    // `token` ex: `italic 400 1rem/1.688rem 'BC Sans'`
+    const arr = token.value.split(" ");
+
+    let newArr = [];
+
+    arr.forEach((chunk, index) => {
+      if (index === 1) {
+        newArr.unshift(chunk);
+      } else {
+        newArr.push(chunk);
+      }
+    });
+
+    // Returns ex: `400 italic 1rem/1.688rem 'BC Sans'`
+    return newArr.join(" ");
+  },
+});
+
+const sd = new StyleDictionary({
   source: ["input/tokens.json"],
+  preprocessors: ["tokens-studio"],
+  log: {
+    verbosity: "verbose",
+  },
   platforms: {
     css: {
+      transformGroup: "tokens-studio",
       transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/css/size/zero",
         "ts/descriptionToComment",
         "ts/size/px",
         "ts/opacity",
         "ts/size/lineheight",
         "ts/typography/fontWeight",
         "ts/resolveMath",
         "ts/size/css/letterspacing",
-        "ts/typography/css/fontFamily",
-        "ts/typography/css/shorthand",
-        "ts/border/css/shorthand",
-        "ts/shadow/css/shorthand",
         "ts/color/css/hexrgba",
         "ts/color/modifiers",
-        "name/cti/kebab",
+        "name/kebab",
       ],
       buildPath: "build/css/",
       files: [
@@ -32,22 +123,22 @@ const sd = StyleDictionary.extend({
       ],
     },
     cssPrefixed: {
+      transformGroup: "tokens-studio",
       prefix: "bcds",
       transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/css/size/zero",
         "ts/descriptionToComment",
         "ts/size/px",
         "ts/opacity",
         "ts/size/lineheight",
         "ts/typography/fontWeight",
         "ts/resolveMath",
         "ts/size/css/letterspacing",
-        "ts/typography/css/fontFamily",
-        "ts/typography/css/shorthand",
-        "ts/border/css/shorthand",
-        "ts/shadow/css/shorthand",
         "ts/color/css/hexrgba",
         "ts/color/modifiers",
-        "name/cti/kebab",
+        "name/kebab",
       ],
       buildPath: "build/css-prefixed/",
       files: [
@@ -59,6 +150,11 @@ const sd = StyleDictionary.extend({
     },
     js: {
       transformGroup: "tokens-studio",
+      transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/js/size/zero",
+      ],
       buildPath: "build/js/",
       files: [
         {
@@ -73,6 +169,11 @@ const sd = StyleDictionary.extend({
     },
     jsPrefixed: {
       transformGroup: "tokens-studio",
+      transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/js/size/zero",
+      ],
       prefix: "bcds",
       buildPath: "build/js-prefixed/",
       files: [
@@ -88,6 +189,11 @@ const sd = StyleDictionary.extend({
     },
     cjs: {
       transformGroup: "tokens-studio",
+      transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/js/size/zero",
+      ],
       buildPath: "build/cjs/",
       files: [
         {
@@ -102,6 +208,11 @@ const sd = StyleDictionary.extend({
     },
     cjsPrefixed: {
       transformGroup: "tokens-studio",
+      transforms: [
+        "bcds/typography/italic",
+        "bcds/color/uppercase",
+        "bcds/js/size/zero",
+      ],
       prefix: "bcds",
       buildPath: "build/cjs-prefixed/",
       files: [
@@ -118,5 +229,5 @@ const sd = StyleDictionary.extend({
   },
 });
 
-sd.cleanAllPlatforms();
-sd.buildAllPlatforms();
+await sd.cleanAllPlatforms();
+await sd.buildAllPlatforms();

packages/design-tokens/build/cjs-prefixed/index.d.ts

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 export const bcdsSurfaceOpacity0 : number;
@@ -104,7 +103,10 @@ export const bcdsTypographyLineHeightsXxsparse : string;
 export const bcdsTypographyLineHeightsAuto : string;
 export const bcdsTypographyFontWeightsRegular : number;
 export const bcdsTypographyFontWeightsBold : number;
+/** DEPRECATED - will be removed in next major version. */
 export const bcdsTypographyFontWeightsItalic : string;
+export const bcdsTypographyFontWeightsItalicWeight : number;
+export const bcdsTypographyFontWeightsItalicStyle : string;
 export const bcdsTypographyFontSizeLabel : string;
 export const bcdsTypographyFontSizeSmallBody : string;
 export const bcdsTypographyFontSizeBody : string;

packages/design-tokens/build/cjs-prefixed/index.js

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 module.exports = {
@@ -102,7 +101,9 @@ module.exports = {
   "bcdsTypographyLineHeightsAuto": "AUTO",
   "bcdsTypographyFontWeightsRegular": 400,
   "bcdsTypographyFontWeightsBold": 700,
-  "bcdsTypographyFontWeightsItalic": "Italic",
+  "bcdsTypographyFontWeightsItalic": "Italic", // DEPRECATED - will be removed in next major version.
+  "bcdsTypographyFontWeightsItalicWeight": 400,
+  "bcdsTypographyFontWeightsItalicStyle": "italic",
   "bcdsTypographyFontSizeLabel": "0.75rem",
   "bcdsTypographyFontSizeSmallBody": "0.875rem",
   "bcdsTypographyFontSizeBody": "1rem",

packages/design-tokens/build/cjs/index.d.ts

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 export const surfaceOpacity0 : number;
@@ -104,7 +103,10 @@ export const typographyLineHeightsXxsparse : string;
 export const typographyLineHeightsAuto : string;
 export const typographyFontWeightsRegular : number;
 export const typographyFontWeightsBold : number;
+/** DEPRECATED - will be removed in next major version. */
 export const typographyFontWeightsItalic : string;
+export const typographyFontWeightsItalicWeight : number;
+export const typographyFontWeightsItalicStyle : string;
 export const typographyFontSizeLabel : string;
 export const typographyFontSizeSmallBody : string;
 export const typographyFontSizeBody : string;

packages/design-tokens/build/cjs/index.js

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 module.exports = {
@@ -102,7 +101,9 @@ module.exports = {
   "typographyLineHeightsAuto": "AUTO",
   "typographyFontWeightsRegular": 400,
   "typographyFontWeightsBold": 700,
-  "typographyFontWeightsItalic": "Italic",
+  "typographyFontWeightsItalic": "Italic", // DEPRECATED - will be removed in next major version.
+  "typographyFontWeightsItalicWeight": 400,
+  "typographyFontWeightsItalicStyle": "italic",
   "typographyFontSizeLabel": "0.75rem",
   "typographyFontSizeSmallBody": "0.875rem",
   "typographyFontSizeBody": "1rem",

packages/design-tokens/build/css-prefixed/variables.css

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
@@ -102,7 +101,9 @@
   --bcds-typography-line-heights-auto: AUTO;
   --bcds-typography-font-weights-regular: 400;
   --bcds-typography-font-weights-bold: 700;
-  --bcds-typography-font-weights-italic: Italic;
+  --bcds-typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */
+  --bcds-typography-font-weights-italic-weight: 400;
+  --bcds-typography-font-weights-italic-style: italic;
   --bcds-typography-font-size-label: 0.75rem;
   --bcds-typography-font-size-small-body: 0.875rem;
   --bcds-typography-font-size-body: 1rem;

packages/design-tokens/build/css/variables.css

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
@@ -102,7 +101,9 @@
   --typography-line-heights-auto: AUTO;
   --typography-font-weights-regular: 400;
   --typography-font-weights-bold: 700;
-  --typography-font-weights-italic: Italic;
+  --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */
+  --typography-font-weights-italic-weight: 400;
+  --typography-font-weights-italic-style: italic;
   --typography-font-size-label: 0.75rem;
   --typography-font-size-small-body: 0.875rem;
   --typography-font-size-body: 1rem;

packages/design-tokens/build/js-prefixed/index.d.ts

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 18:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 export const bcdsSurfaceOpacity0 : number;
@@ -104,7 +103,10 @@ export const bcdsTypographyLineHeightsXxsparse : string;
 export const bcdsTypographyLineHeightsAuto : string;
 export const bcdsTypographyFontWeightsRegular : number;
 export const bcdsTypographyFontWeightsBold : number;
+/** DEPRECATED - will be removed in next major version. */
 export const bcdsTypographyFontWeightsItalic : string;
+export const bcdsTypographyFontWeightsItalicWeight : number;
+export const bcdsTypographyFontWeightsItalicStyle : string;
 export const bcdsTypographyFontSizeLabel : string;
 export const bcdsTypographyFontSizeSmallBody : string;
 export const bcdsTypographyFontSizeBody : string;