@kanso-protocol/core 0.1.0

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 (7) hide show
  1. package/fesm2022/kanso-protocol-core.mjs +40 -0
  2. package/fesm2022/kanso-protocol-core.mjs.map +1 -0
  3. package/package.json +40 -0
  4. package/styles/_tokens.scss +898 -0
  5. package/styles/dark.css +161 -0
  6. package/styles/tokens.css +901 -0
  7. package/types/kanso-protocol-core.d.ts +21 -0
package/styles/_tokens.scss ADDED
@@ -0,0 +1,898 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $kp-color-white: #ffffff;
5
+ $kp-color-black: #09090b;
6
+ $kp-color-gray-50: #fafafa;
7
+ $kp-color-gray-100: #f4f4f5;
8
+ $kp-color-gray-200: #e4e4e7;
9
+ $kp-color-gray-300: #d4d4d8;
10
+ $kp-color-gray-400: #a1a1aa;
11
+ $kp-color-gray-500: #71717a;
12
+ $kp-color-gray-600: #52525b;
13
+ $kp-color-gray-700: #3f3f46;
14
+ $kp-color-gray-800: #27272a;
15
+ $kp-color-gray-900: #18181b;
16
+ $kp-color-gray-950: #09090b;
17
+ $kp-color-blue-50: #eff6ff;
18
+ $kp-color-blue-100: #dbeafe;
19
+ $kp-color-blue-200: #bfdbfe;
20
+ $kp-color-blue-300: #93c5fd;
21
+ $kp-color-blue-400: #60a5fa;
22
+ $kp-color-blue-500: #3b82f6;
23
+ $kp-color-blue-600: #2563eb;
24
+ $kp-color-blue-700: #1d4ed8;
25
+ $kp-color-blue-800: #1e40af;
26
+ $kp-color-blue-900: #1e3a8a;
27
+ $kp-color-blue-950: #172554;
28
+ $kp-color-red-50: #fef2f2;
29
+ $kp-color-red-100: #fee2e2;
30
+ $kp-color-red-200: #fecaca;
31
+ $kp-color-red-300: #fca5a5;
32
+ $kp-color-red-400: #f87171;
33
+ $kp-color-red-500: #ef4444;
34
+ $kp-color-red-600: #dc2626;
35
+ $kp-color-red-700: #b91c1c;
36
+ $kp-color-red-800: #991b1b;
37
+ $kp-color-red-900: #7f1d1d;
38
+ $kp-color-red-950: #450a0a;
39
+ $kp-color-green-50: #f0fdf4;
40
+ $kp-color-green-100: #dcfce7;
41
+ $kp-color-green-200: #bbf7d0;
42
+ $kp-color-green-300: #86efac;
43
+ $kp-color-green-400: #4ade80;
44
+ $kp-color-green-500: #22c55e;
45
+ $kp-color-green-600: #16a34a;
46
+ $kp-color-green-700: #15803d;
47
+ $kp-color-green-800: #166534;
48
+ $kp-color-green-900: #14532d;
49
+ $kp-color-green-950: #052e16;
50
+ $kp-color-amber-50: #fffbeb;
51
+ $kp-color-amber-100: #fef3c7;
52
+ $kp-color-amber-200: #fde68a;
53
+ $kp-color-amber-300: #fcd34d;
54
+ $kp-color-amber-400: #fbbf24;
55
+ $kp-color-amber-500: #f59e0b;
56
+ $kp-color-amber-600: #d97706;
57
+ $kp-color-amber-700: #b45309;
58
+ $kp-color-amber-800: #92400e;
59
+ $kp-color-amber-900: #78350f;
60
+ $kp-color-amber-950: #451a03;
61
+ $kp-color-cyan-50: #ecfeff;
62
+ $kp-color-cyan-100: #cffafe;
63
+ $kp-color-cyan-200: #a5f3fc;
64
+ $kp-color-cyan-300: #67e8f9;
65
+ $kp-color-cyan-400: #22d3ee;
66
+ $kp-color-cyan-500: #06b6d4;
67
+ $kp-color-cyan-600: #0891b2;
68
+ $kp-color-cyan-700: #0e7490;
69
+ $kp-color-cyan-800: #155e75;
70
+ $kp-color-cyan-900: #164e63;
71
+ $kp-color-cyan-950: #083344;
72
+ $kp-color-primary-subtle-border-rest: rgba(0, 0, 0, 0);
73
+ $kp-color-primary-subtle-border-hover: rgba(0, 0, 0, 0);
74
+ $kp-color-primary-subtle-border-active: rgba(0, 0, 0, 0);
75
+ $kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
76
+ $kp-color-primary-subtle-border-loading: rgba(0, 0, 0, 0);
77
+ $kp-color-primary-outline-bg-rest: rgba(0, 0, 0, 0);
78
+ $kp-color-primary-outline-bg-focus: rgba(0, 0, 0, 0);
79
+ $kp-color-primary-outline-bg-disabled: rgba(0, 0, 0, 0);
80
+ $kp-color-primary-outline-bg-loading: rgba(0, 0, 0, 0);
81
+ $kp-color-primary-ghost-bg-rest: rgba(0, 0, 0, 0);
82
+ $kp-color-primary-ghost-bg-focus: rgba(0, 0, 0, 0);
83
+ $kp-color-primary-ghost-bg-disabled: rgba(0, 0, 0, 0);
84
+ $kp-color-primary-ghost-bg-loading: rgba(0, 0, 0, 0);
85
+ $kp-color-primary-ghost-border-rest: rgba(0, 0, 0, 0);
86
+ $kp-color-primary-ghost-border-hover: rgba(0, 0, 0, 0);
87
+ $kp-color-primary-ghost-border-active: rgba(0, 0, 0, 0);
88
+ $kp-color-primary-ghost-border-disabled: rgba(0, 0, 0, 0);
89
+ $kp-color-primary-ghost-border-loading: rgba(0, 0, 0, 0);
90
+ $kp-color-danger-subtle-border-rest: rgba(0, 0, 0, 0);
91
+ $kp-color-danger-subtle-border-hover: rgba(0, 0, 0, 0);
92
+ $kp-color-danger-subtle-border-active: rgba(0, 0, 0, 0);
93
+ $kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
94
+ $kp-color-danger-subtle-border-loading: rgba(0, 0, 0, 0);
95
+ $kp-color-danger-outline-bg-rest: rgba(0, 0, 0, 0);
96
+ $kp-color-danger-outline-bg-focus: rgba(0, 0, 0, 0);
97
+ $kp-color-danger-outline-bg-disabled: rgba(0, 0, 0, 0);
98
+ $kp-color-danger-outline-bg-loading: rgba(0, 0, 0, 0);
99
+ $kp-color-danger-ghost-bg-rest: rgba(0, 0, 0, 0);
100
+ $kp-color-danger-ghost-bg-focus: rgba(0, 0, 0, 0);
101
+ $kp-color-danger-ghost-bg-disabled: rgba(0, 0, 0, 0);
102
+ $kp-color-danger-ghost-bg-loading: rgba(0, 0, 0, 0);
103
+ $kp-color-danger-ghost-border-rest: rgba(0, 0, 0, 0);
104
+ $kp-color-danger-ghost-border-hover: rgba(0, 0, 0, 0);
105
+ $kp-color-danger-ghost-border-active: rgba(0, 0, 0, 0);
106
+ $kp-color-danger-ghost-border-disabled: rgba(0, 0, 0, 0);
107
+ $kp-color-danger-ghost-border-loading: rgba(0, 0, 0, 0);
108
+ $kp-color-neutral-subtle-border-rest: rgba(0, 0, 0, 0);
109
+ $kp-color-neutral-subtle-border-hover: rgba(0, 0, 0, 0);
110
+ $kp-color-neutral-subtle-border-active: rgba(0, 0, 0, 0);
111
+ $kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
112
+ $kp-color-neutral-subtle-border-loading: rgba(0, 0, 0, 0);
113
+ $kp-color-neutral-outline-bg-rest: rgba(0, 0, 0, 0);
114
+ $kp-color-neutral-outline-bg-focus: rgba(0, 0, 0, 0);
115
+ $kp-color-neutral-outline-bg-disabled: rgba(0, 0, 0, 0);
116
+ $kp-color-neutral-outline-bg-loading: rgba(0, 0, 0, 0);
117
+ $kp-color-neutral-ghost-bg-rest: rgba(0, 0, 0, 0);
118
+ $kp-color-neutral-ghost-bg-focus: rgba(0, 0, 0, 0);
119
+ $kp-color-neutral-ghost-bg-disabled: rgba(0, 0, 0, 0);
120
+ $kp-color-neutral-ghost-bg-loading: rgba(0, 0, 0, 0);
121
+ $kp-color-neutral-ghost-border-rest: rgba(0, 0, 0, 0);
122
+ $kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
123
+ $kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
124
+ $kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
125
+ $kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
126
+ $kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
127
+ $kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
128
+ $kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
129
+ $kp-color-badge-primary-outline-bg: rgba(0, 0, 0, 0);
130
+ $kp-color-badge-primary-dot-bg: rgba(0, 0, 0, 0);
131
+ $kp-color-badge-primary-dot-border: rgba(0, 0, 0, 0);
132
+ $kp-color-badge-danger-subtle-border: rgba(0, 0, 0, 0);
133
+ $kp-color-badge-danger-outline-bg: rgba(0, 0, 0, 0);
134
+ $kp-color-badge-danger-dot-bg: rgba(0, 0, 0, 0);
135
+ $kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
136
+ $kp-color-badge-success-subtle-border: rgba(0, 0, 0, 0);
137
+ $kp-color-badge-success-outline-bg: rgba(0, 0, 0, 0);
138
+ $kp-color-badge-success-dot-bg: rgba(0, 0, 0, 0);
139
+ $kp-color-badge-success-dot-border: rgba(0, 0, 0, 0);
140
+ $kp-color-badge-warning-subtle-border: rgba(0, 0, 0, 0);
141
+ $kp-color-badge-warning-outline-bg: rgba(0, 0, 0, 0);
142
+ $kp-color-badge-warning-dot-bg: rgba(0, 0, 0, 0);
143
+ $kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
144
+ $kp-color-badge-info-subtle-border: rgba(0, 0, 0, 0);
145
+ $kp-color-badge-info-outline-bg: rgba(0, 0, 0, 0);
146
+ $kp-color-badge-info-dot-bg: rgba(0, 0, 0, 0);
147
+ $kp-color-badge-info-dot-border: rgba(0, 0, 0, 0);
148
+ $kp-color-badge-neutral-subtle-border: rgba(0, 0, 0, 0);
149
+ $kp-color-badge-neutral-outline-bg: rgba(0, 0, 0, 0);
150
+ $kp-color-badge-neutral-dot-bg: rgba(0, 0, 0, 0);
151
+ $kp-color-badge-neutral-dot-border: rgba(0, 0, 0, 0);
152
+ $kp-color-tabs-tab-underline-rest: rgba(0, 0, 0, 0);
153
+ $kp-color-tabs-tab-underline-disabled: rgba(0, 0, 0, 0);
154
+ $kp-color-nav-item-bg-rest: rgba(0, 0, 0, 0);
155
+ $kp-color-pagination-item-bg-rest: rgba(0, 0, 0, 0);
156
+ $kp-color-pagination-item-bg-disabled: rgba(0, 0, 0, 0);
157
+ $kp-color-datepicker-day-bg-rest: rgba(0, 0, 0, 0);
158
+ $kp-color-datepicker-day-bg-today: rgba(0, 0, 0, 0);
159
+ $kp-color-tree-node-bg-rest: rgba(0, 0, 0, 0);
160
+ $kp-color-accordion-trigger-bg-rest: rgba(0, 0, 0, 0);
161
+ $kp-color-accordion-trigger-bg-expanded: rgba(0, 0, 0, 0);
162
+ $kp-color-dialog-backdrop: rgba(0, 0, 0, 0.5); // Semi-transparent overlay behind dialog
163
+ $kp-color-overlay-hover-subtle: rgba(0, 0, 0, 0.04); // Faintest hover bg — close-button on Alert / Badge / Popover surfaces.
164
+ $kp-color-overlay-hover-light: rgba(0, 0, 0, 0.06); // Light hover bg — subtle interactive emphasis on light surfaces.
165
+ $kp-color-overlay-hover-medium: rgba(0, 0, 0, 0.08); // Standard hover bg on light surfaces.
166
+ $kp-color-overlay-primary-hover: rgba(37, 99, 235, 0.08); // Translucent primary tint — Toast action button hover.
167
+ $kp-color-overlay-focus-ring: rgba(59, 130, 246, 0.12); // Soft glow around the focused control (3px ring on SearchBar).
168
+ $kp-color-fg-on-dark-strong: rgba(255, 255, 255, 0.92); // Primary text on dark backgrounds — Sidebar item label.
169
+ $kp-color-fg-on-dark-default: rgba(255, 255, 255, 0.8); // Default text on dark backgrounds — Header nav item / icon button.
170
+ $kp-color-fg-on-dark-muted: rgba(255, 255, 255, 0.7); // Secondary text on dark — Sidebar toggle.
171
+ $kp-color-fg-on-dark-subtle: rgba(255, 255, 255, 0.6); // Lowest-emphasis text on dark — Header user role / chevron.
172
+ $kp-elevation-none: 0px 0px 0px 0px rgba(0,0,0,0);
173
+ $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);
174
+ $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);
175
+ $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);
176
+ $kp-icon-size-xs: 14px; // Icon for XS components (24px button)
177
+ $kp-icon-size-sm: 16px; // Icon for SM components (28px button)
178
+ $kp-icon-size-md: 18px; // Icon for MD components (36px button)
179
+ $kp-icon-size-lg: 22px; // Icon for LG components (44px button)
180
+ $kp-icon-size-xl: 24px; // Icon for XL components (52px button)
181
+ $kp-icon-stroke-xs: 1.25px; // Stroke width for 14px icons — optical compensation
182
+ $kp-icon-stroke-sm: 1.35px; // Stroke width for 16px icons
183
+ $kp-icon-stroke-md: 1.5px; // Stroke width for 18px icons
184
+ $kp-icon-stroke-lg: 1.75px; // Stroke width for 22px icons
185
+ $kp-icon-stroke-xl: 2px; // Stroke width for 24px icons — standard Tabler default
186
+ $kp-motion-duration-fast: 120ms; // Hover, focus, color/border state changes.
187
+ $kp-motion-duration-normal: 200ms; // Overlay enter/exit, accordion expand, larger transitions.
188
+ $kp-motion-duration-slow: 300ms; // Page-level changes; rare.
189
+ $kp-motion-duration-spin: 1000ms; // Infinite spinner loop — button loading, progress-circular indeterminate.
190
+ $kp-motion-duration-shimmer: 1400ms; // Infinite shimmer loop — skeleton placeholder, progress-linear indeterminate slide.
191
+ $kp-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
192
+ $kp-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
193
+ $kp-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
194
+ $kp-radius-none: 0px;
195
+ $kp-radius-comp-xs: 8px;
196
+ $kp-radius-comp-sm: 10px;
197
+ $kp-radius-comp-md: 12px;
198
+ $kp-radius-comp-lg: 14px;
199
+ $kp-radius-comp-xl: 16px;
200
+ $kp-radius-full: 9999px;
201
+ $kp-size-xs: 24px;
202
+ $kp-size-sm: 28px;
203
+ $kp-size-md: 36px;
204
+ $kp-size-lg: 44px;
205
+ $kp-size-xl: 52px;
206
+ $kp-spacing-4xs: 2px;
207
+ $kp-spacing-3xs: 4px;
208
+ $kp-spacing-2xs: 8px;
209
+ $kp-spacing-xs: 12px;
210
+ $kp-spacing-sm: 16px;
211
+ $kp-spacing-md: 20px;
212
+ $kp-spacing-lg: 24px;
213
+ $kp-spacing-xl: 32px;
214
+ $kp-spacing-2xl: 40px;
215
+ $kp-spacing-3xl: 48px;
216
+ $kp-spacing-4xl: 64px;
217
+ $kp-font-family-sans: Onest, system-ui, sans-serif; // Primary UI font
218
+ $kp-font-family-mono: 'SF Mono', Monaco, Consolas, monospace; // Monospace for code
219
+ $kp-font-weight-regular: 400; // Body text
220
+ $kp-font-weight-medium: 500; // Emphasis, small text, section labels
221
+ $kp-font-weight-semibold: 600; // Headings
222
+ $kp-font-weight-bold: 700; // Strong emphasis
223
+ $kp-font-size-2xs: 11px; // Micro labels, captions
224
+ $kp-font-size-xs: 12px; // Small body, hints
225
+ $kp-font-size-sm: 14px; // Default body text, UI
226
+ $kp-font-size-md: 16px; // Comfortable body, large UI
227
+ $kp-font-size-lg: 20px; // Section labels, small headings
228
+ $kp-font-size-xl: 24px; // Headings
229
+ $kp-font-size-2xl: 32px; // Large headings, hero text
230
+ $kp-font-line-height-2xs: 16px; // Pairs with size 2xs (11px) — 4px grid
231
+ $kp-font-line-height-xs: 16px; // Pairs with size xs (12px)
232
+ $kp-font-line-height-sm: 20px; // Pairs with size sm (14px)
233
+ $kp-font-line-height-md: 24px; // Pairs with size md (16px)
234
+ $kp-font-line-height-lg: 28px; // Pairs with size lg (20px)
235
+ $kp-font-line-height-xl: 32px; // Pairs with size xl (24px)
236
+ $kp-font-line-height-2xl: 40px; // Pairs with size 2xl (32px)
237
+ $kp-layout-container-max-width-narrow: 640px;
238
+ $kp-layout-container-max-width-medium: 960px;
239
+ $kp-layout-container-max-width-wide: 1280px;
240
+ $kp-layout-container-max-width-full: 100%;
241
+ $kp-layout-container-padding-none: 0;
242
+ $kp-layout-container-padding-sm: 16px;
243
+ $kp-layout-container-padding-md: 24px;
244
+ $kp-layout-container-padding-lg: 32px;
245
+ $kp-color-primary-default-bg-rest: $kp-color-blue-600;
246
+ $kp-color-primary-default-bg-hover: $kp-color-blue-700;
247
+ $kp-color-primary-default-bg-active: $kp-color-blue-800;
248
+ $kp-color-primary-default-bg-focus: $kp-color-blue-600;
249
+ $kp-color-primary-default-bg-disabled: $kp-color-gray-200;
250
+ $kp-color-primary-default-bg-loading: $kp-color-blue-500;
251
+ $kp-color-primary-default-fg-rest: $kp-color-white;
252
+ $kp-color-primary-default-fg-hover: $kp-color-white;
253
+ $kp-color-primary-default-fg-active: $kp-color-white;
254
+ $kp-color-primary-default-fg-focus: $kp-color-white;
255
+ $kp-color-primary-default-fg-disabled: $kp-color-gray-400;
256
+ $kp-color-primary-default-fg-loading: $kp-color-white;
257
+ $kp-color-primary-default-border-rest: $kp-color-blue-600;
258
+ $kp-color-primary-default-border-hover: $kp-color-blue-700;
259
+ $kp-color-primary-default-border-active: $kp-color-blue-800;
260
+ $kp-color-primary-default-border-focus: $kp-color-blue-600;
261
+ $kp-color-primary-default-border-disabled: $kp-color-gray-200;
262
+ $kp-color-primary-default-border-loading: $kp-color-blue-500;
263
+ $kp-color-primary-subtle-bg-rest: $kp-color-blue-50;
264
+ $kp-color-primary-subtle-bg-hover: $kp-color-blue-100;
265
+ $kp-color-primary-subtle-bg-active: $kp-color-blue-200;
266
+ $kp-color-primary-subtle-bg-focus: $kp-color-blue-50;
267
+ $kp-color-primary-subtle-bg-disabled: $kp-color-gray-100;
268
+ $kp-color-primary-subtle-bg-loading: $kp-color-blue-50;
269
+ $kp-color-primary-subtle-fg-rest: $kp-color-blue-700;
270
+ $kp-color-primary-subtle-fg-hover: $kp-color-blue-800;
271
+ $kp-color-primary-subtle-fg-active: $kp-color-blue-900;
272
+ $kp-color-primary-subtle-fg-focus: $kp-color-blue-700;
273
+ $kp-color-primary-subtle-fg-disabled: $kp-color-gray-400;
274
+ $kp-color-primary-subtle-fg-loading: $kp-color-blue-500;
275
+ $kp-color-primary-subtle-border-focus: $kp-color-blue-600;
276
+ $kp-color-primary-outline-bg-hover: $kp-color-blue-50;
277
+ $kp-color-primary-outline-bg-active: $kp-color-blue-100;
278
+ $kp-color-primary-outline-fg-rest: $kp-color-blue-600;
279
+ $kp-color-primary-outline-fg-hover: $kp-color-blue-700;
280
+ $kp-color-primary-outline-fg-active: $kp-color-blue-800;
281
+ $kp-color-primary-outline-fg-focus: $kp-color-blue-600;
282
+ $kp-color-primary-outline-fg-disabled: $kp-color-gray-400;
283
+ $kp-color-primary-outline-fg-loading: $kp-color-blue-400;
284
+ $kp-color-primary-outline-border-rest: $kp-color-blue-300;
285
+ $kp-color-primary-outline-border-hover: $kp-color-blue-400;
286
+ $kp-color-primary-outline-border-active: $kp-color-blue-500;
287
+ $kp-color-primary-outline-border-focus: $kp-color-blue-600;
288
+ $kp-color-primary-outline-border-disabled: $kp-color-gray-200;
289
+ $kp-color-primary-outline-border-loading: $kp-color-blue-200;
290
+ $kp-color-primary-ghost-bg-hover: $kp-color-blue-50;
291
+ $kp-color-primary-ghost-bg-active: $kp-color-blue-100;
292
+ $kp-color-primary-ghost-fg-rest: $kp-color-blue-600;
293
+ $kp-color-primary-ghost-fg-hover: $kp-color-blue-700;
294
+ $kp-color-primary-ghost-fg-active: $kp-color-blue-800;
295
+ $kp-color-primary-ghost-fg-focus: $kp-color-blue-600;
296
+ $kp-color-primary-ghost-fg-disabled: $kp-color-gray-400;
297
+ $kp-color-primary-ghost-fg-loading: $kp-color-blue-400;
298
+ $kp-color-primary-ghost-border-focus: $kp-color-blue-600;
299
+ $kp-color-danger-default-bg-rest: $kp-color-red-600;
300
+ $kp-color-danger-default-bg-hover: $kp-color-red-700;
301
+ $kp-color-danger-default-bg-active: $kp-color-red-800;
302
+ $kp-color-danger-default-bg-focus: $kp-color-red-600;
303
+ $kp-color-danger-default-bg-disabled: $kp-color-gray-200;
304
+ $kp-color-danger-default-bg-loading: $kp-color-red-500;
305
+ $kp-color-danger-default-fg-rest: $kp-color-white;
306
+ $kp-color-danger-default-fg-hover: $kp-color-white;
307
+ $kp-color-danger-default-fg-active: $kp-color-white;
308
+ $kp-color-danger-default-fg-focus: $kp-color-white;
309
+ $kp-color-danger-default-fg-disabled: $kp-color-gray-400;
310
+ $kp-color-danger-default-fg-loading: $kp-color-white;
311
+ $kp-color-danger-default-border-rest: $kp-color-red-600;
312
+ $kp-color-danger-default-border-hover: $kp-color-red-700;
313
+ $kp-color-danger-default-border-active: $kp-color-red-800;
314
+ $kp-color-danger-default-border-focus: $kp-color-red-600;
315
+ $kp-color-danger-default-border-disabled: $kp-color-gray-200;
316
+ $kp-color-danger-default-border-loading: $kp-color-red-500;
317
+ $kp-color-danger-subtle-bg-rest: $kp-color-red-50;
318
+ $kp-color-danger-subtle-bg-hover: $kp-color-red-100;
319
+ $kp-color-danger-subtle-bg-active: $kp-color-red-200;
320
+ $kp-color-danger-subtle-bg-focus: $kp-color-red-50;
321
+ $kp-color-danger-subtle-bg-disabled: $kp-color-gray-100;
322
+ $kp-color-danger-subtle-bg-loading: $kp-color-red-50;
323
+ $kp-color-danger-subtle-fg-rest: $kp-color-red-700;
324
+ $kp-color-danger-subtle-fg-hover: $kp-color-red-800;
325
+ $kp-color-danger-subtle-fg-active: $kp-color-red-900;
326
+ $kp-color-danger-subtle-fg-focus: $kp-color-red-700;
327
+ $kp-color-danger-subtle-fg-disabled: $kp-color-gray-400;
328
+ $kp-color-danger-subtle-fg-loading: $kp-color-red-500;
329
+ $kp-color-danger-subtle-border-focus: $kp-color-red-600;
330
+ $kp-color-danger-outline-bg-hover: $kp-color-red-50;
331
+ $kp-color-danger-outline-bg-active: $kp-color-red-100;
332
+ $kp-color-danger-outline-fg-rest: $kp-color-red-600;
333
+ $kp-color-danger-outline-fg-hover: $kp-color-red-700;
334
+ $kp-color-danger-outline-fg-active: $kp-color-red-800;
335
+ $kp-color-danger-outline-fg-focus: $kp-color-red-600;
336
+ $kp-color-danger-outline-fg-disabled: $kp-color-gray-400;
337
+ $kp-color-danger-outline-fg-loading: $kp-color-red-400;
338
+ $kp-color-danger-outline-border-rest: $kp-color-red-300;
339
+ $kp-color-danger-outline-border-hover: $kp-color-red-400;
340
+ $kp-color-danger-outline-border-active: $kp-color-red-500;
341
+ $kp-color-danger-outline-border-focus: $kp-color-red-600;
342
+ $kp-color-danger-outline-border-disabled: $kp-color-gray-200;
343
+ $kp-color-danger-outline-border-loading: $kp-color-red-200;
344
+ $kp-color-danger-ghost-bg-hover: $kp-color-red-50;
345
+ $kp-color-danger-ghost-bg-active: $kp-color-red-100;
346
+ $kp-color-danger-ghost-fg-rest: $kp-color-red-600;
347
+ $kp-color-danger-ghost-fg-hover: $kp-color-red-700;
348
+ $kp-color-danger-ghost-fg-active: $kp-color-red-800;
349
+ $kp-color-danger-ghost-fg-focus: $kp-color-red-600;
350
+ $kp-color-danger-ghost-fg-disabled: $kp-color-gray-400;
351
+ $kp-color-danger-ghost-fg-loading: $kp-color-red-400;
352
+ $kp-color-danger-ghost-border-focus: $kp-color-red-600;
353
+ $kp-color-neutral-default-bg-rest: $kp-color-gray-900;
354
+ $kp-color-neutral-default-bg-hover: $kp-color-gray-800;
355
+ $kp-color-neutral-default-bg-active: $kp-color-gray-700;
356
+ $kp-color-neutral-default-bg-focus: $kp-color-gray-900;
357
+ $kp-color-neutral-default-bg-disabled: $kp-color-gray-200;
358
+ $kp-color-neutral-default-bg-loading: $kp-color-gray-700;
359
+ $kp-color-neutral-default-fg-rest: $kp-color-white;
360
+ $kp-color-neutral-default-fg-hover: $kp-color-white;
361
+ $kp-color-neutral-default-fg-active: $kp-color-white;
362
+ $kp-color-neutral-default-fg-focus: $kp-color-white;
363
+ $kp-color-neutral-default-fg-disabled: $kp-color-gray-400;
364
+ $kp-color-neutral-default-fg-loading: $kp-color-white;
365
+ $kp-color-neutral-default-border-rest: $kp-color-gray-900;
366
+ $kp-color-neutral-default-border-hover: $kp-color-gray-800;
367
+ $kp-color-neutral-default-border-active: $kp-color-gray-700;
368
+ $kp-color-neutral-default-border-focus: $kp-color-gray-900;
369
+ $kp-color-neutral-default-border-disabled: $kp-color-gray-200;
370
+ $kp-color-neutral-default-border-loading: $kp-color-gray-700;
371
+ $kp-color-neutral-subtle-bg-rest: $kp-color-gray-100;
372
+ $kp-color-neutral-subtle-bg-hover: $kp-color-gray-200;
373
+ $kp-color-neutral-subtle-bg-active: $kp-color-gray-300;
374
+ $kp-color-neutral-subtle-bg-focus: $kp-color-gray-100;
375
+ $kp-color-neutral-subtle-bg-disabled: $kp-color-gray-100;
376
+ $kp-color-neutral-subtle-bg-loading: $kp-color-gray-100;
377
+ $kp-color-neutral-subtle-fg-rest: $kp-color-gray-700;
378
+ $kp-color-neutral-subtle-fg-hover: $kp-color-gray-800;
379
+ $kp-color-neutral-subtle-fg-active: $kp-color-gray-900;
380
+ $kp-color-neutral-subtle-fg-focus: $kp-color-gray-700;
381
+ $kp-color-neutral-subtle-fg-disabled: $kp-color-gray-400;
382
+ $kp-color-neutral-subtle-fg-loading: $kp-color-gray-500;
383
+ $kp-color-neutral-subtle-border-focus: $kp-color-gray-600;
384
+ $kp-color-neutral-outline-bg-hover: $kp-color-gray-50;
385
+ $kp-color-neutral-outline-bg-active: $kp-color-gray-100;
386
+ $kp-color-neutral-outline-fg-rest: $kp-color-gray-700;
387
+ $kp-color-neutral-outline-fg-hover: $kp-color-gray-800;
388
+ $kp-color-neutral-outline-fg-active: $kp-color-gray-900;
389
+ $kp-color-neutral-outline-fg-focus: $kp-color-gray-700;
390
+ $kp-color-neutral-outline-fg-disabled: $kp-color-gray-400;
391
+ $kp-color-neutral-outline-fg-loading: $kp-color-gray-400;
392
+ $kp-color-neutral-outline-border-rest: $kp-color-gray-300;
393
+ $kp-color-neutral-outline-border-hover: $kp-color-gray-400;
394
+ $kp-color-neutral-outline-border-active: $kp-color-gray-500;
395
+ $kp-color-neutral-outline-border-focus: $kp-color-gray-600;
396
+ $kp-color-neutral-outline-border-disabled: $kp-color-gray-200;
397
+ $kp-color-neutral-outline-border-loading: $kp-color-gray-200;
398
+ $kp-color-neutral-ghost-bg-hover: $kp-color-gray-100;
399
+ $kp-color-neutral-ghost-bg-active: $kp-color-gray-200;
400
+ $kp-color-neutral-ghost-fg-rest: $kp-color-gray-700;
401
+ $kp-color-neutral-ghost-fg-hover: $kp-color-gray-800;
402
+ $kp-color-neutral-ghost-fg-active: $kp-color-gray-900;
403
+ $kp-color-neutral-ghost-fg-focus: $kp-color-gray-700;
404
+ $kp-color-neutral-ghost-fg-disabled: $kp-color-gray-400;
405
+ $kp-color-neutral-ghost-fg-loading: $kp-color-gray-400;
406
+ $kp-color-neutral-ghost-border-focus: $kp-color-gray-600;
407
+ $kp-color-focus-ring: $kp-color-blue-400; // Focus ring — 2px offset outline for all focusable elements
408
+ $kp-color-icon-primary: $kp-color-gray-700; // Default icon color on light backgrounds — navigation, lists, labels
409
+ $kp-color-icon-secondary: $kp-color-gray-400; // Decorative icons, placeholders, hints
410
+ $kp-color-icon-disabled: $kp-color-gray-300; // Disabled/inactive icons
411
+ $kp-color-icon-interactive: $kp-color-blue-600; // Clickable icon-links
412
+ $kp-color-icon-danger: $kp-color-red-600; // Error, destructive actions
413
+ $kp-color-icon-success: $kp-color-green-600; // Success, confirmation
414
+ $kp-color-icon-warning: $kp-color-amber-500; // Warning, attention needed
415
+ $kp-color-form-label-default: $kp-color-gray-700; // Default label color
416
+ $kp-color-form-label-disabled: $kp-color-gray-400; // Disabled label
417
+ $kp-color-form-label-error: $kp-color-red-600; // Error label
418
+ $kp-color-form-helper-default: $kp-color-gray-500; // Default helper text
419
+ $kp-color-form-helper-disabled: $kp-color-gray-400; // Disabled helper text
420
+ $kp-color-form-helper-error: $kp-color-red-500; // Error helper text
421
+ $kp-color-form-floating-label-rest: $kp-color-gray-600; // Floating label at rest
422
+ $kp-color-form-floating-label-focus: $kp-color-blue-600; // Floating label on focus
423
+ $kp-color-form-floating-label-error: $kp-color-red-500; // Floating label on error
424
+ $kp-color-form-floating-label-disabled: $kp-color-gray-400; // Floating label disabled
425
+ $kp-color-form-required-marker: $kp-color-red-600; // Required field asterisk color
426
+ $kp-color-form-required-optional: $kp-color-gray-500; // Optional field label color
427
+ $kp-color-menu-panel-bg: $kp-color-white;
428
+ $kp-color-menu-panel-border: $kp-color-gray-200;
429
+ $kp-color-menu-item-bg-rest: $kp-color-white;
430
+ $kp-color-menu-item-bg-hover: $kp-color-gray-50;
431
+ $kp-color-menu-item-bg-active: $kp-color-gray-100;
432
+ $kp-color-menu-item-bg-selected: $kp-color-blue-50;
433
+ $kp-color-menu-item-bg-disabled: $kp-color-white;
434
+ $kp-color-menu-item-fg-rest: $kp-color-gray-900;
435
+ $kp-color-menu-item-fg-hover: $kp-color-gray-900;
436
+ $kp-color-menu-item-fg-active: $kp-color-gray-900;
437
+ $kp-color-menu-item-fg-selected: $kp-color-blue-700;
438
+ $kp-color-menu-item-fg-disabled: $kp-color-gray-400;
439
+ $kp-color-menu-item-fg-danger-rest: $kp-color-red-600;
440
+ $kp-color-menu-item-fg-danger-hover: $kp-color-red-700;
441
+ $kp-color-menu-item-icon-rest: $kp-color-gray-500;
442
+ $kp-color-menu-item-icon-selected: $kp-color-blue-600;
443
+ $kp-color-menu-item-icon-disabled: $kp-color-gray-300;
444
+ $kp-color-menu-item-shortcut-default: $kp-color-gray-400;
445
+ $kp-color-menu-divider: $kp-color-gray-100;
446
+ $kp-color-menu-section-label: $kp-color-gray-500;
447
+ $kp-color-input-bg-default: $kp-color-white;
448
+ $kp-color-input-bg-filled: $kp-color-gray-100;
449
+ $kp-color-input-bg-disabled: $kp-color-gray-50;
450
+ $kp-color-input-fg-default: $kp-color-gray-900;
451
+ $kp-color-input-fg-disabled: $kp-color-gray-400;
452
+ $kp-color-input-border-rest: $kp-color-gray-300;
453
+ $kp-color-input-border-hover: $kp-color-gray-400;
454
+ $kp-color-input-border-focus: $kp-color-blue-600;
455
+ $kp-color-input-border-disabled: $kp-color-gray-200;
456
+ $kp-color-input-border-error: $kp-color-red-500;
457
+ $kp-color-input-placeholder-default: $kp-color-gray-400;
458
+ $kp-color-input-placeholder-disabled: $kp-color-gray-300;
459
+ $kp-color-select-chevron-rest: $kp-color-gray-500;
460
+ $kp-color-select-chevron-hover: $kp-color-gray-700;
461
+ $kp-color-select-chevron-open: $kp-color-blue-600;
462
+ $kp-color-select-chevron-disabled: $kp-color-gray-300;
463
+ $kp-color-select-chevron-error: $kp-color-red-500;
464
+ $kp-color-stepper-indicator-bg-pending: $kp-color-white;
465
+ $kp-color-stepper-indicator-bg-active: $kp-color-blue-600;
466
+ $kp-color-stepper-indicator-bg-completed: $kp-color-blue-600;
467
+ $kp-color-stepper-indicator-bg-error: $kp-color-red-600;
468
+ $kp-color-stepper-indicator-border-pending: $kp-color-gray-300;
469
+ $kp-color-stepper-indicator-border-active: $kp-color-blue-600;
470
+ $kp-color-stepper-indicator-border-completed: $kp-color-blue-600;
471
+ $kp-color-stepper-indicator-border-error: $kp-color-red-600;
472
+ $kp-color-stepper-indicator-fg-pending: $kp-color-gray-500;
473
+ $kp-color-stepper-indicator-fg-active: $kp-color-white;
474
+ $kp-color-stepper-indicator-fg-completed: $kp-color-white;
475
+ $kp-color-stepper-indicator-fg-error: $kp-color-white;
476
+ $kp-color-stepper-label-pending: $kp-color-gray-500;
477
+ $kp-color-stepper-label-active: $kp-color-gray-900;
478
+ $kp-color-stepper-label-completed: $kp-color-gray-700;
479
+ $kp-color-stepper-label-error: $kp-color-red-700;
480
+ $kp-color-stepper-description-pending: $kp-color-gray-400;
481
+ $kp-color-stepper-description-active: $kp-color-gray-600;
482
+ $kp-color-stepper-description-completed: $kp-color-gray-500;
483
+ $kp-color-stepper-description-error: $kp-color-red-600;
484
+ $kp-color-stepper-connector-pending: $kp-color-gray-200;
485
+ $kp-color-stepper-connector-completed: $kp-color-blue-600;
486
+ $kp-color-segmented-track-bg: $kp-color-gray-100; // Outer container background
487
+ $kp-color-segmented-segment-bg-selected: $kp-color-white;
488
+ $kp-color-segmented-segment-bg-unselected-hover: $kp-color-gray-200;
489
+ $kp-color-segmented-segment-fg-selected: $kp-color-gray-900;
490
+ $kp-color-segmented-segment-fg-unselected-rest: $kp-color-gray-600;
491
+ $kp-color-segmented-segment-fg-unselected-hover: $kp-color-gray-900;
492
+ $kp-color-segmented-segment-fg-disabled: $kp-color-gray-400;
493
+ $kp-color-badge-primary-filled-bg: $kp-color-blue-600;
494
+ $kp-color-badge-primary-filled-fg: $kp-color-white;
495
+ $kp-color-badge-primary-filled-border: $kp-color-blue-600;
496
+ $kp-color-badge-primary-filled-dot: $kp-color-white;
497
+ $kp-color-badge-primary-subtle-bg: $kp-color-blue-50;
498
+ $kp-color-badge-primary-subtle-fg: $kp-color-blue-700;
499
+ $kp-color-badge-primary-subtle-dot: $kp-color-blue-600;
500
+ $kp-color-badge-primary-outline-fg: $kp-color-blue-700;
501
+ $kp-color-badge-primary-outline-border: $kp-color-blue-300;
502
+ $kp-color-badge-primary-outline-dot: $kp-color-blue-600;
503
+ $kp-color-badge-primary-dot-fg: $kp-color-gray-700;
504
+ $kp-color-badge-primary-dot-dot: $kp-color-blue-600;
505
+ $kp-color-badge-danger-filled-bg: $kp-color-red-600;
506
+ $kp-color-badge-danger-filled-fg: $kp-color-white;
507
+ $kp-color-badge-danger-filled-border: $kp-color-red-600;
508
+ $kp-color-badge-danger-filled-dot: $kp-color-white;
509
+ $kp-color-badge-danger-subtle-bg: $kp-color-red-50;
510
+ $kp-color-badge-danger-subtle-fg: $kp-color-red-700;
511
+ $kp-color-badge-danger-subtle-dot: $kp-color-red-600;
512
+ $kp-color-badge-danger-outline-fg: $kp-color-red-700;
513
+ $kp-color-badge-danger-outline-border: $kp-color-red-300;
514
+ $kp-color-badge-danger-outline-dot: $kp-color-red-600;
515
+ $kp-color-badge-danger-dot-fg: $kp-color-gray-700;
516
+ $kp-color-badge-danger-dot-dot: $kp-color-red-600;
517
+ $kp-color-badge-success-filled-bg: $kp-color-green-600;
518
+ $kp-color-badge-success-filled-fg: $kp-color-white;
519
+ $kp-color-badge-success-filled-border: $kp-color-green-600;
520
+ $kp-color-badge-success-filled-dot: $kp-color-white;
521
+ $kp-color-badge-success-subtle-bg: $kp-color-green-50;
522
+ $kp-color-badge-success-subtle-fg: $kp-color-green-700;
523
+ $kp-color-badge-success-subtle-dot: $kp-color-green-600;
524
+ $kp-color-badge-success-outline-fg: $kp-color-green-700;
525
+ $kp-color-badge-success-outline-border: $kp-color-green-300;
526
+ $kp-color-badge-success-outline-dot: $kp-color-green-600;
527
+ $kp-color-badge-success-dot-fg: $kp-color-gray-700;
528
+ $kp-color-badge-success-dot-dot: $kp-color-green-600;
529
+ $kp-color-badge-warning-filled-bg: $kp-color-amber-500;
530
+ $kp-color-badge-warning-filled-fg: $kp-color-gray-900;
531
+ $kp-color-badge-warning-filled-border: $kp-color-amber-500;
532
+ $kp-color-badge-warning-filled-dot: $kp-color-gray-900;
533
+ $kp-color-badge-warning-subtle-bg: $kp-color-amber-50;
534
+ $kp-color-badge-warning-subtle-fg: $kp-color-amber-700;
535
+ $kp-color-badge-warning-subtle-dot: $kp-color-amber-500;
536
+ $kp-color-badge-warning-outline-fg: $kp-color-amber-700;
537
+ $kp-color-badge-warning-outline-border: $kp-color-amber-400;
538
+ $kp-color-badge-warning-outline-dot: $kp-color-amber-500;
539
+ $kp-color-badge-warning-dot-fg: $kp-color-gray-700;
540
+ $kp-color-badge-warning-dot-dot: $kp-color-amber-500;
541
+ $kp-color-badge-info-filled-bg: $kp-color-cyan-600;
542
+ $kp-color-badge-info-filled-fg: $kp-color-white;
543
+ $kp-color-badge-info-filled-border: $kp-color-cyan-600;
544
+ $kp-color-badge-info-filled-dot: $kp-color-white;
545
+ $kp-color-badge-info-subtle-bg: $kp-color-cyan-50;
546
+ $kp-color-badge-info-subtle-fg: $kp-color-cyan-700;
547
+ $kp-color-badge-info-subtle-dot: $kp-color-cyan-600;
548
+ $kp-color-badge-info-outline-fg: $kp-color-cyan-700;
549
+ $kp-color-badge-info-outline-border: $kp-color-cyan-300;
550
+ $kp-color-badge-info-outline-dot: $kp-color-cyan-600;
551
+ $kp-color-badge-info-dot-fg: $kp-color-gray-700;
552
+ $kp-color-badge-info-dot-dot: $kp-color-cyan-600;
553
+ $kp-color-badge-neutral-filled-bg: $kp-color-gray-900;
554
+ $kp-color-badge-neutral-filled-fg: $kp-color-white;
555
+ $kp-color-badge-neutral-filled-border: $kp-color-gray-900;
556
+ $kp-color-badge-neutral-filled-dot: $kp-color-white;
557
+ $kp-color-badge-neutral-subtle-bg: $kp-color-gray-100;
558
+ $kp-color-badge-neutral-subtle-fg: $kp-color-gray-700;
559
+ $kp-color-badge-neutral-subtle-dot: $kp-color-gray-500;
560
+ $kp-color-badge-neutral-outline-fg: $kp-color-gray-700;
561
+ $kp-color-badge-neutral-outline-border: $kp-color-gray-300;
562
+ $kp-color-badge-neutral-outline-dot: $kp-color-gray-500;
563
+ $kp-color-badge-neutral-dot-fg: $kp-color-gray-700;
564
+ $kp-color-badge-neutral-dot-dot: $kp-color-gray-500;
565
+ $kp-color-alert-primary-subtle-bg: $kp-color-blue-50;
566
+ $kp-color-alert-primary-subtle-fg-title: $kp-color-blue-900;
567
+ $kp-color-alert-primary-subtle-fg-desc: $kp-color-blue-800;
568
+ $kp-color-alert-primary-subtle-border: $kp-color-blue-200;
569
+ $kp-color-alert-primary-subtle-icon: $kp-color-blue-600;
570
+ $kp-color-alert-primary-subtle-accent: $kp-color-blue-600;
571
+ $kp-color-alert-primary-solid-bg: $kp-color-blue-600;
572
+ $kp-color-alert-primary-solid-fg-title: $kp-color-white;
573
+ $kp-color-alert-primary-solid-fg-desc: $kp-color-blue-50;
574
+ $kp-color-alert-primary-solid-border: $kp-color-blue-600;
575
+ $kp-color-alert-primary-solid-icon: $kp-color-white;
576
+ $kp-color-alert-primary-solid-accent: $kp-color-white;
577
+ $kp-color-alert-primary-outline-bg: $kp-color-white;
578
+ $kp-color-alert-primary-outline-fg-title: $kp-color-blue-900;
579
+ $kp-color-alert-primary-outline-fg-desc: $kp-color-gray-700;
580
+ $kp-color-alert-primary-outline-border: $kp-color-blue-300;
581
+ $kp-color-alert-primary-outline-icon: $kp-color-blue-600;
582
+ $kp-color-alert-primary-outline-accent: $kp-color-blue-600;
583
+ $kp-color-alert-primary-left-accent-bg: $kp-color-white;
584
+ $kp-color-alert-primary-left-accent-fg-title: $kp-color-gray-900;
585
+ $kp-color-alert-primary-left-accent-fg-desc: $kp-color-gray-700;
586
+ $kp-color-alert-primary-left-accent-border: $kp-color-gray-200;
587
+ $kp-color-alert-primary-left-accent-icon: $kp-color-blue-600;
588
+ $kp-color-alert-primary-left-accent-accent: $kp-color-blue-600;
589
+ $kp-color-alert-danger-subtle-bg: $kp-color-red-50;
590
+ $kp-color-alert-danger-subtle-fg-title: $kp-color-red-900;
591
+ $kp-color-alert-danger-subtle-fg-desc: $kp-color-red-800;
592
+ $kp-color-alert-danger-subtle-border: $kp-color-red-200;
593
+ $kp-color-alert-danger-subtle-icon: $kp-color-red-600;
594
+ $kp-color-alert-danger-subtle-accent: $kp-color-red-600;
595
+ $kp-color-alert-danger-solid-bg: $kp-color-red-600;
596
+ $kp-color-alert-danger-solid-fg-title: $kp-color-white;
597
+ $kp-color-alert-danger-solid-fg-desc: $kp-color-red-50;
598
+ $kp-color-alert-danger-solid-border: $kp-color-red-600;
599
+ $kp-color-alert-danger-solid-icon: $kp-color-white;
600
+ $kp-color-alert-danger-solid-accent: $kp-color-white;
601
+ $kp-color-alert-danger-outline-bg: $kp-color-white;
602
+ $kp-color-alert-danger-outline-fg-title: $kp-color-red-900;
603
+ $kp-color-alert-danger-outline-fg-desc: $kp-color-gray-700;
604
+ $kp-color-alert-danger-outline-border: $kp-color-red-300;
605
+ $kp-color-alert-danger-outline-icon: $kp-color-red-600;
606
+ $kp-color-alert-danger-outline-accent: $kp-color-red-600;
607
+ $kp-color-alert-danger-left-accent-bg: $kp-color-white;
608
+ $kp-color-alert-danger-left-accent-fg-title: $kp-color-gray-900;
609
+ $kp-color-alert-danger-left-accent-fg-desc: $kp-color-gray-700;
610
+ $kp-color-alert-danger-left-accent-border: $kp-color-gray-200;
611
+ $kp-color-alert-danger-left-accent-icon: $kp-color-red-600;
612
+ $kp-color-alert-danger-left-accent-accent: $kp-color-red-600;
613
+ $kp-color-alert-success-subtle-bg: $kp-color-green-50;
614
+ $kp-color-alert-success-subtle-fg-title: $kp-color-green-900;
615
+ $kp-color-alert-success-subtle-fg-desc: $kp-color-green-800;
616
+ $kp-color-alert-success-subtle-border: $kp-color-green-200;
617
+ $kp-color-alert-success-subtle-icon: $kp-color-green-600;
618
+ $kp-color-alert-success-subtle-accent: $kp-color-green-600;
619
+ $kp-color-alert-success-solid-bg: $kp-color-green-600;
620
+ $kp-color-alert-success-solid-fg-title: $kp-color-white;
621
+ $kp-color-alert-success-solid-fg-desc: $kp-color-green-50;
622
+ $kp-color-alert-success-solid-border: $kp-color-green-600;
623
+ $kp-color-alert-success-solid-icon: $kp-color-white;
624
+ $kp-color-alert-success-solid-accent: $kp-color-white;
625
+ $kp-color-alert-success-outline-bg: $kp-color-white;
626
+ $kp-color-alert-success-outline-fg-title: $kp-color-green-900;
627
+ $kp-color-alert-success-outline-fg-desc: $kp-color-gray-700;
628
+ $kp-color-alert-success-outline-border: $kp-color-green-300;
629
+ $kp-color-alert-success-outline-icon: $kp-color-green-600;
630
+ $kp-color-alert-success-outline-accent: $kp-color-green-600;
631
+ $kp-color-alert-success-left-accent-bg: $kp-color-white;
632
+ $kp-color-alert-success-left-accent-fg-title: $kp-color-gray-900;
633
+ $kp-color-alert-success-left-accent-fg-desc: $kp-color-gray-700;
634
+ $kp-color-alert-success-left-accent-border: $kp-color-gray-200;
635
+ $kp-color-alert-success-left-accent-icon: $kp-color-green-600;
636
+ $kp-color-alert-success-left-accent-accent: $kp-color-green-600;
637
+ $kp-color-alert-warning-subtle-bg: $kp-color-amber-50;
638
+ $kp-color-alert-warning-subtle-fg-title: $kp-color-amber-900;
639
+ $kp-color-alert-warning-subtle-fg-desc: $kp-color-amber-800;
640
+ $kp-color-alert-warning-subtle-border: $kp-color-amber-200;
641
+ $kp-color-alert-warning-subtle-icon: $kp-color-amber-600;
642
+ $kp-color-alert-warning-subtle-accent: $kp-color-amber-500;
643
+ $kp-color-alert-warning-solid-bg: $kp-color-amber-500;
644
+ $kp-color-alert-warning-solid-fg-title: $kp-color-gray-900;
645
+ $kp-color-alert-warning-solid-fg-desc: $kp-color-amber-900;
646
+ $kp-color-alert-warning-solid-border: $kp-color-amber-500;
647
+ $kp-color-alert-warning-solid-icon: $kp-color-gray-900;
648
+ $kp-color-alert-warning-solid-accent: $kp-color-gray-900;
649
+ $kp-color-alert-warning-outline-bg: $kp-color-white;
650
+ $kp-color-alert-warning-outline-fg-title: $kp-color-amber-900;
651
+ $kp-color-alert-warning-outline-fg-desc: $kp-color-gray-700;
652
+ $kp-color-alert-warning-outline-border: $kp-color-amber-400;
653
+ $kp-color-alert-warning-outline-icon: $kp-color-amber-600;
654
+ $kp-color-alert-warning-outline-accent: $kp-color-amber-500;
655
+ $kp-color-alert-warning-left-accent-bg: $kp-color-white;
656
+ $kp-color-alert-warning-left-accent-fg-title: $kp-color-gray-900;
657
+ $kp-color-alert-warning-left-accent-fg-desc: $kp-color-gray-700;
658
+ $kp-color-alert-warning-left-accent-border: $kp-color-gray-200;
659
+ $kp-color-alert-warning-left-accent-icon: $kp-color-amber-600;
660
+ $kp-color-alert-warning-left-accent-accent: $kp-color-amber-500;
661
+ $kp-color-alert-info-subtle-bg: $kp-color-cyan-50;
662
+ $kp-color-alert-info-subtle-fg-title: $kp-color-cyan-900;
663
+ $kp-color-alert-info-subtle-fg-desc: $kp-color-cyan-800;
664
+ $kp-color-alert-info-subtle-border: $kp-color-cyan-200;
665
+ $kp-color-alert-info-subtle-icon: $kp-color-cyan-600;
666
+ $kp-color-alert-info-subtle-accent: $kp-color-cyan-600;
667
+ $kp-color-alert-info-solid-bg: $kp-color-cyan-600;
668
+ $kp-color-alert-info-solid-fg-title: $kp-color-white;
669
+ $kp-color-alert-info-solid-fg-desc: $kp-color-cyan-50;
670
+ $kp-color-alert-info-solid-border: $kp-color-cyan-600;
671
+ $kp-color-alert-info-solid-icon: $kp-color-white;
672
+ $kp-color-alert-info-solid-accent: $kp-color-white;
673
+ $kp-color-alert-info-outline-bg: $kp-color-white;
674
+ $kp-color-alert-info-outline-fg-title: $kp-color-cyan-900;
675
+ $kp-color-alert-info-outline-fg-desc: $kp-color-gray-700;
676
+ $kp-color-alert-info-outline-border: $kp-color-cyan-300;
677
+ $kp-color-alert-info-outline-icon: $kp-color-cyan-600;
678
+ $kp-color-alert-info-outline-accent: $kp-color-cyan-600;
679
+ $kp-color-alert-info-left-accent-bg: $kp-color-white;
680
+ $kp-color-alert-info-left-accent-fg-title: $kp-color-gray-900;
681
+ $kp-color-alert-info-left-accent-fg-desc: $kp-color-gray-700;
682
+ $kp-color-alert-info-left-accent-border: $kp-color-gray-200;
683
+ $kp-color-alert-info-left-accent-icon: $kp-color-cyan-600;
684
+ $kp-color-alert-info-left-accent-accent: $kp-color-cyan-600;
685
+ $kp-color-alert-neutral-subtle-bg: $kp-color-gray-50;
686
+ $kp-color-alert-neutral-subtle-fg-title: $kp-color-gray-900;
687
+ $kp-color-alert-neutral-subtle-fg-desc: $kp-color-gray-700;
688
+ $kp-color-alert-neutral-subtle-border: $kp-color-gray-200;
689
+ $kp-color-alert-neutral-subtle-icon: $kp-color-gray-600;
690
+ $kp-color-alert-neutral-subtle-accent: $kp-color-gray-600;
691
+ $kp-color-alert-neutral-solid-bg: $kp-color-gray-900;
692
+ $kp-color-alert-neutral-solid-fg-title: $kp-color-white;
693
+ $kp-color-alert-neutral-solid-fg-desc: $kp-color-gray-300;
694
+ $kp-color-alert-neutral-solid-border: $kp-color-gray-900;
695
+ $kp-color-alert-neutral-solid-icon: $kp-color-white;
696
+ $kp-color-alert-neutral-solid-accent: $kp-color-white;
697
+ $kp-color-alert-neutral-outline-bg: $kp-color-white;
698
+ $kp-color-alert-neutral-outline-fg-title: $kp-color-gray-900;
699
+ $kp-color-alert-neutral-outline-fg-desc: $kp-color-gray-700;
700
+ $kp-color-alert-neutral-outline-border: $kp-color-gray-300;
701
+ $kp-color-alert-neutral-outline-icon: $kp-color-gray-600;
702
+ $kp-color-alert-neutral-outline-accent: $kp-color-gray-600;
703
+ $kp-color-alert-neutral-left-accent-bg: $kp-color-white;
704
+ $kp-color-alert-neutral-left-accent-fg-title: $kp-color-gray-900;
705
+ $kp-color-alert-neutral-left-accent-fg-desc: $kp-color-gray-700;
706
+ $kp-color-alert-neutral-left-accent-border: $kp-color-gray-200;
707
+ $kp-color-alert-neutral-left-accent-icon: $kp-color-gray-600;
708
+ $kp-color-alert-neutral-left-accent-accent: $kp-color-gray-600;
709
+ $kp-color-tooltip-bg: $kp-color-gray-900; // Dark tooltip background
710
+ $kp-color-tooltip-fg: $kp-color-white; // Tooltip label color
711
+ $kp-color-tooltip-shortcut: $kp-color-gray-400; // Keyboard shortcut text color
712
+ $kp-color-tooltip-border: $kp-color-gray-800; // Subtle tooltip border for contrast
713
+ $kp-color-popover-bg: $kp-color-white; // Popover background
714
+ $kp-color-popover-border: $kp-color-gray-200; // Popover border
715
+ $kp-color-popover-fg-title: $kp-color-gray-900; // Popover title
716
+ $kp-color-popover-fg-desc: $kp-color-gray-600; // Popover description
717
+ $kp-color-popover-fg-body: $kp-color-gray-700; // Popover body text
718
+ $kp-color-popover-divider: $kp-color-gray-100; // Divider between header/body/footer
719
+ $kp-color-progress-track: $kp-color-gray-100; // Empty track background
720
+ $kp-color-progress-label: $kp-color-gray-700; // Progress label text
721
+ $kp-color-progress-value: $kp-color-gray-900; // Progress percentage text
722
+ $kp-color-progress-primary-fill: $kp-color-blue-600;
723
+ $kp-color-progress-success-fill: $kp-color-green-600;
724
+ $kp-color-progress-danger-fill: $kp-color-red-600;
725
+ $kp-color-progress-warning-fill: $kp-color-amber-500;
726
+ $kp-color-progress-neutral-fill: $kp-color-gray-700;
727
+ $kp-color-tabs-tab-fg-rest: $kp-color-gray-600;
728
+ $kp-color-tabs-tab-fg-hover: $kp-color-gray-900;
729
+ $kp-color-tabs-tab-fg-selected: $kp-color-blue-600;
730
+ $kp-color-tabs-tab-fg-disabled: $kp-color-gray-300;
731
+ $kp-color-tabs-tab-underline-hover: $kp-color-gray-300;
732
+ $kp-color-tabs-tab-underline-selected: $kp-color-blue-600;
733
+ $kp-color-tabs-tab-icon-rest: $kp-color-gray-500;
734
+ $kp-color-tabs-tab-icon-hover: $kp-color-gray-700;
735
+ $kp-color-tabs-tab-icon-selected: $kp-color-blue-600;
736
+ $kp-color-tabs-tab-icon-disabled: $kp-color-gray-300;
737
+ $kp-color-tabs-track-border: $kp-color-gray-200; // Bottom border under the whole tabs strip
738
+ $kp-color-avatar-bg-default: $kp-color-gray-200;
739
+ $kp-color-avatar-bg-primary: $kp-color-blue-100;
740
+ $kp-color-avatar-bg-success: $kp-color-green-100;
741
+ $kp-color-avatar-bg-warning: $kp-color-amber-100;
742
+ $kp-color-avatar-bg-danger: $kp-color-red-100;
743
+ $kp-color-avatar-bg-info: $kp-color-cyan-100;
744
+ $kp-color-avatar-bg-neutral: $kp-color-gray-900;
745
+ $kp-color-avatar-fg-default: $kp-color-gray-700;
746
+ $kp-color-avatar-fg-primary: $kp-color-blue-700;
747
+ $kp-color-avatar-fg-success: $kp-color-green-700;
748
+ $kp-color-avatar-fg-warning: $kp-color-amber-700;
749
+ $kp-color-avatar-fg-danger: $kp-color-red-700;
750
+ $kp-color-avatar-fg-info: $kp-color-cyan-700;
751
+ $kp-color-avatar-fg-neutral: $kp-color-white;
752
+ $kp-color-avatar-ring: $kp-color-white; // Border ring around avatars in stacks
753
+ $kp-color-avatar-status-online: $kp-color-green-500;
754
+ $kp-color-avatar-status-offline: $kp-color-gray-400;
755
+ $kp-color-avatar-status-busy: $kp-color-red-500;
756
+ $kp-color-avatar-status-away: $kp-color-amber-500;
757
+ $kp-color-avatar-group-count-bg: $kp-color-gray-200;
758
+ $kp-color-avatar-group-count-fg: $kp-color-gray-700;
759
+ $kp-color-search-palette-bg: $kp-color-white;
760
+ $kp-color-search-palette-border: $kp-color-gray-200;
761
+ $kp-color-search-palette-shortcut-bg: $kp-color-gray-100;
762
+ $kp-color-search-palette-shortcut-fg: $kp-color-gray-600;
763
+ $kp-color-search-palette-group-label: $kp-color-gray-500;
764
+ $kp-color-sidebar-bg: $kp-color-white;
765
+ $kp-color-sidebar-bg-dark: $kp-color-gray-900;
766
+ $kp-color-sidebar-border: $kp-color-gray-200;
767
+ $kp-color-sidebar-section-label: $kp-color-gray-500;
768
+ $kp-color-nav-item-bg-hover: $kp-color-gray-100;
769
+ $kp-color-nav-item-bg-active: $kp-color-blue-50;
770
+ $kp-color-nav-item-fg-rest: $kp-color-gray-700;
771
+ $kp-color-nav-item-fg-hover: $kp-color-gray-900;
772
+ $kp-color-nav-item-fg-active: $kp-color-blue-700;
773
+ $kp-color-nav-item-fg-disabled: $kp-color-gray-400;
774
+ $kp-color-nav-item-icon-rest: $kp-color-gray-500;
775
+ $kp-color-nav-item-icon-hover: $kp-color-gray-700;
776
+ $kp-color-nav-item-icon-active: $kp-color-blue-600;
777
+ $kp-color-nav-item-active-indicator: $kp-color-blue-600; // Left accent bar on active nav item
778
+ $kp-color-header-bg: $kp-color-white;
779
+ $kp-color-header-bg-dark: $kp-color-gray-900; // Dark-mode / intentional dark header
780
+ $kp-color-header-border: $kp-color-gray-200;
781
+ $kp-color-header-divider: $kp-color-gray-200;
782
+ $kp-color-header-fg: $kp-color-gray-900;
783
+ $kp-color-header-fg-dark: $kp-color-white;
784
+ $kp-color-header-nav-item-fg-rest: $kp-color-gray-700;
785
+ $kp-color-header-nav-item-fg-hover: $kp-color-gray-900;
786
+ $kp-color-header-nav-item-fg-active: $kp-color-blue-600;
787
+ $kp-color-header-nav-item-bg-hover: $kp-color-gray-50;
788
+ $kp-color-breadcrumbs-item-fg-link-rest: $kp-color-gray-600; // Link item at rest
789
+ $kp-color-breadcrumbs-item-fg-link-hover: $kp-color-gray-900; // Link item on hover
790
+ $kp-color-breadcrumbs-item-fg-current: $kp-color-gray-900; // Current (last) item — non-interactive
791
+ $kp-color-breadcrumbs-item-fg-disabled: $kp-color-gray-400; // Disabled link item
792
+ $kp-color-breadcrumbs-item-icon-link-rest: $kp-color-gray-500;
793
+ $kp-color-breadcrumbs-item-icon-link-hover: $kp-color-gray-700;
794
+ $kp-color-breadcrumbs-item-icon-current: $kp-color-gray-700;
795
+ $kp-color-breadcrumbs-item-icon-disabled: $kp-color-gray-300;
796
+ $kp-color-breadcrumbs-separator: $kp-color-gray-400; // Separator between items (chevron/slash)
797
+ $kp-color-breadcrumbs-separator-dot: $kp-color-blue-600; // Dot separator — accent color, used as a 3×3 shape instead of the middot glyph
798
+ $kp-color-breadcrumbs-ellipsis: $kp-color-gray-600; // Ellipsis (…) color for collapsed middle levels
799
+ $kp-color-pagination-item-bg-hover: $kp-color-blue-50;
800
+ $kp-color-pagination-item-bg-active: $kp-color-blue-100;
801
+ $kp-color-pagination-item-bg-selected: $kp-color-blue-600;
802
+ $kp-color-pagination-item-fg-rest: $kp-color-gray-700;
803
+ $kp-color-pagination-item-fg-hover: $kp-color-blue-700;
804
+ $kp-color-pagination-item-fg-active: $kp-color-blue-700;
805
+ $kp-color-pagination-item-fg-selected: $kp-color-white;
806
+ $kp-color-pagination-item-fg-disabled: $kp-color-gray-300;
807
+ $kp-color-pagination-item-icon-rest: $kp-color-gray-600;
808
+ $kp-color-pagination-item-icon-hover: $kp-color-blue-700;
809
+ $kp-color-pagination-item-icon-active: $kp-color-blue-700;
810
+ $kp-color-pagination-item-icon-selected: $kp-color-white;
811
+ $kp-color-pagination-item-icon-disabled: $kp-color-gray-300;
812
+ $kp-color-pagination-ellipsis: $kp-color-gray-500; // Ellipsis (…) color between page ranges
813
+ $kp-color-pagination-info: $kp-color-gray-600; // 'Showing X of Y' info text + 'Per page' label
814
+ $kp-color-divider-line: $kp-color-gray-200; // Divider line color
815
+ $kp-color-divider-label: $kp-color-gray-500; // Divider center label color
816
+ $kp-color-drawer-resize-handle: $kp-color-gray-300; // Drag handle on bottom/top sheets
817
+ $kp-color-skeleton-bg-base: $kp-color-gray-100;
818
+ $kp-color-skeleton-bg-highlight: $kp-color-gray-200; // Animated shimmer highlight
819
+ $kp-color-slider-track-empty: $kp-color-gray-200;
820
+ $kp-color-slider-track-filled: $kp-color-blue-600;
821
+ $kp-color-slider-thumb-bg: $kp-color-white;
822
+ $kp-color-slider-thumb-border: $kp-color-blue-600;
823
+ $kp-color-slider-thumb-ring-focus: $kp-color-blue-100;
824
+ $kp-color-slider-tick: $kp-color-gray-400; // Step ticks on track
825
+ $kp-color-slider-label: $kp-color-gray-600;
826
+ $kp-color-slider-value: $kp-color-gray-900;
827
+ $kp-color-combobox-highlight: $kp-color-blue-50; // Background behind query-matching substrings in options
828
+ $kp-color-datepicker-panel-bg: $kp-color-white;
829
+ $kp-color-datepicker-panel-border: $kp-color-gray-200;
830
+ $kp-color-datepicker-header-fg: $kp-color-gray-900;
831
+ $kp-color-datepicker-header-nav-fg: $kp-color-gray-600;
832
+ $kp-color-datepicker-weekday: $kp-color-gray-500;
833
+ $kp-color-datepicker-day-bg-hover: $kp-color-gray-100;
834
+ $kp-color-datepicker-day-bg-selected: $kp-color-blue-600;
835
+ $kp-color-datepicker-day-bg-in-range: $kp-color-blue-50;
836
+ $kp-color-datepicker-day-bg-range-edge: $kp-color-blue-600;
837
+ $kp-color-datepicker-day-fg-rest: $kp-color-gray-900;
838
+ $kp-color-datepicker-day-fg-hover: $kp-color-gray-900;
839
+ $kp-color-datepicker-day-fg-selected: $kp-color-white;
840
+ $kp-color-datepicker-day-fg-today: $kp-color-blue-600;
841
+ $kp-color-datepicker-day-fg-in-range: $kp-color-blue-700;
842
+ $kp-color-datepicker-day-fg-range-edge: $kp-color-white;
843
+ $kp-color-datepicker-day-fg-outside: $kp-color-gray-400;
844
+ $kp-color-datepicker-day-fg-disabled: $kp-color-gray-300;
845
+ $kp-color-datepicker-day-today-ring: $kp-color-blue-600; // Ring around today's date
846
+ $kp-color-toast-close: $kp-color-gray-400; // Toast close button icon color
847
+ $kp-color-table-header-bg: $kp-color-gray-50;
848
+ $kp-color-table-header-fg: $kp-color-gray-700;
849
+ $kp-color-table-header-sort-icon: $kp-color-gray-500;
850
+ $kp-color-table-header-sort-active: $kp-color-blue-600;
851
+ $kp-color-table-row-bg-rest: $kp-color-white;
852
+ $kp-color-table-row-bg-hover: $kp-color-gray-50;
853
+ $kp-color-table-row-bg-selected: $kp-color-blue-50;
854
+ $kp-color-table-row-fg: $kp-color-gray-900;
855
+ $kp-color-table-border: $kp-color-gray-200;
856
+ $kp-color-table-border-soft: $kp-color-gray-100;
857
+ $kp-color-tree-node-bg-hover: $kp-color-gray-50;
858
+ $kp-color-tree-node-bg-selected: $kp-color-blue-50;
859
+ $kp-color-tree-node-fg-rest: $kp-color-gray-900;
860
+ $kp-color-tree-node-fg-selected: $kp-color-blue-700;
861
+ $kp-color-tree-node-fg-disabled: $kp-color-gray-400;
862
+ $kp-color-tree-node-icon-rest: $kp-color-gray-600;
863
+ $kp-color-tree-node-icon-selected: $kp-color-blue-600;
864
+ $kp-color-tree-node-chevron: $kp-color-gray-500;
865
+ $kp-color-tree-indent-line: $kp-color-gray-200; // Vertical line showing nesting level
866
+ $kp-color-accordion-trigger-bg-hover: $kp-color-gray-50;
867
+ $kp-color-accordion-trigger-fg-rest: $kp-color-gray-900;
868
+ $kp-color-accordion-trigger-fg-expanded: $kp-color-gray-900;
869
+ $kp-color-accordion-trigger-fg-disabled: $kp-color-gray-400;
870
+ $kp-color-accordion-trigger-icon-rest: $kp-color-gray-500;
871
+ $kp-color-accordion-trigger-icon-expanded: $kp-color-blue-600;
872
+ $kp-color-accordion-content: $kp-color-gray-700;
873
+ $kp-color-accordion-border: $kp-color-gray-200;
874
+ $kp-color-accordion-bg: $kp-color-white;
875
+ $kp-color-empty-state-illustration-bg: $kp-color-gray-100;
876
+ $kp-color-empty-state-illustration-icon: $kp-color-gray-500;
877
+ $kp-color-empty-state-fg-title: $kp-color-gray-900;
878
+ $kp-color-empty-state-fg-description: $kp-color-gray-600;
879
+ $kp-color-card-bg: $kp-color-white;
880
+ $kp-color-card-bg-muted: $kp-color-gray-50; // Alternative muted background
881
+ $kp-color-card-border: $kp-color-gray-200;
882
+ $kp-color-card-fg-title: $kp-color-gray-900;
883
+ $kp-color-card-fg-desc: $kp-color-gray-600;
884
+ $kp-color-card-fg-body: $kp-color-gray-700;
885
+ $kp-color-card-divider: $kp-color-gray-100;
886
+ $kp-color-dialog-panel-bg: $kp-color-white;
887
+ $kp-color-dialog-panel-border: $kp-color-gray-200;
888
+ $kp-color-dialog-fg-title: $kp-color-gray-900; // Dialog title
889
+ $kp-color-dialog-fg-desc: $kp-color-gray-600; // Dialog description (under title) + close icon
890
+ $kp-color-dialog-fg-body: $kp-color-gray-700; // Dialog body copy
891
+ $kp-color-dialog-divider: $kp-color-gray-100; // Optional divider between header/body/footer
892
+ $kp-text-2xs: $kp-font-weight-medium $kp-font-size-2xs/$kp-font-line-height-2xs $kp-font-family-sans; // Micro text — badges, captions, legal
893
+ $kp-text-xs: $kp-font-weight-regular $kp-font-size-xs/$kp-font-line-height-xs $kp-font-family-sans; // Small body — helper text, metadata
894
+ $kp-text-sm: $kp-font-weight-regular $kp-font-size-sm/$kp-font-line-height-sm $kp-font-family-sans; // Default UI body
895
+ $kp-text-md: $kp-font-weight-regular $kp-font-size-md/$kp-font-line-height-md $kp-font-family-sans; // Comfortable body — reading content
896
+ $kp-text-lg: $kp-font-weight-medium $kp-font-size-lg/$kp-font-line-height-lg $kp-font-family-sans; // Section label, small heading
897
+ $kp-text-xl: $kp-font-weight-semibold $kp-font-size-xl/$kp-font-line-height-xl $kp-font-family-sans; // Heading
898
+ $kp-text-2xl: $kp-font-weight-semibold $kp-font-size-2xl/$kp-font-line-height-2xl $kp-font-family-sans; // Large heading, hero