@mirohq/design-system-themes 1.4.9 → 1.4.10
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.
- package/base.css +20 -0
- package/base.json +20 -0
- package/dark.css +20 -0
- package/dist/main.js +82 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +82 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/light.css +20 -0
- package/metadata.json +60 -0
- package/new-dark.css +21 -1
- package/new-light.css +21 -1
- package/package.json +2 -2
package/dist/module.js
CHANGED
|
@@ -164,7 +164,16 @@ 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-inverse": "$blue-500",
|
|
171
|
+
"button-background-inverse-disabled": "$gray-850",
|
|
172
|
+
"button-background-inverse-hover": "$blue-550",
|
|
173
|
+
"button-background-inverse-pressed": "$blue-600",
|
|
174
|
+
"button-background-inverse-secondary": "$gray-750",
|
|
175
|
+
"button-background-inverse-secondary-hover": "$gray-700",
|
|
176
|
+
"button-background-inverse-secondary-pressed": "$gray-700",
|
|
168
177
|
"button-background-primary": "$blue-500",
|
|
169
178
|
"button-background-primary-hover": "$blue-550",
|
|
170
179
|
"button-background-primary-pressed": "$blue-600",
|
|
@@ -179,6 +188,9 @@ const colors$3 = {
|
|
|
179
188
|
"button-border-danger-pressed": "$red-600",
|
|
180
189
|
"button-border-ghost-hover": "$transparent",
|
|
181
190
|
"button-border-ghost-pressed": "$transparent",
|
|
191
|
+
"button-border-inverse-secondary": "$gray-750",
|
|
192
|
+
"button-border-inverse-secondary-hover": "$gray-700",
|
|
193
|
+
"button-border-inverse-secondary-pressed": "$gray-650",
|
|
182
194
|
"button-border-primary": "$blue-500",
|
|
183
195
|
"button-border-primary-hover": "$blue-550",
|
|
184
196
|
"button-border-primary-pressed": "$blue-600",
|
|
@@ -189,10 +201,16 @@ const colors$3 = {
|
|
|
189
201
|
"button-border-tertiary-hover": "$blue-550",
|
|
190
202
|
"button-border-tertiary-pressed": "$blue-600",
|
|
191
203
|
"button-icon-on-danger": "$white",
|
|
204
|
+
"button-icon-on-inverse": "$white",
|
|
205
|
+
"button-icon-on-inverse-disabled": "$gray-450",
|
|
206
|
+
"button-icon-on-inverse-secondary": "$gray-50",
|
|
192
207
|
"button-icon-on-primary": "$white",
|
|
193
208
|
"button-icon-on-secondary": "$gray-900",
|
|
194
209
|
"button-icon-on-tertiary": "$blue-500",
|
|
195
210
|
"button-text-on-danger": "$white",
|
|
211
|
+
"button-text-on-inverse": "$white",
|
|
212
|
+
"button-text-on-inverse-disabled": "$gray-450",
|
|
213
|
+
"button-text-on-inverse-secondary": "$gray-50",
|
|
196
214
|
"button-text-on-primary": "$white",
|
|
197
215
|
"button-text-on-secondary": "$gray-900",
|
|
198
216
|
"button-text-on-tertiary": "$blue-500",
|
|
@@ -255,6 +273,7 @@ const colors$3 = {
|
|
|
255
273
|
"toolbar-item-background-selected": "$blue-150",
|
|
256
274
|
"tooltip-background": "$gray-950",
|
|
257
275
|
"tooltip-background-inset": "$gray-650",
|
|
276
|
+
"tooltip-background-inverse": "$gray-650",
|
|
258
277
|
"icon-danger": "$red-500",
|
|
259
278
|
"icon-danger-active": "$red-600",
|
|
260
279
|
"icon-danger-hover": "$red-550",
|
|
@@ -266,6 +285,7 @@ const colors$3 = {
|
|
|
266
285
|
"icon-inverted-secondary": "$gray-150",
|
|
267
286
|
"icon-muted": "$gray-400",
|
|
268
287
|
"icon-on-disabled": "$gray-350",
|
|
288
|
+
"icon-on-disabled-inverse": "$gray-450",
|
|
269
289
|
"icon-on-static-dark": "$gray-50",
|
|
270
290
|
"icon-on-static-dark-subtle": "$gray-300",
|
|
271
291
|
"icon-on-static-light": "$gray-900",
|
|
@@ -793,7 +813,16 @@ const colors$2 = {
|
|
|
793
813
|
"button-background-danger-pressed": "$red-450",
|
|
794
814
|
"button-background-ghost": "$transparent",
|
|
795
815
|
"button-background-ghost-hover": "$gray-800",
|
|
816
|
+
"button-background-ghost-inverse-hover": "$gray-150",
|
|
817
|
+
"button-background-ghost-inverse-pressed": "$gray-200",
|
|
796
818
|
"button-background-ghost-pressed": "$gray-750",
|
|
819
|
+
"button-background-inverse": "$blue-500",
|
|
820
|
+
"button-background-inverse-disabled": "$gray-150",
|
|
821
|
+
"button-background-inverse-hover": "$blue-450",
|
|
822
|
+
"button-background-inverse-pressed": "$blue-400",
|
|
823
|
+
"button-background-inverse-secondary": "$gray-150",
|
|
824
|
+
"button-background-inverse-secondary-hover": "$gray-200",
|
|
825
|
+
"button-background-inverse-secondary-pressed": "$gray-250",
|
|
797
826
|
"button-background-primary": "$blue-500",
|
|
798
827
|
"button-background-primary-hover": "$blue-450",
|
|
799
828
|
"button-background-primary-pressed": "$blue-400",
|
|
@@ -808,6 +837,9 @@ const colors$2 = {
|
|
|
808
837
|
"button-border-danger-pressed": "$red-400",
|
|
809
838
|
"button-border-ghost-hover": "$transparent",
|
|
810
839
|
"button-border-ghost-pressed": "$transparent",
|
|
840
|
+
"button-border-inverse-secondary": "$gray-150",
|
|
841
|
+
"button-border-inverse-secondary-hover": "$gray-200",
|
|
842
|
+
"button-border-inverse-secondary-pressed": "$gray-250",
|
|
811
843
|
"button-border-primary": "$blue-500",
|
|
812
844
|
"button-border-primary-hover": "$blue-450",
|
|
813
845
|
"button-border-primary-pressed": "$blue-400",
|
|
@@ -818,10 +850,16 @@ const colors$2 = {
|
|
|
818
850
|
"button-border-tertiary-hover": "$blue-450",
|
|
819
851
|
"button-border-tertiary-pressed": "$blue-400",
|
|
820
852
|
"button-icon-on-danger": "$white",
|
|
853
|
+
"button-icon-on-inverse": "$white",
|
|
854
|
+
"button-icon-on-inverse-disabled": "$gray-350",
|
|
855
|
+
"button-icon-on-inverse-secondary": "$gray-900",
|
|
821
856
|
"button-icon-on-primary": "$white",
|
|
822
857
|
"button-icon-on-secondary": "$gray-50",
|
|
823
858
|
"button-icon-on-tertiary": "$blue-400",
|
|
824
859
|
"button-text-on-danger": "$white",
|
|
860
|
+
"button-text-on-inverse": "$white",
|
|
861
|
+
"button-text-on-inverse-disabled": "$gray-350",
|
|
862
|
+
"button-text-on-inverse-secondary": "$gray-900",
|
|
825
863
|
"button-text-on-primary": "$white",
|
|
826
864
|
"button-text-on-secondary": "$gray-50",
|
|
827
865
|
"button-text-on-tertiary": "$blue-400",
|
|
@@ -884,6 +922,7 @@ const colors$2 = {
|
|
|
884
922
|
"toolbar-item-background-selected": "$blue-700",
|
|
885
923
|
"tooltip-background": "$gray-650",
|
|
886
924
|
"tooltip-background-inset": "$gray-650",
|
|
925
|
+
"tooltip-background-inverse": "$gray-950",
|
|
887
926
|
"icon-danger": "$red-400",
|
|
888
927
|
"icon-danger-active": "$red-300",
|
|
889
928
|
"icon-danger-hover": "$red-350",
|
|
@@ -895,6 +934,7 @@ const colors$2 = {
|
|
|
895
934
|
"icon-inverted-secondary": "$gray-700",
|
|
896
935
|
"icon-muted": "$gray-400",
|
|
897
936
|
"icon-on-disabled": "$gray-450",
|
|
937
|
+
"icon-on-disabled-inverse": "$gray-350",
|
|
898
938
|
"icon-on-static-dark": "$gray-50",
|
|
899
939
|
"icon-on-static-dark-subtle": "$gray-300",
|
|
900
940
|
"icon-on-static-light": "$gray-900",
|
|
@@ -1422,7 +1462,16 @@ const colors$1 = {
|
|
|
1422
1462
|
"button-background-danger-pressed": "$red-600",
|
|
1423
1463
|
"button-background-ghost": "$transparent",
|
|
1424
1464
|
"button-background-ghost-hover": "$cloud-150",
|
|
1465
|
+
"button-background-ghost-inverse-hover": "$cloud-750",
|
|
1466
|
+
"button-background-ghost-inverse-pressed": "$cloud-700",
|
|
1425
1467
|
"button-background-ghost-pressed": "$cloud-200",
|
|
1468
|
+
"button-background-inverse": "$white",
|
|
1469
|
+
"button-background-inverse-disabled": "$cloud-650",
|
|
1470
|
+
"button-background-inverse-hover": "$cloud-100",
|
|
1471
|
+
"button-background-inverse-pressed": "$cloud-150",
|
|
1472
|
+
"button-background-inverse-secondary": "$cloud-700",
|
|
1473
|
+
"button-background-inverse-secondary-hover": "$cloud-650",
|
|
1474
|
+
"button-background-inverse-secondary-pressed": "$cloud-600",
|
|
1426
1475
|
"button-background-primary": "$cloud-800",
|
|
1427
1476
|
"button-background-primary-hover": "$cloud-900",
|
|
1428
1477
|
"button-background-primary-pressed": "$cloud-950",
|
|
@@ -1437,6 +1486,9 @@ const colors$1 = {
|
|
|
1437
1486
|
"button-border-danger-pressed": "$red-600",
|
|
1438
1487
|
"button-border-ghost-hover": "$transparent",
|
|
1439
1488
|
"button-border-ghost-pressed": "$transparent",
|
|
1489
|
+
"button-border-inverse-secondary": "$transparent",
|
|
1490
|
+
"button-border-inverse-secondary-hover": "$transparent",
|
|
1491
|
+
"button-border-inverse-secondary-pressed": "$transparent",
|
|
1440
1492
|
"button-border-primary": "$blue-500",
|
|
1441
1493
|
"button-border-primary-hover": "$blue-550",
|
|
1442
1494
|
"button-border-primary-pressed": "$blue-600",
|
|
@@ -1447,10 +1499,16 @@ const colors$1 = {
|
|
|
1447
1499
|
"button-border-tertiary-hover": "$cloud-550",
|
|
1448
1500
|
"button-border-tertiary-pressed": "$cloud-600",
|
|
1449
1501
|
"button-icon-on-danger": "$white",
|
|
1502
|
+
"button-icon-on-inverse": "$cloud-900",
|
|
1503
|
+
"button-icon-on-inverse-disabled": "$cloud-500",
|
|
1504
|
+
"button-icon-on-inverse-secondary": "$white",
|
|
1450
1505
|
"button-icon-on-primary": "$white",
|
|
1451
1506
|
"button-icon-on-secondary": "$cloud-900",
|
|
1452
1507
|
"button-icon-on-tertiary": "$cloud-900",
|
|
1453
1508
|
"button-text-on-danger": "$white",
|
|
1509
|
+
"button-text-on-inverse": "$cloud-900",
|
|
1510
|
+
"button-text-on-inverse-disabled": "$cloud-500",
|
|
1511
|
+
"button-text-on-inverse-secondary": "$white",
|
|
1454
1512
|
"button-text-on-primary": "$white",
|
|
1455
1513
|
"button-text-on-secondary": "$cloud-900",
|
|
1456
1514
|
"button-text-on-tertiary": "$cloud-900",
|
|
@@ -1513,6 +1571,7 @@ const colors$1 = {
|
|
|
1513
1571
|
"toolbar-item-background-selected": "$cloud-150",
|
|
1514
1572
|
"tooltip-background": "$cloud-950",
|
|
1515
1573
|
"tooltip-background-inset": "$cloud-650",
|
|
1574
|
+
"tooltip-background-inverse": "$cloud-650",
|
|
1516
1575
|
"icon-danger": "$red-500",
|
|
1517
1576
|
"icon-danger-active": "$red-600",
|
|
1518
1577
|
"icon-danger-hover": "$red-550",
|
|
@@ -1524,6 +1583,7 @@ const colors$1 = {
|
|
|
1524
1583
|
"icon-inverted-secondary": "$cloud-300",
|
|
1525
1584
|
"icon-muted": "$cloud-500",
|
|
1526
1585
|
"icon-on-disabled": "$cloud-350",
|
|
1586
|
+
"icon-on-disabled-inverse": "$cloud-450",
|
|
1527
1587
|
"icon-on-static-dark": "$cloud-50",
|
|
1528
1588
|
"icon-on-static-dark-subtle": "$cloud-300",
|
|
1529
1589
|
"icon-on-static-light": "$cloud-900",
|
|
@@ -2051,7 +2111,16 @@ const colors = {
|
|
|
2051
2111
|
"button-background-danger-pressed": "$red-450",
|
|
2052
2112
|
"button-background-ghost": "$transparent",
|
|
2053
2113
|
"button-background-ghost-hover": "$ink-750",
|
|
2114
|
+
"button-background-ghost-inverse-hover": "$ink-150",
|
|
2115
|
+
"button-background-ghost-inverse-pressed": "$ink-200",
|
|
2054
2116
|
"button-background-ghost-pressed": "$ink-700",
|
|
2117
|
+
"button-background-inverse": "$ink-800",
|
|
2118
|
+
"button-background-inverse-disabled": "$ink-150",
|
|
2119
|
+
"button-background-inverse-hover": "$ink-900",
|
|
2120
|
+
"button-background-inverse-pressed": "$ink-950",
|
|
2121
|
+
"button-background-inverse-secondary": "$ink-150",
|
|
2122
|
+
"button-background-inverse-secondary-hover": "$ink-200",
|
|
2123
|
+
"button-background-inverse-secondary-pressed": "$ink-250",
|
|
2055
2124
|
"button-background-primary": "$white",
|
|
2056
2125
|
"button-background-primary-hover": "$ink-100",
|
|
2057
2126
|
"button-background-primary-pressed": "$ink-150",
|
|
@@ -2066,6 +2135,9 @@ const colors = {
|
|
|
2066
2135
|
"button-border-danger-pressed": "$red-400",
|
|
2067
2136
|
"button-border-ghost-hover": "$transparent",
|
|
2068
2137
|
"button-border-ghost-pressed": "$transparent",
|
|
2138
|
+
"button-border-inverse-secondary": "$transparent",
|
|
2139
|
+
"button-border-inverse-secondary-hover": "$transparent",
|
|
2140
|
+
"button-border-inverse-secondary-pressed": "$transparent",
|
|
2069
2141
|
"button-border-primary": "$blue-500",
|
|
2070
2142
|
"button-border-primary-hover": "$blue-450",
|
|
2071
2143
|
"button-border-primary-pressed": "$blue-400",
|
|
@@ -2076,10 +2148,16 @@ const colors = {
|
|
|
2076
2148
|
"button-border-tertiary-hover": "$ink-550",
|
|
2077
2149
|
"button-border-tertiary-pressed": "$ink-500",
|
|
2078
2150
|
"button-icon-on-danger": "$white",
|
|
2151
|
+
"button-icon-on-inverse": "$white",
|
|
2152
|
+
"button-icon-on-inverse-disabled": "$ink-350",
|
|
2153
|
+
"button-icon-on-inverse-secondary": "$ink-900",
|
|
2079
2154
|
"button-icon-on-primary": "$ink-900",
|
|
2080
2155
|
"button-icon-on-secondary": "$white",
|
|
2081
2156
|
"button-icon-on-tertiary": "$white",
|
|
2082
2157
|
"button-text-on-danger": "$white",
|
|
2158
|
+
"button-text-on-inverse": "$white",
|
|
2159
|
+
"button-text-on-inverse-disabled": "$ink-350",
|
|
2160
|
+
"button-text-on-inverse-secondary": "$ink-900",
|
|
2083
2161
|
"button-text-on-primary": "$ink-900",
|
|
2084
2162
|
"button-text-on-secondary": "$white",
|
|
2085
2163
|
"button-text-on-tertiary": "$white",
|
|
@@ -2142,6 +2220,7 @@ const colors = {
|
|
|
2142
2220
|
"toolbar-item-background-selected": "$ink-700",
|
|
2143
2221
|
"tooltip-background": "$ink-650",
|
|
2144
2222
|
"tooltip-background-inset": "$ink-800",
|
|
2223
|
+
"tooltip-background-inverse": "$ink-950",
|
|
2145
2224
|
"icon-danger": "$red-400",
|
|
2146
2225
|
"icon-danger-active": "$red-300",
|
|
2147
2226
|
"icon-danger-hover": "$red-350",
|
|
@@ -2153,6 +2232,7 @@ const colors = {
|
|
|
2153
2232
|
"icon-inverted-secondary": "$ink-700",
|
|
2154
2233
|
"icon-muted": "$ink-400",
|
|
2155
2234
|
"icon-on-disabled": "$ink-450",
|
|
2235
|
+
"icon-on-disabled-inverse": "$ink-350",
|
|
2156
2236
|
"icon-on-static-dark": "$ink-50",
|
|
2157
2237
|
"icon-on-static-dark-subtle": "$ink-300",
|
|
2158
2238
|
"icon-on-static-light": "$ink-900",
|
|
@@ -2602,7 +2682,7 @@ const radii$1 = {
|
|
|
2602
2682
|
input: "$150",
|
|
2603
2683
|
"list-item": "$150",
|
|
2604
2684
|
notification: "$200",
|
|
2605
|
-
"notification-banner": "$
|
|
2685
|
+
"notification-banner": "$200",
|
|
2606
2686
|
panel: "$200",
|
|
2607
2687
|
popover: "$150",
|
|
2608
2688
|
tag: "$round",
|
|
@@ -2624,7 +2704,7 @@ const radii = {
|
|
|
2624
2704
|
input: "$150",
|
|
2625
2705
|
"list-item": "$150",
|
|
2626
2706
|
notification: "$200",
|
|
2627
|
-
"notification-banner": "$
|
|
2707
|
+
"notification-banner": "$200",
|
|
2628
2708
|
panel: "$200",
|
|
2629
2709
|
popover: "$150",
|
|
2630
2710
|
tag: "$round",
|