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/sections/ContentBanner/ContentBanner.view.tsx
+15 -15
View File
@@ -23,18 +23,18 @@ function ContentBannerGuideView({
return (
<section
className="relative w-full overflow-clip px-[var(--spacing-scale-020)] py-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-032)] sm:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-048)] lg:py-[var(--spacing-scale-040)] xl:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)]"
className="relative w-full overflow-clip px-[var(--space-500)] py-[var(--space-600)] sm:px-[var(--space-800)] sm:py-[var(--space-800)] lg:px-[var(--space-1200)] lg:py-[var(--space-1000)] xl:px-[var(--space-1800)] xl:py-[var(--space-2100)]"
aria-labelledby="content-banner-title"
>
<div
className="mx-auto flex w-full max-w-[1024px] flex-col items-start gap-[var(--spacing-scale-024)] md:flex-row md:items-start md:gap-[var(--spacing-scale-024)] lg:items-center lg:gap-[var(--spacing-scale-032)] xl:max-w-[1312px] xl:gap-[var(--spacing-scale-056)]"
className="mx-auto flex w-full max-w-[1024px] flex-col items-start gap-[var(--space-600)] md:flex-row md:items-start md:gap-[var(--space-600)] lg:items-center lg:gap-[var(--space-800)] xl:max-w-[1312px] xl:gap-[var(--space-1400)]"
data-node-id="19189:9358"
>
<div
className="flex w-full shrink-0 flex-col items-start justify-center gap-[var(--measures-spacing-016)] md:max-w-[280px] lg:max-w-[365px] xl:max-w-[623px]"
className="flex w-full shrink-0 flex-col items-start justify-center gap-[var(--space-400)] md:max-w-[280px] lg:max-w-[365px] xl:max-w-[623px]"
data-node-id="19189:9171"
>
<div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
<div className="flex w-full flex-col items-start gap-[var(--space-100)] text-left text-[var(--color-content-default-primary)]">
<h1
id="content-banner-title"
className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-medium-display"
@@ -49,7 +49,7 @@ function ContentBannerGuideView({
</div>
{updatedLabel ? (
<div
className="flex w-full flex-wrap items-end gap-[var(--measures-spacing-008,8px)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
className="flex w-full flex-wrap items-end gap-[var(--space-200)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
data-name="Metadata Container"
>
<span>{author}</span>
@@ -59,7 +59,7 @@ function ContentBannerGuideView({
</div>
<div
className="flex w-full shrink-0 items-center justify-center max-sm:pb-[var(--spacing-scale-024)] md:flex-1 md:justify-end"
className="flex w-full shrink-0 items-center justify-center max-sm:pb-[var(--space-600)] md:flex-1 md:justify-end"
data-node-id="22078:806960"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -96,18 +96,18 @@ function ContentBannerArticleView({
className="
relative z-[1] w-full overflow-visible
min-h-[275px]
pt-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)]
pb-[var(--spacing-scale-064)]
sm:min-h-[326px] sm:pb-[var(--spacing-scale-048)]
md:min-h-[224px] md:px-[var(--spacing-scale-024)] md:pb-0
md:pt-[var(--spacing-scale-008)]
lg:min-h-[358.4px] lg:px-[var(--spacing-scale-048)] lg:py-[var(--spacing-scale-040)]
xl:min-h-[504px] xl:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)]
pt-[var(--space-400)] px-[var(--space-400)]
pb-[var(--space-1800)]
sm:min-h-[326px] sm:pb-[var(--space-1200)]
md:min-h-[224px] md:px-[var(--space-600)] md:pb-0
md:pt-[var(--space-200)]
lg:min-h-[358.4px] lg:px-[var(--space-1200)] lg:py-[var(--space-1000)]
xl:min-h-[504px] xl:px-[var(--space-1800)] xl:py-[var(--space-2100)]
"
>
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--spacing-scale-024)] sm:-bottom-[var(--spacing-scale-032)] md:hidden"
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--space-600)] sm:-bottom-[var(--space-800)] md:hidden"
data-name="ContentBannerBackgroundHorizontal"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -120,7 +120,7 @@ function ContentBannerArticleView({
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--spacing-scale-032)] hidden md:block"
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--space-800)] hidden md:block"
data-name="ContentBannerBackgroundSection"
>
{/* eslint-disable-next-line @next/next/no-img-element */}