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/(marketing)/_components/LegalDocumentPage.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
const ARTICLE_COLUMN_CLASS =
"mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph";
"mx-auto flex w-full flex-col gap-[var(--space-800)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph";
const LINK_CLASS = "underline decoration-solid underline-offset-2";
@@ -160,7 +160,7 @@ export default function LegalDocumentPage({
/>
<article
className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]"
className="relative z-10 flex w-full justify-center p-[var(--space-600)] sm:px-0 sm:py-[var(--space-800)] xl:px-[calc(268/1440*100%)]"
data-node-id="19003:23574"
>
<div className={ARTICLE_COLUMN_CLASS}>
@@ -177,7 +177,7 @@ export default function LegalDocumentPage({
{page.sections.map((section) => (
<section
key={section.heading}
className="flex w-full flex-col gap-[var(--space-200,8px)]"
className="flex w-full flex-col gap-[var(--space-200)]"
data-name="TextBlock"
>
<h2 className="w-full font-bold">{section.heading}</h2>
app/(marketing)/_components/MarketingRuleStackSection.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { gridEntriesForSlugOrderWithCatalogFallback } from "../../../lib/templat
const RuleStack = dynamic(() => import("../../components/sections/RuleStack"), {
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
<section className="py-[var(--space-800)] min-h-[400px]" />
),
ssr: true,
});
app/(marketing)/blog/[slug]/page.tsx
+4 -4
View File
@@ -23,7 +23,7 @@ const RelatedArticles = dynamic(
() => import("../../../components/sections/RelatedArticles"),
{
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
<section className="py-[var(--space-800)] min-h-[400px]" />
),
ssr: true,
},
@@ -228,12 +228,12 @@ export default async function BlogPostPage({ params }: PageProps) {
data-node-id="19031:10426"
className="
relative z-10 flex w-full justify-center
p-[var(--spacing-scale-024)]
sm:px-0 sm:py-[var(--spacing-scale-032)]
p-[var(--space-600)]
sm:px-0 sm:py-[var(--space-800)]
xl:px-[calc(268/1440*100%)]
"
>
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none">
<div className="post-body w-full text-[var(--color-content-invert-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none">
<div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
</div>
</article>
app/(marketing)/how-it-works/page.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ const RelatedArticles = dynamic(
() => import("../../components/sections/RelatedArticles"),
{
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
<section className="py-[var(--space-800)] min-h-[400px]" />
),
ssr: true,
},
@@ -110,7 +110,7 @@ export default function HowItWorksPage() {
<div className="relative w-full overflow-x-clip">
<ContentTemplateDecorativeShapes variant="guide" />
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]">
<article className="relative z-10 p-[var(--space-600)] sm:py-[var(--space-800)] xl:px-[calc(268/1440*100%)]">
<div
className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"
dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
app/(marketing)/learn/page.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function LearnPage() {
*/}
<div
data-testid="learn-article-grid"
className="flex flex-col space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--spacing-scale-008)] smd:space-y-0 smd:px-[var(--spacing-scale-020)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-016)] md:px-[var(--spacing-scale-032)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-064)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--spacing-scale-008))/2)] md:[&>*]:w-[calc((100%-var(--spacing-scale-016))/2)] xmd:[&>*]:w-[calc((100%-2*var(--spacing-scale-012))/3)] lg:[&>*]:w-[calc((100%-2*var(--spacing-scale-016))/3)] lg2:[&>*]:w-[calc((100%-3*var(--spacing-scale-016))/4)] xl:[&>*]:w-[calc((100%-4*var(--spacing-scale-016))/5)]"
className="flex flex-col space-y-[var(--space-050)] sm:space-y-[var(--space-200)] sm:px-[var(--space-500)] sm:pt-[var(--space-600)] sm:pb-[var(--space-600)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--space-200)] smd:space-y-0 smd:px-[var(--space-500)] smd:pt-[var(--space-600)] smd:pb-[var(--space-600)] md:gap-[var(--space-400)] md:px-[var(--space-800)] xmd:gap-[var(--space-300)] lg:gap-[var(--space-400)] lg:px-[var(--space-1800)] lg:pt-[var(--space-800)] lg:pb-[var(--space-1800)] lg2:gap-x-[var(--space-400)] lg2:gap-y-[var(--space-600)] xl:gap-x-[var(--space-400)] xl:gap-y-[var(--space-400)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--space-200))/2)] md:[&>*]:w-[calc((100%-var(--space-400))/2)] xmd:[&>*]:w-[calc((100%-2*var(--space-300))/3)] lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)] lg2:[&>*]:w-[calc((100%-3*var(--space-400))/4)] xl:[&>*]:w-[calc((100%-4*var(--space-400))/5)]"
>
{allPosts.map((post) => (
<ContentThumbnailTemplate
app/(marketing)/page.tsx
+5 -5
View File
@@ -13,14 +13,14 @@ export const metadata: Metadata = routeMetadata("/");
// Code split below-the-fold components to reduce initial bundle size
const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[200px]" />
<section className="py-[var(--space-800)] min-h-[200px]" />
),
ssr: true,
});
const CardSteps = dynamic(() => import("../components/sections/CardSteps"), {
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
<section className="py-[var(--space-800)] min-h-[300px]" />
),
ssr: true,
});
@@ -29,7 +29,7 @@ const FeatureGrid = dynamic(
() => import("../components/sections/FeatureGrid"),
{
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[500px]" />
<section className="py-[var(--space-800)] min-h-[500px]" />
),
ssr: true,
},
@@ -37,7 +37,7 @@ const FeatureGrid = dynamic(
const QuoteBlock = dynamic(() => import("../components/sections/QuoteBlock"), {
loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
<section className="py-[var(--space-800)] min-h-[300px]" />
),
ssr: true,
});
@@ -102,7 +102,7 @@ export default function Page() {
<CardSteps {...cardStepsData} />
<Suspense
fallback={
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
<section className="py-[var(--space-800)] min-h-[400px]" />
}
>
<MarketingRuleStackSection />
app/(marketing)/rules/[id]/page.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default async function PublicRuleDetailPage({ params }: PageProps) {
return (
<article className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)]">
<div className="mx-auto flex max-w-[1200px] flex-col gap-[var(--measures-spacing-1200,48px)] px-5 py-[var(--spacing-scale-048,48px)] md:px-12 md:py-[var(--spacing-scale-064,64px)]">
<div className="mx-auto flex max-w-[1200px] flex-col gap-[var(--space-1200)] px-5 py-[var(--space-1200)] md:px-12 md:py-[var(--space-1800)]">
<HeaderLockup
title={rule.title}
description={description}
app/(marketing)/use-cases/[slug]/page.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ export default async function UseCaseDetailPage({ params }: PageProps) {
/>
<article
data-figma-node="22015:42622"
className="flex w-full items-center justify-center self-stretch px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] xl:px-[256px]"
className="flex w-full items-center justify-center self-stretch px-[var(--space-600)] py-[var(--space-800)] sm:px-[var(--space-800)] md:px-[var(--space-1200)] lg:px-[var(--space-1800)] xl:px-[256px]"
>
<div
className="use-case-body"
app/(marketing)/use-cases/page.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ const RelatedArticles = dynamic(
() => import("../../components/sections/RelatedArticles"),
{
loading: () => (
<section className="min-h-[400px] bg-black py-[var(--spacing-scale-032)]" />
<section className="min-h-[400px] bg-black py-[var(--space-800)]" />
),
ssr: true,
},
@@ -176,7 +176,7 @@ export default function UseCasesPage() {
<div className="bg-[var(--color-surface-default-primary)]">
<Suspense
fallback={
<section className="min-h-[400px] py-[var(--spacing-scale-032)]" />
<section className="min-h-[400px] py-[var(--space-800)]" />
}
>
<MarketingRuleStackSection
app/(marketing)/use-cases/use-cases.css
+1 -1
View File
@@ -9,7 +9,7 @@
font-size: 18px;
font-weight: 400;
line-height: 130%;
color: var(--color-content-inverse-primary);
color: var(--color-content-invert-primary);
word-break: break-word;
}