53 lines
2.6 KiB
TypeScript
53 lines
2.6 KiB
TypeScript
import { readFileSync } from "node:fs";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
const css = readFileSync("app/tailwind.css", "utf8");
|
|
|
|
function decl(name: string): string {
|
|
const match = css.match(new RegExp(`${name}:\\s*([\\s\\S]*?);`));
|
|
if (!match?.[1]) throw new Error(`missing ${name}`);
|
|
return match[1].replace(/\s+/g, " ").trim();
|
|
}
|
|
|
|
describe("Figma tokens", () => {
|
|
it("points theme colors, radius, and focus at Figma", () => {
|
|
expect(decl("--radius-500")).toBe("24px");
|
|
expect(decl("--color-surface-default-brand-royal")).toContain("royal-blue600");
|
|
expect(decl("--color-surface-default-brand-kiwi")).toContain("kiwi800");
|
|
expect(decl("--color-content-default-brand-secondary")).toContain("yellow200");
|
|
expect(decl("--color-content-invert-brand-secondary")).toContain("yellow800");
|
|
expect(decl("--color-content-invert-brand-royal")).toContain("royal-blue400");
|
|
expect(decl("--color-content-default-utility-negative")).toContain("red300");
|
|
expect(decl("--color-content-default-negative-primary")).toContain(
|
|
"utility-negative",
|
|
);
|
|
expect(decl("--color-border-invert-secondary")).toContain("gray-100");
|
|
expect(decl("--color-border-invert-tertiary")).toContain("gray-300");
|
|
expect(decl("--color-border-default-control")).toContain("gray-400");
|
|
expect(decl("--shadow-focus-default")).toContain("gray-900");
|
|
expect(decl("--shadow-focus-invert")).toContain("gray-000");
|
|
expect(css).not.toMatch(/--color-[a-z0-9-]+-light:/);
|
|
expect(css).not.toContain("--font-mono");
|
|
expect(css).not.toContain("--measures-radius-");
|
|
expect(css).not.toContain("--color-surface-inverse-");
|
|
});
|
|
|
|
it("matches the type scale and the five sizing steps", () => {
|
|
expect(decl("--sizing-450")).toBe("18px");
|
|
expect(decl("--sizing-700")).toBe("28px");
|
|
expect(decl("--sizing-900")).toBe("36px");
|
|
expect(decl("--sizing-1100")).toBe("44px");
|
|
expect(decl("--sizing-1300")).toBe("52px");
|
|
expect(decl("--text-display-s")).toBe("32px");
|
|
expect(decl("--text-display-s--font-weight")).toBe("500");
|
|
expect(decl("--text-display-xxl--line-height")).toContain("line-height-2600");
|
|
expect(decl("--text-heading-xl--font-weight")).toBe("700");
|
|
expect(decl("--text-paragraph-l--line-height")).toContain("line-height-600");
|
|
expect(decl("--text-paragraph-strong-m--font-weight")).toBe("700");
|
|
expect(decl("--text-paragraph-em-m")).toBe("16px");
|
|
expect(decl("--text-link-s")).toBe("14px");
|
|
expect(decl("--text-small-display")).toContain("display-s");
|
|
expect(decl("--typography-line-height-1800")).toContain("scale-072");
|
|
});
|
|
});
|