@mirohq/design-system-themes 1.3.3 → 1.3.5

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 (12) hide show
  1. package/base.css +32 -26
  2. package/dark.css +35 -29
  3. package/dist/main.js +115 -107
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +115 -107
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +32 -26
  9. package/metadata.json +1103 -0
  10. package/new-dark.css +36 -26
  11. package/new-light.css +36 -26
  12. package/package.json +6 -4
package/base.css CHANGED
@@ -92,6 +92,8 @@
92
92
  --colors-border-disabled: var(--colors-gray-150);
93
93
  --colors-border-inverted: var(--colors-white);
94
94
  --colors-border-inverted-subtle: var(--colors-gray-700);
95
+ --colors-border-option: var(--colors-gray-450);
96
+ --colors-border-option-hover: var(--colors-blue-550);
95
97
  --colors-border-static-dark: var(--colors-gray-450);
96
98
  --colors-border-static-dark-subtle: var(--colors-gray-750);
97
99
  --colors-border-strong: var(--colors-gray-400);
@@ -213,12 +215,11 @@
213
215
  --colors-input-background-default: var(--colors-white);
214
216
  --colors-input-background-disabled: var(--colors-gray-150);
215
217
  --colors-input-background-hover: var(--colors-white);
216
- --colors-input-border-active: var(--colors-blue-550);
217
218
  --colors-input-border-default: var(--colors-gray-200);
218
219
  --colors-input-border-disabled: var(--colors-transparent);
219
220
  --colors-input-border-error: var(--colors-red-500);
221
+ --colors-input-border-focused: var(--colors-blue-550);
220
222
  --colors-input-border-hover: var(--colors-blue-550);
221
- --colors-input-border-selection-control: var(--colors-gray-450);
222
223
  --colors-input-border-success: var(--colors-green-500);
223
224
  --colors-notification-background: var(--colors-gray-850);
224
225
  --colors-notification-border: var(--colors-gray-450);
@@ -228,6 +229,7 @@
228
229
  --colors-scrollbar-background: var(--colors-gray-300);
229
230
  --colors-scrollbar-background-hover: var(--colors-gray-350);
230
231
  --colors-slider-background: var(--colors-gray-300);
232
+ --colors-slider-control-background: var(--colors-white);
231
233
  --colors-slider-notch-background: var(--colors-gray-300);
232
234
  --colors-switch-background-default: var(--colors-gray-300);
233
235
  --colors-switch-background-hover: var(--colors-gray-350);
@@ -249,19 +251,21 @@
249
251
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
252
  --colors-icon-placeholder: var(--colors-gray-475);
251
253
  --colors-icon-secondary: var(--colors-gray-500);
254
+ --colors-icon-interactive-on-inverted: var(--colors-white);
255
+ --colors-icon-interactive-on-inverted-hover: var(--colors-gray-50);
256
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
257
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
258
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
259
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
260
+ --colors-gray-250
261
+ );
262
+ --colors-icon-interactive-primary: var(--colors-blue-500);
263
+ --colors-icon-interactive-primary-hover: var(--colors-blue-550);
264
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
265
+ --colors-icon-interactive-secondary: var(--colors-gray-500);
266
+ --colors-icon-interactive-secondary-hover: var(--colors-gray-550);
267
+ --colors-icon-interactive-secondary-pressed: var(--colors-gray-600);
252
268
  --colors-icon-interactive-selected: var(--colors-blue-550);
253
- --colors-icon-link: var(--colors-blue-500);
254
- --colors-icon-link-hover: var(--colors-blue-550);
255
- --colors-icon-link-on-inverted: var(--colors-white);
256
- --colors-icon-link-on-inverted-hover: var(--colors-gray-50);
257
- --colors-icon-link-on-inverted-pressed: var(--colors-gray-100);
258
- --colors-icon-link-on-inverted-secondary: var(--colors-gray-150);
259
- --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-200);
260
- --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-250);
261
- --colors-icon-link-pressed: var(--colors-blue-600);
262
- --colors-icon-link-secondary: var(--colors-gray-500);
263
- --colors-icon-link-secondary-hover: var(--colors-gray-550);
264
- --colors-icon-link-secondary-pressed: var(--colors-gray-600);
265
269
  --colors-icon-on-interactive-danger: var(--colors-white);
266
270
  --colors-icon-on-interactive-primary: var(--colors-white);
267
271
  --colors-icon-on-interactive-secondary: var(--colors-gray-900);
@@ -309,19 +313,21 @@
309
313
  --colors-text-danger-hover: var(--colors-red-550);
310
314
  --colors-text-danger-inverted: var(--colors-red-50);
311
315
  --colors-text-danger-pressed: var(--colors-red-600);
316
+ --colors-text-interactive-on-inverted: var(--colors-white);
317
+ --colors-text-interactive-on-inverted-hover: var(--colors-gray-50);
318
+ --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
319
+ --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
320
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
321
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
322
+ --colors-gray-250
323
+ );
324
+ --colors-text-interactive-primary: var(--colors-blue-500);
325
+ --colors-text-interactive-primary-hover: var(--colors-blue-550);
326
+ --colors-text-interactive-primary-pressed: var(--colors-blue-600);
327
+ --colors-text-interactive-secondary: var(--colors-gray-500);
328
+ --colors-text-interactive-secondary-hover: var(--colors-gray-550);
329
+ --colors-text-interactive-secondary-pressed: var(--colors-gray-600);
312
330
  --colors-text-interactive-selected: var(--colors-blue-550);
313
- --colors-text-link: var(--colors-blue-500);
314
- --colors-text-link-hover: var(--colors-blue-550);
315
- --colors-text-link-on-inverted: var(--colors-white);
316
- --colors-text-link-on-inverted-hover: var(--colors-gray-50);
317
- --colors-text-link-on-inverted-pressed: var(--colors-gray-100);
318
- --colors-text-link-on-inverted-secondary: var(--colors-gray-150);
319
- --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-200);
320
- --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-250);
321
- --colors-text-link-pressed: var(--colors-blue-600);
322
- --colors-text-link-secondary: var(--colors-gray-500);
323
- --colors-text-link-secondary-hover: var(--colors-gray-550);
324
- --colors-text-link-secondary-pressed: var(--colors-gray-600);
325
331
  --colors-text-on-interactive-danger: var(--colors-white);
326
332
  --colors-text-on-interactive-primary: var(--colors-white);
327
333
  --colors-text-on-interactive-secondary: var(--colors-gray-900);
package/dark.css CHANGED
@@ -29,9 +29,9 @@
29
29
  --colors-background-danger-prominent-hover: var(--colors-red-450);
30
30
  --colors-background-danger-prominent-pressed: var(--colors-red-400);
31
31
  --colors-background-danger-subtle: var(--colors-red-900);
32
- --colors-background-danger-subtle-active: var(--colors-red-500);
33
- --colors-background-danger-subtle-hover: var(--colors-red-550);
34
- --colors-background-danger-subtle-pressed: var(--colors-red-500);
32
+ --colors-background-danger-subtle-active: var(--colors-red-900);
33
+ --colors-background-danger-subtle-hover: var(--colors-red-800);
34
+ --colors-background-danger-subtle-pressed: var(--colors-red-750);
35
35
  --colors-background-interactive-danger: var(--colors-red-500);
36
36
  --colors-background-interactive-danger-hover: var(--colors-red-450);
37
37
  --colors-background-interactive-danger-pressed: var(--colors-red-400);
@@ -92,6 +92,8 @@
92
92
  --colors-border-disabled: var(--colors-gray-750);
93
93
  --colors-border-inverted: var(--colors-gray-700);
94
94
  --colors-border-inverted-subtle: var(--colors-gray-600);
95
+ --colors-border-option: var(--colors-gray-450);
96
+ --colors-border-option-hover: var(--colors-blue-450);
95
97
  --colors-border-static-dark: var(--colors-gray-450);
96
98
  --colors-border-static-dark-subtle: var(--colors-gray-750);
97
99
  --colors-border-strong: var(--colors-gray-500);
@@ -213,12 +215,11 @@
213
215
  --colors-input-background-default: var(--colors-gray-950);
214
216
  --colors-input-background-disabled: var(--colors-gray-850);
215
217
  --colors-input-background-hover: var(--colors-gray-950);
216
- --colors-input-border-active: var(--colors-blue-350);
217
218
  --colors-input-border-default: var(--colors-gray-650);
218
219
  --colors-input-border-disabled: var(--colors-transparent);
219
220
  --colors-input-border-error: var(--colors-red-400);
221
+ --colors-input-border-focused: var(--colors-blue-350);
220
222
  --colors-input-border-hover: var(--colors-blue-350);
221
- --colors-input-border-selection-control: var(--colors-gray-450);
222
223
  --colors-input-border-success: var(--colors-green-400);
223
224
  --colors-notification-background: var(--colors-gray-150);
224
225
  --colors-notification-border: var(--colors-gray-450);
@@ -228,6 +229,7 @@
228
229
  --colors-scrollbar-background: var(--colors-gray-700);
229
230
  --colors-scrollbar-background-hover: var(--colors-gray-650);
230
231
  --colors-slider-background: var(--colors-gray-700);
232
+ --colors-slider-control-background: var(--colors-gray-950);
231
233
  --colors-slider-notch-background: var(--colors-gray-700);
232
234
  --colors-switch-background-default: var(--colors-gray-700);
233
235
  --colors-switch-background-hover: var(--colors-gray-650);
@@ -249,19 +251,21 @@
249
251
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
252
  --colors-icon-placeholder: var(--colors-gray-450);
251
253
  --colors-icon-secondary: var(--colors-gray-300);
254
+ --colors-icon-interactive-on-inverted: var(--colors-gray-900);
255
+ --colors-icon-interactive-on-inverted-hover: var(--colors-gray-850);
256
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
257
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
258
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
259
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
260
+ --colors-gray-600
261
+ );
262
+ --colors-icon-interactive-primary: var(--colors-blue-400);
263
+ --colors-icon-interactive-primary-hover: var(--colors-blue-350);
264
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
265
+ --colors-icon-interactive-secondary: var(--colors-gray-300);
266
+ --colors-icon-interactive-secondary-hover: var(--colors-gray-250);
267
+ --colors-icon-interactive-secondary-pressed: var(--colors-gray-200);
252
268
  --colors-icon-interactive-selected: var(--colors-blue-400);
253
- --colors-icon-link: var(--colors-blue-400);
254
- --colors-icon-link-hover: var(--colors-blue-350);
255
- --colors-icon-link-on-inverted: var(--colors-gray-900);
256
- --colors-icon-link-on-inverted-hover: var(--colors-gray-850);
257
- --colors-icon-link-on-inverted-pressed: var(--colors-gray-800);
258
- --colors-icon-link-on-inverted-secondary: var(--colors-gray-700);
259
- --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-650);
260
- --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-600);
261
- --colors-icon-link-pressed: var(--colors-blue-300);
262
- --colors-icon-link-secondary: var(--colors-gray-300);
263
- --colors-icon-link-secondary-hover: var(--colors-gray-250);
264
- --colors-icon-link-secondary-pressed: var(--colors-gray-200);
265
269
  --colors-icon-on-interactive-danger: var(--colors-white);
266
270
  --colors-icon-on-interactive-primary: var(--colors-white);
267
271
  --colors-icon-on-interactive-secondary: var(--colors-gray-50);
@@ -309,19 +313,21 @@
309
313
  --colors-text-danger-hover: var(--colors-red-350);
310
314
  --colors-text-danger-inverted: var(--colors-red-900);
311
315
  --colors-text-danger-pressed: var(--colors-red-300);
316
+ --colors-text-interactive-on-inverted: var(--colors-gray-900);
317
+ --colors-text-interactive-on-inverted-hover: var(--colors-gray-850);
318
+ --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
319
+ --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
320
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
321
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
322
+ --colors-gray-600
323
+ );
324
+ --colors-text-interactive-primary: var(--colors-blue-400);
325
+ --colors-text-interactive-primary-hover: var(--colors-blue-350);
326
+ --colors-text-interactive-primary-pressed: var(--colors-blue-300);
327
+ --colors-text-interactive-secondary: var(--colors-gray-300);
328
+ --colors-text-interactive-secondary-hover: var(--colors-gray-250);
329
+ --colors-text-interactive-secondary-pressed: var(--colors-gray-200);
312
330
  --colors-text-interactive-selected: var(--colors-blue-400);
313
- --colors-text-link: var(--colors-blue-400);
314
- --colors-text-link-hover: var(--colors-blue-350);
315
- --colors-text-link-on-inverted: var(--colors-gray-900);
316
- --colors-text-link-on-inverted-hover: var(--colors-gray-850);
317
- --colors-text-link-on-inverted-pressed: var(--colors-gray-800);
318
- --colors-text-link-on-inverted-secondary: var(--colors-gray-700);
319
- --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-650);
320
- --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-600);
321
- --colors-text-link-pressed: var(--colors-blue-300);
322
- --colors-text-link-secondary: var(--colors-gray-300);
323
- --colors-text-link-secondary-hover: var(--colors-gray-250);
324
- --colors-text-link-secondary-pressed: var(--colors-gray-200);
325
331
  --colors-text-on-interactive-danger: var(--colors-white);
326
332
  --colors-text-on-interactive-primary: var(--colors-white);
327
333
  --colors-text-on-interactive-secondary: var(--colors-gray-50);
package/dist/main.js CHANGED
@@ -86,6 +86,8 @@ const colors$3 = {
86
86
  "border-disabled": "$gray-150",
87
87
  "border-inverted": "$white",
88
88
  "border-inverted-subtle": "$gray-700",
89
+ "border-option": "$gray-450",
90
+ "border-option-hover": "$blue-550",
89
91
  "border-static-dark": "$gray-450",
90
92
  "border-static-dark-subtle": "$gray-750",
91
93
  "border-strong": "$gray-400",
@@ -207,12 +209,11 @@ const colors$3 = {
207
209
  "input-background-default": "$white",
208
210
  "input-background-disabled": "$gray-150",
209
211
  "input-background-hover": "$white",
210
- "input-border-active": "$blue-550",
211
212
  "input-border-default": "$gray-200",
212
213
  "input-border-disabled": "$transparent",
213
214
  "input-border-error": "$red-500",
215
+ "input-border-focused": "$blue-550",
214
216
  "input-border-hover": "$blue-550",
215
- "input-border-selection-control": "$gray-450",
216
217
  "input-border-success": "$green-500",
217
218
  "notification-background": "$gray-850",
218
219
  "notification-border": "$gray-450",
@@ -222,6 +223,7 @@ const colors$3 = {
222
223
  "scrollbar-background": "$gray-300",
223
224
  "scrollbar-background-hover": "$gray-350",
224
225
  "slider-background": "$gray-300",
226
+ "slider-control-background": "$white",
225
227
  "slider-notch-background": "$gray-300",
226
228
  "switch-background-default": "$gray-300",
227
229
  "switch-background-hover": "$gray-350",
@@ -243,19 +245,19 @@ const colors$3 = {
243
245
  "icon-on-static-dark-subtle": "$gray-300",
244
246
  "icon-placeholder": "$gray-475",
245
247
  "icon-secondary": "$gray-500",
248
+ "icon-interactive-on-inverted": "$white",
249
+ "icon-interactive-on-inverted-hover": "$gray-50",
250
+ "icon-interactive-on-inverted-pressed": "$gray-100",
251
+ "icon-interactive-on-inverted-secondary": "$gray-150",
252
+ "icon-interactive-on-inverted-secondary-hover": "$gray-200",
253
+ "icon-interactive-on-inverted-secondary-pressed": "$gray-250",
254
+ "icon-interactive-primary": "$blue-500",
255
+ "icon-interactive-primary-hover": "$blue-550",
256
+ "icon-interactive-primary-pressed": "$blue-600",
257
+ "icon-interactive-secondary": "$gray-500",
258
+ "icon-interactive-secondary-hover": "$gray-550",
259
+ "icon-interactive-secondary-pressed": "$gray-600",
246
260
  "icon-interactive-selected": "$blue-550",
247
- "icon-link": "$blue-500",
248
- "icon-link-hover": "$blue-550",
249
- "icon-link-on-inverted": "$white",
250
- "icon-link-on-inverted-hover": "$gray-50",
251
- "icon-link-on-inverted-pressed": "$gray-100",
252
- "icon-link-on-inverted-secondary": "$gray-150",
253
- "icon-link-on-inverted-secondary-hover": "$gray-200",
254
- "icon-link-on-inverted-secondary-pressed": "$gray-250",
255
- "icon-link-pressed": "$blue-600",
256
- "icon-link-secondary": "$gray-500",
257
- "icon-link-secondary-hover": "$gray-550",
258
- "icon-link-secondary-pressed": "$gray-600",
259
261
  "icon-on-interactive-danger": "$white",
260
262
  "icon-on-interactive-primary": "$white",
261
263
  "icon-on-interactive-secondary": "$gray-900",
@@ -303,19 +305,19 @@ const colors$3 = {
303
305
  "text-danger-hover": "$red-550",
304
306
  "text-danger-inverted": "$red-50",
305
307
  "text-danger-pressed": "$red-600",
308
+ "text-interactive-on-inverted": "$white",
309
+ "text-interactive-on-inverted-hover": "$gray-50",
310
+ "text-interactive-on-inverted-pressed": "$gray-100",
311
+ "text-interactive-on-inverted-secondary": "$gray-150",
312
+ "text-interactive-on-inverted-secondary-hover": "$gray-200",
313
+ "text-interactive-on-inverted-secondary-pressed": "$gray-250",
314
+ "text-interactive-primary": "$blue-500",
315
+ "text-interactive-primary-hover": "$blue-550",
316
+ "text-interactive-primary-pressed": "$blue-600",
317
+ "text-interactive-secondary": "$gray-500",
318
+ "text-interactive-secondary-hover": "$gray-550",
319
+ "text-interactive-secondary-pressed": "$gray-600",
306
320
  "text-interactive-selected": "$blue-550",
307
- "text-link": "$blue-500",
308
- "text-link-hover": "$blue-550",
309
- "text-link-on-inverted": "$white",
310
- "text-link-on-inverted-hover": "$gray-50",
311
- "text-link-on-inverted-pressed": "$gray-100",
312
- "text-link-on-inverted-secondary": "$gray-150",
313
- "text-link-on-inverted-secondary-hover": "$gray-200",
314
- "text-link-on-inverted-secondary-pressed": "$gray-250",
315
- "text-link-pressed": "$blue-600",
316
- "text-link-secondary": "$gray-500",
317
- "text-link-secondary-hover": "$gray-550",
318
- "text-link-secondary-pressed": "$gray-600",
319
321
  "text-on-interactive-danger": "$white",
320
322
  "text-on-interactive-primary": "$white",
321
323
  "text-on-interactive-secondary": "$gray-900",
@@ -621,9 +623,9 @@ const colors$2 = {
621
623
  "background-danger-prominent-hover": "$red-450",
622
624
  "background-danger-prominent-pressed": "$red-400",
623
625
  "background-danger-subtle": "$red-900",
624
- "background-danger-subtle-active": "$red-500",
625
- "background-danger-subtle-hover": "$red-550",
626
- "background-danger-subtle-pressed": "$red-500",
626
+ "background-danger-subtle-active": "$red-900",
627
+ "background-danger-subtle-hover": "$red-800",
628
+ "background-danger-subtle-pressed": "$red-750",
627
629
  "background-interactive-danger": "$red-500",
628
630
  "background-interactive-danger-hover": "$red-450",
629
631
  "background-interactive-danger-pressed": "$red-400",
@@ -682,6 +684,8 @@ const colors$2 = {
682
684
  "border-disabled": "$gray-750",
683
685
  "border-inverted": "$gray-700",
684
686
  "border-inverted-subtle": "$gray-600",
687
+ "border-option": "$gray-450",
688
+ "border-option-hover": "$blue-450",
685
689
  "border-static-dark": "$gray-450",
686
690
  "border-static-dark-subtle": "$gray-750",
687
691
  "border-strong": "$gray-500",
@@ -803,12 +807,11 @@ const colors$2 = {
803
807
  "input-background-default": "$gray-950",
804
808
  "input-background-disabled": "$gray-850",
805
809
  "input-background-hover": "$gray-950",
806
- "input-border-active": "$blue-350",
807
810
  "input-border-default": "$gray-650",
808
811
  "input-border-disabled": "$transparent",
809
812
  "input-border-error": "$red-400",
813
+ "input-border-focused": "$blue-350",
810
814
  "input-border-hover": "$blue-350",
811
- "input-border-selection-control": "$gray-450",
812
815
  "input-border-success": "$green-400",
813
816
  "notification-background": "$gray-150",
814
817
  "notification-border": "$gray-450",
@@ -818,6 +821,7 @@ const colors$2 = {
818
821
  "scrollbar-background": "$gray-700",
819
822
  "scrollbar-background-hover": "$gray-650",
820
823
  "slider-background": "$gray-700",
824
+ "slider-control-background": "$gray-950",
821
825
  "slider-notch-background": "$gray-700",
822
826
  "switch-background-default": "$gray-700",
823
827
  "switch-background-hover": "$gray-650",
@@ -839,19 +843,19 @@ const colors$2 = {
839
843
  "icon-on-static-dark-subtle": "$gray-300",
840
844
  "icon-placeholder": "$gray-450",
841
845
  "icon-secondary": "$gray-300",
846
+ "icon-interactive-on-inverted": "$gray-900",
847
+ "icon-interactive-on-inverted-hover": "$gray-850",
848
+ "icon-interactive-on-inverted-pressed": "$gray-800",
849
+ "icon-interactive-on-inverted-secondary": "$gray-700",
850
+ "icon-interactive-on-inverted-secondary-hover": "$gray-650",
851
+ "icon-interactive-on-inverted-secondary-pressed": "$gray-600",
852
+ "icon-interactive-primary": "$blue-400",
853
+ "icon-interactive-primary-hover": "$blue-350",
854
+ "icon-interactive-primary-pressed": "$blue-300",
855
+ "icon-interactive-secondary": "$gray-300",
856
+ "icon-interactive-secondary-hover": "$gray-250",
857
+ "icon-interactive-secondary-pressed": "$gray-200",
842
858
  "icon-interactive-selected": "$blue-400",
843
- "icon-link": "$blue-400",
844
- "icon-link-hover": "$blue-350",
845
- "icon-link-on-inverted": "$gray-900",
846
- "icon-link-on-inverted-hover": "$gray-850",
847
- "icon-link-on-inverted-pressed": "$gray-800",
848
- "icon-link-on-inverted-secondary": "$gray-700",
849
- "icon-link-on-inverted-secondary-hover": "$gray-650",
850
- "icon-link-on-inverted-secondary-pressed": "$gray-600",
851
- "icon-link-pressed": "$blue-300",
852
- "icon-link-secondary": "$gray-300",
853
- "icon-link-secondary-hover": "$gray-250",
854
- "icon-link-secondary-pressed": "$gray-200",
855
859
  "icon-on-interactive-danger": "$white",
856
860
  "icon-on-interactive-primary": "$white",
857
861
  "icon-on-interactive-secondary": "$gray-50",
@@ -899,19 +903,19 @@ const colors$2 = {
899
903
  "text-danger-hover": "$red-350",
900
904
  "text-danger-inverted": "$red-900",
901
905
  "text-danger-pressed": "$red-300",
906
+ "text-interactive-on-inverted": "$gray-900",
907
+ "text-interactive-on-inverted-hover": "$gray-850",
908
+ "text-interactive-on-inverted-pressed": "$gray-800",
909
+ "text-interactive-on-inverted-secondary": "$gray-700",
910
+ "text-interactive-on-inverted-secondary-hover": "$gray-650",
911
+ "text-interactive-on-inverted-secondary-pressed": "$gray-600",
912
+ "text-interactive-primary": "$blue-400",
913
+ "text-interactive-primary-hover": "$blue-350",
914
+ "text-interactive-primary-pressed": "$blue-300",
915
+ "text-interactive-secondary": "$gray-300",
916
+ "text-interactive-secondary-hover": "$gray-250",
917
+ "text-interactive-secondary-pressed": "$gray-200",
902
918
  "text-interactive-selected": "$blue-400",
903
- "text-link": "$blue-400",
904
- "text-link-hover": "$blue-350",
905
- "text-link-on-inverted": "$gray-900",
906
- "text-link-on-inverted-hover": "$gray-850",
907
- "text-link-on-inverted-pressed": "$gray-800",
908
- "text-link-on-inverted-secondary": "$gray-700",
909
- "text-link-on-inverted-secondary-hover": "$gray-650",
910
- "text-link-on-inverted-secondary-pressed": "$gray-600",
911
- "text-link-pressed": "$blue-300",
912
- "text-link-secondary": "$gray-300",
913
- "text-link-secondary-hover": "$gray-250",
914
- "text-link-secondary-pressed": "$gray-200",
915
919
  "text-on-interactive-danger": "$white",
916
920
  "text-on-interactive-primary": "$white",
917
921
  "text-on-interactive-secondary": "$gray-50",
@@ -1278,6 +1282,8 @@ const colors$1 = {
1278
1282
  "border-disabled": "$cloud-150",
1279
1283
  "border-inverted": "$cloud-900",
1280
1284
  "border-inverted-subtle": "$cloud-700",
1285
+ "border-option": "$cloud-450",
1286
+ "border-option-hover": "$blue-550",
1281
1287
  "border-static-dark": "$cloud-450",
1282
1288
  "border-static-dark-subtle": "$cloud-750",
1283
1289
  "border-strong": "$cloud-300",
@@ -1399,12 +1405,11 @@ const colors$1 = {
1399
1405
  "input-background-default": "$cloud-100",
1400
1406
  "input-background-disabled": "$cloud-150",
1401
1407
  "input-background-hover": "$cloud-100",
1402
- "input-border-active": "$transparent",
1403
1408
  "input-border-default": "$transparent",
1404
1409
  "input-border-disabled": "$transparent",
1405
1410
  "input-border-error": "$red-500",
1411
+ "input-border-focused": "$transparent",
1406
1412
  "input-border-hover": "$transparent",
1407
- "input-border-selection-control": "$cloud-450",
1408
1413
  "input-border-success": "$green-500",
1409
1414
  "notification-background": "$cloud-850",
1410
1415
  "notification-border": "$cloud-450",
@@ -1414,6 +1419,7 @@ const colors$1 = {
1414
1419
  "scrollbar-background": "$cloud-300",
1415
1420
  "scrollbar-background-hover": "$cloud-350",
1416
1421
  "slider-background": "$cloud-300",
1422
+ "slider-control-background": "$white",
1417
1423
  "slider-notch-background": "$cloud-300",
1418
1424
  "switch-background-default": "$cloud-300",
1419
1425
  "switch-background-hover": "$cloud-350",
@@ -1435,19 +1441,19 @@ const colors$1 = {
1435
1441
  "icon-on-static-dark-subtle": "$gray-300",
1436
1442
  "icon-placeholder": "$cloud-400",
1437
1443
  "icon-secondary": "$cloud-700",
1444
+ "icon-interactive-on-inverted": "$white",
1445
+ "icon-interactive-on-inverted-hover": "$cloud-50",
1446
+ "icon-interactive-on-inverted-pressed": "$cloud-100",
1447
+ "icon-interactive-on-inverted-secondary": "$cloud-300",
1448
+ "icon-interactive-on-inverted-secondary-hover": "$cloud-350",
1449
+ "icon-interactive-on-inverted-secondary-pressed": "$cloud-400",
1450
+ "icon-interactive-primary": "$blue-500",
1451
+ "icon-interactive-primary-hover": "$blue-550",
1452
+ "icon-interactive-primary-pressed": "$blue-600",
1453
+ "icon-interactive-secondary": "$cloud-700",
1454
+ "icon-interactive-secondary-hover": "$cloud-750",
1455
+ "icon-interactive-secondary-pressed": "$cloud-800",
1438
1456
  "icon-interactive-selected": "$blue-550",
1439
- "icon-link": "$blue-500",
1440
- "icon-link-hover": "$blue-550",
1441
- "icon-link-on-inverted": "$white",
1442
- "icon-link-on-inverted-hover": "$cloud-50",
1443
- "icon-link-on-inverted-pressed": "$cloud-100",
1444
- "icon-link-on-inverted-secondary": "$cloud-300",
1445
- "icon-link-on-inverted-secondary-hover": "$cloud-350",
1446
- "icon-link-on-inverted-secondary-pressed": "$cloud-400",
1447
- "icon-link-pressed": "$blue-600",
1448
- "icon-link-secondary": "$cloud-700",
1449
- "icon-link-secondary-hover": "$cloud-750",
1450
- "icon-link-secondary-pressed": "$cloud-800",
1451
1457
  "icon-on-interactive-danger": "$white",
1452
1458
  "icon-on-interactive-primary": "$white",
1453
1459
  "icon-on-interactive-secondary": "$cloud-900",
@@ -1495,19 +1501,19 @@ const colors$1 = {
1495
1501
  "text-danger-hover": "$red-550",
1496
1502
  "text-danger-inverted": "$red-50",
1497
1503
  "text-danger-pressed": "$red-600",
1504
+ "text-interactive-on-inverted": "$white",
1505
+ "text-interactive-on-inverted-hover": "$cloud-50",
1506
+ "text-interactive-on-inverted-pressed": "$cloud-100",
1507
+ "text-interactive-on-inverted-secondary": "$cloud-300",
1508
+ "text-interactive-on-inverted-secondary-hover": "$cloud-350",
1509
+ "text-interactive-on-inverted-secondary-pressed": "$cloud-400",
1510
+ "text-interactive-primary": "$blue-500",
1511
+ "text-interactive-primary-hover": "$blue-550",
1512
+ "text-interactive-primary-pressed": "$blue-600",
1513
+ "text-interactive-secondary": "$cloud-700",
1514
+ "text-interactive-secondary-hover": "$cloud-750",
1515
+ "text-interactive-secondary-pressed": "$cloud-800",
1498
1516
  "text-interactive-selected": "$blue-550",
1499
- "text-link": "$blue-500",
1500
- "text-link-hover": "$blue-550",
1501
- "text-link-on-inverted": "$white",
1502
- "text-link-on-inverted-hover": "$cloud-50",
1503
- "text-link-on-inverted-pressed": "$cloud-100",
1504
- "text-link-on-inverted-secondary": "$cloud-300",
1505
- "text-link-on-inverted-secondary-hover": "$cloud-350",
1506
- "text-link-on-inverted-secondary-pressed": "$cloud-400",
1507
- "text-link-pressed": "$blue-600",
1508
- "text-link-secondary": "$cloud-700",
1509
- "text-link-secondary-hover": "$cloud-750",
1510
- "text-link-secondary-pressed": "$cloud-800",
1511
1517
  "text-on-interactive-danger": "$white",
1512
1518
  "text-on-interactive-primary": "$white",
1513
1519
  "text-on-interactive-secondary": "$cloud-900",
@@ -1874,6 +1880,8 @@ const colors = {
1874
1880
  "border-disabled": "$cloud-750",
1875
1881
  "border-inverted": "$cloud-100",
1876
1882
  "border-inverted-subtle": "$cloud-500",
1883
+ "border-option": "$cloud-450",
1884
+ "border-option-hover": "$blue-450",
1877
1885
  "border-static-dark": "$cloud-450",
1878
1886
  "border-static-dark-subtle": "$cloud-750",
1879
1887
  "border-strong": "$cloud-450",
@@ -1995,12 +2003,11 @@ const colors = {
1995
2003
  "input-background-default": "$cloud-850",
1996
2004
  "input-background-disabled": "$cloud-850",
1997
2005
  "input-background-hover": "$cloud-850",
1998
- "input-border-active": "$transparent",
1999
2006
  "input-border-default": "$transparent",
2000
2007
  "input-border-disabled": "$transparent",
2001
2008
  "input-border-error": "$red-400",
2009
+ "input-border-focused": "$transparent",
2002
2010
  "input-border-hover": "$transparent",
2003
- "input-border-selection-control": "$cloud-450",
2004
2011
  "input-border-success": "$green-400",
2005
2012
  "notification-background": "$cloud-150",
2006
2013
  "notification-border": "$cloud-450",
@@ -2010,6 +2017,7 @@ const colors = {
2010
2017
  "scrollbar-background": "$gray-700",
2011
2018
  "scrollbar-background-hover": "$gray-650",
2012
2019
  "slider-background": "$gray-700",
2020
+ "slider-control-background": "$cloud-900",
2013
2021
  "slider-notch-background": "$gray-700",
2014
2022
  "switch-background-default": "$gray-700",
2015
2023
  "switch-background-hover": "$gray-650",
@@ -2031,19 +2039,19 @@ const colors = {
2031
2039
  "icon-on-static-dark-subtle": "$gray-300",
2032
2040
  "icon-placeholder": "$cloud-400",
2033
2041
  "icon-secondary": "$cloud-300",
2042
+ "icon-interactive-on-inverted": "$cloud-900",
2043
+ "icon-interactive-on-inverted-hover": "$cloud-850",
2044
+ "icon-interactive-on-inverted-pressed": "$cloud-800",
2045
+ "icon-interactive-on-inverted-secondary": "$cloud-700",
2046
+ "icon-interactive-on-inverted-secondary-hover": "$cloud-650",
2047
+ "icon-interactive-on-inverted-secondary-pressed": "$cloud-600",
2048
+ "icon-interactive-primary": "$blue-500",
2049
+ "icon-interactive-primary-hover": "$blue-450",
2050
+ "icon-interactive-primary-pressed": "$blue-400",
2051
+ "icon-interactive-secondary": "$cloud-300",
2052
+ "icon-interactive-secondary-hover": "$cloud-250",
2053
+ "icon-interactive-secondary-pressed": "$cloud-200",
2034
2054
  "icon-interactive-selected": "$blue-400",
2035
- "icon-link": "$blue-500",
2036
- "icon-link-hover": "$blue-450",
2037
- "icon-link-on-inverted": "$cloud-900",
2038
- "icon-link-on-inverted-hover": "$cloud-850",
2039
- "icon-link-on-inverted-pressed": "$cloud-800",
2040
- "icon-link-on-inverted-secondary": "$cloud-700",
2041
- "icon-link-on-inverted-secondary-hover": "$cloud-650",
2042
- "icon-link-on-inverted-secondary-pressed": "$cloud-600",
2043
- "icon-link-pressed": "$blue-400",
2044
- "icon-link-secondary": "$cloud-300",
2045
- "icon-link-secondary-hover": "$cloud-250",
2046
- "icon-link-secondary-pressed": "$cloud-200",
2047
2055
  "icon-on-interactive-danger": "$white",
2048
2056
  "icon-on-interactive-primary": "$white",
2049
2057
  "icon-on-interactive-secondary": "$white",
@@ -2091,19 +2099,19 @@ const colors = {
2091
2099
  "text-danger-hover": "$red-350",
2092
2100
  "text-danger-inverted": "$red-900",
2093
2101
  "text-danger-pressed": "$red-300",
2102
+ "text-interactive-on-inverted": "$cloud-900",
2103
+ "text-interactive-on-inverted-hover": "$cloud-850",
2104
+ "text-interactive-on-inverted-pressed": "$cloud-800",
2105
+ "text-interactive-on-inverted-secondary": "$cloud-700",
2106
+ "text-interactive-on-inverted-secondary-hover": "$cloud-650",
2107
+ "text-interactive-on-inverted-secondary-pressed": "$cloud-600",
2108
+ "text-interactive-primary": "$blue-500",
2109
+ "text-interactive-primary-hover": "$blue-450",
2110
+ "text-interactive-primary-pressed": "$blue-400",
2111
+ "text-interactive-secondary": "$cloud-300",
2112
+ "text-interactive-secondary-hover": "$cloud-250",
2113
+ "text-interactive-secondary-pressed": "$cloud-200",
2094
2114
  "text-interactive-selected": "$blue-400",
2095
- "text-link": "$blue-500",
2096
- "text-link-hover": "$blue-450",
2097
- "text-link-on-inverted": "$cloud-900",
2098
- "text-link-on-inverted-hover": "$cloud-850",
2099
- "text-link-on-inverted-pressed": "$cloud-800",
2100
- "text-link-on-inverted-secondary": "$cloud-700",
2101
- "text-link-on-inverted-secondary-hover": "$cloud-650",
2102
- "text-link-on-inverted-secondary-pressed": "$cloud-600",
2103
- "text-link-pressed": "$blue-400",
2104
- "text-link-secondary": "$cloud-300",
2105
- "text-link-secondary-hover": "$cloud-250",
2106
- "text-link-secondary-pressed": "$cloud-200",
2107
2115
  "text-on-interactive-danger": "$white",
2108
2116
  "text-on-interactive-primary": "$white",
2109
2117
  "text-on-interactive-secondary": "$white",