@mirohq/design-system-themes 1.3.4 → 1.3.6

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 +34 -27
  2. package/dark.css +37 -30
  3. package/dist/main.js +123 -111
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +123 -111
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +34 -27
  9. package/metadata.json +56 -47
  10. package/new-dark.css +38 -27
  11. package/new-light.css +38 -27
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --colors-background-interactive-primary: var(--colors-blue-500);
39
39
  --colors-background-interactive-primary-hover: var(--colors-blue-550);
40
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-600);
41
+ --colors-background-interactive-secondary-selected: var(--colors-blue-150);
41
42
  --colors-background-interactive-selected: var(--colors-blue-500);
42
43
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
44
  --colors-background-interactive-surface-secondary-hover: var(
@@ -92,6 +93,8 @@
92
93
  --colors-border-disabled: var(--colors-gray-150);
93
94
  --colors-border-inverted: var(--colors-white);
94
95
  --colors-border-inverted-subtle: var(--colors-gray-700);
96
+ --colors-border-option: var(--colors-gray-450);
97
+ --colors-border-option-hover: var(--colors-blue-550);
95
98
  --colors-border-static-dark: var(--colors-gray-450);
96
99
  --colors-border-static-dark-subtle: var(--colors-gray-750);
97
100
  --colors-border-strong: var(--colors-gray-400);
@@ -206,19 +209,18 @@
206
209
  --colors-format-icon-slides: var(--colors-coral-600);
207
210
  --colors-format-icon-table: var(--colors-moss-600);
208
211
  --colors-format-icon-timeline: var(--colors-moss-600);
209
- --colors-input-background-active: var(--colors-white);
210
212
  --colors-input-background-alt-active: var(--colors-gray-100);
211
213
  --colors-input-background-alt-default: var(--colors-gray-100);
212
214
  --colors-input-background-alt-hover: var(--colors-gray-100);
213
215
  --colors-input-background-default: var(--colors-white);
214
216
  --colors-input-background-disabled: var(--colors-gray-150);
217
+ --colors-input-background-focused: var(--colors-white);
215
218
  --colors-input-background-hover: var(--colors-white);
216
- --colors-input-border-active: var(--colors-blue-550);
217
219
  --colors-input-border-default: var(--colors-gray-200);
218
220
  --colors-input-border-disabled: var(--colors-transparent);
219
221
  --colors-input-border-error: var(--colors-red-500);
222
+ --colors-input-border-focused: var(--colors-blue-550);
220
223
  --colors-input-border-hover: var(--colors-blue-550);
221
- --colors-input-border-selection-control: var(--colors-gray-450);
222
224
  --colors-input-border-success: var(--colors-green-500);
223
225
  --colors-notification-background: var(--colors-gray-850);
224
226
  --colors-notification-border: var(--colors-gray-450);
@@ -228,6 +230,7 @@
228
230
  --colors-scrollbar-background: var(--colors-gray-300);
229
231
  --colors-scrollbar-background-hover: var(--colors-gray-350);
230
232
  --colors-slider-background: var(--colors-gray-300);
233
+ --colors-slider-control-background: var(--colors-white);
231
234
  --colors-slider-notch-background: var(--colors-gray-300);
232
235
  --colors-switch-background-default: var(--colors-gray-300);
233
236
  --colors-switch-background-hover: var(--colors-gray-350);
@@ -249,19 +252,21 @@
249
252
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
253
  --colors-icon-placeholder: var(--colors-gray-475);
251
254
  --colors-icon-secondary: var(--colors-gray-500);
255
+ --colors-icon-interactive-on-inverted: var(--colors-white);
256
+ --colors-icon-interactive-on-inverted-hover: var(--colors-gray-50);
257
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
258
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
259
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
260
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
261
+ --colors-gray-250
262
+ );
263
+ --colors-icon-interactive-primary: var(--colors-blue-500);
264
+ --colors-icon-interactive-primary-hover: var(--colors-blue-550);
265
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
266
+ --colors-icon-interactive-secondary: var(--colors-gray-500);
267
+ --colors-icon-interactive-secondary-hover: var(--colors-gray-550);
268
+ --colors-icon-interactive-secondary-pressed: var(--colors-gray-600);
252
269
  --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
270
  --colors-icon-on-interactive-danger: var(--colors-white);
266
271
  --colors-icon-on-interactive-primary: var(--colors-white);
267
272
  --colors-icon-on-interactive-secondary: var(--colors-gray-900);
@@ -309,19 +314,21 @@
309
314
  --colors-text-danger-hover: var(--colors-red-550);
310
315
  --colors-text-danger-inverted: var(--colors-red-50);
311
316
  --colors-text-danger-pressed: var(--colors-red-600);
317
+ --colors-text-interactive-on-inverted: var(--colors-white);
318
+ --colors-text-interactive-on-inverted-hover: var(--colors-gray-50);
319
+ --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
320
+ --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
321
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
322
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
323
+ --colors-gray-250
324
+ );
325
+ --colors-text-interactive-primary: var(--colors-blue-500);
326
+ --colors-text-interactive-primary-hover: var(--colors-blue-550);
327
+ --colors-text-interactive-primary-pressed: var(--colors-blue-600);
328
+ --colors-text-interactive-secondary: var(--colors-gray-500);
329
+ --colors-text-interactive-secondary-hover: var(--colors-gray-550);
330
+ --colors-text-interactive-secondary-pressed: var(--colors-gray-600);
312
331
  --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
332
  --colors-text-on-interactive-danger: var(--colors-white);
326
333
  --colors-text-on-interactive-primary: var(--colors-white);
327
334
  --colors-text-on-interactive-secondary: var(--colors-gray-900);
package/dark.css CHANGED
@@ -29,15 +29,16 @@
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);
38
38
  --colors-background-interactive-primary: var(--colors-blue-500);
39
39
  --colors-background-interactive-primary-hover: var(--colors-blue-450);
40
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-400);
41
+ --colors-background-interactive-secondary-selected: var(--colors-blue-700);
41
42
  --colors-background-interactive-selected: var(--colors-blue-500);
42
43
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
43
44
  --colors-background-interactive-surface-secondary-hover: var(
@@ -92,6 +93,8 @@
92
93
  --colors-border-disabled: var(--colors-gray-750);
93
94
  --colors-border-inverted: var(--colors-gray-700);
94
95
  --colors-border-inverted-subtle: var(--colors-gray-600);
96
+ --colors-border-option: var(--colors-gray-450);
97
+ --colors-border-option-hover: var(--colors-blue-450);
95
98
  --colors-border-static-dark: var(--colors-gray-450);
96
99
  --colors-border-static-dark-subtle: var(--colors-gray-750);
97
100
  --colors-border-strong: var(--colors-gray-500);
@@ -206,19 +209,18 @@
206
209
  --colors-format-icon-slides: var(--colors-coral-600);
207
210
  --colors-format-icon-table: var(--colors-moss-600);
208
211
  --colors-format-icon-timeline: var(--colors-moss-600);
209
- --colors-input-background-active: var(--colors-gray-950);
210
212
  --colors-input-background-alt-active: var(--colors-gray-750);
211
213
  --colors-input-background-alt-default: var(--colors-gray-750);
212
214
  --colors-input-background-alt-hover: var(--colors-gray-750);
213
215
  --colors-input-background-default: var(--colors-gray-950);
214
216
  --colors-input-background-disabled: var(--colors-gray-850);
217
+ --colors-input-background-focused: var(--colors-gray-950);
215
218
  --colors-input-background-hover: var(--colors-gray-950);
216
- --colors-input-border-active: var(--colors-blue-350);
217
219
  --colors-input-border-default: var(--colors-gray-650);
218
220
  --colors-input-border-disabled: var(--colors-transparent);
219
221
  --colors-input-border-error: var(--colors-red-400);
222
+ --colors-input-border-focused: var(--colors-blue-350);
220
223
  --colors-input-border-hover: var(--colors-blue-350);
221
- --colors-input-border-selection-control: var(--colors-gray-450);
222
224
  --colors-input-border-success: var(--colors-green-400);
223
225
  --colors-notification-background: var(--colors-gray-150);
224
226
  --colors-notification-border: var(--colors-gray-450);
@@ -228,6 +230,7 @@
228
230
  --colors-scrollbar-background: var(--colors-gray-700);
229
231
  --colors-scrollbar-background-hover: var(--colors-gray-650);
230
232
  --colors-slider-background: var(--colors-gray-700);
233
+ --colors-slider-control-background: var(--colors-gray-950);
231
234
  --colors-slider-notch-background: var(--colors-gray-700);
232
235
  --colors-switch-background-default: var(--colors-gray-700);
233
236
  --colors-switch-background-hover: var(--colors-gray-650);
@@ -249,19 +252,21 @@
249
252
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
253
  --colors-icon-placeholder: var(--colors-gray-450);
251
254
  --colors-icon-secondary: var(--colors-gray-300);
255
+ --colors-icon-interactive-on-inverted: var(--colors-gray-900);
256
+ --colors-icon-interactive-on-inverted-hover: var(--colors-gray-850);
257
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
258
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
259
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
260
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
261
+ --colors-gray-600
262
+ );
263
+ --colors-icon-interactive-primary: var(--colors-blue-400);
264
+ --colors-icon-interactive-primary-hover: var(--colors-blue-350);
265
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
266
+ --colors-icon-interactive-secondary: var(--colors-gray-300);
267
+ --colors-icon-interactive-secondary-hover: var(--colors-gray-250);
268
+ --colors-icon-interactive-secondary-pressed: var(--colors-gray-200);
252
269
  --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
270
  --colors-icon-on-interactive-danger: var(--colors-white);
266
271
  --colors-icon-on-interactive-primary: var(--colors-white);
267
272
  --colors-icon-on-interactive-secondary: var(--colors-gray-50);
@@ -309,19 +314,21 @@
309
314
  --colors-text-danger-hover: var(--colors-red-350);
310
315
  --colors-text-danger-inverted: var(--colors-red-900);
311
316
  --colors-text-danger-pressed: var(--colors-red-300);
317
+ --colors-text-interactive-on-inverted: var(--colors-gray-900);
318
+ --colors-text-interactive-on-inverted-hover: var(--colors-gray-850);
319
+ --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
320
+ --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
321
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
322
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
323
+ --colors-gray-600
324
+ );
325
+ --colors-text-interactive-primary: var(--colors-blue-400);
326
+ --colors-text-interactive-primary-hover: var(--colors-blue-350);
327
+ --colors-text-interactive-primary-pressed: var(--colors-blue-300);
328
+ --colors-text-interactive-secondary: var(--colors-gray-300);
329
+ --colors-text-interactive-secondary-hover: var(--colors-gray-250);
330
+ --colors-text-interactive-secondary-pressed: var(--colors-gray-200);
312
331
  --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
332
  --colors-text-on-interactive-danger: var(--colors-white);
326
333
  --colors-text-on-interactive-primary: var(--colors-white);
327
334
  --colors-text-on-interactive-secondary: var(--colors-gray-50);