@mirohq/design-system-themes 1.3.9 → 1.3.11

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 +25 -34
  2. package/dark.css +28 -37
  3. package/dist/main.js +30 -30
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +30 -30
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +25 -34
  9. package/metadata.json +3 -3
  10. package/new-dark.css +39 -48
  11. package/new-light.css +40 -53
  12. package/package.json +2 -2
package/base.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-gray-150);
@@ -42,9 +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-gray-100);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-gray-150
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
48
44
  --colors-background-neutrals: var(--colors-white);
49
45
  --colors-background-neutrals-active: var(--colors-gray-150);
50
46
  --colors-background-neutrals-container: var(--colors-white);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-white);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-400);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-200);
113
- --colors-border-focus-inner: #ffffff;
109
+ --colors-border-focus-inner: #FFFFFF;
114
110
  --colors-border-focus-middle: var(--colors-blue-400);
115
111
  --colors-border-focus-outer: var(--colors-blue-200);
116
112
  --colors-border-focus-success-inner: var(--colors-white);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-400);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-200);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-550);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -214,8 +210,8 @@
214
210
  --colors-format-icon-slides: var(--colors-coral-600);
215
211
  --colors-format-icon-table: var(--colors-moss-600);
216
212
  --colors-format-icon-timeline: var(--colors-moss-600);
217
- --colors-input-background-alt-active: var(--colors-gray-100);
218
213
  --colors-input-background-alt-default: var(--colors-gray-100);
214
+ --colors-input-background-alt-focused: var(--colors-gray-100);
219
215
  --colors-input-background-alt-hover: var(--colors-gray-100);
220
216
  --colors-input-background-default: var(--colors-white);
221
217
  --colors-input-background-disabled: var(--colors-gray-150);
@@ -264,9 +260,7 @@
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-gray-250
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-500);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -326,9 +320,7 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-gray-250
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
332
324
  --colors-text-interactive-primary: var(--colors-blue-500);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-gray-500);
389
381
  --colors-text-warning: var(--colors-yellow-800);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-600);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-100);
389
+ --radii-toolbar: var(--radii-100);
390
+ --radii-toolbar-item: var(--radii-50);
391
+ --radii-input: var(--radii-50);
392
+ --radii-button: var(--radii-50);
393
+ --radii-popup: var(--radii-100);
394
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-50);
396
+ --radii-list-item: var(--radii-50);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --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);
633
625
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
634
626
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }
package/dark.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-black-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-black-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-black-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-black-50);
14
12
  --colors-background-canvas: var(--colors-gray-950);
15
13
  --colors-background-disabled: var(--colors-gray-850);
@@ -42,9 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-gray-700
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
48
44
  --colors-background-neutrals: var(--colors-gray-950);
49
45
  --colors-background-neutrals-active: var(--colors-gray-850);
50
46
  --colors-background-neutrals-container: var(--colors-gray-850);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-gray-950);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-350);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-550);
113
- --colors-border-focus-inner: #1a1b1e;
109
+ --colors-border-focus-inner: #1A1B1E;
114
110
  --colors-border-focus-middle: var(--colors-blue-350);
115
111
  --colors-border-focus-outer: var(--colors-blue-550);
116
112
  --colors-border-focus-success-inner: var(--colors-gray-950);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-350);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-550);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-450);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -164,7 +160,7 @@
164
160
  --colors-border-warning: var(--colors-yellow-500);
165
161
  --colors-border-warning-subtle: var(--colors-yellow-700);
166
162
  --colors-badge-border: var(--colors-gray-850);
167
- --colors-badge-border-inverted: #ffffff;
163
+ --colors-badge-border-inverted: var(--colors-blue-500);
168
164
  --colors-button-background-danger: var(--colors-red-500);
169
165
  --colors-button-background-danger-hover: var(--colors-red-450);
170
166
  --colors-button-background-danger-pressed: var(--colors-red-450);
@@ -214,8 +210,8 @@
214
210
  --colors-format-icon-slides: var(--colors-coral-600);
215
211
  --colors-format-icon-table: var(--colors-moss-600);
216
212
  --colors-format-icon-timeline: var(--colors-moss-600);
217
- --colors-input-background-alt-active: var(--colors-gray-750);
218
213
  --colors-input-background-alt-default: var(--colors-gray-750);
214
+ --colors-input-background-alt-focused: var(--colors-gray-750);
219
215
  --colors-input-background-alt-hover: var(--colors-gray-750);
220
216
  --colors-input-background-default: var(--colors-gray-950);
221
217
  --colors-input-background-disabled: var(--colors-gray-850);
@@ -264,9 +260,7 @@
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-gray-600
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-400);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -326,9 +320,7 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-gray-600
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
332
324
  --colors-text-interactive-primary: var(--colors-blue-400);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-gray-300);
389
381
  --colors-text-warning: var(--colors-yellow-200);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-300);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-100);
389
+ --radii-toolbar: var(--radii-100);
390
+ --radii-toolbar-item: var(--radii-50);
391
+ --radii-input: var(--radii-50);
392
+ --radii-button: var(--radii-50);
393
+ --radii-popup: var(--radii-100);
394
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-50);
396
+ --radii-list-item: var(--radii-50);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --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);
633
- --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
634
- --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
625
+ --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
626
+ --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }
package/dist/main.js CHANGED
@@ -208,8 +208,8 @@ const colors$3 = {
208
208
  "format-icon-slides": "$coral-600",
209
209
  "format-icon-table": "$moss-600",
210
210
  "format-icon-timeline": "$moss-600",
211
- "input-background-alt-active": "$gray-100",
212
211
  "input-background-alt-default": "$gray-100",
212
+ "input-background-alt-focused": "$gray-100",
213
213
  "input-background-alt-hover": "$gray-100",
214
214
  "input-background-default": "$white",
215
215
  "input-background-disabled": "$gray-150",
@@ -766,7 +766,7 @@ const colors$2 = {
766
766
  "border-warning": "$yellow-500",
767
767
  "border-warning-subtle": "$yellow-700",
768
768
  "badge-border": "$gray-850",
769
- "badge-border-inverted": "#FFFFFF",
769
+ "badge-border-inverted": "$blue-500",
770
770
  "button-background-danger": "$red-500",
771
771
  "button-background-danger-hover": "$red-450",
772
772
  "button-background-danger-pressed": "$red-450",
@@ -816,8 +816,8 @@ const colors$2 = {
816
816
  "format-icon-slides": "$coral-600",
817
817
  "format-icon-table": "$moss-600",
818
818
  "format-icon-timeline": "$moss-600",
819
- "input-background-alt-active": "$gray-750",
820
819
  "input-background-alt-default": "$gray-750",
820
+ "input-background-alt-focused": "$gray-750",
821
821
  "input-background-alt-hover": "$gray-750",
822
822
  "input-background-default": "$gray-950",
823
823
  "input-background-disabled": "$gray-850",
@@ -1333,9 +1333,9 @@ const colors$1 = {
1333
1333
  "border-interactive-primary": "$blue-500",
1334
1334
  "border-interactive-primary-hover": "$blue-550",
1335
1335
  "border-interactive-primary-pressed": "$blue-600",
1336
- "border-interactive-secondary": "$cloud-900",
1337
- "border-interactive-secondary-hover": "$cloud-950",
1338
- "border-interactive-secondary-pressed": "$cloud-1000",
1336
+ "border-interactive-secondary": "$cloud-150",
1337
+ "border-interactive-secondary-hover": "$cloud-300",
1338
+ "border-interactive-secondary-pressed": "$cloud-350",
1339
1339
  "border-interactive-selected": "$blue-550",
1340
1340
  "border-neutrals": "$cloud-200",
1341
1341
  "border-neutrals-active": "$cloud-350",
@@ -1424,18 +1424,18 @@ const colors$1 = {
1424
1424
  "format-icon-slides": "$coral-600",
1425
1425
  "format-icon-table": "$moss-600",
1426
1426
  "format-icon-timeline": "$moss-600",
1427
- "input-background-alt-active": "$cloud-200",
1428
- "input-background-alt-default": "$cloud-150",
1429
- "input-background-alt-hover": "$cloud-200",
1427
+ "input-background-alt-default": "$cloud-100",
1428
+ "input-background-alt-focused": "$cloud-100",
1429
+ "input-background-alt-hover": "$cloud-150",
1430
1430
  "input-background-default": "$white",
1431
1431
  "input-background-disabled": "$cloud-150",
1432
1432
  "input-background-focused": "$white",
1433
1433
  "input-background-hover": "$white",
1434
- "input-border-default": "$cloud-425",
1434
+ "input-border-default": "$cloud-250",
1435
1435
  "input-border-disabled": "$transparent",
1436
1436
  "input-border-error": "$red-500",
1437
1437
  "input-border-focused": "$blue-550",
1438
- "input-border-hover": "$cloud-450",
1438
+ "input-border-hover": "$cloud-400",
1439
1439
  "input-border-success": "$green-500",
1440
1440
  "notification-background": "$cloud-850",
1441
1441
  "notification-border": "$cloud-450",
@@ -1462,12 +1462,12 @@ const colors$1 = {
1462
1462
  "icon-inverted": "$white",
1463
1463
  "icon-inverted-secondary": "$cloud-300",
1464
1464
  "icon-muted": "$cloud-400",
1465
- "icon-on-disabled": "$cloud-450",
1465
+ "icon-on-disabled": "$cloud-350",
1466
1466
  "icon-on-static-dark": "$gray-50",
1467
1467
  "icon-on-static-dark-subtle": "$gray-300",
1468
1468
  "icon-on-static-light": "$cloud-900",
1469
1469
  "icon-on-static-light-subtle": "$cloud-700",
1470
- "icon-placeholder": "$cloud-400",
1470
+ "icon-placeholder": "$cloud-475",
1471
1471
  "icon-secondary": "$cloud-700",
1472
1472
  "icon-interactive-on-inverted": "$white",
1473
1473
  "icon-interactive-on-inverted-hover": "$cloud-50",
@@ -1538,9 +1538,9 @@ const colors$1 = {
1538
1538
  "text-interactive-primary": "$blue-500",
1539
1539
  "text-interactive-primary-hover": "$blue-550",
1540
1540
  "text-interactive-primary-pressed": "$blue-600",
1541
- "text-interactive-secondary": "$cloud-700",
1542
- "text-interactive-secondary-hover": "$cloud-750",
1543
- "text-interactive-secondary-pressed": "$cloud-800",
1541
+ "text-interactive-secondary": "$cloud-500",
1542
+ "text-interactive-secondary-hover": "$cloud-600",
1543
+ "text-interactive-secondary-pressed": "$cloud-650",
1544
1544
  "text-interactive-selected": "$blue-550",
1545
1545
  "text-on-interactive-danger": "$white",
1546
1546
  "text-on-interactive-primary": "$white",
@@ -1585,7 +1585,7 @@ const colors$1 = {
1585
1585
  "text-inverted": "$white",
1586
1586
  "text-inverted-secondary": "$cloud-300",
1587
1587
  "text-muted": "$cloud-400",
1588
- "text-on-disabled": "$cloud-450",
1588
+ "text-on-disabled": "$cloud-350",
1589
1589
  "text-on-static-dark": "$cloud-50",
1590
1590
  "text-on-static-dark-subtle": "$cloud-300",
1591
1591
  "text-on-static-light": "$cloud-900",
@@ -1850,9 +1850,9 @@ const colors = {
1850
1850
  "background-danger-prominent-hover": "$red-450",
1851
1851
  "background-danger-prominent-pressed": "$red-400",
1852
1852
  "background-danger-subtle": "$red-900",
1853
- "background-danger-subtle-active": "$red-500",
1854
- "background-danger-subtle-hover": "$red-550",
1855
- "background-danger-subtle-pressed": "$red-500",
1853
+ "background-danger-subtle-active": "$red-900",
1854
+ "background-danger-subtle-hover": "$red-850",
1855
+ "background-danger-subtle-pressed": "$red-800",
1856
1856
  "background-interactive-danger": "$red-500",
1857
1857
  "background-interactive-danger-hover": "$red-450",
1858
1858
  "background-interactive-danger-pressed": "$red-400",
@@ -1982,7 +1982,7 @@ const colors = {
1982
1982
  "border-warning": "$yellow-500",
1983
1983
  "border-warning-subtle": "$yellow-700",
1984
1984
  "badge-border": "$ink-850",
1985
- "badge-border-inverted": "#FFFFFF",
1985
+ "badge-border-inverted": "$blue-500",
1986
1986
  "button-background-danger": "$red-500",
1987
1987
  "button-background-danger-hover": "$red-450",
1988
1988
  "button-background-danger-pressed": "$red-450",
@@ -2032,9 +2032,9 @@ const colors = {
2032
2032
  "format-icon-slides": "$coral-600",
2033
2033
  "format-icon-table": "$moss-600",
2034
2034
  "format-icon-timeline": "$moss-600",
2035
- "input-background-alt-active": "$ink-650",
2036
- "input-background-alt-default": "$ink-700",
2037
- "input-background-alt-hover": "$ink-650",
2035
+ "input-background-alt-default": "$ink-750",
2036
+ "input-background-alt-focused": "$ink-750",
2037
+ "input-background-alt-hover": "$ink-700",
2038
2038
  "input-background-default": "$ink-850",
2039
2039
  "input-background-disabled": "$ink-750",
2040
2040
  "input-background-focused": "$ink-800",
@@ -2043,7 +2043,7 @@ const colors = {
2043
2043
  "input-border-disabled": "$transparent",
2044
2044
  "input-border-error": "$red-400",
2045
2045
  "input-border-focused": "$blue-450",
2046
- "input-border-hover": "$ink-450",
2046
+ "input-border-hover": "$ink-400",
2047
2047
  "input-border-success": "$green-400",
2048
2048
  "notification-background": "$ink-50",
2049
2049
  "notification-border": "$ink-500",
@@ -2075,7 +2075,7 @@ const colors = {
2075
2075
  "icon-on-static-dark-subtle": "$ink-300",
2076
2076
  "icon-on-static-light": "$ink-900",
2077
2077
  "icon-on-static-light-subtle": "$ink-700",
2078
- "icon-placeholder": "$ink-400",
2078
+ "icon-placeholder": "$ink-450",
2079
2079
  "icon-secondary": "$ink-300",
2080
2080
  "icon-interactive-on-inverted": "$ink-900",
2081
2081
  "icon-interactive-on-inverted-hover": "$ink-850",
@@ -2147,13 +2147,13 @@ const colors = {
2147
2147
  "text-interactive-primary-hover": "$blue-450",
2148
2148
  "text-interactive-primary-pressed": "$blue-400",
2149
2149
  "text-interactive-secondary": "$ink-300",
2150
- "text-interactive-secondary-hover": "$ink-250",
2151
- "text-interactive-secondary-pressed": "$ink-200",
2150
+ "text-interactive-secondary-hover": "$ink-200",
2151
+ "text-interactive-secondary-pressed": "$ink-150",
2152
2152
  "text-interactive-selected": "$blue-400",
2153
2153
  "text-on-interactive-danger": "$white",
2154
2154
  "text-on-interactive-primary": "$white",
2155
2155
  "text-on-interactive-secondary": "$white",
2156
- "text-on-interactive-selected": "$blue-400",
2156
+ "text-on-interactive-selected": "$blue-200",
2157
2157
  "text-neutrals": "$ink-100",
2158
2158
  "text-neutrals-active": "$ink-50",
2159
2159
  "text-neutrals-disabled": "$ink-400",
@@ -2193,7 +2193,7 @@ const colors = {
2193
2193
  "text-inverted": "$ink-900",
2194
2194
  "text-inverted-secondary": "$ink-700",
2195
2195
  "text-muted": "$ink-400",
2196
- "text-on-disabled": "$ink-450",
2196
+ "text-on-disabled": "$ink-500",
2197
2197
  "text-on-static-dark": "$ink-50",
2198
2198
  "text-on-static-dark-subtle": "$ink-300",
2199
2199
  "text-on-static-light": "$ink-900",