@mirohq/design-system-themes 1.3.13 → 1.3.15

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 +42 -19
  2. package/dark.css +44 -17
  3. package/dist/main.js +83 -23
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +83 -23
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +28 -3
  8. package/light.css +42 -19
  9. package/metadata.json +50 -5
  10. package/new-dark.css +45 -18
  11. package/new-light.css +54 -35
  12. package/package.json +2 -2
package/new-light.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-gray-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-gray-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-gray-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-cloud-150);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-cloud-100);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-cloud-150);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-cloud-150);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-cloud-150
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-white);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-400);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-200);
117
- --colors-border-focus-inner: #ffffff;
116
+ --colors-border-focus-inner: #FFFFFF;
118
117
  --colors-border-focus-middle: var(--colors-blue-400);
119
118
  --colors-border-focus-outer: var(--colors-blue-200);
120
119
  --colors-border-focus-success-inner: var(--colors-white);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-400);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-200);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-550);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -231,9 +230,24 @@
231
230
  --colors-input-border-focused: var(--colors-blue-550);
232
231
  --colors-input-border-hover: var(--colors-cloud-400);
233
232
  --colors-input-border-success: var(--colors-green-500);
234
- --colors-notification-background: var(--colors-cloud-850);
235
- --colors-notification-border: var(--colors-cloud-450);
236
- --colors-notification-border-subtle: var(--colors-cloud-750);
233
+ --colors-notification-background-announcement: var(--colors-blue-200);
234
+ --colors-notification-background-danger: var(--colors-red-500);
235
+ --colors-notification-background-info: var(--colors-blue-500);
236
+ --colors-notification-background-inverted: var(--colors-ink-850);
237
+ --colors-notification-background-static: var(--colors-ink-850);
238
+ --colors-notification-background-warning: var(--colors-yellow-500);
239
+ --colors-notification-border-inverted: var(--colors-ink-500);
240
+ --colors-notification-border-inverted-subtle: var(--colors-ink-700);
241
+ --colors-notification-border-static: var(--colors-ink-500);
242
+ --colors-notification-border-static-subtle: var(--colors-ink-700);
243
+ --colors-notification-icon-on-announcement: var(--colors-blue-800);
244
+ --colors-notification-icon-on-danger: var(--colors-white);
245
+ --colors-notification-icon-on-info: var(--colors-white);
246
+ --colors-notification-icon-on-warning: var(--colors-yellow-800);
247
+ --colors-notification-text-on-announcement: var(--colors-blue-800);
248
+ --colors-notification-text-on-danger: var(--colors-white);
249
+ --colors-notification-text-on-info: var(--colors-white);
250
+ --colors-notification-text-on-warning: var(--colors-yellow-800);
237
251
  --colors-popover-background: var(--colors-cloud-900);
238
252
  --colors-popover-border: var(--colors-cloud-500);
239
253
  --colors-scrollbar-background: var(--colors-cloud-300);
@@ -257,8 +271,8 @@
257
271
  --colors-icon-inverted-secondary: var(--colors-cloud-300);
258
272
  --colors-icon-muted: var(--colors-cloud-400);
259
273
  --colors-icon-on-disabled: var(--colors-cloud-350);
260
- --colors-icon-on-static-dark: var(--colors-gray-50);
261
- --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
274
+ --colors-icon-on-static-dark: var(--colors-cloud-50);
275
+ --colors-icon-on-static-dark-subtle: var(--colors-cloud-300);
262
276
  --colors-icon-on-static-light: var(--colors-cloud-900);
263
277
  --colors-icon-on-static-light-subtle: var(--colors-cloud-700);
264
278
  --colors-icon-placeholder: var(--colors-cloud-475);
@@ -267,12 +281,8 @@
267
281
  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
268
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
269
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
270
- --colors-icon-interactive-on-inverted-secondary-hover: var(
271
- --colors-cloud-350
272
- );
273
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
274
- --colors-cloud-400
275
- );
284
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
276
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
277
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
278
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -287,19 +297,19 @@
287
297
  --colors-icon-neutrals: var(--colors-cloud-900);
288
298
  --colors-icon-neutrals-disabled: var(--colors-cloud-300);
289
299
  --colors-icon-neutrals-hover: var(--colors-cloud-950);
290
- --colors-icon-neutrals-inactive: var(--colors-gray-450);
291
- --colors-icon-neutrals-inactive-hover: var(--colors-gray-500);
300
+ --colors-icon-neutrals-inactive: var(--colors-cloud-450);
301
+ --colors-icon-neutrals-inactive-hover: var(--colors-cloud-500);
292
302
  --colors-icon-neutrals-inverted: var(--colors-cloud-100);
293
303
  --colors-icon-neutrals-inverted-hover: var(--colors-cloud-50);
294
- --colors-icon-neutrals-inverted-subtle: var(--colors-gray-100);
295
- --colors-icon-neutrals-inverted-subtle-hover: var(--colors-gray-150);
296
- --colors-icon-neutrals-placeholder: var(--colors-gray-350);
304
+ --colors-icon-neutrals-inverted-subtle: var(--colors-cloud-100);
305
+ --colors-icon-neutrals-inverted-subtle-hover: var(--colors-cloud-150);
306
+ --colors-icon-neutrals-placeholder: var(--colors-cloud-350);
297
307
  --colors-icon-neutrals-pressed: var(--colors-cloud-950);
298
- --colors-icon-neutrals-search: var(--colors-gray-500);
308
+ --colors-icon-neutrals-search: var(--colors-cloud-500);
299
309
  --colors-icon-neutrals-subtle: var(--colors-cloud-700);
300
310
  --colors-icon-neutrals-subtle-hover: var(--colors-cloud-750);
301
311
  --colors-icon-neutrals-subtle-pressed: var(--colors-cloud-750);
302
- --colors-icon-neutrals-text: var(--colors-gray-700);
312
+ --colors-icon-neutrals-text: var(--colors-cloud-700);
303
313
  --colors-icon-primary: var(--colors-blue-500);
304
314
  --colors-icon-primary-active: var(--colors-blue-600);
305
315
  --colors-icon-primary-hover: var(--colors-blue-550);
@@ -331,12 +341,8 @@
331
341
  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
332
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
333
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
334
- --colors-text-interactive-on-inverted-secondary-hover: var(
335
- --colors-cloud-350
336
- );
337
- --colors-text-interactive-on-inverted-secondary-pressed: var(
338
- --colors-cloud-400
339
- );
344
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
340
346
  --colors-text-interactive-primary: var(--colors-blue-500);
341
347
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
342
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -388,7 +394,7 @@
388
394
  --colors-text-inverted-secondary: var(--colors-cloud-300);
389
395
  --colors-text-muted: var(--colors-cloud-400);
390
396
  --colors-text-on-disabled: var(--colors-cloud-350);
391
- --colors-text-on-static-dark: var(--colors-cloud-50);
397
+ --colors-text-on-static-dark: var(--colors-white);
392
398
  --colors-text-on-static-dark-subtle: var(--colors-cloud-300);
393
399
  --colors-text-on-static-light: var(--colors-cloud-900);
394
400
  --colors-text-on-static-light-subtle: var(--colors-cloud-700);
@@ -562,7 +568,7 @@
562
568
  --colors-black-sticky-background: #151515;
563
569
  --colors-coral-sticky-background: var(--colors-coral-400);
564
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
565
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
566
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
567
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
568
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -641,11 +647,24 @@
641
647
  --colors-teal-text: var(--colors-teal-900);
642
648
  --colors-teal-text-mild: var(--colors-teal-700);
643
649
  --colors-teal-text-subtle: var(--colors-teal-100);
650
+ --radii-avatar-people: var(--radii-round);
651
+ --radii-avatar-team: var(--radii-50);
652
+ --radii-avatar-group: var(--radii-50);
653
+ --radii-dropdown: var(--radii-250);
654
+ --radii-toolbar: var(--radii-200);
655
+ --radii-toolbar-item: var(--radii-150);
656
+ --radii-input: var(--radii-150);
657
+ --radii-button: var(--radii-100);
658
+ --radii-popup: var(--radii-100);
659
+ --radii-tooltip: var(--radii-100);
660
+ --radii-checkbox: var(--radii-75);
661
+ --radii-list-item: var(--radii-150);
662
+ --radii-tag: var(--radii-round);
663
+ --radii-calendar: var(--radii-250);
644
664
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
645
665
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
646
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
647
- 0 0 0 4px var(--colors-focus-keyboard);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
648
667
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
649
668
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
650
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
669
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
651
670
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.3.13",
3
+ "version": "1.3.15",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -34,7 +34,7 @@
34
34
  "access": "public"
35
35
  },
36
36
  "dependencies": {
37
- "@mirohq/design-tokens": "^11.1.1"
37
+ "@mirohq/design-tokens": "^12.0.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.kebabcase": "4.1.7",