brainzlab-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/LICENSE +7 -17
- data/README.md +92 -14
- data/app/assets/stylesheets/brainzlab_ui/animations.css +11 -2
- data/app/assets/stylesheets/brainzlab_ui/base.css +3 -0
- data/app/assets/stylesheets/brainzlab_ui/components.css +504 -11
- data/app/assets/stylesheets/brainzlab_ui/dark-mode.css +317 -0
- data/app/assets/stylesheets/brainzlab_ui/tokens.css +170 -19
- data/app/assets/stylesheets/brainzlab_ui/utilities.css +319 -4
- data/lib/brainzlab/components/alert.rb +6 -6
- data/lib/brainzlab/components/avatar.rb +10 -9
- data/lib/brainzlab/components/badge.rb +7 -7
- data/lib/brainzlab/components/base.rb +2 -2
- data/lib/brainzlab/components/button.rb +8 -8
- data/lib/brainzlab/components/card.rb +6 -6
- data/lib/brainzlab/components/empty_state.rb +5 -11
- data/lib/brainzlab/components/input.rb +8 -8
- data/lib/brainzlab/components/modal.rb +10 -10
- data/lib/brainzlab/components/nav_item.rb +3 -3
- data/lib/brainzlab/components/stat_card.rb +7 -9
- data/lib/brainzlab/components/table.rb +2 -2
- data/lib/brainzlab/ui/engine.rb +4 -4
- data/lib/brainzlab/ui/version.rb +1 -1
- data/lib/brainzlab/ui.rb +15 -15
- data/lib/brainzlab-ui.rb +1 -1
- data/lib/brainzlab_ui.rb +1 -1
- metadata +3 -1
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BRAINZLAB UI - DARK MODE
|
|
3
|
+
============================================
|
|
4
|
+
Comprehensive dark mode support for BrainzLab UI
|
|
5
|
+
|
|
6
|
+
Usage:
|
|
7
|
+
1. Add .dark class to <html> or <body> element
|
|
8
|
+
2. Or use @media (prefers-color-scheme: dark) for automatic detection
|
|
9
|
+
|
|
10
|
+
The dark mode controller (Stimulus) manages toggling via:
|
|
11
|
+
- document.documentElement.classList.add('dark')
|
|
12
|
+
- localStorage for persistence
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* ----------------------------------------
|
|
16
|
+
DARK MODE CUSTOM VARIANT
|
|
17
|
+
---------------------------------------- */
|
|
18
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
19
|
+
|
|
20
|
+
/* ----------------------------------------
|
|
21
|
+
BASE DARK MODE STYLES
|
|
22
|
+
----------------------------------------
|
|
23
|
+
These apply to the root elements when dark mode is active
|
|
24
|
+
*/
|
|
25
|
+
.dark {
|
|
26
|
+
color-scheme: dark;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dark body,
|
|
30
|
+
html.dark body {
|
|
31
|
+
background-color: var(--color-dark-bg);
|
|
32
|
+
color: var(--color-dark-text);
|
|
33
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Headings in dark mode */
|
|
37
|
+
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
|
|
38
|
+
color: var(--color-dark-text);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Links in dark mode */
|
|
42
|
+
.dark a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.nav-item) {
|
|
43
|
+
color: var(--color-primary-300);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dark a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.nav-item):hover {
|
|
47
|
+
color: var(--color-primary-400);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Text selection in dark mode */
|
|
51
|
+
.dark ::selection {
|
|
52
|
+
background: rgba(199, 123, 88, 0.3);
|
|
53
|
+
color: var(--color-dark-text);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Scrollbar styling for dark mode */
|
|
57
|
+
.dark ::-webkit-scrollbar {
|
|
58
|
+
width: 8px;
|
|
59
|
+
height: 8px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.dark ::-webkit-scrollbar-track {
|
|
63
|
+
background: var(--color-dark-bg);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dark ::-webkit-scrollbar-thumb {
|
|
67
|
+
background: var(--color-dark-border);
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.dark ::-webkit-scrollbar-thumb:hover {
|
|
72
|
+
background: var(--color-dark-text-muted);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ----------------------------------------
|
|
76
|
+
DARK MODE TOGGLE BUTTON
|
|
77
|
+
---------------------------------------- */
|
|
78
|
+
.dark-mode-toggle {
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
width: 2.5rem;
|
|
83
|
+
height: 2.5rem;
|
|
84
|
+
padding: 0.5rem;
|
|
85
|
+
background: transparent;
|
|
86
|
+
border: 1px solid var(--color-cream-300);
|
|
87
|
+
border-radius: 0.75rem;
|
|
88
|
+
color: var(--color-ink-600);
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
transition: all 0.2s ease;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.dark-mode-toggle:hover {
|
|
94
|
+
background: var(--color-cream-100);
|
|
95
|
+
color: var(--color-ink-900);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.dark-mode-toggle:focus-visible {
|
|
99
|
+
outline: 2px solid var(--color-primary-500);
|
|
100
|
+
outline-offset: 2px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.dark .dark-mode-toggle {
|
|
104
|
+
border-color: var(--color-dark-border);
|
|
105
|
+
color: var(--color-dark-text-muted);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.dark .dark-mode-toggle:hover {
|
|
109
|
+
background: var(--color-dark-surface-light);
|
|
110
|
+
color: var(--color-dark-text);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.dark .dark-mode-toggle:focus-visible {
|
|
114
|
+
outline-color: var(--color-primary-400);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Toggle icon container */
|
|
118
|
+
.dark-mode-toggle svg {
|
|
119
|
+
width: 1.25rem;
|
|
120
|
+
height: 1.25rem;
|
|
121
|
+
transition: transform 0.3s ease;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.dark-mode-toggle:hover svg {
|
|
125
|
+
transform: rotate(15deg);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* ----------------------------------------
|
|
129
|
+
DARK MODE UTILITY CLASSES
|
|
130
|
+
---------------------------------------- */
|
|
131
|
+
|
|
132
|
+
/* Background utilities */
|
|
133
|
+
.dark .bg-white {
|
|
134
|
+
background-color: var(--color-dark-surface);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.dark .bg-cream-50 {
|
|
138
|
+
background-color: var(--color-dark-bg);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.dark .bg-cream-100 {
|
|
142
|
+
background-color: var(--color-dark-surface);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.dark .bg-cream-200 {
|
|
146
|
+
background-color: var(--color-dark-surface-light);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Text utilities */
|
|
150
|
+
.dark .text-ink-950 {
|
|
151
|
+
color: var(--color-dark-text);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.dark .text-ink-900 {
|
|
155
|
+
color: var(--color-dark-text);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.dark .text-ink-700 {
|
|
159
|
+
color: var(--color-dark-text);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.dark .text-ink-600 {
|
|
163
|
+
color: var(--color-dark-text-muted);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.dark .text-ink-500 {
|
|
167
|
+
color: var(--color-dark-text-muted);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Border utilities */
|
|
171
|
+
.dark .border-cream-200 {
|
|
172
|
+
border-color: var(--color-dark-border);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.dark .border-cream-300 {
|
|
176
|
+
border-color: var(--color-dark-border);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* ----------------------------------------
|
|
180
|
+
DARK MODE GRADIENT UTILITIES
|
|
181
|
+
---------------------------------------- */
|
|
182
|
+
.dark .bg-gradient-warm {
|
|
183
|
+
background: linear-gradient(135deg, var(--color-dark-surface) 0%, var(--color-dark-surface-light) 100%);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.dark .gradient-mesh .gradient-blob {
|
|
187
|
+
opacity: 0.3;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* ----------------------------------------
|
|
191
|
+
DARK MODE MODAL/OVERLAY
|
|
192
|
+
---------------------------------------- */
|
|
193
|
+
.dark .modal-overlay {
|
|
194
|
+
background: rgba(0, 0, 0, 0.7);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.dark .modal {
|
|
198
|
+
background: var(--color-dark-surface);
|
|
199
|
+
box-shadow: var(--shadow-dark-large);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.dark .modal-header {
|
|
203
|
+
border-bottom-color: var(--color-dark-border);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.dark .modal-footer {
|
|
207
|
+
border-top-color: var(--color-dark-border);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* ----------------------------------------
|
|
211
|
+
DARK MODE DROPDOWN
|
|
212
|
+
---------------------------------------- */
|
|
213
|
+
.dark .dropdown-menu {
|
|
214
|
+
background: var(--color-dark-surface);
|
|
215
|
+
border-color: var(--color-dark-border);
|
|
216
|
+
box-shadow: var(--shadow-dark-medium);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.dark .dropdown-item {
|
|
220
|
+
color: var(--color-dark-text-muted);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.dark .dropdown-item:hover {
|
|
224
|
+
background: var(--color-dark-surface-light);
|
|
225
|
+
color: var(--color-dark-text);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.dark .dropdown-divider {
|
|
229
|
+
background: var(--color-dark-border);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* ----------------------------------------
|
|
233
|
+
DARK MODE TOOLTIP
|
|
234
|
+
---------------------------------------- */
|
|
235
|
+
.dark .tooltip-content {
|
|
236
|
+
background: var(--color-dark-surface-light);
|
|
237
|
+
color: var(--color-dark-text);
|
|
238
|
+
border: 1px solid var(--color-dark-border);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* ----------------------------------------
|
|
242
|
+
DARK MODE TERMINAL
|
|
243
|
+
---------------------------------------- */
|
|
244
|
+
.dark .terminal {
|
|
245
|
+
background: var(--color-dark-bg);
|
|
246
|
+
border: 1px solid var(--color-dark-border);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.dark .terminal-header {
|
|
250
|
+
border-bottom-color: var(--color-dark-border);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.dark .terminal-body {
|
|
254
|
+
color: var(--color-dark-text);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ----------------------------------------
|
|
258
|
+
DARK MODE CODE/PRE
|
|
259
|
+
---------------------------------------- */
|
|
260
|
+
.dark pre {
|
|
261
|
+
background: var(--color-dark-surface);
|
|
262
|
+
border: 1px solid var(--color-dark-border);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.dark code {
|
|
266
|
+
background: var(--color-dark-surface-light);
|
|
267
|
+
color: var(--color-dark-text);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* ----------------------------------------
|
|
271
|
+
PREFERS-COLOR-SCHEME SUPPORT
|
|
272
|
+
----------------------------------------
|
|
273
|
+
Automatically apply dark mode when system prefers dark
|
|
274
|
+
This works alongside the .dark class approach
|
|
275
|
+
*/
|
|
276
|
+
@media (prefers-color-scheme: dark) {
|
|
277
|
+
:root:not(.light) body {
|
|
278
|
+
background-color: var(--color-dark-bg);
|
|
279
|
+
color: var(--color-dark-text);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
:root:not(.light) h1,
|
|
283
|
+
:root:not(.light) h2,
|
|
284
|
+
:root:not(.light) h3,
|
|
285
|
+
:root:not(.light) h4,
|
|
286
|
+
:root:not(.light) h5,
|
|
287
|
+
:root:not(.light) h6 {
|
|
288
|
+
color: var(--color-dark-text);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
:root:not(.light) ::selection {
|
|
292
|
+
background: rgba(199, 123, 88, 0.3);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* ----------------------------------------
|
|
297
|
+
PRINT STYLES
|
|
298
|
+
----------------------------------------
|
|
299
|
+
Disable dark mode for printing
|
|
300
|
+
*/
|
|
301
|
+
@media print {
|
|
302
|
+
.dark body,
|
|
303
|
+
html.dark body {
|
|
304
|
+
background-color: white;
|
|
305
|
+
color: black;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.dark .card {
|
|
309
|
+
background: white;
|
|
310
|
+
border-color: #e5e5e5;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.dark .btn-primary {
|
|
314
|
+
background: var(--color-primary-500);
|
|
315
|
+
color: white;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
@@ -1,28 +1,50 @@
|
|
|
1
1
|
/* ============================================
|
|
2
2
|
BRAINZLAB UI - DESIGN TOKENS
|
|
3
3
|
============================================
|
|
4
|
-
|
|
4
|
+
Unified design system across BrainzLab
|
|
5
5
|
Warm, elegant, and approachable
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
/* ============================================
|
|
9
|
+
CSS Custom Properties (always available)
|
|
10
|
+
============================================
|
|
11
|
+
These are defined outside @theme so they're
|
|
12
|
+
accessible as regular CSS variables for
|
|
13
|
+
dark mode and other non-Tailwind uses.
|
|
14
|
+
*/
|
|
15
|
+
:root {
|
|
16
|
+
/* Dark Mode Colors */
|
|
17
|
+
--color-dark-bg: #121212;
|
|
18
|
+
--color-dark-surface: #1e1e1e;
|
|
19
|
+
--color-dark-surface-light: #2a2a2a;
|
|
20
|
+
--color-dark-text: #e8e1d7;
|
|
21
|
+
--color-dark-text-muted: #a0a0a0;
|
|
22
|
+
--color-dark-border: #333333;
|
|
23
|
+
|
|
24
|
+
/* Dark Mode Shadows */
|
|
25
|
+
--shadow-dark-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.3), 0 10px 20px -2px rgba(0, 0, 0, 0.2);
|
|
26
|
+
--shadow-dark-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
|
27
|
+
--shadow-dark-large: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
28
|
+
}
|
|
29
|
+
|
|
8
30
|
@theme {
|
|
9
|
-
/* Primary -
|
|
31
|
+
/* Primary - Terracotta (Landing Page Source of Truth) */
|
|
10
32
|
--color-primary-50: #fef7f4;
|
|
11
33
|
--color-primary-100: #fdeee8;
|
|
12
|
-
--color-primary-200: #
|
|
13
|
-
--color-primary-300: #
|
|
14
|
-
--color-primary-400: #
|
|
15
|
-
--color-primary-500: #
|
|
16
|
-
--color-primary-600: #
|
|
17
|
-
--color-primary-700: #
|
|
18
|
-
--color-primary-800: #
|
|
19
|
-
--color-primary-900: #
|
|
20
|
-
|
|
21
|
-
/* Background - Warm Cream
|
|
22
|
-
--color-cream-50: #
|
|
23
|
-
--color-cream-100: #
|
|
24
|
-
--color-cream-200: #
|
|
25
|
-
--color-cream-300: #
|
|
34
|
+
--color-primary-200: #f5d4c4;
|
|
35
|
+
--color-primary-300: #e8b59a;
|
|
36
|
+
--color-primary-400: #d99676;
|
|
37
|
+
--color-primary-500: #C77B58;
|
|
38
|
+
--color-primary-600: #b06a4a;
|
|
39
|
+
--color-primary-700: #945840;
|
|
40
|
+
--color-primary-800: #7a4a38;
|
|
41
|
+
--color-primary-900: #663f31;
|
|
42
|
+
|
|
43
|
+
/* Background - Warm Cream (Landing Page Source of Truth) */
|
|
44
|
+
--color-cream-50: #FAF9F7;
|
|
45
|
+
--color-cream-100: #F4F1EC;
|
|
46
|
+
--color-cream-200: #E8E1D7;
|
|
47
|
+
--color-cream-300: #DDD4C8;
|
|
26
48
|
--color-cream-400: #D4C4B5;
|
|
27
49
|
--color-cream-500: #BFA894;
|
|
28
50
|
--color-cream-600: #A68D74;
|
|
@@ -30,7 +52,7 @@
|
|
|
30
52
|
--color-cream-800: #726253;
|
|
31
53
|
--color-cream-900: #5F5246;
|
|
32
54
|
|
|
33
|
-
/* Text - Warm Charcoal
|
|
55
|
+
/* Text - Warm Charcoal (Landing Page Source of Truth) */
|
|
34
56
|
--color-ink-50: #F8F7F6;
|
|
35
57
|
--color-ink-100: #E8E6E3;
|
|
36
58
|
--color-ink-200: #D4D0CB;
|
|
@@ -41,7 +63,15 @@
|
|
|
41
63
|
--color-ink-700: #534C45;
|
|
42
64
|
--color-ink-800: #46413B;
|
|
43
65
|
--color-ink-900: #3D3833;
|
|
44
|
-
--color-ink-950: #
|
|
66
|
+
--color-ink-950: #1a1a1a;
|
|
67
|
+
|
|
68
|
+
/* Product Brand Colors */
|
|
69
|
+
--color-recall: #D97757;
|
|
70
|
+
--color-reflex: #E45B3A;
|
|
71
|
+
--color-pulse: #3B82F6;
|
|
72
|
+
--color-flux: #8B5CF6;
|
|
73
|
+
--color-signal: #F59E0B;
|
|
74
|
+
--color-cortex: #10B981;
|
|
45
75
|
|
|
46
76
|
/* Semantic - Success */
|
|
47
77
|
--color-success-50: #F0FDF4;
|
|
@@ -83,16 +113,100 @@
|
|
|
83
113
|
--color-warning-600: #D97706;
|
|
84
114
|
--color-warning-700: #B45309;
|
|
85
115
|
|
|
86
|
-
/*
|
|
116
|
+
/* Transition Durations */
|
|
117
|
+
--duration-75: 75ms;
|
|
118
|
+
--duration-100: 100ms;
|
|
119
|
+
--duration-150: 150ms;
|
|
120
|
+
--duration-200: 200ms;
|
|
121
|
+
--duration-300: 300ms;
|
|
122
|
+
--duration-500: 500ms;
|
|
123
|
+
--duration-700: 700ms;
|
|
124
|
+
--duration-1000: 1000ms;
|
|
125
|
+
|
|
126
|
+
/* Named durations for semantic use */
|
|
127
|
+
--duration-fast: 150ms;
|
|
128
|
+
--duration-normal: 200ms;
|
|
129
|
+
--duration-slow: 300ms;
|
|
130
|
+
--duration-slower: 500ms;
|
|
131
|
+
|
|
132
|
+
/* Easing Functions */
|
|
133
|
+
--ease-linear: linear;
|
|
134
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
135
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
136
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
137
|
+
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
87
138
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
88
139
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
89
140
|
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
|
|
90
141
|
|
|
142
|
+
/* Spacing Scale */
|
|
143
|
+
--space-px: 1px;
|
|
144
|
+
--space-0: 0;
|
|
145
|
+
--space-0\.5: 0.125rem; /* 2px */
|
|
146
|
+
--space-1: 0.25rem; /* 4px */
|
|
147
|
+
--space-1\.5: 0.375rem; /* 6px */
|
|
148
|
+
--space-2: 0.5rem; /* 8px */
|
|
149
|
+
--space-2\.5: 0.625rem; /* 10px */
|
|
150
|
+
--space-3: 0.75rem; /* 12px */
|
|
151
|
+
--space-3\.5: 0.875rem; /* 14px */
|
|
152
|
+
--space-4: 1rem; /* 16px */
|
|
153
|
+
--space-5: 1.25rem; /* 20px */
|
|
154
|
+
--space-6: 1.5rem; /* 24px */
|
|
155
|
+
--space-7: 1.75rem; /* 28px */
|
|
156
|
+
--space-8: 2rem; /* 32px */
|
|
157
|
+
--space-9: 2.25rem; /* 36px */
|
|
158
|
+
--space-10: 2.5rem; /* 40px */
|
|
159
|
+
--space-11: 2.75rem; /* 44px */
|
|
160
|
+
--space-12: 3rem; /* 48px */
|
|
161
|
+
--space-14: 3.5rem; /* 56px */
|
|
162
|
+
--space-16: 4rem; /* 64px */
|
|
163
|
+
--space-20: 5rem; /* 80px */
|
|
164
|
+
--space-24: 6rem; /* 96px */
|
|
165
|
+
--space-28: 7rem; /* 112px */
|
|
166
|
+
--space-32: 8rem; /* 128px */
|
|
167
|
+
|
|
168
|
+
/* Icon Sizes */
|
|
169
|
+
--icon-xs: 0.75rem; /* 12px */
|
|
170
|
+
--icon-sm: 1rem; /* 16px */
|
|
171
|
+
--icon-md: 1.25rem; /* 20px */
|
|
172
|
+
--icon-lg: 1.5rem; /* 24px */
|
|
173
|
+
--icon-xl: 2rem; /* 32px */
|
|
174
|
+
--icon-2xl: 2.5rem; /* 40px */
|
|
175
|
+
|
|
176
|
+
/* Z-Index Scale */
|
|
177
|
+
--z-auto: auto;
|
|
178
|
+
--z-0: 0;
|
|
179
|
+
--z-10: 10;
|
|
180
|
+
--z-20: 20;
|
|
181
|
+
--z-30: 30;
|
|
182
|
+
--z-40: 40;
|
|
183
|
+
--z-50: 50;
|
|
184
|
+
--z-dropdown: 100;
|
|
185
|
+
--z-sticky: 200;
|
|
186
|
+
--z-modal-backdrop: 300;
|
|
187
|
+
--z-modal: 400;
|
|
188
|
+
--z-popover: 500;
|
|
189
|
+
--z-tooltip: 600;
|
|
190
|
+
--z-toast: 700;
|
|
191
|
+
|
|
91
192
|
/* Shadows */
|
|
92
193
|
--shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
|
|
93
194
|
--shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 25px -5px rgba(0, 0, 0, 0.04);
|
|
94
195
|
--shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
95
196
|
|
|
197
|
+
/* Dark Mode Colors */
|
|
198
|
+
--color-dark-bg: #121212;
|
|
199
|
+
--color-dark-surface: #1e1e1e;
|
|
200
|
+
--color-dark-surface-light: #2a2a2a;
|
|
201
|
+
--color-dark-text: #e8e1d7;
|
|
202
|
+
--color-dark-text-muted: #a0a0a0;
|
|
203
|
+
--color-dark-border: #333333;
|
|
204
|
+
|
|
205
|
+
/* Dark Mode Shadows */
|
|
206
|
+
--shadow-dark-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.3), 0 10px 20px -2px rgba(0, 0, 0, 0.2);
|
|
207
|
+
--shadow-dark-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
|
208
|
+
--shadow-dark-large: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
209
|
+
|
|
96
210
|
/* Border Radius */
|
|
97
211
|
--radius-sm: 0.375rem;
|
|
98
212
|
--radius-md: 0.5rem;
|
|
@@ -118,4 +232,41 @@
|
|
|
118
232
|
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
119
233
|
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
|
|
120
234
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
|
|
235
|
+
|
|
236
|
+
/* Type Scale */
|
|
237
|
+
--text-xs: 0.75rem; /* 12px */
|
|
238
|
+
--text-sm: 0.875rem; /* 14px */
|
|
239
|
+
--text-base: 1rem; /* 16px */
|
|
240
|
+
--text-lg: 1.125rem; /* 18px */
|
|
241
|
+
--text-xl: 1.25rem; /* 20px */
|
|
242
|
+
--text-2xl: 1.5rem; /* 24px */
|
|
243
|
+
--text-3xl: 1.875rem; /* 30px */
|
|
244
|
+
--text-4xl: 2.25rem; /* 36px */
|
|
245
|
+
--text-5xl: 3rem; /* 48px */
|
|
246
|
+
--text-6xl: 3.75rem; /* 60px */
|
|
247
|
+
--text-7xl: 4.5rem; /* 72px */
|
|
248
|
+
|
|
249
|
+
/* Line Heights */
|
|
250
|
+
--leading-none: 1;
|
|
251
|
+
--leading-tight: 1.25;
|
|
252
|
+
--leading-snug: 1.375;
|
|
253
|
+
--leading-normal: 1.5;
|
|
254
|
+
--leading-relaxed: 1.625;
|
|
255
|
+
--leading-loose: 2;
|
|
256
|
+
|
|
257
|
+
/* Letter Spacing */
|
|
258
|
+
--tracking-tighter: -0.05em;
|
|
259
|
+
--tracking-tight: -0.025em;
|
|
260
|
+
--tracking-normal: 0;
|
|
261
|
+
--tracking-wide: 0.025em;
|
|
262
|
+
--tracking-wider: 0.05em;
|
|
263
|
+
|
|
264
|
+
/* Font Weights */
|
|
265
|
+
--font-thin: 100;
|
|
266
|
+
--font-light: 300;
|
|
267
|
+
--font-normal: 400;
|
|
268
|
+
--font-medium: 500;
|
|
269
|
+
--font-semibold: 600;
|
|
270
|
+
--font-bold: 700;
|
|
271
|
+
--font-extrabold: 800;
|
|
121
272
|
}
|