@mirohq/design-system-themes 1.3.7 → 1.3.9

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 +24 -1
  2. package/dark.css +28 -5
  3. package/dist/main.js +333 -213
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +333 -213
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +24 -1
  9. package/metadata.json +27 -0
  10. package/new-dark.css +204 -178
  11. package/new-light.css +59 -29
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --colors-background-inverted-secondary: var(--colors-gray-800);
19
19
  --colors-background-layout: var(--colors-white);
20
20
  --colors-background-overlay: var(--colors-alpha-black-400);
21
+ --colors-background-space: var(--colors-gray-50);
21
22
  --colors-background-static-dark: var(--colors-gray-850);
22
23
  --colors-background-static-dark-subtle: var(--colors-gray-750);
23
24
  --colors-background-static-light: var(--colors-white);
@@ -97,6 +98,7 @@
97
98
  --colors-border-option-hover: var(--colors-blue-550);
98
99
  --colors-border-static-dark: var(--colors-gray-450);
99
100
  --colors-border-static-dark-subtle: var(--colors-gray-750);
101
+ --colors-border-static-light: var(--colors-white);
100
102
  --colors-border-strong: var(--colors-gray-400);
101
103
  --colors-border-subtle: var(--colors-gray-150);
102
104
  --colors-border-transparent: var(--colors-transparent);
@@ -161,6 +163,8 @@
161
163
  --colors-border-success-subtle: var(--colors-green-250);
162
164
  --colors-border-warning: var(--colors-yellow-500);
163
165
  --colors-border-warning-subtle: var(--colors-yellow-300);
166
+ --colors-badge-border: var(--colors-white);
167
+ --colors-badge-border-inverted: var(--colors-blue-500);
164
168
  --colors-button-background-danger: var(--colors-red-500);
165
169
  --colors-button-background-danger-hover: var(--colors-red-550);
166
170
  --colors-button-background-danger-pressed: var(--colors-red-600);
@@ -199,6 +203,7 @@
199
203
  --colors-button-text-on-secondary: var(--colors-gray-900);
200
204
  --colors-button-text-on-tertiary: var(--colors-blue-500);
201
205
  --colors-chip-background: var(--colors-gray-100);
206
+ --colors-chip-background-disabled: var(--colors-gray-100);
202
207
  --colors-chip-background-hover: var(--colors-gray-150);
203
208
  --colors-chip-text: var(--colors-gray-900);
204
209
  --colors-format-icon-diagram: var(--colors-orange-600);
@@ -233,7 +238,7 @@
233
238
  --colors-slider-control-background: var(--colors-white);
234
239
  --colors-slider-notch-background: var(--colors-gray-300);
235
240
  --colors-switch-background-default: var(--colors-gray-450);
236
- --colors-switch-background-hover: var(--colors-gray-500);
241
+ --colors-switch-background-hover: var(--colors-gray-350);
237
242
  --colors-switch-control-background: var(--colors-white);
238
243
  --colors-tooltip-background: var(--colors-gray-950);
239
244
  --colors-tooltip-background-inset: var(--colors-gray-650);
@@ -250,6 +255,8 @@
250
255
  --colors-icon-on-disabled: var(--colors-gray-350);
251
256
  --colors-icon-on-static-dark: var(--colors-gray-50);
252
257
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
258
+ --colors-icon-on-static-light: var(--colors-gray-900);
259
+ --colors-icon-on-static-light-subtle: var(--colors-gray-500);
253
260
  --colors-icon-placeholder: var(--colors-gray-475);
254
261
  --colors-icon-secondary: var(--colors-gray-500);
255
262
  --colors-icon-interactive-on-inverted: var(--colors-white);
@@ -375,6 +382,8 @@
375
382
  --colors-text-on-disabled: var(--colors-gray-350);
376
383
  --colors-text-on-static-dark: var(--colors-gray-50);
377
384
  --colors-text-on-static-dark-subtle: var(--colors-gray-300);
385
+ --colors-text-on-static-light: var(--colors-gray-900);
386
+ --colors-text-on-static-light-subtle: var(--colors-gray-500);
378
387
  --colors-text-placeholder: var(--colors-gray-475);
379
388
  --colors-text-secondary: var(--colors-gray-500);
380
389
  --colors-text-warning: var(--colors-yellow-800);
@@ -607,6 +616,20 @@
607
616
  --colors-teal-text: var(--colors-teal-900);
608
617
  --colors-teal-text-mild: var(--colors-teal-700);
609
618
  --colors-teal-text-subtle: var(--colors-teal-100);
619
+ --radii-panel: var(--radii-150);
620
+ --radii-notification: var(--radii-100);
621
+ --radii-avatar-people: var(--radii-round);
622
+ --radii-avatar-team: var(--radii-50);
623
+ --radii-avatar-group: var(--radii-50);
624
+ --radii-dropdown: var(--radii-100);
625
+ --radii-toolbar: var(--radii-100);
626
+ --radii-toolbar-item: var(--radii-50);
627
+ --radii-input: var(--radii-50);
628
+ --radii-button: var(--radii-50);
629
+ --radii-popup: var(--radii-100);
630
+ --radii-tooltip: var(--radii-100);
631
+ --radii-checkbox: var(--radii-50);
632
+ --radii-list-item: var(--radii-50);
610
633
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
611
634
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
612
635
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
package/dark.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --colors-background-inverted-secondary: var(--colors-gray-150);
19
19
  --colors-background-layout: var(--colors-gray-850);
20
20
  --colors-background-overlay: var(--colors-alpha-black-400);
21
+ --colors-background-space: var(--colors-gray-950);
21
22
  --colors-background-static-dark: var(--colors-gray-850);
22
23
  --colors-background-static-dark-subtle: var(--colors-gray-750);
23
24
  --colors-background-static-light: var(--colors-white);
@@ -30,8 +31,8 @@
30
31
  --colors-background-danger-prominent-pressed: var(--colors-red-400);
31
32
  --colors-background-danger-subtle: var(--colors-red-900);
32
33
  --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);
34
+ --colors-background-danger-subtle-hover: var(--colors-red-900);
35
+ --colors-background-danger-subtle-pressed: var(--colors-red-800);
35
36
  --colors-background-interactive-danger: var(--colors-red-500);
36
37
  --colors-background-interactive-danger-hover: var(--colors-red-450);
37
38
  --colors-background-interactive-danger-pressed: var(--colors-red-400);
@@ -97,6 +98,7 @@
97
98
  --colors-border-option-hover: var(--colors-blue-450);
98
99
  --colors-border-static-dark: var(--colors-gray-450);
99
100
  --colors-border-static-dark-subtle: var(--colors-gray-750);
101
+ --colors-border-static-light: var(--colors-white);
100
102
  --colors-border-strong: var(--colors-gray-500);
101
103
  --colors-border-subtle: var(--colors-gray-800);
102
104
  --colors-border-transparent: var(--colors-transparent);
@@ -161,6 +163,8 @@
161
163
  --colors-border-success-subtle: var(--colors-green-700);
162
164
  --colors-border-warning: var(--colors-yellow-500);
163
165
  --colors-border-warning-subtle: var(--colors-yellow-700);
166
+ --colors-badge-border: var(--colors-gray-850);
167
+ --colors-badge-border-inverted: #ffffff;
164
168
  --colors-button-background-danger: var(--colors-red-500);
165
169
  --colors-button-background-danger-hover: var(--colors-red-450);
166
170
  --colors-button-background-danger-pressed: var(--colors-red-450);
@@ -174,8 +178,8 @@
174
178
  --colors-button-background-secondary-hover: var(--colors-gray-700);
175
179
  --colors-button-background-secondary-pressed: var(--colors-gray-700);
176
180
  --colors-button-background-tertiary: var(--colors-transparent);
177
- --colors-button-background-tertiary-hover: var(--colors-blue-650);
178
- --colors-button-background-tertiary-pressed: var(--colors-blue-600);
181
+ --colors-button-background-tertiary-hover: var(--colors-blue-900);
182
+ --colors-button-background-tertiary-pressed: var(--colors-blue-800);
179
183
  --colors-button-border-danger: var(--colors-red-500);
180
184
  --colors-button-border-danger-hover: var(--colors-red-450);
181
185
  --colors-button-border-danger-pressed: var(--colors-red-400);
@@ -199,6 +203,7 @@
199
203
  --colors-button-text-on-secondary: var(--colors-gray-50);
200
204
  --colors-button-text-on-tertiary: var(--colors-blue-400);
201
205
  --colors-chip-background: var(--colors-gray-750);
206
+ --colors-chip-background-disabled: var(--colors-gray-750);
202
207
  --colors-chip-background-hover: var(--colors-gray-700);
203
208
  --colors-chip-text: var(--colors-gray-50);
204
209
  --colors-format-icon-diagram: var(--colors-orange-600);
@@ -222,7 +227,7 @@
222
227
  --colors-input-border-focused: var(--colors-blue-350);
223
228
  --colors-input-border-hover: var(--colors-blue-350);
224
229
  --colors-input-border-success: var(--colors-green-400);
225
- --colors-notification-background: var(--colors-gray-150);
230
+ --colors-notification-background: var(--colors-gray-50);
226
231
  --colors-notification-border: var(--colors-gray-450);
227
232
  --colors-notification-border-subtle: var(--colors-gray-300);
228
233
  --colors-popover-background: var(--colors-gray-800);
@@ -250,6 +255,8 @@
250
255
  --colors-icon-on-disabled: var(--colors-gray-450);
251
256
  --colors-icon-on-static-dark: var(--colors-gray-50);
252
257
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
258
+ --colors-icon-on-static-light: var(--colors-gray-900);
259
+ --colors-icon-on-static-light-subtle: var(--colors-gray-500);
253
260
  --colors-icon-placeholder: var(--colors-gray-450);
254
261
  --colors-icon-secondary: var(--colors-gray-300);
255
262
  --colors-icon-interactive-on-inverted: var(--colors-gray-900);
@@ -375,6 +382,8 @@
375
382
  --colors-text-on-disabled: var(--colors-gray-450);
376
383
  --colors-text-on-static-dark: var(--colors-gray-50);
377
384
  --colors-text-on-static-dark-subtle: var(--colors-gray-300);
385
+ --colors-text-on-static-light: var(--colors-gray-900);
386
+ --colors-text-on-static-light-subtle: var(--colors-gray-500);
378
387
  --colors-text-placeholder: var(--colors-gray-450);
379
388
  --colors-text-secondary: var(--colors-gray-300);
380
389
  --colors-text-warning: var(--colors-yellow-200);
@@ -607,6 +616,20 @@
607
616
  --colors-teal-text: var(--colors-teal-900);
608
617
  --colors-teal-text-mild: var(--colors-teal-700);
609
618
  --colors-teal-text-subtle: var(--colors-teal-100);
619
+ --radii-panel: var(--radii-150);
620
+ --radii-notification: var(--radii-100);
621
+ --radii-avatar-people: var(--radii-round);
622
+ --radii-avatar-team: var(--radii-50);
623
+ --radii-avatar-group: var(--radii-50);
624
+ --radii-dropdown: var(--radii-100);
625
+ --radii-toolbar: var(--radii-100);
626
+ --radii-toolbar-item: var(--radii-50);
627
+ --radii-input: var(--radii-50);
628
+ --radii-button: var(--radii-50);
629
+ --radii-popup: var(--radii-100);
630
+ --radii-tooltip: var(--radii-100);
631
+ --radii-checkbox: var(--radii-50);
632
+ --radii-list-item: var(--radii-50);
610
633
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
611
634
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
612
635
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),