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

design system token v0.1

Browse Source
This commit is contained in:
Juan
2026-04-13 15:33:00 -05:00
parent 52b4156653
commit c3215945f2
63 changed files with 11562 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
app/globals.css
View File

@@ -1,12 +1,17 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import './tokens/tokens-light.css';
@import './tokens/tokens-dark.css';
@custom-variant dark (&:is(.dark *));
/* =============================================================================
GREYHAVEN DESIGN TOKENS
Based on Greyhaven Brand Guidelines v1.0
Token values are auto-generated by Style Dictionary from tokens/*.json
(W3C DTCG format). DO NOT hand-edit :root or .dark — edit the source
token files and run `pnpm tokens:build` instead.
Color Philosophy:
- Neutral and minimal scheme
- Off-black, warm grey, and white form the base
@@ -14,142 +19,23 @@
- No gradients, no decorative color
============================================================================= */
/* Radius — not color, kept inline */
:root {
/* Background & Foreground */
--background: 240 240 236; /* Grey 1 #F0F0EC */
--foreground: 22 22 20; /* Off-black #161614 */
/* Card */
--card: 249 249 247; /* Off-white #F9F9F7 - elevated from background */
--card-foreground: 22 22 20;
/* Popover */
--popover: 249 249 247;
--popover-foreground: 22 22 20;
/* Primary - Orange accent (used sparingly) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247; /* Off-white */
/* Secondary */
--secondary: 240 240 236; /* Grey 1 #F0F0EC */
--secondary-foreground: 47 47 44; /* Grey 8 #2F2F2C */
/* Muted */
--muted: 240 240 236; /* Grey 1 #F0F0EC */
--muted-foreground: 87 87 83; /* Grey 7 #575753 */
/* Accent - Subtle grey for hover states */
--accent: 221 221 215; /* Grey 2 #DDDDD7 */
--accent-foreground: 22 22 20; /* Off-black */
/* Destructive */
--destructive: 180 50 50; /* Muted red for destructive actions */
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 196 196 189; /* Grey 3 #C4C4BD */
--input: 196 196 189; /* Grey 3 #C4C4BD */
/* Focus Ring */
--ring: 217 94 42; /* Orange for focus states */
/* Charts - Warm neutral palette with orange accent */
--chart-1: 217 94 42; /* Orange accent */
--chart-2: 87 87 83; /* Grey 7 */
--chart-3: 127 127 121; /* Grey 5 */
--chart-4: 166 166 159; /* Grey 4 */
--chart-5: 47 47 44; /* Grey 8 */
/* Radius - Tightened, no playful rounding */
--radius: 0.375rem;
/* Sidebar */
--sidebar: 240 240 236;
--sidebar-foreground: 22 22 20;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 196 196 189;
--sidebar-accent-foreground: 22 22 20;
--sidebar-border: 196 196 189;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
DARK THEME
Guidelines: Negative/reverse usage via off-black and greys
============================================================================= */
.dark {
/* Background & Foreground */
--background: 22 22 20; /* Off-black #161614 */
--foreground: 249 249 247; /* Off-white #F9F9F7 */
/* Card */
--card: 47 47 44; /* Grey 8 #2F2F2C */
--card-foreground: 249 249 247;
/* Popover */
--popover: 47 47 44;
--popover-foreground: 249 249 247;
/* Primary - Orange accent (same in dark mode) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247;
/* Secondary */
--secondary: 87 87 83; /* Grey 7 #575753 */
--secondary-foreground: 249 249 247;
/* Muted */
--muted: 87 87 83; /* Grey 7 #575753 */
--muted-foreground: 196 196 189; /* Grey 3 #C4C4BD */
/* Accent - Subtle grey for hover states */
--accent: 87 87 83; /* Grey 7 #575753 */
--accent-foreground: 249 249 247;
/* Destructive */
--destructive: 180 50 50;
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 87 87 83; /* Grey 7 */
--input: 87 87 83;
/* Focus Ring */
--ring: 217 94 42;
/* Charts */
--chart-1: 217 94 42;
--chart-2: 196 196 189;
--chart-3: 166 166 159;
--chart-4: 127 127 121;
--chart-5: 240 240 236;
/* Sidebar */
--sidebar: 47 47 44;
--sidebar-foreground: 249 249 247;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 87 87 83;
--sidebar-accent-foreground: 249 249 247;
--sidebar-border: 87 87 83;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
THEME CONFIGURATION
Typography: Source Serif Pro (primary) + Aspekta (secondary/UI)
Typography: Source Serif Pro (primary/serif) + Aspekta (secondary/UI/sans)
============================================================================= */
@theme inline {
/* Typography - Using CSS variables from Next.js font loading */
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
/* Typography — Aspekta is the canonical sans font, Inter is fallback */
--font-sans: 'Aspekta', var(--font-inter, 'Inter'), ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Color mappings */
/* Color mappings — maps CSS var RGB triplets to Tailwind utility classes */
--color-background: rgb(var(--background));
--color-foreground: rgb(var(--foreground));
--color-card: rgb(var(--card));
@@ -186,7 +72,7 @@
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
--color-sidebar-border: rgb(var(--sidebar-border));
--color-sidebar-ring: rgb(var(--sidebar-ring));
/* Greyhaven-specific colors for direct use */
--color-greyhaven-orange: #D95E2A;
--color-greyhaven-offblack: #161614;