@mirohq/design-system-themes 1.4.9 → 1.4.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 (13) hide show
  1. package/base.css +28 -0
  2. package/base.json +28 -0
  3. package/dark.css +28 -0
  4. package/dist/main.js +114 -2
  5. package/dist/main.js.map +1 -1
  6. package/dist/module.js +114 -2
  7. package/dist/module.js.map +1 -1
  8. package/dist/types.d.ts +1 -1
  9. package/light.css +28 -0
  10. package/metadata.json +84 -0
  11. package/new-dark.css +29 -1
  12. package/new-light.css +29 -1
  13. package/package.json +2 -2
package/dist/module.js CHANGED
@@ -164,7 +164,19 @@ const colors$3 = {
164
164
  "button-background-danger-pressed": "$red-600",
165
165
  "button-background-ghost": "$transparent",
166
166
  "button-background-ghost-hover": "$gray-150",
167
+ "button-background-ghost-inverse-hover": "$gray-800",
168
+ "button-background-ghost-inverse-pressed": "$gray-750",
167
169
  "button-background-ghost-pressed": "$gray-200",
170
+ "button-background-info": "$blue-500",
171
+ "button-background-info-hover": "$blue-550",
172
+ "button-background-info-pressed": "$blue-600",
173
+ "button-background-inverse": "$blue-500",
174
+ "button-background-inverse-disabled": "$gray-850",
175
+ "button-background-inverse-hover": "$blue-550",
176
+ "button-background-inverse-pressed": "$blue-600",
177
+ "button-background-inverse-secondary": "$gray-750",
178
+ "button-background-inverse-secondary-hover": "$gray-700",
179
+ "button-background-inverse-secondary-pressed": "$gray-700",
168
180
  "button-background-primary": "$blue-500",
169
181
  "button-background-primary-hover": "$blue-550",
170
182
  "button-background-primary-pressed": "$blue-600",
@@ -174,11 +186,17 @@ const colors$3 = {
174
186
  "button-background-tertiary": "$transparent",
175
187
  "button-background-tertiary-hover": "$blue-150",
176
188
  "button-background-tertiary-pressed": "$blue-200",
189
+ "button-background-warning": "$yellow-700",
190
+ "button-background-warning-hover": "$yellow-750",
191
+ "button-background-warning-pressed": "$yellow-800",
177
192
  "button-border-danger": "$red-500",
178
193
  "button-border-danger-hover": "$red-550",
179
194
  "button-border-danger-pressed": "$red-600",
180
195
  "button-border-ghost-hover": "$transparent",
181
196
  "button-border-ghost-pressed": "$transparent",
197
+ "button-border-inverse-secondary": "$gray-750",
198
+ "button-border-inverse-secondary-hover": "$gray-700",
199
+ "button-border-inverse-secondary-pressed": "$gray-650",
182
200
  "button-border-primary": "$blue-500",
183
201
  "button-border-primary-hover": "$blue-550",
184
202
  "button-border-primary-pressed": "$blue-600",
@@ -189,10 +207,16 @@ const colors$3 = {
189
207
  "button-border-tertiary-hover": "$blue-550",
190
208
  "button-border-tertiary-pressed": "$blue-600",
191
209
  "button-icon-on-danger": "$white",
210
+ "button-icon-on-inverse": "$white",
211
+ "button-icon-on-inverse-disabled": "$gray-450",
212
+ "button-icon-on-inverse-secondary": "$gray-50",
192
213
  "button-icon-on-primary": "$white",
193
214
  "button-icon-on-secondary": "$gray-900",
194
215
  "button-icon-on-tertiary": "$blue-500",
195
216
  "button-text-on-danger": "$white",
217
+ "button-text-on-inverse": "$white",
218
+ "button-text-on-inverse-disabled": "$gray-450",
219
+ "button-text-on-inverse-secondary": "$gray-50",
196
220
  "button-text-on-primary": "$white",
197
221
  "button-text-on-secondary": "$gray-900",
198
222
  "button-text-on-tertiary": "$blue-500",
@@ -255,6 +279,7 @@ const colors$3 = {
255
279
  "toolbar-item-background-selected": "$blue-150",
256
280
  "tooltip-background": "$gray-950",
257
281
  "tooltip-background-inset": "$gray-650",
282
+ "tooltip-background-inverse": "$gray-650",
258
283
  "icon-danger": "$red-500",
259
284
  "icon-danger-active": "$red-600",
260
285
  "icon-danger-hover": "$red-550",
@@ -266,6 +291,7 @@ const colors$3 = {
266
291
  "icon-inverted-secondary": "$gray-150",
267
292
  "icon-muted": "$gray-400",
268
293
  "icon-on-disabled": "$gray-350",
294
+ "icon-on-disabled-inverse": "$gray-450",
269
295
  "icon-on-static-dark": "$gray-50",
270
296
  "icon-on-static-dark-subtle": "$gray-300",
271
297
  "icon-on-static-light": "$gray-900",
@@ -278,6 +304,7 @@ const colors$3 = {
278
304
  "icon-interactive-on-inverted-secondary": "$gray-150",
279
305
  "icon-interactive-on-inverted-secondary-hover": "$gray-200",
280
306
  "icon-interactive-on-inverted-secondary-pressed": "$gray-250",
307
+ "icon-interactive-on-inverted-selected": "$blue-400",
281
308
  "icon-interactive-primary": "$blue-500",
282
309
  "icon-interactive-primary-hover": "$blue-550",
283
310
  "icon-interactive-primary-pressed": "$blue-600",
@@ -389,6 +416,7 @@ const colors$3 = {
389
416
  "text-inverted-secondary": "$gray-150",
390
417
  "text-muted": "$gray-400",
391
418
  "text-on-disabled": "$gray-350",
419
+ "text-on-inverse-disabled": "$gray-450",
392
420
  "text-on-static-dark": "$gray-50",
393
421
  "text-on-static-dark-subtle": "$gray-300",
394
422
  "text-on-static-light": "$gray-900",
@@ -793,7 +821,19 @@ const colors$2 = {
793
821
  "button-background-danger-pressed": "$red-450",
794
822
  "button-background-ghost": "$transparent",
795
823
  "button-background-ghost-hover": "$gray-800",
824
+ "button-background-ghost-inverse-hover": "$gray-150",
825
+ "button-background-ghost-inverse-pressed": "$gray-200",
796
826
  "button-background-ghost-pressed": "$gray-750",
827
+ "button-background-info": "$blue-500",
828
+ "button-background-info-hover": "$blue-550",
829
+ "button-background-info-pressed": "$blue-600",
830
+ "button-background-inverse": "$blue-500",
831
+ "button-background-inverse-disabled": "$gray-150",
832
+ "button-background-inverse-hover": "$blue-450",
833
+ "button-background-inverse-pressed": "$blue-400",
834
+ "button-background-inverse-secondary": "$gray-150",
835
+ "button-background-inverse-secondary-hover": "$gray-200",
836
+ "button-background-inverse-secondary-pressed": "$gray-250",
797
837
  "button-background-primary": "$blue-500",
798
838
  "button-background-primary-hover": "$blue-450",
799
839
  "button-background-primary-pressed": "$blue-400",
@@ -803,11 +843,17 @@ const colors$2 = {
803
843
  "button-background-tertiary": "$transparent",
804
844
  "button-background-tertiary-hover": "$blue-900",
805
845
  "button-background-tertiary-pressed": "$blue-800",
846
+ "button-background-warning": "$yellow-700",
847
+ "button-background-warning-hover": "$yellow-750",
848
+ "button-background-warning-pressed": "$yellow-800",
806
849
  "button-border-danger": "$red-500",
807
850
  "button-border-danger-hover": "$red-450",
808
851
  "button-border-danger-pressed": "$red-400",
809
852
  "button-border-ghost-hover": "$transparent",
810
853
  "button-border-ghost-pressed": "$transparent",
854
+ "button-border-inverse-secondary": "$gray-150",
855
+ "button-border-inverse-secondary-hover": "$gray-200",
856
+ "button-border-inverse-secondary-pressed": "$gray-250",
811
857
  "button-border-primary": "$blue-500",
812
858
  "button-border-primary-hover": "$blue-450",
813
859
  "button-border-primary-pressed": "$blue-400",
@@ -818,10 +864,16 @@ const colors$2 = {
818
864
  "button-border-tertiary-hover": "$blue-450",
819
865
  "button-border-tertiary-pressed": "$blue-400",
820
866
  "button-icon-on-danger": "$white",
867
+ "button-icon-on-inverse": "$white",
868
+ "button-icon-on-inverse-disabled": "$gray-350",
869
+ "button-icon-on-inverse-secondary": "$gray-900",
821
870
  "button-icon-on-primary": "$white",
822
871
  "button-icon-on-secondary": "$gray-50",
823
872
  "button-icon-on-tertiary": "$blue-400",
824
873
  "button-text-on-danger": "$white",
874
+ "button-text-on-inverse": "$white",
875
+ "button-text-on-inverse-disabled": "$gray-350",
876
+ "button-text-on-inverse-secondary": "$gray-900",
825
877
  "button-text-on-primary": "$white",
826
878
  "button-text-on-secondary": "$gray-50",
827
879
  "button-text-on-tertiary": "$blue-400",
@@ -884,6 +936,7 @@ const colors$2 = {
884
936
  "toolbar-item-background-selected": "$blue-700",
885
937
  "tooltip-background": "$gray-650",
886
938
  "tooltip-background-inset": "$gray-650",
939
+ "tooltip-background-inverse": "$gray-950",
887
940
  "icon-danger": "$red-400",
888
941
  "icon-danger-active": "$red-300",
889
942
  "icon-danger-hover": "$red-350",
@@ -895,6 +948,7 @@ const colors$2 = {
895
948
  "icon-inverted-secondary": "$gray-700",
896
949
  "icon-muted": "$gray-400",
897
950
  "icon-on-disabled": "$gray-450",
951
+ "icon-on-disabled-inverse": "$gray-350",
898
952
  "icon-on-static-dark": "$gray-50",
899
953
  "icon-on-static-dark-subtle": "$gray-300",
900
954
  "icon-on-static-light": "$gray-900",
@@ -907,6 +961,7 @@ const colors$2 = {
907
961
  "icon-interactive-on-inverted-secondary": "$gray-700",
908
962
  "icon-interactive-on-inverted-secondary-hover": "$gray-650",
909
963
  "icon-interactive-on-inverted-secondary-pressed": "$gray-600",
964
+ "icon-interactive-on-inverted-selected": "$blue-550",
910
965
  "icon-interactive-primary": "$blue-400",
911
966
  "icon-interactive-primary-hover": "$blue-350",
912
967
  "icon-interactive-primary-pressed": "$blue-300",
@@ -1018,6 +1073,7 @@ const colors$2 = {
1018
1073
  "text-inverted-secondary": "$gray-700",
1019
1074
  "text-muted": "$gray-400",
1020
1075
  "text-on-disabled": "$gray-450",
1076
+ "text-on-inverse-disabled": "$gray-350",
1021
1077
  "text-on-static-dark": "$gray-50",
1022
1078
  "text-on-static-dark-subtle": "$gray-300",
1023
1079
  "text-on-static-light": "$gray-900",
@@ -1422,7 +1478,19 @@ const colors$1 = {
1422
1478
  "button-background-danger-pressed": "$red-600",
1423
1479
  "button-background-ghost": "$transparent",
1424
1480
  "button-background-ghost-hover": "$cloud-150",
1481
+ "button-background-ghost-inverse-hover": "$cloud-750",
1482
+ "button-background-ghost-inverse-pressed": "$cloud-700",
1425
1483
  "button-background-ghost-pressed": "$cloud-200",
1484
+ "button-background-info": "$blue-500",
1485
+ "button-background-info-hover": "$blue-550",
1486
+ "button-background-info-pressed": "$blue-600",
1487
+ "button-background-inverse": "$white",
1488
+ "button-background-inverse-disabled": "$cloud-650",
1489
+ "button-background-inverse-hover": "$cloud-100",
1490
+ "button-background-inverse-pressed": "$cloud-150",
1491
+ "button-background-inverse-secondary": "$cloud-700",
1492
+ "button-background-inverse-secondary-hover": "$cloud-650",
1493
+ "button-background-inverse-secondary-pressed": "$cloud-600",
1426
1494
  "button-background-primary": "$cloud-800",
1427
1495
  "button-background-primary-hover": "$cloud-900",
1428
1496
  "button-background-primary-pressed": "$cloud-950",
@@ -1432,11 +1500,17 @@ const colors$1 = {
1432
1500
  "button-background-tertiary": "$transparent",
1433
1501
  "button-background-tertiary-hover": "$cloud-150",
1434
1502
  "button-background-tertiary-pressed": "$cloud-200",
1503
+ "button-background-warning": "$yellow-700",
1504
+ "button-background-warning-hover": "$yellow-750",
1505
+ "button-background-warning-pressed": "$yellow-800",
1435
1506
  "button-border-danger": "$red-500",
1436
1507
  "button-border-danger-hover": "$red-550",
1437
1508
  "button-border-danger-pressed": "$red-600",
1438
1509
  "button-border-ghost-hover": "$transparent",
1439
1510
  "button-border-ghost-pressed": "$transparent",
1511
+ "button-border-inverse-secondary": "$transparent",
1512
+ "button-border-inverse-secondary-hover": "$transparent",
1513
+ "button-border-inverse-secondary-pressed": "$transparent",
1440
1514
  "button-border-primary": "$blue-500",
1441
1515
  "button-border-primary-hover": "$blue-550",
1442
1516
  "button-border-primary-pressed": "$blue-600",
@@ -1447,10 +1521,16 @@ const colors$1 = {
1447
1521
  "button-border-tertiary-hover": "$cloud-550",
1448
1522
  "button-border-tertiary-pressed": "$cloud-600",
1449
1523
  "button-icon-on-danger": "$white",
1524
+ "button-icon-on-inverse": "$cloud-900",
1525
+ "button-icon-on-inverse-disabled": "$cloud-500",
1526
+ "button-icon-on-inverse-secondary": "$white",
1450
1527
  "button-icon-on-primary": "$white",
1451
1528
  "button-icon-on-secondary": "$cloud-900",
1452
1529
  "button-icon-on-tertiary": "$cloud-900",
1453
1530
  "button-text-on-danger": "$white",
1531
+ "button-text-on-inverse": "$cloud-900",
1532
+ "button-text-on-inverse-disabled": "$cloud-500",
1533
+ "button-text-on-inverse-secondary": "$white",
1454
1534
  "button-text-on-primary": "$white",
1455
1535
  "button-text-on-secondary": "$cloud-900",
1456
1536
  "button-text-on-tertiary": "$cloud-900",
@@ -1513,6 +1593,7 @@ const colors$1 = {
1513
1593
  "toolbar-item-background-selected": "$cloud-150",
1514
1594
  "tooltip-background": "$cloud-950",
1515
1595
  "tooltip-background-inset": "$cloud-650",
1596
+ "tooltip-background-inverse": "$cloud-650",
1516
1597
  "icon-danger": "$red-500",
1517
1598
  "icon-danger-active": "$red-600",
1518
1599
  "icon-danger-hover": "$red-550",
@@ -1524,6 +1605,7 @@ const colors$1 = {
1524
1605
  "icon-inverted-secondary": "$cloud-300",
1525
1606
  "icon-muted": "$cloud-500",
1526
1607
  "icon-on-disabled": "$cloud-350",
1608
+ "icon-on-disabled-inverse": "$cloud-450",
1527
1609
  "icon-on-static-dark": "$cloud-50",
1528
1610
  "icon-on-static-dark-subtle": "$cloud-300",
1529
1611
  "icon-on-static-light": "$cloud-900",
@@ -1536,6 +1618,7 @@ const colors$1 = {
1536
1618
  "icon-interactive-on-inverted-secondary": "$cloud-300",
1537
1619
  "icon-interactive-on-inverted-secondary-hover": "$cloud-350",
1538
1620
  "icon-interactive-on-inverted-secondary-pressed": "$cloud-400",
1621
+ "icon-interactive-on-inverted-selected": "$blue-400",
1539
1622
  "icon-interactive-primary": "$blue-500",
1540
1623
  "icon-interactive-primary-hover": "$blue-550",
1541
1624
  "icon-interactive-primary-pressed": "$blue-600",
@@ -1647,6 +1730,7 @@ const colors$1 = {
1647
1730
  "text-inverted-secondary": "$cloud-300",
1648
1731
  "text-muted": "$cloud-500",
1649
1732
  "text-on-disabled": "$cloud-350",
1733
+ "text-on-inverse-disabled": "$cloud-500",
1650
1734
  "text-on-static-dark": "$white",
1651
1735
  "text-on-static-dark-subtle": "$cloud-300",
1652
1736
  "text-on-static-light": "$cloud-900",
@@ -2051,7 +2135,19 @@ const colors = {
2051
2135
  "button-background-danger-pressed": "$red-450",
2052
2136
  "button-background-ghost": "$transparent",
2053
2137
  "button-background-ghost-hover": "$ink-750",
2138
+ "button-background-ghost-inverse-hover": "$ink-150",
2139
+ "button-background-ghost-inverse-pressed": "$ink-200",
2054
2140
  "button-background-ghost-pressed": "$ink-700",
2141
+ "button-background-info": "$blue-500",
2142
+ "button-background-info-hover": "$blue-550",
2143
+ "button-background-info-pressed": "$blue-600",
2144
+ "button-background-inverse": "$ink-800",
2145
+ "button-background-inverse-disabled": "$ink-150",
2146
+ "button-background-inverse-hover": "$ink-900",
2147
+ "button-background-inverse-pressed": "$ink-950",
2148
+ "button-background-inverse-secondary": "$ink-150",
2149
+ "button-background-inverse-secondary-hover": "$ink-200",
2150
+ "button-background-inverse-secondary-pressed": "$ink-250",
2055
2151
  "button-background-primary": "$white",
2056
2152
  "button-background-primary-hover": "$ink-100",
2057
2153
  "button-background-primary-pressed": "$ink-150",
@@ -2061,11 +2157,17 @@ const colors = {
2061
2157
  "button-background-tertiary": "$transparent",
2062
2158
  "button-background-tertiary-hover": "$ink-750",
2063
2159
  "button-background-tertiary-pressed": "$ink-700",
2160
+ "button-background-warning": "$yellow-700",
2161
+ "button-background-warning-hover": "$yellow-750",
2162
+ "button-background-warning-pressed": "$yellow-800",
2064
2163
  "button-border-danger": "$red-500",
2065
2164
  "button-border-danger-hover": "$red-450",
2066
2165
  "button-border-danger-pressed": "$red-400",
2067
2166
  "button-border-ghost-hover": "$transparent",
2068
2167
  "button-border-ghost-pressed": "$transparent",
2168
+ "button-border-inverse-secondary": "$transparent",
2169
+ "button-border-inverse-secondary-hover": "$transparent",
2170
+ "button-border-inverse-secondary-pressed": "$transparent",
2069
2171
  "button-border-primary": "$blue-500",
2070
2172
  "button-border-primary-hover": "$blue-450",
2071
2173
  "button-border-primary-pressed": "$blue-400",
@@ -2076,10 +2178,16 @@ const colors = {
2076
2178
  "button-border-tertiary-hover": "$ink-550",
2077
2179
  "button-border-tertiary-pressed": "$ink-500",
2078
2180
  "button-icon-on-danger": "$white",
2181
+ "button-icon-on-inverse": "$white",
2182
+ "button-icon-on-inverse-disabled": "$ink-350",
2183
+ "button-icon-on-inverse-secondary": "$ink-900",
2079
2184
  "button-icon-on-primary": "$ink-900",
2080
2185
  "button-icon-on-secondary": "$white",
2081
2186
  "button-icon-on-tertiary": "$white",
2082
2187
  "button-text-on-danger": "$white",
2188
+ "button-text-on-inverse": "$white",
2189
+ "button-text-on-inverse-disabled": "$ink-350",
2190
+ "button-text-on-inverse-secondary": "$ink-900",
2083
2191
  "button-text-on-primary": "$ink-900",
2084
2192
  "button-text-on-secondary": "$white",
2085
2193
  "button-text-on-tertiary": "$white",
@@ -2142,6 +2250,7 @@ const colors = {
2142
2250
  "toolbar-item-background-selected": "$ink-700",
2143
2251
  "tooltip-background": "$ink-650",
2144
2252
  "tooltip-background-inset": "$ink-800",
2253
+ "tooltip-background-inverse": "$ink-950",
2145
2254
  "icon-danger": "$red-400",
2146
2255
  "icon-danger-active": "$red-300",
2147
2256
  "icon-danger-hover": "$red-350",
@@ -2153,6 +2262,7 @@ const colors = {
2153
2262
  "icon-inverted-secondary": "$ink-700",
2154
2263
  "icon-muted": "$ink-400",
2155
2264
  "icon-on-disabled": "$ink-450",
2265
+ "icon-on-disabled-inverse": "$ink-350",
2156
2266
  "icon-on-static-dark": "$ink-50",
2157
2267
  "icon-on-static-dark-subtle": "$ink-300",
2158
2268
  "icon-on-static-light": "$ink-900",
@@ -2165,6 +2275,7 @@ const colors = {
2165
2275
  "icon-interactive-on-inverted-secondary": "$ink-700",
2166
2276
  "icon-interactive-on-inverted-secondary-hover": "$ink-650",
2167
2277
  "icon-interactive-on-inverted-secondary-pressed": "$ink-600",
2278
+ "icon-interactive-on-inverted-selected": "$blue-550",
2168
2279
  "icon-interactive-primary": "$blue-500",
2169
2280
  "icon-interactive-primary-hover": "$blue-450",
2170
2281
  "icon-interactive-primary-pressed": "$blue-400",
@@ -2276,6 +2387,7 @@ const colors = {
2276
2387
  "text-inverted-secondary": "$ink-700",
2277
2388
  "text-muted": "$ink-400",
2278
2389
  "text-on-disabled": "$ink-500",
2390
+ "text-on-inverse-disabled": "$ink-350",
2279
2391
  "text-on-static-dark": "$white",
2280
2392
  "text-on-static-dark-subtle": "$ink-300",
2281
2393
  "text-on-static-light": "$ink-900",
@@ -2602,7 +2714,7 @@ const radii$1 = {
2602
2714
  input: "$150",
2603
2715
  "list-item": "$150",
2604
2716
  notification: "$200",
2605
- "notification-banner": "$round",
2717
+ "notification-banner": "$200",
2606
2718
  panel: "$200",
2607
2719
  popover: "$150",
2608
2720
  tag: "$round",
@@ -2624,7 +2736,7 @@ const radii = {
2624
2736
  input: "$150",
2625
2737
  "list-item": "$150",
2626
2738
  notification: "$200",
2627
- "notification-banner": "$round",
2739
+ "notification-banner": "$200",
2628
2740
  panel: "$200",
2629
2741
  popover: "$150",
2630
2742
  tag: "$round",