@servicetitan/hammer-token 2.5.0 → 3.0.0

package/src/theme/core/typography.tokens.json

@@ -0,0 +1,163 @@
+{
+  "typography": {
+    "paragraph": {
+      "size": {
+        "xsmall": {
+          "$type": "dimension",
+          "$value": "{font.size.200}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "small": {
+          "$type": "dimension",
+          "$value": "{font.size.300}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "default": {
+          "$type": "dimension",
+          "$value": "{font.size.400}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "large": {
+          "$type": "dimension",
+          "$value": "{font.size.500}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "xlarge": {
+          "$type": "dimension",
+          "$value": "{font.size.600}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        }
+      },
+      "font-weight": {
+        "$type": "number",
+        "$value": "{font.weight.normal}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_STYLE"]
+        }
+      },
+      "font-family": {
+        "$type": "string",
+        "$value": "{font.family.base}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_FAMILY"]
+        }
+      }
+    },
+    "heading": {
+      "size": {
+        "xsmall": {
+          "$type": "dimension",
+          "$value": "{font.size.300}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "small": {
+          "$type": "dimension",
+          "$value": "{font.size.400}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "default": {
+          "$type": "dimension",
+          "$value": "{font.size.500}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "large": {
+          "$type": "dimension",
+          "$value": "{font.size.600}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "xlarge": {
+          "$type": "dimension",
+          "$value": "{font.size.800}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        }
+      },
+      "font-weight": {
+        "$type": "number",
+        "$value": "{font.weight.bold}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_STYLE"]
+        }
+      },
+      "font-family": {
+        "$type": "string",
+        "$value": "{font.family.display}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_FAMILY"]
+        }
+      }
+    },
+    "label": {
+      "size": {
+        "xsmall": {
+          "$type": "dimension",
+          "$value": "{font.size.100}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "small": {
+          "$type": "dimension",
+          "$value": "{font.size.200}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "default": {
+          "$type": "dimension",
+          "$value": "{font.size.300}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "large": {
+          "$type": "dimension",
+          "$value": "{font.size.400}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        },
+        "xlarge": {
+          "$type": "dimension",
+          "$value": "{font.size.500}",
+          "$extensions": {
+            "com.figma.scopes": ["FONT_SIZE"]
+          }
+        }
+      },
+      "font-weight": {
+        "$type": "number",
+        "$value": "{font.weight.semibold}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_STYLE"]
+        }
+      },
+      "font-family": {
+        "$type": "string",
+        "$value": "{font.family.base}",
+        "$extensions": {
+          "com.figma.scopes": ["FONT_FAMILY"]
+        }
+      }
+    }
+  }
+}

package/src/utils/__tests__/css-utils-format-utils.test.js

@@ -0,0 +1,312 @@
+import { describe, it, expect } from "vitest";
+import {
+  generateBorderClasses,
+  generateColorClasses,
+  generateFontClasses,
+  generateSpacingClasses,
+} from "../css-utils-format-utils.js";
+
+// ---------------------------------------------------------------------------
+// generateBorderClasses
+// ---------------------------------------------------------------------------
+
+describe("generateBorderClasses", () => {
+  describe("border-radius tokens", () => {
+    it("generates border-radius class with CSS var fallback", () => {
+      const result = generateBorderClasses("border-radius-small", "4px", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-border-radius-small {border-radius: var(--a2-border-radius-small, 4px)}",
+      ]);
+    });
+
+    it("works without prefix or cssVarPrefix", () => {
+      const result = generateBorderClasses("border-radius-medium", "6px");
+      expect(result).toEqual([
+        ".border-radius-medium {border-radius: var(--border-radius-medium, 6px)}",
+      ]);
+    });
+  });
+
+  describe("border-width tokens", () => {
+    it("generates border-width class with CSS var fallback", () => {
+      const result = generateBorderClasses("border-width-thin", "1px", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-border-width-thin {border-width: var(--a2-border-width-thin, 1px)}",
+      ]);
+    });
+  });
+
+  describe("border-color tokens", () => {
+    it("generates border-color class without dark value", () => {
+      const result = generateBorderClasses("border-color-default", "#ccc", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-border-color-default {border-color: var(--a2-border-color-default, #ccc)}",
+      ]);
+    });
+
+    it("includes light-dark() in border-color class when darkValue is provided", () => {
+      const result = generateBorderClasses("border-color-default", "#ccc", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+        darkValue: "#333",
+      });
+      expect(result).toEqual([
+        ".a2-border-color-default {border-color: var(--a2-border-color-default, light-dark(#ccc, #333))}",
+      ]);
+    });
+  });
+
+  describe("unrecognized token names", () => {
+    it("returns empty array for unrecognized names", () => {
+      const result = generateBorderClasses(
+        "shadow-default",
+        "0 0 4px rgba(0,0,0,0.2)",
+        {
+          prefix: "a2-",
+          cssVarPrefix: "a2-",
+        },
+      );
+      expect(result).toEqual([]);
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// generateColorClasses
+// ---------------------------------------------------------------------------
+
+describe("generateColorClasses", () => {
+  describe("background-color tokens", () => {
+    it("generates .bg-* class with background-color property", () => {
+      const result = generateColorClasses("background-color-primary", "#fff", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-bg-primary {background-color: var(--a2-background-color-primary, #fff)}",
+      ]);
+    });
+
+    it("includes light-dark() when darkValue provided", () => {
+      const result = generateColorClasses("background-color-primary", "#fff", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+        darkValue: "#111",
+      });
+      expect(result[0]).toContain("light-dark(#fff, #111)");
+    });
+  });
+
+  describe("foreground-color tokens", () => {
+    it("generates .c-* class with color property", () => {
+      const result = generateColorClasses("foreground-color-default", "#333", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-c-default {color: var(--a2-foreground-color-default, #333)}",
+      ]);
+    });
+  });
+
+  describe("overlay-color tokens", () => {
+    it("generates .bg-overlay-* class with background-color property", () => {
+      const result = generateColorClasses(
+        "overlay-color-scrim",
+        "rgba(0,0,0,0.5)",
+        { prefix: "a2-", cssVarPrefix: "a2-" },
+      );
+      expect(result).toEqual([
+        ".a2-bg-overlay-scrim {background-color: var(--a2-overlay-color-scrim, rgba(0,0,0,0.5))}",
+      ]);
+    });
+  });
+
+  describe("status-color tokens", () => {
+    it("generates 3 classes for non-danger status tokens", () => {
+      const result = generateColorClasses(
+        "status-color-success-default",
+        "#2d8a4e",
+        { prefix: "a2-", cssVarPrefix: "a2-" },
+      );
+      expect(result).toHaveLength(3);
+      // c-status class
+      expect(result[0]).toBe(
+        ".a2-c-status-success-default {color: var(--a2-status-color-success-default, #2d8a4e)}",
+      );
+      // bg-status class
+      expect(result[1]).toBe(
+        ".a2-bg-status-success-default {background-color: var(--a2-status-color-success-default, #2d8a4e)}",
+      );
+      // border-color-status class
+      expect(result[2]).toBe(
+        ".a2-border-color-status-success-default {border-color: var(--a2-status-color-success-default, #2d8a4e)}",
+      );
+    });
+
+    it("generates only 2 classes for danger status tokens (no border)", () => {
+      const result = generateColorClasses(
+        "status-color-danger-default",
+        "#e13212",
+        { prefix: "a2-", cssVarPrefix: "a2-" },
+      );
+      expect(result).toHaveLength(2);
+      expect(result.some((c) => c.includes("border-color"))).toBe(false);
+    });
+  });
+
+  describe("border-color tokens", () => {
+    it("generates border-color class with color property", () => {
+      const result = generateColorClasses("border-color-default", "#ddd", {
+        prefix: "a2-",
+        cssVarPrefix: "a2-",
+      });
+      expect(result).toEqual([
+        ".a2-border-color-default {border-color: var(--a2-border-color-default, #ddd)}",
+      ]);
+    });
+  });
+
+  describe("unrecognized token names", () => {
+    it("returns empty array", () => {
+      const result = generateColorClasses("typography-body-font-size", "1rem", {
+        prefix: "a2-",
+      });
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe("no options", () => {
+    it("works without options (uses defaults)", () => {
+      const result = generateColorClasses("background-color-page", "#fff");
+      expect(result[0]).toBe(
+        ".bg-page {background-color: var(--background-color-page, #fff)}",
+      );
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// generateFontClasses
+// ---------------------------------------------------------------------------
+
+describe("generateFontClasses", () => {
+  it("generates .ff-* class for font-family tokens", () => {
+    const result = generateFontClasses(
+      "typography-body-font-family",
+      "Arial, sans-serif",
+      { prefix: "a2-" },
+    );
+    expect(result).toEqual([".a2-ff-body {font-family: Arial, sans-serif}"]);
+  });
+
+  it("generates .fw-* class for font-weight tokens", () => {
+    const result = generateFontClasses("typography-body-font-weight", "400", {
+      prefix: "a2-",
+    });
+    expect(result).toEqual([".a2-fw-body {font-weight: 400}"]);
+  });
+
+  it("generates .fs-* class for font-size tokens", () => {
+    const result = generateFontClasses("typography-body-size", "1rem", {
+      prefix: "a2-",
+    });
+    expect(result).toEqual([".a2-fs-body {font-size: 1rem}"]);
+  });
+
+  it("returns empty array for non-typography tokens", () => {
+    const result = generateFontClasses("color-primary-500", "#fff", {
+      prefix: "a2-",
+    });
+    expect(result).toEqual([]);
+  });
+
+  it("returns empty array for typography token without recognized sub-type", () => {
+    const result = generateFontClasses("typography-body-line-height", "1.5", {
+      prefix: "a2-",
+    });
+    expect(result).toEqual([]);
+  });
+
+  it("works without prefix option (default empty)", () => {
+    const result = generateFontClasses(
+      "typography-heading-font-family",
+      "Georgia",
+    );
+    expect(result).toEqual([".ff-heading {font-family: Georgia}"]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// generateSpacingClasses
+// ---------------------------------------------------------------------------
+
+describe("generateSpacingClasses", () => {
+  const name = "size-4";
+  const value = "1rem";
+  const opts = { prefix: "a2-", cssVarPrefix: "a2-" };
+
+  it("generates 14 classes total (6 directions × 2 + 2 shorthand)", () => {
+    const result = generateSpacingClasses(name, value, opts);
+    expect(result).toHaveLength(14);
+  });
+
+  it("generates margin-inline-start class", () => {
+    const result = generateSpacingClasses(name, value, opts);
+    expect(result).toContain(
+      ".a2-m-inline-start-4 {margin-inline-start: var(--a2-size-4, 1rem)}",
+    );
+  });
+
+  it("generates padding-inline-start class", () => {
+    const result = generateSpacingClasses(name, value, opts);
+    expect(result).toContain(
+      ".a2-p-inline-start-4 {padding-inline-start: var(--a2-size-4, 1rem)}",
+    );
+  });
+
+  it("generates all 6 directions (inline-start, inline-end, block-start, block-end, block, inline)", () => {
+    const result = generateSpacingClasses(name, value, opts);
+    const directions = [
+      "inline-start",
+      "inline-end",
+      "block-start",
+      "block-end",
+      "block",
+      "inline",
+    ];
+    for (const dir of directions) {
+      expect(result.some((c) => c.includes(`m-${dir}`))).toBe(true);
+      expect(result.some((c) => c.includes(`p-${dir}`))).toBe(true);
+    }
+  });
+
+  it("generates shorthand margin and padding classes", () => {
+    const result = generateSpacingClasses(name, value, opts);
+    expect(result).toContain(".a2-m-4 {margin: var(--a2-size-4, 1rem)}");
+    expect(result).toContain(".a2-p-4 {padding: var(--a2-size-4, 1rem)}");
+  });
+
+  it("uses cssVarPrefix in the CSS variable name", () => {
+    const result = generateSpacingClasses("size-8", "2rem", {
+      prefix: "",
+      cssVarPrefix: "a2-",
+    });
+    expect(result.every((c) => c.includes("var(--a2-size-8,"))).toBe(true);
+  });
+
+  it("works without options (default empty prefix)", () => {
+    const result = generateSpacingClasses("size-2", "0.5rem");
+    expect(result).toHaveLength(14);
+    expect(result[0]).toContain("var(--size-2,");
+  });
+});