@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/dist/module.js CHANGED
@@ -32,6 +32,7 @@ const colors$3 = {
32
32
  "background-interactive-primary": "$blue-500",
33
33
  "background-interactive-primary-hover": "$blue-550",
34
34
  "background-interactive-primary-pressed": "$blue-600",
35
+ "background-interactive-secondary-selected": "$blue-150",
35
36
  "background-interactive-selected": "$blue-500",
36
37
  "background-interactive-surface-hover": "$gray-100",
37
38
  "background-interactive-surface-secondary-hover": "$gray-150",
@@ -84,6 +85,8 @@ const colors$3 = {
84
85
  "border-disabled": "$gray-150",
85
86
  "border-inverted": "$white",
86
87
  "border-inverted-subtle": "$gray-700",
88
+ "border-option": "$gray-450",
89
+ "border-option-hover": "$blue-550",
87
90
  "border-static-dark": "$gray-450",
88
91
  "border-static-dark-subtle": "$gray-750",
89
92
  "border-strong": "$gray-400",
@@ -198,19 +201,18 @@ const colors$3 = {
198
201
  "format-icon-slides": "$coral-600",
199
202
  "format-icon-table": "$moss-600",
200
203
  "format-icon-timeline": "$moss-600",
201
- "input-background-active": "$white",
202
204
  "input-background-alt-active": "$gray-100",
203
205
  "input-background-alt-default": "$gray-100",
204
206
  "input-background-alt-hover": "$gray-100",
205
207
  "input-background-default": "$white",
206
208
  "input-background-disabled": "$gray-150",
209
+ "input-background-focused": "$white",
207
210
  "input-background-hover": "$white",
208
- "input-border-active": "$blue-550",
209
211
  "input-border-default": "$gray-200",
210
212
  "input-border-disabled": "$transparent",
211
213
  "input-border-error": "$red-500",
214
+ "input-border-focused": "$blue-550",
212
215
  "input-border-hover": "$blue-550",
213
- "input-border-selection-control": "$gray-450",
214
216
  "input-border-success": "$green-500",
215
217
  "notification-background": "$gray-850",
216
218
  "notification-border": "$gray-450",
@@ -220,6 +222,7 @@ const colors$3 = {
220
222
  "scrollbar-background": "$gray-300",
221
223
  "scrollbar-background-hover": "$gray-350",
222
224
  "slider-background": "$gray-300",
225
+ "slider-control-background": "$white",
223
226
  "slider-notch-background": "$gray-300",
224
227
  "switch-background-default": "$gray-300",
225
228
  "switch-background-hover": "$gray-350",
@@ -241,19 +244,19 @@ const colors$3 = {
241
244
  "icon-on-static-dark-subtle": "$gray-300",
242
245
  "icon-placeholder": "$gray-475",
243
246
  "icon-secondary": "$gray-500",
247
+ "icon-interactive-on-inverted": "$white",
248
+ "icon-interactive-on-inverted-hover": "$gray-50",
249
+ "icon-interactive-on-inverted-pressed": "$gray-100",
250
+ "icon-interactive-on-inverted-secondary": "$gray-150",
251
+ "icon-interactive-on-inverted-secondary-hover": "$gray-200",
252
+ "icon-interactive-on-inverted-secondary-pressed": "$gray-250",
253
+ "icon-interactive-primary": "$blue-500",
254
+ "icon-interactive-primary-hover": "$blue-550",
255
+ "icon-interactive-primary-pressed": "$blue-600",
256
+ "icon-interactive-secondary": "$gray-500",
257
+ "icon-interactive-secondary-hover": "$gray-550",
258
+ "icon-interactive-secondary-pressed": "$gray-600",
244
259
  "icon-interactive-selected": "$blue-550",
245
- "icon-link": "$blue-500",
246
- "icon-link-hover": "$blue-550",
247
- "icon-link-on-inverted": "$white",
248
- "icon-link-on-inverted-hover": "$gray-50",
249
- "icon-link-on-inverted-pressed": "$gray-100",
250
- "icon-link-on-inverted-secondary": "$gray-150",
251
- "icon-link-on-inverted-secondary-hover": "$gray-200",
252
- "icon-link-on-inverted-secondary-pressed": "$gray-250",
253
- "icon-link-pressed": "$blue-600",
254
- "icon-link-secondary": "$gray-500",
255
- "icon-link-secondary-hover": "$gray-550",
256
- "icon-link-secondary-pressed": "$gray-600",
257
260
  "icon-on-interactive-danger": "$white",
258
261
  "icon-on-interactive-primary": "$white",
259
262
  "icon-on-interactive-secondary": "$gray-900",
@@ -301,19 +304,19 @@ const colors$3 = {
301
304
  "text-danger-hover": "$red-550",
302
305
  "text-danger-inverted": "$red-50",
303
306
  "text-danger-pressed": "$red-600",
307
+ "text-interactive-on-inverted": "$white",
308
+ "text-interactive-on-inverted-hover": "$gray-50",
309
+ "text-interactive-on-inverted-pressed": "$gray-100",
310
+ "text-interactive-on-inverted-secondary": "$gray-150",
311
+ "text-interactive-on-inverted-secondary-hover": "$gray-200",
312
+ "text-interactive-on-inverted-secondary-pressed": "$gray-250",
313
+ "text-interactive-primary": "$blue-500",
314
+ "text-interactive-primary-hover": "$blue-550",
315
+ "text-interactive-primary-pressed": "$blue-600",
316
+ "text-interactive-secondary": "$gray-500",
317
+ "text-interactive-secondary-hover": "$gray-550",
318
+ "text-interactive-secondary-pressed": "$gray-600",
304
319
  "text-interactive-selected": "$blue-550",
305
- "text-link": "$blue-500",
306
- "text-link-hover": "$blue-550",
307
- "text-link-on-inverted": "$white",
308
- "text-link-on-inverted-hover": "$gray-50",
309
- "text-link-on-inverted-pressed": "$gray-100",
310
- "text-link-on-inverted-secondary": "$gray-150",
311
- "text-link-on-inverted-secondary-hover": "$gray-200",
312
- "text-link-on-inverted-secondary-pressed": "$gray-250",
313
- "text-link-pressed": "$blue-600",
314
- "text-link-secondary": "$gray-500",
315
- "text-link-secondary-hover": "$gray-550",
316
- "text-link-secondary-pressed": "$gray-600",
317
320
  "text-on-interactive-danger": "$white",
318
321
  "text-on-interactive-primary": "$white",
319
322
  "text-on-interactive-secondary": "$gray-900",
@@ -619,15 +622,16 @@ const colors$2 = {
619
622
  "background-danger-prominent-hover": "$red-450",
620
623
  "background-danger-prominent-pressed": "$red-400",
621
624
  "background-danger-subtle": "$red-900",
622
- "background-danger-subtle-active": "$red-500",
623
- "background-danger-subtle-hover": "$red-550",
624
- "background-danger-subtle-pressed": "$red-500",
625
+ "background-danger-subtle-active": "$red-900",
626
+ "background-danger-subtle-hover": "$red-800",
627
+ "background-danger-subtle-pressed": "$red-750",
625
628
  "background-interactive-danger": "$red-500",
626
629
  "background-interactive-danger-hover": "$red-450",
627
630
  "background-interactive-danger-pressed": "$red-400",
628
631
  "background-interactive-primary": "$blue-500",
629
632
  "background-interactive-primary-hover": "$blue-450",
630
633
  "background-interactive-primary-pressed": "$blue-400",
634
+ "background-interactive-secondary-selected": "$blue-700",
631
635
  "background-interactive-selected": "$blue-500",
632
636
  "background-interactive-surface-hover": "$gray-900",
633
637
  "background-interactive-surface-secondary-hover": "$gray-700",
@@ -680,6 +684,8 @@ const colors$2 = {
680
684
  "border-disabled": "$gray-750",
681
685
  "border-inverted": "$gray-700",
682
686
  "border-inverted-subtle": "$gray-600",
687
+ "border-option": "$gray-450",
688
+ "border-option-hover": "$blue-450",
683
689
  "border-static-dark": "$gray-450",
684
690
  "border-static-dark-subtle": "$gray-750",
685
691
  "border-strong": "$gray-500",
@@ -794,19 +800,18 @@ const colors$2 = {
794
800
  "format-icon-slides": "$coral-600",
795
801
  "format-icon-table": "$moss-600",
796
802
  "format-icon-timeline": "$moss-600",
797
- "input-background-active": "$gray-950",
798
803
  "input-background-alt-active": "$gray-750",
799
804
  "input-background-alt-default": "$gray-750",
800
805
  "input-background-alt-hover": "$gray-750",
801
806
  "input-background-default": "$gray-950",
802
807
  "input-background-disabled": "$gray-850",
808
+ "input-background-focused": "$gray-950",
803
809
  "input-background-hover": "$gray-950",
804
- "input-border-active": "$blue-350",
805
810
  "input-border-default": "$gray-650",
806
811
  "input-border-disabled": "$transparent",
807
812
  "input-border-error": "$red-400",
813
+ "input-border-focused": "$blue-350",
808
814
  "input-border-hover": "$blue-350",
809
- "input-border-selection-control": "$gray-450",
810
815
  "input-border-success": "$green-400",
811
816
  "notification-background": "$gray-150",
812
817
  "notification-border": "$gray-450",
@@ -816,6 +821,7 @@ const colors$2 = {
816
821
  "scrollbar-background": "$gray-700",
817
822
  "scrollbar-background-hover": "$gray-650",
818
823
  "slider-background": "$gray-700",
824
+ "slider-control-background": "$gray-950",
819
825
  "slider-notch-background": "$gray-700",
820
826
  "switch-background-default": "$gray-700",
821
827
  "switch-background-hover": "$gray-650",
@@ -837,19 +843,19 @@ const colors$2 = {
837
843
  "icon-on-static-dark-subtle": "$gray-300",
838
844
  "icon-placeholder": "$gray-450",
839
845
  "icon-secondary": "$gray-300",
846
+ "icon-interactive-on-inverted": "$gray-900",
847
+ "icon-interactive-on-inverted-hover": "$gray-850",
848
+ "icon-interactive-on-inverted-pressed": "$gray-800",
849
+ "icon-interactive-on-inverted-secondary": "$gray-700",
850
+ "icon-interactive-on-inverted-secondary-hover": "$gray-650",
851
+ "icon-interactive-on-inverted-secondary-pressed": "$gray-600",
852
+ "icon-interactive-primary": "$blue-400",
853
+ "icon-interactive-primary-hover": "$blue-350",
854
+ "icon-interactive-primary-pressed": "$blue-300",
855
+ "icon-interactive-secondary": "$gray-300",
856
+ "icon-interactive-secondary-hover": "$gray-250",
857
+ "icon-interactive-secondary-pressed": "$gray-200",
840
858
  "icon-interactive-selected": "$blue-400",
841
- "icon-link": "$blue-400",
842
- "icon-link-hover": "$blue-350",
843
- "icon-link-on-inverted": "$gray-900",
844
- "icon-link-on-inverted-hover": "$gray-850",
845
- "icon-link-on-inverted-pressed": "$gray-800",
846
- "icon-link-on-inverted-secondary": "$gray-700",
847
- "icon-link-on-inverted-secondary-hover": "$gray-650",
848
- "icon-link-on-inverted-secondary-pressed": "$gray-600",
849
- "icon-link-pressed": "$blue-300",
850
- "icon-link-secondary": "$gray-300",
851
- "icon-link-secondary-hover": "$gray-250",
852
- "icon-link-secondary-pressed": "$gray-200",
853
859
  "icon-on-interactive-danger": "$white",
854
860
  "icon-on-interactive-primary": "$white",
855
861
  "icon-on-interactive-secondary": "$gray-50",
@@ -897,19 +903,19 @@ const colors$2 = {
897
903
  "text-danger-hover": "$red-350",
898
904
  "text-danger-inverted": "$red-900",
899
905
  "text-danger-pressed": "$red-300",
906
+ "text-interactive-on-inverted": "$gray-900",
907
+ "text-interactive-on-inverted-hover": "$gray-850",
908
+ "text-interactive-on-inverted-pressed": "$gray-800",
909
+ "text-interactive-on-inverted-secondary": "$gray-700",
910
+ "text-interactive-on-inverted-secondary-hover": "$gray-650",
911
+ "text-interactive-on-inverted-secondary-pressed": "$gray-600",
912
+ "text-interactive-primary": "$blue-400",
913
+ "text-interactive-primary-hover": "$blue-350",
914
+ "text-interactive-primary-pressed": "$blue-300",
915
+ "text-interactive-secondary": "$gray-300",
916
+ "text-interactive-secondary-hover": "$gray-250",
917
+ "text-interactive-secondary-pressed": "$gray-200",
900
918
  "text-interactive-selected": "$blue-400",
901
- "text-link": "$blue-400",
902
- "text-link-hover": "$blue-350",
903
- "text-link-on-inverted": "$gray-900",
904
- "text-link-on-inverted-hover": "$gray-850",
905
- "text-link-on-inverted-pressed": "$gray-800",
906
- "text-link-on-inverted-secondary": "$gray-700",
907
- "text-link-on-inverted-secondary-hover": "$gray-650",
908
- "text-link-on-inverted-secondary-pressed": "$gray-600",
909
- "text-link-pressed": "$blue-300",
910
- "text-link-secondary": "$gray-300",
911
- "text-link-secondary-hover": "$gray-250",
912
- "text-link-secondary-pressed": "$gray-200",
913
919
  "text-on-interactive-danger": "$white",
914
920
  "text-on-interactive-primary": "$white",
915
921
  "text-on-interactive-secondary": "$gray-50",
@@ -1224,6 +1230,7 @@ const colors$1 = {
1224
1230
  "background-interactive-primary": "$blue-500",
1225
1231
  "background-interactive-primary-hover": "$blue-550",
1226
1232
  "background-interactive-primary-pressed": "$blue-600",
1233
+ "background-interactive-secondary-selected": "$blue-150",
1227
1234
  "background-interactive-selected": "$blue-500",
1228
1235
  "background-interactive-surface-hover": "$cloud-100",
1229
1236
  "background-interactive-surface-secondary-hover": "$cloud-150",
@@ -1276,6 +1283,8 @@ const colors$1 = {
1276
1283
  "border-disabled": "$cloud-150",
1277
1284
  "border-inverted": "$cloud-900",
1278
1285
  "border-inverted-subtle": "$cloud-700",
1286
+ "border-option": "$cloud-450",
1287
+ "border-option-hover": "$blue-550",
1279
1288
  "border-static-dark": "$cloud-450",
1280
1289
  "border-static-dark-subtle": "$cloud-750",
1281
1290
  "border-strong": "$cloud-300",
@@ -1390,19 +1399,18 @@ const colors$1 = {
1390
1399
  "format-icon-slides": "$coral-600",
1391
1400
  "format-icon-table": "$moss-600",
1392
1401
  "format-icon-timeline": "$moss-600",
1393
- "input-background-active": "$cloud-100",
1394
1402
  "input-background-alt-active": "$cloud-100",
1395
1403
  "input-background-alt-default": "$cloud-100",
1396
1404
  "input-background-alt-hover": "$cloud-100",
1397
1405
  "input-background-default": "$cloud-100",
1398
1406
  "input-background-disabled": "$cloud-150",
1407
+ "input-background-focused": "$cloud-100",
1399
1408
  "input-background-hover": "$cloud-100",
1400
- "input-border-active": "$transparent",
1401
1409
  "input-border-default": "$transparent",
1402
1410
  "input-border-disabled": "$transparent",
1403
1411
  "input-border-error": "$red-500",
1412
+ "input-border-focused": "$transparent",
1404
1413
  "input-border-hover": "$transparent",
1405
- "input-border-selection-control": "$cloud-450",
1406
1414
  "input-border-success": "$green-500",
1407
1415
  "notification-background": "$cloud-850",
1408
1416
  "notification-border": "$cloud-450",
@@ -1412,6 +1420,7 @@ const colors$1 = {
1412
1420
  "scrollbar-background": "$cloud-300",
1413
1421
  "scrollbar-background-hover": "$cloud-350",
1414
1422
  "slider-background": "$cloud-300",
1423
+ "slider-control-background": "$white",
1415
1424
  "slider-notch-background": "$cloud-300",
1416
1425
  "switch-background-default": "$cloud-300",
1417
1426
  "switch-background-hover": "$cloud-350",
@@ -1433,19 +1442,19 @@ const colors$1 = {
1433
1442
  "icon-on-static-dark-subtle": "$gray-300",
1434
1443
  "icon-placeholder": "$cloud-400",
1435
1444
  "icon-secondary": "$cloud-700",
1445
+ "icon-interactive-on-inverted": "$white",
1446
+ "icon-interactive-on-inverted-hover": "$cloud-50",
1447
+ "icon-interactive-on-inverted-pressed": "$cloud-100",
1448
+ "icon-interactive-on-inverted-secondary": "$cloud-300",
1449
+ "icon-interactive-on-inverted-secondary-hover": "$cloud-350",
1450
+ "icon-interactive-on-inverted-secondary-pressed": "$cloud-400",
1451
+ "icon-interactive-primary": "$blue-500",
1452
+ "icon-interactive-primary-hover": "$blue-550",
1453
+ "icon-interactive-primary-pressed": "$blue-600",
1454
+ "icon-interactive-secondary": "$cloud-700",
1455
+ "icon-interactive-secondary-hover": "$cloud-750",
1456
+ "icon-interactive-secondary-pressed": "$cloud-800",
1436
1457
  "icon-interactive-selected": "$blue-550",
1437
- "icon-link": "$blue-500",
1438
- "icon-link-hover": "$blue-550",
1439
- "icon-link-on-inverted": "$white",
1440
- "icon-link-on-inverted-hover": "$cloud-50",
1441
- "icon-link-on-inverted-pressed": "$cloud-100",
1442
- "icon-link-on-inverted-secondary": "$cloud-300",
1443
- "icon-link-on-inverted-secondary-hover": "$cloud-350",
1444
- "icon-link-on-inverted-secondary-pressed": "$cloud-400",
1445
- "icon-link-pressed": "$blue-600",
1446
- "icon-link-secondary": "$cloud-700",
1447
- "icon-link-secondary-hover": "$cloud-750",
1448
- "icon-link-secondary-pressed": "$cloud-800",
1449
1458
  "icon-on-interactive-danger": "$white",
1450
1459
  "icon-on-interactive-primary": "$white",
1451
1460
  "icon-on-interactive-secondary": "$cloud-900",
@@ -1493,19 +1502,19 @@ const colors$1 = {
1493
1502
  "text-danger-hover": "$red-550",
1494
1503
  "text-danger-inverted": "$red-50",
1495
1504
  "text-danger-pressed": "$red-600",
1505
+ "text-interactive-on-inverted": "$white",
1506
+ "text-interactive-on-inverted-hover": "$cloud-50",
1507
+ "text-interactive-on-inverted-pressed": "$cloud-100",
1508
+ "text-interactive-on-inverted-secondary": "$cloud-300",
1509
+ "text-interactive-on-inverted-secondary-hover": "$cloud-350",
1510
+ "text-interactive-on-inverted-secondary-pressed": "$cloud-400",
1511
+ "text-interactive-primary": "$blue-500",
1512
+ "text-interactive-primary-hover": "$blue-550",
1513
+ "text-interactive-primary-pressed": "$blue-600",
1514
+ "text-interactive-secondary": "$cloud-700",
1515
+ "text-interactive-secondary-hover": "$cloud-750",
1516
+ "text-interactive-secondary-pressed": "$cloud-800",
1496
1517
  "text-interactive-selected": "$blue-550",
1497
- "text-link": "$blue-500",
1498
- "text-link-hover": "$blue-550",
1499
- "text-link-on-inverted": "$white",
1500
- "text-link-on-inverted-hover": "$cloud-50",
1501
- "text-link-on-inverted-pressed": "$cloud-100",
1502
- "text-link-on-inverted-secondary": "$cloud-300",
1503
- "text-link-on-inverted-secondary-hover": "$cloud-350",
1504
- "text-link-on-inverted-secondary-pressed": "$cloud-400",
1505
- "text-link-pressed": "$blue-600",
1506
- "text-link-secondary": "$cloud-700",
1507
- "text-link-secondary-hover": "$cloud-750",
1508
- "text-link-secondary-pressed": "$cloud-800",
1509
1518
  "text-on-interactive-danger": "$white",
1510
1519
  "text-on-interactive-primary": "$white",
1511
1520
  "text-on-interactive-secondary": "$cloud-900",
@@ -1820,6 +1829,7 @@ const colors = {
1820
1829
  "background-interactive-primary": "$blue-500",
1821
1830
  "background-interactive-primary-hover": "$blue-450",
1822
1831
  "background-interactive-primary-pressed": "$blue-400",
1832
+ "background-interactive-secondary-selected": "$blue-700",
1823
1833
  "background-interactive-selected": "$blue-500",
1824
1834
  "background-interactive-surface-hover": "$cloud-850",
1825
1835
  "background-interactive-surface-secondary-hover": "$cloud-700",
@@ -1872,6 +1882,8 @@ const colors = {
1872
1882
  "border-disabled": "$cloud-750",
1873
1883
  "border-inverted": "$cloud-100",
1874
1884
  "border-inverted-subtle": "$cloud-500",
1885
+ "border-option": "$cloud-450",
1886
+ "border-option-hover": "$blue-450",
1875
1887
  "border-static-dark": "$cloud-450",
1876
1888
  "border-static-dark-subtle": "$cloud-750",
1877
1889
  "border-strong": "$cloud-450",
@@ -1986,19 +1998,18 @@ const colors = {
1986
1998
  "format-icon-slides": "$coral-600",
1987
1999
  "format-icon-table": "$moss-600",
1988
2000
  "format-icon-timeline": "$moss-600",
1989
- "input-background-active": "$cloud-850",
1990
2001
  "input-background-alt-active": "$cloud-950",
1991
2002
  "input-background-alt-default": "$cloud-950",
1992
2003
  "input-background-alt-hover": "$cloud-950",
1993
2004
  "input-background-default": "$cloud-850",
1994
2005
  "input-background-disabled": "$cloud-850",
2006
+ "input-background-focused": "$cloud-850",
1995
2007
  "input-background-hover": "$cloud-850",
1996
- "input-border-active": "$transparent",
1997
2008
  "input-border-default": "$transparent",
1998
2009
  "input-border-disabled": "$transparent",
1999
2010
  "input-border-error": "$red-400",
2011
+ "input-border-focused": "$transparent",
2000
2012
  "input-border-hover": "$transparent",
2001
- "input-border-selection-control": "$cloud-450",
2002
2013
  "input-border-success": "$green-400",
2003
2014
  "notification-background": "$cloud-150",
2004
2015
  "notification-border": "$cloud-450",
@@ -2008,6 +2019,7 @@ const colors = {
2008
2019
  "scrollbar-background": "$gray-700",
2009
2020
  "scrollbar-background-hover": "$gray-650",
2010
2021
  "slider-background": "$gray-700",
2022
+ "slider-control-background": "$cloud-900",
2011
2023
  "slider-notch-background": "$gray-700",
2012
2024
  "switch-background-default": "$gray-700",
2013
2025
  "switch-background-hover": "$gray-650",
@@ -2029,19 +2041,19 @@ const colors = {
2029
2041
  "icon-on-static-dark-subtle": "$gray-300",
2030
2042
  "icon-placeholder": "$cloud-400",
2031
2043
  "icon-secondary": "$cloud-300",
2044
+ "icon-interactive-on-inverted": "$cloud-900",
2045
+ "icon-interactive-on-inverted-hover": "$cloud-850",
2046
+ "icon-interactive-on-inverted-pressed": "$cloud-800",
2047
+ "icon-interactive-on-inverted-secondary": "$cloud-700",
2048
+ "icon-interactive-on-inverted-secondary-hover": "$cloud-650",
2049
+ "icon-interactive-on-inverted-secondary-pressed": "$cloud-600",
2050
+ "icon-interactive-primary": "$blue-500",
2051
+ "icon-interactive-primary-hover": "$blue-450",
2052
+ "icon-interactive-primary-pressed": "$blue-400",
2053
+ "icon-interactive-secondary": "$cloud-300",
2054
+ "icon-interactive-secondary-hover": "$cloud-250",
2055
+ "icon-interactive-secondary-pressed": "$cloud-200",
2032
2056
  "icon-interactive-selected": "$blue-400",
2033
- "icon-link": "$blue-500",
2034
- "icon-link-hover": "$blue-450",
2035
- "icon-link-on-inverted": "$cloud-900",
2036
- "icon-link-on-inverted-hover": "$cloud-850",
2037
- "icon-link-on-inverted-pressed": "$cloud-800",
2038
- "icon-link-on-inverted-secondary": "$cloud-700",
2039
- "icon-link-on-inverted-secondary-hover": "$cloud-650",
2040
- "icon-link-on-inverted-secondary-pressed": "$cloud-600",
2041
- "icon-link-pressed": "$blue-400",
2042
- "icon-link-secondary": "$cloud-300",
2043
- "icon-link-secondary-hover": "$cloud-250",
2044
- "icon-link-secondary-pressed": "$cloud-200",
2045
2057
  "icon-on-interactive-danger": "$white",
2046
2058
  "icon-on-interactive-primary": "$white",
2047
2059
  "icon-on-interactive-secondary": "$white",
@@ -2089,19 +2101,19 @@ const colors = {
2089
2101
  "text-danger-hover": "$red-350",
2090
2102
  "text-danger-inverted": "$red-900",
2091
2103
  "text-danger-pressed": "$red-300",
2104
+ "text-interactive-on-inverted": "$cloud-900",
2105
+ "text-interactive-on-inverted-hover": "$cloud-850",
2106
+ "text-interactive-on-inverted-pressed": "$cloud-800",
2107
+ "text-interactive-on-inverted-secondary": "$cloud-700",
2108
+ "text-interactive-on-inverted-secondary-hover": "$cloud-650",
2109
+ "text-interactive-on-inverted-secondary-pressed": "$cloud-600",
2110
+ "text-interactive-primary": "$blue-500",
2111
+ "text-interactive-primary-hover": "$blue-450",
2112
+ "text-interactive-primary-pressed": "$blue-400",
2113
+ "text-interactive-secondary": "$cloud-300",
2114
+ "text-interactive-secondary-hover": "$cloud-250",
2115
+ "text-interactive-secondary-pressed": "$cloud-200",
2092
2116
  "text-interactive-selected": "$blue-400",
2093
- "text-link": "$blue-500",
2094
- "text-link-hover": "$blue-450",
2095
- "text-link-on-inverted": "$cloud-900",
2096
- "text-link-on-inverted-hover": "$cloud-850",
2097
- "text-link-on-inverted-pressed": "$cloud-800",
2098
- "text-link-on-inverted-secondary": "$cloud-700",
2099
- "text-link-on-inverted-secondary-hover": "$cloud-650",
2100
- "text-link-on-inverted-secondary-pressed": "$cloud-600",
2101
- "text-link-pressed": "$blue-400",
2102
- "text-link-secondary": "$cloud-300",
2103
- "text-link-secondary-hover": "$cloud-250",
2104
- "text-link-secondary-pressed": "$cloud-200",
2105
2117
  "text-on-interactive-danger": "$white",
2106
2118
  "text-on-interactive-primary": "$white",
2107
2119
  "text-on-interactive-secondary": "$white",