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/(dev)/components-preview/page.tsx
+8 -8
View File
@@ -39,9 +39,9 @@ const listSampleItems = [
export default function ComponentsPreview() {
return (
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
<div className="mx-auto max-w-[1200px] space-y-[var(--spacing-scale-040)]">
<header className="space-y-[var(--spacing-scale-008)]">
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--space-800)]">
<div className="mx-auto max-w-[1200px] space-y-[var(--space-1000)]">
<header className="space-y-[var(--space-200)]">
<h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]">
Component Preview
</h1>
@@ -52,11 +52,11 @@ export default function ComponentsPreview() {
</p>
</header>
<section className="space-y-[var(--spacing-scale-016)]">
<section className="space-y-[var(--space-400)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Link
</h2>
<div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]">
<div className="flex flex-col gap-8 rounded-[var(--radius-300)] bg-[var(--color-surface-default-secondary)] p-[var(--space-800)]">
<div>
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Light surface
@@ -153,7 +153,7 @@ export default function ComponentsPreview() {
</div>
</section>
<section className="space-y-[var(--spacing-scale-016)]">
<section className="space-y-[var(--space-400)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Divider
</h2>
@@ -177,7 +177,7 @@ export default function ComponentsPreview() {
</div>
</section>
<section className="space-y-[var(--spacing-scale-024)]">
<section className="space-y-[var(--space-600)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
List
</h2>
@@ -185,7 +185,7 @@ export default function ComponentsPreview() {
List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row:
ListEntry (21844:4118).
</p>
<div className="space-y-[var(--spacing-scale-024)]">
<div className="space-y-[var(--space-600)]">
<div>
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Small