braid-design-system 32.1.1 → 32.2.0
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/CHANGELOG.md +125 -0
- package/codemod/dist/wrapper.js +102 -104
- package/dist/ToastContext.chunk.cjs +21 -21
- package/dist/ToastContext.chunk.mjs +41 -41
- package/dist/Toggle.chunk.cjs +19 -29
- package/dist/Toggle.chunk.mjs +24 -34
- package/dist/reset.d.ts +190 -91
- package/dist/side-effects/lib/themes/baseTokens/apac.cjs +7 -8
- package/dist/side-effects/lib/themes/baseTokens/apac.mjs +6 -8
- package/dist/side-effects/lib/themes/makeRuntimeTokens.cjs +3 -9
- package/dist/side-effects/lib/themes/makeRuntimeTokens.mjs +3 -8
- package/dist/side-effects/lib/themes/tokenType.cjs +15 -0
- package/dist/side-effects/lib/themes/tokenType.mjs +16 -0
- package/dist/styles/lib/components/Button/Button.css.cjs +24 -23
- package/dist/styles/lib/components/Button/Button.css.mjs +25 -24
- package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.cjs +1 -5
- package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs +1 -5
- package/dist/styles/lib/components/private/Keyline/Keyline.css.cjs +4 -0
- package/dist/styles/lib/components/private/Keyline/Keyline.css.mjs +5 -1
- package/dist/styles/lib/css/negativeMargin/negativeMargin.css.cjs +4 -9
- package/dist/styles/lib/css/negativeMargin/negativeMargin.css.mjs +1 -6
- package/dist/styles/lib/css/typography.css.cjs +1 -16
- package/dist/styles/lib/css/typography.css.mjs +1 -16
- package/dist/styles/lib/themes/docs/tokens.cjs +8 -8
- package/dist/styles/lib/themes/docs/tokens.mjs +6 -8
- package/dist/styles/lib/themes/makeVanillaTheme.cjs +22 -9
- package/dist/styles/lib/themes/makeVanillaTheme.mjs +22 -9
- package/dist/styles/lib/themes/wireframe/tokens.cjs +25 -29
- package/dist/styles/lib/themes/wireframe/tokens.mjs +23 -29
- package/package.json +3 -2
- package/dist/styles/lib/components/Badge/Badge.css.cjs +0 -27
- package/dist/styles/lib/components/Badge/Badge.css.mjs +0 -28
package/dist/reset.d.ts
CHANGED
|
@@ -19,10 +19,14 @@ declare const breakpoints: {
|
|
|
19
19
|
};
|
|
20
20
|
type Breakpoint = keyof typeof breakpoints;
|
|
21
21
|
|
|
22
|
+
type FontMetricsForTheme = Pick<FontMetrics, 'capHeight' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm'>;
|
|
22
23
|
type TextBreakpoint = Exclude<Breakpoint, 'desktop' | 'wide'>;
|
|
23
24
|
type FontSizeText = {
|
|
24
25
|
fontSize: number;
|
|
25
26
|
rows: number;
|
|
27
|
+
} | {
|
|
28
|
+
fontSize: number;
|
|
29
|
+
lineGap: number;
|
|
26
30
|
};
|
|
27
31
|
type TextDefinition = Record<TextBreakpoint, FontSizeText>;
|
|
28
32
|
type FontWeight = 'regular' | 'medium' | 'strong';
|
|
@@ -32,7 +36,7 @@ interface BraidTokens {
|
|
|
32
36
|
typography: {
|
|
33
37
|
fontFamily: string;
|
|
34
38
|
webFont: string | null;
|
|
35
|
-
fontMetrics:
|
|
39
|
+
fontMetrics: FontMetricsForTheme;
|
|
36
40
|
fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
|
|
37
41
|
heading: {
|
|
38
42
|
weight: {
|
|
@@ -70,6 +74,7 @@ interface BraidTokens {
|
|
|
70
74
|
large: number;
|
|
71
75
|
xlarge: number;
|
|
72
76
|
xxlarge: number;
|
|
77
|
+
xxxlarge: number;
|
|
73
78
|
};
|
|
74
79
|
transforms: {
|
|
75
80
|
touchable: string;
|
|
@@ -80,6 +85,7 @@ interface BraidTokens {
|
|
|
80
85
|
};
|
|
81
86
|
border: {
|
|
82
87
|
radius: {
|
|
88
|
+
small: string;
|
|
83
89
|
standard: string;
|
|
84
90
|
large: string;
|
|
85
91
|
xlarge: string;
|
|
@@ -209,6 +215,7 @@ declare const makeBraidTheme: (tokens: BraidTokens) => {
|
|
|
209
215
|
large: number;
|
|
210
216
|
xlarge: number;
|
|
211
217
|
xxlarge: number;
|
|
218
|
+
xxxlarge: number;
|
|
212
219
|
};
|
|
213
220
|
};
|
|
214
221
|
color: {
|
|
@@ -363,6 +370,7 @@ declare const useSpace: () => {
|
|
|
363
370
|
large: number;
|
|
364
371
|
xlarge: number;
|
|
365
372
|
xxlarge: number;
|
|
373
|
+
xxxlarge: number;
|
|
366
374
|
};
|
|
367
375
|
};
|
|
368
376
|
|
|
@@ -1025,6 +1033,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1025
1033
|
length: 4;
|
|
1026
1034
|
};
|
|
1027
1035
|
values: {
|
|
1036
|
+
small: {
|
|
1037
|
+
defaultClass: string;
|
|
1038
|
+
conditions: {
|
|
1039
|
+
mobile: string;
|
|
1040
|
+
tablet: string;
|
|
1041
|
+
desktop: string;
|
|
1042
|
+
wide: string;
|
|
1043
|
+
};
|
|
1044
|
+
};
|
|
1028
1045
|
large: {
|
|
1029
1046
|
defaultClass: string;
|
|
1030
1047
|
conditions: {
|
|
@@ -1149,6 +1166,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1149
1166
|
wide: string;
|
|
1150
1167
|
};
|
|
1151
1168
|
};
|
|
1169
|
+
xxxlarge: {
|
|
1170
|
+
defaultClass: string;
|
|
1171
|
+
conditions: {
|
|
1172
|
+
mobile: string;
|
|
1173
|
+
tablet: string;
|
|
1174
|
+
desktop: string;
|
|
1175
|
+
wide: string;
|
|
1176
|
+
};
|
|
1177
|
+
};
|
|
1152
1178
|
none: {
|
|
1153
1179
|
defaultClass: string;
|
|
1154
1180
|
conditions: {
|
|
@@ -1237,6 +1263,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1237
1263
|
wide: string;
|
|
1238
1264
|
};
|
|
1239
1265
|
};
|
|
1266
|
+
xxxlarge: {
|
|
1267
|
+
defaultClass: string;
|
|
1268
|
+
conditions: {
|
|
1269
|
+
mobile: string;
|
|
1270
|
+
tablet: string;
|
|
1271
|
+
desktop: string;
|
|
1272
|
+
wide: string;
|
|
1273
|
+
};
|
|
1274
|
+
};
|
|
1240
1275
|
none: {
|
|
1241
1276
|
defaultClass: string;
|
|
1242
1277
|
conditions: {
|
|
@@ -1325,6 +1360,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1325
1360
|
wide: string;
|
|
1326
1361
|
};
|
|
1327
1362
|
};
|
|
1363
|
+
xxxlarge: {
|
|
1364
|
+
defaultClass: string;
|
|
1365
|
+
conditions: {
|
|
1366
|
+
mobile: string;
|
|
1367
|
+
tablet: string;
|
|
1368
|
+
desktop: string;
|
|
1369
|
+
wide: string;
|
|
1370
|
+
};
|
|
1371
|
+
};
|
|
1328
1372
|
none: {
|
|
1329
1373
|
defaultClass: string;
|
|
1330
1374
|
conditions: {
|
|
@@ -1413,6 +1457,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1413
1457
|
wide: string;
|
|
1414
1458
|
};
|
|
1415
1459
|
};
|
|
1460
|
+
xxxlarge: {
|
|
1461
|
+
defaultClass: string;
|
|
1462
|
+
conditions: {
|
|
1463
|
+
mobile: string;
|
|
1464
|
+
tablet: string;
|
|
1465
|
+
desktop: string;
|
|
1466
|
+
wide: string;
|
|
1467
|
+
};
|
|
1468
|
+
};
|
|
1416
1469
|
none: {
|
|
1417
1470
|
defaultClass: string;
|
|
1418
1471
|
conditions: {
|
|
@@ -1501,6 +1554,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1501
1554
|
wide: string;
|
|
1502
1555
|
};
|
|
1503
1556
|
};
|
|
1557
|
+
xxxlarge: {
|
|
1558
|
+
defaultClass: string;
|
|
1559
|
+
conditions: {
|
|
1560
|
+
mobile: string;
|
|
1561
|
+
tablet: string;
|
|
1562
|
+
desktop: string;
|
|
1563
|
+
wide: string;
|
|
1564
|
+
};
|
|
1565
|
+
};
|
|
1504
1566
|
none: {
|
|
1505
1567
|
defaultClass: string;
|
|
1506
1568
|
conditions: {
|
|
@@ -1589,6 +1651,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1589
1651
|
wide: string;
|
|
1590
1652
|
};
|
|
1591
1653
|
};
|
|
1654
|
+
xxxlarge: {
|
|
1655
|
+
defaultClass: string;
|
|
1656
|
+
conditions: {
|
|
1657
|
+
mobile: string;
|
|
1658
|
+
tablet: string;
|
|
1659
|
+
desktop: string;
|
|
1660
|
+
wide: string;
|
|
1661
|
+
};
|
|
1662
|
+
};
|
|
1592
1663
|
none: {
|
|
1593
1664
|
defaultClass: string;
|
|
1594
1665
|
conditions: {
|
|
@@ -1677,6 +1748,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1677
1748
|
wide: string;
|
|
1678
1749
|
};
|
|
1679
1750
|
};
|
|
1751
|
+
xxxlarge: {
|
|
1752
|
+
defaultClass: string;
|
|
1753
|
+
conditions: {
|
|
1754
|
+
mobile: string;
|
|
1755
|
+
tablet: string;
|
|
1756
|
+
desktop: string;
|
|
1757
|
+
wide: string;
|
|
1758
|
+
};
|
|
1759
|
+
};
|
|
1680
1760
|
none: {
|
|
1681
1761
|
defaultClass: string;
|
|
1682
1762
|
conditions: {
|
|
@@ -1765,6 +1845,15 @@ declare const responsiveAtomicProperties: {
|
|
|
1765
1845
|
wide: string;
|
|
1766
1846
|
};
|
|
1767
1847
|
};
|
|
1848
|
+
xxxlarge: {
|
|
1849
|
+
defaultClass: string;
|
|
1850
|
+
conditions: {
|
|
1851
|
+
mobile: string;
|
|
1852
|
+
tablet: string;
|
|
1853
|
+
desktop: string;
|
|
1854
|
+
wide: string;
|
|
1855
|
+
};
|
|
1856
|
+
};
|
|
1768
1857
|
none: {
|
|
1769
1858
|
defaultClass: string;
|
|
1770
1859
|
conditions: {
|
|
@@ -2050,60 +2139,60 @@ declare const sprinkles: ((props: {
|
|
|
2050
2139
|
desktop?: "relative" | "absolute" | "fixed" | undefined;
|
|
2051
2140
|
wide?: "relative" | "absolute" | "fixed" | undefined;
|
|
2052
2141
|
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "absolute" | "fixed" | null>) | undefined;
|
|
2053
|
-
readonly borderRadius?: (("large" | "xlarge" | "standard" | "none" | "full" | {
|
|
2054
|
-
mobile?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2055
|
-
tablet?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2056
|
-
desktop?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2057
|
-
wide?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2058
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "large" | "xlarge" | "standard" | "none" | "full" | null>) | undefined;
|
|
2059
|
-
readonly paddingTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2060
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2061
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2062
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2063
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2064
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2065
|
-
readonly paddingBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2066
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2067
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2068
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2069
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2070
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2071
|
-
readonly paddingRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2072
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2073
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2074
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2075
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2076
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2077
|
-
readonly paddingLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2078
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2079
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2080
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2081
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2082
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2083
|
-
readonly marginTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2084
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2085
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2086
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2087
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2088
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2089
|
-
readonly marginBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2090
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2091
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2092
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2093
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2094
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2095
|
-
readonly marginRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2096
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2097
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2098
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2099
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2100
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2101
|
-
readonly marginLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2102
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2103
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2104
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2105
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2106
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2142
|
+
readonly borderRadius?: (("small" | "large" | "xlarge" | "standard" | "none" | "full" | {
|
|
2143
|
+
mobile?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2144
|
+
tablet?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2145
|
+
desktop?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2146
|
+
wide?: "small" | "large" | "xlarge" | "standard" | "none" | "full" | undefined;
|
|
2147
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "large" | "xlarge" | "standard" | "none" | "full" | null>) | undefined;
|
|
2148
|
+
readonly paddingTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2149
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2150
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2151
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2152
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2153
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2154
|
+
readonly paddingBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2155
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2156
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2157
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2158
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2159
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2160
|
+
readonly paddingRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2161
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2162
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2163
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2164
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2165
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2166
|
+
readonly paddingLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2167
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2168
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2169
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2170
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2171
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2172
|
+
readonly marginTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2173
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2174
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2175
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2176
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2177
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2178
|
+
readonly marginBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2179
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2180
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2181
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2182
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2183
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2184
|
+
readonly marginRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2185
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2186
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2187
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2188
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2189
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2190
|
+
readonly marginLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2191
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2192
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2193
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2194
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2195
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2107
2196
|
readonly alignItems?: (("center" | "flexStart" | "flexEnd" | {
|
|
2108
2197
|
mobile?: "center" | "flexStart" | "flexEnd" | undefined;
|
|
2109
2198
|
tablet?: "center" | "flexStart" | "flexEnd" | undefined;
|
|
@@ -2146,42 +2235,42 @@ declare const sprinkles: ((props: {
|
|
|
2146
2235
|
desktop?: "left" | "right" | "center" | undefined;
|
|
2147
2236
|
wide?: "left" | "right" | "center" | undefined;
|
|
2148
2237
|
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | null>) | undefined;
|
|
2149
|
-
padding?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2150
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2151
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2152
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2153
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2154
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2155
|
-
paddingY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2156
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2157
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2158
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2159
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2160
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2161
|
-
paddingX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2162
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2163
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2164
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2165
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2166
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2167
|
-
margin?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2168
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2169
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2170
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2171
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2172
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2173
|
-
marginY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2174
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2175
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2176
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2177
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2178
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2179
|
-
marginX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
|
|
2180
|
-
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2181
|
-
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2182
|
-
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2183
|
-
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
|
|
2184
|
-
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
|
|
2238
|
+
padding?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2239
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2240
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2241
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2242
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2243
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2244
|
+
paddingY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2245
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2246
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2247
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2248
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2249
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2250
|
+
paddingX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2251
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2252
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2253
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2254
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2255
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2256
|
+
margin?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2257
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2258
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2259
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2260
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2261
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2262
|
+
marginY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2263
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2264
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2265
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2266
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2267
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2268
|
+
marginX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | {
|
|
2269
|
+
mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2270
|
+
tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2271
|
+
desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2272
|
+
wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined;
|
|
2273
|
+
}) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>) | undefined;
|
|
2185
2274
|
} & {
|
|
2186
2275
|
readonly transform?: {
|
|
2187
2276
|
active?: "touchable" | undefined;
|
|
@@ -2221,10 +2310,12 @@ declare const vars$1: {
|
|
|
2221
2310
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2222
2311
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2223
2312
|
xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2313
|
+
xxxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2224
2314
|
};
|
|
2225
2315
|
readonly touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2226
2316
|
readonly grid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2227
2317
|
readonly borderRadius: {
|
|
2318
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2228
2319
|
standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2229
2320
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2230
2321
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -3992,6 +4083,7 @@ declare const vars: {
|
|
|
3992
4083
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3993
4084
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3994
4085
|
xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4086
|
+
xxxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3995
4087
|
};
|
|
3996
4088
|
touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3997
4089
|
contentWidth: {
|
|
@@ -4092,6 +4184,7 @@ declare const vars: {
|
|
|
4092
4184
|
promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4093
4185
|
};
|
|
4094
4186
|
borderRadius: {
|
|
4187
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4095
4188
|
standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4096
4189
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4097
4190
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -4130,6 +4223,7 @@ declare const _default$5: {
|
|
|
4130
4223
|
large: number;
|
|
4131
4224
|
xlarge: number;
|
|
4132
4225
|
xxlarge: number;
|
|
4226
|
+
xxxlarge: number;
|
|
4133
4227
|
};
|
|
4134
4228
|
};
|
|
4135
4229
|
color: {
|
|
@@ -4266,6 +4360,7 @@ declare const _default$4: {
|
|
|
4266
4360
|
large: number;
|
|
4267
4361
|
xlarge: number;
|
|
4268
4362
|
xxlarge: number;
|
|
4363
|
+
xxxlarge: number;
|
|
4269
4364
|
};
|
|
4270
4365
|
};
|
|
4271
4366
|
color: {
|
|
@@ -4402,6 +4497,7 @@ declare const _default$3: {
|
|
|
4402
4497
|
large: number;
|
|
4403
4498
|
xlarge: number;
|
|
4404
4499
|
xxlarge: number;
|
|
4500
|
+
xxxlarge: number;
|
|
4405
4501
|
};
|
|
4406
4502
|
};
|
|
4407
4503
|
color: {
|
|
@@ -4538,6 +4634,7 @@ declare const _default$2: {
|
|
|
4538
4634
|
large: number;
|
|
4539
4635
|
xlarge: number;
|
|
4540
4636
|
xxlarge: number;
|
|
4637
|
+
xxxlarge: number;
|
|
4541
4638
|
};
|
|
4542
4639
|
};
|
|
4543
4640
|
color: {
|
|
@@ -4842,6 +4939,7 @@ declare function useScope(): {
|
|
|
4842
4939
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4843
4940
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4844
4941
|
xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4942
|
+
xxxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4845
4943
|
};
|
|
4846
4944
|
touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4847
4945
|
contentWidth: {
|
|
@@ -4942,6 +5040,7 @@ declare function useScope(): {
|
|
|
4942
5040
|
promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4943
5041
|
};
|
|
4944
5042
|
borderRadius: {
|
|
5043
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4945
5044
|
standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4946
5045
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
4947
5046
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
const robotoMetrics = require("@capsizecss/metrics/roboto.js");
|
|
2
3
|
const polished = require("polished");
|
|
3
4
|
const merge = require("lodash/merge.js");
|
|
5
|
+
const sideEffects_lib_themes_tokenType_cjs = require("../tokenType.cjs");
|
|
4
6
|
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
|
|
7
|
+
const robotoMetrics__default = /* @__PURE__ */ _interopDefaultCompat(robotoMetrics);
|
|
5
8
|
const merge__default = /* @__PURE__ */ _interopDefaultCompat(merge);
|
|
6
9
|
const palette = {
|
|
7
10
|
grey: {
|
|
@@ -184,13 +187,7 @@ const makeTokens = ({
|
|
|
184
187
|
typography: {
|
|
185
188
|
fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
|
|
186
189
|
webFont: null,
|
|
187
|
-
fontMetrics:
|
|
188
|
-
capHeight: 1456,
|
|
189
|
-
ascent: 1900,
|
|
190
|
-
descent: -500,
|
|
191
|
-
lineGap: 0,
|
|
192
|
-
unitsPerEm: 2048
|
|
193
|
-
},
|
|
190
|
+
fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(robotoMetrics__default.default),
|
|
194
191
|
fontWeight: {
|
|
195
192
|
regular: 400,
|
|
196
193
|
medium: 500,
|
|
@@ -303,7 +300,8 @@ const makeTokens = ({
|
|
|
303
300
|
medium: 5,
|
|
304
301
|
large: 8,
|
|
305
302
|
xlarge: 12,
|
|
306
|
-
xxlarge: 24
|
|
303
|
+
xxlarge: 24,
|
|
304
|
+
xxxlarge: 30
|
|
307
305
|
},
|
|
308
306
|
transforms: {
|
|
309
307
|
touchable: "scale(0.95)"
|
|
@@ -314,6 +312,7 @@ const makeTokens = ({
|
|
|
314
312
|
},
|
|
315
313
|
border: {
|
|
316
314
|
radius: {
|
|
315
|
+
small: "2px",
|
|
317
316
|
standard: "4px",
|
|
318
317
|
large: "6px",
|
|
319
318
|
xlarge: "10px"
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import robotoMetrics from "@capsizecss/metrics/roboto.js";
|
|
1
2
|
import { rgba, darken, saturate, lighten } from "polished";
|
|
2
3
|
import merge from "lodash/merge.js";
|
|
4
|
+
import { extractFontMetricsForTheme } from "../tokenType.mjs";
|
|
3
5
|
const palette = {
|
|
4
6
|
grey: {
|
|
5
7
|
900: "#0E131B",
|
|
@@ -181,13 +183,7 @@ const makeTokens = ({
|
|
|
181
183
|
typography: {
|
|
182
184
|
fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
|
|
183
185
|
webFont: null,
|
|
184
|
-
fontMetrics:
|
|
185
|
-
capHeight: 1456,
|
|
186
|
-
ascent: 1900,
|
|
187
|
-
descent: -500,
|
|
188
|
-
lineGap: 0,
|
|
189
|
-
unitsPerEm: 2048
|
|
190
|
-
},
|
|
186
|
+
fontMetrics: extractFontMetricsForTheme(robotoMetrics),
|
|
191
187
|
fontWeight: {
|
|
192
188
|
regular: 400,
|
|
193
189
|
medium: 500,
|
|
@@ -300,7 +296,8 @@ const makeTokens = ({
|
|
|
300
296
|
medium: 5,
|
|
301
297
|
large: 8,
|
|
302
298
|
xlarge: 12,
|
|
303
|
-
xxlarge: 24
|
|
299
|
+
xxlarge: 24,
|
|
300
|
+
xxxlarge: 30
|
|
304
301
|
},
|
|
305
302
|
transforms: {
|
|
306
303
|
touchable: "scale(0.95)"
|
|
@@ -311,6 +308,7 @@ const makeTokens = ({
|
|
|
311
308
|
},
|
|
312
309
|
border: {
|
|
313
310
|
radius: {
|
|
311
|
+
small: "2px",
|
|
314
312
|
standard: "4px",
|
|
315
313
|
large: "6px",
|
|
316
314
|
xlarge: "10px"
|
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const mapValues = require("lodash/mapValues.js");
|
|
3
|
-
const values = require("lodash/values.js");
|
|
4
3
|
const styles_lib_utils_index_cjs = require("../../../styles/lib/utils/index.cjs");
|
|
5
4
|
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
|
|
6
5
|
const mapValues__default = /* @__PURE__ */ _interopDefaultCompat(mapValues);
|
|
7
|
-
const
|
|
8
|
-
const makeWebFonts = ({ webFont, fontWeight }) => {
|
|
6
|
+
const makeWebFonts = (webFont) => {
|
|
9
7
|
if (!webFont) {
|
|
10
8
|
return [];
|
|
11
9
|
}
|
|
12
|
-
|
|
13
|
-
const linkTag = `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(
|
|
14
|
-
`${webFont}:${weights.sort().join(",")}`
|
|
15
|
-
)}" rel="stylesheet" />`;
|
|
16
|
-
return [{ linkTag }];
|
|
10
|
+
return [{ linkTag: `<link href="${webFont}" rel="stylesheet" />` }];
|
|
17
11
|
};
|
|
18
12
|
const makeRuntimeTokens = (tokens) => ({
|
|
19
13
|
name: tokens.name,
|
|
@@ -22,7 +16,7 @@ const makeRuntimeTokens = (tokens) => ({
|
|
|
22
16
|
lightMode: tokens.color.background.body,
|
|
23
17
|
darkMode: tokens.color.background.bodyDark
|
|
24
18
|
},
|
|
25
|
-
webFonts: makeWebFonts(tokens.typography),
|
|
19
|
+
webFonts: makeWebFonts(tokens.typography.webFont),
|
|
26
20
|
space: {
|
|
27
21
|
grid: tokens.grid,
|
|
28
22
|
space: tokens.space
|