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/QuoteBlock/QuoteBlock.container.tsx
+13 -13
View File
@@ -26,10 +26,10 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
const variants: Record<string, VariantConfig> = {
compact: {
container:
"py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)]",
card: "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-040)] md:px-[var(--spacing-scale-024)] rounded-[var(--radius-measures-radius-small)]",
gap: "gap-[var(--spacing-scale-016)] md:gap-[var(--spacing-scale-024)]",
avatarGap: "gap-[var(--spacing-scale-012)]",
"py-[var(--space-800)] px-[var(--space-400)]",
card: "py-[var(--space-800)] px-[var(--space-400)] md:py-[var(--space-1000)] md:px-[var(--space-600)] rounded-[var(--radius-300)]",
gap: "gap-[var(--space-400)] md:gap-[var(--space-600)]",
avatarGap: "gap-[var(--space-300)]",
avatar: "w-[48px] h-[48px] md:w-[64px] md:h-[64px]",
quote: "text-[16px] leading-[120%] md:text-[20px] md:leading-[110%]",
author: "text-[10px] leading-[120%] md:text-[12px]",
@@ -38,11 +38,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
standard: {
container:
"md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)]",
card: "py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px]",
gap: "gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px]",
"md:py-[var(--space-800)] md:px-[var(--space-400)] lg:p-[var(--space-1800)]",
card: "py-[var(--space-1800)] px-[var(--space-500)] md:py-[var(--space-1800)] md:px-[var(--space-1200)] md:rounded-[var(--radius-400)] lg:py-[var(--space-1800)] lg:pl-[120px] lg:pr-[320px]",
gap: "gap-[var(--space-600)] md:gap-[var(--space-1200)] lg:gap-[var(--space-1800)] xl:gap-[105px]",
avatarGap:
"gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]",
"gap-[var(--space-500)] lg:gap-[var(--sizing-450)] xl:gap-[var(--space-800)]",
avatar:
"md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
quote:
@@ -55,11 +55,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
extended: {
container:
"py-[var(--spacing-scale-048)] px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--spacing-scale-048)]",
card: "py-[var(--spacing-scale-080)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] md:rounded-[var(--radius-measures-radius-large)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
gap: "gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-064)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
"py-[var(--space-1200)] px-[var(--space-600)] md:py-[var(--space-1800)] md:px-[var(--space-800)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--space-1200)]",
card: "py-[var(--spacing-scale-080)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)] md:rounded-[var(--radius-500)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
gap: "gap-[var(--space-800)] md:gap-[var(--space-1800)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
avatarGap:
"gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] xl:gap-[var(--spacing-scale-048)]",
"gap-[var(--space-800)] lg:gap-[var(--space-1000)] xl:gap-[var(--space-1200)]",
avatar:
"w-[80px] h-[80px] md:w-[140px] md:h-[140px] lg:w-[180px] lg:h-[180px] xl:w-[240px] xl:h-[240px]",
quote:
@@ -72,7 +72,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
statement: {
container:
"flex w-full flex-col items-center px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-096)] md:py-[var(--space-1200)]",
"flex w-full flex-col items-center px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-2400)] md:py-[var(--space-1200)]",
card: "",
gap: "",
avatarGap: "",
app/components/sections/QuoteBlock/QuoteBlock.view.tsx
+8 -8
View File
@@ -35,7 +35,7 @@ function QuoteBlockView({
role="region"
>
<div
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--spacing-scale-020)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--space-500)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
>
<QuoteStatementDecor />
<div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">
@@ -64,11 +64,11 @@ function QuoteBlockView({
role="region"
>
<div
className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
className={`${config.card} bg-[var(--color-surface-invert-brand-secondary)] relative overflow-hidden`}
>
{/* Background with noise texture */}
<div
className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
className="absolute inset-0 bg-[var(--color-surface-invert-brand-secondary)]"
style={{
filter:
'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
@@ -101,7 +101,7 @@ function QuoteBlockView({
/>
) : (
<div
className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
className={`flex items-center justify-center bg-[var(--color-gray-300)] rounded-full ${config.avatar} text-[var(--color-gray-600)] font-bold`}
>
<span className="text-sm md:text-base lg:text-lg xl:text-xl">
{author
@@ -125,7 +125,7 @@ function QuoteBlockView({
className={[
"font-bricolage-grotesque font-normal",
config.quote,
"text-[var(--color-content-inverse-primary)]",
"text-[var(--color-content-invert-primary)]",
// give space for the hanging open-quote so it's not clipped:
"pl-[0.6em] -indent-[0.6em]",
// inject quotes
@@ -139,10 +139,10 @@ function QuoteBlockView({
</p>
</blockquote>
</div>
<footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
<footer className="flex flex-col gap-[var(--space-200)] md:gap-[var(--space-300)] xl:gap-[var(--space-500)]">
<cite
id={authorId}
className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
className={`font-normal ${config.author} text-[var(--color-content-invert-primary)] uppercase not-italic`}
>
{author}
</cite>
@@ -153,7 +153,7 @@ function QuoteBlockView({
className={[
"font-normal",
config.source,
"text-[var(--color-content-inverse-primary)] uppercase",
"text-[var(--color-content-invert-primary)] uppercase",
"pl-[0.6em] -indent-[0.6em]",
"relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
"before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]",
app/components/sections/QuoteBlock/QuoteDecor.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface QuoteDecorProps {
const QuoteDecor = memo<QuoteDecorProps>(({ className = "" }) => {
return (
<svg
className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
className={`text-[var(--color-surface-invert-brand-primary)] opacity-100 ${className}`}
viewBox="400 0 442 163"
aria-hidden="true"
overflow="visible"