@frame-kit/tokens 0.0.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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +44 -0
  3. package/base.css +986 -0
  4. package/dark.css +742 -0
  5. package/index.d.ts +806 -0
  6. package/index.js +806 -0
  7. package/package.json +32 -0
  8. package/scss/tokens.base.scss +1123 -0
  9. package/scss/tokens.dark.scss +856 -0
package/dark.css ADDED
@@ -0,0 +1,742 @@
1
+ @charset "UTF-8";
2
+ /* ==========================================================================
3
+ Dark Mode Tokens — libs/ui-shared
4
+ Remaps color-sensitive tokens for dark mode.
5
+
6
+ Activation (highest → lowest priority):
7
+ 1. .dark class on <html> — user override
8
+ 2. @media (prefers-color-scheme: dark) — system preference
9
+
10
+ Non-color tokens (typography, spacing, radii) are NOT redefined here
11
+ because they remain the same across themes.
12
+ ========================================================================== */
13
+ /* ---------- System preference (default) ---------- */
14
+ @media (prefers-color-scheme: dark) {
15
+ :root {
16
+ /* ==========================================================================
17
+ 1. PRIMITIVES
18
+ ========================================================================== */
19
+ /* Color palette */
20
+ --fk-color-primary: #3b9eff;
21
+ --fk-color-primary-hover: #5cb0ff;
22
+ --fk-color-primary-active: #7ec2ff;
23
+ --fk-color-primary-light: #1a2a3e;
24
+ --fk-color-primary-light-border: #1e3a5f;
25
+ --fk-color-primary-light-gradient: #1e3350;
26
+ --fk-color-accent-gradient: #143838;
27
+ --fk-color-ghost-white: #1a1a1e;
28
+ --fk-color-surface: #121214;
29
+ --fk-color-surface-muted: #1c1c20;
30
+ --fk-color-text: #e8ecf1;
31
+ --fk-color-muted: #8a8f98;
32
+ --fk-color-border: #2e2e34;
33
+ /* Focus */
34
+ --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
35
+ /* ==========================================================================
36
+ 3. ATOMS
37
+ ========================================================================== */
38
+ /* Text */
39
+ --fk-text-color-default: var(--fk-color-text);
40
+ --fk-text-color-muted: var(--fk-color-muted);
41
+ --fk-text-color-subtle: #6b7280;
42
+ --fk-text-color-danger: #f87171;
43
+ --fk-text-color-success: #4ade80;
44
+ /* Link */
45
+ --fk-link-color-default: var(--fk-color-text);
46
+ --fk-link-color-default-hover: var(--fk-color-primary);
47
+ --fk-link-color-muted: var(--fk-color-muted);
48
+ --fk-link-color-muted-hover: var(--fk-color-text);
49
+ --fk-link-color-primary: var(--fk-color-primary);
50
+ --fk-link-color-primary-hover: var(--fk-color-primary-hover);
51
+ --fk-link-color-primary-active: var(--fk-color-primary-active);
52
+ --fk-link-color-danger: #f87171;
53
+ --fk-link-color-danger-hover: #ef4444;
54
+ --fk-link-color-disabled: #4b5563;
55
+ /* Icon */
56
+ --fk-icon-color-default: var(--fk-color-text);
57
+ --fk-icon-color-muted: var(--fk-color-muted);
58
+ --fk-icon-color-primary: var(--fk-color-primary);
59
+ --fk-icon-color-danger: #f87171;
60
+ --fk-icon-color-success: #4ade80;
61
+ /* Card */
62
+ --fk-card-bg: var(--fk-color-surface);
63
+ --fk-card-border-color: var(--fk-color-border);
64
+ /* Badge */
65
+ --fk-badge-default-bg: #2a2a30;
66
+ --fk-badge-default-color: #d1d5db;
67
+ --fk-badge-primary-bg: #1a2a3e;
68
+ --fk-badge-primary-color: #5cb0ff;
69
+ --fk-badge-success-bg: #0f291a;
70
+ --fk-badge-success-color: #4ade80;
71
+ --fk-badge-warning-bg: #2a1f0a;
72
+ --fk-badge-warning-color: #fbbf24;
73
+ --fk-badge-danger-bg: #2a0f0f;
74
+ --fk-badge-danger-color: #f87171;
75
+ /* Method Badge (docs) */
76
+ --fk-method-badge-bg-neutral: #2a2a30;
77
+ --fk-method-badge-color: #e8ecf1;
78
+ --fk-method-badge-bg-get: #0f291a;
79
+ --fk-method-badge-color-get: #4ade80;
80
+ --fk-method-badge-bg-post: #1a2a3e;
81
+ --fk-method-badge-color-post: #8bb8ff;
82
+ --fk-method-badge-bg-put: #2a1f0a;
83
+ --fk-method-badge-color-put: #fbbf24;
84
+ --fk-method-badge-bg-patch: #221536;
85
+ --fk-method-badge-color-patch: #b78cff;
86
+ --fk-method-badge-bg-delete: #2a0f0f;
87
+ --fk-method-badge-color-delete: #f87171;
88
+ --fk-method-badge-bg-head: var(--fk-method-badge-bg-neutral);
89
+ --fk-method-badge-color-head: #d1d5db;
90
+ --fk-method-badge-bg-options: var(--fk-method-badge-bg-neutral);
91
+ --fk-method-badge-color-options: #d1d5db;
92
+ /* Endpoint Link (docs) */
93
+ --fk-endpoint-link-bg-hover: var(--fk-color-surface-muted);
94
+ --fk-endpoint-link-bg-active: var(--fk-color-primary-light);
95
+ --fk-endpoint-link-color-active: var(--fk-color-primary);
96
+ /* Progress Bar */
97
+ --fk-progress-bar-bg: var(--fk-color-surface-muted);
98
+ --fk-progress-bar-label-color: var(--fk-color-text);
99
+ /* Segmented Bar */
100
+ --fk-segmented-bar-bg: var(--fk-color-surface-muted);
101
+ /* Timeline */
102
+ --fk-timeline-marker-bg: var(--fk-color-surface);
103
+ --fk-timeline-marker-border-color: var(--fk-color-border);
104
+ --fk-timeline-connector-color: var(--fk-color-border);
105
+ --fk-timeline-title-color: var(--fk-color-text);
106
+ --fk-timeline-description-color: var(--fk-color-muted);
107
+ /* Headline */
108
+ --fk-headline-color-default: var(--fk-color-text);
109
+ --fk-headline-color-muted: var(--fk-color-muted);
110
+ /* Separator */
111
+ --fk-separator-color: var(--fk-color-border);
112
+ /* Nav Separator */
113
+ --fk-nav-separator-color: var(--fk-color-border);
114
+ /* Tooltip */
115
+ --fk-tooltip-bg: var(--fk-color-surface);
116
+ --fk-tooltip-color: var(--fk-color-text);
117
+ --fk-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
118
+ /* ==========================================================================
119
+ 4. MOLECULES
120
+ ========================================================================== */
121
+ /* Avatar */
122
+ --fk-avatar-bg: var(--fk-color-surface-muted);
123
+ --fk-avatar-color: var(--fk-color-muted);
124
+ --fk-avatar-status-border: var(--fk-color-surface);
125
+ /* Menu Item */
126
+ --fk-menu-item-color: var(--fk-color-text);
127
+ --fk-menu-item-bg-hover: var(--fk-color-surface-muted);
128
+ --fk-menu-item-danger-color: #f87171;
129
+ --fk-menu-item-danger-bg-hover: #2a0f0f;
130
+ --fk-menu-separator-color: var(--fk-color-border);
131
+ --fk-menu-item-focus-ring: var(--fk-focus-ring);
132
+ /* Dropdown Menu */
133
+ --fk-dropdown-menu-panel-bg: var(--fk-color-surface);
134
+ --fk-dropdown-menu-panel-border: var(--fk-color-border);
135
+ --fk-dropdown-menu-panel-shadow:
136
+ 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
137
+ /* Editable Field */
138
+ --fk-editable-field-bg: var(--fk-color-surface);
139
+ --fk-editable-field-border-color: var(--fk-color-border);
140
+ --fk-editable-field-color: var(--fk-color-text);
141
+ --fk-editable-field-empty-color: var(--fk-color-muted);
142
+ --fk-editable-field-trigger-color: var(--fk-color-muted);
143
+ /* User Menu */
144
+ --fk-user-menu-trigger-bg-hover: var(--fk-color-surface-muted);
145
+ --fk-user-menu-name-color: var(--fk-color-text);
146
+ --fk-user-menu-email-color: var(--fk-color-muted);
147
+ --fk-user-menu-chevron-color: var(--fk-color-muted);
148
+ --fk-user-menu-panel-bg: var(--fk-color-surface);
149
+ --fk-user-menu-panel-border: var(--fk-color-border);
150
+ --fk-user-menu-panel-shadow:
151
+ 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
152
+ --fk-user-menu-item-color: var(--fk-color-text);
153
+ --fk-user-menu-item-bg-hover: var(--fk-color-surface-muted);
154
+ --fk-user-menu-separator-color: var(--fk-color-border);
155
+ --fk-user-menu-focus-ring: var(--fk-focus-ring);
156
+ /* Sidenav Link */
157
+ --fk-sidenav-link-color: var(--fk-color-text);
158
+ --fk-sidenav-link-color-hover: var(--fk-color-primary);
159
+ --fk-sidenav-link-bg-hover: var(--fk-color-surface-muted);
160
+ --fk-sidenav-link-bg-active: var(--fk-color-surface-muted);
161
+ --fk-sidenav-link-color-active: var(--fk-color-primary);
162
+ --fk-sidenav-link-focus-ring: var(--fk-focus-ring);
163
+ /* Tabs */
164
+ --fk-tabs-tab-color: var(--fk-color-text-muted);
165
+ --fk-tabs-tab-color-active: var(--fk-color-primary);
166
+ --fk-tabs-tab-color-hover: var(--fk-color-text);
167
+ --fk-tabs-tab-color-disabled: var(--fk-color-text-disabled);
168
+ --fk-tabs-border-color: var(--fk-color-border);
169
+ --fk-tabs-indicator-color: var(--fk-color-primary);
170
+ --fk-tabs-pill-active-bg: var(--fk-color-primary);
171
+ --fk-tabs-pill-active-color: #121214;
172
+ --fk-tabs-contained-bg: var(--fk-color-surface-muted);
173
+ --fk-tabs-contained-active-bg: var(--fk-color-surface);
174
+ --fk-tabs-badge-bg: var(--fk-color-surface-muted);
175
+ --fk-tabs-badge-color: var(--fk-color-text-muted);
176
+ --fk-tabs-close-bg-hover: var(--fk-color-surface-muted);
177
+ --fk-tabs-scroll-btn-bg: var(--fk-color-surface);
178
+ --fk-tabs-scroll-btn-color: var(--fk-color-text-muted);
179
+ --fk-tabs-scroll-btn-color-hover: var(--fk-color-text);
180
+ /* Button: primary */
181
+ --fk-button-primary-bg: var(--fk-color-primary);
182
+ --fk-button-primary-bg-hover: var(--fk-color-primary-hover);
183
+ --fk-button-primary-bg-active: var(--fk-color-primary-active);
184
+ --fk-button-primary-color: #121214;
185
+ --fk-button-primary-border-color: transparent;
186
+ /* Button: secondary */
187
+ --fk-button-secondary-bg: transparent;
188
+ --fk-button-secondary-bg-hover: var(--fk-color-surface-muted);
189
+ --fk-button-secondary-bg-active: var(--fk-color-border);
190
+ --fk-button-secondary-color: var(--fk-color-primary);
191
+ --fk-button-secondary-border-color: var(--fk-color-border);
192
+ /* Button: outline */
193
+ --fk-button-outline-bg: transparent;
194
+ --fk-button-outline-bg-hover: var(--fk-color-surface-muted);
195
+ --fk-button-outline-bg-active: var(--fk-color-border);
196
+ --fk-button-outline-color: var(--fk-color-primary);
197
+ --fk-button-outline-border-color: var(--fk-color-border);
198
+ /* Button: danger */
199
+ --fk-button-danger-bg: #dc2626;
200
+ --fk-button-danger-bg-hover: #ef4444;
201
+ --fk-button-danger-bg-active: #f87171;
202
+ --fk-button-danger-color: #121214;
203
+ --fk-button-danger-border-color: transparent;
204
+ /* Callout */
205
+ --fk-callout-bg: var(--fk-color-surface-muted);
206
+ --fk-callout-border-color: var(--fk-color-border);
207
+ /* Alert */
208
+ --fk-alert-info-bg: #0c1929;
209
+ --fk-alert-info-border-color: #1e3a5f;
210
+ --fk-alert-info-color: #93c5fd;
211
+ --fk-alert-success-bg: #0f291a;
212
+ --fk-alert-success-border-color: #16593a;
213
+ --fk-alert-success-color: #4ade80;
214
+ --fk-alert-warning-bg: #2a1f0a;
215
+ --fk-alert-warning-border-color: #5c4813;
216
+ --fk-alert-warning-color: #fbbf24;
217
+ --fk-alert-error-bg: #2a0f0f;
218
+ --fk-alert-error-border-color: #5c1a1a;
219
+ --fk-alert-error-color: #f87171;
220
+ /* Accordion */
221
+ --fk-accordion-color: var(--fk-color-text);
222
+ --fk-accordion-border-color: var(--fk-color-border);
223
+ --fk-accordion-header-bg-hover: var(--fk-color-surface-muted);
224
+ --fk-accordion-header-bg-expanded: var(--fk-color-surface-muted);
225
+ --fk-accordion-title-color: var(--fk-color-text);
226
+ --fk-accordion-description-color: var(--fk-color-muted);
227
+ --fk-accordion-leading-text-color: var(--fk-color-muted);
228
+ --fk-accordion-chevron-color: var(--fk-color-muted);
229
+ --fk-accordion-panel-color: var(--fk-color-text);
230
+ --fk-accordion-focus-ring: var(--fk-focus-ring);
231
+ /* Breadcrumb (route-driven) */
232
+ --fk-breadcrumb-link-color: var(--fk-color-muted);
233
+ --fk-breadcrumb-link-color-hover: var(--fk-color-text);
234
+ --fk-breadcrumb-current-color: var(--fk-color-text);
235
+ --fk-breadcrumb-separator-color: var(--fk-color-muted);
236
+ /* Copyable Field */
237
+ --fk-copyable-field-bg: var(--fk-color-surface-muted);
238
+ --fk-copyable-field-border-color: var(--fk-color-border);
239
+ --fk-copyable-field-value-color: var(--fk-color-text);
240
+ --fk-copyable-field-label-color: var(--fk-color-muted);
241
+ --fk-copyable-field-action-color: var(--fk-color-muted);
242
+ --fk-copyable-field-action-color-hover: var(--fk-color-text);
243
+ --fk-copyable-field-action-bg-hover: var(--fk-color-surface-dim);
244
+ /* Node Tree Breadcrumb */
245
+ --fk-node-tree-breadcrumb-link-color: var(--fk-color-muted);
246
+ --fk-node-tree-breadcrumb-link-color-hover: var(--fk-color-text);
247
+ --fk-node-tree-breadcrumb-current-color: var(--fk-color-primary);
248
+ --fk-node-tree-breadcrumb-separator-color: var(--fk-color-muted);
249
+ /* List Editor */
250
+ --fk-list-editor-item-bg: var(--fk-color-surface);
251
+ --fk-list-editor-item-border-color: var(--fk-color-border);
252
+ --fk-list-editor-input-color: var(--fk-color-text);
253
+ --fk-list-editor-input-bg: var(--fk-color-surface);
254
+ --fk-list-editor-input-border-color: var(--fk-color-border);
255
+ --fk-list-editor-input-focus-border-color: var(--fk-color-primary);
256
+ --fk-list-editor-order-bg: rgba(59, 158, 255, 0.15);
257
+ --fk-list-editor-order-color: var(--fk-color-primary);
258
+ --fk-list-editor-remove-color: var(--fk-color-muted);
259
+ --fk-list-editor-remove-hover-color: var(--fk-color-danger);
260
+ --fk-list-editor-empty-color: var(--fk-color-muted);
261
+ --fk-list-editor-error-color: var(--fk-color-danger);
262
+ --fk-list-editor-placeholder-bg: var(--fk-color-surface-muted);
263
+ --fk-list-editor-placeholder-border-color: var(--fk-color-border);
264
+ --fk-list-editor-drag-border-color: var(--fk-color-primary);
265
+ /* ==========================================================================
266
+ 5. ORGANISMS
267
+ ========================================================================== */
268
+ /* Node Tree */
269
+ --fk-node-tree-row-color: var(--fk-color-text);
270
+ --fk-node-tree-row-bg-hover: var(--fk-color-surface-muted);
271
+ --fk-node-tree-row-bg-selected: rgba(59, 158, 255, 0.15);
272
+ --fk-node-tree-row-color-selected: var(--fk-color-primary);
273
+ --fk-node-tree-row-toggle-color: var(--fk-color-muted);
274
+ --fk-node-tree-row-toggle-color-hover: var(--fk-color-text);
275
+ --fk-node-tree-row-toggle-bg-hover: var(--fk-color-surface-muted);
276
+ --fk-node-tree-row-handle-color: var(--fk-color-muted);
277
+ --fk-node-tree-row-handle-color-hover: var(--fk-color-text);
278
+ --fk-node-tree-row-bg-drop-target: rgba(59, 158, 255, 0.2);
279
+ --fk-node-tree-row-border-drop-target: var(--fk-color-primary);
280
+ --fk-node-tree-drag-preview-bg: var(--fk-color-surface);
281
+ --fk-node-tree-drag-preview-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
282
+ --fk-node-tree-drag-placeholder-bg: var(--fk-color-primary);
283
+ /* Content Split */
284
+ --fk-content-split-left-bg: var(--fk-color-surface);
285
+ --fk-content-split-left-border: 1px solid var(--fk-color-border);
286
+ --fk-content-split-overlay-bg: rgba(0, 0, 0, 0.7);
287
+ --fk-content-split-rail-toggle-color: var(--fk-color-muted);
288
+ --fk-content-split-rail-toggle-color-hover: var(--fk-color-text);
289
+ --fk-content-split-rail-toggle-bg-hover: var(--fk-color-surface-muted);
290
+ /* App Shell */
291
+ --fk-app-shell-overlay-bg: rgba(0, 0, 0, 0.7);
292
+ --fk-app-shell-aside-bg: var(--fk-color-surface);
293
+ --fk-app-shell-end-bg: var(--fk-color-surface);
294
+ --fk-app-shell-end-radius: var(--fk-radius-lg) 0 0 var(--fk-radius-lg);
295
+ --fk-app-shell-end-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
296
+ /* Data Table */
297
+ --fk-data-table-head-bg: var(--fk-color-surface-muted);
298
+ --fk-data-table-head-color: var(--fk-color-text-muted);
299
+ --fk-data-table-head-hover-color: var(--fk-color-text);
300
+ --fk-data-table-body-bg: var(--fk-color-surface);
301
+ --fk-data-table-body-color: var(--fk-color-text);
302
+ --fk-data-table-border-color: var(--fk-color-border);
303
+ --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
304
+ --fk-data-table-empty-color: var(--fk-color-text-muted);
305
+ --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
306
+ --fk-data-table-loading-color: var(--fk-color-text-muted);
307
+ --fk-data-table-row-selected-bg: var(--fk-color-primary-light);
308
+ --fk-data-table-row-selected-hover-bg: var(
309
+ --fk-color-primary-light-gradient
310
+ );
311
+ --fk-data-table-checkbox-border-color: var(--fk-color-border);
312
+ --fk-data-table-checkbox-bg: var(--fk-color-surface);
313
+ --fk-data-table-checkbox-hover-border-color: var(--fk-color-primary);
314
+ --fk-data-table-checkbox-checked-bg: var(--fk-color-primary);
315
+ --fk-data-table-checkbox-checked-border-color: var(--fk-color-primary);
316
+ --fk-data-table-checkbox-icon-color: var(--fk-color-surface);
317
+ /* Dialog */
318
+ --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.7);
319
+ --fk-dialog-panel-bg: var(--fk-color-surface);
320
+ --fk-dialog-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
321
+ --fk-dialog-footer-border: 1px solid var(--fk-color-border);
322
+ --fk-dialog-close-color: var(--fk-color-muted);
323
+ --fk-dialog-close-color-hover: var(--fk-color-text);
324
+ /* Wizard Dialog */
325
+ --fk-wizard-dialog-footer-border: 1px solid var(--fk-color-border);
326
+ --fk-wizard-dialog-step-number-active-color: #fff;
327
+ /* Toast */
328
+ --fk-toast-bg: var(--fk-color-surface);
329
+ --fk-toast-border-color: var(--fk-color-border);
330
+ --fk-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
331
+ --fk-toast-summary-color: var(--fk-color-text);
332
+ --fk-toast-detail-color: var(--fk-color-muted);
333
+ --fk-toast-dismiss-color: var(--fk-color-muted);
334
+ --fk-toast-dismiss-hover-color: var(--fk-color-text);
335
+ /* Form Field */
336
+ --fk-input-color: var(--fk-color-text);
337
+ --fk-input-placeholder-color: var(--fk-color-muted);
338
+ --fk-input-bg: var(--fk-color-surface);
339
+ --fk-input-border-color: var(--fk-color-border);
340
+ --fk-input-border-color-hover: var(--fk-color-muted);
341
+ --fk-input-border-color-focus: var(--fk-color-primary);
342
+ --fk-input-border-color-error: #f87171;
343
+ --fk-input-focus-ring: var(--fk-focus-ring);
344
+ --fk-form-label-color: #e2e8f0;
345
+ --fk-form-error-color: #f87171;
346
+ --fk-form-hint-color: var(--fk-color-muted);
347
+ /* File Dropzone */
348
+ --fk-file-dropzone-bg: var(--fk-color-surface-muted);
349
+ --fk-file-dropzone-bg-dragging: rgba(96, 165, 250, 0.08);
350
+ --fk-file-dropzone-border-color: var(--fk-color-border);
351
+ --fk-file-dropzone-border-color-hover: var(--fk-color-primary);
352
+ --fk-file-dropzone-border-color-dragging: var(--fk-color-primary);
353
+ --fk-file-dropzone-prompt-color: var(--fk-color-text);
354
+ --fk-file-dropzone-icon-color-disabled: var(--fk-color-muted);
355
+ /* Pagination */
356
+ --fk-pagination-color: var(--fk-color-muted);
357
+ --fk-pagination-border-color: var(--fk-color-border);
358
+ --fk-pagination-label-color: var(--fk-color-muted);
359
+ --fk-pagination-select-color: var(--fk-color-text);
360
+ --fk-pagination-select-bg: var(--fk-color-surface);
361
+ --fk-pagination-select-border-color: var(--fk-color-border);
362
+ --fk-pagination-page-info-color: var(--fk-color-text);
363
+ --fk-pagination-btn-color: var(--fk-color-text);
364
+ --fk-pagination-btn-border-color: var(--fk-color-border);
365
+ --fk-pagination-btn-bg-hover: var(--fk-color-surface-hover);
366
+ /* Drawer */
367
+ --fk-drawer-bg: var(--fk-color-surface);
368
+ --fk-drawer-border-color: var(--fk-color-border);
369
+ --fk-drawer-header-border-color: var(--fk-color-border);
370
+ --fk-drawer-title-color: var(--fk-color-text-strong);
371
+ --fk-drawer-close-color: var(--fk-color-muted);
372
+ --fk-drawer-close-color-hover: var(--fk-color-text);
373
+ --fk-drawer-close-bg-hover: var(--fk-color-surface-hover);
374
+ /* Avatar Stack */
375
+ --fk-avatar-stack-ring: 0 0 0 2px var(--fk-color-surface);
376
+ --fk-avatar-stack-overflow-color: var(--fk-color-text);
377
+ --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
378
+ --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
379
+ }
380
+ }
381
+ /* ---------- Class override (user preference) ---------- */
382
+ html.dark {
383
+ /* ==========================================================================
384
+ 1. PRIMITIVES
385
+ ========================================================================== */
386
+ /* Color palette */
387
+ --fk-color-primary: #3b9eff;
388
+ --fk-color-primary-hover: #5cb0ff;
389
+ --fk-color-primary-active: #7ec2ff;
390
+ --fk-color-primary-light: #1a2a3e;
391
+ --fk-color-primary-light-border: #1e3a5f;
392
+ --fk-color-primary-light-gradient: #1e3350;
393
+ --fk-color-accent-gradient: #143838;
394
+ --fk-color-ghost-white: #1a1a1e;
395
+ --fk-color-surface: #121214;
396
+ --fk-color-surface-muted: #1c1c20;
397
+ --fk-color-text: #e8ecf1;
398
+ --fk-color-muted: #8a8f98;
399
+ --fk-color-border: #2e2e34;
400
+ /* Focus */
401
+ --fk-focus-ring: 0 0 0 3px rgba(59, 158, 255, 0.4);
402
+ /* ==========================================================================
403
+ 3. ATOMS
404
+ ========================================================================== */
405
+ /* Text */
406
+ --fk-text-color-default: var(--fk-color-text);
407
+ --fk-text-color-muted: var(--fk-color-muted);
408
+ --fk-text-color-subtle: #6b7280;
409
+ --fk-text-color-danger: #f87171;
410
+ --fk-text-color-success: #4ade80;
411
+ /* Link */
412
+ --fk-link-color-default: var(--fk-color-text);
413
+ --fk-link-color-default-hover: var(--fk-color-primary);
414
+ --fk-link-color-muted: var(--fk-color-muted);
415
+ --fk-link-color-muted-hover: var(--fk-color-text);
416
+ --fk-link-color-primary: var(--fk-color-primary);
417
+ --fk-link-color-primary-hover: var(--fk-color-primary-hover);
418
+ --fk-link-color-primary-active: var(--fk-color-primary-active);
419
+ --fk-link-color-danger: #f87171;
420
+ --fk-link-color-danger-hover: #ef4444;
421
+ --fk-link-color-disabled: #4b5563;
422
+ /* Icon */
423
+ --fk-icon-color-default: var(--fk-color-text);
424
+ --fk-icon-color-muted: var(--fk-color-muted);
425
+ --fk-icon-color-primary: var(--fk-color-primary);
426
+ --fk-icon-color-danger: #f87171;
427
+ --fk-icon-color-success: #4ade80;
428
+ /* Card */
429
+ --fk-card-bg: var(--fk-color-surface);
430
+ --fk-card-border-color: var(--fk-color-border);
431
+ /* Badge */
432
+ --fk-badge-default-bg: #2a2a30;
433
+ --fk-badge-default-color: #d1d5db;
434
+ --fk-badge-primary-bg: #1a2a3e;
435
+ --fk-badge-primary-color: #5cb0ff;
436
+ --fk-badge-success-bg: #0f291a;
437
+ --fk-badge-success-color: #4ade80;
438
+ --fk-badge-warning-bg: #2a1f0a;
439
+ --fk-badge-warning-color: #fbbf24;
440
+ --fk-badge-danger-bg: #2a0f0f;
441
+ --fk-badge-danger-color: #f87171;
442
+ /* Method Badge (docs) */
443
+ --fk-method-badge-bg-neutral: #2a2a30;
444
+ --fk-method-badge-color: #e8ecf1;
445
+ --fk-method-badge-bg-get: #0f291a;
446
+ --fk-method-badge-color-get: #4ade80;
447
+ --fk-method-badge-bg-post: #1a2a3e;
448
+ --fk-method-badge-color-post: #8bb8ff;
449
+ --fk-method-badge-bg-put: #2a1f0a;
450
+ --fk-method-badge-color-put: #fbbf24;
451
+ --fk-method-badge-bg-patch: #221536;
452
+ --fk-method-badge-color-patch: #b78cff;
453
+ --fk-method-badge-bg-delete: #2a0f0f;
454
+ --fk-method-badge-color-delete: #f87171;
455
+ --fk-method-badge-bg-head: var(--fk-method-badge-bg-neutral);
456
+ --fk-method-badge-color-head: #d1d5db;
457
+ --fk-method-badge-bg-options: var(--fk-method-badge-bg-neutral);
458
+ --fk-method-badge-color-options: #d1d5db;
459
+ /* Endpoint Link (docs) */
460
+ --fk-endpoint-link-bg-hover: var(--fk-color-surface-muted);
461
+ --fk-endpoint-link-bg-active: var(--fk-color-primary-light);
462
+ --fk-endpoint-link-color-active: var(--fk-color-primary);
463
+ /* Progress Bar */
464
+ --fk-progress-bar-bg: var(--fk-color-surface-muted);
465
+ --fk-progress-bar-label-color: var(--fk-color-text);
466
+ /* Segmented Bar */
467
+ --fk-segmented-bar-bg: var(--fk-color-surface-muted);
468
+ /* Timeline */
469
+ --fk-timeline-marker-bg: var(--fk-color-surface);
470
+ --fk-timeline-marker-border-color: var(--fk-color-border);
471
+ --fk-timeline-connector-color: var(--fk-color-border);
472
+ --fk-timeline-title-color: var(--fk-color-text);
473
+ --fk-timeline-description-color: var(--fk-color-muted);
474
+ /* Headline */
475
+ --fk-headline-color-default: var(--fk-color-text);
476
+ --fk-headline-color-muted: var(--fk-color-muted);
477
+ /* Separator */
478
+ --fk-separator-color: var(--fk-color-border);
479
+ /* Nav Separator */
480
+ --fk-nav-separator-color: var(--fk-color-border);
481
+ /* Menu Item */
482
+ --fk-menu-item-color: var(--fk-color-text);
483
+ --fk-menu-item-bg-hover: var(--fk-color-surface-muted);
484
+ --fk-menu-item-danger-color: #f87171;
485
+ --fk-menu-item-danger-bg-hover: #2a0f0f;
486
+ --fk-menu-separator-color: var(--fk-color-border);
487
+ --fk-menu-item-focus-ring: var(--fk-focus-ring);
488
+ /* Tooltip */
489
+ --fk-tooltip-bg: var(--fk-color-surface);
490
+ --fk-tooltip-color: var(--fk-color-text);
491
+ --fk-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
492
+ /* ==========================================================================
493
+ 4. MOLECULES
494
+ ========================================================================== */
495
+ /* Avatar */
496
+ --fk-avatar-bg: var(--fk-color-surface-muted);
497
+ --fk-avatar-color: var(--fk-color-muted);
498
+ --fk-avatar-status-border: var(--fk-color-surface);
499
+ /* Dropdown Menu */
500
+ --fk-dropdown-menu-panel-bg: var(--fk-color-surface);
501
+ --fk-dropdown-menu-panel-border: var(--fk-color-border);
502
+ --fk-dropdown-menu-panel-shadow:
503
+ 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
504
+ /* Editable Field */
505
+ --fk-editable-field-bg: var(--fk-color-surface);
506
+ --fk-editable-field-border-color: var(--fk-color-border);
507
+ --fk-editable-field-color: var(--fk-color-text);
508
+ --fk-editable-field-empty-color: var(--fk-color-muted);
509
+ --fk-editable-field-trigger-color: var(--fk-color-muted);
510
+ /* User Menu */
511
+ --fk-user-menu-trigger-bg-hover: var(--fk-color-surface-muted);
512
+ --fk-user-menu-name-color: var(--fk-color-text);
513
+ --fk-user-menu-email-color: var(--fk-color-muted);
514
+ --fk-user-menu-chevron-color: var(--fk-color-muted);
515
+ --fk-user-menu-panel-bg: var(--fk-color-surface);
516
+ --fk-user-menu-panel-border: var(--fk-color-border);
517
+ --fk-user-menu-panel-shadow:
518
+ 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
519
+ --fk-user-menu-item-color: var(--fk-color-text);
520
+ --fk-user-menu-item-bg-hover: var(--fk-color-surface-muted);
521
+ --fk-user-menu-separator-color: var(--fk-color-border);
522
+ --fk-user-menu-focus-ring: var(--fk-focus-ring);
523
+ /* Sidenav Link */
524
+ --fk-sidenav-link-color: var(--fk-color-text);
525
+ --fk-sidenav-link-color-hover: var(--fk-color-primary);
526
+ --fk-sidenav-link-bg-hover: var(--fk-color-surface-muted);
527
+ --fk-sidenav-link-bg-active: var(--fk-color-surface-muted);
528
+ --fk-sidenav-link-color-active: var(--fk-color-primary);
529
+ --fk-sidenav-link-focus-ring: var(--fk-focus-ring);
530
+ /* Tabs */
531
+ --fk-tabs-tab-color: var(--fk-color-text-muted);
532
+ --fk-tabs-tab-color-active: var(--fk-color-primary);
533
+ --fk-tabs-tab-color-hover: var(--fk-color-text);
534
+ --fk-tabs-tab-color-disabled: var(--fk-color-text-disabled);
535
+ --fk-tabs-border-color: var(--fk-color-border);
536
+ --fk-tabs-indicator-color: var(--fk-color-primary);
537
+ --fk-tabs-pill-active-bg: var(--fk-color-primary);
538
+ --fk-tabs-pill-active-color: #121214;
539
+ --fk-tabs-contained-bg: var(--fk-color-surface-muted);
540
+ --fk-tabs-contained-active-bg: var(--fk-color-surface);
541
+ --fk-tabs-badge-bg: var(--fk-color-surface-muted);
542
+ --fk-tabs-badge-color: var(--fk-color-text-muted);
543
+ --fk-tabs-close-bg-hover: var(--fk-color-surface-muted);
544
+ --fk-tabs-scroll-btn-bg: var(--fk-color-surface);
545
+ --fk-tabs-scroll-btn-color: var(--fk-color-text-muted);
546
+ --fk-tabs-scroll-btn-color-hover: var(--fk-color-text);
547
+ /* Button: primary */
548
+ --fk-button-primary-bg: var(--fk-color-primary);
549
+ --fk-button-primary-bg-hover: var(--fk-color-primary-hover);
550
+ --fk-button-primary-bg-active: var(--fk-color-primary-active);
551
+ --fk-button-primary-color: #121214;
552
+ --fk-button-primary-border-color: transparent;
553
+ /* Button: secondary */
554
+ --fk-button-secondary-bg: transparent;
555
+ --fk-button-secondary-bg-hover: var(--fk-color-surface-muted);
556
+ --fk-button-secondary-bg-active: var(--fk-color-border);
557
+ --fk-button-secondary-color: var(--fk-color-primary);
558
+ --fk-button-secondary-border-color: var(--fk-color-border);
559
+ /* Button: outline */
560
+ --fk-button-outline-bg: transparent;
561
+ --fk-button-outline-bg-hover: var(--fk-color-surface-muted);
562
+ --fk-button-outline-bg-active: var(--fk-color-border);
563
+ --fk-button-outline-color: var(--fk-color-primary);
564
+ --fk-button-outline-border-color: var(--fk-color-border);
565
+ /* Button: danger */
566
+ --fk-button-danger-bg: #dc2626;
567
+ --fk-button-danger-bg-hover: #ef4444;
568
+ --fk-button-danger-bg-active: #f87171;
569
+ --fk-button-danger-color: #121214;
570
+ --fk-button-danger-border-color: transparent;
571
+ /* Callout */
572
+ --fk-callout-bg: var(--fk-color-surface-muted);
573
+ --fk-callout-border-color: var(--fk-color-border);
574
+ /* Alert */
575
+ --fk-alert-info-bg: #0c1929;
576
+ --fk-alert-info-border-color: #1e3a5f;
577
+ --fk-alert-info-color: #93c5fd;
578
+ --fk-alert-success-bg: #0f291a;
579
+ --fk-alert-success-border-color: #16593a;
580
+ --fk-alert-success-color: #4ade80;
581
+ --fk-alert-warning-bg: #2a1f0a;
582
+ --fk-alert-warning-border-color: #5c4813;
583
+ --fk-alert-warning-color: #fbbf24;
584
+ --fk-alert-error-bg: #2a0f0f;
585
+ --fk-alert-error-border-color: #5c1a1a;
586
+ --fk-alert-error-color: #f87171;
587
+ /* Accordion */
588
+ --fk-accordion-color: var(--fk-color-text);
589
+ --fk-accordion-header-bg-hover: var(--fk-color-surface-muted);
590
+ --fk-accordion-title-color: var(--fk-color-text);
591
+ --fk-accordion-description-color: var(--fk-color-muted);
592
+ --fk-accordion-leading-text-color: var(--fk-color-muted);
593
+ --fk-accordion-chevron-color: var(--fk-color-muted);
594
+ --fk-accordion-panel-color: var(--fk-color-text);
595
+ --fk-accordion-focus-ring: var(--fk-focus-ring);
596
+ /* Breadcrumb (route-driven) */
597
+ --fk-breadcrumb-link-color: var(--fk-color-muted);
598
+ --fk-breadcrumb-link-color-hover: var(--fk-color-text);
599
+ --fk-breadcrumb-current-color: var(--fk-color-text);
600
+ --fk-breadcrumb-separator-color: var(--fk-color-muted);
601
+ /* Copyable Field */
602
+ --fk-copyable-field-bg: var(--fk-color-surface-muted);
603
+ --fk-copyable-field-border-color: var(--fk-color-border);
604
+ --fk-copyable-field-value-color: var(--fk-color-text);
605
+ --fk-copyable-field-label-color: var(--fk-color-muted);
606
+ --fk-copyable-field-action-color: var(--fk-color-muted);
607
+ --fk-copyable-field-action-color-hover: var(--fk-color-text);
608
+ --fk-copyable-field-action-bg-hover: var(--fk-color-surface-dim);
609
+ /* Node Tree Breadcrumb */
610
+ --fk-node-tree-breadcrumb-link-color: var(--fk-color-muted);
611
+ --fk-node-tree-breadcrumb-link-color-hover: var(--fk-color-text);
612
+ --fk-node-tree-breadcrumb-current-color: var(--fk-color-text);
613
+ --fk-node-tree-breadcrumb-separator-color: var(--fk-color-muted);
614
+ /* List Editor */
615
+ --fk-list-editor-item-bg: var(--fk-color-surface);
616
+ --fk-list-editor-item-border-color: var(--fk-color-border);
617
+ --fk-list-editor-input-color: var(--fk-color-text);
618
+ --fk-list-editor-input-bg: var(--fk-color-surface);
619
+ --fk-list-editor-input-border-color: var(--fk-color-border);
620
+ --fk-list-editor-input-focus-border-color: var(--fk-color-primary);
621
+ --fk-list-editor-order-bg: rgba(59, 158, 255, 0.15);
622
+ --fk-list-editor-order-color: var(--fk-color-primary);
623
+ --fk-list-editor-remove-color: var(--fk-color-muted);
624
+ --fk-list-editor-remove-hover-color: var(--fk-color-danger);
625
+ --fk-list-editor-empty-color: var(--fk-color-muted);
626
+ --fk-list-editor-error-color: var(--fk-color-danger);
627
+ --fk-list-editor-placeholder-bg: var(--fk-color-surface-muted);
628
+ --fk-list-editor-placeholder-border-color: var(--fk-color-border);
629
+ --fk-list-editor-drag-border-color: var(--fk-color-primary);
630
+ /* ==========================================================================
631
+ 5. ORGANISMS
632
+ ========================================================================== */
633
+ /* Node Tree */
634
+ --fk-node-tree-row-color: var(--fk-color-text);
635
+ --fk-node-tree-row-bg-hover: var(--fk-color-surface-muted);
636
+ --fk-node-tree-row-bg-selected: rgba(59, 158, 255, 0.15);
637
+ --fk-node-tree-row-color-selected: var(--fk-color-primary);
638
+ --fk-node-tree-row-toggle-color: var(--fk-color-muted);
639
+ --fk-node-tree-row-toggle-color-hover: var(--fk-color-text);
640
+ --fk-node-tree-row-toggle-bg-hover: var(--fk-color-surface-muted);
641
+ --fk-node-tree-row-handle-color: var(--fk-color-muted);
642
+ --fk-node-tree-row-handle-color-hover: var(--fk-color-text);
643
+ --fk-node-tree-row-bg-drop-target: rgba(59, 158, 255, 0.2);
644
+ --fk-node-tree-row-border-drop-target: var(--fk-color-primary);
645
+ --fk-node-tree-drag-preview-bg: var(--fk-color-surface);
646
+ --fk-node-tree-drag-preview-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
647
+ --fk-node-tree-drag-placeholder-bg: var(--fk-color-primary);
648
+ /* Content Split */
649
+ --fk-content-split-left-bg: var(--fk-color-surface);
650
+ --fk-content-split-left-border: 1px solid var(--fk-color-border);
651
+ --fk-content-split-overlay-bg: rgba(0, 0, 0, 0.7);
652
+ --fk-content-split-rail-toggle-color: var(--fk-color-muted);
653
+ --fk-content-split-rail-toggle-color-hover: var(--fk-color-text);
654
+ --fk-content-split-rail-toggle-bg-hover: var(--fk-color-surface-muted);
655
+ /* App Shell */
656
+ --fk-app-shell-overlay-bg: rgba(0, 0, 0, 0.7);
657
+ --fk-app-shell-aside-bg: var(--fk-color-surface);
658
+ --fk-app-shell-end-bg: var(--fk-color-surface);
659
+ --fk-app-shell-end-radius: var(--fk-radius-lg) 0 0 var(--fk-radius-lg);
660
+ --fk-app-shell-end-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
661
+ /* Data Table */
662
+ --fk-data-table-head-bg: var(--fk-color-surface-muted);
663
+ --fk-data-table-head-color: var(--fk-color-text-muted);
664
+ --fk-data-table-head-hover-color: var(--fk-color-text);
665
+ --fk-data-table-body-bg: var(--fk-color-surface);
666
+ --fk-data-table-body-color: var(--fk-color-text);
667
+ --fk-data-table-border-color: var(--fk-color-border);
668
+ --fk-data-table-row-hover-bg: var(--fk-color-surface-muted);
669
+ --fk-data-table-empty-color: var(--fk-color-text-muted);
670
+ --fk-data-table-loading-bg: rgba(0, 0, 0, 0.5);
671
+ --fk-data-table-loading-color: var(--fk-color-text-muted);
672
+ --fk-data-table-row-selected-bg: var(--fk-color-primary-light);
673
+ --fk-data-table-row-selected-hover-bg: var(--fk-color-primary-light-gradient);
674
+ --fk-data-table-checkbox-border-color: var(--fk-color-border);
675
+ --fk-data-table-checkbox-bg: var(--fk-color-surface);
676
+ --fk-data-table-checkbox-hover-border-color: var(--fk-color-primary);
677
+ --fk-data-table-checkbox-checked-bg: var(--fk-color-primary);
678
+ --fk-data-table-checkbox-checked-border-color: var(--fk-color-primary);
679
+ --fk-data-table-checkbox-icon-color: var(--fk-color-surface);
680
+ /* Dialog */
681
+ --fk-dialog-overlay-bg: rgba(0, 0, 0, 0.7);
682
+ --fk-dialog-panel-bg: var(--fk-color-surface);
683
+ --fk-dialog-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
684
+ --fk-dialog-footer-border: 1px solid var(--fk-color-border);
685
+ --fk-dialog-close-color: var(--fk-color-muted);
686
+ --fk-dialog-close-color-hover: var(--fk-color-text);
687
+ /* Wizard Dialog */
688
+ --fk-wizard-dialog-footer-border: 1px solid var(--fk-color-border);
689
+ --fk-wizard-dialog-step-number-active-color: #fff;
690
+ /* Toast */
691
+ --fk-toast-bg: var(--fk-color-surface);
692
+ --fk-toast-border-color: var(--fk-color-border);
693
+ --fk-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
694
+ --fk-toast-summary-color: var(--fk-color-text);
695
+ --fk-toast-detail-color: var(--fk-color-muted);
696
+ --fk-toast-dismiss-color: var(--fk-color-muted);
697
+ --fk-toast-dismiss-hover-color: var(--fk-color-text);
698
+ /* Form Field */
699
+ --fk-input-color: var(--fk-color-text);
700
+ --fk-input-placeholder-color: var(--fk-color-muted);
701
+ --fk-input-bg: var(--fk-color-surface);
702
+ --fk-input-border-color: var(--fk-color-border);
703
+ --fk-input-border-color-hover: var(--fk-color-muted);
704
+ --fk-input-border-color-focus: var(--fk-color-primary);
705
+ --fk-input-border-color-error: #f87171;
706
+ --fk-input-focus-ring: var(--fk-focus-ring);
707
+ --fk-form-label-color: #e2e8f0;
708
+ --fk-form-error-color: #f87171;
709
+ --fk-form-hint-color: var(--fk-color-muted);
710
+ /* File Dropzone */
711
+ --fk-file-dropzone-bg: var(--fk-color-surface-muted);
712
+ --fk-file-dropzone-bg-dragging: rgba(96, 165, 250, 0.08);
713
+ --fk-file-dropzone-border-color: var(--fk-color-border);
714
+ --fk-file-dropzone-border-color-hover: var(--fk-color-primary);
715
+ --fk-file-dropzone-border-color-dragging: var(--fk-color-primary);
716
+ --fk-file-dropzone-prompt-color: var(--fk-color-text);
717
+ --fk-file-dropzone-icon-color-disabled: var(--fk-color-muted);
718
+ /* Pagination */
719
+ --fk-pagination-color: var(--fk-color-muted);
720
+ --fk-pagination-border-color: var(--fk-color-border);
721
+ --fk-pagination-label-color: var(--fk-color-muted);
722
+ --fk-pagination-select-color: var(--fk-color-text);
723
+ --fk-pagination-select-bg: var(--fk-color-surface);
724
+ --fk-pagination-select-border-color: var(--fk-color-border);
725
+ --fk-pagination-page-info-color: var(--fk-color-text);
726
+ --fk-pagination-btn-color: var(--fk-color-text);
727
+ --fk-pagination-btn-border-color: var(--fk-color-border);
728
+ --fk-pagination-btn-bg-hover: var(--fk-color-surface-hover);
729
+ /* Drawer */
730
+ --fk-drawer-bg: var(--fk-color-surface);
731
+ --fk-drawer-border-color: var(--fk-color-border);
732
+ --fk-drawer-header-border-color: var(--fk-color-border);
733
+ --fk-drawer-title-color: var(--fk-color-text-strong);
734
+ --fk-drawer-close-color: var(--fk-color-muted);
735
+ --fk-drawer-close-color-hover: var(--fk-color-text);
736
+ --fk-drawer-close-bg-hover: var(--fk-color-surface-hover);
737
+ /* Avatar Stack */
738
+ --fk-avatar-stack-ring: 0 0 0 2px var(--fk-color-surface);
739
+ --fk-avatar-stack-overflow-color: var(--fk-color-text);
740
+ --fk-avatar-stack-overflow-bg: var(--fk-color-surface-muted);
741
+ --fk-avatar-stack-overflow-bg-hover: var(--fk-color-surface-hover);
742
+ }