a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * Volt CSS Variables
3 *
4 * Design system tokens for the Volt CSS framework.
5 * Light theme is default, dark theme overrides via media query.
6 */
7
8:root {
9 /* Typography Scale - Modular scale based on 1.25 ratio */
10 --font-size-base: 18px;
11 --font-size-sm: 0.889rem;
12 --font-size-lg: 1.125rem;
13 --font-size-xl: 1.266rem;
14 --font-size-2xl: 1.424rem;
15 --font-size-3xl: 1.802rem;
16 --font-size-4xl: 2.027rem;
17 --font-size-5xl: 2.566rem;
18
19 --font-sans: "Fira Sans", sans-serif;
20 --font-display: "DM Sans", sans-serif;
21 --font-serif: "Libre Baskerville", serif;
22 --font-mono: "Google Sans Code", monospace;
23
24 /* Spacing Scale - Based on 0.5rem increments */
25 --space-xs: 0.25rem;
26 --space-sm: 0.5rem;
27 --space-md: 1rem;
28 --space-lg: 1.5rem;
29 --space-xl: 2rem;
30 --space-2xl: 3rem;
31 --space-3xl: 4rem;
32
33 --line-height-tight: 1.25;
34 --line-height-base: 1.6;
35 --line-height-relaxed: 1.8;
36
37 --content-width: 79ch;
38 /* Width of margin notes */
39 --sidenote-width: 18rem;
40 /* Space between content and sidenotes */
41 --sidenote-gap: 2rem;
42
43 --color-bg: #fefefe;
44 /* For code blocks, tables */
45 --color-bg-alt: #f5f5f5;
46 --color-text: #1a1a1a;
47 --color-text-muted: #666666;
48 /* Links, primary actions */
49 --color-accent: #0066cc;
50 --color-accent-hover: #0052a3;
51 --color-border: #d4d4d4;
52 --color-code-bg: #f8f8f8;
53 /* Highlighted text */
54 --color-mark: #fff3cd;
55 --color-success: #22863a;
56 --color-warning: #bf8700;
57 --color-error: #cb2431;
58
59 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
60 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
61 --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
62
63 /* Border Radius */
64 --radius-xs: 1px;
65 --radius-sm: 3px;
66 --radius-md: 6px;
67 --radius-lg: 8px;
68
69 --transition-fast: 150ms ease-in-out;
70 --transition-base: 250ms ease-in-out;
71}
72
73/**
74 * Dark Theme Overrides
75 *
76 * Automatically applied when user prefers dark color scheme
77 */
78@media (prefers-color-scheme: dark) {
79 :root {
80 --color-bg: #1a1a1a;
81 --color-bg-alt: #2a2a2a;
82 --color-text: #e6e6e6;
83 --color-text-muted: #a0a0a0;
84 --color-accent: #4da6ff;
85 --color-accent-hover: #66b3ff;
86 --color-border: #404040;
87 --color-code-bg: #2a2a2a;
88 --color-mark: #4a4a00;
89 --color-success: #34d058;
90 --color-warning: #ffdf5d;
91 --color-error: #f97583;
92
93 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
94 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
95 --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
96 }
97}