@rovula/ui 0.0.32 → 0.0.33
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/dist/cjs/bundle.css +120 -16
- package/dist/esm/bundle.css +120 -16
- package/dist/src/theme/global.css +154 -23
- package/dist/stories/ColorGroupPreview.js +20 -22
- package/dist/theme/presets/colors.js +1 -0
- package/dist/theme/tokens/color.css +2 -1
- package/dist/theme/tokens/transparent.css +2 -2
- package/dist/theme/utils.js +12 -1
- package/package.json +1 -1
- package/src/stories/ColorGroupPreview.tsx +20 -22
- package/src/theme/presets/colors.js +1 -0
- package/src/theme/tokens/color.css +2 -1
- package/src/theme/tokens/transparent.css +2 -2
- package/src/theme/utils.js +12 -1
package/dist/cjs/bundle.css
CHANGED
|
@@ -1426,6 +1426,10 @@ body {
|
|
|
1426
1426
|
--tw-bg-opacity: 1;
|
|
1427
1427
|
background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1428
1428
|
}
|
|
1429
|
+
.bg-base-bg{
|
|
1430
|
+
--tw-bg-opacity: 1;
|
|
1431
|
+
background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1432
|
+
}
|
|
1429
1433
|
.bg-base-bg2{
|
|
1430
1434
|
--tw-bg-opacity: 1;
|
|
1431
1435
|
background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1434,6 +1438,10 @@ body {
|
|
|
1434
1438
|
--tw-bg-opacity: 1;
|
|
1435
1439
|
background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1436
1440
|
}
|
|
1441
|
+
.bg-base-guideline-stroke{
|
|
1442
|
+
--tw-bg-opacity: 1;
|
|
1443
|
+
background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1444
|
+
}
|
|
1437
1445
|
.bg-base-popup{
|
|
1438
1446
|
--tw-bg-opacity: 1;
|
|
1439
1447
|
background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1442,10 +1450,22 @@ body {
|
|
|
1442
1450
|
--tw-bg-opacity: 1;
|
|
1443
1451
|
background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1444
1452
|
}
|
|
1453
|
+
.bg-base-popup-foreground{
|
|
1454
|
+
--tw-bg-opacity: 1;
|
|
1455
|
+
background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1456
|
+
}
|
|
1445
1457
|
.bg-base-popup-highlight{
|
|
1446
1458
|
--tw-bg-opacity: 1;
|
|
1447
1459
|
background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1448
1460
|
}
|
|
1461
|
+
.bg-base-stroke{
|
|
1462
|
+
--tw-bg-opacity: 1;
|
|
1463
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1464
|
+
}
|
|
1465
|
+
.bg-base-workspace-stroke{
|
|
1466
|
+
--tw-bg-opacity: 1;
|
|
1467
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1468
|
+
}
|
|
1449
1469
|
.bg-black{
|
|
1450
1470
|
--tw-bg-opacity: 1;
|
|
1451
1471
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
@@ -1690,10 +1710,6 @@ body {
|
|
|
1690
1710
|
--tw-bg-opacity: 1;
|
|
1691
1711
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
|
1692
1712
|
}
|
|
1693
|
-
.bg-grey{
|
|
1694
|
-
--tw-bg-opacity: 1;
|
|
1695
|
-
background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1696
|
-
}
|
|
1697
1713
|
.bg-grey-10{
|
|
1698
1714
|
--tw-bg-opacity: 1;
|
|
1699
1715
|
background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1758,10 +1774,6 @@ body {
|
|
|
1758
1774
|
--tw-bg-opacity: 1;
|
|
1759
1775
|
background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1760
1776
|
}
|
|
1761
|
-
.bg-grey-foreground{
|
|
1762
|
-
--tw-bg-opacity: 1;
|
|
1763
|
-
background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1764
|
-
}
|
|
1765
1777
|
.bg-grey-transparent-12{
|
|
1766
1778
|
--tw-bg-opacity: 1;
|
|
1767
1779
|
background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1786,10 +1798,6 @@ body {
|
|
|
1786
1798
|
--tw-bg-opacity: 1;
|
|
1787
1799
|
background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1788
1800
|
}
|
|
1789
|
-
.bg-grey2{
|
|
1790
|
-
--tw-bg-opacity: 1;
|
|
1791
|
-
background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1792
|
-
}
|
|
1793
1801
|
.bg-grey2-100{
|
|
1794
1802
|
--tw-bg-opacity: 1;
|
|
1795
1803
|
background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1830,10 +1838,6 @@ body {
|
|
|
1830
1838
|
--tw-bg-opacity: 1;
|
|
1831
1839
|
background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1832
1840
|
}
|
|
1833
|
-
.bg-grey2-foreground{
|
|
1834
|
-
--tw-bg-opacity: 1;
|
|
1835
|
-
background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1836
|
-
}
|
|
1837
1841
|
.bg-grey2-transparent-12{
|
|
1838
1842
|
--tw-bg-opacity: 1;
|
|
1839
1843
|
background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2058,6 +2062,18 @@ body {
|
|
|
2058
2062
|
--tw-bg-opacity: 1;
|
|
2059
2063
|
background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2060
2064
|
}
|
|
2065
|
+
.bg-primary-text-outline{
|
|
2066
|
+
--tw-bg-opacity: 1;
|
|
2067
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2068
|
+
}
|
|
2069
|
+
.bg-primary-text-pressed{
|
|
2070
|
+
--tw-bg-opacity: 1;
|
|
2071
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2072
|
+
}
|
|
2073
|
+
.bg-primary-text-solid{
|
|
2074
|
+
--tw-bg-opacity: 1;
|
|
2075
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2076
|
+
}
|
|
2061
2077
|
.bg-primary-transparent-12{
|
|
2062
2078
|
--tw-bg-opacity: 1;
|
|
2063
2079
|
background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2178,6 +2194,18 @@ body {
|
|
|
2178
2194
|
--tw-bg-opacity: 1;
|
|
2179
2195
|
background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2180
2196
|
}
|
|
2197
|
+
.bg-secondary-text-outline{
|
|
2198
|
+
--tw-bg-opacity: 1;
|
|
2199
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2200
|
+
}
|
|
2201
|
+
.bg-secondary-text-pressed{
|
|
2202
|
+
--tw-bg-opacity: 1;
|
|
2203
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2204
|
+
}
|
|
2205
|
+
.bg-secondary-text-solid{
|
|
2206
|
+
--tw-bg-opacity: 1;
|
|
2207
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2208
|
+
}
|
|
2181
2209
|
.bg-secondary-transparent-12{
|
|
2182
2210
|
--tw-bg-opacity: 1;
|
|
2183
2211
|
background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2210,6 +2238,54 @@ body {
|
|
|
2210
2238
|
--tw-bg-opacity: 1;
|
|
2211
2239
|
background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2212
2240
|
}
|
|
2241
|
+
.bg-success{
|
|
2242
|
+
--tw-bg-opacity: 1;
|
|
2243
|
+
background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2244
|
+
}
|
|
2245
|
+
.bg-success-100{
|
|
2246
|
+
--tw-bg-opacity: 1;
|
|
2247
|
+
background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2248
|
+
}
|
|
2249
|
+
.bg-success-200{
|
|
2250
|
+
--tw-bg-opacity: 1;
|
|
2251
|
+
background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2252
|
+
}
|
|
2253
|
+
.bg-success-300{
|
|
2254
|
+
--tw-bg-opacity: 1;
|
|
2255
|
+
background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2256
|
+
}
|
|
2257
|
+
.bg-success-400{
|
|
2258
|
+
--tw-bg-opacity: 1;
|
|
2259
|
+
background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2260
|
+
}
|
|
2261
|
+
.bg-success-50{
|
|
2262
|
+
--tw-bg-opacity: 1;
|
|
2263
|
+
background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2264
|
+
}
|
|
2265
|
+
.bg-success-500{
|
|
2266
|
+
--tw-bg-opacity: 1;
|
|
2267
|
+
background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2268
|
+
}
|
|
2269
|
+
.bg-success-600{
|
|
2270
|
+
--tw-bg-opacity: 1;
|
|
2271
|
+
background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2272
|
+
}
|
|
2273
|
+
.bg-success-700{
|
|
2274
|
+
--tw-bg-opacity: 1;
|
|
2275
|
+
background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2276
|
+
}
|
|
2277
|
+
.bg-success-800{
|
|
2278
|
+
--tw-bg-opacity: 1;
|
|
2279
|
+
background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2280
|
+
}
|
|
2281
|
+
.bg-success-900{
|
|
2282
|
+
--tw-bg-opacity: 1;
|
|
2283
|
+
background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2284
|
+
}
|
|
2285
|
+
.bg-success-foreground{
|
|
2286
|
+
--tw-bg-opacity: 1;
|
|
2287
|
+
background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2288
|
+
}
|
|
2213
2289
|
.bg-success-transparent-12{
|
|
2214
2290
|
--tw-bg-opacity: 1;
|
|
2215
2291
|
background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2238,6 +2314,10 @@ body {
|
|
|
2238
2314
|
--tw-bg-opacity: 1;
|
|
2239
2315
|
background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2240
2316
|
}
|
|
2317
|
+
.bg-tertiary{
|
|
2318
|
+
--tw-bg-opacity: 1;
|
|
2319
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2320
|
+
}
|
|
2241
2321
|
.bg-tertiary-10{
|
|
2242
2322
|
--tw-bg-opacity: 1;
|
|
2243
2323
|
background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2306,6 +2386,10 @@ body {
|
|
|
2306
2386
|
--tw-bg-opacity: 1;
|
|
2307
2387
|
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2308
2388
|
}
|
|
2389
|
+
.bg-tertiary-foreground{
|
|
2390
|
+
--tw-bg-opacity: 1;
|
|
2391
|
+
background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2392
|
+
}
|
|
2309
2393
|
.bg-tertiary-hover{
|
|
2310
2394
|
--tw-bg-opacity: 1;
|
|
2311
2395
|
background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2322,6 +2406,18 @@ body {
|
|
|
2322
2406
|
--tw-bg-opacity: 1;
|
|
2323
2407
|
background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2324
2408
|
}
|
|
2409
|
+
.bg-tertiary-text-outline{
|
|
2410
|
+
--tw-bg-opacity: 1;
|
|
2411
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2412
|
+
}
|
|
2413
|
+
.bg-tertiary-text-pressed{
|
|
2414
|
+
--tw-bg-opacity: 1;
|
|
2415
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2416
|
+
}
|
|
2417
|
+
.bg-tertiary-text-solid{
|
|
2418
|
+
--tw-bg-opacity: 1;
|
|
2419
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2420
|
+
}
|
|
2325
2421
|
.bg-tertiary-transparent-12{
|
|
2326
2422
|
--tw-bg-opacity: 1;
|
|
2327
2423
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2346,6 +2442,10 @@ body {
|
|
|
2346
2442
|
--tw-bg-opacity: 1;
|
|
2347
2443
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2348
2444
|
}
|
|
2445
|
+
.bg-text-black{
|
|
2446
|
+
--tw-bg-opacity: 1;
|
|
2447
|
+
background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2448
|
+
}
|
|
2349
2449
|
.bg-text-dark{
|
|
2350
2450
|
--tw-bg-opacity: 1;
|
|
2351
2451
|
background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3027,6 +3127,10 @@ body {
|
|
|
3027
3127
|
--tw-text-opacity: 1;
|
|
3028
3128
|
color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
|
|
3029
3129
|
}
|
|
3130
|
+
.text-black{
|
|
3131
|
+
--tw-text-opacity: 1;
|
|
3132
|
+
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
3133
|
+
}
|
|
3030
3134
|
.text-button-error-flat-default{
|
|
3031
3135
|
--tw-text-opacity: 1;
|
|
3032
3136
|
color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);
|
package/dist/esm/bundle.css
CHANGED
|
@@ -1426,6 +1426,10 @@ body {
|
|
|
1426
1426
|
--tw-bg-opacity: 1;
|
|
1427
1427
|
background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1428
1428
|
}
|
|
1429
|
+
.bg-base-bg{
|
|
1430
|
+
--tw-bg-opacity: 1;
|
|
1431
|
+
background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1432
|
+
}
|
|
1429
1433
|
.bg-base-bg2{
|
|
1430
1434
|
--tw-bg-opacity: 1;
|
|
1431
1435
|
background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1434,6 +1438,10 @@ body {
|
|
|
1434
1438
|
--tw-bg-opacity: 1;
|
|
1435
1439
|
background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1436
1440
|
}
|
|
1441
|
+
.bg-base-guideline-stroke{
|
|
1442
|
+
--tw-bg-opacity: 1;
|
|
1443
|
+
background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1444
|
+
}
|
|
1437
1445
|
.bg-base-popup{
|
|
1438
1446
|
--tw-bg-opacity: 1;
|
|
1439
1447
|
background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1442,10 +1450,22 @@ body {
|
|
|
1442
1450
|
--tw-bg-opacity: 1;
|
|
1443
1451
|
background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1444
1452
|
}
|
|
1453
|
+
.bg-base-popup-foreground{
|
|
1454
|
+
--tw-bg-opacity: 1;
|
|
1455
|
+
background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1456
|
+
}
|
|
1445
1457
|
.bg-base-popup-highlight{
|
|
1446
1458
|
--tw-bg-opacity: 1;
|
|
1447
1459
|
background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1448
1460
|
}
|
|
1461
|
+
.bg-base-stroke{
|
|
1462
|
+
--tw-bg-opacity: 1;
|
|
1463
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1464
|
+
}
|
|
1465
|
+
.bg-base-workspace-stroke{
|
|
1466
|
+
--tw-bg-opacity: 1;
|
|
1467
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1468
|
+
}
|
|
1449
1469
|
.bg-black{
|
|
1450
1470
|
--tw-bg-opacity: 1;
|
|
1451
1471
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
@@ -1690,10 +1710,6 @@ body {
|
|
|
1690
1710
|
--tw-bg-opacity: 1;
|
|
1691
1711
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
|
1692
1712
|
}
|
|
1693
|
-
.bg-grey{
|
|
1694
|
-
--tw-bg-opacity: 1;
|
|
1695
|
-
background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1696
|
-
}
|
|
1697
1713
|
.bg-grey-10{
|
|
1698
1714
|
--tw-bg-opacity: 1;
|
|
1699
1715
|
background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1758,10 +1774,6 @@ body {
|
|
|
1758
1774
|
--tw-bg-opacity: 1;
|
|
1759
1775
|
background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1760
1776
|
}
|
|
1761
|
-
.bg-grey-foreground{
|
|
1762
|
-
--tw-bg-opacity: 1;
|
|
1763
|
-
background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1764
|
-
}
|
|
1765
1777
|
.bg-grey-transparent-12{
|
|
1766
1778
|
--tw-bg-opacity: 1;
|
|
1767
1779
|
background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1786,10 +1798,6 @@ body {
|
|
|
1786
1798
|
--tw-bg-opacity: 1;
|
|
1787
1799
|
background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1788
1800
|
}
|
|
1789
|
-
.bg-grey2{
|
|
1790
|
-
--tw-bg-opacity: 1;
|
|
1791
|
-
background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1792
|
-
}
|
|
1793
1801
|
.bg-grey2-100{
|
|
1794
1802
|
--tw-bg-opacity: 1;
|
|
1795
1803
|
background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -1830,10 +1838,6 @@ body {
|
|
|
1830
1838
|
--tw-bg-opacity: 1;
|
|
1831
1839
|
background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1832
1840
|
}
|
|
1833
|
-
.bg-grey2-foreground{
|
|
1834
|
-
--tw-bg-opacity: 1;
|
|
1835
|
-
background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
1836
|
-
}
|
|
1837
1841
|
.bg-grey2-transparent-12{
|
|
1838
1842
|
--tw-bg-opacity: 1;
|
|
1839
1843
|
background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2058,6 +2062,18 @@ body {
|
|
|
2058
2062
|
--tw-bg-opacity: 1;
|
|
2059
2063
|
background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2060
2064
|
}
|
|
2065
|
+
.bg-primary-text-outline{
|
|
2066
|
+
--tw-bg-opacity: 1;
|
|
2067
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2068
|
+
}
|
|
2069
|
+
.bg-primary-text-pressed{
|
|
2070
|
+
--tw-bg-opacity: 1;
|
|
2071
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2072
|
+
}
|
|
2073
|
+
.bg-primary-text-solid{
|
|
2074
|
+
--tw-bg-opacity: 1;
|
|
2075
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2076
|
+
}
|
|
2061
2077
|
.bg-primary-transparent-12{
|
|
2062
2078
|
--tw-bg-opacity: 1;
|
|
2063
2079
|
background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2178,6 +2194,18 @@ body {
|
|
|
2178
2194
|
--tw-bg-opacity: 1;
|
|
2179
2195
|
background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2180
2196
|
}
|
|
2197
|
+
.bg-secondary-text-outline{
|
|
2198
|
+
--tw-bg-opacity: 1;
|
|
2199
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2200
|
+
}
|
|
2201
|
+
.bg-secondary-text-pressed{
|
|
2202
|
+
--tw-bg-opacity: 1;
|
|
2203
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2204
|
+
}
|
|
2205
|
+
.bg-secondary-text-solid{
|
|
2206
|
+
--tw-bg-opacity: 1;
|
|
2207
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2208
|
+
}
|
|
2181
2209
|
.bg-secondary-transparent-12{
|
|
2182
2210
|
--tw-bg-opacity: 1;
|
|
2183
2211
|
background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2210,6 +2238,54 @@ body {
|
|
|
2210
2238
|
--tw-bg-opacity: 1;
|
|
2211
2239
|
background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2212
2240
|
}
|
|
2241
|
+
.bg-success{
|
|
2242
|
+
--tw-bg-opacity: 1;
|
|
2243
|
+
background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2244
|
+
}
|
|
2245
|
+
.bg-success-100{
|
|
2246
|
+
--tw-bg-opacity: 1;
|
|
2247
|
+
background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2248
|
+
}
|
|
2249
|
+
.bg-success-200{
|
|
2250
|
+
--tw-bg-opacity: 1;
|
|
2251
|
+
background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2252
|
+
}
|
|
2253
|
+
.bg-success-300{
|
|
2254
|
+
--tw-bg-opacity: 1;
|
|
2255
|
+
background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2256
|
+
}
|
|
2257
|
+
.bg-success-400{
|
|
2258
|
+
--tw-bg-opacity: 1;
|
|
2259
|
+
background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2260
|
+
}
|
|
2261
|
+
.bg-success-50{
|
|
2262
|
+
--tw-bg-opacity: 1;
|
|
2263
|
+
background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2264
|
+
}
|
|
2265
|
+
.bg-success-500{
|
|
2266
|
+
--tw-bg-opacity: 1;
|
|
2267
|
+
background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2268
|
+
}
|
|
2269
|
+
.bg-success-600{
|
|
2270
|
+
--tw-bg-opacity: 1;
|
|
2271
|
+
background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2272
|
+
}
|
|
2273
|
+
.bg-success-700{
|
|
2274
|
+
--tw-bg-opacity: 1;
|
|
2275
|
+
background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2276
|
+
}
|
|
2277
|
+
.bg-success-800{
|
|
2278
|
+
--tw-bg-opacity: 1;
|
|
2279
|
+
background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2280
|
+
}
|
|
2281
|
+
.bg-success-900{
|
|
2282
|
+
--tw-bg-opacity: 1;
|
|
2283
|
+
background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2284
|
+
}
|
|
2285
|
+
.bg-success-foreground{
|
|
2286
|
+
--tw-bg-opacity: 1;
|
|
2287
|
+
background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2288
|
+
}
|
|
2213
2289
|
.bg-success-transparent-12{
|
|
2214
2290
|
--tw-bg-opacity: 1;
|
|
2215
2291
|
background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2238,6 +2314,10 @@ body {
|
|
|
2238
2314
|
--tw-bg-opacity: 1;
|
|
2239
2315
|
background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2240
2316
|
}
|
|
2317
|
+
.bg-tertiary{
|
|
2318
|
+
--tw-bg-opacity: 1;
|
|
2319
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2320
|
+
}
|
|
2241
2321
|
.bg-tertiary-10{
|
|
2242
2322
|
--tw-bg-opacity: 1;
|
|
2243
2323
|
background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2306,6 +2386,10 @@ body {
|
|
|
2306
2386
|
--tw-bg-opacity: 1;
|
|
2307
2387
|
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2308
2388
|
}
|
|
2389
|
+
.bg-tertiary-foreground{
|
|
2390
|
+
--tw-bg-opacity: 1;
|
|
2391
|
+
background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2392
|
+
}
|
|
2309
2393
|
.bg-tertiary-hover{
|
|
2310
2394
|
--tw-bg-opacity: 1;
|
|
2311
2395
|
background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2322,6 +2406,18 @@ body {
|
|
|
2322
2406
|
--tw-bg-opacity: 1;
|
|
2323
2407
|
background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2324
2408
|
}
|
|
2409
|
+
.bg-tertiary-text-outline{
|
|
2410
|
+
--tw-bg-opacity: 1;
|
|
2411
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2412
|
+
}
|
|
2413
|
+
.bg-tertiary-text-pressed{
|
|
2414
|
+
--tw-bg-opacity: 1;
|
|
2415
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2416
|
+
}
|
|
2417
|
+
.bg-tertiary-text-solid{
|
|
2418
|
+
--tw-bg-opacity: 1;
|
|
2419
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2420
|
+
}
|
|
2325
2421
|
.bg-tertiary-transparent-12{
|
|
2326
2422
|
--tw-bg-opacity: 1;
|
|
2327
2423
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -2346,6 +2442,10 @@ body {
|
|
|
2346
2442
|
--tw-bg-opacity: 1;
|
|
2347
2443
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2348
2444
|
}
|
|
2445
|
+
.bg-text-black{
|
|
2446
|
+
--tw-bg-opacity: 1;
|
|
2447
|
+
background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
2448
|
+
}
|
|
2349
2449
|
.bg-text-dark{
|
|
2350
2450
|
--tw-bg-opacity: 1;
|
|
2351
2451
|
background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3027,6 +3127,10 @@ body {
|
|
|
3027
3127
|
--tw-text-opacity: 1;
|
|
3028
3128
|
color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
|
|
3029
3129
|
}
|
|
3130
|
+
.text-black{
|
|
3131
|
+
--tw-text-opacity: 1;
|
|
3132
|
+
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
3133
|
+
}
|
|
3030
3134
|
.text-button-error-flat-default{
|
|
3031
3135
|
--tw-text-opacity: 1;
|
|
3032
3136
|
color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);
|
|
@@ -218,6 +218,7 @@
|
|
|
218
218
|
--function-active-hover-bg: rgba(221 205 0 / 0.08);
|
|
219
219
|
--function-active-stroke: rgba(177 164 0 / 0.48);
|
|
220
220
|
--function-active-icon: #ffffff;
|
|
221
|
+
--text-black: #000000;
|
|
221
222
|
--text-dark: #18283a;
|
|
222
223
|
--text-medium: #4b5b6d;
|
|
223
224
|
--text-light: #8e98a4;
|
|
@@ -225,7 +226,7 @@
|
|
|
225
226
|
--text-grey-medium: #7e7e7e;
|
|
226
227
|
--text-grey-light: #9e9e9e;
|
|
227
228
|
--text-white: #ffffff;
|
|
228
|
-
--base-color-bg: #
|
|
229
|
+
--base-color-bg: #f5f5f5;
|
|
229
230
|
--base-color-bg2: #f5f5f5;
|
|
230
231
|
--base-color-bg3: #d8d8d8;
|
|
231
232
|
--base-color-workspace-stroke: #e2e2e2;
|
|
@@ -315,13 +316,13 @@
|
|
|
315
316
|
--other-transparency-grey2-24: rgba(145 158 171 / 0.24);
|
|
316
317
|
--other-transparency-grey2-32: rgba(145 158 171 / 0.32);
|
|
317
318
|
--other-transparency-grey2-48: rgba(145 158 171 / 0.48);
|
|
318
|
-
--other-transparency-white-
|
|
319
|
+
--other-transparency-white-8: rgba(255 255 255 / 0.08);
|
|
319
320
|
--other-transparency-white-12: rgba(255 255 255 / 0.12);
|
|
320
321
|
--other-transparency-white-16: rgba(255 255 255 / 0.16);
|
|
321
322
|
--other-transparency-white-24: rgba(255 255 255 / 0.24);
|
|
322
323
|
--other-transparency-white-32: rgba(255 255 255 / 0.32);
|
|
323
324
|
--other-transparency-white-48: rgba(255 255 255 / 0.48);
|
|
324
|
-
--other-transparency-black-
|
|
325
|
+
--other-transparency-black-8: rgba(0 0 0 / 0.08);
|
|
325
326
|
--other-transparency-black-12: rgba(0 0 0 / 0.12);
|
|
326
327
|
--other-transparency-black-16: rgba(0 0 0 / 0.16);
|
|
327
328
|
--other-transparency-black-24: rgba(0 0 0 / 0.24);
|
|
@@ -3286,6 +3287,11 @@ body {
|
|
|
3286
3287
|
background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3287
3288
|
}
|
|
3288
3289
|
|
|
3290
|
+
.bg-base-bg {
|
|
3291
|
+
--tw-bg-opacity: 1;
|
|
3292
|
+
background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3293
|
+
}
|
|
3294
|
+
|
|
3289
3295
|
.bg-base-bg2 {
|
|
3290
3296
|
--tw-bg-opacity: 1;
|
|
3291
3297
|
background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3296,6 +3302,11 @@ body {
|
|
|
3296
3302
|
background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3297
3303
|
}
|
|
3298
3304
|
|
|
3305
|
+
.bg-base-guideline-stroke {
|
|
3306
|
+
--tw-bg-opacity: 1;
|
|
3307
|
+
background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3308
|
+
}
|
|
3309
|
+
|
|
3299
3310
|
.bg-base-popup {
|
|
3300
3311
|
--tw-bg-opacity: 1;
|
|
3301
3312
|
background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3306,11 +3317,26 @@ body {
|
|
|
3306
3317
|
background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3307
3318
|
}
|
|
3308
3319
|
|
|
3320
|
+
.bg-base-popup-foreground {
|
|
3321
|
+
--tw-bg-opacity: 1;
|
|
3322
|
+
background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3323
|
+
}
|
|
3324
|
+
|
|
3309
3325
|
.bg-base-popup-highlight {
|
|
3310
3326
|
--tw-bg-opacity: 1;
|
|
3311
3327
|
background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3312
3328
|
}
|
|
3313
3329
|
|
|
3330
|
+
.bg-base-stroke {
|
|
3331
|
+
--tw-bg-opacity: 1;
|
|
3332
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3333
|
+
}
|
|
3334
|
+
|
|
3335
|
+
.bg-base-workspace-stroke {
|
|
3336
|
+
--tw-bg-opacity: 1;
|
|
3337
|
+
background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3338
|
+
}
|
|
3339
|
+
|
|
3314
3340
|
.bg-black {
|
|
3315
3341
|
--tw-bg-opacity: 1;
|
|
3316
3342
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
@@ -3616,11 +3642,6 @@ body {
|
|
|
3616
3642
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
|
3617
3643
|
}
|
|
3618
3644
|
|
|
3619
|
-
.bg-grey {
|
|
3620
|
-
--tw-bg-opacity: 1;
|
|
3621
|
-
background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3622
|
-
}
|
|
3623
|
-
|
|
3624
3645
|
.bg-grey-10 {
|
|
3625
3646
|
--tw-bg-opacity: 1;
|
|
3626
3647
|
background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3701,11 +3722,6 @@ body {
|
|
|
3701
3722
|
background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3702
3723
|
}
|
|
3703
3724
|
|
|
3704
|
-
.bg-grey-foreground {
|
|
3705
|
-
--tw-bg-opacity: 1;
|
|
3706
|
-
background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3707
|
-
}
|
|
3708
|
-
|
|
3709
3725
|
.bg-grey-transparent-12 {
|
|
3710
3726
|
--tw-bg-opacity: 1;
|
|
3711
3727
|
background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3736,11 +3752,6 @@ body {
|
|
|
3736
3752
|
background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3737
3753
|
}
|
|
3738
3754
|
|
|
3739
|
-
.bg-grey2 {
|
|
3740
|
-
--tw-bg-opacity: 1;
|
|
3741
|
-
background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3742
|
-
}
|
|
3743
|
-
|
|
3744
3755
|
.bg-grey2-100 {
|
|
3745
3756
|
--tw-bg-opacity: 1;
|
|
3746
3757
|
background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -3791,11 +3802,6 @@ body {
|
|
|
3791
3802
|
background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3792
3803
|
}
|
|
3793
3804
|
|
|
3794
|
-
.bg-grey2-foreground {
|
|
3795
|
-
--tw-bg-opacity: 1;
|
|
3796
|
-
background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
3797
|
-
}
|
|
3798
|
-
|
|
3799
3805
|
.bg-grey2-transparent-12 {
|
|
3800
3806
|
--tw-bg-opacity: 1;
|
|
3801
3807
|
background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4076,6 +4082,21 @@ body {
|
|
|
4076
4082
|
background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4077
4083
|
}
|
|
4078
4084
|
|
|
4085
|
+
.bg-primary-text-outline {
|
|
4086
|
+
--tw-bg-opacity: 1;
|
|
4087
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4088
|
+
}
|
|
4089
|
+
|
|
4090
|
+
.bg-primary-text-pressed {
|
|
4091
|
+
--tw-bg-opacity: 1;
|
|
4092
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4093
|
+
}
|
|
4094
|
+
|
|
4095
|
+
.bg-primary-text-solid {
|
|
4096
|
+
--tw-bg-opacity: 1;
|
|
4097
|
+
background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4098
|
+
}
|
|
4099
|
+
|
|
4079
4100
|
.bg-primary-transparent-12 {
|
|
4080
4101
|
--tw-bg-opacity: 1;
|
|
4081
4102
|
background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4226,6 +4247,21 @@ body {
|
|
|
4226
4247
|
background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4227
4248
|
}
|
|
4228
4249
|
|
|
4250
|
+
.bg-secondary-text-outline {
|
|
4251
|
+
--tw-bg-opacity: 1;
|
|
4252
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4253
|
+
}
|
|
4254
|
+
|
|
4255
|
+
.bg-secondary-text-pressed {
|
|
4256
|
+
--tw-bg-opacity: 1;
|
|
4257
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4258
|
+
}
|
|
4259
|
+
|
|
4260
|
+
.bg-secondary-text-solid {
|
|
4261
|
+
--tw-bg-opacity: 1;
|
|
4262
|
+
background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4263
|
+
}
|
|
4264
|
+
|
|
4229
4265
|
.bg-secondary-transparent-12 {
|
|
4230
4266
|
--tw-bg-opacity: 1;
|
|
4231
4267
|
background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4266,6 +4302,66 @@ body {
|
|
|
4266
4302
|
background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4267
4303
|
}
|
|
4268
4304
|
|
|
4305
|
+
.bg-success {
|
|
4306
|
+
--tw-bg-opacity: 1;
|
|
4307
|
+
background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4308
|
+
}
|
|
4309
|
+
|
|
4310
|
+
.bg-success-100 {
|
|
4311
|
+
--tw-bg-opacity: 1;
|
|
4312
|
+
background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4313
|
+
}
|
|
4314
|
+
|
|
4315
|
+
.bg-success-200 {
|
|
4316
|
+
--tw-bg-opacity: 1;
|
|
4317
|
+
background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4318
|
+
}
|
|
4319
|
+
|
|
4320
|
+
.bg-success-300 {
|
|
4321
|
+
--tw-bg-opacity: 1;
|
|
4322
|
+
background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4323
|
+
}
|
|
4324
|
+
|
|
4325
|
+
.bg-success-400 {
|
|
4326
|
+
--tw-bg-opacity: 1;
|
|
4327
|
+
background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4328
|
+
}
|
|
4329
|
+
|
|
4330
|
+
.bg-success-50 {
|
|
4331
|
+
--tw-bg-opacity: 1;
|
|
4332
|
+
background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4333
|
+
}
|
|
4334
|
+
|
|
4335
|
+
.bg-success-500 {
|
|
4336
|
+
--tw-bg-opacity: 1;
|
|
4337
|
+
background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4338
|
+
}
|
|
4339
|
+
|
|
4340
|
+
.bg-success-600 {
|
|
4341
|
+
--tw-bg-opacity: 1;
|
|
4342
|
+
background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4343
|
+
}
|
|
4344
|
+
|
|
4345
|
+
.bg-success-700 {
|
|
4346
|
+
--tw-bg-opacity: 1;
|
|
4347
|
+
background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4348
|
+
}
|
|
4349
|
+
|
|
4350
|
+
.bg-success-800 {
|
|
4351
|
+
--tw-bg-opacity: 1;
|
|
4352
|
+
background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4353
|
+
}
|
|
4354
|
+
|
|
4355
|
+
.bg-success-900 {
|
|
4356
|
+
--tw-bg-opacity: 1;
|
|
4357
|
+
background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
.bg-success-foreground {
|
|
4361
|
+
--tw-bg-opacity: 1;
|
|
4362
|
+
background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4363
|
+
}
|
|
4364
|
+
|
|
4269
4365
|
.bg-success-transparent-12 {
|
|
4270
4366
|
--tw-bg-opacity: 1;
|
|
4271
4367
|
background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4301,6 +4397,11 @@ body {
|
|
|
4301
4397
|
background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4302
4398
|
}
|
|
4303
4399
|
|
|
4400
|
+
.bg-tertiary {
|
|
4401
|
+
--tw-bg-opacity: 1;
|
|
4402
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4403
|
+
}
|
|
4404
|
+
|
|
4304
4405
|
.bg-tertiary-10 {
|
|
4305
4406
|
--tw-bg-opacity: 1;
|
|
4306
4407
|
background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4386,6 +4487,11 @@ body {
|
|
|
4386
4487
|
background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4387
4488
|
}
|
|
4388
4489
|
|
|
4490
|
+
.bg-tertiary-foreground {
|
|
4491
|
+
--tw-bg-opacity: 1;
|
|
4492
|
+
background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4493
|
+
}
|
|
4494
|
+
|
|
4389
4495
|
.bg-tertiary-hover {
|
|
4390
4496
|
--tw-bg-opacity: 1;
|
|
4391
4497
|
background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4406,6 +4512,21 @@ body {
|
|
|
4406
4512
|
background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4407
4513
|
}
|
|
4408
4514
|
|
|
4515
|
+
.bg-tertiary-text-outline {
|
|
4516
|
+
--tw-bg-opacity: 1;
|
|
4517
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4518
|
+
}
|
|
4519
|
+
|
|
4520
|
+
.bg-tertiary-text-pressed {
|
|
4521
|
+
--tw-bg-opacity: 1;
|
|
4522
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4523
|
+
}
|
|
4524
|
+
|
|
4525
|
+
.bg-tertiary-text-solid {
|
|
4526
|
+
--tw-bg-opacity: 1;
|
|
4527
|
+
background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4528
|
+
}
|
|
4529
|
+
|
|
4409
4530
|
.bg-tertiary-transparent-12 {
|
|
4410
4531
|
--tw-bg-opacity: 1;
|
|
4411
4532
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -4436,6 +4557,11 @@ body {
|
|
|
4436
4557
|
background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4437
4558
|
}
|
|
4438
4559
|
|
|
4560
|
+
.bg-text-black {
|
|
4561
|
+
--tw-bg-opacity: 1;
|
|
4562
|
+
background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
4563
|
+
}
|
|
4564
|
+
|
|
4439
4565
|
.bg-text-dark {
|
|
4440
4566
|
--tw-bg-opacity: 1;
|
|
4441
4567
|
background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
|
|
@@ -5301,6 +5427,11 @@ body {
|
|
|
5301
5427
|
color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
|
|
5302
5428
|
}
|
|
5303
5429
|
|
|
5430
|
+
.text-black {
|
|
5431
|
+
--tw-text-opacity: 1;
|
|
5432
|
+
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
5433
|
+
}
|
|
5434
|
+
|
|
5304
5435
|
.text-button-error-flat-default {
|
|
5305
5436
|
--tw-text-opacity: 1;
|
|
5306
5437
|
color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);
|
|
@@ -6,16 +6,12 @@ export default function ColorGroupPreview() {
|
|
|
6
6
|
"bg-primary-foreground",
|
|
7
7
|
"bg-secondary",
|
|
8
8
|
"bg-secondary-foreground",
|
|
9
|
-
"bg-
|
|
10
|
-
"bg-
|
|
11
|
-
"bg-grey",
|
|
12
|
-
"bg-grey-foreground",
|
|
13
|
-
"bg-grey2",
|
|
14
|
-
"bg-grey2-foreground",
|
|
9
|
+
"bg-tertiary",
|
|
10
|
+
"bg-tertiary-foreground",
|
|
15
11
|
"bg-info",
|
|
16
12
|
"bg-info-foreground",
|
|
17
|
-
"bg-
|
|
18
|
-
"bg-
|
|
13
|
+
"bg-success",
|
|
14
|
+
"bg-success-foreground",
|
|
19
15
|
"bg-warning",
|
|
20
16
|
"bg-warning-foreground",
|
|
21
17
|
"bg-error",
|
|
@@ -147,16 +143,16 @@ export default function ColorGroupPreview() {
|
|
|
147
143
|
"bg-info-800",
|
|
148
144
|
"bg-info-900",
|
|
149
145
|
] }), _jsx(ColorItems, { title: "Success", col: 5, colors: [
|
|
150
|
-
"bg-
|
|
151
|
-
"bg-
|
|
152
|
-
"bg-
|
|
153
|
-
"bg-
|
|
154
|
-
"bg-
|
|
155
|
-
"bg-
|
|
156
|
-
"bg-
|
|
157
|
-
"bg-
|
|
158
|
-
"bg-
|
|
159
|
-
"bg-
|
|
146
|
+
"bg-success-50",
|
|
147
|
+
"bg-success-100",
|
|
148
|
+
"bg-success-200",
|
|
149
|
+
"bg-success-300",
|
|
150
|
+
"bg-success-400",
|
|
151
|
+
"bg-success-500",
|
|
152
|
+
"bg-success-600",
|
|
153
|
+
"bg-success-700",
|
|
154
|
+
"bg-success-800",
|
|
155
|
+
"bg-success-900",
|
|
160
156
|
] }), _jsx(ColorItems, { title: "Warning", col: 5, colors: [
|
|
161
157
|
"bg-warning-50",
|
|
162
158
|
"bg-warning-100",
|
|
@@ -250,14 +246,16 @@ export default function ColorGroupPreview() {
|
|
|
250
246
|
"bg-black-transparent-32",
|
|
251
247
|
"bg-black-transparent-48",
|
|
252
248
|
] }), _jsx(ColorItems, { title: "Base color", colors: [
|
|
253
|
-
"bg-base-
|
|
249
|
+
"bg-base-bg",
|
|
254
250
|
"bg-base-bg2",
|
|
255
251
|
"bg-base-bg3",
|
|
256
|
-
"bg-base-
|
|
257
|
-
"bg-base-
|
|
252
|
+
"bg-base-stroke",
|
|
253
|
+
"bg-base-workspace-stroke",
|
|
254
|
+
"bg-base-guideline-stroke",
|
|
258
255
|
"bg-base-popup",
|
|
259
|
-
"bg-base-popup-
|
|
256
|
+
"bg-base-popup-highlight",
|
|
260
257
|
"bg-base-popup-curtain",
|
|
258
|
+
"bg-base-popup-foreground",
|
|
261
259
|
] }), _jsx(ColorItems, { title: "Input color", col: 3, colors: [
|
|
262
260
|
"bg-input-default-text",
|
|
263
261
|
"bg-input-default-stroke",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
--function-active-stroke: rgba(177 164 0 / 0.48);
|
|
25
25
|
--function-active-icon: #ffffff;
|
|
26
26
|
|
|
27
|
+
--text-black: #000000;
|
|
27
28
|
--text-dark: #18283a;
|
|
28
29
|
--text-medium: #4b5b6d;
|
|
29
30
|
--text-light: #8e98a4;
|
|
@@ -32,7 +33,7 @@
|
|
|
32
33
|
--text-grey-light: #9e9e9e;
|
|
33
34
|
--text-white: #ffffff;
|
|
34
35
|
|
|
35
|
-
--base-color-bg: #
|
|
36
|
+
--base-color-bg: #f5f5f5;
|
|
36
37
|
--base-color-bg2: #f5f5f5;
|
|
37
38
|
--base-color-bg3: #d8d8d8;
|
|
38
39
|
--base-color-workspace-stroke: #e2e2e2;
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
--other-transparency-grey2-24: rgba(145 158 171 / 0.24);
|
|
54
54
|
--other-transparency-grey2-32: rgba(145 158 171 / 0.32);
|
|
55
55
|
--other-transparency-grey2-48: rgba(145 158 171 / 0.48);
|
|
56
|
-
--other-transparency-white-
|
|
56
|
+
--other-transparency-white-8: rgba(255 255 255 / 0.08);
|
|
57
57
|
--other-transparency-white-12: rgba(255 255 255 / 0.12);
|
|
58
58
|
--other-transparency-white-16: rgba(255 255 255 / 0.16);
|
|
59
59
|
--other-transparency-white-24: rgba(255 255 255 / 0.24);
|
|
60
60
|
--other-transparency-white-32: rgba(255 255 255 / 0.32);
|
|
61
61
|
--other-transparency-white-48: rgba(255 255 255 / 0.48);
|
|
62
|
-
--other-transparency-black-
|
|
62
|
+
--other-transparency-black-8: rgba(0 0 0 / 0.08);
|
|
63
63
|
--other-transparency-black-12: rgba(0 0 0 / 0.12);
|
|
64
64
|
--other-transparency-black-16: rgba(0 0 0 / 0.16);
|
|
65
65
|
--other-transparency-black-24: rgba(0 0 0 / 0.24);
|
package/dist/theme/utils.js
CHANGED
|
@@ -13,7 +13,7 @@ export const generateColorConfig = (
|
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
colors[`${baseName}-foreground`] = withColorMixin(`--${baseName}-foreground`);
|
|
16
|
-
colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`);
|
|
16
|
+
colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`); // TODO should be dynamic
|
|
17
17
|
colors[`${baseName}-default`] = withColorMixin(
|
|
18
18
|
`--state-color-${baseName}-default`
|
|
19
19
|
);
|
|
@@ -33,6 +33,17 @@ export const generateColorConfig = (
|
|
|
33
33
|
`--state-color-${baseName}-active`
|
|
34
34
|
);
|
|
35
35
|
|
|
36
|
+
// text
|
|
37
|
+
colors[`${baseName}-text-solid`] = withColorMixin(
|
|
38
|
+
`--state-color-${baseName}-text-solid`
|
|
39
|
+
);
|
|
40
|
+
colors[`${baseName}-text-outline`] = withColorMixin(
|
|
41
|
+
`--state-color-${baseName}-text-outline`
|
|
42
|
+
);
|
|
43
|
+
colors[`${baseName}-text-pressed`] = withColorMixin(
|
|
44
|
+
`--state-color-${baseName}-text-pressed`
|
|
45
|
+
);
|
|
46
|
+
|
|
36
47
|
return colors;
|
|
37
48
|
};
|
|
38
49
|
|
package/package.json
CHANGED
|
@@ -12,16 +12,12 @@ export default function ColorGroupPreview() {
|
|
|
12
12
|
"bg-primary-foreground",
|
|
13
13
|
"bg-secondary",
|
|
14
14
|
"bg-secondary-foreground",
|
|
15
|
-
"bg-
|
|
16
|
-
"bg-
|
|
17
|
-
"bg-grey",
|
|
18
|
-
"bg-grey-foreground",
|
|
19
|
-
"bg-grey2",
|
|
20
|
-
"bg-grey2-foreground",
|
|
15
|
+
"bg-tertiary",
|
|
16
|
+
"bg-tertiary-foreground",
|
|
21
17
|
"bg-info",
|
|
22
18
|
"bg-info-foreground",
|
|
23
|
-
"bg-
|
|
24
|
-
"bg-
|
|
19
|
+
"bg-success",
|
|
20
|
+
"bg-success-foreground",
|
|
25
21
|
"bg-warning",
|
|
26
22
|
"bg-warning-foreground",
|
|
27
23
|
"bg-error",
|
|
@@ -206,16 +202,16 @@ export default function ColorGroupPreview() {
|
|
|
206
202
|
title="Success"
|
|
207
203
|
col={5}
|
|
208
204
|
colors={[
|
|
209
|
-
"bg-
|
|
210
|
-
"bg-
|
|
211
|
-
"bg-
|
|
212
|
-
"bg-
|
|
213
|
-
"bg-
|
|
214
|
-
"bg-
|
|
215
|
-
"bg-
|
|
216
|
-
"bg-
|
|
217
|
-
"bg-
|
|
218
|
-
"bg-
|
|
205
|
+
"bg-success-50",
|
|
206
|
+
"bg-success-100",
|
|
207
|
+
"bg-success-200",
|
|
208
|
+
"bg-success-300",
|
|
209
|
+
"bg-success-400",
|
|
210
|
+
"bg-success-500",
|
|
211
|
+
"bg-success-600",
|
|
212
|
+
"bg-success-700",
|
|
213
|
+
"bg-success-800",
|
|
214
|
+
"bg-success-900",
|
|
219
215
|
]}
|
|
220
216
|
/>
|
|
221
217
|
<ColorItems
|
|
@@ -342,14 +338,16 @@ export default function ColorGroupPreview() {
|
|
|
342
338
|
<ColorItems
|
|
343
339
|
title="Base color"
|
|
344
340
|
colors={[
|
|
345
|
-
"bg-base-
|
|
341
|
+
"bg-base-bg",
|
|
346
342
|
"bg-base-bg2",
|
|
347
343
|
"bg-base-bg3",
|
|
348
|
-
"bg-base-
|
|
349
|
-
"bg-base-
|
|
344
|
+
"bg-base-stroke",
|
|
345
|
+
"bg-base-workspace-stroke",
|
|
346
|
+
"bg-base-guideline-stroke",
|
|
350
347
|
"bg-base-popup",
|
|
351
|
-
"bg-base-popup-
|
|
348
|
+
"bg-base-popup-highlight",
|
|
352
349
|
"bg-base-popup-curtain",
|
|
350
|
+
"bg-base-popup-foreground",
|
|
353
351
|
]}
|
|
354
352
|
/>
|
|
355
353
|
<ColorItems
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
--function-active-stroke: rgba(177 164 0 / 0.48);
|
|
25
25
|
--function-active-icon: #ffffff;
|
|
26
26
|
|
|
27
|
+
--text-black: #000000;
|
|
27
28
|
--text-dark: #18283a;
|
|
28
29
|
--text-medium: #4b5b6d;
|
|
29
30
|
--text-light: #8e98a4;
|
|
@@ -32,7 +33,7 @@
|
|
|
32
33
|
--text-grey-light: #9e9e9e;
|
|
33
34
|
--text-white: #ffffff;
|
|
34
35
|
|
|
35
|
-
--base-color-bg: #
|
|
36
|
+
--base-color-bg: #f5f5f5;
|
|
36
37
|
--base-color-bg2: #f5f5f5;
|
|
37
38
|
--base-color-bg3: #d8d8d8;
|
|
38
39
|
--base-color-workspace-stroke: #e2e2e2;
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
--other-transparency-grey2-24: rgba(145 158 171 / 0.24);
|
|
54
54
|
--other-transparency-grey2-32: rgba(145 158 171 / 0.32);
|
|
55
55
|
--other-transparency-grey2-48: rgba(145 158 171 / 0.48);
|
|
56
|
-
--other-transparency-white-
|
|
56
|
+
--other-transparency-white-8: rgba(255 255 255 / 0.08);
|
|
57
57
|
--other-transparency-white-12: rgba(255 255 255 / 0.12);
|
|
58
58
|
--other-transparency-white-16: rgba(255 255 255 / 0.16);
|
|
59
59
|
--other-transparency-white-24: rgba(255 255 255 / 0.24);
|
|
60
60
|
--other-transparency-white-32: rgba(255 255 255 / 0.32);
|
|
61
61
|
--other-transparency-white-48: rgba(255 255 255 / 0.48);
|
|
62
|
-
--other-transparency-black-
|
|
62
|
+
--other-transparency-black-8: rgba(0 0 0 / 0.08);
|
|
63
63
|
--other-transparency-black-12: rgba(0 0 0 / 0.12);
|
|
64
64
|
--other-transparency-black-16: rgba(0 0 0 / 0.16);
|
|
65
65
|
--other-transparency-black-24: rgba(0 0 0 / 0.24);
|
package/src/theme/utils.js
CHANGED
|
@@ -13,7 +13,7 @@ export const generateColorConfig = (
|
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
colors[`${baseName}-foreground`] = withColorMixin(`--${baseName}-foreground`);
|
|
16
|
-
colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`);
|
|
16
|
+
colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`); // TODO should be dynamic
|
|
17
17
|
colors[`${baseName}-default`] = withColorMixin(
|
|
18
18
|
`--state-color-${baseName}-default`
|
|
19
19
|
);
|
|
@@ -33,6 +33,17 @@ export const generateColorConfig = (
|
|
|
33
33
|
`--state-color-${baseName}-active`
|
|
34
34
|
);
|
|
35
35
|
|
|
36
|
+
// text
|
|
37
|
+
colors[`${baseName}-text-solid`] = withColorMixin(
|
|
38
|
+
`--state-color-${baseName}-text-solid`
|
|
39
|
+
);
|
|
40
|
+
colors[`${baseName}-text-outline`] = withColorMixin(
|
|
41
|
+
`--state-color-${baseName}-text-outline`
|
|
42
|
+
);
|
|
43
|
+
colors[`${baseName}-text-pressed`] = withColorMixin(
|
|
44
|
+
`--state-color-${baseName}-text-pressed`
|
|
45
|
+
);
|
|
46
|
+
|
|
36
47
|
return colors;
|
|
37
48
|
};
|
|
38
49
|
|