@tokenami/ds 0.0.68 → 0.0.70
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/README.md +24 -2
- package/dist/index.cjs +44 -214
- package/dist/index.d.cts +44 -2368
- package/dist/index.d.ts +44 -2368
- package/dist/index.js +45 -215
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -79,9 +79,31 @@ This will mean a font size that scales between `12px` (`0.75rem`) and `18px` (`1
|
|
|
79
79
|
|
|
80
80
|
## Radix UI Colours
|
|
81
81
|
|
|
82
|
-
The design system uses [Radix UI colours](https://www.radix-ui.com/colors)
|
|
82
|
+
The design system uses [Radix UI P3 colours](https://www.radix-ui.com/colors) and includes fallbacks for browsers/displays that don't support P3 colours.
|
|
83
83
|
|
|
84
|
-
Find out more about [how to use the Radix palette](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on their website.
|
|
84
|
+
A powerful feature of this palette is dark mode by default when applying the appropriate steps in the scale to each use case. Find out more about [how to use the Radix palette](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on their website.
|
|
85
|
+
|
|
86
|
+
### Gradients
|
|
87
|
+
|
|
88
|
+
Use the `--gradient_to-[t|r|b|l|tr|tl|br|bl]` tokens along with the `--gradient-from` and `--gradient-to` custom properties to apply gradients.
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
css({
|
|
92
|
+
'--background-image': 'var(--gradient_to-b)',
|
|
93
|
+
'--gradient-from': 'var(--color_crimson9)',
|
|
94
|
+
'--gradient-to': 'var(--color_green10)',
|
|
95
|
+
});
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
The base gradients use the sRGB colour space to match the behaviour of design tools, but you can use the `--gradient_hd-to-[t|r|b|l|tr|tl|br|bl]` tokens to apply gradients using the OKLCH colour space for a more accurate representation of colour.
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
css({
|
|
102
|
+
'--background-image': 'var(--gradient_hd-to-b)',
|
|
103
|
+
'--gradient-from': 'var(--color_crimson9)',
|
|
104
|
+
'--gradient-to': 'var(--color_green10)',
|
|
105
|
+
});
|
|
106
|
+
```
|
|
85
107
|
|
|
86
108
|
## Right-to-left support
|
|
87
109
|
|
package/dist/index.cjs
CHANGED
|
@@ -5,82 +5,12 @@ var colors = require('@radix-ui/colors');
|
|
|
5
5
|
|
|
6
6
|
// src/index.ts
|
|
7
7
|
var shared = {
|
|
8
|
-
black: "#000",
|
|
9
|
-
white: "#fff",
|
|
10
|
-
...colors.blackA,
|
|
11
|
-
...colors.whiteA
|
|
12
|
-
};
|
|
13
|
-
var sharedP3 = {
|
|
14
8
|
black: "color(display-p3 0 0 0)",
|
|
15
9
|
white: "color(display-p3 1 1 1)",
|
|
16
10
|
...colors.blackP3A,
|
|
17
11
|
...colors.whiteP3A
|
|
18
12
|
};
|
|
19
13
|
var light = {
|
|
20
|
-
...colors.gray,
|
|
21
|
-
...colors.mauve,
|
|
22
|
-
...colors.slate,
|
|
23
|
-
...colors.sage,
|
|
24
|
-
...colors.olive,
|
|
25
|
-
...colors.sand,
|
|
26
|
-
...colors.gold,
|
|
27
|
-
...colors.bronze,
|
|
28
|
-
...colors.brown,
|
|
29
|
-
...colors.yellow,
|
|
30
|
-
...colors.amber,
|
|
31
|
-
...colors.orange,
|
|
32
|
-
...colors.tomato,
|
|
33
|
-
...colors.red,
|
|
34
|
-
...colors.ruby,
|
|
35
|
-
...colors.crimson,
|
|
36
|
-
...colors.pink,
|
|
37
|
-
...colors.plum,
|
|
38
|
-
...colors.purple,
|
|
39
|
-
...colors.violet,
|
|
40
|
-
...colors.iris,
|
|
41
|
-
...colors.indigo,
|
|
42
|
-
...colors.blue,
|
|
43
|
-
...colors.cyan,
|
|
44
|
-
...colors.teal,
|
|
45
|
-
...colors.jade,
|
|
46
|
-
...colors.green,
|
|
47
|
-
...colors.grass,
|
|
48
|
-
...colors.lime,
|
|
49
|
-
...colors.mint,
|
|
50
|
-
...colors.sky,
|
|
51
|
-
...colors.grayA,
|
|
52
|
-
...colors.mauveA,
|
|
53
|
-
...colors.slateA,
|
|
54
|
-
...colors.sageA,
|
|
55
|
-
...colors.oliveA,
|
|
56
|
-
...colors.sandA,
|
|
57
|
-
...colors.goldA,
|
|
58
|
-
...colors.bronzeA,
|
|
59
|
-
...colors.brownA,
|
|
60
|
-
...colors.yellowA,
|
|
61
|
-
...colors.amberA,
|
|
62
|
-
...colors.orangeA,
|
|
63
|
-
...colors.tomatoA,
|
|
64
|
-
...colors.redA,
|
|
65
|
-
...colors.rubyA,
|
|
66
|
-
...colors.crimsonA,
|
|
67
|
-
...colors.pinkA,
|
|
68
|
-
...colors.plumA,
|
|
69
|
-
...colors.purpleA,
|
|
70
|
-
...colors.violetA,
|
|
71
|
-
...colors.irisA,
|
|
72
|
-
...colors.indigoA,
|
|
73
|
-
...colors.blueA,
|
|
74
|
-
...colors.cyanA,
|
|
75
|
-
...colors.tealA,
|
|
76
|
-
...colors.jadeA,
|
|
77
|
-
...colors.greenA,
|
|
78
|
-
...colors.grassA,
|
|
79
|
-
...colors.limeA,
|
|
80
|
-
...colors.mintA,
|
|
81
|
-
...colors.skyA
|
|
82
|
-
};
|
|
83
|
-
var lightP3 = {
|
|
84
14
|
...colors.grayP3,
|
|
85
15
|
...colors.mauveP3,
|
|
86
16
|
...colors.slateP3,
|
|
@@ -145,70 +75,6 @@ var lightP3 = {
|
|
|
145
75
|
...colors.skyP3A
|
|
146
76
|
};
|
|
147
77
|
var dark = {
|
|
148
|
-
...colors.grayDark,
|
|
149
|
-
...colors.mauveDark,
|
|
150
|
-
...colors.slateDark,
|
|
151
|
-
...colors.sageDark,
|
|
152
|
-
...colors.oliveDark,
|
|
153
|
-
...colors.sandDark,
|
|
154
|
-
...colors.goldDark,
|
|
155
|
-
...colors.bronzeDark,
|
|
156
|
-
...colors.brownDark,
|
|
157
|
-
...colors.yellowDark,
|
|
158
|
-
...colors.amberDark,
|
|
159
|
-
...colors.orangeDark,
|
|
160
|
-
...colors.tomatoDark,
|
|
161
|
-
...colors.redDark,
|
|
162
|
-
...colors.rubyDark,
|
|
163
|
-
...colors.crimsonDark,
|
|
164
|
-
...colors.pinkDark,
|
|
165
|
-
...colors.plumDark,
|
|
166
|
-
...colors.purpleDark,
|
|
167
|
-
...colors.violetDark,
|
|
168
|
-
...colors.irisDark,
|
|
169
|
-
...colors.indigoDark,
|
|
170
|
-
...colors.blueDark,
|
|
171
|
-
...colors.cyanDark,
|
|
172
|
-
...colors.tealDark,
|
|
173
|
-
...colors.jadeDark,
|
|
174
|
-
...colors.greenDark,
|
|
175
|
-
...colors.grassDark,
|
|
176
|
-
...colors.limeDark,
|
|
177
|
-
...colors.mintDark,
|
|
178
|
-
...colors.skyDark,
|
|
179
|
-
...colors.grayDarkA,
|
|
180
|
-
...colors.mauveDarkA,
|
|
181
|
-
...colors.slateDarkA,
|
|
182
|
-
...colors.sageDarkA,
|
|
183
|
-
...colors.oliveDarkA,
|
|
184
|
-
...colors.sandDarkA,
|
|
185
|
-
...colors.goldDarkA,
|
|
186
|
-
...colors.bronzeDarkA,
|
|
187
|
-
...colors.brownDarkA,
|
|
188
|
-
...colors.yellowDarkA,
|
|
189
|
-
...colors.amberDarkA,
|
|
190
|
-
...colors.orangeDarkA,
|
|
191
|
-
...colors.tomatoDarkA,
|
|
192
|
-
...colors.redDarkA,
|
|
193
|
-
...colors.rubyDarkA,
|
|
194
|
-
...colors.crimsonDarkA,
|
|
195
|
-
...colors.pinkDarkA,
|
|
196
|
-
...colors.plumDarkA,
|
|
197
|
-
...colors.purpleDarkA,
|
|
198
|
-
...colors.violetDarkA,
|
|
199
|
-
...colors.irisDarkA,
|
|
200
|
-
...colors.indigoDarkA,
|
|
201
|
-
...colors.blueDarkA,
|
|
202
|
-
...colors.cyanDarkA,
|
|
203
|
-
...colors.tealDarkA,
|
|
204
|
-
...colors.jadeDarkA,
|
|
205
|
-
...colors.greenDarkA,
|
|
206
|
-
...colors.grassDarkA,
|
|
207
|
-
...colors.limeDarkA,
|
|
208
|
-
...colors.mintDarkA,
|
|
209
|
-
...colors.skyDarkA
|
|
210
|
-
};
|
|
211
|
-
var darkP3 = {
|
|
212
78
|
...colors.grayDarkP3,
|
|
213
79
|
...colors.mauveDarkP3,
|
|
214
80
|
...colors.slateDarkP3,
|
|
@@ -471,23 +337,7 @@ var src_default = config.createConfig({
|
|
|
471
337
|
display: "none"
|
|
472
338
|
}
|
|
473
339
|
},
|
|
474
|
-
themeSelector: (mode) => {
|
|
475
|
-
const attrSelector = (mode2) => `[data-theme=${mode2}]`;
|
|
476
|
-
const p3 = (modeSelector) => [
|
|
477
|
-
"@supports (color: color(display-p3 1 1 1))",
|
|
478
|
-
"@media (color-gamut: p3)",
|
|
479
|
-
modeSelector
|
|
480
|
-
];
|
|
481
|
-
if (mode === "root")
|
|
482
|
-
return ":root";
|
|
483
|
-
if (mode === "rootP3")
|
|
484
|
-
return p3(":root");
|
|
485
|
-
if (mode === "lightP3")
|
|
486
|
-
return p3(attrSelector("light"));
|
|
487
|
-
if (mode === "darkP3")
|
|
488
|
-
return p3(attrSelector("dark"));
|
|
489
|
-
return attrSelector(mode);
|
|
490
|
-
},
|
|
340
|
+
themeSelector: (mode) => mode === "root" ? ":root" : `[data-theme=${mode}]`,
|
|
491
341
|
theme: {
|
|
492
342
|
modes: {
|
|
493
343
|
root: {
|
|
@@ -513,30 +363,6 @@ var src_default = config.createConfig({
|
|
|
513
363
|
...shared,
|
|
514
364
|
...dark
|
|
515
365
|
}
|
|
516
|
-
},
|
|
517
|
-
rootP3: {
|
|
518
|
-
color: {
|
|
519
|
-
current: "currentColor",
|
|
520
|
-
transparent: "transparent",
|
|
521
|
-
...sharedP3,
|
|
522
|
-
...lightP3
|
|
523
|
-
}
|
|
524
|
-
},
|
|
525
|
-
lightP3: {
|
|
526
|
-
color: {
|
|
527
|
-
current: "currentColor",
|
|
528
|
-
transparent: "transparent",
|
|
529
|
-
...sharedP3,
|
|
530
|
-
...lightP3
|
|
531
|
-
}
|
|
532
|
-
},
|
|
533
|
-
darkP3: {
|
|
534
|
-
color: {
|
|
535
|
-
current: "currentColor",
|
|
536
|
-
transparent: "transparent",
|
|
537
|
-
...sharedP3,
|
|
538
|
-
...darkP3
|
|
539
|
-
}
|
|
540
366
|
}
|
|
541
367
|
},
|
|
542
368
|
alpha: {
|
|
@@ -718,21 +544,6 @@ var src_default = config.createConfig({
|
|
|
718
544
|
"lg-xl": fluid({ property: "fluid-flex-basis", from: BP_LG, to: BP_XL }),
|
|
719
545
|
"lg-2xl": fluid({ property: "fluid-flex-basis", from: BP_LG, to: BP_2XL })
|
|
720
546
|
},
|
|
721
|
-
"fluid-text-size": {
|
|
722
|
-
xs: 12 / BASE_FONT_SIZE,
|
|
723
|
-
sm: 14 / BASE_FONT_SIZE,
|
|
724
|
-
base: 16 / BASE_FONT_SIZE,
|
|
725
|
-
lg: 18 / BASE_FONT_SIZE,
|
|
726
|
-
xl: 20 / BASE_FONT_SIZE,
|
|
727
|
-
"2xl": 24 / BASE_FONT_SIZE,
|
|
728
|
-
"3xl": 30 / BASE_FONT_SIZE,
|
|
729
|
-
"4xl": 36 / BASE_FONT_SIZE,
|
|
730
|
-
"5xl": 48 / BASE_FONT_SIZE,
|
|
731
|
-
"6xl": 60 / BASE_FONT_SIZE,
|
|
732
|
-
"7xl": 72 / BASE_FONT_SIZE,
|
|
733
|
-
"8xl": 96 / BASE_FONT_SIZE,
|
|
734
|
-
"9xl": 128 / BASE_FONT_SIZE
|
|
735
|
-
},
|
|
736
547
|
"fluid-text-size-clamp": {
|
|
737
548
|
"min-max": fluid({ property: "fluid-text-size", from: BP_SM, to: BP_2XL, divider: 1 }),
|
|
738
549
|
"sm-md": fluid({ property: "fluid-text-size", from: BP_SM, to: BP_MD, divider: 1 }),
|
|
@@ -788,7 +599,7 @@ var src_default = config.createConfig({
|
|
|
788
599
|
"lg-xl": fluid({ property: "fluid-inset-y", from: BP_LG, to: BP_XL }),
|
|
789
600
|
"lg-2xl": fluid({ property: "fluid-inset-y", from: BP_LG, to: BP_2XL })
|
|
790
601
|
},
|
|
791
|
-
"fluid-bottom": {
|
|
602
|
+
"fluid-bottom-clamp": {
|
|
792
603
|
"min-max": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_2XL }),
|
|
793
604
|
"sm-md": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_MD }),
|
|
794
605
|
"sm-lg": fluid({ property: "fluid-bottom", from: BP_SM, to: BP_LG }),
|
|
@@ -810,7 +621,7 @@ var src_default = config.createConfig({
|
|
|
810
621
|
"lg-xl": fluid({ property: "fluid-top", from: BP_LG, to: BP_XL }),
|
|
811
622
|
"lg-2xl": fluid({ property: "fluid-top", from: BP_LG, to: BP_2XL })
|
|
812
623
|
},
|
|
813
|
-
"fluid-inset-x": {
|
|
624
|
+
"fluid-inset-x-clamp": {
|
|
814
625
|
"min-max": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_2XL }),
|
|
815
626
|
"sm-md": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_MD }),
|
|
816
627
|
"sm-lg": fluid({ property: "fluid-inset-x", from: BP_SM, to: BP_LG }),
|
|
@@ -843,7 +654,7 @@ var src_default = config.createConfig({
|
|
|
843
654
|
"lg-xl": fluid({ property: "fluid-left", from: BP_LG, to: BP_XL }),
|
|
844
655
|
"lg-2xl": fluid({ property: "fluid-left", from: BP_LG, to: BP_2XL })
|
|
845
656
|
},
|
|
846
|
-
"fluid-m": {
|
|
657
|
+
"fluid-m-clamp": {
|
|
847
658
|
"min-max": fluid({ property: "fluid-m", from: BP_SM, to: BP_2XL }),
|
|
848
659
|
"sm-md": fluid({ property: "fluid-m", from: BP_SM, to: BP_MD }),
|
|
849
660
|
"sm-lg": fluid({ property: "fluid-m", from: BP_SM, to: BP_LG }),
|
|
@@ -1234,14 +1045,22 @@ var src_default = config.createConfig({
|
|
|
1234
1045
|
mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
|
|
1235
1046
|
},
|
|
1236
1047
|
gradient: {
|
|
1237
|
-
"to-t": optionalViaGradient("to top"),
|
|
1238
|
-
"to-tr": optionalViaGradient("to top right"),
|
|
1239
|
-
"to-r": optionalViaGradient("to right"),
|
|
1240
|
-
"to-br": optionalViaGradient("to bottom right"),
|
|
1241
|
-
"to-b": optionalViaGradient("to bottom"),
|
|
1242
|
-
"to-bl": optionalViaGradient("to bottom left"),
|
|
1243
|
-
"to-l": optionalViaGradient("to left"),
|
|
1244
|
-
"to-tl": optionalViaGradient("to top left")
|
|
1048
|
+
"to-t": optionalViaGradient("to top in srgb"),
|
|
1049
|
+
"to-tr": optionalViaGradient("to top right in srgb"),
|
|
1050
|
+
"to-r": optionalViaGradient("to right in srgb"),
|
|
1051
|
+
"to-br": optionalViaGradient("to bottom right in srgb"),
|
|
1052
|
+
"to-b": optionalViaGradient("to bottom in srgb"),
|
|
1053
|
+
"to-bl": optionalViaGradient("to bottom left in srgb"),
|
|
1054
|
+
"to-l": optionalViaGradient("to left in srgb"),
|
|
1055
|
+
"to-tl": optionalViaGradient("to top left in srgb"),
|
|
1056
|
+
"hd-to-t": optionalViaGradient("to top in oklch"),
|
|
1057
|
+
"hd-to-tr": optionalViaGradient("to top right in oklch"),
|
|
1058
|
+
"hd-to-r": optionalViaGradient("to right in oklch"),
|
|
1059
|
+
"hd-to-br": optionalViaGradient("to bottom right in oklch"),
|
|
1060
|
+
"hd-to-b": optionalViaGradient("to bottom in oklch"),
|
|
1061
|
+
"hd-to-bl": optionalViaGradient("to bottom left in oklch"),
|
|
1062
|
+
"hd-to-l": optionalViaGradient("to left in oklch"),
|
|
1063
|
+
"hd-to-tl": optionalViaGradient("to top left in oklch")
|
|
1245
1064
|
},
|
|
1246
1065
|
space: {
|
|
1247
1066
|
"0": 0,
|
|
@@ -1444,6 +1263,21 @@ var src_default = config.createConfig({
|
|
|
1444
1263
|
"8xl": rem(96),
|
|
1445
1264
|
"9xl": rem(128)
|
|
1446
1265
|
},
|
|
1266
|
+
"fluid-text-size": {
|
|
1267
|
+
xs: 12 / BASE_FONT_SIZE,
|
|
1268
|
+
sm: 14 / BASE_FONT_SIZE,
|
|
1269
|
+
base: 16 / BASE_FONT_SIZE,
|
|
1270
|
+
lg: 18 / BASE_FONT_SIZE,
|
|
1271
|
+
xl: 20 / BASE_FONT_SIZE,
|
|
1272
|
+
"2xl": 24 / BASE_FONT_SIZE,
|
|
1273
|
+
"3xl": 30 / BASE_FONT_SIZE,
|
|
1274
|
+
"4xl": 36 / BASE_FONT_SIZE,
|
|
1275
|
+
"5xl": 48 / BASE_FONT_SIZE,
|
|
1276
|
+
"6xl": 60 / BASE_FONT_SIZE,
|
|
1277
|
+
"7xl": 72 / BASE_FONT_SIZE,
|
|
1278
|
+
"8xl": 96 / BASE_FONT_SIZE,
|
|
1279
|
+
"9xl": 128 / BASE_FONT_SIZE
|
|
1280
|
+
},
|
|
1447
1281
|
tracking: {
|
|
1448
1282
|
tighter: "-0.05em",
|
|
1449
1283
|
tight: "-0.025em",
|
|
@@ -1644,8 +1478,6 @@ var src_default = config.createConfig({
|
|
|
1644
1478
|
"background-position-x": ["grid", "space"],
|
|
1645
1479
|
"background-position-y": ["grid", "space"],
|
|
1646
1480
|
"block-size": ["size", "grid", "fluid-height-clamp"],
|
|
1647
|
-
"block-size-min": ["number"],
|
|
1648
|
-
"block-size-max": ["number"],
|
|
1649
1481
|
border: ["line"],
|
|
1650
1482
|
"border-top": ["line"],
|
|
1651
1483
|
"border-right": ["line"],
|
|
@@ -1701,8 +1533,6 @@ var src_default = config.createConfig({
|
|
|
1701
1533
|
fill: ["color"],
|
|
1702
1534
|
flex: ["flex"],
|
|
1703
1535
|
"flex-basis": ["grid", "space", "fluid-flex-basis-clamp"],
|
|
1704
|
-
"flex-basis-min": ["number"],
|
|
1705
|
-
"flex-basis-max": ["number"],
|
|
1706
1536
|
"fluid-height-min": ["number"],
|
|
1707
1537
|
"fluid-height-max": ["number"],
|
|
1708
1538
|
"fluid-border-spacing-min": ["number"],
|
|
@@ -1823,18 +1653,18 @@ var src_default = config.createConfig({
|
|
|
1823
1653
|
"inline-size": ["size", "grid", "fluid-width-clamp"],
|
|
1824
1654
|
inset: ["grid", "space", "fluid-inset-clamp"],
|
|
1825
1655
|
"inset-block": ["grid", "space", "fluid-inset-y-clamp"],
|
|
1826
|
-
"inset-block-end": ["grid", "space", "fluid-bottom"],
|
|
1656
|
+
"inset-block-end": ["grid", "space", "fluid-bottom-clamp"],
|
|
1827
1657
|
"inset-block-start": ["grid", "space", "fluid-top-clamp"],
|
|
1828
|
-
"inset-inline": ["grid", "space", "fluid-inset-x"],
|
|
1658
|
+
"inset-inline": ["grid", "space", "fluid-inset-x-clamp"],
|
|
1829
1659
|
"inset-inline-end": ["grid", "space", "fluid-right-clamp"],
|
|
1830
1660
|
"inset-inline-start": ["grid", "space", "fluid-left-clamp"],
|
|
1831
1661
|
left: ["grid", "space", "fluid-left-clamp"],
|
|
1832
1662
|
"letter-spacing": ["tracking"],
|
|
1833
|
-
margin: ["grid", "fluid-m"],
|
|
1663
|
+
margin: ["grid", "fluid-m-clamp"],
|
|
1834
1664
|
"margin-block": ["grid", "fluid-my-clamp"],
|
|
1835
1665
|
"margin-block-end": ["grid", "fluid-mb-clamp"],
|
|
1836
1666
|
"margin-block-start": ["grid", "fluid-mt-clamp"],
|
|
1837
|
-
"margin-inline": ["grid", "fluid-mx"],
|
|
1667
|
+
"margin-inline": ["grid", "fluid-mx-clamp"],
|
|
1838
1668
|
"margin-inline-end": ["grid", "fluid-mr-clamp"],
|
|
1839
1669
|
"margin-inline-start": ["grid", "fluid-ml-clamp"],
|
|
1840
1670
|
"margin-top": ["grid", "fluid-mt-clamp"],
|
|
@@ -1854,11 +1684,11 @@ var src_default = config.createConfig({
|
|
|
1854
1684
|
"outline-color": ["color"],
|
|
1855
1685
|
"outline-width": ["line-size"],
|
|
1856
1686
|
"outline-offset": ["offset"],
|
|
1857
|
-
padding: ["grid", "fluid-p"],
|
|
1687
|
+
padding: ["grid", "fluid-p-clamp"],
|
|
1858
1688
|
"padding-block": ["grid", "fluid-py-clamp"],
|
|
1859
1689
|
"padding-block-end": ["grid", "fluid-pb-clamp"],
|
|
1860
1690
|
"padding-block-start": ["grid", "fluid-pt-clamp"],
|
|
1861
|
-
"padding-inline": ["grid", "fluid-px"],
|
|
1691
|
+
"padding-inline": ["grid", "fluid-px-clamp"],
|
|
1862
1692
|
"padding-inline-end": ["grid", "fluid-pr-clamp"],
|
|
1863
1693
|
"padding-inline-start": ["grid", "fluid-pl-clamp"],
|
|
1864
1694
|
"padding-top": ["grid", "fluid-pt-clamp"],
|
|
@@ -1867,11 +1697,11 @@ var src_default = config.createConfig({
|
|
|
1867
1697
|
"padding-left": ["grid", "fluid-pl-clamp"],
|
|
1868
1698
|
right: ["grid", "space", "fluid-right-clamp"],
|
|
1869
1699
|
"row-gap": ["grid", "fluid-row-gap-clamp"],
|
|
1870
|
-
"scroll-margin": ["grid", "fluid-scroll-m"],
|
|
1700
|
+
"scroll-margin": ["grid", "fluid-scroll-m-clamp"],
|
|
1871
1701
|
"scroll-margin-block": ["grid", "fluid-scroll-my-clamp"],
|
|
1872
1702
|
"scroll-margin-block-end": ["grid", "fluid-scroll-mb-clamp"],
|
|
1873
1703
|
"scroll-margin-block-start": ["grid", "fluid-scroll-mt-clamp"],
|
|
1874
|
-
"scroll-margin-inline": ["grid", "fluid-scroll-mx"],
|
|
1704
|
+
"scroll-margin-inline": ["grid", "fluid-scroll-mx-clamp"],
|
|
1875
1705
|
"scroll-margin-inline-end": ["grid", "fluid-scroll-mr-clamp"],
|
|
1876
1706
|
"scroll-margin-inline-start": ["grid", "fluid-scroll-ml-clamp"],
|
|
1877
1707
|
"scroll-margin-top": ["grid", "fluid-scroll-mt-clamp"],
|
|
@@ -1882,7 +1712,7 @@ var src_default = config.createConfig({
|
|
|
1882
1712
|
"scroll-padding-block": ["grid", "fluid-scroll-py-clamp"],
|
|
1883
1713
|
"scroll-padding-block-end": ["grid", "fluid-scroll-pb-clamp"],
|
|
1884
1714
|
"scroll-padding-block-start": ["grid", "fluid-scroll-pt-clamp"],
|
|
1885
|
-
"scroll-padding-inline": ["grid", "fluid-scroll-px"],
|
|
1715
|
+
"scroll-padding-inline": ["grid", "fluid-scroll-px-clamp"],
|
|
1886
1716
|
"scroll-padding-inline-end": ["grid", "fluid-scroll-pr-clamp"],
|
|
1887
1717
|
"scroll-padding-inline-start": ["grid", "fluid-scroll-pl-clamp"],
|
|
1888
1718
|
"scroll-padding-top": ["grid", "fluid-scroll-pt-clamp"],
|