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/cards/Mini/Mini.container.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ const MiniContainer = memo<MiniProps>(
({
children,
className = "",
backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
backgroundColor = "bg-[var(--color-surface-invert-brand-royal)]",
panelContent,
label,
labelLine1,
@@ -51,7 +51,7 @@ const MiniContainer = memo<MiniProps>(
...baseProps,
href,
className:
"block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
"block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
tabIndex: 0,
},
};
@@ -64,7 +64,7 @@ const MiniContainer = memo<MiniProps>(
...baseProps,
onClick,
className:
"block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
"block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
tabIndex: 0,
onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.key === "Enter" || e.key === " ") {
app/components/cards/Mini/Mini.view.tsx
+2 -2
View File
@@ -30,8 +30,8 @@ function MiniView({
: `h-[186px] flex flex-col gap-[7px] ${className}`;
const panelClass = featureGridShell
? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
: `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
? `h-[138px] shrink-0 rounded-[var(--radius-400)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
: `flex-1 rounded-[var(--radius-500)] border border-[1px] py-[var(--space-800)] px-[var(--space-600)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
const imageClass = featureGridShell
? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`