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/navigation/MenuItem/MenuItem.container.tsx
+11 -11
View File
@@ -33,16 +33,16 @@ const MenuItemContainer = memo<MenuItemProps>(
string
> = {
"X Small": reducedPadding
? "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]"
: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
Small: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
? "px-[var(--space-100)] py-[var(--space-050)]"
: "px-[var(--space-100)] py-[var(--space-050)]",
Small: "px-[var(--space-100)] py-[var(--space-050)]",
Medium: reducedPadding
? "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] h-[32px]"
: "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] h-[32px]",
? "px-[var(--space-050)] py-[var(--space-200)] h-[32px]"
: "px-[var(--space-200)] py-[var(--space-200)] h-[32px]",
Large:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
"px-[var(--space-400)] py-[var(--space-400)] h-[44px]",
"X Large":
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
"px-[var(--space-400)] py-[var(--space-400)] h-[44px]",
};
// Text styles based on Figma specifications
@@ -74,11 +74,11 @@ const MenuItemContainer = memo<MenuItemProps>(
const inverseModeStyles: Record<"default" | "hover" | "selected", string> =
{
default:
"bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-inverse-brand-secondary)] hover:text-[var(--color-content-inverse-primary,black)]",
"bg-transparent text-[var(--color-content-invert-primary,black)] hover:bg-[var(--color-surface-invert-brand-secondary)] hover:text-[var(--color-content-invert-primary,black)]",
hover:
"bg-[var(--color-surface-inverse-brand-secondary)] text-[var(--color-content-inverse-primary,black)]",
"bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-primary,black)]",
selected:
"border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-inverse-brand-secondary)]",
"border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-invert-primary,black)] bg-transparent hover:bg-[var(--color-surface-invert-brand-secondary)]",
};
// Get state styles based on mode
@@ -86,7 +86,7 @@ const MenuItemContainer = memo<MenuItemProps>(
mode === "inverse" ? inverseModeStyles : defaultModeStyles;
// Base styles
const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-measures-radius-full)] transition-all duration-200 ease-in-out cursor-pointer`;
const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-full)] transition-all duration-200 ease-in-out cursor-pointer`;
// Interactive styles
const interactiveStyles =