Use directories to control output of token artifacts

build/css/spacing.css

@@ -9,7 +9,7 @@
   --usa-spacing-4: 2rem;
   --usa-spacing-5: 2.5rem;
   --usa-spacing-6: 3rem;
-  --usa-spacing-05: .025rem;
+  --usa-spacing-05: .25rem;
   --usa-site-margins-mobile-width: 1rem;
   --usa-site-margins-width: 2rem;
   --usa-size-touch-target: 3rem;

build/scss/_spacing.scss

@@ -7,7 +7,7 @@ $usa-spacing-3: 1.5rem;
 $usa-spacing-4: 2rem;
 $usa-spacing-5: 2.5rem;
 $usa-spacing-6: 3rem;
-$usa-spacing-05: .025rem;
+$usa-spacing-05: .25rem;
 $usa-site-margins-mobile-width: 1rem;
 $usa-site-margins-width: 2rem;
 $usa-size-touch-target: 3rem;

config/style-dictionary.config.js

@@ -1,4 +1,5 @@
 import StyleDictionary from "style-dictionary";
+import tokenGroups from "../tokens/index.js";
 import {
   generateTokenName,
   getTokenValueWithUnit,
@@ -16,47 +17,23 @@ StyleDictionary.registerTransform({
   transform: getTokenValueWithUnit,
 });
 
-const outputs = [
-  {
-    name: "breakpoints",
-    filter: (token) => token.path[0] === "breakpoint",
-  },
-  {
-    name: "colors",
-    filter: (token) =>
-      token.filePath && token.filePath.includes("tokens/color/"),
-  },
-  {
-    name: "spacing",
-    filter: (token) =>
-      token.path[0] === "spacing" ||
-      token.path[0] === "site-margins" ||
-      token.path[0] === "size",
-  },
-];
+function makePlatform(format) {
+  return {
+    transforms: ["name/uswds-theme", "value/uswds-units"],
+    prefix: "usa",
+    buildPath: `build/${format}/`,
+    files: tokenGroups.map((group) => ({
+      destination: format === "scss" ? `_${group}.scss` : `${group}.css`,
+      format: `${format}/variables`,
+      filter: (token) => token.filePath?.includes(`tokens/${group}/`),
+    })),
+  };
+}
 
 export default {
   source: ["tokens/**/*.json"],
   platforms: {
-    scss: {
-      transforms: ["name/uswds-theme", "value/uswds-units"],
-      prefix: "usa",
-      buildPath: "build/scss/",
-      files: outputs.map(({ name, filter }) => ({
-        destination: `_${name}.scss`,
-        format: "scss/variables",
-        filter,
-      })),
-    },
-    css: {
-      transforms: ["name/uswds-theme", "value/uswds-units"],
-      prefix: "usa",
-      buildPath: "build/css/",
-      files: outputs.map(({ name, filter }) => ({
-        destination: `${name}.css`,
-        format: "css/variables",
-        filter,
-      })),
-    },
+    scss: makePlatform("scss"),
+    css: makePlatform("css"),
   },
 };

internals/token-helpers/index.test.ts

@@ -2,112 +2,110 @@ import { describe, it, expect } from "vitest";
 import type { TransformedToken, PlatformConfig } from "style-dictionary/types";
 import { generateTokenName, getTokenValueWithUnit } from "./index";
 
-describe("generateTokenName", () => {
-  const token: TransformedToken = {
+const baseToken: TransformedToken = {
+  $value: { value: "75", unit: "rem" },
+  filePath: "tokens/breakpoints/breakpoints.json",
+  isSource: true,
+  $type: "dimension",
+  key: "{breakpoint.desktop-lg}",
+  original: {
     $value: { value: "75", unit: "rem" },
-    filePath: "tokens/dimension/breakpoints.json",
-    isSource: true,
     $type: "dimension",
     key: "{breakpoint.desktop-lg}",
-    original: {
-      $value: { value: "75", unit: "rem" },
-      $type: "dimension",
-      key: "{breakpoint.desktop-lg}",
-    },
-    name: "desktop-lg",
-    attributes: {},
-    path: ["breakpoint", "desktop-lg"],
-  };
+  },
+  name: "desktop-lg",
+  attributes: {},
+  path: ["breakpoint", "desktop-lg"],
+};
+
+const options: PlatformConfig = {
+  prefix: "usa",
+  transforms: [],
+  buildPath: "",
+  files: [],
+  log: {},
+  actions: [],
+};
 
-  const options: PlatformConfig = {
-    prefix: "usa",
-    transforms: [],
-    buildPath: "",
-    files: [],
-    log: {},
-    actions: [],
-  };
+function createToken(
+  overrides: Partial<TransformedToken> = {},
+): TransformedToken {
+  return { ...baseToken, ...overrides };
+}
 
+describe("generateTokenName", () => {
   it("should generate token name for breakpoint prefix", () => {
-    const result = generateTokenName(token, options);
+    const result = generateTokenName(baseToken, options);
     expect(result).toBe("usa-breakpoint-desktop-lg");
   });
 
   it("should generate token name for spacing prefix", () => {
-    const spacingToken: TransformedToken = {
-      ...token,
-      path: ["site-margins", "width"],
-    };
-    const result = generateTokenName(spacingToken, options);
+    const result = generateTokenName(
+      createToken({ path: ["site-margins", "width"] }),
+      options,
+    );
     expect(result).toBe("usa-site-margins-width");
   });
 
-  it("should generate token name for color directory with single path key", () => {
-    const colorTokenSingle: TransformedToken = {
-      ...token,
-      filePath: "tokens/color/primary.json",
-      path: ["black"],
-    };
-    const result = generateTokenName(colorTokenSingle, options);
+  it("should generate token name for color with single nested key", () => {
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/global.json",
+        path: ["color", "black"],
+      }),
+      options,
+    );
     expect(result).toBe("usa-color-black");
   });
 
-  it("should generate token name for color directory with multiple path keys", () => {
-    const colorTokenMulti: TransformedToken = {
-      ...token,
-      filePath: "tokens/color/primary.json",
-      path: ["primary", "light"],
-    };
-    const result = generateTokenName(colorTokenMulti, options);
-    expect(result).toBe("usa-color-primary-light");
+  it("should generate token name for color with multiple nested keys", () => {
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/blue.json",
+        path: ["color", "blue", "5"],
+      }),
+      options,
+    );
+    expect(result).toBe("usa-color-blue-5");
+  });
+
+  it("should generate token name for color with vivid variant", () => {
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/blue.json",
+        path: ["color", "blue", "vivid", "50"],
+      }),
+      options,
+    );
+    expect(result).toBe("usa-color-blue-vivid-50");
   });
 
   it("should generate token name fallback for other cases", () => {
-    const otherToken: TransformedToken = {
-      ...token,
-      path: ["font", "base-size"],
-    };
-    const result = generateTokenName(otherToken, options);
+    const result = generateTokenName(
+      createToken({ path: ["font", "base-size"] }),
+      options,
+    );
     expect(result).toBe("usa-font-base-size");
   });
 });
 
 describe("getTokenValueWithUnit", () => {
-  const defaultToken: TransformedToken = {
-    $value: { value: "75", unit: "rem" },
-    $type: "dimension",
-    isSource: true,
-    key: "desktop-lg",
-    name: "desktop-lg",
-    attributes: {},
-    path: ["breakpoint", "desktop-lg"],
-    original: {
-      $value: { value: "75", unit: "rem" },
-      $type: "dimension",
-      key: "desktop-lg",
-    },
-  };
-
   it("should return value + unit for dimension tokens with object value", () => {
-    const result = getTokenValueWithUnit(defaultToken);
+    const result = getTokenValueWithUnit(baseToken);
     expect(result).toBe("75rem");
   });
 
   it("should return value string when unit is missing in dimension object", () => {
-    const token = {
-      ...defaultToken,
-      $value: { value: "30" },
-    };
-    const result = getTokenValueWithUnit(token);
+    const result = getTokenValueWithUnit(
+      createToken({ $value: { value: "30" } }),
+    );
     expect(result).toBe("30");
   });
 
   it("should return raw value if token type is not dimension", () => {
-    const token = {
-      $value: "#fff2f5",
-      $type: "color",
-    };
-    const result = getTokenValueWithUnit(token);
+    const result = getTokenValueWithUnit(
+      createToken({ $value: "#fff2f5", $type: "color" }),
+    );
     expect(result).toBe("#fff2f5");
   });
 });

internals/token-helpers/index.ts

@@ -4,28 +4,6 @@ export const generateTokenName = (
   token: TransformedToken,
   options: PlatformConfig,
 ) => {
-  if (token.path[0] === "spacing") {
-    return `${options.prefix}-spacing-${token.path[1]}`;
-  }
-
-  if (token.path[0] === "breakpoint") {
-    return `${options.prefix}-breakpoint-${token.path[1]}`;
-  }
-
-  const isFromColorDirectory =
-    token.filePath && token.filePath.includes("tokens/color/");
-
-  if (isFromColorDirectory) {
-    if (
-      token.path.length === 1 &&
-      ["transparent", "black", "white"].includes(token.path[0])
-    ) {
-      return `${options.prefix}-color-${token.path[0]}`;
-    } else {
-      return `${options.prefix}-color-${token.path.join("-")}`;
-    }
-  }
-
   return `${options.prefix}-${token.path.join("-")}`;
 };
 

tokens/dimension/breakpoints.json → tokens/breakpoints/breakpoints.json

@@ -1,5 +1,6 @@
 {
   "breakpoint": {
+    "$type": "dimension",
     "card": {
       "$value": { "value": "10", "unit": "rem" }
     },
@@ -27,6 +28,5 @@
     "widescreen": {
       "$value": { "value": "87.5", "unit": "rem" }
     }
-  },
-  "$type": "dimension"
+  }
 }