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/asset/Avatar/Avatar.tsx
+6 -6
View File
@@ -29,13 +29,13 @@ export interface AvatarProps {
const SIZE_CLASS: Record<AvatarSizeValue, string> = {
small:
"h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] text-xx-small-label",
"h-[var(--space-400)] w-[var(--space-400)] text-xx-small-label",
medium:
"h-[var(--spacing-scale-018)] w-[var(--spacing-scale-018)] text-xx-small-label",
"h-[var(--sizing-450)] w-[var(--sizing-450)] text-xx-small-label",
large:
"h-[var(--spacing-scale-024)] w-[var(--spacing-scale-024)] text-xx-small-label",
"h-[var(--space-600)] w-[var(--space-600)] text-xx-small-label",
xlarge:
"h-[var(--spacing-scale-032)] w-[var(--spacing-scale-032)] text-x-small-label",
"h-[var(--space-800)] w-[var(--space-800)] text-x-small-label",
};
function formatAvatarInitials(value: string): string {
@@ -92,8 +92,8 @@ const Avatar = memo<AvatarProps>(
const radiusClass =
shape === "rounded-square"
? "rounded-[var(--measures-radius-200,8px)]"
: "rounded-[var(--radius-measures-radius-full)]";
? "rounded-[var(--radius-200)]"
: "rounded-[var(--radius-full)]";
const fallbackChrome =
variant === "outlined"
? "border-[1.5px] border-solid border-[var(--color-content-default-brand-primary)] bg-transparent text-[var(--color-content-default-brand-primary)]"
app/components/asset/AvatarContainer/AvatarContainer.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ const AvatarContainer = memo<AvatarContainerProps>(
({ children, size: sizeProp = "small", className = "", ...props }) => {
const size = sizeProp;
const sizeStyles: Record<string, string> = {
small: "flex -space-x-[var(--spacing-scale-008)]",
small: "flex -space-x-[var(--space-200)]",
medium: "flex -space-x-[9px]",
large: "flex -space-x-[var(--spacing-scale-010)]",
large: "flex -space-x-[var(--space-250)]",
xlarge: "flex -space-x-[13px]",
};
app/components/asset/Logo/Logo.tsx
+7 -7
View File
@@ -40,8 +40,8 @@ const Logo = memo<LogoProps>(
// instances scale that lockup.
const sizes: Record<string, SizeConfig> = {
default: {
containerHeight: "h-[var(--spacing-scale-040)]",
gap: "gap-[var(--spacing-scale-006)]",
containerHeight: "h-[var(--space-1000)]",
gap: "gap-[var(--space-150)]",
textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]",
iconSize: "w-[27px] h-[27px]",
@@ -57,16 +57,16 @@ const Logo = memo<LogoProps>(
"w-[27.96px] h-[27.96px] md:w-[38.18px] md:h-[38.18px] lg:w-[55.91px] lg:h-[55.91px]",
},
createFlow: {
containerHeight: "h-[30px] md:h-[var(--spacing-scale-040)]",
gap: "gap-[4.5px] md:gap-[var(--spacing-scale-006)]",
containerHeight: "h-[30px] md:h-[var(--space-1000)]",
gap: "gap-[4.5px] md:gap-[var(--space-150)]",
textSize: "text-[16.48px] md:text-[21.97px]",
lineHeight: "leading-[20.28px] md:leading-[27.05px]",
iconSize: "w-[20.25px] h-[20.25px] md:w-[27px] md:h-[27px]",
},
topNavFolderTop: {
containerHeight:
"h-[14.1px] sm:h-[21.35px] md:h-[var(--spacing-scale-032)] lg:h-[var(--spacing-scale-040)] xl:h-[50.35px]",
gap: "gap-0 sm:gap-[3.2px] md:gap-[4.8px] lg:gap-[var(--spacing-scale-006)] xl:gap-[7.5px]",
"h-[14.1px] sm:h-[21.35px] md:h-[var(--space-800)] lg:h-[var(--space-1000)] xl:h-[50.35px]",
gap: "gap-0 sm:gap-[3.2px] md:gap-[4.8px] lg:gap-[var(--space-150)] xl:gap-[7.5px]",
textSize:
"text-[11.57px] sm:text-[11.72px] md:text-[17.58px] lg:text-[21.97px] xl:text-[27.47px]",
lineHeight:
@@ -76,7 +76,7 @@ const Logo = memo<LogoProps>(
},
topNavHeader: {
containerHeight:
"h-[14.2px] sm:h-[21.22px] md:h-[var(--spacing-scale-032)] lg:h-[40.69px] xl:h-[50.35px]",
"h-[14.2px] sm:h-[21.22px] md:h-[var(--space-800)] lg:h-[40.69px] xl:h-[50.35px]",
gap: "gap-0 sm:gap-[3.18px] md:gap-[4.85px] lg:gap-[6.06px] xl:gap-[7.5px]",
textSize:
"text-[11.57px] sm:text-[11.66px] md:text-[17.76px] lg:text-[22.2px] xl:text-[27.47px]",