@mirohq/design-system-themes 1.3.6 → 1.3.8

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 +321 -213
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +321 -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 +183 -178
  11. package/new-light.css +52 -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);
@@ -232,7 +237,7 @@
232
237
  --colors-slider-background: var(--colors-gray-300);
233
238
  --colors-slider-control-background: var(--colors-white);
234
239
  --colors-slider-notch-background: var(--colors-gray-300);
235
- --colors-switch-background-default: var(--colors-gray-300);
240
+ --colors-switch-background-default: var(--colors-gray-450);
236
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);
@@ -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-radii: $150;
620
+ --radii-notification-radii: $100;
621
+ --radii-avatar-radii-people: $round;
622
+ --radii-avatar-radii-team: $50;
623
+ --radii-avatar-radii-group: $50;
624
+ --radii-dropdown-radii: $100;
625
+ --radii-toolbar-radii: $100;
626
+ --radii-toolbar-item-radii: $50;
627
+ --radii-input-radii: $50;
628
+ --radii-button-radii: $50;
629
+ --radii-popup-radii: $100;
630
+ --radii-tooltip-radii: $100;
631
+ --radii-checkbox-radii: $50;
632
+ --radii-list-item-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-radii: $150;
620
+ --radii-notification-radii: $100;
621
+ --radii-avatar-radii-people: $round;
622
+ --radii-avatar-radii-team: $50;
623
+ --radii-avatar-radii-group: $50;
624
+ --radii-dropdown-radii: $100;
625
+ --radii-toolbar-radii: $100;
626
+ --radii-toolbar-item-radii: $50;
627
+ --radii-input-radii: $50;
628
+ --radii-button-radii: $50;
629
+ --radii-popup-radii: $100;
630
+ --radii-tooltip-radii: $100;
631
+ --radii-checkbox-radii: $50;
632
+ --radii-list-item-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),