@kupola/kupola 1.9.13 → 1.9.15

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 (11) hide show
  1. package/README.md +132 -0
  2. package/css/dashboard.css +62 -11
  3. package/css/kupola.css +1 -2
  4. package/css/{theme-dark.css → theme.css} +567 -340
  5. package/dist/kupola.css +628 -648
  6. package/dist/kupola.min.css +1 -1
  7. package/package.json +1 -1
  8. package/plugins/vite-plugin-kupola.js +3 -3
  9. package/plugins/webpack-plugin-kupola.js +3 -3
  10. package/scripts/build-css.cjs +1 -2
  11. package/css/theme-light.css +0 -298
package/css/{theme-dark.css → theme.css} RENAMED
@@ -1,341 +1,568 @@
1
- /* ===== Dark Theme (Default) ===== */
2
-
3
- :root {
4
- --bg-base-default: #0C0C0D;
5
- --bg-base-secondary: #1A1B1D;
6
- --bg-base-tertiary: #222427;
7
- --bg-overlay-l1: rgba(255, 255, 255, 0.04);
8
- --bg-overlay-l2: rgba(255, 255, 255, 0.06);
9
- --bg-overlay-l3: rgba(255, 255, 255, 0.08);
10
- --bg-overlay-l4: rgba(255, 255, 255, 0.12);
11
- --bg-menu: #1A1B1D;
12
- --bg-tooltip: #1A1B1D;
13
- --bg-invert: #FFFFFF;
14
- --bg-invert-hover: #F5F5F5;
15
- --bg-invert-active: #E5E5E5;
16
- --bg-invert-disabled: rgba(255, 255, 255, 0.2);
17
- --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
18
- --text-default: #E5E7EB;
19
- --text-default-hover: #FFFFFF;
20
- --text-default-active: #FFFFFF;
21
- --text-secondary: #B8BDCA;
22
- --text-secondary-hover: #E5E7EB;
23
- --text-secondary-active: #E5E7EB;
24
- --text-tertiary: #9CA3AF;
25
- --text-disabled: #8B93A1;
26
- --text-onbrand: #FFFFFF;
27
- --text-onaccent: #FFFFFF;
28
- --icon-default: #E5E7EB;
29
- --icon-default-hover: #FFFFFF;
30
- --icon-default-active: #FFFFFF;
31
- --icon-secondary: #B8BDCA;
32
- --icon-secondary-hover: #E5E7EB;
33
- --icon-secondary-active: #E5E7EB;
34
- --icon-tertiary: #9CA3AF;
35
- --icon-disabled: #8B93A1;
36
- --icon-onbrand: #FFFFFF;
37
- --icon-onaccent: #FFFFFF;
38
- --border-neutral-l1: rgba(255, 255, 255, 0.12);
39
- --border-neutral-l2: rgba(255, 255, 255, 0.18);
40
- --border-neutral-l3: rgba(255, 255, 255, 0.25);
41
- --border-contrast: #0C0C0D;
42
- --bg-brand-popup: rgba(83, 81, 100, 0.15);
43
- --icon-filter: brightness(0) saturate(0) invert(0.9);
44
- }
45
-
46
- [data-theme="dark"] {
47
- --bg-base-default: #0C0C0D;
48
- --bg-base-secondary: #1A1B1D;
49
- --bg-base-tertiary: #222427;
50
- --bg-overlay-l1: rgba(255, 255, 255, 0.04);
51
- --bg-overlay-l2: rgba(255, 255, 255, 0.06);
52
- --bg-overlay-l3: rgba(255, 255, 255, 0.08);
53
- --bg-overlay-l4: rgba(255, 255, 255, 0.12);
54
- --bg-menu: #1A1B1D;
55
- --bg-tooltip: #1A1B1D;
56
- --bg-invert: #FFFFFF;
57
- --bg-invert-hover: #F5F5F5;
58
- --bg-invert-active: #E5E5E5;
59
- --bg-invert-disabled: rgba(255, 255, 255, 0.2);
60
-
61
- --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
62
-
63
- --text-default: #E5E7EB;
64
- --text-default-hover: #FFFFFF;
65
- --text-default-active: #FFFFFF;
66
- --text-secondary: #B8BDCA;
67
- --text-secondary-hover: #E5E7EB;
68
- --text-secondary-active: #E5E7EB;
69
- --text-tertiary: #9CA3AF;
70
- --text-disabled: #8B93A1;
71
- --text-onbrand: #FFFFFF;
72
- --text-onaccent: #FFFFFF;
73
-
74
- --icon-default: #E5E7EB;
75
- --icon-default-hover: #FFFFFF;
76
- --icon-default-active: #FFFFFF;
77
- --icon-secondary: #B8BDCA;
78
- --icon-secondary-hover: #E5E7EB;
79
- --icon-secondary-active: #E5E7EB;
80
- --icon-tertiary: #9CA3AF;
81
- --icon-disabled: #8B93A1;
82
- --icon-onbrand: #FFFFFF;
83
- --icon-onaccent: #FFFFFF;
84
-
85
- --border-neutral-l1: rgba(255, 255, 255, 0.12);
86
- --border-neutral-l2: rgba(255, 255, 255, 0.18);
87
- --border-neutral-l3: rgba(255, 255, 255, 0.25);
88
- --border-contrast: #0C0C0D;
89
-
90
- --bg-brand-popup: rgba(83, 81, 100, 0.15);
91
-
92
- --code-text: #D1D3DB;
93
- --code-doc: #9599A6;
94
- --code-link: #79B8FF;
95
- --code-number: #FF9CA8;
96
- --code-action: #D3ADF7;
97
- --code-instruction: #B37FEB;
98
- --code-function: #FFAD5B;
99
- --code-constant: #61AFEF;
100
- --code-parameter: #98C379;
101
- --code-attribute: #E5C07B;
102
- --code-tag: #E06C75;
103
-
104
- --accent-teal: #32F08C;
105
- --accent-coral: #FF9CA8;
106
- --accent-amber: #FFAD5B;
107
- --accent-lime: #A6EA39;
108
- --accent-cyan: #78F2F2;
109
- --accent-blue: #79B8FF;
110
- --accent-magenta: #FB9DD7;
111
- --accent-violet: #D3ADF7;
112
- --accent-slate: #859EAD;
113
-
114
- --color-background: var(--bg-base-default);
115
- --color-surface: var(--bg-base-secondary);
116
- --color-surface-variant: var(--bg-base-tertiary);
117
- --color-overlay-1: var(--bg-overlay-l1);
118
- --color-overlay-2: var(--bg-overlay-l2);
119
- --color-overlay-3: var(--bg-overlay-l3);
120
- --color-overlay-4: var(--bg-overlay-l4);
121
- --color-card: var(--bg-base-secondary);
122
- --color-tooltip: var(--bg-tooltip);
123
- --color-menu: var(--bg-menu);
124
- --color-foreground: var(--text-default);
125
- --color-foreground-hover: var(--text-default-hover);
126
- --color-on-surface: var(--text-default);
127
- --color-on-surface-variant: var(--text-secondary);
128
- --color-muted-foreground: var(--text-secondary);
129
- --color-disabled-foreground: var(--text-disabled);
130
- --color-on-primary: var(--text-onbrand);
131
- --color-border: var(--border-neutral-l1);
132
- --color-border-strong: var(--border-neutral-l2);
133
- --color-border-stronger: var(--border-neutral-l3);
134
- --color-border-contrast: var(--border-contrast);
135
- --color-outline: var(--border-neutral-l1);
136
-
137
- --status-primary-default: #79B8FF;
138
- --status-primary-hover: #A3CFFF;
139
- --status-primary-active: #4FA3E8;
140
- --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
141
- --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
142
- --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
143
- --status-info-default: #78F2F2;
144
- --status-info-hover: #A5FFFF;
145
- --status-info-active: #4FE5E5;
146
- --status-info-surface-l1: rgba(120, 242, 242, 0.15);
147
- --status-info-surface-l2: rgba(120, 242, 242, 0.22);
148
- --status-info-surface-l3: rgba(120, 242, 242, 0.3);
149
-
150
- --status-success-default: #32F08C;
151
- --status-success-hover: #53F4A2;
152
- --status-success-active: #22D678;
153
- --status-success-surface-l1: rgba(50, 240, 140, 0.12);
154
- --status-success-surface-l2: rgba(50, 240, 140, 0.18);
155
- --status-success-surface-l3: rgba(50, 240, 140, 0.24);
156
-
157
- --status-warning-default: #FFAD5B;
158
- --status-warning-hover: #FFC080;
159
- --status-warning-active: #E0954A;
160
- --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
161
- --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
162
- --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
163
-
164
- --status-error-default: #FF9CA8;
165
- --status-error-hover: #FFB8C0;
166
- --status-error-active: #E07E88;
167
- --status-error-surface-l1: rgba(255, 156, 168, 0.12);
168
- --status-error-surface-l2: rgba(255, 156, 168, 0.18);
169
- --status-error-surface-l3: rgba(255, 156, 168, 0.24);
170
-
171
- --status-alert-default: #FFAD5B;
172
- --status-alert-hover: #FFC080;
173
- --status-alert-active: #E0954A;
174
- --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
175
- --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
176
- --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
177
-
178
- --brand-green-100: #0A3A22;
179
- --brand-green-200: #0F5A32;
180
- --brand-green-300: #147A42;
181
- --brand-green-400: #199A52;
182
- --brand-green-500: #32F08C;
183
- --brand-green-600: #53F4A2;
184
- --brand-green-700: #74F7B8;
185
- --brand-green-800: #95FBCE;
186
- --brand-green-900: #B6FFE4;
187
- --brand-green-1000: #D7FFF9;
188
-
189
- --brand-red-100: #4D0000;
190
- --brand-red-200: #8F0505;
191
- --brand-red-300: #CB1010;
192
- --brand-red-400: #E63737;
193
- --brand-red-500: #FF6464;
194
- --brand-red-600: #FF8080;
195
- --brand-red-700: #FF9999;
196
- --brand-red-800: #FFB3B3;
197
- --brand-red-900: #FFCCCC;
198
- --brand-red-1000: #FFE6E6;
199
-
200
- --brand-yellow-100: #4D3000;
201
- --brand-yellow-200: #8F5C05;
202
- --brand-yellow-300: #CB8710;
203
- --brand-yellow-400: #E6A637;
204
- --brand-yellow-500: #FFD080;
205
- --brand-yellow-600: #FFDA99;
206
- --brand-yellow-700: #FFE3B2;
207
- --brand-yellow-800: #FFECCC;
208
- --brand-yellow-900: #FFF6E5;
209
- --brand-yellow-1000: #FFFDF0;
210
-
211
- --brand-blue-100: #00284D;
212
- --brand-blue-200: #054C8F;
213
- --brand-blue-300: #1071CB;
214
- --brand-blue-400: #3792E6;
215
- --brand-blue-500: #64B4FF;
216
- --brand-blue-600: #80C1FF;
217
- --brand-blue-700: #99CEFF;
218
- --brand-blue-800: #B2DAFF;
219
- --brand-blue-900: #CCE6FF;
220
- --brand-blue-1000: #E5F3FF;
221
-
222
- --brand-purple-100: #09004D;
223
- --brand-purple-200: #15058F;
224
- --brand-purple-300: #2610CB;
225
- --brand-purple-400: #4C37E6;
226
- --brand-purple-500: #7864FF;
227
- --brand-purple-600: #8E80FF;
228
- --brand-purple-700: #A599FF;
229
- --brand-purple-800: #BBB2FF;
230
- --brand-purple-900: #D2CCFF;
231
- --brand-purple-1000: #E8E5FF;
232
-
233
- --brand-gray-100: #030712;
234
- --brand-gray-200: #111827;
235
- --brand-gray-300: #1F2937;
236
- --brand-gray-400: #374151;
237
- --brand-gray-500: #4B5563;
238
- --brand-gray-600: #6B7280;
239
- --brand-gray-700: #9CA3AF;
240
- --brand-gray-800: #D1D5DB;
241
- --brand-gray-900: #E5E7EB;
242
- --brand-gray-1000: #F3F4F6;
243
-
244
- --viz-graph-bg: #1A1B1D;
245
- --viz-graph-line: rgba(255, 255, 255, 0.08);
246
- --viz-series-1: #32F08C;
247
- --viz-series-2: #79B8FF;
248
- --viz-series-3: #D3ADF7;
249
- --viz-series-4: #FFAD5B;
250
- --viz-series-5: #FB9DD7;
251
- --viz-series-6: #78F2F2;
252
-
253
- --border-brand: rgba(83, 81, 100, 0.4);
254
- --border-brand-hover: rgba(83, 81, 100, 0.6);
255
- --border-brand-active: rgba(83, 81, 100, 0.8);
256
-
257
- --bg-brand: #535164;
258
- --bg-brand-hover: #636174;
259
- --bg-brand-disabled: rgba(83, 81, 100, 0.3);
260
- --bg-brand-overlay: rgba(83, 81, 100, 0.12);
261
-
262
- --bg-error-default: #FF9CA8;
263
- --bg-warning-default: #FFAD5B;
264
- --bg-success-default: #32F08C;
265
-
266
- --text-brand: #636174;
267
- --text-brand-hover: #737184;
268
- --text-brand-active: #838194;
269
-
270
- --icon-brand: #636174;
271
- --icon-brand-hover: #737184;
272
- --icon-brand-active: #838194;
273
-
274
- --bg-progress-success: #32F08C;
275
- --bg-progress-warning: #FFAD5B;
276
- --bg-progress-error: #FF9CA8;
277
- --bg-progress-info: #79B8FF;
278
-
279
- --bg-slider-track: rgba(255, 255, 255, 0.06);
280
- --bg-slider-fill: #32F08C;
281
- --bg-slider-thumb: #32F08C;
282
-
283
- --bg-calendar-hover: rgba(255, 255, 255, 0.04);
284
- --bg-calendar-selected: #32F08C;
285
- --text-calendar-selected: #0C0C0D;
286
-
287
- --bg-fileupload-border: rgba(255, 255, 255, 0.12);
288
- --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
289
- --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
290
-
291
- --bg-timeline-line: rgba(255, 255, 255, 0.12);
292
- --bg-timeline-marker: #32F08C;
293
-
294
- --body-xs-font-size: 11px;
295
- --body-xs-line-height: 16px;
296
- --body-sm-font-size: 12px;
297
- --body-sm-line-height: 18px;
298
- --body-base-font-size: 13px;
299
- --body-base-line-height: 20px;
300
- --body-strong-xs-font-weight: 500;
301
- --body-strong-sm-font-weight: 500;
302
- --body-strong-base-font-weight: 500;
303
-
304
- --heading-3xs-font-size: 11px;
305
- --heading-3xs-line-height: 16px;
306
- --heading-2xs-font-size: 12px;
307
- --heading-2xs-line-height: 16px;
308
- --heading-xs-font-size: 13px;
309
- --heading-xs-line-height: 18px;
310
- --heading-sm-font-size: 14px;
311
- --heading-sm-line-height: 20px;
312
- --heading-base-font-size: 16px;
313
- --heading-base-line-height: 22px;
314
- --heading-md-font-size: 18px;
315
- --heading-md-line-height: 28px;
316
- --heading-lg-font-size: 24px;
317
- --heading-lg-line-height: 32px;
318
- --heading-xl-font-size: 28px;
319
- --heading-xl-line-height: 36px;
320
- --heading-2xl-font-size: 32px;
321
- --heading-2xl-line-height: 40px;
322
- --heading-3xl-font-size: 36px;
323
- --heading-3xl-line-height: 44px;
324
- --heading-font-weight: 600;
325
-
326
- --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
327
- --code-editor-font-size: 13px;
328
- --code-editor-font-weight: 450;
329
- --code-editor-line-height: 20px;
330
- --code-editor-letter-spacing: -0.02em;
331
- --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
332
- --code-terminal-font-size: 13px;
333
- --code-terminal-font-weight: 450;
334
- --code-terminal-line-height: 20px;
335
-
336
- --icon-filter: brightness(0) saturate(0) invert(0.9);
337
-
338
- .ds-input--prefix {
339
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239599A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
340
- }
1
+ /* ===== Theme Variables ===== */
2
+
3
+ :root {
4
+ --bg-base-default: #0C0C0D;
5
+ --bg-base-secondary: #1A1B1D;
6
+ --bg-base-tertiary: #222427;
7
+ --bg-overlay-l1: rgba(255, 255, 255, 0.04);
8
+ --bg-overlay-l2: rgba(255, 255, 255, 0.06);
9
+ --bg-overlay-l3: rgba(255, 255, 255, 0.08);
10
+ --bg-overlay-l4: rgba(255, 255, 255, 0.12);
11
+ --bg-menu: #1A1B1D;
12
+ --bg-tooltip: #1A1B1D;
13
+ --bg-invert: #FFFFFF;
14
+ --bg-invert-hover: #F5F5F5;
15
+ --bg-invert-active: #E5E5E5;
16
+ --bg-invert-disabled: rgba(255, 255, 255, 0.2);
17
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
18
+ --text-default: #E5E7EB;
19
+ --text-default-hover: #FFFFFF;
20
+ --text-default-active: #FFFFFF;
21
+ --text-secondary: #B8BDCA;
22
+ --text-secondary-hover: #E5E7EB;
23
+ --text-secondary-active: #E5E7EB;
24
+ --text-tertiary: #9CA3AF;
25
+ --text-disabled: #8B93A1;
26
+ --text-onbrand: #FFFFFF;
27
+ --text-onaccent: #FFFFFF;
28
+ --icon-default: #E5E7EB;
29
+ --icon-default-hover: #FFFFFF;
30
+ --icon-default-active: #FFFFFF;
31
+ --icon-secondary: #B8BDCA;
32
+ --icon-secondary-hover: #E5E7EB;
33
+ --icon-secondary-active: #E5E7EB;
34
+ --icon-tertiary: #9CA3AF;
35
+ --icon-disabled: #8B93A1;
36
+ --icon-onbrand: #FFFFFF;
37
+ --icon-onaccent: #FFFFFF;
38
+ --border-neutral-l1: rgba(255, 255, 255, 0.12);
39
+ --border-neutral-l2: rgba(255, 255, 255, 0.18);
40
+ --border-neutral-l3: rgba(255, 255, 255, 0.25);
41
+ --border-contrast: #0C0C0D;
42
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
43
+ --icon-filter: brightness(0) saturate(0) invert(0.9);
44
+ }
45
+
46
+ [data-theme="dark"] {
47
+ --bg-base-default: #0C0C0D;
48
+ --bg-base-secondary: #1A1B1D;
49
+ --bg-base-tertiary: #222427;
50
+ --bg-overlay-l1: rgba(255, 255, 255, 0.04);
51
+ --bg-overlay-l2: rgba(255, 255, 255, 0.06);
52
+ --bg-overlay-l3: rgba(255, 255, 255, 0.08);
53
+ --bg-overlay-l4: rgba(255, 255, 255, 0.12);
54
+ --bg-menu: #1A1B1D;
55
+ --bg-tooltip: #1A1B1D;
56
+ --bg-invert: #FFFFFF;
57
+ --bg-invert-hover: #F5F5F5;
58
+ --bg-invert-active: #E5E5E5;
59
+ --bg-invert-disabled: rgba(255, 255, 255, 0.2);
60
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
61
+ --text-default: #E5E7EB;
62
+ --text-default-hover: #FFFFFF;
63
+ --text-default-active: #FFFFFF;
64
+ --text-secondary: #B8BDCA;
65
+ --text-secondary-hover: #E5E7EB;
66
+ --text-secondary-active: #E5E7EB;
67
+ --text-tertiary: #9CA3AF;
68
+ --text-disabled: #8B93A1;
69
+ --text-onbrand: #FFFFFF;
70
+ --text-onaccent: #FFFFFF;
71
+ --icon-default: #E5E7EB;
72
+ --icon-default-hover: #FFFFFF;
73
+ --icon-default-active: #FFFFFF;
74
+ --icon-secondary: #B8BDCA;
75
+ --icon-secondary-hover: #E5E7EB;
76
+ --icon-secondary-active: #E5E7EB;
77
+ --icon-tertiary: #9CA3AF;
78
+ --icon-disabled: #8B93A1;
79
+ --icon-onbrand: #FFFFFF;
80
+ --icon-onaccent: #FFFFFF;
81
+ --border-neutral-l1: rgba(255, 255, 255, 0.12);
82
+ --border-neutral-l2: rgba(255, 255, 255, 0.18);
83
+ --border-neutral-l3: rgba(255, 255, 255, 0.25);
84
+ --border-contrast: #0C0C0D;
85
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
86
+ --code-text: #D1D3DB;
87
+ --code-doc: #9599A6;
88
+ --code-link: #79B8FF;
89
+ --code-number: #FF9CA8;
90
+ --code-action: #D3ADF7;
91
+ --code-instruction: #B37FEB;
92
+ --code-function: #FFAD5B;
93
+ --code-constant: #61AFEF;
94
+ --code-parameter: #98C379;
95
+ --code-attribute: #E5C07B;
96
+ --code-tag: #E06C75;
97
+ --accent-teal: #32F08C;
98
+ --accent-coral: #FF9CA8;
99
+ --accent-amber: #FFAD5B;
100
+ --accent-lime: #A6EA39;
101
+ --accent-cyan: #78F2F2;
102
+ --accent-blue: #79B8FF;
103
+ --accent-magenta: #FB9DD7;
104
+ --accent-violet: #D3ADF7;
105
+ --accent-slate: #859EAD;
106
+ --color-background: var(--bg-base-default);
107
+ --color-surface: var(--bg-base-secondary);
108
+ --color-surface-variant: var(--bg-base-tertiary);
109
+ --color-overlay-1: var(--bg-overlay-l1);
110
+ --color-overlay-2: var(--bg-overlay-l2);
111
+ --color-overlay-3: var(--bg-overlay-l3);
112
+ --color-overlay-4: var(--bg-overlay-l4);
113
+ --color-card: var(--bg-base-secondary);
114
+ --color-tooltip: var(--bg-tooltip);
115
+ --color-menu: var(--bg-menu);
116
+ --color-foreground: var(--text-default);
117
+ --color-foreground-hover: var(--text-default-hover);
118
+ --color-on-surface: var(--text-default);
119
+ --color-on-surface-variant: var(--text-secondary);
120
+ --color-muted-foreground: var(--text-secondary);
121
+ --color-disabled-foreground: var(--text-disabled);
122
+ --color-on-primary: var(--text-onbrand);
123
+ --color-border: var(--border-neutral-l1);
124
+ --color-border-strong: var(--border-neutral-l2);
125
+ --color-border-stronger: var(--border-neutral-l3);
126
+ --color-border-contrast: var(--border-contrast);
127
+ --color-outline: var(--border-neutral-l1);
128
+ --status-primary-default: #79B8FF;
129
+ --status-primary-hover: #A3CFFF;
130
+ --status-primary-active: #4FA3E8;
131
+ --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
132
+ --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
133
+ --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
134
+ --status-info-default: #78F2F2;
135
+ --status-info-hover: #A5FFFF;
136
+ --status-info-active: #4FE5E5;
137
+ --status-info-surface-l1: rgba(120, 242, 242, 0.15);
138
+ --status-info-surface-l2: rgba(120, 242, 242, 0.22);
139
+ --status-info-surface-l3: rgba(120, 242, 242, 0.3);
140
+ --status-success-default: #32F08C;
141
+ --status-success-hover: #53F4A2;
142
+ --status-success-active: #22D678;
143
+ --status-success-surface-l1: rgba(50, 240, 140, 0.12);
144
+ --status-success-surface-l2: rgba(50, 240, 140, 0.18);
145
+ --status-success-surface-l3: rgba(50, 240, 140, 0.24);
146
+ --status-warning-default: #FFAD5B;
147
+ --status-warning-hover: #FFC080;
148
+ --status-warning-active: #E0954A;
149
+ --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
150
+ --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
151
+ --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
152
+ --status-error-default: #FF9CA8;
153
+ --status-error-hover: #FFB8C0;
154
+ --status-error-active: #E07E88;
155
+ --status-error-surface-l1: rgba(255, 156, 168, 0.12);
156
+ --status-error-surface-l2: rgba(255, 156, 168, 0.18);
157
+ --status-error-surface-l3: rgba(255, 156, 168, 0.24);
158
+ --status-alert-default: #FFAD5B;
159
+ --status-alert-hover: #FFC080;
160
+ --status-alert-active: #E0954A;
161
+ --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
162
+ --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
163
+ --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
164
+ --brand-green-100: #0A3A22;
165
+ --brand-green-200: #0F5A32;
166
+ --brand-green-300: #147A42;
167
+ --brand-green-400: #199A52;
168
+ --brand-green-500: #32F08C;
169
+ --brand-green-600: #53F4A2;
170
+ --brand-green-700: #74F7B8;
171
+ --brand-green-800: #95FBCE;
172
+ --brand-green-900: #B6FFE4;
173
+ --brand-green-1000: #D7FFF9;
174
+ --brand-red-100: #4D0000;
175
+ --brand-red-200: #8F0505;
176
+ --brand-red-300: #CB1010;
177
+ --brand-red-400: #E63737;
178
+ --brand-red-500: #FF6464;
179
+ --brand-red-600: #FF8080;
180
+ --brand-red-700: #FF9999;
181
+ --brand-red-800: #FFB3B3;
182
+ --brand-red-900: #FFCCCC;
183
+ --brand-red-1000: #FFE6E6;
184
+ --brand-yellow-100: #4D3000;
185
+ --brand-yellow-200: #8F5C05;
186
+ --brand-yellow-300: #CB8710;
187
+ --brand-yellow-400: #E6A637;
188
+ --brand-yellow-500: #FFD080;
189
+ --brand-yellow-600: #FFDA99;
190
+ --brand-yellow-700: #FFE3B2;
191
+ --brand-yellow-800: #FFECCC;
192
+ --brand-yellow-900: #FFF6E5;
193
+ --brand-yellow-1000: #FFFDF0;
194
+ --brand-blue-100: #00284D;
195
+ --brand-blue-200: #054C8F;
196
+ --brand-blue-300: #1071CB;
197
+ --brand-blue-400: #3792E6;
198
+ --brand-blue-500: #64B4FF;
199
+ --brand-blue-600: #80C1FF;
200
+ --brand-blue-700: #99CEFF;
201
+ --brand-blue-800: #B2DAFF;
202
+ --brand-blue-900: #CCE6FF;
203
+ --brand-blue-1000: #E5F3FF;
204
+ --brand-purple-100: #09004D;
205
+ --brand-purple-200: #15058F;
206
+ --brand-purple-300: #2610CB;
207
+ --brand-purple-400: #4C37E6;
208
+ --brand-purple-500: #7864FF;
209
+ --brand-purple-600: #8E80FF;
210
+ --brand-purple-700: #A599FF;
211
+ --brand-purple-800: #BBB2FF;
212
+ --brand-purple-900: #D2CCFF;
213
+ --brand-purple-1000: #E8E5FF;
214
+ --brand-gray-100: #030712;
215
+ --brand-gray-200: #111827;
216
+ --brand-gray-300: #1F2937;
217
+ --brand-gray-400: #374151;
218
+ --brand-gray-500: #4B5563;
219
+ --brand-gray-600: #6B7280;
220
+ --brand-gray-700: #9CA3AF;
221
+ --brand-gray-800: #D1D5DB;
222
+ --brand-gray-900: #E5E7EB;
223
+ --brand-gray-1000: #F3F4F6;
224
+ --viz-graph-bg: #1A1B1D;
225
+ --viz-graph-line: rgba(255, 255, 255, 0.08);
226
+ --viz-series-1: #32F08C;
227
+ --viz-series-2: #79B8FF;
228
+ --viz-series-3: #D3ADF7;
229
+ --viz-series-4: #FFAD5B;
230
+ --viz-series-5: #FB9DD7;
231
+ --viz-series-6: #78F2F2;
232
+ --border-brand: rgba(83, 81, 100, 0.4);
233
+ --border-brand-hover: rgba(83, 81, 100, 0.6);
234
+ --border-brand-active: rgba(83, 81, 100, 0.8);
235
+ --bg-brand: #535164;
236
+ --bg-brand-hover: #636174;
237
+ --bg-brand-disabled: rgba(83, 81, 100, 0.3);
238
+ --bg-brand-overlay: rgba(83, 81, 100, 0.12);
239
+ --bg-error-default: #FF9CA8;
240
+ --bg-warning-default: #FFAD5B;
241
+ --bg-success-default: #32F08C;
242
+ --text-brand: #636174;
243
+ --text-brand-hover: #737184;
244
+ --text-brand-active: #838194;
245
+ --icon-brand: #636174;
246
+ --icon-brand-hover: #737184;
247
+ --icon-brand-active: #838194;
248
+ --bg-progress-success: #32F08C;
249
+ --bg-progress-warning: #FFAD5B;
250
+ --bg-progress-error: #FF9CA8;
251
+ --bg-progress-info: #79B8FF;
252
+ --bg-slider-track: rgba(255, 255, 255, 0.06);
253
+ --bg-slider-fill: #32F08C;
254
+ --bg-slider-thumb: #32F08C;
255
+ --bg-calendar-hover: rgba(255, 255, 255, 0.04);
256
+ --bg-calendar-selected: #32F08C;
257
+ --text-calendar-selected: #0C0C0D;
258
+ --bg-fileupload-border: rgba(255, 255, 255, 0.12);
259
+ --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
260
+ --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
261
+ --bg-timeline-line: rgba(255, 255, 255, 0.12);
262
+ --bg-timeline-marker: #32F08C;
263
+ --body-xs-font-size: 11px;
264
+ --body-xs-line-height: 16px;
265
+ --body-sm-font-size: 12px;
266
+ --body-sm-line-height: 18px;
267
+ --body-base-font-size: 13px;
268
+ --body-base-line-height: 20px;
269
+ --body-strong-xs-font-weight: 500;
270
+ --body-strong-sm-font-weight: 500;
271
+ --body-strong-base-font-weight: 500;
272
+ --heading-3xs-font-size: 11px;
273
+ --heading-3xs-line-height: 16px;
274
+ --heading-2xs-font-size: 12px;
275
+ --heading-2xs-line-height: 16px;
276
+ --heading-xs-font-size: 13px;
277
+ --heading-xs-line-height: 18px;
278
+ --heading-sm-font-size: 14px;
279
+ --heading-sm-line-height: 20px;
280
+ --heading-base-font-size: 16px;
281
+ --heading-base-line-height: 22px;
282
+ --heading-md-font-size: 18px;
283
+ --heading-md-line-height: 28px;
284
+ --heading-lg-font-size: 24px;
285
+ --heading-lg-line-height: 32px;
286
+ --heading-xl-font-size: 28px;
287
+ --heading-xl-line-height: 36px;
288
+ --heading-2xl-font-size: 32px;
289
+ --heading-2xl-line-height: 40px;
290
+ --heading-3xl-font-size: 36px;
291
+ --heading-3xl-line-height: 44px;
292
+ --heading-font-weight: 600;
293
+ --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
294
+ --code-editor-font-size: 13px;
295
+ --code-editor-font-weight: 450;
296
+ --code-editor-line-height: 20px;
297
+ --code-editor-letter-spacing: -0.02em;
298
+ --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
299
+ --code-terminal-font-size: 13px;
300
+ --code-terminal-font-weight: 450;
301
+ --code-terminal-line-height: 20px;
302
+ --icon-filter: brightness(0) saturate(0) invert(0.9);
303
+ .ds-input--prefix {
304
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239599A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
305
+ }
306
+ }
307
+
308
+ [data-theme="light"] {
309
+ --bg-base-default: #FFFFFF;
310
+ --bg-base-secondary: #F5F6F8;
311
+ --bg-base-tertiary: #EDF0F5;
312
+ --bg-overlay-l1: rgba(0, 0, 0, 0.04);
313
+ --bg-overlay-l2: rgba(0, 0, 0, 0.06);
314
+ --bg-overlay-l3: rgba(0, 0, 0, 0.08);
315
+ --bg-overlay-l4: rgba(0, 0, 0, 0.12);
316
+ --bg-menu: #FFFFFF;
317
+ --bg-tooltip: #FFFFFF;
318
+ --bg-invert: #1A1B1D;
319
+ --bg-invert-hover: #222427;
320
+ --bg-invert-active: #3A3E44;
321
+ --bg-invert-disabled: rgba(0, 0, 0, 0.2);
322
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.03);
323
+ --text-default: #0F1117;
324
+ --text-default-hover: #000000;
325
+ --text-default-active: #000000;
326
+ --text-secondary: #4B5563;
327
+ --text-secondary-hover: #374151;
328
+ --text-secondary-active: #374151;
329
+ --text-tertiary: #5B6370;
330
+ --text-disabled: #525A68;
331
+ --text-onbrand: #FFFFFF;
332
+ --text-onaccent: #FFFFFF;
333
+ --icon-default: #0F1117;
334
+ --icon-default-hover: #000000;
335
+ --icon-default-active: #000000;
336
+ --icon-secondary: #4B5563;
337
+ --icon-secondary-hover: #374151;
338
+ --icon-secondary-active: #374151;
339
+ --icon-tertiary: #5B6370;
340
+ --icon-disabled: #525A68;
341
+ --icon-onbrand: #FFFFFF;
342
+ --icon-onaccent: #FFFFFF;
343
+ --border-neutral-l1: rgba(0, 0, 0, 0.12);
344
+ --border-neutral-l2: rgba(0, 0, 0, 0.18);
345
+ --border-neutral-l3: rgba(0, 0, 0, 0.25);
346
+ --border-contrast: #FFFFFF;
347
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
348
+ --code-text: #1A1B1D;
349
+ --code-doc: #9599A6;
350
+ --code-link: #2E69FF;
351
+ --code-number: #CE5D97;
352
+ --code-action: #8B5CF6;
353
+ --code-instruction: #7C3AED;
354
+ --code-function: #EA580C;
355
+ --code-constant: #0EA5E9;
356
+ --code-parameter: #16A34A;
357
+ --code-attribute: #CA8A04;
358
+ --code-tag: #DC2626;
359
+ --accent-teal: #16A34A;
360
+ --accent-coral: #EF4444;
361
+ --accent-amber: #CA8A04;
362
+ --accent-lime: #65A30D;
363
+ --accent-cyan: #0891B2;
364
+ --accent-blue: #2563EB;
365
+ --accent-magenta: #D946EF;
366
+ --accent-violet: #7C3AED;
367
+ --accent-slate: #475569;
368
+ --color-background: var(--bg-base-default);
369
+ --color-surface: var(--bg-base-secondary);
370
+ --color-surface-variant: var(--bg-base-tertiary);
371
+ --color-overlay-1: var(--bg-overlay-l1);
372
+ --color-overlay-2: var(--bg-overlay-l2);
373
+ --color-overlay-3: var(--bg-overlay-l3);
374
+ --color-overlay-4: var(--bg-overlay-l4);
375
+ --color-card: var(--bg-base-secondary);
376
+ --color-tooltip: var(--bg-tooltip);
377
+ --color-menu: var(--bg-menu);
378
+ --color-foreground: var(--text-default);
379
+ --color-foreground-hover: var(--text-default-hover);
380
+ --color-on-surface: var(--text-default);
381
+ --color-on-surface-variant: var(--text-secondary);
382
+ --color-muted-foreground: var(--text-secondary);
383
+ --color-disabled-foreground: var(--text-disabled);
384
+ --color-on-primary: var(--text-onbrand);
385
+ --color-border: var(--border-neutral-l1);
386
+ --color-border-strong: var(--border-neutral-l2);
387
+ --color-border-stronger: var(--border-neutral-l3);
388
+ --color-border-contrast: var(--border-contrast);
389
+ --color-outline: var(--border-neutral-l1);
390
+ --status-primary-default: #2E69FF;
391
+ --status-primary-hover: #255AEA;
392
+ --status-primary-active: #1D4FD9;
393
+ --status-primary-surface-l1: rgba(46, 105, 255, 0.08);
394
+ --status-primary-surface-l2: rgba(46, 105, 255, 0.12);
395
+ --status-primary-surface-l3: rgba(46, 105, 255, 0.16);
396
+ --status-info-default: #33b9c1;
397
+ --status-info-hover: #47c5cc;
398
+ --status-info-active: #269fa6;
399
+ --status-info-surface-l1: rgba(51, 185, 193, 0.1);
400
+ --status-info-surface-l2: rgba(51, 185, 193, 0.15);
401
+ --status-info-surface-l3: rgba(51, 185, 193, 0.2);
402
+ --status-success-default: #16A34A;
403
+ --status-success-hover: #15803D;
404
+ --status-success-active: #166534;
405
+ --status-success-surface-l1: rgba(22, 163, 74, 0.08);
406
+ --status-success-surface-l2: rgba(22, 163, 74, 0.12);
407
+ --status-success-surface-l3: rgba(22, 163, 74, 0.16);
408
+ --status-warning-default: #CA8A04;
409
+ --status-warning-hover: #A16207;
410
+ --status-warning-active: #854D0E;
411
+ --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
412
+ --status-warning-surface-l2: rgba(202, 138, 4, 0.12);
413
+ --status-warning-surface-l3: rgba(202, 138, 4, 0.16);
414
+ --status-error-default: #DC2626;
415
+ --status-error-hover: #B91C1C;
416
+ --status-error-active: #991B1B;
417
+ --status-error-surface-l1: rgba(220, 38, 38, 0.08);
418
+ --status-error-surface-l2: rgba(220, 38, 38, 0.12);
419
+ --status-error-surface-l3: rgba(220, 38, 38, 0.16);
420
+ --status-alert-default: #F97316;
421
+ --status-alert-hover: #EA580C;
422
+ --status-alert-active: #C2410C;
423
+ --status-alert-surface-l1: rgba(249, 115, 22, 0.08);
424
+ --status-alert-surface-l2: rgba(249, 115, 22, 0.12);
425
+ --status-alert-surface-l3: rgba(249, 115, 22, 0.16);
426
+ --brand-green-100: #DCFCE7;
427
+ --brand-green-200: #BBF7D0;
428
+ --brand-green-300: #86EFAC;
429
+ --brand-green-400: #4ADE80;
430
+ --brand-green-500: #22C55E;
431
+ --brand-green-600: #16A34A;
432
+ --brand-green-700: #15803D;
433
+ --brand-green-800: #166534;
434
+ --brand-green-900: #14532D;
435
+ --brand-green-1000: #0D3F23;
436
+ --brand-red-100: #FEE2E2;
437
+ --brand-red-200: #FECACA;
438
+ --brand-red-300: #FCA5A5;
439
+ --brand-red-400: #F87171;
440
+ --brand-red-500: #EF4444;
441
+ --brand-red-600: #DC2626;
442
+ --brand-red-700: #B91C1C;
443
+ --brand-red-800: #991B1B;
444
+ --brand-red-900: #7F1D1D;
445
+ --brand-red-1000: #5C1313;
446
+ --brand-yellow-100: #FEFCE8;
447
+ --brand-yellow-200: #FEF9C3;
448
+ --brand-yellow-300: #FEF08A;
449
+ --brand-yellow-400: #FDE047;
450
+ --brand-yellow-500: #FACC15;
451
+ --brand-yellow-600: #EAB308;
452
+ --brand-yellow-700: #CA8A04;
453
+ --brand-yellow-800: #A16207;
454
+ --brand-yellow-900: #854D0E;
455
+ --brand-yellow-1000: #6B3B09;
456
+ --brand-blue-100: #EFF6FF;
457
+ --brand-blue-200: #DBEAFE;
458
+ --brand-blue-300: #BFDBFE;
459
+ --brand-blue-400: #93C5FD;
460
+ --brand-blue-500: #60A5FA;
461
+ --brand-blue-600: #3B82F6;
462
+ --brand-blue-700: #2563EB;
463
+ --brand-blue-800: #1D4ED8;
464
+ --brand-blue-900: #1E40AF;
465
+ --brand-blue-1000: #1E3A8A;
466
+ --brand-purple-100: #F5F3FF;
467
+ --brand-purple-200: #EDE9FE;
468
+ --brand-purple-300: #DDD6FE;
469
+ --brand-purple-400: #C4B5FD;
470
+ --brand-purple-500: #A78BFA;
471
+ --brand-purple-600: #8B5CF6;
472
+ --brand-purple-700: #7C3AED;
473
+ --brand-purple-800: #6D28D9;
474
+ --brand-purple-900: #5B21B6;
475
+ --brand-purple-1000: #4C1D95;
476
+ --brand-gray-100: #F3F4F6;
477
+ --brand-gray-200: #E5E7EB;
478
+ --brand-gray-300: #D1D5DB;
479
+ --brand-gray-400: #9CA3AF;
480
+ --brand-gray-500: #6B7280;
481
+ --brand-gray-600: #4B5563;
482
+ --brand-gray-700: #374151;
483
+ --brand-gray-800: #1F2937;
484
+ --brand-gray-900: #111827;
485
+ --brand-gray-1000: #030712;
486
+ --viz-graph-bg: #F5F6F8;
487
+ --viz-graph-line: rgba(0, 0, 0, 0.08);
488
+ --viz-series-1: #22C55E;
489
+ --viz-series-2: #2E69FF;
490
+ --viz-series-3: #8B5CF6;
491
+ --viz-series-4: #F97316;
492
+ --viz-series-5: #EC4899;
493
+ --viz-series-6: #06B6D4;
494
+ --border-brand: rgba(83, 81, 100, 0.4);
495
+ --border-brand-hover: rgba(83, 81, 100, 0.6);
496
+ --border-brand-active: rgba(83, 81, 100, 0.8);
497
+ --bg-brand: #535164;
498
+ --bg-brand-hover: #434154;
499
+ --bg-brand-disabled: rgba(83, 81, 100, 0.3);
500
+ --bg-brand-overlay: rgba(83, 81, 100, 0.08);
501
+ --bg-error-default: #EF4444;
502
+ --bg-warning-default: #F59E0B;
503
+ --bg-success-default: #10B981;
504
+ --text-brand: #434154;
505
+ --text-brand-hover: #333144;
506
+ --text-brand-active: #232134;
507
+ --icon-brand: #434154;
508
+ --icon-brand-hover: #333144;
509
+ --icon-brand-active: #232134;
510
+ --bg-progress-success: #16A34A;
511
+ --bg-progress-warning: #CA8A04;
512
+ --bg-progress-error: #DC2626;
513
+ --bg-progress-info: #2E69FF;
514
+ --bg-slider-track: rgba(0, 0, 0, 0.06);
515
+ --bg-slider-fill: #22C55E;
516
+ --bg-slider-thumb: #22C55E;
517
+ --bg-calendar-hover: rgba(0, 0, 0, 0.04);
518
+ --bg-calendar-selected: #22C55E;
519
+ --text-calendar-selected: #FFFFFF;
520
+ --bg-fileupload-border: rgba(0, 0, 0, 0.12);
521
+ --bg-fileupload-hover: rgba(34, 197, 94, 0.08);
522
+ --bg-fileupload-dragging: rgba(34, 197, 94, 0.12);
523
+ --bg-timeline-line: rgba(0, 0, 0, 0.12);
524
+ --bg-timeline-marker: #22C55E;
525
+ --body-xs-font-size: 11px;
526
+ --body-xs-line-height: 16px;
527
+ --body-sm-font-size: 12px;
528
+ --body-sm-line-height: 18px;
529
+ --body-base-font-size: 13px;
530
+ --body-base-line-height: 20px;
531
+ --body-strong-xs-font-weight: 500;
532
+ --body-strong-sm-font-weight: 500;
533
+ --body-strong-base-font-weight: 500;
534
+ --heading-3xs-font-size: 11px;
535
+ --heading-3xs-line-height: 16px;
536
+ --heading-2xs-font-size: 12px;
537
+ --heading-2xs-line-height: 16px;
538
+ --heading-xs-font-size: 13px;
539
+ --heading-xs-line-height: 18px;
540
+ --heading-sm-font-size: 14px;
541
+ --heading-sm-line-height: 20px;
542
+ --heading-base-font-size: 16px;
543
+ --heading-base-line-height: 22px;
544
+ --heading-md-font-size: 18px;
545
+ --heading-md-line-height: 24px;
546
+ --heading-lg-font-size: 20px;
547
+ --heading-lg-line-height: 28px;
548
+ --heading-xl-font-size: 24px;
549
+ --heading-xl-line-height: 32px;
550
+ --heading-2xl-font-size: 28px;
551
+ --heading-2xl-line-height: 36px;
552
+ --heading-3xl-font-size: 32px;
553
+ --heading-3xl-line-height: 40px;
554
+ --heading-font-weight: 600;
555
+ --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
556
+ --code-editor-font-size: 13px;
557
+ --code-editor-font-weight: 450;
558
+ --code-editor-line-height: 20px;
559
+ --code-editor-letter-spacing: -0.02em;
560
+ --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
561
+ --code-terminal-font-size: 13px;
562
+ --code-terminal-font-weight: 450;
563
+ --code-terminal-line-height: 20px;
564
+ --icon-filter: brightness(0) saturate(0) invert(0.4);
565
+ .ds-input--prefix {
566
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
567
+ }
341
568
  }