@tokenami/ds 0.0.73 → 0.0.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +19 -5
  2. package/dist/index.cjs +252 -150
  3. package/dist/index.d.cts +246 -150
  4. package/dist/index.d.ts +246 -150
  5. package/dist/index.js +252 -150
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -40,6 +40,8 @@ Use the fluid spacing and font size tokens to create responsive designs without
40
40
 
41
41
  ### Spacing
42
42
 
43
+ Use the `--fluid-<property-type>-clamp_<breakpoint-range>` toggle token to apply fluid spacing.
44
+
43
45
  The following example will apply `8px` (`0.5rem`) padding to your element at the smallest breakpoint, and `16px` (`1rem`) padding at the largest breakpoint.
44
46
 
45
47
  ```tsx
@@ -50,7 +52,7 @@ css({
50
52
  });
51
53
  ```
52
54
 
53
- You can adjust the breakpoints the fluid spacings apply to by changing the `--padding` clamp value:
55
+ Adjust the breakpoints for fluid spacings by updating the breakpoint range:
54
56
 
55
57
  ```diff
56
58
  css({
@@ -83,6 +85,14 @@ The design system uses [Radix UI P3 colours](https://www.radix-ui.com/colors) an
83
85
 
84
86
  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
87
 
88
+ ### Colour space
89
+
90
+ Use the `--color-space` property to change the colour space for the colours in your application. It defaults to `srgb`.
91
+
92
+ ```tsx
93
+ <body style={css({ '--color-space': 'oklch' })}></body>
94
+ ```
95
+
86
96
  ### Gradients
87
97
 
88
98
  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.
@@ -95,13 +105,17 @@ css({
95
105
  });
96
106
  ```
97
107
 
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.
108
+ The gradients respect the colour space set by the `--color-space` property.
109
+
110
+ ### Opacity, tint, and shade
111
+
112
+ Use the `--mix-<property-type>-[tint|shade|opacity]` toggle tokens along with the `--mix-<property-type>-color` and `--mix-<property-type>-percent` custom properties to add opacity, tint or shade to your colours.
99
113
 
100
114
  ```tsx
101
115
  css({
102
- '--background-image': 'var(--gradient_hd-to-b)',
103
- '--gradient-from': 'var(--color_crimson9)',
104
- '--gradient-to': 'var(--color_green10)',
116
+ '--background-color': 'var(--mix-bg_opacity)',
117
+ '--mix-bg-color': 'var(--color_violet11)', // the colour to apply the opacity, tint or shade to
118
+ '--mix-bg-percent': 50, // bg will be 50% opacity
105
119
  });
106
120
  ```
107
121
 
package/dist/index.cjs CHANGED
@@ -165,6 +165,12 @@ var fluid = (params) => {
165
165
  ---${params.property}-intercept: calc(var(---${params.property}-min) - (var(---${params.property}-scope) * ${breakpointMin}));
166
166
  `;
167
167
  };
168
+ var colorMixOpacity = (property) => {
169
+ return `color-mix(in var(--color-space, srgb), var(--${property}-color) calc(var(--${property}-percent) * 1%), transparent)`;
170
+ };
171
+ var colorMix = (property, color) => {
172
+ return `color-mix(in var(--color-space, srgb), var(--${property}-color), ${color} calc(var(--${property}-percent) * 1%))`;
173
+ };
168
174
  var src_default = config.createConfig({
169
175
  include: [],
170
176
  grid: rem(BASE_GRID_SIZE),
@@ -313,7 +319,7 @@ var src_default = config.createConfig({
313
319
  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
314
320
  height: "auto"
315
321
  },
316
- "::webkit-search-decoration": {
322
+ "::-webkit-search-decoration": {
317
323
  WebkitAppearance: "none"
318
324
  },
319
325
  summary: {
@@ -366,29 +372,6 @@ var src_default = config.createConfig({
366
372
  }
367
373
  },
368
374
  root: {
369
- alpha: {
370
- "0": 0,
371
- "5": 0.05,
372
- "10": 0.1,
373
- "15": 0.15,
374
- "20": 0.2,
375
- "25": 0.25,
376
- "30": 0.3,
377
- "35": 0.35,
378
- "40": 0.4,
379
- "45": 0.45,
380
- "50": 0.5,
381
- "55": 0.55,
382
- "60": 0.6,
383
- "65": 0.65,
384
- "70": 0.7,
385
- "75": 0.75,
386
- "80": 0.8,
387
- "85": 0.85,
388
- "90": 0.9,
389
- "95": 0.95,
390
- "100": 1
391
- },
392
375
  anim: {
393
376
  none: "none",
394
377
  spin: "spin 1s linear infinite",
@@ -413,6 +396,11 @@ var src_default = config.createConfig({
413
396
  "6xl": rem(1152),
414
397
  "7xl": rem(1280)
415
398
  },
399
+ "color-space": {
400
+ srgb: "",
401
+ oklch: "oklch",
402
+ oklab: "oklab"
403
+ },
416
404
  "drop-shadow": {
417
405
  xs: "drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
418
406
  sm: "drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))",
@@ -1055,22 +1043,14 @@ var src_default = config.createConfig({
1055
1043
  mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
1056
1044
  },
1057
1045
  gradient: {
1058
- "to-t": optionalViaGradient("to top in srgb"),
1059
- "to-tr": optionalViaGradient("to top right in srgb"),
1060
- "to-r": optionalViaGradient("to right in srgb"),
1061
- "to-br": optionalViaGradient("to bottom right in srgb"),
1062
- "to-b": optionalViaGradient("to bottom in srgb"),
1063
- "to-bl": optionalViaGradient("to bottom left in srgb"),
1064
- "to-l": optionalViaGradient("to left in srgb"),
1065
- "to-tl": optionalViaGradient("to top left in srgb"),
1066
- "hd-to-t": optionalViaGradient("to top in oklch"),
1067
- "hd-to-tr": optionalViaGradient("to top right in oklch"),
1068
- "hd-to-r": optionalViaGradient("to right in oklch"),
1069
- "hd-to-br": optionalViaGradient("to bottom right in oklch"),
1070
- "hd-to-b": optionalViaGradient("to bottom in oklch"),
1071
- "hd-to-bl": optionalViaGradient("to bottom left in oklch"),
1072
- "hd-to-l": optionalViaGradient("to left in oklch"),
1073
- "hd-to-tl": optionalViaGradient("to top left in oklch")
1046
+ "to-t": optionalViaGradient("to top in var(--color-space, srgb)"),
1047
+ "to-tr": optionalViaGradient("to top right in var(--color-space, srgb)"),
1048
+ "to-r": optionalViaGradient("to right in var(--color-space, srgb)"),
1049
+ "to-br": optionalViaGradient("to bottom right in var(--color-space, srgb)"),
1050
+ "to-b": optionalViaGradient("to bottom in var(--color-space, srgb)"),
1051
+ "to-bl": optionalViaGradient("to bottom left in var(--color-space, srgb)"),
1052
+ "to-l": optionalViaGradient("to left in var(--color-space, srgb)"),
1053
+ "to-tl": optionalViaGradient("to top left in var(--color-space, srgb)")
1074
1054
  },
1075
1055
  space: {
1076
1056
  "0": 0,
@@ -1129,6 +1109,91 @@ var src_default = config.createConfig({
1129
1109
  relaxed: 1.625,
1130
1110
  loose: 2
1131
1111
  },
1112
+ mix: {
1113
+ opacity: colorMixOpacity("mix"),
1114
+ tint: colorMix("mix", "#fff"),
1115
+ shade: colorMix("mix", "#000")
1116
+ },
1117
+ "mix-accent": {
1118
+ opacity: colorMixOpacity("mix-accent"),
1119
+ tint: colorMix("mix-accent", "#fff"),
1120
+ shade: colorMix("mix-accent", "#000")
1121
+ },
1122
+ "mix-bg": {
1123
+ opacity: colorMixOpacity("mix-bg"),
1124
+ tint: colorMix("mix-bg", "#fff"),
1125
+ shade: colorMix("mix-bg", "#000")
1126
+ },
1127
+ "mix-border": {
1128
+ opacity: colorMixOpacity("mix-border"),
1129
+ tint: colorMix("mix-border", "#fff"),
1130
+ shade: colorMix("mix-border", "#000")
1131
+ },
1132
+ "mix-border-top": {
1133
+ opacity: colorMixOpacity("mix-border-top"),
1134
+ tint: colorMix("mix-border-top", "#fff"),
1135
+ shade: colorMix("mix-border-top", "#000")
1136
+ },
1137
+ "mix-border-right": {
1138
+ opacity: colorMixOpacity("mix-border-right"),
1139
+ tint: colorMix("mix-border-right", "#fff"),
1140
+ shade: colorMix("mix-border-right", "#000")
1141
+ },
1142
+ "mix-border-bottom": {
1143
+ opacity: colorMixOpacity("mix-border-bottom"),
1144
+ tint: colorMix("mix-border-bottom", "#fff"),
1145
+ shade: colorMix("mix-border-bottom", "#000")
1146
+ },
1147
+ "mix-border-left": {
1148
+ opacity: colorMixOpacity("mix-border-left"),
1149
+ tint: colorMix("mix-border-left", "#fff"),
1150
+ shade: colorMix("mix-border-left", "#000")
1151
+ },
1152
+ "mix-border-x": {
1153
+ opacity: colorMixOpacity("mix-border-x"),
1154
+ tint: colorMix("mix-border-x", "#fff"),
1155
+ shade: colorMix("mix-border-x", "#000")
1156
+ },
1157
+ "mix-border-y": {
1158
+ opacity: colorMixOpacity("mix-border-y"),
1159
+ tint: colorMix("mix-border-y", "#fff"),
1160
+ shade: colorMix("mix-border-y", "#000")
1161
+ },
1162
+ "mix-caret": {
1163
+ opacity: colorMixOpacity("mix-caret"),
1164
+ tint: colorMix("mix-caret", "#fff"),
1165
+ shade: colorMix("mix-caret", "#000")
1166
+ },
1167
+ "mix-column-rule": {
1168
+ opacity: colorMixOpacity("mix-column-rule"),
1169
+ tint: colorMix("mix-column-rule", "#fff"),
1170
+ shade: colorMix("mix-column-rule", "#000")
1171
+ },
1172
+ "mix-fill": {
1173
+ opacity: colorMixOpacity("mix-fill"),
1174
+ tint: colorMix("mix-fill", "#fff"),
1175
+ shade: colorMix("mix-fill", "#000")
1176
+ },
1177
+ "mix-outline": {
1178
+ opacity: colorMixOpacity("mix-outline"),
1179
+ tint: colorMix("mix-outline", "#fff"),
1180
+ shade: colorMix("mix-outline", "#000")
1181
+ },
1182
+ "mix-stroke": {
1183
+ opacity: colorMixOpacity("mix-stroke"),
1184
+ tint: colorMix("mix-stroke", "#fff"),
1185
+ shade: colorMix("mix-stroke", "#000")
1186
+ },
1187
+ "mix-text-decoration": {
1188
+ opacity: colorMixOpacity("mix-text-decoration"),
1189
+ tint: colorMix("mix-text-decoration", "#fff"),
1190
+ shade: colorMix("mix-text-decoration", "#000")
1191
+ },
1192
+ "mix-shadow": {
1193
+ opacity: colorMixOpacity("mix-shadow"),
1194
+ tint: colorMix("mix-shadow", "#fff"),
1195
+ shade: colorMix("mix-shadow", "#000")
1196
+ },
1132
1197
  morph: {
1133
1198
  none: "none",
1134
1199
  all: "all cubic-bezier(0.4, 0, 0.2, 1) 150ms",
@@ -1478,13 +1543,13 @@ var src_default = config.createConfig({
1478
1543
  w: ["inline-size"]
1479
1544
  },
1480
1545
  properties: {
1481
- "accent-color": ["color"],
1546
+ "accent-color": ["color", "mix-accent"],
1482
1547
  animation: ["anim"],
1483
1548
  "animation-timing-function": ["ease"],
1484
1549
  "aspect-ratio": ["ratio"],
1485
1550
  "backdrop-filter": ["effect"],
1486
- background: ["color", "gradient"],
1487
- "background-color": ["color"],
1551
+ background: ["color", "gradient", "mix-bg"],
1552
+ "background-color": ["color", "mix-bg"],
1488
1553
  "background-image": ["gradient"],
1489
1554
  "background-position-x": ["grid", "space"],
1490
1555
  "background-position-y": ["grid", "space"],
@@ -1509,17 +1574,17 @@ var src_default = config.createConfig({
1509
1574
  "border-inline-start-width": ["line-size"],
1510
1575
  "border-inline-end": ["line"],
1511
1576
  "border-inline-end-width": ["line-size"],
1512
- "border-color": ["color"],
1513
- "border-top-color": ["color"],
1514
- "border-right-color": ["color"],
1515
- "border-bottom-color": ["color"],
1516
- "border-left-color": ["color"],
1517
- "border-block-color": ["color"],
1518
- "border-block-start-color": ["color"],
1519
- "border-block-end-color": ["color"],
1520
- "border-inline-color": ["color"],
1521
- "border-inline-start-color": ["color"],
1522
- "border-inline-end-color": ["color"],
1577
+ "border-color": ["color", "mix-border"],
1578
+ "border-top-color": ["color", "mix-border-top"],
1579
+ "border-right-color": ["color", "mix-border-right"],
1580
+ "border-bottom-color": ["color", "mix-border-bottom"],
1581
+ "border-left-color": ["color", "mix-border-left"],
1582
+ "border-block-color": ["color", "mix-border-y"],
1583
+ "border-block-start-color": ["color", "mix-border-top"],
1584
+ "border-block-end-color": ["color", "mix-border-bottom"],
1585
+ "border-inline-color": ["color", "mix-border-x"],
1586
+ "border-inline-start-color": ["color", "mix-border-left"],
1587
+ "border-inline-end-color": ["color", "mix-border-right"],
1523
1588
  "border-radius": ["radii"],
1524
1589
  "border-top-left-radius": ["radii"],
1525
1590
  "border-top-right-radius": ["radii"],
@@ -1532,18 +1597,112 @@ var src_default = config.createConfig({
1532
1597
  "border-spacing": ["grid", "fluid-border-spacing-clamp"],
1533
1598
  bottom: ["grid", "space", "fluid-bottom-clamp"],
1534
1599
  "box-shadow": ["shadow"],
1535
- "caret-color": ["color"],
1536
- color: ["color"],
1600
+ "caret-color": ["color", "mix-caret"],
1601
+ color: ["color", "mix"],
1537
1602
  "column-gap": ["grid", "fluid-column-gap-clamp"],
1538
1603
  "column-rule": ["line"],
1539
- "column-rule-color": ["color"],
1604
+ "column-rule-color": ["color", "mix-column-rule"],
1540
1605
  "column-rule-width": ["line-size"],
1541
1606
  columns: ["col"],
1542
1607
  "column-width": ["size", "grid", "fluid-column-width-clamp"],
1543
1608
  filter: ["effect", "drop-shadow"],
1544
- fill: ["color"],
1609
+ fill: ["color", "mix-fill"],
1545
1610
  flex: ["flex"],
1546
1611
  "flex-basis": ["grid", "space", "fluid-flex-basis-clamp"],
1612
+ font: ["text"],
1613
+ "font-family": ["font"],
1614
+ "font-size": ["text-size", "fluid-text-size-clamp"],
1615
+ "font-weight": ["weight"],
1616
+ "line-height": ["leading"],
1617
+ gap: ["grid", "fluid-gap-clamp"],
1618
+ "grid-column": ["span"],
1619
+ "grid-row": ["span"],
1620
+ "grid-template-rows": ["grid-span"],
1621
+ "grid-template-columns": ["grid-span"],
1622
+ height: ["size", "grid", "fluid-height-clamp"],
1623
+ "inline-size": ["size", "grid", "fluid-width-clamp"],
1624
+ inset: ["grid", "space", "fluid-inset-clamp"],
1625
+ "inset-block": ["grid", "space", "fluid-inset-y-clamp"],
1626
+ "inset-block-end": ["grid", "space", "fluid-bottom-clamp"],
1627
+ "inset-block-start": ["grid", "space", "fluid-top-clamp"],
1628
+ "inset-inline": ["grid", "space", "fluid-inset-x-clamp"],
1629
+ "inset-inline-end": ["grid", "space", "fluid-right-clamp"],
1630
+ "inset-inline-start": ["grid", "space", "fluid-left-clamp"],
1631
+ left: ["grid", "space", "fluid-left-clamp"],
1632
+ "letter-spacing": ["tracking"],
1633
+ margin: ["grid", "fluid-m-clamp"],
1634
+ "margin-block": ["grid", "fluid-my-clamp"],
1635
+ "margin-block-end": ["grid", "fluid-mb-clamp"],
1636
+ "margin-block-start": ["grid", "fluid-mt-clamp"],
1637
+ "margin-inline": ["grid", "fluid-mx-clamp"],
1638
+ "margin-inline-end": ["grid", "fluid-mr-clamp"],
1639
+ "margin-inline-start": ["grid", "fluid-ml-clamp"],
1640
+ "margin-top": ["grid", "fluid-mt-clamp"],
1641
+ "margin-right": ["grid", "fluid-mr-clamp"],
1642
+ "margin-bottom": ["grid", "fluid-mb-clamp"],
1643
+ "margin-left": ["grid", "fluid-ml-clamp"],
1644
+ "max-block-size": ["size", "grid", "fluid-max-height-clamp"],
1645
+ "max-height": ["size", "grid", "fluid-max-width-clamp"],
1646
+ "max-inline-size": ["size", "grid", "fluid-max-width-clamp"],
1647
+ "max-width": ["size", "grid", "fluid-max-height-clamp"],
1648
+ "min-block-size": ["size", "grid", "fluid-min-height-clamp"],
1649
+ "min-height": ["size", "grid", "fluid-min-width-clamp"],
1650
+ "min-inline-size": ["size", "grid", "fluid-min-width-clamp"],
1651
+ "min-width": ["size", "grid", "fluid-min-height-clamp"],
1652
+ opacity: ["number"],
1653
+ outline: ["line"],
1654
+ "outline-color": ["color", "mix-outline"],
1655
+ "outline-width": ["line-size"],
1656
+ "outline-offset": ["offset"],
1657
+ padding: ["grid", "fluid-p-clamp"],
1658
+ "padding-block": ["grid", "fluid-py-clamp"],
1659
+ "padding-block-end": ["grid", "fluid-pb-clamp"],
1660
+ "padding-block-start": ["grid", "fluid-pt-clamp"],
1661
+ "padding-inline": ["grid", "fluid-px-clamp"],
1662
+ "padding-inline-end": ["grid", "fluid-pr-clamp"],
1663
+ "padding-inline-start": ["grid", "fluid-pl-clamp"],
1664
+ "padding-top": ["grid", "fluid-pt-clamp"],
1665
+ "padding-right": ["grid", "fluid-pr-clamp"],
1666
+ "padding-bottom": ["grid", "fluid-pb-clamp"],
1667
+ "padding-left": ["grid", "fluid-pl-clamp"],
1668
+ right: ["grid", "space", "fluid-right-clamp"],
1669
+ "row-gap": ["grid", "fluid-row-gap-clamp"],
1670
+ "scroll-margin": ["grid", "fluid-scroll-m-clamp"],
1671
+ "scroll-margin-block": ["grid", "fluid-scroll-my-clamp"],
1672
+ "scroll-margin-block-end": ["grid", "fluid-scroll-mb-clamp"],
1673
+ "scroll-margin-block-start": ["grid", "fluid-scroll-mt-clamp"],
1674
+ "scroll-margin-inline": ["grid", "fluid-scroll-mx-clamp"],
1675
+ "scroll-margin-inline-end": ["grid", "fluid-scroll-mr-clamp"],
1676
+ "scroll-margin-inline-start": ["grid", "fluid-scroll-ml-clamp"],
1677
+ "scroll-margin-top": ["grid", "fluid-scroll-mt-clamp"],
1678
+ "scroll-margin-right": ["grid", "fluid-scroll-mr-clamp"],
1679
+ "scroll-margin-bottom": ["grid", "fluid-scroll-mb-clamp"],
1680
+ "scroll-margin-left": ["grid", "fluid-scroll-ml-clamp"],
1681
+ "scroll-padding": ["grid", "fluid-scroll-p-clamp"],
1682
+ "scroll-padding-block": ["grid", "fluid-scroll-py-clamp"],
1683
+ "scroll-padding-block-end": ["grid", "fluid-scroll-pb-clamp"],
1684
+ "scroll-padding-block-start": ["grid", "fluid-scroll-pt-clamp"],
1685
+ "scroll-padding-inline": ["grid", "fluid-scroll-px-clamp"],
1686
+ "scroll-padding-inline-end": ["grid", "fluid-scroll-pr-clamp"],
1687
+ "scroll-padding-inline-start": ["grid", "fluid-scroll-pl-clamp"],
1688
+ "scroll-padding-top": ["grid", "fluid-scroll-pt-clamp"],
1689
+ "scroll-padding-right": ["grid", "fluid-scroll-pr-clamp"],
1690
+ "scroll-padding-bottom": ["grid", "fluid-scroll-pb-clamp"],
1691
+ "scroll-padding-left": ["grid", "fluid-scroll-pl-clamp"],
1692
+ stroke: ["color", "mix-stroke"],
1693
+ "stroke-width": ["grid", "fluid-stroke-width-clamp"],
1694
+ "text-decoration-color": ["color", "mix-text-decoration"],
1695
+ "text-indent": ["grid", "fluid-text-indent-clamp"],
1696
+ "text-shadow": ["shadow"],
1697
+ top: ["grid", "space", "fluid-top-clamp"],
1698
+ transition: ["morph"],
1699
+ "transition-duration": ["time"],
1700
+ "transition-timing-function": ["ease"],
1701
+ "transition-delay": ["time"],
1702
+ width: ["size", "grid", "fluid-width-clamp"]
1703
+ },
1704
+ customProperties: {
1705
+ "color-space": ["color-space"],
1547
1706
  "fluid-height-min": ["number"],
1548
1707
  "fluid-height-max": ["number"],
1549
1708
  "fluid-border-spacing-min": ["number"],
@@ -1644,104 +1803,47 @@ var src_default = config.createConfig({
1644
1803
  "fluid-stroke-width-max": ["number"],
1645
1804
  "fluid-text-indent-min": ["number"],
1646
1805
  "fluid-text-indent-max": ["number"],
1647
- font: ["text"],
1648
- "font-family": ["font"],
1649
- "font-size": ["text-size", "fluid-text-size-clamp"],
1650
- "font-weight": ["weight"],
1651
- "line-height": ["leading"],
1652
- gap: ["grid", "fluid-gap-clamp"],
1653
1806
  "gradient-from": ["color"],
1654
1807
  "gradient-from-stop": ["stop"],
1655
1808
  "gradient-to": ["color"],
1656
1809
  "gradient-to-stop": ["stop"],
1657
1810
  "gradient-via": ["color"],
1658
1811
  "gradient-via-stop": ["stop"],
1659
- "grid-column": ["span"],
1660
- "grid-row": ["span"],
1661
- "grid-template-rows": ["grid-span"],
1662
- "grid-template-columns": ["grid-span"],
1663
- height: ["size", "grid", "fluid-height-clamp"],
1664
- "inline-size": ["size", "grid", "fluid-width-clamp"],
1665
- inset: ["grid", "space", "fluid-inset-clamp"],
1666
- "inset-block": ["grid", "space", "fluid-inset-y-clamp"],
1667
- "inset-block-end": ["grid", "space", "fluid-bottom-clamp"],
1668
- "inset-block-start": ["grid", "space", "fluid-top-clamp"],
1669
- "inset-inline": ["grid", "space", "fluid-inset-x-clamp"],
1670
- "inset-inline-end": ["grid", "space", "fluid-right-clamp"],
1671
- "inset-inline-start": ["grid", "space", "fluid-left-clamp"],
1672
- left: ["grid", "space", "fluid-left-clamp"],
1673
- "letter-spacing": ["tracking"],
1674
- margin: ["grid", "fluid-m-clamp"],
1675
- "margin-block": ["grid", "fluid-my-clamp"],
1676
- "margin-block-end": ["grid", "fluid-mb-clamp"],
1677
- "margin-block-start": ["grid", "fluid-mt-clamp"],
1678
- "margin-inline": ["grid", "fluid-mx-clamp"],
1679
- "margin-inline-end": ["grid", "fluid-mr-clamp"],
1680
- "margin-inline-start": ["grid", "fluid-ml-clamp"],
1681
- "margin-top": ["grid", "fluid-mt-clamp"],
1682
- "margin-right": ["grid", "fluid-mr-clamp"],
1683
- "margin-bottom": ["grid", "fluid-mb-clamp"],
1684
- "margin-left": ["grid", "fluid-ml-clamp"],
1685
- "max-block-size": ["size", "grid", "fluid-max-height-clamp"],
1686
- "max-height": ["size", "grid", "fluid-max-width-clamp"],
1687
- "max-inline-size": ["size", "grid", "fluid-max-width-clamp"],
1688
- "max-width": ["size", "grid", "fluid-max-height-clamp"],
1689
- "min-block-size": ["size", "grid", "fluid-min-height-clamp"],
1690
- "min-height": ["size", "grid", "fluid-min-width-clamp"],
1691
- "min-inline-size": ["size", "grid", "fluid-min-width-clamp"],
1692
- "min-width": ["size", "grid", "fluid-min-height-clamp"],
1693
- opacity: ["alpha"],
1694
- outline: ["line"],
1695
- "outline-color": ["color"],
1696
- "outline-width": ["line-size"],
1697
- "outline-offset": ["offset"],
1698
- padding: ["grid", "fluid-p-clamp"],
1699
- "padding-block": ["grid", "fluid-py-clamp"],
1700
- "padding-block-end": ["grid", "fluid-pb-clamp"],
1701
- "padding-block-start": ["grid", "fluid-pt-clamp"],
1702
- "padding-inline": ["grid", "fluid-px-clamp"],
1703
- "padding-inline-end": ["grid", "fluid-pr-clamp"],
1704
- "padding-inline-start": ["grid", "fluid-pl-clamp"],
1705
- "padding-top": ["grid", "fluid-pt-clamp"],
1706
- "padding-right": ["grid", "fluid-pr-clamp"],
1707
- "padding-bottom": ["grid", "fluid-pb-clamp"],
1708
- "padding-left": ["grid", "fluid-pl-clamp"],
1709
- right: ["grid", "space", "fluid-right-clamp"],
1710
- "row-gap": ["grid", "fluid-row-gap-clamp"],
1711
- "scroll-margin": ["grid", "fluid-scroll-m-clamp"],
1712
- "scroll-margin-block": ["grid", "fluid-scroll-my-clamp"],
1713
- "scroll-margin-block-end": ["grid", "fluid-scroll-mb-clamp"],
1714
- "scroll-margin-block-start": ["grid", "fluid-scroll-mt-clamp"],
1715
- "scroll-margin-inline": ["grid", "fluid-scroll-mx-clamp"],
1716
- "scroll-margin-inline-end": ["grid", "fluid-scroll-mr-clamp"],
1717
- "scroll-margin-inline-start": ["grid", "fluid-scroll-ml-clamp"],
1718
- "scroll-margin-top": ["grid", "fluid-scroll-mt-clamp"],
1719
- "scroll-margin-right": ["grid", "fluid-scroll-mr-clamp"],
1720
- "scroll-margin-bottom": ["grid", "fluid-scroll-mb-clamp"],
1721
- "scroll-margin-left": ["grid", "fluid-scroll-ml-clamp"],
1722
- "scroll-padding": ["grid", "fluid-scroll-p-clamp"],
1723
- "scroll-padding-block": ["grid", "fluid-scroll-py-clamp"],
1724
- "scroll-padding-block-end": ["grid", "fluid-scroll-pb-clamp"],
1725
- "scroll-padding-block-start": ["grid", "fluid-scroll-pt-clamp"],
1726
- "scroll-padding-inline": ["grid", "fluid-scroll-px-clamp"],
1727
- "scroll-padding-inline-end": ["grid", "fluid-scroll-pr-clamp"],
1728
- "scroll-padding-inline-start": ["grid", "fluid-scroll-pl-clamp"],
1729
- "scroll-padding-top": ["grid", "fluid-scroll-pt-clamp"],
1730
- "scroll-padding-right": ["grid", "fluid-scroll-pr-clamp"],
1731
- "scroll-padding-bottom": ["grid", "fluid-scroll-pb-clamp"],
1732
- "scroll-padding-left": ["grid", "fluid-scroll-pl-clamp"],
1733
- "shadow-color": ["color"],
1734
- stroke: ["color"],
1735
- "stroke-width": ["grid", "fluid-stroke-width-clamp"],
1736
- "text-decoration-color": ["color"],
1737
- "text-indent": ["grid", "fluid-text-indent-clamp"],
1738
- "text-shadow": ["shadow"],
1739
- top: ["grid", "space", "fluid-top-clamp"],
1740
- transition: ["morph"],
1741
- "transition-duration": ["time"],
1742
- "transition-timing-function": ["ease"],
1743
- "transition-delay": ["time"],
1744
- width: ["size", "grid", "fluid-width-clamp"]
1812
+ "mix-color": ["color"],
1813
+ "mix-percent": ["number"],
1814
+ "mix-accent-color": ["color"],
1815
+ "mix-accent-percent": ["number"],
1816
+ "mix-bg-color": ["color"],
1817
+ "mix-bg-percent": ["number"],
1818
+ "mix-border-color": ["color"],
1819
+ "mix-border-percent": ["number"],
1820
+ "mix-border-top-color": ["color"],
1821
+ "mix-border-top-percent": ["number"],
1822
+ "mix-border-right-color": ["color"],
1823
+ "mix-border-right-percent": ["number"],
1824
+ "mix-border-bottom-color": ["color"],
1825
+ "mix-border-bottom-percent": ["number"],
1826
+ "mix-border-left-color": ["color"],
1827
+ "mix-border-left-percent": ["number"],
1828
+ "mix-border-x-color": ["color"],
1829
+ "mix-border-x-percent": ["number"],
1830
+ "mix-border-y-color": ["color"],
1831
+ "mix-border-y-percent": ["number"],
1832
+ "mix-caret-color": ["color"],
1833
+ "mix-caret-percent": ["number"],
1834
+ "mix-column-rule-color": ["color"],
1835
+ "mix-column-rule-percent": ["number"],
1836
+ "mix-fill-color": ["color"],
1837
+ "mix-fill-percent": ["number"],
1838
+ "mix-outline-color": ["color"],
1839
+ "mix-outline-percent": ["number"],
1840
+ "mix-stroke-color": ["color"],
1841
+ "mix-stroke-percent": ["number"],
1842
+ "mix-text-decoration-color": ["color"],
1843
+ "mix-text-decoration-percent": ["number"],
1844
+ "mix-shadow-color": ["color"],
1845
+ "mix-shadow-percent": ["number"],
1846
+ "shadow-color": ["color", "mix-shadow"]
1745
1847
  }
1746
1848
  });
1747
1849