adilallo
ca928e306b
Drop Cookies Settings from the footer, link the Home features that already have pages, and give leftover routes their own descriptions.
60 lines
3.0 KiB
TypeScript
60 lines
3.0 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-blue700");
|
|
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-blue700");
|
|
expect(decl("--color-content-invert-brand-navy")).toContain("royal-blue1000");
|
|
expect(decl("--color-content-invert-quaternary")).toContain("gray-500");
|
|
expect(decl("--color-content-invert-negative-primary")).toContain("red600");
|
|
expect(decl("--color-gray-150")).toBe("#d2d2d2");
|
|
expect(decl("--color-gray-500")).toBe("#717171");
|
|
expect(decl("--color-royal-blue-royal-blue700")).toBe("#233bb6");
|
|
expect(decl("--color-red-red600")).toBe("#b62e1a");
|
|
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");
|
|
});
|
|
});
|