CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-11-02 17:03:43 -07:00
1 parent 63d5d21ae0
commit e808fe70bf
162 files changed
+1385 -1377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tests/components/AskOrganizer.test.tsx
+5 -5
View File
@@ -99,8 +99,8 @@ describe("AskOrganizer (behavioral tests)", () => {
);
const section = container.querySelector('[data-figma-node="22015-42624"]');
expect(section).toBeInTheDocument();
expect(section).toHaveClass("py-[var(--spacing-scale-032)]");
expect(section).not.toHaveClass("py-[var(--spacing-scale-096)]");
expect(section).toHaveClass("py-[var(--space-800)]");
expect(section).not.toHaveClass("py-[var(--space-2400)]");
expect(
screen.getByRole("heading", { name: "Still have questions?" }),
).toBeInTheDocument();
@@ -116,10 +116,10 @@ describe("AskOrganizer (behavioral tests)", () => {
);
const section = container.querySelector('[data-figma-node="18116-15960"]');
expect(section).toHaveClass(
"py-[var(--spacing-scale-040)]",
"px-[var(--spacing-scale-032)]",
"py-[var(--space-1000)]",
"px-[var(--space-800)]",
);
expect(section).not.toHaveClass("py-[var(--spacing-scale-096)]");
expect(section).not.toHaveClass("py-[var(--space-2400)]");
});
it("does not force 358px min-width below md (fits 320px baseline)", () => {
tests/components/Avatar.test.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ describe("Avatar (behavioral tests)", () => {
<Avatar alt="Org" initials="CR" shape="rounded-square" />,
);
expect(container.firstChild).toHaveClass(
"rounded-[var(--measures-radius-200,8px)]",
"rounded-[var(--radius-200)]",
);
});
tests/components/Chip.test.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ describe("Chip", () => {
expect(chip.style.color).toContain("--color-content-default-brand-primary");
expect(chip.style.backgroundColor).toBe("transparent");
expect(chip.style.borderColor).toContain(
"--color-border-default-tertiary",
"--color-border-default-control",
);
});
tests/components/ContentBanner.test.tsx
+1 -1
View File
@@ -198,7 +198,7 @@ describe("ContentBanner", () => {
'[data-node-id="22078:806960"]',
);
expect(logoMarkWrap?.className).toMatch(
/max-sm:pb-\[var\(--spacing-scale-024\)\]/,
/max-sm:pb-\[var\(--space-600\)\]/,
);
expect(logoMarkWrap).toHaveClass("md:justify-end");
const logoMark = logoMarkWrap?.querySelector("img");
tests/components/FeatureGrid.test.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ describe("FeatureGrid (behavioral tests)", () => {
render(<FeatureGrid title="Test Title" subtitle="Test Subtitle" />);
const title = screen.getByRole("heading", { name: "Test Title" });
expect(title.className).toMatch(/text-\[18px\]/);
expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/);
expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600\)\]/);
const subtitle = screen.getByText("Test Subtitle");
expect(subtitle.tagName).toBe("P");
expect(subtitle).toHaveClass("text-small-paragraph", "md:text-medium-paragraph");
tests/components/InputLabel.test.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ describe("InputLabel – behaviour specifics", () => {
render(<InputLabel label="Test Label" palette="inverse" />);
const label = screen.getByText("Test Label");
expect(label).toHaveClass(
"text-[color:var(--color-content-inverse-secondary,#1f1f1f)]",
"text-[color:var(--color-content-invert-secondary,#1f1f1f)]",
);
});
});
tests/components/Logo.test.tsx
+2 -2
View File
@@ -75,8 +75,8 @@ describe("Logo (behavioral tests)", () => {
it("uses the Figma 6px wordmark-to-mark gap at the default size", () => {
const { container } = render(<Logo />);
const row = container.querySelector("a > div");
expect(row?.className).toContain("gap-[var(--spacing-scale-006)]");
expect(row?.className).toContain("h-[var(--spacing-scale-040)]");
expect(row?.className).toContain("gap-[var(--space-150)]");
expect(row?.className).toContain("h-[var(--space-1000)]");
});
it("shows the folder-top wordmark without a breakpoint hide", () => {
tests/components/Top.test.tsx
+4 -4
View File
@@ -102,9 +102,9 @@ describe('Top "Create rule" button', () => {
it("pads the standard header to hug Create rule", () => {
renderWithProviders(<Top folderTop={false} />);
const nav = screen.getByRole("navigation", { name: "Main navigation" });
expect(nav.className).toContain("py-[var(--spacing-scale-008)]");
expect(nav.className).toContain("lg:py-[var(--spacing-scale-016)]");
expect(nav.className).not.toContain("min-h-[var(--spacing-scale-040)]");
expect(nav.className).toContain("py-[var(--space-200)]");
expect(nav.className).toContain("lg:py-[var(--space-400)]");
expect(nav.className).not.toContain("min-h-[var(--space-1000)]");
});
it("uses ghost for Create rule", () => {
@@ -188,7 +188,7 @@ describe("Top header chrome", () => {
expect(tab?.className).toContain("sm:flex-1");
expect(nav?.className).toContain("md:absolute");
expect(nav?.className).toContain(
"md:left-[calc(50vw-var(--spacing-scale-016))]",
"md:left-[calc(50vw-var(--space-400))]",
);
expect(nav?.className).not.toContain("ml-auto");
});
tests/components/layout/Accordion.test.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ describe("Accordion", () => {
expect(button).toHaveClass("min-h-[88px]");
expect(button).toHaveClass("lg:min-h-[104px]");
expect(button).toHaveClass("xl:min-h-[135px]");
expect(button).toHaveClass("xl:gap-[var(--spacing-scale-048)]");
expect(button).toHaveClass("xl:gap-[var(--space-1200)]");
const title = screen.getByText("Question");
expect(title).toHaveClass("text-[14px]");
tests/components/sections/Accordion.test.tsx
+8 -8
View File
@@ -14,14 +14,14 @@ describe("FaqAccordion", () => {
const section = container.querySelector("section");
expect(section).toBeTruthy();
expect(section).toHaveClass("px-[var(--spacing-scale-004)]");
expect(section).toHaveClass("py-[var(--spacing-scale-032)]");
expect(section).toHaveClass("md:px-[var(--spacing-scale-096)]");
expect(section).toHaveClass("md:py-[var(--spacing-scale-064)]");
expect(section).toHaveClass("lg:px-[var(--spacing-scale-160)]");
expect(section).toHaveClass("lg:py-[var(--spacing-scale-096)]");
expect(section).not.toHaveClass("md:px-[var(--spacing-scale-160)]");
expect(section).not.toHaveClass("md:py-[var(--spacing-scale-096)]");
expect(section).toHaveClass("px-[var(--space-100)]");
expect(section).toHaveClass("py-[var(--space-800)]");
expect(section).toHaveClass("md:px-[var(--space-2400)]");
expect(section).toHaveClass("md:py-[var(--space-1800)]");
expect(section).toHaveClass("lg:px-[var(--space-4000)]");
expect(section).toHaveClass("lg:py-[var(--space-2400)]");
expect(section).not.toHaveClass("md:px-[var(--space-4000)]");
expect(section).not.toHaveClass("md:py-[var(--space-2400)]");
expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
});
});
tests/components/type/AboutHeader.test.tsx
+2 -2
View File
@@ -52,8 +52,8 @@ describe("AboutHeader", () => {
);
const heading = screen.getByRole("heading");
expect(heading.className).toContain("gap-[var(--spacing-scale-010)]");
expect(heading.className).toContain("xl:gap-[var(--spacing-scale-012)]");
expect(heading.className).toContain("gap-[var(--space-250)]");
expect(heading.className).toContain("xl:gap-[var(--space-300)]");
const marks = container.querySelectorAll("h1 span.inline-flex");
expect(marks).toHaveLength(2);
tests/components/type/TripleTextBlock.test.tsx
+11 -11
View File
@@ -68,15 +68,15 @@ describe("TripleTextBlock", () => {
const section = container.querySelector("section");
expect(section).toBeTruthy();
expect(section).toHaveClass("px-[var(--spacing-scale-032)]");
expect(section).toHaveClass("md:px-[var(--spacing-scale-096)]");
expect(section).toHaveClass("lg:px-[var(--spacing-scale-096)]");
expect(section).toHaveClass("xl:px-[var(--spacing-scale-160)]");
expect(section).toHaveClass("px-[var(--space-800)]");
expect(section).toHaveClass("md:px-[var(--space-2400)]");
expect(section).toHaveClass("lg:px-[var(--space-2400)]");
expect(section).toHaveClass("xl:px-[var(--space-4000)]");
expect(section).not.toHaveClass(
"md:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))]",
"md:px-[calc(var(--space-2400)+var(--space-2400))]",
);
expect(section).not.toHaveClass(
"xl:px-[calc(var(--spacing-scale-160)+var(--spacing-scale-096))]",
"xl:px-[calc(var(--space-4000)+var(--space-2400))]",
);
expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
});
@@ -100,11 +100,11 @@ describe("TripleTextBlock", () => {
const section = container.querySelector('[data-figma-node="22085-860414"]');
expect(section).toBeTruthy();
expect(section).toHaveClass("px-[var(--spacing-scale-032)]");
expect(section).toHaveClass("lg:px-[var(--spacing-scale-096)]");
expect(section).toHaveClass("xl:px-[var(--spacing-scale-160)]");
expect(section).toHaveClass("px-[var(--space-800)]");
expect(section).toHaveClass("lg:px-[var(--space-2400)]");
expect(section).toHaveClass("xl:px-[var(--space-4000)]");
expect(section).not.toHaveClass(
"lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))]",
"lg:px-[calc(var(--space-2400)+var(--space-2400))]",
);
expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
@@ -123,7 +123,7 @@ describe("TripleTextBlock", () => {
expect(screen.getByText("First paragraph.")).toBeInTheDocument();
expect(screen.getByText("Second paragraph.")).toBeInTheDocument();
expect(screen.getByText("Second paragraph.")).toHaveClass(
"mt-[var(--spacing-scale-024)]",
"mt-[var(--space-600)]",
);
expect(screen.getByRole("link", { name: "Setup your community" })).toHaveAttribute(
"href",