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

design system token v0.6

Browse Source
This commit is contained in:
Juan
2026-04-16 11:30:28 -05:00
parent 64d7df1439
commit ae3d219d58
9 changed files with 185 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
skill/SKILL.md
View File

@@ -3,7 +3,7 @@
> **Auto-generated** by `scripts/generate-skill.ts` -- DO NOT EDIT by hand.
> Re-generate: `pnpm skill:build`
>
> **Components**: 37 | **Style**: shadcn/ui "new-york"
> **Components**: 38 | **Style**: shadcn/ui "new-york"
> **Stack**: React 19, Radix UI, Tailwind CSS v4, CVA, tailwind-merge, clsx, Lucide icons
> **Framework-agnostic**: No Next.js imports. Works with Vite, Remix, Astro, CRA, or any React setup.
@@ -125,7 +125,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
| `color.dark.primary-foreground` | `{color.primitive.off-white}` | Dark primary foreground |
| `color.dark.secondary` | `{color.primitive.grey.7}` | Dark secondary |
| `color.dark.secondary-foreground` | `{color.primitive.off-white}` | Dark secondary text |
| `color.dark.muted` | `{color.primitive.grey.7}` | Dark muted |
| `color.dark.muted` | `{color.primitive.grey.8}` | Dark muted — grey.8 (distinct from grey.7 border so outlines on bg-muted surfaces remain visible) |
| `color.dark.muted-foreground` | `{color.primitive.grey.3}` | Dark muted text |
| `color.dark.accent` | `{color.primitive.grey.7}` | Dark accent/hover |
| `color.dark.accent-foreground` | `{color.primitive.off-white}` | Dark accent text |
@@ -235,7 +235,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
---
## Component Catalog (37 components)
## Component Catalog (38 components)
All components live in `components/ui/`. Import with `@/components/ui/<name>`.
@@ -341,6 +341,19 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
<Toggle aria-label="Bold"><BoldIcon /></Toggle>
```
#### Code
- **File**: `components/ui/code.tsx`
- **Exports**: `Code`, `codeVariants`
- **Description**: Inline or block code snippet. Always use this instead of hand-rolling <code>/<pre> styling. Uses bg-muted + border-border so the outline stays visible in both light and dark modes. Block variant auto-wraps in <pre> for whitespace preservation and break-all for long commands.
- **Props**: `variant?: "inline" | "block"; language?: string (optional, for future syntax highlighting)`
- **Example**:
```tsx
<p>Install with <Code>pnpm install</Code>.</p>
<Code variant="block" language="bash">{`pnpm install
pnpm dev`}</Code>
```
### Layout
#### Card