@mirohq/design-system-themes 1.1.2-dummy.0 → 1.2.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 (9) hide show
  1. package/base.css +179 -3
  2. package/dark.css +184 -8
  3. package/dist/main.js +1591 -39
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +1590 -38
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +5 -2
  8. package/light.css +179 -3
  9. package/package.json +3 -3
package/base.css CHANGED
@@ -9,6 +9,19 @@
9
9
  --colors-background-alpha-neutrals-overlay: #12193E66;
10
10
  --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
11
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
12
+ --colors-background-canvas: var(--colors-gray-50);
13
+ --colors-background-disabled: var(--colors-gray-150);
14
+ --colors-background-elevated: var(--colors-white);
15
+ --colors-background-inverted: var(--colors-gray-950);
16
+ --colors-background-inverted-secondary: var(--colors-gray-800);
17
+ --colors-background-layout: var(--colors-white);
18
+ --colors-background-overlay: var(--colors-alpha-black-400);
19
+ --colors-background-static-dark: var(--colors-gray-850);
20
+ --colors-background-static-dark-subtle: var(--colors-gray-750);
21
+ --colors-background-static-light: var(--colors-white);
22
+ --colors-background-surface: var(--colors-white);
23
+ --colors-background-surface-secondary: var(--colors-gray-100);
24
+ --colors-background-transparent: var(--colors-transparent);
12
25
  --colors-background-danger-prominent: var(--colors-red-500);
13
26
  --colors-background-danger-prominent-active: var(--colors-red-600);
14
27
  --colors-background-danger-prominent-hover: var(--colors-red-550);
@@ -17,6 +30,15 @@
17
30
  --colors-background-danger-subtle-active: var(--colors-red-150);
18
31
  --colors-background-danger-subtle-hover: var(--colors-red-100);
19
32
  --colors-background-danger-subtle-pressed: var(--colors-red-150);
33
+ --colors-background-interactive-danger: var(--colors-red-500);
34
+ --colors-background-interactive-danger-hover: var(--colors-red-550);
35
+ --colors-background-interactive-danger-pressed: var(--colors-red-600);
36
+ --colors-background-interactive-primary: var(--colors-blue-500);
37
+ --colors-background-interactive-primary-hover: var(--colors-blue-550);
38
+ --colors-background-interactive-primary-pressed: var(--colors-blue-600);
39
+ --colors-background-interactive-selected: var(--colors-blue-500);
40
+ --colors-background-interactive-surface-hover: var(--colors-gray-100);
41
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
20
42
  --colors-background-neutrals: var(--colors-white);
21
43
  --colors-background-neutrals-active: var(--colors-gray-150);
22
44
  --colors-background-neutrals-container: var(--colors-white);
@@ -51,6 +73,10 @@
51
73
  --colors-background-primary-subtle-hover: var(--colors-blue-150);
52
74
  --colors-background-primary-subtle-pressed: var(--colors-blue-200);
53
75
  --colors-background-primary-subtle-selected: var(--colors-blue-150);
76
+ --colors-status-background-error: var(--colors-red-50);
77
+ --colors-status-background-info: var(--colors-blue-100);
78
+ --colors-status-background-success: var(--colors-green-50);
79
+ --colors-status-background-warning: var(--colors-yellow-100);
54
80
  --colors-background-success-prominent: var(--colors-green-500);
55
81
  --colors-background-success-prominent-active: var(--colors-green-600);
56
82
  --colors-background-success-prominent-hover: var(--colors-green-550);
@@ -58,6 +84,15 @@
58
84
  --colors-background-success-subtle: var(--colors-green-50);
59
85
  --colors-background-warning-prominent: var(--colors-yellow-500);
60
86
  --colors-background-warning-subtle: var(--colors-yellow-100);
87
+ --colors-border-default: var(--colors-gray-200);
88
+ --colors-border-disabled: var(--colors-gray-150);
89
+ --colors-border-inverted: var(--colors-white);
90
+ --colors-border-inverted-subtle: var(--colors-gray-700);
91
+ --colors-border-static-dark: var(--colors-gray-450);
92
+ --colors-border-static-dark-subtle: var(--colors-gray-750);
93
+ --colors-border-strong: var(--colors-gray-400);
94
+ --colors-border-subtle: var(--colors-gray-150);
95
+ --colors-border-transparent: var(--colors-transparent);
61
96
  --colors-border-danger: var(--colors-red-500);
62
97
  --colors-border-danger-active: var(--colors-red-600);
63
98
  --colors-border-danger-hover: var(--colors-red-550);
@@ -66,13 +101,23 @@
66
101
  --colors-border-focus-error-inner: var(--colors-white);
67
102
  --colors-border-focus-error-middle: var(--colors-blue-400);
68
103
  --colors-border-focus-error-outer: var(--colors-blue-200);
69
- --colors-border-focus-inner: var(--colors-white);
104
+ --colors-border-focus-inner: #FFFFFF;
70
105
  --colors-border-focus-middle: var(--colors-blue-400);
71
106
  --colors-border-focus-outer: var(--colors-blue-200);
72
107
  --colors-border-focus-success-inner: var(--colors-white);
73
108
  --colors-border-focus-success-middle: var(--colors-blue-400);
74
109
  --colors-border-focus-success-outer: var(--colors-blue-200);
75
110
  --colors-focus-keyboard: #2B4DF8;
111
+ --colors-border-interactive-danger: var(--colors-red-500);
112
+ --colors-border-interactive-danger-hover: var(--colors-red-550);
113
+ --colors-border-interactive-danger-pressed: var(--colors-red-600);
114
+ --colors-border-interactive-primary: var(--colors-blue-500);
115
+ --colors-border-interactive-primary-hover: var(--colors-blue-550);
116
+ --colors-border-interactive-primary-pressed: var(--colors-blue-600);
117
+ --colors-border-interactive-secondary: var(--colors-gray-150);
118
+ --colors-border-interactive-secondary-hover: var(--colors-gray-200);
119
+ --colors-border-interactive-secondary-pressed: var(--colors-gray-250);
120
+ --colors-border-interactive-selected: var(--colors-blue-550);
76
121
  --colors-border-neutrals: var(--colors-gray-200);
77
122
  --colors-border-neutrals-active: var(--colors-gray-350);
78
123
  --colors-border-neutrals-controls: var(--colors-gray-450);
@@ -98,6 +143,10 @@
98
143
  --colors-border-primary-pressed: var(--colors-blue-600);
99
144
  --colors-border-primary-selected: var(--colors-blue-550);
100
145
  --colors-border-primary-subtle: var(--colors-blue-250);
146
+ --colors-status-border-error: var(--colors-red-200);
147
+ --colors-status-border-info: var(--colors-blue-250);
148
+ --colors-status-border-success: var(--colors-green-250);
149
+ --colors-status-border-warning: var(--colors-yellow-300);
101
150
  --colors-border-success: var(--colors-green-500);
102
151
  --colors-border-success-active: var(--colors-green-600);
103
152
  --colors-border-success-hover: var(--colors-green-550);
@@ -105,12 +154,46 @@
105
154
  --colors-border-success-subtle: var(--colors-green-250);
106
155
  --colors-border-warning: var(--colors-yellow-500);
107
156
  --colors-border-warning-subtle: var(--colors-yellow-300);
157
+ --colors-button-background-danger: var(--colors-red-500);
158
+ --colors-button-background-danger-hover: var(--colors-red-550);
159
+ --colors-button-background-danger-pressed: var(--colors-red-600);
160
+ --colors-button-background-ghost: var(--colors-transparent);
161
+ --colors-button-background-ghost-hover: var(--colors-gray-150);
162
+ --colors-button-background-ghost-pressed: var(--colors-gray-200);
108
163
  --colors-button-background-primary: var(--colors-blue-500);
109
164
  --colors-button-background-primary-hover: var(--colors-blue-550);
110
165
  --colors-button-background-primary-pressed: var(--colors-blue-600);
111
166
  --colors-button-background-secondary: var(--colors-gray-150);
112
167
  --colors-button-background-secondary-hover: var(--colors-gray-200);
113
168
  --colors-button-background-secondary-pressed: var(--colors-gray-250);
169
+ --colors-button-background-tertiary: var(--colors-transparent);
170
+ --colors-button-background-tertiary-hover: var(--colors-blue-150);
171
+ --colors-button-background-tertiary-pressed: var(--colors-blue-200);
172
+ --colors-button-border-danger: var(--colors-red-500);
173
+ --colors-button-border-danger-hover: var(--colors-red-550);
174
+ --colors-button-border-danger-pressed: var(--colors-red-600);
175
+ --colors-button-border-ghost-hover: var(--colors-transparent);
176
+ --colors-button-border-ghost-pressed: var(--colors-transparent);
177
+ --colors-button-border-primary: var(--colors-blue-500);
178
+ --colors-button-border-primary-hover: var(--colors-blue-550);
179
+ --colors-button-border-primary-pressed: var(--colors-blue-600);
180
+ --colors-button-border-secondary: var(--colors-gray-150);
181
+ --colors-button-border-secondary-hover: var(--colors-gray-200);
182
+ --colors-button-border-secondary-pressed: var(--colors-gray-250);
183
+ --colors-button-border-tertiary: var(--colors-blue-500);
184
+ --colors-button-border-tertiary-hover: var(--colors-blue-550);
185
+ --colors-button-border-tertiary-pressed: var(--colors-blue-600);
186
+ --colors-button-icon-on-danger: var(--colors-white);
187
+ --colors-button-icon-on-primary: var(--colors-white);
188
+ --colors-button-icon-on-secondary: var(--colors-gray-900);
189
+ --colors-button-icon-on-tertiary: var(--colors-blue-500);
190
+ --colors-button-text-on-danger: var(--colors-white);
191
+ --colors-button-text-on-primary: var(--colors-white);
192
+ --colors-button-text-on-secondary: var(--colors-gray-900);
193
+ --colors-button-text-on-tertiary: var(--colors-blue-500);
194
+ --colors-chip-background: var(--colors-gray-100);
195
+ --colors-chip-background-hover: var(--colors-gray-150);
196
+ --colors-chip-text: var(--colors-gray-900);
114
197
  --colors-format-icon-diagram: var(--colors-orange-600);
115
198
  --colors-format-icon-docs: var(--colors-cyan-600);
116
199
  --colors-format-icon-external: var(--colors-teal-600);
@@ -119,14 +202,66 @@
119
202
  --colors-format-icon-slides: var(--colors-coral-600);
120
203
  --colors-format-icon-table: var(--colors-moss-600);
121
204
  --colors-format-icon-timeline: var(--colors-moss-600);
122
- --colors-popup-background-static: var(--colors-gray-900);
123
- --colors-popup-text-static: var(--colors-white);
205
+ --colors-input-background-active: var(--colors-white);
206
+ --colors-input-background-alt-active: var(--colors-gray-100);
207
+ --colors-input-background-alt-default: var(--colors-gray-100);
208
+ --colors-input-background-alt-hover: var(--colors-gray-100);
209
+ --colors-input-background-default: var(--colors-white);
210
+ --colors-input-background-disabled: var(--colors-gray-150);
211
+ --colors-input-background-hover: var(--colors-white);
212
+ --colors-input-border-active: var(--colors-blue-550);
213
+ --colors-input-border-default: var(--colors-gray-200);
214
+ --colors-input-border-disabled: var(--colors-transparent);
215
+ --colors-input-border-error: var(--colors-red-500);
216
+ --colors-input-border-hover: var(--colors-blue-550);
217
+ --colors-input-border-selection-control: var(--colors-gray-450);
218
+ --colors-input-border-success: var(--colors-green-500);
219
+ --colors-notification-background: var(--colors-gray-850);
220
+ --colors-notification-border: var(--colors-gray-450);
221
+ --colors-notification-border-subtle: var(--colors-gray-750);
222
+ --colors-popover-background: var(--colors-gray-900);
223
+ --colors-popover-border: var(--colors-gray-450);
224
+ --colors-scrollbar-background: var(--colors-gray-300);
225
+ --colors-scrollbar-background-hover: var(--colors-gray-350);
226
+ --colors-slider-background: var(--colors-gray-300);
227
+ --colors-slider-notch-background: var(--colors-gray-300);
228
+ --colors-switch-background-default: var(--colors-gray-300);
229
+ --colors-switch-background-hover: var(--colors-gray-350);
230
+ --colors-switch-control-background: var(--colors-white);
124
231
  --colors-tooltip-background: var(--colors-gray-950);
232
+ --colors-tooltip-background-inset: var(--colors-gray-650);
125
233
  --colors-icon-danger: var(--colors-red-500);
126
234
  --colors-icon-danger-active: var(--colors-red-600);
127
235
  --colors-icon-danger-hover: var(--colors-red-550);
128
236
  --colors-icon-danger-inverted: var(--colors-red-50);
129
237
  --colors-icon-danger-pressed: var(--colors-red-600);
238
+ --colors-icon-default: var(--colors-gray-900);
239
+ --colors-icon-disabled: var(--colors-gray-350);
240
+ --colors-icon-inverted: var(--colors-white);
241
+ --colors-icon-inverted-secondary: var(--colors-gray-150);
242
+ --colors-icon-muted: var(--colors-gray-400);
243
+ --colors-icon-on-disabled: var(--colors-gray-350);
244
+ --colors-icon-on-static-dark: var(--colors-gray-50);
245
+ --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
246
+ --colors-icon-placeholder: var(--colors-gray-475);
247
+ --colors-icon-secondary: var(--colors-gray-500);
248
+ --colors-icon-interactive-selected: var(--colors-blue-550);
249
+ --colors-icon-link: var(--colors-blue-500);
250
+ --colors-icon-link-hover: var(--colors-blue-550);
251
+ --colors-icon-link-on-inverted: var(--colors-white);
252
+ --colors-icon-link-on-inverted-hover: var(--colors-gray-50);
253
+ --colors-icon-link-on-inverted-pressed: var(--colors-gray-100);
254
+ --colors-icon-link-on-inverted-secondary: var(--colors-gray-150);
255
+ --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-200);
256
+ --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-250);
257
+ --colors-icon-link-pressed: var(--colors-blue-600);
258
+ --colors-icon-link-secondary: var(--colors-gray-500);
259
+ --colors-icon-link-secondary-hover: var(--colors-gray-550);
260
+ --colors-icon-link-secondary-pressed: var(--colors-gray-600);
261
+ --colors-icon-on-interactive-danger: var(--colors-white);
262
+ --colors-icon-on-interactive-primary: var(--colors-white);
263
+ --colors-icon-on-interactive-secondary: var(--colors-gray-900);
264
+ --colors-icon-on-interactive-selected: var(--colors-blue-550);
130
265
  --colors-icon-neutrals: var(--colors-gray-900);
131
266
  --colors-icon-neutrals-disabled: var(--colors-gray-350);
132
267
  --colors-icon-neutrals-hover: var(--colors-gray-950);
@@ -150,6 +285,13 @@
150
285
  --colors-icon-primary-inverted-hover: var(--colors-blue-100);
151
286
  --colors-icon-primary-pressed: var(--colors-blue-600);
152
287
  --colors-icon-primary-selected: var(--colors-blue-550);
288
+ --colors-status-icon-error: var(--colors-red-500);
289
+ --colors-status-icon-on-error: var(--colors-red-500);
290
+ --colors-status-icon-on-info: var(--colors-blue-500);
291
+ --colors-status-icon-on-success: var(--colors-green-500);
292
+ --colors-status-icon-on-warning: var(--colors-yellow-800);
293
+ --colors-status-icon-success: var(--colors-green-500);
294
+ --colors-status-icon-warning: var(--colors-yellow-700);
153
295
  --colors-icon-success: var(--colors-green-600);
154
296
  --colors-icon-success-active: var(--colors-green-700);
155
297
  --colors-icon-success-hover: var(--colors-green-650);
@@ -163,6 +305,23 @@
163
305
  --colors-text-danger-hover: var(--colors-red-550);
164
306
  --colors-text-danger-inverted: var(--colors-red-50);
165
307
  --colors-text-danger-pressed: var(--colors-red-600);
308
+ --colors-text-interactive-selected: var(--colors-blue-550);
309
+ --colors-text-link: var(--colors-blue-500);
310
+ --colors-text-link-hover: var(--colors-blue-550);
311
+ --colors-text-link-on-inverted: var(--colors-white);
312
+ --colors-text-link-on-inverted-hover: var(--colors-gray-50);
313
+ --colors-text-link-on-inverted-pressed: var(--colors-gray-100);
314
+ --colors-text-link-on-inverted-secondary: var(--colors-gray-150);
315
+ --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-200);
316
+ --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-250);
317
+ --colors-text-link-pressed: var(--colors-blue-600);
318
+ --colors-text-link-secondary: var(--colors-gray-500);
319
+ --colors-text-link-secondary-hover: var(--colors-gray-550);
320
+ --colors-text-link-secondary-pressed: var(--colors-gray-600);
321
+ --colors-text-on-interactive-danger: var(--colors-white);
322
+ --colors-text-on-interactive-primary: var(--colors-white);
323
+ --colors-text-on-interactive-secondary: var(--colors-gray-900);
324
+ --colors-text-on-interactive-selected: var(--colors-blue-550);
166
325
  --colors-text-neutrals: var(--colors-gray-900);
167
326
  --colors-text-neutrals-active: var(--colors-gray-950);
168
327
  --colors-text-neutrals-disabled: var(--colors-gray-350);
@@ -185,11 +344,28 @@
185
344
  --colors-text-primary-inverted-subtle: var(--colors-blue-100);
186
345
  --colors-text-primary-pressed: var(--colors-blue-600);
187
346
  --colors-text-primary-selected: var(--colors-blue-550);
347
+ --colors-status-text-error: var(--colors-red-500);
348
+ --colors-status-text-on-error: var(--colors-gray-900);
349
+ --colors-status-text-on-info: var(--colors-gray-900);
350
+ --colors-status-text-on-success: var(--colors-gray-900);
351
+ --colors-status-text-on-warning: var(--colors-gray-900);
352
+ --colors-status-text-success: var(--colors-green-600);
353
+ --colors-status-text-warning: var(--colors-yellow-800);
188
354
  --colors-text-success: var(--colors-green-600);
189
355
  --colors-text-success-active: var(--colors-green-700);
190
356
  --colors-text-success-hover: var(--colors-green-650);
191
357
  --colors-text-success-inverted: var(--colors-green-50);
192
358
  --colors-text-success-pressed: var(--colors-green-700);
359
+ --colors-text-default: var(--colors-gray-900);
360
+ --colors-text-disabled: var(--colors-gray-350);
361
+ --colors-text-inverted: var(--colors-white);
362
+ --colors-text-inverted-secondary: var(--colors-gray-150);
363
+ --colors-text-muted: var(--colors-gray-400);
364
+ --colors-text-on-disabled: var(--colors-gray-350);
365
+ --colors-text-on-static-dark: var(--colors-gray-50);
366
+ --colors-text-on-static-dark-subtle: var(--colors-gray-300);
367
+ --colors-text-placeholder: var(--colors-gray-475);
368
+ --colors-text-secondary: var(--colors-gray-500);
193
369
  --colors-text-warning: var(--colors-yellow-800);
194
370
  --colors-text-warning-subtle: var(--colors-yellow-600);
195
371
  --colors-coal-background: var(--colors-coal-500);
package/dark.css CHANGED
@@ -9,6 +9,19 @@
9
9
  --colors-background-alpha-neutrals-overlay: #12193E66;
10
10
  --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
11
11
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
12
+ --colors-background-canvas: var(--colors-gray-950);
13
+ --colors-background-disabled: var(--colors-gray-850);
14
+ --colors-background-elevated: var(--colors-gray-850);
15
+ --colors-background-inverted: var(--colors-white);
16
+ --colors-background-inverted-secondary: var(--colors-gray-150);
17
+ --colors-background-layout: var(--colors-gray-850);
18
+ --colors-background-overlay: var(--colors-alpha-black-400);
19
+ --colors-background-static-dark: var(--colors-gray-850);
20
+ --colors-background-static-dark-subtle: var(--colors-gray-750);
21
+ --colors-background-static-light: var(--colors-white);
22
+ --colors-background-surface: var(--colors-gray-950);
23
+ --colors-background-surface-secondary: var(--colors-gray-750);
24
+ --colors-background-transparent: var(--colors-transparent);
12
25
  --colors-background-danger-prominent: var(--colors-red-500);
13
26
  --colors-background-danger-prominent-active: var(--colors-red-400);
14
27
  --colors-background-danger-prominent-hover: var(--colors-red-450);
@@ -17,6 +30,15 @@
17
30
  --colors-background-danger-subtle-active: var(--colors-red-500);
18
31
  --colors-background-danger-subtle-hover: var(--colors-red-550);
19
32
  --colors-background-danger-subtle-pressed: var(--colors-red-500);
33
+ --colors-background-interactive-danger: var(--colors-red-500);
34
+ --colors-background-interactive-danger-hover: var(--colors-red-450);
35
+ --colors-background-interactive-danger-pressed: var(--colors-red-400);
36
+ --colors-background-interactive-primary: var(--colors-blue-500);
37
+ --colors-background-interactive-primary-hover: var(--colors-blue-450);
38
+ --colors-background-interactive-primary-pressed: var(--colors-blue-400);
39
+ --colors-background-interactive-selected: var(--colors-blue-500);
40
+ --colors-background-interactive-surface-hover: var(--colors-gray-900);
41
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
20
42
  --colors-background-neutrals: var(--colors-gray-950);
21
43
  --colors-background-neutrals-active: var(--colors-gray-850);
22
44
  --colors-background-neutrals-container: var(--colors-gray-850);
@@ -45,12 +67,16 @@
45
67
  --colors-background-primary-prominent-active: var(--colors-blue-300);
46
68
  --colors-background-primary-prominent-hover: var(--colors-blue-350);
47
69
  --colors-background-primary-prominent-pressed: var(--colors-blue-300);
48
- --colors-background-primary-prominent-selected: var(--colors-blue-400);
70
+ --colors-background-primary-prominent-selected: var(--colors-blue-500);
49
71
  --colors-background-primary-subtle: var(--colors-blue-900);
50
72
  --colors-background-primary-subtle-active: var(--colors-blue-600);
51
73
  --colors-background-primary-subtle-hover: var(--colors-blue-650);
52
74
  --colors-background-primary-subtle-pressed: var(--colors-blue-600);
53
75
  --colors-background-primary-subtle-selected: var(--colors-blue-700);
76
+ --colors-status-background-error: var(--colors-red-900);
77
+ --colors-status-background-info: var(--colors-blue-900);
78
+ --colors-status-background-success: var(--colors-green-900);
79
+ --colors-status-background-warning: var(--colors-yellow-900);
54
80
  --colors-background-success-prominent: var(--colors-green-500);
55
81
  --colors-background-success-prominent-active: var(--colors-green-400);
56
82
  --colors-background-success-prominent-hover: var(--colors-green-450);
@@ -58,6 +84,15 @@
58
84
  --colors-background-success-subtle: var(--colors-green-900);
59
85
  --colors-background-warning-prominent: var(--colors-yellow-400);
60
86
  --colors-background-warning-subtle: var(--colors-yellow-900);
87
+ --colors-border-default: var(--colors-gray-650);
88
+ --colors-border-disabled: var(--colors-gray-750);
89
+ --colors-border-inverted: var(--colors-gray-700);
90
+ --colors-border-inverted-subtle: var(--colors-gray-600);
91
+ --colors-border-static-dark: var(--colors-gray-450);
92
+ --colors-border-static-dark-subtle: var(--colors-gray-750);
93
+ --colors-border-strong: var(--colors-gray-500);
94
+ --colors-border-subtle: var(--colors-gray-800);
95
+ --colors-border-transparent: var(--colors-transparent);
61
96
  --colors-border-danger: var(--colors-red-400);
62
97
  --colors-border-danger-active: var(--colors-red-300);
63
98
  --colors-border-danger-hover: var(--colors-red-350);
@@ -66,13 +101,23 @@
66
101
  --colors-border-focus-error-inner: var(--colors-gray-950);
67
102
  --colors-border-focus-error-middle: var(--colors-blue-350);
68
103
  --colors-border-focus-error-outer: var(--colors-blue-550);
69
- --colors-border-focus-inner: var(--colors-gray-950);
104
+ --colors-border-focus-inner: #1A1B1E;
70
105
  --colors-border-focus-middle: var(--colors-blue-350);
71
106
  --colors-border-focus-outer: var(--colors-blue-550);
72
107
  --colors-border-focus-success-inner: var(--colors-gray-950);
73
108
  --colors-border-focus-success-middle: var(--colors-blue-350);
74
109
  --colors-border-focus-success-outer: var(--colors-blue-550);
75
110
  --colors-focus-keyboard: #2B4DF8;
111
+ --colors-border-interactive-danger: var(--colors-red-500);
112
+ --colors-border-interactive-danger-hover: var(--colors-red-450);
113
+ --colors-border-interactive-danger-pressed: var(--colors-red-400);
114
+ --colors-border-interactive-primary: var(--colors-blue-500);
115
+ --colors-border-interactive-primary-hover: var(--colors-blue-450);
116
+ --colors-border-interactive-primary-pressed: var(--colors-blue-400);
117
+ --colors-border-interactive-secondary: var(--colors-gray-750);
118
+ --colors-border-interactive-secondary-hover: var(--colors-gray-700);
119
+ --colors-border-interactive-secondary-pressed: var(--colors-gray-650);
120
+ --colors-border-interactive-selected: var(--colors-blue-400);
76
121
  --colors-border-neutrals: var(--colors-gray-650);
77
122
  --colors-border-neutrals-active: var(--colors-gray-350);
78
123
  --colors-border-neutrals-controls: var(--colors-gray-450);
@@ -98,6 +143,10 @@
98
143
  --colors-border-primary-pressed: var(--colors-blue-300);
99
144
  --colors-border-primary-selected: var(--colors-blue-400);
100
145
  --colors-border-primary-subtle: var(--colors-blue-750);
146
+ --colors-status-border-error: var(--colors-red-700);
147
+ --colors-status-border-info: var(--colors-blue-700);
148
+ --colors-status-border-success: var(--colors-green-700);
149
+ --colors-status-border-warning: var(--colors-yellow-700);
101
150
  --colors-border-success: var(--colors-green-500);
102
151
  --colors-border-success-active: var(--colors-green-400);
103
152
  --colors-border-success-hover: var(--colors-green-450);
@@ -105,12 +154,46 @@
105
154
  --colors-border-success-subtle: var(--colors-green-700);
106
155
  --colors-border-warning: var(--colors-yellow-500);
107
156
  --colors-border-warning-subtle: var(--colors-yellow-700);
108
- --colors-button-background-primary: var(--colors-blue-400);
109
- --colors-button-background-primary-hover: var(--colors-blue-350);
110
- --colors-button-background-primary-pressed: var(--colors-blue-300);
157
+ --colors-button-background-danger: var(--colors-red-500);
158
+ --colors-button-background-danger-hover: var(--colors-red-450);
159
+ --colors-button-background-danger-pressed: var(--colors-red-400);
160
+ --colors-button-background-ghost: var(--colors-transparent);
161
+ --colors-button-background-ghost-hover: var(--colors-gray-800);
162
+ --colors-button-background-ghost-pressed: var(--colors-gray-750);
163
+ --colors-button-background-primary: var(--colors-blue-500);
164
+ --colors-button-background-primary-hover: var(--colors-blue-450);
165
+ --colors-button-background-primary-pressed: var(--colors-blue-400);
111
166
  --colors-button-background-secondary: var(--colors-gray-750);
112
167
  --colors-button-background-secondary-hover: var(--colors-gray-700);
113
- --colors-button-background-secondary-pressed: var(--colors-gray-650);
168
+ --colors-button-background-secondary-pressed: var(--colors-gray-700);
169
+ --colors-button-background-tertiary: var(--colors-transparent);
170
+ --colors-button-background-tertiary-hover: var(--colors-blue-650);
171
+ --colors-button-background-tertiary-pressed: var(--colors-blue-600);
172
+ --colors-button-border-danger: var(--colors-red-500);
173
+ --colors-button-border-danger-hover: var(--colors-red-450);
174
+ --colors-button-border-danger-pressed: var(--colors-red-400);
175
+ --colors-button-border-ghost-hover: var(--colors-transparent);
176
+ --colors-button-border-ghost-pressed: var(--colors-transparent);
177
+ --colors-button-border-primary: var(--colors-blue-500);
178
+ --colors-button-border-primary-hover: var(--colors-blue-450);
179
+ --colors-button-border-primary-pressed: var(--colors-blue-400);
180
+ --colors-button-border-secondary: var(--colors-gray-750);
181
+ --colors-button-border-secondary-hover: var(--colors-gray-700);
182
+ --colors-button-border-secondary-pressed: var(--colors-gray-650);
183
+ --colors-button-border-tertiary: var(--colors-blue-500);
184
+ --colors-button-border-tertiary-hover: var(--colors-blue-450);
185
+ --colors-button-border-tertiary-pressed: var(--colors-blue-400);
186
+ --colors-button-icon-on-danger: var(--colors-white);
187
+ --colors-button-icon-on-primary: var(--colors-white);
188
+ --colors-button-icon-on-secondary: var(--colors-gray-50);
189
+ --colors-button-icon-on-tertiary: var(--colors-blue-400);
190
+ --colors-button-text-on-danger: var(--colors-white);
191
+ --colors-button-text-on-primary: var(--colors-white);
192
+ --colors-button-text-on-secondary: var(--colors-gray-50);
193
+ --colors-button-text-on-tertiary: var(--colors-blue-400);
194
+ --colors-chip-background: var(--colors-gray-750);
195
+ --colors-chip-background-hover: var(--colors-gray-700);
196
+ --colors-chip-text: var(--colors-gray-50);
114
197
  --colors-format-icon-diagram: var(--colors-orange-600);
115
198
  --colors-format-icon-docs: var(--colors-cyan-600);
116
199
  --colors-format-icon-external: var(--colors-teal-600);
@@ -119,14 +202,66 @@
119
202
  --colors-format-icon-slides: var(--colors-coral-600);
120
203
  --colors-format-icon-table: var(--colors-moss-600);
121
204
  --colors-format-icon-timeline: var(--colors-moss-600);
122
- --colors-popup-background-static: var(--colors-gray-800);
123
- --colors-popup-text-static: var(--colors-white);
205
+ --colors-input-background-active: var(--colors-gray-950);
206
+ --colors-input-background-alt-active: var(--colors-gray-750);
207
+ --colors-input-background-alt-default: var(--colors-gray-750);
208
+ --colors-input-background-alt-hover: var(--colors-gray-750);
209
+ --colors-input-background-default: var(--colors-gray-950);
210
+ --colors-input-background-disabled: var(--colors-gray-850);
211
+ --colors-input-background-hover: var(--colors-gray-950);
212
+ --colors-input-border-active: var(--colors-blue-350);
213
+ --colors-input-border-default: var(--colors-gray-650);
214
+ --colors-input-border-disabled: var(--colors-transparent);
215
+ --colors-input-border-error: var(--colors-red-400);
216
+ --colors-input-border-hover: var(--colors-blue-350);
217
+ --colors-input-border-selection-control: var(--colors-gray-450);
218
+ --colors-input-border-success: var(--colors-green-400);
219
+ --colors-notification-background: var(--colors-gray-150);
220
+ --colors-notification-border: var(--colors-gray-450);
221
+ --colors-notification-border-subtle: var(--colors-gray-300);
222
+ --colors-popover-background: var(--colors-gray-800);
223
+ --colors-popover-border: var(--colors-gray-450);
224
+ --colors-scrollbar-background: var(--colors-gray-700);
225
+ --colors-scrollbar-background-hover: var(--colors-gray-650);
226
+ --colors-slider-background: var(--colors-gray-700);
227
+ --colors-slider-notch-background: var(--colors-gray-700);
228
+ --colors-switch-background-default: var(--colors-gray-700);
229
+ --colors-switch-background-hover: var(--colors-gray-650);
230
+ --colors-switch-control-background: var(--colors-gray-950);
124
231
  --colors-tooltip-background: var(--colors-gray-650);
232
+ --colors-tooltip-background-inset: var(--colors-gray-650);
125
233
  --colors-icon-danger: var(--colors-red-400);
126
234
  --colors-icon-danger-active: var(--colors-red-300);
127
235
  --colors-icon-danger-hover: var(--colors-red-350);
128
236
  --colors-icon-danger-inverted: var(--colors-red-900);
129
237
  --colors-icon-danger-pressed: var(--colors-red-300);
238
+ --colors-icon-default: var(--colors-gray-50);
239
+ --colors-icon-disabled: var(--colors-gray-450);
240
+ --colors-icon-inverted: var(--colors-gray-900);
241
+ --colors-icon-inverted-secondary: var(--colors-gray-700);
242
+ --colors-icon-muted: var(--colors-gray-400);
243
+ --colors-icon-on-disabled: var(--colors-gray-450);
244
+ --colors-icon-on-static-dark: var(--colors-gray-50);
245
+ --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
246
+ --colors-icon-placeholder: var(--colors-gray-450);
247
+ --colors-icon-secondary: var(--colors-gray-300);
248
+ --colors-icon-interactive-selected: var(--colors-blue-400);
249
+ --colors-icon-link: var(--colors-blue-400);
250
+ --colors-icon-link-hover: var(--colors-blue-350);
251
+ --colors-icon-link-on-inverted: var(--colors-gray-900);
252
+ --colors-icon-link-on-inverted-hover: var(--colors-gray-850);
253
+ --colors-icon-link-on-inverted-pressed: var(--colors-gray-800);
254
+ --colors-icon-link-on-inverted-secondary: var(--colors-gray-700);
255
+ --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-650);
256
+ --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-600);
257
+ --colors-icon-link-pressed: var(--colors-blue-300);
258
+ --colors-icon-link-secondary: var(--colors-gray-300);
259
+ --colors-icon-link-secondary-hover: var(--colors-gray-250);
260
+ --colors-icon-link-secondary-pressed: var(--colors-gray-200);
261
+ --colors-icon-on-interactive-danger: var(--colors-white);
262
+ --colors-icon-on-interactive-primary: var(--colors-white);
263
+ --colors-icon-on-interactive-secondary: var(--colors-gray-50);
264
+ --colors-icon-on-interactive-selected: var(--colors-blue-400);
130
265
  --colors-icon-neutrals: var(--colors-gray-50);
131
266
  --colors-icon-neutrals-disabled: var(--colors-gray-450);
132
267
  --colors-icon-neutrals-hover: var(--colors-gray-100);
@@ -150,6 +285,13 @@
150
285
  --colors-icon-primary-inverted-hover: var(--colors-blue-850);
151
286
  --colors-icon-primary-pressed: var(--colors-blue-300);
152
287
  --colors-icon-primary-selected: var(--colors-blue-400);
288
+ --colors-status-icon-error: var(--colors-red-400);
289
+ --colors-status-icon-on-error: var(--colors-red-400);
290
+ --colors-status-icon-on-info: var(--colors-blue-400);
291
+ --colors-status-icon-on-success: var(--colors-green-400);
292
+ --colors-status-icon-on-warning: var(--colors-yellow-200);
293
+ --colors-status-icon-success: var(--colors-green-400);
294
+ --colors-status-icon-warning: var(--colors-yellow-200);
153
295
  --colors-icon-success: var(--colors-green-400);
154
296
  --colors-icon-success-active: var(--colors-green-300);
155
297
  --colors-icon-success-hover: var(--colors-green-350);
@@ -163,6 +305,23 @@
163
305
  --colors-text-danger-hover: var(--colors-red-350);
164
306
  --colors-text-danger-inverted: var(--colors-red-900);
165
307
  --colors-text-danger-pressed: var(--colors-red-300);
308
+ --colors-text-interactive-selected: var(--colors-blue-400);
309
+ --colors-text-link: var(--colors-blue-400);
310
+ --colors-text-link-hover: var(--colors-blue-350);
311
+ --colors-text-link-on-inverted: var(--colors-gray-900);
312
+ --colors-text-link-on-inverted-hover: var(--colors-gray-850);
313
+ --colors-text-link-on-inverted-pressed: var(--colors-gray-800);
314
+ --colors-text-link-on-inverted-secondary: var(--colors-gray-700);
315
+ --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-650);
316
+ --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-600);
317
+ --colors-text-link-pressed: var(--colors-blue-300);
318
+ --colors-text-link-secondary: var(--colors-gray-300);
319
+ --colors-text-link-secondary-hover: var(--colors-gray-250);
320
+ --colors-text-link-secondary-pressed: var(--colors-gray-200);
321
+ --colors-text-on-interactive-danger: var(--colors-white);
322
+ --colors-text-on-interactive-primary: var(--colors-white);
323
+ --colors-text-on-interactive-secondary: var(--colors-gray-50);
324
+ --colors-text-on-interactive-selected: var(--colors-blue-400);
166
325
  --colors-text-neutrals: var(--colors-gray-50);
167
326
  --colors-text-neutrals-active: var(--colors-gray-150);
168
327
  --colors-text-neutrals-disabled: var(--colors-gray-450);
@@ -185,11 +344,28 @@
185
344
  --colors-text-primary-inverted-subtle: var(--colors-blue-700);
186
345
  --colors-text-primary-pressed: var(--colors-blue-300);
187
346
  --colors-text-primary-selected: var(--colors-blue-400);
347
+ --colors-status-text-error: var(--colors-red-400);
348
+ --colors-status-text-on-error: var(--colors-gray-50);
349
+ --colors-status-text-on-info: var(--colors-gray-50);
350
+ --colors-status-text-on-success: var(--colors-gray-50);
351
+ --colors-status-text-on-warning: var(--colors-gray-50);
352
+ --colors-status-text-success: var(--colors-green-400);
353
+ --colors-status-text-warning: var(--colors-yellow-200);
188
354
  --colors-text-success: var(--colors-green-400);
189
355
  --colors-text-success-active: var(--colors-green-300);
190
356
  --colors-text-success-hover: var(--colors-green-350);
191
357
  --colors-text-success-inverted: var(--colors-green-900);
192
358
  --colors-text-success-pressed: var(--colors-green-300);
359
+ --colors-text-default: var(--colors-gray-50);
360
+ --colors-text-disabled: var(--colors-gray-450);
361
+ --colors-text-inverted: var(--colors-gray-900);
362
+ --colors-text-inverted-secondary: var(--colors-gray-700);
363
+ --colors-text-muted: var(--colors-gray-400);
364
+ --colors-text-on-disabled: var(--colors-gray-450);
365
+ --colors-text-on-static-dark: var(--colors-gray-50);
366
+ --colors-text-on-static-dark-subtle: var(--colors-gray-300);
367
+ --colors-text-placeholder: var(--colors-gray-450);
368
+ --colors-text-secondary: var(--colors-gray-300);
193
369
  --colors-text-warning: var(--colors-yellow-200);
194
370
  --colors-text-warning-subtle: var(--colors-yellow-300);
195
371
  --colors-coal-background: var(--colors-coal-500);