monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

design system token v0.5

Browse Source
This commit is contained in:
Juan
2026-04-16 10:58:11 -05:00
parent c4cc5a78b9
commit b8168261a1
7 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/tokens/TOKENS.md
View File

@@ -137,7 +137,7 @@
| `spacing.1.5` | `0.375rem` | 6px |
| `spacing.component.card-padding` | `1.5rem` | Card internal padding (px-6) |
| `spacing.component.card-gap` | `1.5rem` | Gap between cards (gap-6) |
| `spacing.component.section-padding` | `4rem` | Vertical padding between major sections (py-16) |
| `spacing.component.section-padding` | `2.5rem` | Vertical padding inside sections (py-10) |
| `spacing.component.form-gap` | `1rem` | Gap between form fields (gap-4) |
| `spacing.component.button-padding-x` | `1rem` | Button horizontal padding (px-4) |
| `spacing.component.navbar-height` | `4rem` | Navbar height (h-16) |

2
app/tokens/tokens.ts
View File

@@ -117,7 +117,7 @@ export const SpacingTokens = {
'1.5': '0.375rem',
'component.card-padding': '1.5rem',
'component.card-gap': '1.5rem',
'component.section-padding': '4rem',
'component.section-padding': '2.5rem',
'component.form-gap': '1rem',
'component.button-padding-x': '1rem',
'component.navbar-height': '4rem',

6
components/ui/section.tsx
View File

@@ -3,12 +3,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const sectionVariants = cva('py-16', {
const sectionVariants = cva('py-10', {
variants: {
variant: {
default: '',
highlighted: 'bg-card dark:bg-muted',
accent: 'bg-primary/5',
highlighted: 'bg-card my-8',
accent: 'bg-primary/5 my-8',
},
width: {
narrow: 'max-w-3xl mx-auto',

2
lib/catalog.ts
View File

@@ -405,7 +405,7 @@ export const COMPONENT_CATALOG: ComponentSpec[] = [
file: 'components/ui/section.tsx',
category: 'composition',
exports: ['Section', 'sectionVariants'],
description: 'Titled content section with spacing. py-16 between sections.',
description: 'Titled content section with spacing. py-10 internal padding. Colored variants (highlighted, accent) get my-8 vertical margin so they visually detach from adjacent sections; default has no margin so same-bg siblings flow seamlessly.',
props: 'variant?: "default" | "highlighted" | "accent"; width?: "narrow" | "default" | "wide" | "full"; title?: string; description?: string',
example: '<Section title="Features" description="What we offer" width="wide">Content</Section>',
},

2
scripts/generate-skill.ts
View File

@@ -166,7 +166,7 @@ function buildCompositionRules(): string {
return `## Composition Rules
- **Card spacing**: \`gap-6\` between cards, \`p-6\` internal padding
- **Section rhythm**: \`py-16\` between major page sections
- **Section rhythm**: \`py-10\` internal padding per section. Colored sections add \`my-8\` to detach from neighbors
- **Button placement**: Primary action right, secondary left
- **Form layout**: Vertical stack with \`gap-4\`, labels above inputs
- **Navbar**: Fixed top, \`z-50\`, \`h-16\`, logo left, nav center, actions right

6
skill/SKILL.md
View File

@@ -197,7 +197,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
| `spacing.1.5` | `0.375rem` | 6px |
| `spacing.component.card-padding` | `1.5rem` | Card internal padding (px-6) |
| `spacing.component.card-gap` | `1.5rem` | Gap between cards (gap-6) |
| `spacing.component.section-padding` | `4rem` | Vertical padding between major sections (py-16) |
| `spacing.component.section-padding` | `2.5rem` | Vertical padding inside sections (py-10) |
| `spacing.component.form-gap` | `1rem` | Gap between form fields (gap-4) |
| `spacing.component.button-padding-x` | `1rem` | Button horizontal padding (px-4) |
| `spacing.component.navbar-height` | `4rem` | Navbar height (h-16) |
@@ -598,7 +598,7 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
#### Section
- **File**: `components/ui/section.tsx`
- **Exports**: `Section`, `sectionVariants`
- **Description**: Titled content section with spacing. py-16 between sections.
- **Description**: Titled content section with spacing. py-10 internal padding. Colored variants (highlighted, accent) get my-8 vertical margin so they visually detach from adjacent sections; default has no margin so same-bg siblings flow seamlessly.
- **Props**: `variant?: "default" | "highlighted" | "accent"; width?: "narrow" | "default" | "wide" | "full"; title?: string; description?: string`
- **Example**:
```tsx
@@ -630,7 +630,7 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
## Composition Rules
- **Card spacing**: `gap-6` between cards, `p-6` internal padding
- **Section rhythm**: `py-16` between major page sections
- **Section rhythm**: `py-10` internal padding per section. Colored sections add `my-8` to detach from neighbors
- **Button placement**: Primary action right, secondary left
- **Form layout**: Vertical stack with `gap-4`, labels above inputs
- **Navbar**: Fixed top, `z-50`, `h-16`, logo left, nav center, actions right

4
tokens/spacing.json
View File

@@ -90,8 +90,8 @@
},
"section-padding": {
"$type": "dimension",
"$value": "4rem",
"$description": "Vertical padding between major sections (py-16)"
"$value": "2.5rem",
"$description": "Vertical padding inside sections (py-10)"
},
"form-gap": {
"$type": "dimension",