@kanso-protocol/core 0.5.1 → 0.5.2
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.
- package/package.json +1 -1
- package/styles/_tokens.scss +19 -0
- package/styles/dark.css +210 -40
- package/styles/tokens.css +202 -181
package/package.json
CHANGED
package/styles/_tokens.scss
CHANGED
|
@@ -124,6 +124,11 @@ $kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
|
124
124
|
$kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
|
|
125
125
|
$kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
126
126
|
$kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
127
|
+
$kp-color-surface-on-dark-base: #18181b; // Always-dark elevated surface (e.g. .kp-header--dark, .kp-sidebar--dark). No dark override — value is fixed across themes.
|
|
128
|
+
$kp-color-surface-on-dark-muted: #27272a; // Always-dark hover/muted surface
|
|
129
|
+
$kp-color-surface-on-dark-strong: #3f3f46; // Always-dark active/pressed surface
|
|
130
|
+
$kp-color-border-on-dark-subtle: #27272a; // Faint divider on always-dark surfaces
|
|
131
|
+
$kp-color-border-on-dark-default: #3f3f46; // Standard border on always-dark surfaces
|
|
127
132
|
$kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
|
|
128
133
|
$kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
|
|
129
134
|
$kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
|
|
@@ -411,6 +416,17 @@ $kp-color-neutral-ghost-fg-disabled: $kp-color-gray-400;
|
|
|
411
416
|
$kp-color-neutral-ghost-fg-loading: $kp-color-gray-400;
|
|
412
417
|
$kp-color-neutral-ghost-border-focus: $kp-color-gray-600;
|
|
413
418
|
$kp-color-focus-ring: $kp-color-blue-400; // Focus ring — 2px offset outline for all focusable elements
|
|
419
|
+
$kp-color-text-strong: $kp-color-gray-900; // Headings and primary emphasized text
|
|
420
|
+
$kp-color-text-default: $kp-color-gray-700; // Default body text
|
|
421
|
+
$kp-color-text-muted: $kp-color-gray-500; // Secondary text — captions, helper, less important labels. Dark override → gray.600 for AA contrast against dark page bg.
|
|
422
|
+
$kp-color-text-disabled: $kp-color-gray-400; // Disabled labels, placeholders. Dark override → gray.500 to stay visibly less prominent than `muted`.
|
|
423
|
+
$kp-color-surface-base: $kp-color-white; // Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B
|
|
424
|
+
$kp-color-surface-subtle: $kp-color-gray-50; // Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B
|
|
425
|
+
$kp-color-surface-muted: $kp-color-gray-100; // Hover background, alternating rows, muted callouts. Dark override → gray.200 (= #27272A in dark, distinguishable from base)
|
|
426
|
+
$kp-color-surface-strong: $kp-color-gray-200; // Active row, pressed state, more prominent muted bg. Dark override → gray.300
|
|
427
|
+
$kp-color-border-subtle: $kp-color-gray-100; // Faint internal dividers
|
|
428
|
+
$kp-color-border-default: $kp-color-gray-200; // Standard control and card borders
|
|
429
|
+
$kp-color-border-strong: $kp-color-gray-300; // Emphasized borders — focused panels, table headers
|
|
414
430
|
$kp-color-icon-primary: $kp-color-gray-700; // Default icon color on light backgrounds — navigation, lists, labels
|
|
415
431
|
$kp-color-icon-secondary: $kp-color-gray-400; // Decorative icons, placeholders, hints
|
|
416
432
|
$kp-color-icon-disabled: $kp-color-gray-300; // Disabled/inactive icons
|
|
@@ -462,6 +478,8 @@ $kp-color-input-border-disabled: $kp-color-gray-200;
|
|
|
462
478
|
$kp-color-input-border-error: $kp-color-red-500;
|
|
463
479
|
$kp-color-input-placeholder-default: $kp-color-gray-400;
|
|
464
480
|
$kp-color-input-placeholder-disabled: $kp-color-gray-300;
|
|
481
|
+
$kp-color-checkbox-border-rest: $kp-color-gray-300;
|
|
482
|
+
$kp-color-checkbox-border-hover: $kp-color-gray-400;
|
|
465
483
|
$kp-color-select-chevron-rest: $kp-color-gray-500;
|
|
466
484
|
$kp-color-select-chevron-hover: $kp-color-gray-700;
|
|
467
485
|
$kp-color-select-chevron-open: $kp-color-blue-600;
|
|
@@ -884,6 +902,7 @@ $kp-color-empty-state-fg-title: $kp-color-gray-900;
|
|
|
884
902
|
$kp-color-empty-state-fg-description: $kp-color-gray-600;
|
|
885
903
|
$kp-color-card-bg: $kp-color-white;
|
|
886
904
|
$kp-color-card-bg-muted: $kp-color-gray-50; // Alternative muted background
|
|
905
|
+
$kp-color-card-bg-elevated: $kp-color-white; // Same as bg in light. Dark override (#1F1F22) lifts the elevated card one step above default so the elevation reads against the dark page bg.
|
|
887
906
|
$kp-color-card-border: $kp-color-gray-200;
|
|
888
907
|
$kp-color-card-fg-title: $kp-color-gray-900;
|
|
889
908
|
$kp-color-card-fg-desc: $kp-color-gray-600;
|
package/styles/dark.css
CHANGED
|
@@ -83,28 +83,6 @@
|
|
|
83
83
|
--kp-color-cyan-800: #155e75;
|
|
84
84
|
--kp-color-cyan-900: #cffafe;
|
|
85
85
|
--kp-color-cyan-950: #ecfeff;
|
|
86
|
-
--kp-color-orange-50: #431407;
|
|
87
|
-
--kp-color-orange-100: #7c2d12;
|
|
88
|
-
--kp-color-orange-200: #9a3412;
|
|
89
|
-
--kp-color-orange-300: #c2410c;
|
|
90
|
-
--kp-color-orange-400: #ea580c;
|
|
91
|
-
--kp-color-orange-500: #f97316;
|
|
92
|
-
--kp-color-orange-600: #ea580c;
|
|
93
|
-
--kp-color-orange-700: #c2410c;
|
|
94
|
-
--kp-color-orange-800: #9a3412;
|
|
95
|
-
--kp-color-orange-900: #ffedd5;
|
|
96
|
-
--kp-color-orange-950: #fff7ed;
|
|
97
|
-
--kp-color-violet-50: #2e1065;
|
|
98
|
-
--kp-color-violet-100: #4c1d95;
|
|
99
|
-
--kp-color-violet-200: #5b21b6;
|
|
100
|
-
--kp-color-violet-300: #6d28d9;
|
|
101
|
-
--kp-color-violet-400: #7c3aed;
|
|
102
|
-
--kp-color-violet-500: #8b5cf6;
|
|
103
|
-
--kp-color-violet-600: #7c3aed;
|
|
104
|
-
--kp-color-violet-700: #6d28d9;
|
|
105
|
-
--kp-color-violet-800: #5b21b6;
|
|
106
|
-
--kp-color-violet-900: #ede9fe;
|
|
107
|
-
--kp-color-violet-950: #f5f3ff;
|
|
108
86
|
--kp-color-badge-primary-subtle-bg: #1e3a8a;
|
|
109
87
|
--kp-color-badge-primary-subtle-fg: #93c5fd;
|
|
110
88
|
--kp-color-badge-danger-subtle-bg: #7f1d1d;
|
|
@@ -118,58 +96,250 @@
|
|
|
118
96
|
--kp-color-badge-neutral-subtle-bg: #27272a;
|
|
119
97
|
--kp-color-badge-neutral-subtle-fg: #d4d4d8;
|
|
120
98
|
--kp-color-alert-primary-subtle-bg: #1e3a8a;
|
|
121
|
-
--kp-color-alert-primary-subtle-fg-title: #
|
|
122
|
-
--kp-color-alert-primary-subtle-fg-desc: #
|
|
99
|
+
--kp-color-alert-primary-subtle-fg-title: #fafafa;
|
|
100
|
+
--kp-color-alert-primary-subtle-fg-desc: #dbeafe;
|
|
101
|
+
--kp-color-alert-primary-subtle-border: rgba(0, 0, 0, 0);
|
|
102
|
+
--kp-color-alert-primary-solid-fg-desc: #dbeafe;
|
|
103
|
+
--kp-color-alert-primary-outline-bg: #09090b;
|
|
104
|
+
--kp-color-alert-primary-outline-fg-title: #bfdbfe;
|
|
105
|
+
--kp-color-alert-primary-outline-fg-desc: #a1a1aa;
|
|
106
|
+
--kp-color-alert-primary-left-accent-bg: #09090b;
|
|
107
|
+
--kp-color-alert-primary-left-accent-fg-title: #bfdbfe;
|
|
108
|
+
--kp-color-alert-primary-left-accent-fg-desc: #a1a1aa;
|
|
109
|
+
--kp-color-alert-primary-left-accent-border: #27272a;
|
|
110
|
+
--kp-color-alert-primary-left-accent-accent: #3a4f88;
|
|
123
111
|
--kp-color-alert-danger-subtle-bg: #7f1d1d;
|
|
112
|
+
--kp-color-alert-danger-subtle-fg-title: #fafafa;
|
|
113
|
+
--kp-color-alert-danger-subtle-fg-desc: #fee2e2;
|
|
114
|
+
--kp-color-alert-danger-subtle-border: rgba(0, 0, 0, 0);
|
|
115
|
+
--kp-color-alert-danger-solid-fg-desc: #fee2e2;
|
|
116
|
+
--kp-color-alert-danger-outline-bg: #09090b;
|
|
117
|
+
--kp-color-alert-danger-outline-fg-title: #fecaca;
|
|
118
|
+
--kp-color-alert-danger-outline-fg-desc: #a1a1aa;
|
|
119
|
+
--kp-color-alert-danger-left-accent-bg: #09090b;
|
|
120
|
+
--kp-color-alert-danger-left-accent-fg-title: #fecaca;
|
|
121
|
+
--kp-color-alert-danger-left-accent-fg-desc: #a1a1aa;
|
|
122
|
+
--kp-color-alert-danger-left-accent-border: #27272a;
|
|
123
|
+
--kp-color-alert-danger-left-accent-accent: #7a2a2d;
|
|
124
124
|
--kp-color-alert-success-subtle-bg: #14532d;
|
|
125
|
+
--kp-color-alert-success-subtle-fg-title: #fafafa;
|
|
126
|
+
--kp-color-alert-success-subtle-fg-desc: #dcfce7;
|
|
127
|
+
--kp-color-alert-success-subtle-border: rgba(0, 0, 0, 0);
|
|
128
|
+
--kp-color-alert-success-solid-fg-desc: #dcfce7;
|
|
129
|
+
--kp-color-alert-success-outline-bg: #09090b;
|
|
130
|
+
--kp-color-alert-success-outline-fg-title: #bbf7d0;
|
|
131
|
+
--kp-color-alert-success-outline-fg-desc: #a1a1aa;
|
|
132
|
+
--kp-color-alert-success-left-accent-bg: #09090b;
|
|
133
|
+
--kp-color-alert-success-left-accent-fg-title: #bbf7d0;
|
|
134
|
+
--kp-color-alert-success-left-accent-fg-desc: #a1a1aa;
|
|
135
|
+
--kp-color-alert-success-left-accent-border: #27272a;
|
|
136
|
+
--kp-color-alert-success-left-accent-accent: #1f6336;
|
|
125
137
|
--kp-color-alert-warning-subtle-bg: #78350f;
|
|
138
|
+
--kp-color-alert-warning-subtle-fg-title: #fafafa;
|
|
139
|
+
--kp-color-alert-warning-subtle-fg-desc: #fef3c7;
|
|
140
|
+
--kp-color-alert-warning-subtle-border: rgba(0, 0, 0, 0);
|
|
141
|
+
--kp-color-alert-warning-outline-bg: #09090b;
|
|
142
|
+
--kp-color-alert-warning-outline-fg-title: #fde68a;
|
|
143
|
+
--kp-color-alert-warning-outline-fg-desc: #a1a1aa;
|
|
144
|
+
--kp-color-alert-warning-left-accent-bg: #09090b;
|
|
145
|
+
--kp-color-alert-warning-left-accent-fg-title: #fde68a;
|
|
146
|
+
--kp-color-alert-warning-left-accent-fg-desc: #a1a1aa;
|
|
147
|
+
--kp-color-alert-warning-left-accent-border: #27272a;
|
|
148
|
+
--kp-color-alert-warning-left-accent-accent: #8a4a0e;
|
|
126
149
|
--kp-color-alert-info-subtle-bg: #164e63;
|
|
150
|
+
--kp-color-alert-info-subtle-fg-title: #fafafa;
|
|
151
|
+
--kp-color-alert-info-subtle-fg-desc: #cffafe;
|
|
152
|
+
--kp-color-alert-info-subtle-border: rgba(0, 0, 0, 0);
|
|
153
|
+
--kp-color-alert-info-solid-fg-desc: #cffafe;
|
|
154
|
+
--kp-color-alert-info-outline-bg: #09090b;
|
|
155
|
+
--kp-color-alert-info-outline-fg-title: #a5f3fc;
|
|
156
|
+
--kp-color-alert-info-outline-fg-desc: #a1a1aa;
|
|
157
|
+
--kp-color-alert-info-left-accent-bg: #09090b;
|
|
158
|
+
--kp-color-alert-info-left-accent-fg-title: #a5f3fc;
|
|
159
|
+
--kp-color-alert-info-left-accent-fg-desc: #a1a1aa;
|
|
160
|
+
--kp-color-alert-info-left-accent-border: #27272a;
|
|
161
|
+
--kp-color-alert-info-left-accent-accent: #155e75;
|
|
127
162
|
--kp-color-alert-neutral-subtle-bg: #27272a;
|
|
128
|
-
--kp-color-
|
|
163
|
+
--kp-color-alert-neutral-subtle-fg-title: #fafafa;
|
|
164
|
+
--kp-color-alert-neutral-subtle-fg-desc: #a1a1aa;
|
|
165
|
+
--kp-color-alert-neutral-subtle-border: rgba(0, 0, 0, 0);
|
|
166
|
+
--kp-color-alert-neutral-solid-bg: #27272a;
|
|
167
|
+
--kp-color-alert-neutral-solid-fg-title: #fafafa;
|
|
168
|
+
--kp-color-alert-neutral-solid-fg-desc: #a1a1aa;
|
|
169
|
+
--kp-color-alert-neutral-solid-border: #27272a;
|
|
170
|
+
--kp-color-alert-neutral-outline-bg: #09090b;
|
|
171
|
+
--kp-color-alert-neutral-outline-fg-title: #fafafa;
|
|
172
|
+
--kp-color-alert-neutral-outline-fg-desc: #a1a1aa;
|
|
173
|
+
--kp-color-alert-neutral-outline-border: #27272a;
|
|
174
|
+
--kp-color-alert-neutral-left-accent-bg: #09090b;
|
|
175
|
+
--kp-color-alert-neutral-left-accent-fg-title: #fafafa;
|
|
176
|
+
--kp-color-alert-neutral-left-accent-fg-desc: #a1a1aa;
|
|
177
|
+
--kp-color-alert-neutral-left-accent-border: #27272a;
|
|
178
|
+
--kp-color-alert-neutral-left-accent-accent: #3f3f46;
|
|
179
|
+
--kp-color-primary-default-bg-disabled: #18181b;
|
|
180
|
+
--kp-color-primary-default-bg-loading: #3b82f6;
|
|
181
|
+
--kp-color-primary-default-fg-disabled: #52525b;
|
|
182
|
+
--kp-color-primary-default-fg-loading: #ffffff;
|
|
183
|
+
--kp-color-primary-default-border-disabled: #18181b;
|
|
184
|
+
--kp-color-primary-default-border-loading: #3b82f6;
|
|
185
|
+
--kp-color-primary-subtle-bg-rest: #1e2a4f;
|
|
186
|
+
--kp-color-primary-subtle-bg-hover: #27395e;
|
|
187
|
+
--kp-color-primary-subtle-bg-active: #324871;
|
|
188
|
+
--kp-color-primary-subtle-bg-focus: #1e2a4f;
|
|
189
|
+
--kp-color-primary-subtle-bg-loading: #1e2a4f;
|
|
190
|
+
--kp-color-primary-subtle-bg-disabled: #18181b;
|
|
129
191
|
--kp-color-primary-subtle-fg-rest: #93c5fd;
|
|
130
192
|
--kp-color-primary-subtle-fg-hover: #bfdbfe;
|
|
131
193
|
--kp-color-primary-subtle-fg-active: #dbeafe;
|
|
132
194
|
--kp-color-primary-subtle-fg-focus: #93c5fd;
|
|
133
195
|
--kp-color-primary-subtle-fg-loading: #93c5fd;
|
|
134
196
|
--kp-color-primary-subtle-fg-disabled: #52525b;
|
|
135
|
-
--kp-color-
|
|
197
|
+
--kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
198
|
+
--kp-color-primary-outline-bg-hover: #1e2a4f;
|
|
199
|
+
--kp-color-primary-outline-bg-active: #27395e;
|
|
200
|
+
--kp-color-primary-outline-fg-active: #bfdbfe;
|
|
201
|
+
--kp-color-primary-outline-fg-disabled: #3f3f46;
|
|
202
|
+
--kp-color-primary-outline-border-rest: #3a4f88;
|
|
203
|
+
--kp-color-primary-outline-border-hover: #4a60a0;
|
|
204
|
+
--kp-color-primary-outline-border-active: #5c72b8;
|
|
205
|
+
--kp-color-primary-outline-border-focus: #3a4f88;
|
|
206
|
+
--kp-color-primary-outline-border-disabled: #27272a;
|
|
207
|
+
--kp-color-primary-outline-border-loading: #3a4f88;
|
|
208
|
+
--kp-color-primary-ghost-bg-hover: #1e2a4f;
|
|
209
|
+
--kp-color-primary-ghost-bg-active: #27395e;
|
|
210
|
+
--kp-color-primary-ghost-fg-active: #bfdbfe;
|
|
211
|
+
--kp-color-primary-ghost-fg-disabled: #3f3f46;
|
|
212
|
+
--kp-color-danger-default-bg-disabled: #18181b;
|
|
213
|
+
--kp-color-danger-default-bg-loading: #ef4444;
|
|
214
|
+
--kp-color-danger-default-fg-disabled: #52525b;
|
|
215
|
+
--kp-color-danger-default-fg-loading: #ffffff;
|
|
216
|
+
--kp-color-danger-default-border-disabled: #18181b;
|
|
217
|
+
--kp-color-danger-default-border-loading: #ef4444;
|
|
218
|
+
--kp-color-danger-subtle-bg-rest: #3a1518;
|
|
219
|
+
--kp-color-danger-subtle-bg-hover: #4d1b1f;
|
|
220
|
+
--kp-color-danger-subtle-bg-active: #5e2125;
|
|
221
|
+
--kp-color-danger-subtle-bg-focus: #3a1518;
|
|
222
|
+
--kp-color-danger-subtle-bg-loading: #3a1518;
|
|
223
|
+
--kp-color-danger-subtle-bg-disabled: #18181b;
|
|
136
224
|
--kp-color-danger-subtle-fg-rest: #fca5a5;
|
|
137
225
|
--kp-color-danger-subtle-fg-hover: #fecaca;
|
|
138
226
|
--kp-color-danger-subtle-fg-active: #fee2e2;
|
|
139
227
|
--kp-color-danger-subtle-fg-focus: #fca5a5;
|
|
140
228
|
--kp-color-danger-subtle-fg-loading: #fca5a5;
|
|
141
229
|
--kp-color-danger-subtle-fg-disabled: #52525b;
|
|
142
|
-
--kp-color-
|
|
143
|
-
--kp-color-
|
|
144
|
-
--kp-color-
|
|
145
|
-
--kp-color-
|
|
146
|
-
--kp-color-
|
|
147
|
-
--kp-color-
|
|
230
|
+
--kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
231
|
+
--kp-color-danger-outline-bg-hover: #3a1518;
|
|
232
|
+
--kp-color-danger-outline-bg-active: #4d1b1f;
|
|
233
|
+
--kp-color-danger-outline-fg-active: #fecaca;
|
|
234
|
+
--kp-color-danger-outline-fg-disabled: #3f3f46;
|
|
235
|
+
--kp-color-danger-outline-border-rest: #7a2a2d;
|
|
236
|
+
--kp-color-danger-outline-border-hover: #933338;
|
|
237
|
+
--kp-color-danger-outline-border-active: #ac3d44;
|
|
238
|
+
--kp-color-danger-outline-border-focus: #7a2a2d;
|
|
239
|
+
--kp-color-danger-outline-border-disabled: #27272a;
|
|
240
|
+
--kp-color-danger-outline-border-loading: #7a2a2d;
|
|
241
|
+
--kp-color-danger-ghost-bg-hover: #3a1518;
|
|
242
|
+
--kp-color-danger-ghost-bg-active: #4d1b1f;
|
|
243
|
+
--kp-color-danger-ghost-fg-active: #fecaca;
|
|
244
|
+
--kp-color-danger-ghost-fg-disabled: #3f3f46;
|
|
245
|
+
--kp-color-neutral-default-bg-rest: #3f3f46;
|
|
246
|
+
--kp-color-neutral-default-bg-hover: #52525b;
|
|
247
|
+
--kp-color-neutral-default-bg-active: #71717a;
|
|
248
|
+
--kp-color-neutral-default-bg-focus: #3f3f46;
|
|
249
|
+
--kp-color-neutral-default-bg-loading: #52525b;
|
|
250
|
+
--kp-color-neutral-default-bg-disabled: #18181b;
|
|
251
|
+
--kp-color-neutral-default-fg-rest: #fafafa;
|
|
252
|
+
--kp-color-neutral-default-fg-hover: #fafafa;
|
|
253
|
+
--kp-color-neutral-default-fg-active: #fafafa;
|
|
254
|
+
--kp-color-neutral-default-fg-focus: #fafafa;
|
|
255
|
+
--kp-color-neutral-default-fg-loading: #fafafa;
|
|
256
|
+
--kp-color-neutral-default-fg-disabled: #52525b;
|
|
257
|
+
--kp-color-neutral-default-border-rest: #3f3f46;
|
|
258
|
+
--kp-color-neutral-default-border-hover: #52525b;
|
|
259
|
+
--kp-color-neutral-default-border-active: #71717a;
|
|
260
|
+
--kp-color-neutral-default-border-focus: #3f3f46;
|
|
261
|
+
--kp-color-neutral-default-border-loading: #52525b;
|
|
262
|
+
--kp-color-neutral-default-border-disabled: #18181b;
|
|
263
|
+
--kp-color-neutral-subtle-bg-rest: #27272a;
|
|
264
|
+
--kp-color-neutral-subtle-bg-hover: #3f3f46;
|
|
265
|
+
--kp-color-neutral-subtle-bg-active: #52525b;
|
|
266
|
+
--kp-color-neutral-subtle-bg-focus: #27272a;
|
|
267
|
+
--kp-color-neutral-subtle-bg-loading: #27272a;
|
|
268
|
+
--kp-color-neutral-subtle-bg-disabled: #18181b;
|
|
148
269
|
--kp-color-neutral-subtle-fg-rest: #d4d4d8;
|
|
149
270
|
--kp-color-neutral-subtle-fg-hover: #e4e4e7;
|
|
150
271
|
--kp-color-neutral-subtle-fg-active: #f4f4f5;
|
|
151
272
|
--kp-color-neutral-subtle-fg-focus: #d4d4d8;
|
|
152
273
|
--kp-color-neutral-subtle-fg-loading: #d4d4d8;
|
|
153
274
|
--kp-color-neutral-subtle-fg-disabled: #52525b;
|
|
275
|
+
--kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
276
|
+
--kp-color-neutral-outline-bg-hover: #27272a;
|
|
277
|
+
--kp-color-neutral-outline-bg-active: #3f3f46;
|
|
278
|
+
--kp-color-neutral-outline-fg-rest: #e4e4e7;
|
|
279
|
+
--kp-color-neutral-outline-fg-hover: #fafafa;
|
|
280
|
+
--kp-color-neutral-outline-fg-disabled: #3f3f46;
|
|
281
|
+
--kp-color-neutral-outline-border-rest: #3f3f46;
|
|
282
|
+
--kp-color-neutral-outline-border-hover: #52525b;
|
|
283
|
+
--kp-color-neutral-outline-border-active: #71717a;
|
|
284
|
+
--kp-color-neutral-outline-border-focus: #3f3f46;
|
|
285
|
+
--kp-color-neutral-outline-border-disabled: #27272a;
|
|
286
|
+
--kp-color-neutral-outline-border-loading: #3f3f46;
|
|
287
|
+
--kp-color-neutral-ghost-bg-hover: #27272a;
|
|
288
|
+
--kp-color-neutral-ghost-bg-active: #3f3f46;
|
|
289
|
+
--kp-color-neutral-ghost-fg-rest: #e4e4e7;
|
|
290
|
+
--kp-color-neutral-ghost-fg-hover: #fafafa;
|
|
291
|
+
--kp-color-neutral-ghost-fg-disabled: #3f3f46;
|
|
154
292
|
--kp-color-card-fg-desc: #a1a1aa;
|
|
155
|
-
--kp-color-
|
|
293
|
+
--kp-color-card-border: #3f3f46;
|
|
294
|
+
--kp-color-card-bg-elevated: #1f1f22;
|
|
295
|
+
--kp-color-avatar-bg-default: #27272a;
|
|
296
|
+
--kp-color-avatar-bg-primary: #1e2a4f;
|
|
297
|
+
--kp-color-avatar-bg-success: #14392a;
|
|
298
|
+
--kp-color-avatar-bg-warning: #4a2e0a;
|
|
299
|
+
--kp-color-avatar-bg-danger: #3a1518;
|
|
300
|
+
--kp-color-avatar-bg-info: #13384b;
|
|
301
|
+
--kp-color-avatar-bg-neutral: #3f3f46;
|
|
302
|
+
--kp-color-avatar-fg-default: #d4d4d8;
|
|
303
|
+
--kp-color-avatar-fg-primary: #93c5fd;
|
|
304
|
+
--kp-color-avatar-fg-success: #86efac;
|
|
305
|
+
--kp-color-avatar-fg-warning: #fcd34d;
|
|
306
|
+
--kp-color-avatar-fg-danger: #fca5a5;
|
|
307
|
+
--kp-color-avatar-fg-info: #67e8f9;
|
|
308
|
+
--kp-color-avatar-fg-neutral: #fafafa;
|
|
309
|
+
--kp-color-avatar-ring: #09090b;
|
|
310
|
+
--kp-color-avatar-group-count-bg: #27272a;
|
|
311
|
+
--kp-color-avatar-group-count-fg: #fafafa;
|
|
312
|
+
--kp-color-checkbox-border-hover: #71717a;
|
|
313
|
+
--kp-color-menu-item-fg-selected: #dbeafe;
|
|
314
|
+
--kp-color-segmented-track-bg: #27272a;
|
|
315
|
+
--kp-color-segmented-segment-bg-selected: #3f3f46;
|
|
316
|
+
--kp-color-input-bg-default: #0e0f13;
|
|
317
|
+
--kp-color-input-bg-filled: #18181b;
|
|
318
|
+
--kp-color-input-bg-disabled: #09090b;
|
|
319
|
+
--kp-color-input-border-rest: #3f3f46;
|
|
320
|
+
--kp-color-input-border-hover: #52525b;
|
|
321
|
+
--kp-color-input-border-disabled: #27272a;
|
|
322
|
+
--kp-color-input-fg-default: #e4e4e7;
|
|
323
|
+
--kp-color-input-fg-disabled: #3f3f46;
|
|
324
|
+
--kp-color-input-placeholder-default: #52525b;
|
|
156
325
|
--kp-color-popover-fg-desc: #a1a1aa;
|
|
326
|
+
--kp-color-popover-bg: #1f1f22;
|
|
327
|
+
--kp-color-popover-border: #3f3f46;
|
|
157
328
|
--kp-color-tabs-tab-fg-rest: #a1a1aa;
|
|
329
|
+
--kp-color-nav-item-fg-active: #dbeafe;
|
|
158
330
|
--kp-color-nav-item-fg-disabled: #71717a;
|
|
331
|
+
--kp-color-nav-item-icon-active: #bfdbfe;
|
|
159
332
|
--kp-color-breadcrumbs-item-fg-link-rest: #93c5fd;
|
|
160
333
|
--kp-color-table-header-fg: #a1a1aa;
|
|
161
334
|
--kp-color-table-row-fg: #f4f4f5;
|
|
162
|
-
--kp-color-form-helper: #a1a1aa;
|
|
163
|
-
--kp-color-form-label: #d4d4d8;
|
|
164
|
-
--kp-color-stat-card-trend-value-good: #4ade80;
|
|
165
|
-
--kp-color-stat-card-trend-value-bad: #f87171;
|
|
166
|
-
--kp-color-stat-card-trend-value-neutral: #a1a1aa;
|
|
167
|
-
--kp-color-textarea-counter: #71717a;
|
|
168
335
|
--kp-color-divider-label: #a1a1aa;
|
|
169
336
|
--kp-color-datepicker-day-fg-rest: #f4f4f5;
|
|
170
337
|
--kp-color-datepicker-day-fg-outside: #71717a;
|
|
171
338
|
--kp-color-sidebar-section-label: #a1a1aa;
|
|
172
|
-
--kp-color-
|
|
339
|
+
--kp-color-text-muted: #a1a1aa;
|
|
340
|
+
--kp-color-text-disabled: #71717a;
|
|
341
|
+
--kp-color-surface-muted: #27272a;
|
|
342
|
+
--kp-color-surface-strong: #3f3f46;
|
|
173
343
|
--kp-color-accent-primary-fg: #60a5fa;
|
|
174
344
|
--kp-color-accent-danger-fg: #f87171;
|
|
175
345
|
--kp-color-accent-success-fg: #4ade80;
|
package/styles/tokens.css
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
:root
|
|
5
|
+
:root,
|
|
6
|
+
:root[data-theme="light"],
|
|
7
|
+
[data-theme="light"] {
|
|
6
8
|
--kp-color-white: #ffffff;
|
|
7
9
|
--kp-color-black: #09090b;
|
|
8
10
|
--kp-color-foreground-on-saturated: #ffffff; /** Text/icon color on saturated brand backgrounds — solid buttons, filled badges, alert solid title, selected pagination items, stepper indicators. Stays #FFFFFF in BOTH modes (no dark.json override) — semantic primitive that decouples 'fg on saturated' from `color.white` (which is the elevation surface and inverts to #18181B in dark). */
|
|
@@ -72,179 +74,6 @@
|
|
|
72
74
|
--kp-color-cyan-800: #155e75;
|
|
73
75
|
--kp-color-cyan-900: #164e63;
|
|
74
76
|
--kp-color-cyan-950: #083344;
|
|
75
|
-
--kp-color-primary-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
76
|
-
--kp-color-primary-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
77
|
-
--kp-color-primary-subtle-border-active: rgba(0, 0, 0, 0);
|
|
78
|
-
--kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
79
|
-
--kp-color-primary-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
80
|
-
--kp-color-primary-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
81
|
-
--kp-color-primary-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
82
|
-
--kp-color-primary-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
83
|
-
--kp-color-primary-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
84
|
-
--kp-color-primary-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
85
|
-
--kp-color-primary-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
86
|
-
--kp-color-primary-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
87
|
-
--kp-color-primary-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
88
|
-
--kp-color-primary-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
89
|
-
--kp-color-primary-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
90
|
-
--kp-color-primary-ghost-border-active: rgba(0, 0, 0, 0);
|
|
91
|
-
--kp-color-primary-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
92
|
-
--kp-color-primary-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
93
|
-
--kp-color-danger-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
94
|
-
--kp-color-danger-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
95
|
-
--kp-color-danger-subtle-border-active: rgba(0, 0, 0, 0);
|
|
96
|
-
--kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
97
|
-
--kp-color-danger-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
98
|
-
--kp-color-danger-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
99
|
-
--kp-color-danger-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
100
|
-
--kp-color-danger-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
101
|
-
--kp-color-danger-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
102
|
-
--kp-color-danger-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
103
|
-
--kp-color-danger-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
104
|
-
--kp-color-danger-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
105
|
-
--kp-color-danger-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
106
|
-
--kp-color-danger-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
107
|
-
--kp-color-danger-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
108
|
-
--kp-color-danger-ghost-border-active: rgba(0, 0, 0, 0);
|
|
109
|
-
--kp-color-danger-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
110
|
-
--kp-color-danger-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
111
|
-
--kp-color-neutral-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
112
|
-
--kp-color-neutral-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
113
|
-
--kp-color-neutral-subtle-border-active: rgba(0, 0, 0, 0);
|
|
114
|
-
--kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
115
|
-
--kp-color-neutral-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
116
|
-
--kp-color-neutral-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
117
|
-
--kp-color-neutral-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
118
|
-
--kp-color-neutral-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
119
|
-
--kp-color-neutral-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
120
|
-
--kp-color-neutral-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
121
|
-
--kp-color-neutral-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
122
|
-
--kp-color-neutral-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
123
|
-
--kp-color-neutral-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
124
|
-
--kp-color-neutral-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
125
|
-
--kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
126
|
-
--kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
|
|
127
|
-
--kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
128
|
-
--kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
129
|
-
--kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
|
|
130
|
-
--kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
|
|
131
|
-
--kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
|
|
132
|
-
--kp-color-badge-primary-outline-bg: rgba(0, 0, 0, 0);
|
|
133
|
-
--kp-color-badge-primary-dot-bg: rgba(0, 0, 0, 0);
|
|
134
|
-
--kp-color-badge-primary-dot-border: rgba(0, 0, 0, 0);
|
|
135
|
-
--kp-color-badge-danger-subtle-border: rgba(0, 0, 0, 0);
|
|
136
|
-
--kp-color-badge-danger-outline-bg: rgba(0, 0, 0, 0);
|
|
137
|
-
--kp-color-badge-danger-dot-bg: rgba(0, 0, 0, 0);
|
|
138
|
-
--kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
|
|
139
|
-
--kp-color-badge-success-subtle-border: rgba(0, 0, 0, 0);
|
|
140
|
-
--kp-color-badge-success-outline-bg: rgba(0, 0, 0, 0);
|
|
141
|
-
--kp-color-badge-success-dot-bg: rgba(0, 0, 0, 0);
|
|
142
|
-
--kp-color-badge-success-dot-border: rgba(0, 0, 0, 0);
|
|
143
|
-
--kp-color-badge-warning-subtle-border: rgba(0, 0, 0, 0);
|
|
144
|
-
--kp-color-badge-warning-outline-bg: rgba(0, 0, 0, 0);
|
|
145
|
-
--kp-color-badge-warning-dot-bg: rgba(0, 0, 0, 0);
|
|
146
|
-
--kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
|
|
147
|
-
--kp-color-badge-info-subtle-border: rgba(0, 0, 0, 0);
|
|
148
|
-
--kp-color-badge-info-outline-bg: rgba(0, 0, 0, 0);
|
|
149
|
-
--kp-color-badge-info-dot-bg: rgba(0, 0, 0, 0);
|
|
150
|
-
--kp-color-badge-info-dot-border: rgba(0, 0, 0, 0);
|
|
151
|
-
--kp-color-badge-neutral-subtle-border: rgba(0, 0, 0, 0);
|
|
152
|
-
--kp-color-badge-neutral-outline-bg: rgba(0, 0, 0, 0);
|
|
153
|
-
--kp-color-badge-neutral-dot-bg: rgba(0, 0, 0, 0);
|
|
154
|
-
--kp-color-badge-neutral-dot-border: rgba(0, 0, 0, 0);
|
|
155
|
-
--kp-color-tabs-tab-underline-rest: rgba(0, 0, 0, 0);
|
|
156
|
-
--kp-color-tabs-tab-underline-disabled: rgba(0, 0, 0, 0);
|
|
157
|
-
--kp-color-nav-item-bg-rest: rgba(0, 0, 0, 0);
|
|
158
|
-
--kp-color-pagination-item-bg-rest: rgba(0, 0, 0, 0);
|
|
159
|
-
--kp-color-pagination-item-bg-disabled: rgba(0, 0, 0, 0);
|
|
160
|
-
--kp-color-datepicker-day-bg-rest: rgba(0, 0, 0, 0);
|
|
161
|
-
--kp-color-datepicker-day-bg-today: rgba(0, 0, 0, 0);
|
|
162
|
-
--kp-color-tree-node-bg-rest: rgba(0, 0, 0, 0);
|
|
163
|
-
--kp-color-accordion-trigger-bg-rest: rgba(0, 0, 0, 0);
|
|
164
|
-
--kp-color-accordion-trigger-bg-expanded: rgba(0, 0, 0, 0);
|
|
165
|
-
--kp-color-dialog-backdrop: rgba(0, 0, 0, 0.5); /** Semi-transparent overlay behind dialog */
|
|
166
|
-
--kp-color-overlay-hover-subtle: rgba(0, 0, 0, 0.04); /** Faintest hover bg — close-button on Alert / Badge / Popover surfaces. */
|
|
167
|
-
--kp-color-overlay-hover-light: rgba(0, 0, 0, 0.06); /** Light hover bg — subtle interactive emphasis on light surfaces. */
|
|
168
|
-
--kp-color-overlay-hover-medium: rgba(0, 0, 0, 0.08); /** Standard hover bg on light surfaces. */
|
|
169
|
-
--kp-color-overlay-primary-hover: rgba(37, 99, 235, 0.08); /** Translucent primary tint — Toast action button hover. */
|
|
170
|
-
--kp-color-overlay-focus-ring: rgba(59, 130, 246, 0.12); /** Soft glow around the focused control (3px ring on SearchBar). */
|
|
171
|
-
--kp-color-fg-on-dark-strong: rgba(255, 255, 255, 0.92); /** Primary text on dark backgrounds — Sidebar item label. */
|
|
172
|
-
--kp-color-fg-on-dark-default: rgba(255, 255, 255, 0.8); /** Default text on dark backgrounds — Header nav item / icon button. */
|
|
173
|
-
--kp-color-fg-on-dark-muted: rgba(255, 255, 255, 0.7); /** Secondary text on dark — Sidebar toggle. */
|
|
174
|
-
--kp-color-fg-on-dark-subtle: rgba(255, 255, 255, 0.6); /** Lowest-emphasis text on dark — Header user role / chevron. */
|
|
175
|
-
--kp-elevation-none: 0px 0px 0px 0px rgba(0,0,0,0);
|
|
176
|
-
--kp-elevation-raised: 0px 1px 2px 0px rgba(9,9,11,0.08), 0px 1px 3px -1px rgba(9,9,11,0.05), 0px 0px 4px -1px rgba(9,9,11,0.03);
|
|
177
|
-
--kp-elevation-overlay: 0px 4px 6px -2px rgba(9,9,11,0.10), 0px 2px 10px -2px rgba(9,9,11,0.06), 0px 0px 16px -4px rgba(9,9,11,0.04);
|
|
178
|
-
--kp-elevation-floating: 0px 8px 16px -4px rgba(9,9,11,0.12), 0px 4px 24px -4px rgba(9,9,11,0.08), 0px 0px 40px -8px rgba(9,9,11,0.05);
|
|
179
|
-
--kp-icon-size-xs: 14px; /** Icon for XS components (24px button) */
|
|
180
|
-
--kp-icon-size-sm: 16px; /** Icon for SM components (28px button) */
|
|
181
|
-
--kp-icon-size-md: 18px; /** Icon for MD components (36px button) */
|
|
182
|
-
--kp-icon-size-lg: 22px; /** Icon for LG components (44px button) */
|
|
183
|
-
--kp-icon-size-xl: 24px; /** Icon for XL components (52px button) */
|
|
184
|
-
--kp-icon-stroke-xs: 1.25px; /** Stroke width for 14px icons — optical compensation */
|
|
185
|
-
--kp-icon-stroke-sm: 1.35px; /** Stroke width for 16px icons */
|
|
186
|
-
--kp-icon-stroke-md: 1.5px; /** Stroke width for 18px icons */
|
|
187
|
-
--kp-icon-stroke-lg: 1.75px; /** Stroke width for 22px icons */
|
|
188
|
-
--kp-icon-stroke-xl: 2px; /** Stroke width for 24px icons — standard Tabler default */
|
|
189
|
-
--kp-motion-duration-fast: 120ms; /** Hover, focus, color/border state changes. */
|
|
190
|
-
--kp-motion-duration-normal: 200ms; /** Overlay enter/exit, accordion expand, larger transitions. */
|
|
191
|
-
--kp-motion-duration-slow: 300ms; /** Page-level changes; rare. */
|
|
192
|
-
--kp-motion-duration-spin: 1000ms; /** Infinite spinner loop — button loading, progress-circular indeterminate. */
|
|
193
|
-
--kp-motion-duration-shimmer: 1400ms; /** Infinite shimmer loop — skeleton placeholder, progress-linear indeterminate slide. */
|
|
194
|
-
--kp-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
195
|
-
--kp-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
196
|
-
--kp-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
197
|
-
--kp-radius-none: 0px;
|
|
198
|
-
--kp-radius-comp-xs: 8px;
|
|
199
|
-
--kp-radius-comp-sm: 10px;
|
|
200
|
-
--kp-radius-comp-md: 12px;
|
|
201
|
-
--kp-radius-comp-lg: 14px;
|
|
202
|
-
--kp-radius-comp-xl: 16px;
|
|
203
|
-
--kp-radius-full: 9999px;
|
|
204
|
-
--kp-size-xs: 24px;
|
|
205
|
-
--kp-size-sm: 28px;
|
|
206
|
-
--kp-size-md: 36px;
|
|
207
|
-
--kp-size-lg: 44px;
|
|
208
|
-
--kp-size-xl: 52px;
|
|
209
|
-
--kp-spacing-4xs: 2px;
|
|
210
|
-
--kp-spacing-3xs: 4px;
|
|
211
|
-
--kp-spacing-2xs: 8px;
|
|
212
|
-
--kp-spacing-xs: 12px;
|
|
213
|
-
--kp-spacing-sm: 16px;
|
|
214
|
-
--kp-spacing-md: 20px;
|
|
215
|
-
--kp-spacing-lg: 24px;
|
|
216
|
-
--kp-spacing-xl: 32px;
|
|
217
|
-
--kp-spacing-2xl: 40px;
|
|
218
|
-
--kp-spacing-3xl: 48px;
|
|
219
|
-
--kp-spacing-4xl: 64px;
|
|
220
|
-
--kp-font-family-sans: Onest, system-ui, sans-serif; /** Primary UI font */
|
|
221
|
-
--kp-font-family-mono: 'SF Mono', Monaco, Consolas, monospace; /** Monospace for code */
|
|
222
|
-
--kp-font-weight-regular: 400; /** Body text */
|
|
223
|
-
--kp-font-weight-medium: 500; /** Emphasis, small text, section labels */
|
|
224
|
-
--kp-font-weight-semibold: 600; /** Headings */
|
|
225
|
-
--kp-font-weight-bold: 700; /** Strong emphasis */
|
|
226
|
-
--kp-font-size-2xs: 11px; /** Micro labels, captions */
|
|
227
|
-
--kp-font-size-xs: 12px; /** Small body, hints */
|
|
228
|
-
--kp-font-size-sm: 14px; /** Default body text, UI */
|
|
229
|
-
--kp-font-size-md: 16px; /** Comfortable body, large UI */
|
|
230
|
-
--kp-font-size-lg: 20px; /** Section labels, small headings */
|
|
231
|
-
--kp-font-size-xl: 24px; /** Headings */
|
|
232
|
-
--kp-font-size-2xl: 32px; /** Large headings, hero text */
|
|
233
|
-
--kp-font-line-height-2xs: 16px; /** Pairs with size 2xs (11px) — 4px grid */
|
|
234
|
-
--kp-font-line-height-xs: 16px; /** Pairs with size xs (12px) */
|
|
235
|
-
--kp-font-line-height-sm: 20px; /** Pairs with size sm (14px) */
|
|
236
|
-
--kp-font-line-height-md: 24px; /** Pairs with size md (16px) */
|
|
237
|
-
--kp-font-line-height-lg: 28px; /** Pairs with size lg (20px) */
|
|
238
|
-
--kp-font-line-height-xl: 32px; /** Pairs with size xl (24px) */
|
|
239
|
-
--kp-font-line-height-2xl: 40px; /** Pairs with size 2xl (32px) */
|
|
240
|
-
--kp-layout-container-max-width-narrow: 640px;
|
|
241
|
-
--kp-layout-container-max-width-medium: 960px;
|
|
242
|
-
--kp-layout-container-max-width-wide: 1280px;
|
|
243
|
-
--kp-layout-container-max-width-full: 100%;
|
|
244
|
-
--kp-layout-container-padding-none: 0;
|
|
245
|
-
--kp-layout-container-padding-sm: 16px;
|
|
246
|
-
--kp-layout-container-padding-md: 24px;
|
|
247
|
-
--kp-layout-container-padding-lg: 32px;
|
|
248
77
|
--kp-color-accent-primary-fg: var(--kp-color-blue-600);
|
|
249
78
|
--kp-color-accent-danger-fg: var(--kp-color-red-600);
|
|
250
79
|
--kp-color-accent-success-fg: var(--kp-color-green-600);
|
|
@@ -280,9 +109,18 @@
|
|
|
280
109
|
--kp-color-primary-subtle-fg-focus: var(--kp-color-blue-700);
|
|
281
110
|
--kp-color-primary-subtle-fg-disabled: var(--kp-color-gray-400);
|
|
282
111
|
--kp-color-primary-subtle-fg-loading: var(--kp-color-blue-500);
|
|
112
|
+
--kp-color-primary-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
113
|
+
--kp-color-primary-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
114
|
+
--kp-color-primary-subtle-border-active: rgba(0, 0, 0, 0);
|
|
283
115
|
--kp-color-primary-subtle-border-focus: var(--kp-color-blue-600);
|
|
116
|
+
--kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
117
|
+
--kp-color-primary-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
118
|
+
--kp-color-primary-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
284
119
|
--kp-color-primary-outline-bg-hover: var(--kp-color-blue-50);
|
|
285
120
|
--kp-color-primary-outline-bg-active: var(--kp-color-blue-100);
|
|
121
|
+
--kp-color-primary-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
122
|
+
--kp-color-primary-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
123
|
+
--kp-color-primary-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
286
124
|
--kp-color-primary-outline-fg-rest: var(--kp-color-blue-600);
|
|
287
125
|
--kp-color-primary-outline-fg-hover: var(--kp-color-blue-700);
|
|
288
126
|
--kp-color-primary-outline-fg-active: var(--kp-color-blue-800);
|
|
@@ -295,15 +133,24 @@
|
|
|
295
133
|
--kp-color-primary-outline-border-focus: var(--kp-color-blue-600);
|
|
296
134
|
--kp-color-primary-outline-border-disabled: var(--kp-color-gray-200);
|
|
297
135
|
--kp-color-primary-outline-border-loading: var(--kp-color-blue-200);
|
|
136
|
+
--kp-color-primary-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
298
137
|
--kp-color-primary-ghost-bg-hover: var(--kp-color-blue-50);
|
|
299
138
|
--kp-color-primary-ghost-bg-active: var(--kp-color-blue-100);
|
|
139
|
+
--kp-color-primary-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
140
|
+
--kp-color-primary-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
141
|
+
--kp-color-primary-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
300
142
|
--kp-color-primary-ghost-fg-rest: var(--kp-color-blue-600);
|
|
301
143
|
--kp-color-primary-ghost-fg-hover: var(--kp-color-blue-700);
|
|
302
144
|
--kp-color-primary-ghost-fg-active: var(--kp-color-blue-800);
|
|
303
145
|
--kp-color-primary-ghost-fg-focus: var(--kp-color-blue-600);
|
|
304
146
|
--kp-color-primary-ghost-fg-disabled: var(--kp-color-gray-400);
|
|
305
147
|
--kp-color-primary-ghost-fg-loading: var(--kp-color-blue-400);
|
|
148
|
+
--kp-color-primary-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
149
|
+
--kp-color-primary-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
150
|
+
--kp-color-primary-ghost-border-active: rgba(0, 0, 0, 0);
|
|
306
151
|
--kp-color-primary-ghost-border-focus: var(--kp-color-blue-600);
|
|
152
|
+
--kp-color-primary-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
153
|
+
--kp-color-primary-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
307
154
|
--kp-color-danger-default-bg-rest: var(--kp-color-red-600);
|
|
308
155
|
--kp-color-danger-default-bg-hover: var(--kp-color-red-700);
|
|
309
156
|
--kp-color-danger-default-bg-active: var(--kp-color-red-800);
|
|
@@ -334,9 +181,18 @@
|
|
|
334
181
|
--kp-color-danger-subtle-fg-focus: var(--kp-color-red-700);
|
|
335
182
|
--kp-color-danger-subtle-fg-disabled: var(--kp-color-gray-400);
|
|
336
183
|
--kp-color-danger-subtle-fg-loading: var(--kp-color-red-500);
|
|
184
|
+
--kp-color-danger-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
185
|
+
--kp-color-danger-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
186
|
+
--kp-color-danger-subtle-border-active: rgba(0, 0, 0, 0);
|
|
337
187
|
--kp-color-danger-subtle-border-focus: var(--kp-color-red-600);
|
|
188
|
+
--kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
189
|
+
--kp-color-danger-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
190
|
+
--kp-color-danger-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
338
191
|
--kp-color-danger-outline-bg-hover: var(--kp-color-red-50);
|
|
339
192
|
--kp-color-danger-outline-bg-active: var(--kp-color-red-100);
|
|
193
|
+
--kp-color-danger-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
194
|
+
--kp-color-danger-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
195
|
+
--kp-color-danger-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
340
196
|
--kp-color-danger-outline-fg-rest: var(--kp-color-red-600);
|
|
341
197
|
--kp-color-danger-outline-fg-hover: var(--kp-color-red-700);
|
|
342
198
|
--kp-color-danger-outline-fg-active: var(--kp-color-red-800);
|
|
@@ -349,15 +205,24 @@
|
|
|
349
205
|
--kp-color-danger-outline-border-focus: var(--kp-color-red-600);
|
|
350
206
|
--kp-color-danger-outline-border-disabled: var(--kp-color-gray-200);
|
|
351
207
|
--kp-color-danger-outline-border-loading: var(--kp-color-red-200);
|
|
208
|
+
--kp-color-danger-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
352
209
|
--kp-color-danger-ghost-bg-hover: var(--kp-color-red-50);
|
|
353
210
|
--kp-color-danger-ghost-bg-active: var(--kp-color-red-100);
|
|
211
|
+
--kp-color-danger-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
212
|
+
--kp-color-danger-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
213
|
+
--kp-color-danger-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
354
214
|
--kp-color-danger-ghost-fg-rest: var(--kp-color-red-600);
|
|
355
215
|
--kp-color-danger-ghost-fg-hover: var(--kp-color-red-700);
|
|
356
216
|
--kp-color-danger-ghost-fg-active: var(--kp-color-red-800);
|
|
357
217
|
--kp-color-danger-ghost-fg-focus: var(--kp-color-red-600);
|
|
358
218
|
--kp-color-danger-ghost-fg-disabled: var(--kp-color-gray-400);
|
|
359
219
|
--kp-color-danger-ghost-fg-loading: var(--kp-color-red-400);
|
|
220
|
+
--kp-color-danger-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
221
|
+
--kp-color-danger-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
222
|
+
--kp-color-danger-ghost-border-active: rgba(0, 0, 0, 0);
|
|
360
223
|
--kp-color-danger-ghost-border-focus: var(--kp-color-red-600);
|
|
224
|
+
--kp-color-danger-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
225
|
+
--kp-color-danger-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
361
226
|
--kp-color-neutral-default-bg-rest: var(--kp-color-gray-900);
|
|
362
227
|
--kp-color-neutral-default-bg-hover: var(--kp-color-gray-800);
|
|
363
228
|
--kp-color-neutral-default-bg-active: var(--kp-color-gray-700);
|
|
@@ -388,9 +253,18 @@
|
|
|
388
253
|
--kp-color-neutral-subtle-fg-focus: var(--kp-color-gray-700);
|
|
389
254
|
--kp-color-neutral-subtle-fg-disabled: var(--kp-color-gray-400);
|
|
390
255
|
--kp-color-neutral-subtle-fg-loading: var(--kp-color-gray-500);
|
|
256
|
+
--kp-color-neutral-subtle-border-rest: rgba(0, 0, 0, 0);
|
|
257
|
+
--kp-color-neutral-subtle-border-hover: rgba(0, 0, 0, 0);
|
|
258
|
+
--kp-color-neutral-subtle-border-active: rgba(0, 0, 0, 0);
|
|
391
259
|
--kp-color-neutral-subtle-border-focus: var(--kp-color-gray-600);
|
|
260
|
+
--kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
261
|
+
--kp-color-neutral-subtle-border-loading: rgba(0, 0, 0, 0);
|
|
262
|
+
--kp-color-neutral-outline-bg-rest: rgba(0, 0, 0, 0);
|
|
392
263
|
--kp-color-neutral-outline-bg-hover: var(--kp-color-gray-50);
|
|
393
264
|
--kp-color-neutral-outline-bg-active: var(--kp-color-gray-100);
|
|
265
|
+
--kp-color-neutral-outline-bg-focus: rgba(0, 0, 0, 0);
|
|
266
|
+
--kp-color-neutral-outline-bg-disabled: rgba(0, 0, 0, 0);
|
|
267
|
+
--kp-color-neutral-outline-bg-loading: rgba(0, 0, 0, 0);
|
|
394
268
|
--kp-color-neutral-outline-fg-rest: var(--kp-color-gray-700);
|
|
395
269
|
--kp-color-neutral-outline-fg-hover: var(--kp-color-gray-800);
|
|
396
270
|
--kp-color-neutral-outline-fg-active: var(--kp-color-gray-900);
|
|
@@ -403,16 +277,41 @@
|
|
|
403
277
|
--kp-color-neutral-outline-border-focus: var(--kp-color-gray-600);
|
|
404
278
|
--kp-color-neutral-outline-border-disabled: var(--kp-color-gray-200);
|
|
405
279
|
--kp-color-neutral-outline-border-loading: var(--kp-color-gray-200);
|
|
280
|
+
--kp-color-neutral-ghost-bg-rest: rgba(0, 0, 0, 0);
|
|
406
281
|
--kp-color-neutral-ghost-bg-hover: var(--kp-color-gray-100);
|
|
407
282
|
--kp-color-neutral-ghost-bg-active: var(--kp-color-gray-200);
|
|
283
|
+
--kp-color-neutral-ghost-bg-focus: rgba(0, 0, 0, 0);
|
|
284
|
+
--kp-color-neutral-ghost-bg-disabled: rgba(0, 0, 0, 0);
|
|
285
|
+
--kp-color-neutral-ghost-bg-loading: rgba(0, 0, 0, 0);
|
|
408
286
|
--kp-color-neutral-ghost-fg-rest: var(--kp-color-gray-700);
|
|
409
287
|
--kp-color-neutral-ghost-fg-hover: var(--kp-color-gray-800);
|
|
410
288
|
--kp-color-neutral-ghost-fg-active: var(--kp-color-gray-900);
|
|
411
289
|
--kp-color-neutral-ghost-fg-focus: var(--kp-color-gray-700);
|
|
412
290
|
--kp-color-neutral-ghost-fg-disabled: var(--kp-color-gray-400);
|
|
413
291
|
--kp-color-neutral-ghost-fg-loading: var(--kp-color-gray-400);
|
|
292
|
+
--kp-color-neutral-ghost-border-rest: rgba(0, 0, 0, 0);
|
|
293
|
+
--kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
|
|
294
|
+
--kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
|
|
414
295
|
--kp-color-neutral-ghost-border-focus: var(--kp-color-gray-600);
|
|
296
|
+
--kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
|
|
297
|
+
--kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
|
|
415
298
|
--kp-color-focus-ring: var(--kp-color-blue-400); /** Focus ring — 2px offset outline for all focusable elements */
|
|
299
|
+
--kp-color-text-strong: var(--kp-color-gray-900); /** Headings and primary emphasized text */
|
|
300
|
+
--kp-color-text-default: var(--kp-color-gray-700); /** Default body text */
|
|
301
|
+
--kp-color-text-muted: var(--kp-color-gray-500); /** Secondary text — captions, helper, less important labels. Dark override → gray.600 for AA contrast against dark page bg. */
|
|
302
|
+
--kp-color-text-disabled: var(--kp-color-gray-400); /** Disabled labels, placeholders. Dark override → gray.500 to stay visibly less prominent than `muted`. */
|
|
303
|
+
--kp-color-surface-base: var(--kp-color-white); /** Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B */
|
|
304
|
+
--kp-color-surface-subtle: var(--kp-color-gray-50); /** Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B */
|
|
305
|
+
--kp-color-surface-muted: var(--kp-color-gray-100); /** Hover background, alternating rows, muted callouts. Dark override → gray.200 (= #27272A in dark, distinguishable from base) */
|
|
306
|
+
--kp-color-surface-strong: var(--kp-color-gray-200); /** Active row, pressed state, more prominent muted bg. Dark override → gray.300 */
|
|
307
|
+
--kp-color-surface-on-dark-base: #18181b; /** Always-dark elevated surface (e.g. .kp-header--dark, .kp-sidebar--dark). No dark override — value is fixed across themes. */
|
|
308
|
+
--kp-color-surface-on-dark-muted: #27272a; /** Always-dark hover/muted surface */
|
|
309
|
+
--kp-color-surface-on-dark-strong: #3f3f46; /** Always-dark active/pressed surface */
|
|
310
|
+
--kp-color-border-subtle: var(--kp-color-gray-100); /** Faint internal dividers */
|
|
311
|
+
--kp-color-border-default: var(--kp-color-gray-200); /** Standard control and card borders */
|
|
312
|
+
--kp-color-border-strong: var(--kp-color-gray-300); /** Emphasized borders — focused panels, table headers */
|
|
313
|
+
--kp-color-border-on-dark-subtle: #27272a; /** Faint divider on always-dark surfaces */
|
|
314
|
+
--kp-color-border-on-dark-default: #3f3f46; /** Standard border on always-dark surfaces */
|
|
416
315
|
--kp-color-icon-primary: var(--kp-color-gray-700); /** Default icon color on light backgrounds — navigation, lists, labels */
|
|
417
316
|
--kp-color-icon-secondary: var(--kp-color-gray-400); /** Decorative icons, placeholders, hints */
|
|
418
317
|
--kp-color-icon-disabled: var(--kp-color-gray-300); /** Disabled/inactive icons */
|
|
@@ -464,6 +363,8 @@
|
|
|
464
363
|
--kp-color-input-border-error: var(--kp-color-red-500);
|
|
465
364
|
--kp-color-input-placeholder-default: var(--kp-color-gray-400);
|
|
466
365
|
--kp-color-input-placeholder-disabled: var(--kp-color-gray-300);
|
|
366
|
+
--kp-color-checkbox-border-rest: var(--kp-color-gray-300);
|
|
367
|
+
--kp-color-checkbox-border-hover: var(--kp-color-gray-400);
|
|
467
368
|
--kp-color-select-chevron-rest: var(--kp-color-gray-500);
|
|
468
369
|
--kp-color-select-chevron-hover: var(--kp-color-gray-700);
|
|
469
370
|
--kp-color-select-chevron-open: var(--kp-color-blue-600);
|
|
@@ -493,7 +394,9 @@
|
|
|
493
394
|
--kp-color-stepper-connector-completed: var(--kp-color-blue-600);
|
|
494
395
|
--kp-color-segmented-track-bg: var(--kp-color-gray-100); /** Outer container background */
|
|
495
396
|
--kp-color-segmented-segment-bg-selected: var(--kp-color-white);
|
|
397
|
+
--kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
|
|
496
398
|
--kp-color-segmented-segment-bg-unselected-hover: var(--kp-color-gray-200);
|
|
399
|
+
--kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
|
|
497
400
|
--kp-color-segmented-segment-fg-selected: var(--kp-color-gray-900);
|
|
498
401
|
--kp-color-segmented-segment-fg-unselected-rest: var(--kp-color-gray-600);
|
|
499
402
|
--kp-color-segmented-segment-fg-unselected-hover: var(--kp-color-gray-900);
|
|
@@ -504,11 +407,15 @@
|
|
|
504
407
|
--kp-color-badge-primary-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
505
408
|
--kp-color-badge-primary-subtle-bg: var(--kp-color-blue-50);
|
|
506
409
|
--kp-color-badge-primary-subtle-fg: var(--kp-color-blue-700);
|
|
410
|
+
--kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
|
|
507
411
|
--kp-color-badge-primary-subtle-dot: var(--kp-color-blue-600);
|
|
412
|
+
--kp-color-badge-primary-outline-bg: rgba(0, 0, 0, 0);
|
|
508
413
|
--kp-color-badge-primary-outline-fg: var(--kp-color-blue-700);
|
|
509
414
|
--kp-color-badge-primary-outline-border: var(--kp-color-blue-300);
|
|
510
415
|
--kp-color-badge-primary-outline-dot: var(--kp-color-blue-600);
|
|
416
|
+
--kp-color-badge-primary-dot-bg: rgba(0, 0, 0, 0);
|
|
511
417
|
--kp-color-badge-primary-dot-fg: var(--kp-color-gray-700);
|
|
418
|
+
--kp-color-badge-primary-dot-border: rgba(0, 0, 0, 0);
|
|
512
419
|
--kp-color-badge-primary-dot-dot: var(--kp-color-blue-600);
|
|
513
420
|
--kp-color-badge-danger-filled-bg: var(--kp-color-red-600);
|
|
514
421
|
--kp-color-badge-danger-filled-fg: var(--kp-color-foreground-on-saturated);
|
|
@@ -516,11 +423,15 @@
|
|
|
516
423
|
--kp-color-badge-danger-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
517
424
|
--kp-color-badge-danger-subtle-bg: var(--kp-color-red-50);
|
|
518
425
|
--kp-color-badge-danger-subtle-fg: var(--kp-color-red-700);
|
|
426
|
+
--kp-color-badge-danger-subtle-border: rgba(0, 0, 0, 0);
|
|
519
427
|
--kp-color-badge-danger-subtle-dot: var(--kp-color-red-600);
|
|
428
|
+
--kp-color-badge-danger-outline-bg: rgba(0, 0, 0, 0);
|
|
520
429
|
--kp-color-badge-danger-outline-fg: var(--kp-color-red-700);
|
|
521
430
|
--kp-color-badge-danger-outline-border: var(--kp-color-red-300);
|
|
522
431
|
--kp-color-badge-danger-outline-dot: var(--kp-color-red-600);
|
|
432
|
+
--kp-color-badge-danger-dot-bg: rgba(0, 0, 0, 0);
|
|
523
433
|
--kp-color-badge-danger-dot-fg: var(--kp-color-gray-700);
|
|
434
|
+
--kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
|
|
524
435
|
--kp-color-badge-danger-dot-dot: var(--kp-color-red-600);
|
|
525
436
|
--kp-color-badge-success-filled-bg: var(--kp-color-green-600);
|
|
526
437
|
--kp-color-badge-success-filled-fg: var(--kp-color-foreground-on-saturated);
|
|
@@ -528,11 +439,15 @@
|
|
|
528
439
|
--kp-color-badge-success-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
529
440
|
--kp-color-badge-success-subtle-bg: var(--kp-color-green-50);
|
|
530
441
|
--kp-color-badge-success-subtle-fg: var(--kp-color-green-700);
|
|
442
|
+
--kp-color-badge-success-subtle-border: rgba(0, 0, 0, 0);
|
|
531
443
|
--kp-color-badge-success-subtle-dot: var(--kp-color-green-600);
|
|
444
|
+
--kp-color-badge-success-outline-bg: rgba(0, 0, 0, 0);
|
|
532
445
|
--kp-color-badge-success-outline-fg: var(--kp-color-green-700);
|
|
533
446
|
--kp-color-badge-success-outline-border: var(--kp-color-green-300);
|
|
534
447
|
--kp-color-badge-success-outline-dot: var(--kp-color-green-600);
|
|
448
|
+
--kp-color-badge-success-dot-bg: rgba(0, 0, 0, 0);
|
|
535
449
|
--kp-color-badge-success-dot-fg: var(--kp-color-gray-700);
|
|
450
|
+
--kp-color-badge-success-dot-border: rgba(0, 0, 0, 0);
|
|
536
451
|
--kp-color-badge-success-dot-dot: var(--kp-color-green-600);
|
|
537
452
|
--kp-color-badge-warning-filled-bg: var(--kp-color-amber-500);
|
|
538
453
|
--kp-color-badge-warning-filled-fg: var(--kp-color-gray-900);
|
|
@@ -540,11 +455,15 @@
|
|
|
540
455
|
--kp-color-badge-warning-filled-dot: var(--kp-color-gray-900);
|
|
541
456
|
--kp-color-badge-warning-subtle-bg: var(--kp-color-amber-50);
|
|
542
457
|
--kp-color-badge-warning-subtle-fg: var(--kp-color-amber-700);
|
|
458
|
+
--kp-color-badge-warning-subtle-border: rgba(0, 0, 0, 0);
|
|
543
459
|
--kp-color-badge-warning-subtle-dot: var(--kp-color-amber-500);
|
|
460
|
+
--kp-color-badge-warning-outline-bg: rgba(0, 0, 0, 0);
|
|
544
461
|
--kp-color-badge-warning-outline-fg: var(--kp-color-amber-700);
|
|
545
462
|
--kp-color-badge-warning-outline-border: var(--kp-color-amber-400);
|
|
546
463
|
--kp-color-badge-warning-outline-dot: var(--kp-color-amber-500);
|
|
464
|
+
--kp-color-badge-warning-dot-bg: rgba(0, 0, 0, 0);
|
|
547
465
|
--kp-color-badge-warning-dot-fg: var(--kp-color-gray-700);
|
|
466
|
+
--kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
|
|
548
467
|
--kp-color-badge-warning-dot-dot: var(--kp-color-amber-500);
|
|
549
468
|
--kp-color-badge-info-filled-bg: var(--kp-color-cyan-600);
|
|
550
469
|
--kp-color-badge-info-filled-fg: var(--kp-color-foreground-on-saturated);
|
|
@@ -552,11 +471,15 @@
|
|
|
552
471
|
--kp-color-badge-info-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
553
472
|
--kp-color-badge-info-subtle-bg: var(--kp-color-cyan-50);
|
|
554
473
|
--kp-color-badge-info-subtle-fg: var(--kp-color-cyan-700);
|
|
474
|
+
--kp-color-badge-info-subtle-border: rgba(0, 0, 0, 0);
|
|
555
475
|
--kp-color-badge-info-subtle-dot: var(--kp-color-cyan-600);
|
|
476
|
+
--kp-color-badge-info-outline-bg: rgba(0, 0, 0, 0);
|
|
556
477
|
--kp-color-badge-info-outline-fg: var(--kp-color-cyan-700);
|
|
557
478
|
--kp-color-badge-info-outline-border: var(--kp-color-cyan-300);
|
|
558
479
|
--kp-color-badge-info-outline-dot: var(--kp-color-cyan-600);
|
|
480
|
+
--kp-color-badge-info-dot-bg: rgba(0, 0, 0, 0);
|
|
559
481
|
--kp-color-badge-info-dot-fg: var(--kp-color-gray-700);
|
|
482
|
+
--kp-color-badge-info-dot-border: rgba(0, 0, 0, 0);
|
|
560
483
|
--kp-color-badge-info-dot-dot: var(--kp-color-cyan-600);
|
|
561
484
|
--kp-color-badge-neutral-filled-bg: var(--kp-color-gray-900);
|
|
562
485
|
--kp-color-badge-neutral-filled-fg: var(--kp-color-white);
|
|
@@ -564,11 +487,15 @@
|
|
|
564
487
|
--kp-color-badge-neutral-filled-dot: var(--kp-color-white);
|
|
565
488
|
--kp-color-badge-neutral-subtle-bg: var(--kp-color-gray-100);
|
|
566
489
|
--kp-color-badge-neutral-subtle-fg: var(--kp-color-gray-700);
|
|
490
|
+
--kp-color-badge-neutral-subtle-border: rgba(0, 0, 0, 0);
|
|
567
491
|
--kp-color-badge-neutral-subtle-dot: var(--kp-color-gray-500);
|
|
492
|
+
--kp-color-badge-neutral-outline-bg: rgba(0, 0, 0, 0);
|
|
568
493
|
--kp-color-badge-neutral-outline-fg: var(--kp-color-gray-700);
|
|
569
494
|
--kp-color-badge-neutral-outline-border: var(--kp-color-gray-300);
|
|
570
495
|
--kp-color-badge-neutral-outline-dot: var(--kp-color-gray-500);
|
|
496
|
+
--kp-color-badge-neutral-dot-bg: rgba(0, 0, 0, 0);
|
|
571
497
|
--kp-color-badge-neutral-dot-fg: var(--kp-color-gray-700);
|
|
498
|
+
--kp-color-badge-neutral-dot-border: rgba(0, 0, 0, 0);
|
|
572
499
|
--kp-color-badge-neutral-dot-dot: var(--kp-color-gray-500);
|
|
573
500
|
--kp-color-alert-primary-subtle-bg: var(--kp-color-blue-50);
|
|
574
501
|
--kp-color-alert-primary-subtle-fg-title: var(--kp-color-blue-900);
|
|
@@ -736,8 +663,10 @@
|
|
|
736
663
|
--kp-color-tabs-tab-fg-hover: var(--kp-color-gray-900);
|
|
737
664
|
--kp-color-tabs-tab-fg-selected: var(--kp-color-blue-600);
|
|
738
665
|
--kp-color-tabs-tab-fg-disabled: var(--kp-color-gray-300);
|
|
666
|
+
--kp-color-tabs-tab-underline-rest: rgba(0, 0, 0, 0);
|
|
739
667
|
--kp-color-tabs-tab-underline-hover: var(--kp-color-gray-300);
|
|
740
668
|
--kp-color-tabs-tab-underline-selected: var(--kp-color-blue-600);
|
|
669
|
+
--kp-color-tabs-tab-underline-disabled: rgba(0, 0, 0, 0);
|
|
741
670
|
--kp-color-tabs-tab-icon-rest: var(--kp-color-gray-500);
|
|
742
671
|
--kp-color-tabs-tab-icon-hover: var(--kp-color-gray-700);
|
|
743
672
|
--kp-color-tabs-tab-icon-selected: var(--kp-color-blue-600);
|
|
@@ -773,6 +702,7 @@
|
|
|
773
702
|
--kp-color-sidebar-bg-dark: var(--kp-color-gray-900);
|
|
774
703
|
--kp-color-sidebar-border: var(--kp-color-gray-200);
|
|
775
704
|
--kp-color-sidebar-section-label: var(--kp-color-gray-500);
|
|
705
|
+
--kp-color-nav-item-bg-rest: rgba(0, 0, 0, 0);
|
|
776
706
|
--kp-color-nav-item-bg-hover: var(--kp-color-gray-100);
|
|
777
707
|
--kp-color-nav-item-bg-active: var(--kp-color-blue-50);
|
|
778
708
|
--kp-color-nav-item-fg-rest: var(--kp-color-gray-700);
|
|
@@ -804,9 +734,11 @@
|
|
|
804
734
|
--kp-color-breadcrumbs-separator: var(--kp-color-gray-400); /** Separator between items (chevron/slash) */
|
|
805
735
|
--kp-color-breadcrumbs-separator-dot: var(--kp-color-blue-600); /** Dot separator — accent color, used as a 3×3 shape instead of the middot glyph */
|
|
806
736
|
--kp-color-breadcrumbs-ellipsis: var(--kp-color-gray-600); /** Ellipsis (…) color for collapsed middle levels */
|
|
737
|
+
--kp-color-pagination-item-bg-rest: rgba(0, 0, 0, 0);
|
|
807
738
|
--kp-color-pagination-item-bg-hover: var(--kp-color-blue-50);
|
|
808
739
|
--kp-color-pagination-item-bg-active: var(--kp-color-blue-100);
|
|
809
740
|
--kp-color-pagination-item-bg-selected: var(--kp-color-blue-600);
|
|
741
|
+
--kp-color-pagination-item-bg-disabled: rgba(0, 0, 0, 0);
|
|
810
742
|
--kp-color-pagination-item-fg-rest: var(--kp-color-gray-700);
|
|
811
743
|
--kp-color-pagination-item-fg-hover: var(--kp-color-blue-700);
|
|
812
744
|
--kp-color-pagination-item-fg-active: var(--kp-color-blue-700);
|
|
@@ -838,8 +770,10 @@
|
|
|
838
770
|
--kp-color-datepicker-header-fg: var(--kp-color-gray-900);
|
|
839
771
|
--kp-color-datepicker-header-nav-fg: var(--kp-color-gray-600);
|
|
840
772
|
--kp-color-datepicker-weekday: var(--kp-color-gray-500);
|
|
773
|
+
--kp-color-datepicker-day-bg-rest: rgba(0, 0, 0, 0);
|
|
841
774
|
--kp-color-datepicker-day-bg-hover: var(--kp-color-gray-100);
|
|
842
775
|
--kp-color-datepicker-day-bg-selected: var(--kp-color-blue-600);
|
|
776
|
+
--kp-color-datepicker-day-bg-today: rgba(0, 0, 0, 0);
|
|
843
777
|
--kp-color-datepicker-day-bg-in-range: var(--kp-color-blue-50);
|
|
844
778
|
--kp-color-datepicker-day-bg-range-edge: var(--kp-color-blue-600);
|
|
845
779
|
--kp-color-datepicker-day-fg-rest: var(--kp-color-gray-900);
|
|
@@ -862,6 +796,7 @@
|
|
|
862
796
|
--kp-color-table-row-fg: var(--kp-color-gray-900);
|
|
863
797
|
--kp-color-table-border: var(--kp-color-gray-200);
|
|
864
798
|
--kp-color-table-border-soft: var(--kp-color-gray-100);
|
|
799
|
+
--kp-color-tree-node-bg-rest: rgba(0, 0, 0, 0);
|
|
865
800
|
--kp-color-tree-node-bg-hover: var(--kp-color-gray-50);
|
|
866
801
|
--kp-color-tree-node-bg-selected: var(--kp-color-blue-50);
|
|
867
802
|
--kp-color-tree-node-fg-rest: var(--kp-color-gray-900);
|
|
@@ -871,7 +806,9 @@
|
|
|
871
806
|
--kp-color-tree-node-icon-selected: var(--kp-color-blue-600);
|
|
872
807
|
--kp-color-tree-node-chevron: var(--kp-color-gray-500);
|
|
873
808
|
--kp-color-tree-indent-line: var(--kp-color-gray-200); /** Vertical line showing nesting level */
|
|
809
|
+
--kp-color-accordion-trigger-bg-rest: rgba(0, 0, 0, 0);
|
|
874
810
|
--kp-color-accordion-trigger-bg-hover: var(--kp-color-gray-50);
|
|
811
|
+
--kp-color-accordion-trigger-bg-expanded: rgba(0, 0, 0, 0);
|
|
875
812
|
--kp-color-accordion-trigger-fg-rest: var(--kp-color-gray-900);
|
|
876
813
|
--kp-color-accordion-trigger-fg-expanded: var(--kp-color-gray-900);
|
|
877
814
|
--kp-color-accordion-trigger-fg-disabled: var(--kp-color-gray-400);
|
|
@@ -886,22 +823,106 @@
|
|
|
886
823
|
--kp-color-empty-state-fg-description: var(--kp-color-gray-600);
|
|
887
824
|
--kp-color-card-bg: var(--kp-color-white);
|
|
888
825
|
--kp-color-card-bg-muted: var(--kp-color-gray-50); /** Alternative muted background */
|
|
826
|
+
--kp-color-card-bg-elevated: var(--kp-color-white); /** Same as bg in light. Dark override (#1F1F22) lifts the elevated card one step above default so the elevation reads against the dark page bg. */
|
|
889
827
|
--kp-color-card-border: var(--kp-color-gray-200);
|
|
890
828
|
--kp-color-card-fg-title: var(--kp-color-gray-900);
|
|
891
829
|
--kp-color-card-fg-desc: var(--kp-color-gray-600);
|
|
892
830
|
--kp-color-card-fg-body: var(--kp-color-gray-700);
|
|
893
831
|
--kp-color-card-divider: var(--kp-color-gray-100);
|
|
832
|
+
--kp-color-dialog-backdrop: rgba(0, 0, 0, 0.5); /** Semi-transparent overlay behind dialog */
|
|
894
833
|
--kp-color-dialog-panel-bg: var(--kp-color-white);
|
|
895
834
|
--kp-color-dialog-panel-border: var(--kp-color-gray-200);
|
|
896
835
|
--kp-color-dialog-fg-title: var(--kp-color-gray-900); /** Dialog title */
|
|
897
836
|
--kp-color-dialog-fg-desc: var(--kp-color-gray-600); /** Dialog description (under title) + close icon */
|
|
898
837
|
--kp-color-dialog-fg-body: var(--kp-color-gray-700); /** Dialog body copy */
|
|
899
838
|
--kp-color-dialog-divider: var(--kp-color-gray-100); /** Optional divider between header/body/footer */
|
|
900
|
-
--kp-
|
|
901
|
-
--kp-
|
|
902
|
-
--kp-
|
|
903
|
-
--kp-
|
|
904
|
-
--kp-
|
|
905
|
-
--kp-
|
|
906
|
-
--kp-
|
|
839
|
+
--kp-color-overlay-hover-subtle: rgba(0, 0, 0, 0.04); /** Faintest hover bg — close-button on Alert / Badge / Popover surfaces. */
|
|
840
|
+
--kp-color-overlay-hover-light: rgba(0, 0, 0, 0.06); /** Light hover bg — subtle interactive emphasis on light surfaces. */
|
|
841
|
+
--kp-color-overlay-hover-medium: rgba(0, 0, 0, 0.08); /** Standard hover bg on light surfaces. */
|
|
842
|
+
--kp-color-overlay-primary-hover: rgba(37, 99, 235, 0.08); /** Translucent primary tint — Toast action button hover. */
|
|
843
|
+
--kp-color-overlay-focus-ring: rgba(59, 130, 246, 0.12); /** Soft glow around the focused control (3px ring on SearchBar). */
|
|
844
|
+
--kp-color-fg-on-dark-strong: rgba(255, 255, 255, 0.92); /** Primary text on dark backgrounds — Sidebar item label. */
|
|
845
|
+
--kp-color-fg-on-dark-default: rgba(255, 255, 255, 0.8); /** Default text on dark backgrounds — Header nav item / icon button. */
|
|
846
|
+
--kp-color-fg-on-dark-muted: rgba(255, 255, 255, 0.7); /** Secondary text on dark — Sidebar toggle. */
|
|
847
|
+
--kp-color-fg-on-dark-subtle: rgba(255, 255, 255, 0.6); /** Lowest-emphasis text on dark — Header user role / chevron. */
|
|
848
|
+
--kp-elevation-none: 0px 0px 0px 0px rgba(0,0,0,0);
|
|
849
|
+
--kp-elevation-raised: 0px 1px 2px 0px rgba(9,9,11,0.08), 0px 1px 3px -1px rgba(9,9,11,0.05), 0px 0px 4px -1px rgba(9,9,11,0.03);
|
|
850
|
+
--kp-elevation-overlay: 0px 4px 6px -2px rgba(9,9,11,0.10), 0px 2px 10px -2px rgba(9,9,11,0.06), 0px 0px 16px -4px rgba(9,9,11,0.04);
|
|
851
|
+
--kp-elevation-floating: 0px 8px 16px -4px rgba(9,9,11,0.12), 0px 4px 24px -4px rgba(9,9,11,0.08), 0px 0px 40px -8px rgba(9,9,11,0.05);
|
|
852
|
+
--kp-icon-size-xs: 14px; /** Icon for XS components (24px button) */
|
|
853
|
+
--kp-icon-size-sm: 16px; /** Icon for SM components (28px button) */
|
|
854
|
+
--kp-icon-size-md: 18px; /** Icon for MD components (36px button) */
|
|
855
|
+
--kp-icon-size-lg: 22px; /** Icon for LG components (44px button) */
|
|
856
|
+
--kp-icon-size-xl: 24px; /** Icon for XL components (52px button) */
|
|
857
|
+
--kp-icon-stroke-xs: 1.25px; /** Stroke width for 14px icons — optical compensation */
|
|
858
|
+
--kp-icon-stroke-sm: 1.35px; /** Stroke width for 16px icons */
|
|
859
|
+
--kp-icon-stroke-md: 1.5px; /** Stroke width for 18px icons */
|
|
860
|
+
--kp-icon-stroke-lg: 1.75px; /** Stroke width for 22px icons */
|
|
861
|
+
--kp-icon-stroke-xl: 2px; /** Stroke width for 24px icons — standard Tabler default */
|
|
862
|
+
--kp-motion-duration-fast: 120ms; /** Hover, focus, color/border state changes. */
|
|
863
|
+
--kp-motion-duration-normal: 200ms; /** Overlay enter/exit, accordion expand, larger transitions. */
|
|
864
|
+
--kp-motion-duration-slow: 300ms; /** Page-level changes; rare. */
|
|
865
|
+
--kp-motion-duration-spin: 1000ms; /** Infinite spinner loop — button loading, progress-circular indeterminate. */
|
|
866
|
+
--kp-motion-duration-shimmer: 1400ms; /** Infinite shimmer loop — skeleton placeholder, progress-linear indeterminate slide. */
|
|
867
|
+
--kp-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
868
|
+
--kp-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
869
|
+
--kp-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
870
|
+
--kp-radius-none: 0px;
|
|
871
|
+
--kp-radius-comp-xs: 8px;
|
|
872
|
+
--kp-radius-comp-sm: 10px;
|
|
873
|
+
--kp-radius-comp-md: 12px;
|
|
874
|
+
--kp-radius-comp-lg: 14px;
|
|
875
|
+
--kp-radius-comp-xl: 16px;
|
|
876
|
+
--kp-radius-full: 9999px;
|
|
877
|
+
--kp-size-xs: 24px;
|
|
878
|
+
--kp-size-sm: 28px;
|
|
879
|
+
--kp-size-md: 36px;
|
|
880
|
+
--kp-size-lg: 44px;
|
|
881
|
+
--kp-size-xl: 52px;
|
|
882
|
+
--kp-spacing-4xs: 2px;
|
|
883
|
+
--kp-spacing-3xs: 4px;
|
|
884
|
+
--kp-spacing-2xs: 8px;
|
|
885
|
+
--kp-spacing-xs: 12px;
|
|
886
|
+
--kp-spacing-sm: 16px;
|
|
887
|
+
--kp-spacing-md: 20px;
|
|
888
|
+
--kp-spacing-lg: 24px;
|
|
889
|
+
--kp-spacing-xl: 32px;
|
|
890
|
+
--kp-spacing-2xl: 40px;
|
|
891
|
+
--kp-spacing-3xl: 48px;
|
|
892
|
+
--kp-spacing-4xl: 64px;
|
|
893
|
+
--kp-font-family-sans: Onest, system-ui, sans-serif; /** Primary UI font */
|
|
894
|
+
--kp-font-family-mono: 'SF Mono', Monaco, Consolas, monospace; /** Monospace for code */
|
|
895
|
+
--kp-font-weight-regular: 400; /** Body text */
|
|
896
|
+
--kp-font-weight-medium: 500; /** Emphasis, small text, section labels */
|
|
897
|
+
--kp-font-weight-semibold: 600; /** Headings */
|
|
898
|
+
--kp-font-weight-bold: 700; /** Strong emphasis */
|
|
899
|
+
--kp-font-size-2xs: 11px; /** Micro labels, captions */
|
|
900
|
+
--kp-font-size-xs: 12px; /** Small body, hints */
|
|
901
|
+
--kp-font-size-sm: 14px; /** Default body text, UI */
|
|
902
|
+
--kp-font-size-md: 16px; /** Comfortable body, large UI */
|
|
903
|
+
--kp-font-size-lg: 20px; /** Section labels, small headings */
|
|
904
|
+
--kp-font-size-xl: 24px; /** Headings */
|
|
905
|
+
--kp-font-size-2xl: 32px; /** Large headings, hero text */
|
|
906
|
+
--kp-font-lineHeight-2xs: 16px; /** Pairs with size 2xs (11px) — 4px grid */
|
|
907
|
+
--kp-font-lineHeight-xs: 16px; /** Pairs with size xs (12px) */
|
|
908
|
+
--kp-font-lineHeight-sm: 20px; /** Pairs with size sm (14px) */
|
|
909
|
+
--kp-font-lineHeight-md: 24px; /** Pairs with size md (16px) */
|
|
910
|
+
--kp-font-lineHeight-lg: 28px; /** Pairs with size lg (20px) */
|
|
911
|
+
--kp-font-lineHeight-xl: 32px; /** Pairs with size xl (24px) */
|
|
912
|
+
--kp-font-lineHeight-2xl: 40px; /** Pairs with size 2xl (32px) */
|
|
913
|
+
--kp-layout-container-max-width-narrow: 640px;
|
|
914
|
+
--kp-layout-container-max-width-medium: 960px;
|
|
915
|
+
--kp-layout-container-max-width-wide: 1280px;
|
|
916
|
+
--kp-layout-container-max-width-full: 100%;
|
|
917
|
+
--kp-layout-container-padding-none: 0;
|
|
918
|
+
--kp-layout-container-padding-sm: 16px;
|
|
919
|
+
--kp-layout-container-padding-md: 24px;
|
|
920
|
+
--kp-layout-container-padding-lg: 32px;
|
|
921
|
+
--kp-text-2xs: 500 11px/16px Onest, system-ui, sans-serif; /** Micro text — badges, captions, legal */
|
|
922
|
+
--kp-text-xs: 400 12px/16px Onest, system-ui, sans-serif; /** Small body — helper text, metadata */
|
|
923
|
+
--kp-text-sm: 400 14px/20px Onest, system-ui, sans-serif; /** Default UI body */
|
|
924
|
+
--kp-text-md: 400 16px/24px Onest, system-ui, sans-serif; /** Comfortable body — reading content */
|
|
925
|
+
--kp-text-lg: 500 20px/28px Onest, system-ui, sans-serif; /** Section label, small heading */
|
|
926
|
+
--kp-text-xl: 600 24px/32px Onest, system-ui, sans-serif; /** Heading */
|
|
927
|
+
--kp-text-2xl: 600 32px/40px Onest, system-ui, sans-serif; /** Large heading, hero */
|
|
907
928
|
}
|