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

2
skill/AGENTS.md
View File

@@ -27,7 +27,7 @@ This project uses the **Greyhaven Design System**.
## Component Summary
37 components across 8 categories: primitives (10), layout (4), overlay (5), navigation (3), data (4), feedback (4), form (1), composition (6).
38 components across 8 categories: primitives (11), layout (4), overlay (5), navigation (3), data (4), feedback (4), form (1), composition (6).
For full component specs, props, and examples, refer to the SKILL.md file or use the MCP `get_component(name)` tool.

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