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

app/components/layout/Accordion/Accordion.view.tsx
+7 -7
View File
@@ -11,20 +11,20 @@ const SIZE_CLASSES: Record<
> = {
s: {
header:
"min-h-[88px] gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center",
"min-h-[88px] gap-[var(--space-400)] px-[var(--space-400)] py-[var(--space-500)] items-center",
title: "text-[14px] font-medium leading-[18px]",
subhead: "text-x-small-label",
},
/** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */
m: {
header:
"min-h-[104px] gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center",
"min-h-[104px] gap-[var(--space-600)] px-[var(--space-400)] py-[var(--space-600)] items-center",
title: "text-large-label font-medium leading-6",
subhead: "text-[14px] leading-[18px] font-medium",
},
l: {
header:
"min-h-[135px] gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center",
"min-h-[135px] gap-[var(--space-1200)] px-[var(--space-400)] py-[var(--space-800)] items-center",
/** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */
title: "text-x-large-label font-normal leading-7",
subhead: "text-large-label",
@@ -32,9 +32,9 @@ const SIZE_CLASSES: Record<
};
const PANEL_CLASSES: Record<AccordionSizeValue, string> = {
s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] text-small-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
m: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-024)] text-medium-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
l: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-032)] text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]",
s: "px-[var(--space-400)] pb-[var(--space-500)] text-small-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
m: "px-[var(--space-400)] pb-[var(--space-600)] text-medium-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
l: "px-[var(--space-400)] pb-[var(--space-800)] text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]",
};
function withLgClasses(base: string, lg: string): string {
@@ -122,7 +122,7 @@ function AccordionView({
onClick={onToggle}
className={`flex w-full ${sizeClass.header} text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-content-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-secondary)]`}
>
<span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]">
<span className="flex min-w-0 flex-1 flex-col gap-[var(--space-100)]">
<span
className={`text-[var(--color-content-default-primary,white)] ${sizeClass.title}`}
>