Marcel Raddatz
0a2ef750c4
- Load Fraunces, DM Sans, DM Mono via Google Fonts preconnect in app.html - Define all design tokens in @theme block: neutrals, green/yellow/blue/ purple/orange scales, spacing (--space-1..20), radii, shadows, button base - Note --green-dark as button background (--green fails WCAG AA with white) - Add @types/node for Node fs/path usage in design-system tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
90 lines
3.7 KiB
CSS
90 lines
3.7 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
/* ── Fonts ─────────────────────────────────────────────────────── */
|
|
--font-display: 'Fraunces', Georgia, serif;
|
|
--font-sans: 'DM Sans', system-ui, sans-serif;
|
|
--font-mono: 'DM Mono', monospace;
|
|
|
|
/* ── Neutrals ───────────────────────────────────────────────────── */
|
|
--color-page: #fafaf7;
|
|
--color-surface: #f5f4ee;
|
|
--color-subtle: #edecea;
|
|
--color-border: #d8d7d0;
|
|
--color-text: #1c1c18;
|
|
--color-text-muted: #6b6a63;
|
|
|
|
/* ── Green scale ────────────────────────────────────────────────── */
|
|
--green-tint: #e8f5ea;
|
|
--green-light: #aedcb0;
|
|
--green: #3d8c4a;
|
|
--green-dark: #2e6e39; /* button backgrounds with white text — #3D8C4A gives 4.16:1, fails AA */
|
|
--green-deeper: #1e4a26;
|
|
|
|
/* ── Yellow scale ───────────────────────────────────────────────── */
|
|
--yellow-tint: #fdf6d8;
|
|
--yellow-light: #f9e08a;
|
|
--yellow: #f2c12e;
|
|
--yellow-dark: #c49610;
|
|
--yellow-text: #8a6800;
|
|
|
|
/* ── Blue scale ─────────────────────────────────────────────────── */
|
|
--blue-tint: #e6f1fb;
|
|
--blue-light: #a4cff4;
|
|
--blue: #2d7dd2;
|
|
--blue-dark: #185fa5;
|
|
|
|
/* ── Purple scale ───────────────────────────────────────────────── */
|
|
--purple-tint: #eeedfe;
|
|
--purple: #534ab7;
|
|
--purple-dark: #3c3489;
|
|
|
|
/* ── Orange scale ───────────────────────────────────────────────── */
|
|
--orange-tint: #fef0e6;
|
|
--orange: #e8862a;
|
|
--orange-dark: #b46820;
|
|
|
|
/* ── Status ─────────────────────────────────────────────────────── */
|
|
--color-error: #dc4c3e;
|
|
|
|
/* ── Spacing (8px base grid, 4px half-step) ─────────────────────── */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-7: 28px;
|
|
--space-8: 32px;
|
|
--space-9: 36px;
|
|
--space-10: 40px;
|
|
--space-11: 44px;
|
|
--space-12: 48px;
|
|
--space-13: 52px;
|
|
--space-14: 56px;
|
|
--space-15: 60px;
|
|
--space-16: 64px;
|
|
--space-17: 68px;
|
|
--space-18: 72px;
|
|
--space-19: 76px;
|
|
--space-20: 80px;
|
|
|
|
/* ── Radii ──────────────────────────────────────────────────────── */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px; /* default */
|
|
--radius-lg: 10px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ── Elevation ──────────────────────────────────────────────────── */
|
|
--shadow-card: 0 1px 3px rgba(28, 28, 24, 0.06), 0 1px 2px rgba(28, 28, 24, 0.04);
|
|
--shadow-raised: 0 4px 12px rgba(28, 28, 24, 0.08), 0 2px 4px rgba(28, 28, 24, 0.04);
|
|
--shadow-overlay: 0 8px 32px rgba(28, 28, 24, 0.12), 0 2px 8px rgba(28, 28, 24, 0.06);
|
|
|
|
/* ── Button base tokens ─────────────────────────────────────────── */
|
|
--btn-font-size: 13px;
|
|
--btn-font-weight: 500;
|
|
--btn-letter-spacing: 0.04em;
|
|
}
|