@likec4/styles 1.35.0 → 1.36.1

package/dist/types/style-props.d.ts

@@ -5,10 +5,10 @@ import type { CssProperties } from './system-types';
 import type { Token } from '../tokens/index';
 
 type AnyString = (string & {})
-type CssVars = "var(--likec4-palette)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--likec4-icon-size)"
+type CssVars = "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
 type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-type CssVarKeys = "--likec4-palette" | "--likec4-text-size" | "--likec4-spacing" | "--likec4-icon-size" | `--${string}` & {}
+type CssVarKeys = "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-text-size" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue
@@ -1459,7 +1459,7 @@ borderRightWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderRightWi
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-spacing
    */
-borderSpacing?: ConditionalValue<UtilityValues["borderSpacing"] | CssVars | CssProperties["borderSpacing"]>
+borderSpacing?: ConditionalValue<WithEscapeHatch<UtilityValues["borderSpacing"] | CssVars>>
  /**
    * The **`border-start-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -1609,7 +1609,7 @@ borderWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderWidth"]>>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/bottom
    */
-bottom?: ConditionalValue<UtilityValues["bottom"] | CssVars | CssProperties["bottom"]>
+bottom?: ConditionalValue<WithEscapeHatch<UtilityValues["bottom"] | CssVars>>
  boxAlign?: ConditionalValue<WithEscapeHatch<CssProperties["boxAlign"]>>
  /**
    * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
@@ -1843,7 +1843,7 @@ columnFill?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["columnFil
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/column-gap
    */
-columnGap?: ConditionalValue<UtilityValues["columnGap"] | CssVars | CssProperties["columnGap"]>
+columnGap?: ConditionalValue<WithEscapeHatch<UtilityValues["columnGap"] | CssVars>>
  /**
    * The **`column-rule`** shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
    *
@@ -2735,7 +2735,7 @@ forcedColorAdjust?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["fo
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/gap
    */
-gap?: ConditionalValue<UtilityValues["gap"] | CssVars | CssProperties["gap"]>
+gap?: ConditionalValue<WithEscapeHatch<UtilityValues["gap"] | CssVars>>
  /**
    * The **`grid`** CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
    *
@@ -2828,7 +2828,7 @@ gridColumn?: ConditionalValue<WithEscapeHatch<CssProperties["gridColumn"]>>
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column-end
    */
 gridColumnEnd?: ConditionalValue<WithEscapeHatch<CssProperties["gridColumnEnd"]>>
- gridColumnGap?: ConditionalValue<UtilityValues["gridColumnGap"] | CssVars | CssProperties["gridColumnGap"]>
+ gridColumnGap?: ConditionalValue<WithEscapeHatch<UtilityValues["gridColumnGap"] | CssVars>>
  /**
    * The **`grid-column-start`** CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.
    *
@@ -2843,7 +2843,7 @@ gridColumnEnd?: ConditionalValue<WithEscapeHatch<CssProperties["gridColumnEnd"]>
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column-start
    */
 gridColumnStart?: ConditionalValue<WithEscapeHatch<CssProperties["gridColumnStart"]>>
- gridGap?: ConditionalValue<UtilityValues["gridGap"] | CssVars | CssProperties["gridGap"]>
+ gridGap?: ConditionalValue<WithEscapeHatch<UtilityValues["gridGap"] | CssVars>>
  /**
    * The **`grid-row`** CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
    *
@@ -2870,7 +2870,7 @@ gridRow?: ConditionalValue<WithEscapeHatch<CssProperties["gridRow"]>>
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-row-end
    */
 gridRowEnd?: ConditionalValue<WithEscapeHatch<CssProperties["gridRowEnd"]>>
- gridRowGap?: ConditionalValue<UtilityValues["gridRowGap"] | CssVars | CssProperties["gridRowGap"]>
+ gridRowGap?: ConditionalValue<WithEscapeHatch<UtilityValues["gridRowGap"] | CssVars>>
  /**
    * The **`grid-row-start`** CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.
    *
@@ -3084,7 +3084,7 @@ inlineSize?: ConditionalValue<UtilityValues["inlineSize"] | CssVars | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset
    */
-inset?: ConditionalValue<UtilityValues["inset"] | CssVars | CssProperties["inset"]>
+inset?: ConditionalValue<WithEscapeHatch<UtilityValues["inset"] | CssVars>>
  /**
    * The **`inset-block`** CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top` and `bottom`, or `right` and `left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3096,7 +3096,7 @@ inset?: ConditionalValue<UtilityValues["inset"] | CssVars | CssProperties["inset
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block
    */
-insetBlock?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties["insetBlock"]>
+insetBlock?: ConditionalValue<WithEscapeHatch<UtilityValues["insetBlock"] | CssVars>>
  /**
    * The **`inset-block-end`** CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3110,7 +3110,7 @@ insetBlock?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block-end
    */
-insetBlockEnd?: ConditionalValue<UtilityValues["insetBlockEnd"] | CssVars | CssProperties["insetBlockEnd"]>
+insetBlockEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["insetBlockEnd"] | CssVars>>
  /**
    * The **`inset-block-start`** CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3124,7 +3124,7 @@ insetBlockEnd?: ConditionalValue<UtilityValues["insetBlockEnd"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block-start
    */
-insetBlockStart?: ConditionalValue<UtilityValues["insetBlockStart"] | CssVars | CssProperties["insetBlockStart"]>
+insetBlockStart?: ConditionalValue<WithEscapeHatch<UtilityValues["insetBlockStart"] | CssVars>>
  /**
    * The **`inset-inline`** CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top` and `bottom`, or `right` and `left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3136,7 +3136,7 @@ insetBlockStart?: ConditionalValue<UtilityValues["insetBlockStart"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline
    */
-insetInline?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties["insetInline"]>
+insetInline?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInline"] | CssVars>>
  /**
    * The **`inset-inline-end`** CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3150,7 +3150,7 @@ insetInline?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"]>
+insetInlineEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineEnd"] | CssVars>>
  /**
    * The **`inset-inline-start`** CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3164,7 +3164,7 @@ insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-insetInlineStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"]>
+insetInlineStart?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineStart"] | CssVars>>
  interpolateSize?: ConditionalValue<WithEscapeHatch<CssProperties["interpolateSize"]>>
  /**
    * The **`isolation`** CSS property determines whether an element must create a new stacking context.
@@ -3250,7 +3250,7 @@ justifyTracks?: ConditionalValue<WithEscapeHatch<CssProperties["justifyTracks"]>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/left
    */
-left?: ConditionalValue<UtilityValues["left"] | CssVars | CssProperties["left"]>
+left?: ConditionalValue<WithEscapeHatch<UtilityValues["left"] | CssVars>>
  /**
    * The **`letter-spacing`** CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of `letter-spacing` causes characters to spread farther apart, while negative values of `letter-spacing` bring characters closer together.
    *
@@ -3380,7 +3380,7 @@ listStyleType?: ConditionalValue<WithEscapeHatch<CssProperties["listStyleType"]>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin
    */
-margin?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"]>
+margin?: ConditionalValue<WithEscapeHatch<UtilityValues["margin"] | CssVars>>
  /**
    * The **`margin-block`** CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -3392,7 +3392,7 @@ margin?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["mar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-marginBlock?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"]>
+marginBlock?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBlock"] | CssVars>>
  /**
    * The **`margin-block-end`** CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
    *
@@ -3406,7 +3406,7 @@ marginBlock?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block-end
    */
-marginBlockEnd?: ConditionalValue<UtilityValues["marginBlockEnd"] | CssVars | CssProperties["marginBlockEnd"]>
+marginBlockEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBlockEnd"] | CssVars>>
  /**
    * The **`margin-block-start`** CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
    *
@@ -3420,7 +3420,7 @@ marginBlockEnd?: ConditionalValue<UtilityValues["marginBlockEnd"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block-start
    */
-marginBlockStart?: ConditionalValue<UtilityValues["marginBlockStart"] | CssVars | CssProperties["marginBlockStart"]>
+marginBlockStart?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBlockStart"] | CssVars>>
  /**
    * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -3434,7 +3434,7 @@ marginBlockStart?: ConditionalValue<UtilityValues["marginBlockStart"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
-marginBottom?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssProperties["marginBottom"]>
+marginBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBottom"] | CssVars>>
  /**
    * The **`margin-inline`** CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -3446,7 +3446,7 @@ marginBottom?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-marginInline?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"]>
+marginInline?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInline"] | CssVars>>
  /**
    * The **`margin-inline-end`** CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3461,7 +3461,7 @@ marginInline?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-marginInlineEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"]>
+marginInlineEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineEnd"] | CssVars>>
  /**
    * The **`margin-inline-start`** CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -3476,7 +3476,7 @@ marginInlineEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-marginInlineStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"]>
+marginInlineStart?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineStart"] | CssVars>>
  /**
    * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -3490,7 +3490,7 @@ marginInlineStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    */
-marginLeft?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssProperties["marginLeft"]>
+marginLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["marginLeft"] | CssVars>>
  /**
    * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -3504,7 +3504,7 @@ marginLeft?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
-marginRight?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssProperties["marginRight"]>
+marginRight?: ConditionalValue<WithEscapeHatch<UtilityValues["marginRight"] | CssVars>>
  /**
    * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -3518,7 +3518,7 @@ marginRight?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    */
-marginTop?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssProperties["marginTop"]>
+marginTop?: ConditionalValue<WithEscapeHatch<UtilityValues["marginTop"] | CssVars>>
  /**
    * The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges.
    *
@@ -4159,7 +4159,7 @@ outlineColor?: ConditionalValue<WithEscapeHatch<UtilityValues["outlineColor"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-offset
    */
-outlineOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssVars | CssProperties["outlineOffset"]>
+outlineOffset?: ConditionalValue<WithEscapeHatch<UtilityValues["outlineOffset"] | CssVars>>
  /**
    * The **`outline-style`** CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the `border`.
    *
@@ -4396,7 +4396,7 @@ overscrollBehaviorY?: ConditionalValue<WithEscapeHatch<CssProperties["overscroll
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding
    */
-padding?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["padding"]>
+padding?: ConditionalValue<WithEscapeHatch<UtilityValues["padding"] | CssVars>>
  /**
    * The **`padding-block`** CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4408,7 +4408,7 @@ padding?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["p
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-paddingBlock?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"]>
+paddingBlock?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBlock"] | CssVars>>
  /**
    * The **`padding-block-end`** CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4422,7 +4422,7 @@ paddingBlock?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block-end
    */
-paddingBlockEnd?: ConditionalValue<UtilityValues["paddingBlockEnd"] | CssVars | CssProperties["paddingBlockEnd"]>
+paddingBlockEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBlockEnd"] | CssVars>>
  /**
    * The **`padding-block-start`** CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4436,7 +4436,7 @@ paddingBlockEnd?: ConditionalValue<UtilityValues["paddingBlockEnd"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block-start
    */
-paddingBlockStart?: ConditionalValue<UtilityValues["paddingBlockStart"] | CssVars | CssProperties["paddingBlockStart"]>
+paddingBlockStart?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBlockStart"] | CssVars>>
  /**
    * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
    *
@@ -4450,7 +4450,7 @@ paddingBlockStart?: ConditionalValue<UtilityValues["paddingBlockStart"] | CssVar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */
-paddingBottom?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssProperties["paddingBottom"]>
+paddingBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBottom"] | CssVars>>
  /**
    * The **`padding-inline`** CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4462,7 +4462,7 @@ paddingBottom?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-paddingInline?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"]>
+paddingInline?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInline"] | CssVars>>
  /**
    * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4477,7 +4477,7 @@ paddingInline?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-paddingInlineEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"]>
+paddingInlineEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineEnd"] | CssVars>>
  /**
    * The **`padding-inline-start`** CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -4492,7 +4492,7 @@ paddingInlineEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-paddingInlineStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"]>
+paddingInlineStart?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineStart"] | CssVars>>
  /**
    * The **`padding-left`** CSS property sets the width of the padding area to the left of an element.
    *
@@ -4506,7 +4506,7 @@ paddingInlineStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    */
-paddingLeft?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssProperties["paddingLeft"]>
+paddingLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingLeft"] | CssVars>>
  /**
    * The **`padding-right`** CSS property sets the width of the padding area on the right of an element.
    *
@@ -4520,7 +4520,7 @@ paddingLeft?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
-paddingRight?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssProperties["paddingRight"]>
+paddingRight?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingRight"] | CssVars>>
  /**
    * The **`padding-top`** CSS property sets the height of the padding area on the top of an element.
    *
@@ -4534,7 +4534,7 @@ paddingRight?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    */
-paddingTop?: ConditionalValue<UtilityValues["paddingTop"] | CssVars | CssProperties["paddingTop"]>
+paddingTop?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingTop"] | CssVars>>
  /**
    * The **`page`** CSS property is used to specify the named page, a specific type of page defined by the `@page` at-rule.
    *
@@ -4762,7 +4762,7 @@ resize?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["resize"]>>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/right
    */
-right?: ConditionalValue<UtilityValues["right"] | CssVars | CssProperties["right"]>
+right?: ConditionalValue<WithEscapeHatch<UtilityValues["right"] | CssVars>>
  /**
    * The **`rotate`** CSS property allows you to specify rotation transforms individually and independently of the `transform` property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.
    *
@@ -4790,7 +4790,7 @@ rotate?: ConditionalValue<UtilityValues["rotate"] | CssVars | CssProperties["rot
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
    */
-rowGap?: ConditionalValue<UtilityValues["rowGap"] | CssVars | CssProperties["rowGap"]>
+rowGap?: ConditionalValue<WithEscapeHatch<UtilityValues["rowGap"] | CssVars>>
  /**
    * The **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.
    *
@@ -4868,7 +4868,7 @@ scrollBehavior?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["scrol
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin
    */
-scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssVars | CssProperties["scrollMargin"]>
+scrollMargin?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMargin"] | CssVars>>
  /**
    * The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.
    *
@@ -4880,7 +4880,7 @@ scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block
    */
-scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars | CssProperties["scrollMarginBlock"]>
+scrollMarginBlock?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginBlock"] | CssVars>>
  /**
    * The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4894,7 +4894,7 @@ scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end
    */
-scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] | CssVars | CssProperties["scrollMarginBlockEnd"]>
+scrollMarginBlockEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginBlockEnd"] | CssVars>>
  /**
    * The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4908,7 +4908,7 @@ scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start
    */
-scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"] | CssVars | CssProperties["scrollMarginBlockStart"]>
+scrollMarginBlockStart?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginBlockStart"] | CssVars>>
  /**
    * The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4923,7 +4923,7 @@ scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom
    */
-scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssVars | CssProperties["scrollMarginBottom"]>
+scrollMarginBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginBottom"] | CssVars>>
  /**
    * The `scroll-margin-inline` shorthand property sets the scroll margins of an element in the inline dimension.
    *
@@ -4935,7 +4935,7 @@ scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline
    */
-scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars | CssProperties["scrollMarginInline"]>
+scrollMarginInline?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginInline"] | CssVars>>
  /**
    * The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4949,7 +4949,7 @@ scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end
    */
-scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"] | CssVars | CssProperties["scrollMarginInlineEnd"]>
+scrollMarginInlineEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginInlineEnd"] | CssVars>>
  /**
    * The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4963,7 +4963,7 @@ scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start
    */
-scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStart"] | CssVars | CssProperties["scrollMarginInlineStart"]>
+scrollMarginInlineStart?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginInlineStart"] | CssVars>>
  /**
    * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4978,7 +4978,7 @@ scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left
    */
-scrollMarginLeft?: ConditionalValue<UtilityValues["scrollMarginLeft"] | CssVars | CssProperties["scrollMarginLeft"]>
+scrollMarginLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginLeft"] | CssVars>>
  /**
    * The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4993,7 +4993,7 @@ scrollMarginLeft?: ConditionalValue<UtilityValues["scrollMarginLeft"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right
    */
-scrollMarginRight?: ConditionalValue<UtilityValues["scrollMarginRight"] | CssVars | CssProperties["scrollMarginRight"]>
+scrollMarginRight?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginRight"] | CssVars>>
  /**
    * The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -5008,7 +5008,7 @@ scrollMarginRight?: ConditionalValue<UtilityValues["scrollMarginRight"] | CssVar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top
    */
-scrollMarginTop?: ConditionalValue<UtilityValues["scrollMarginTop"] | CssVars | CssProperties["scrollMarginTop"]>
+scrollMarginTop?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginTop"] | CssVars>>
  /**
    * The **`scroll-padding`** shorthand property sets scroll padding on all sides of an element at once, much like the `padding` property does for padding on an element.
    *
@@ -5020,7 +5020,7 @@ scrollMarginTop?: ConditionalValue<UtilityValues["scrollMarginTop"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding
    */
-scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssVars | CssProperties["scrollPadding"]>
+scrollPadding?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPadding"] | CssVars>>
  /**
    * The `scroll-padding-block` shorthand property sets the scroll padding of an element in the block dimension.
    *
@@ -5032,7 +5032,7 @@ scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block
    */
-scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"]>
+scrollPaddingBlock?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingBlock"] | CssVars>>
  /**
    * The `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5046,7 +5046,7 @@ scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end
    */
-scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"] | CssVars | CssProperties["scrollPaddingBlockEnd"]>
+scrollPaddingBlockEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingBlockEnd"] | CssVars>>
  /**
    * The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5060,7 +5060,7 @@ scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start
    */
-scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStart"] | CssVars | CssProperties["scrollPaddingBlockStart"]>
+scrollPaddingBlockStart?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingBlockStart"] | CssVars>>
  /**
    * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5074,7 +5074,7 @@ scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom
    */
-scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | CssVars | CssProperties["scrollPaddingBottom"]>
+scrollPaddingBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingBottom"] | CssVars>>
  /**
    * The `scroll-padding-inline` shorthand property sets the scroll padding of an element in the inline dimension.
    *
@@ -5086,7 +5086,7 @@ scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline
    */
-scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"]>
+scrollPaddingInline?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingInline"] | CssVars>>
  /**
    * The `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5100,7 +5100,7 @@ scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end
    */
-scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"] | CssVars | CssProperties["scrollPaddingInlineEnd"]>
+scrollPaddingInlineEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingInlineEnd"] | CssVars>>
  /**
    * The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5114,7 +5114,7 @@ scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start
    */
-scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineStart"] | CssVars | CssProperties["scrollPaddingInlineStart"]>
+scrollPaddingInlineStart?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingInlineStart"] | CssVars>>
  /**
    * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5128,7 +5128,7 @@ scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineSt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left
    */
-scrollPaddingLeft?: ConditionalValue<UtilityValues["scrollPaddingLeft"] | CssVars | CssProperties["scrollPaddingLeft"]>
+scrollPaddingLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingLeft"] | CssVars>>
  /**
    * The `scroll-padding-right` property defines offsets for the right of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5142,7 +5142,7 @@ scrollPaddingLeft?: ConditionalValue<UtilityValues["scrollPaddingLeft"] | CssVar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right
    */
-scrollPaddingRight?: ConditionalValue<UtilityValues["scrollPaddingRight"] | CssVars | CssProperties["scrollPaddingRight"]>
+scrollPaddingRight?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingRight"] | CssVars>>
  /**
    * The **`scroll-padding-top`** property defines offsets for the top of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5156,7 +5156,7 @@ scrollPaddingRight?: ConditionalValue<UtilityValues["scrollPaddingRight"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top
    */
-scrollPaddingTop?: ConditionalValue<UtilityValues["scrollPaddingTop"] | CssVars | CssProperties["scrollPaddingTop"]>
+scrollPaddingTop?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingTop"] | CssVars>>
  /**
    * The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.
    *
@@ -5588,7 +5588,7 @@ textEmphasisStyle?: ConditionalValue<WithEscapeHatch<CssProperties["textEmphasis
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-indent
    */
-textIndent?: ConditionalValue<UtilityValues["textIndent"] | CssVars | CssProperties["textIndent"]>
+textIndent?: ConditionalValue<WithEscapeHatch<UtilityValues["textIndent"] | CssVars>>
  /**
    * The **`text-justify`** CSS property sets what type of justification should be applied to text when `text-align``: justify;` is set on an element.
    *
@@ -5761,7 +5761,7 @@ timelineScope?: ConditionalValue<WithEscapeHatch<CssProperties["timelineScope"]>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/top
    */
-top?: ConditionalValue<UtilityValues["top"] | CssVars | CssProperties["top"]>
+top?: ConditionalValue<WithEscapeHatch<UtilityValues["top"] | CssVars>>
  /**
    * The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
    *
@@ -6188,8 +6188,8 @@ wordWrap?: ConditionalValue<WithEscapeHatch<CssProperties["wordWrap"]>>
    * @see https://developer.mozilla.org/docs/Web/CSS/writing-mode
    */
 writingMode?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["writingMode"]>>
- x?: ConditionalValue<UtilityValues["translateX"] | CssVars | CssProperties["translateX"]>
- y?: ConditionalValue<UtilityValues["translateY"] | CssVars | CssProperties["translateY"]>
+ x?: ConditionalValue<WithEscapeHatch<UtilityValues["translateX"] | CssVars>>
+ y?: ConditionalValue<WithEscapeHatch<UtilityValues["translateY"] | CssVars>>
  /**
    * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
    *
@@ -6248,7 +6248,7 @@ pos?: ConditionalValue<WithEscapeHatch<CssProperties["position"]>>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline
    */
-insetX?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties["insetInline"]>
+insetX?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInline"] | CssVars>>
  /**
    * The **`inset-block`** CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top` and `bottom`, or `right` and `left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6260,7 +6260,7 @@ insetX?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block
    */
-insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties["insetBlock"]>
+insetY?: ConditionalValue<WithEscapeHatch<UtilityValues["insetBlock"] | CssVars>>
  /**
    * The **`inset-inline-end`** CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6274,7 +6274,7 @@ insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-insetEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"]>
+insetEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineEnd"] | CssVars>>
  /**
    * The **`inset-inline-end`** CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6288,7 +6288,7 @@ insetEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-end?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"]>
+end?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineEnd"] | CssVars>>
  /**
    * The **`inset-inline-start`** CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6302,7 +6302,7 @@ end?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-insetStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"]>
+insetStart?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineStart"] | CssVars>>
  /**
    * The **`inset-inline-start`** CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6316,7 +6316,7 @@ insetStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-start?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"]>
+start?: ConditionalValue<WithEscapeHatch<UtilityValues["insetInlineStart"] | CssVars>>
  /**
    * The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
    *
@@ -6343,7 +6343,7 @@ flexDir?: ConditionalValue<WithEscapeHatch<CssProperties["flexDirection"]>>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding
    */
-p?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["padding"]>
+p?: ConditionalValue<WithEscapeHatch<UtilityValues["padding"] | CssVars>>
  /**
    * The **`padding-left`** CSS property sets the width of the padding area to the left of an element.
    *
@@ -6357,7 +6357,7 @@ p?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["padding
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    */
-pl?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssProperties["paddingLeft"]>
+pl?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingLeft"] | CssVars>>
  /**
    * The **`padding-right`** CSS property sets the width of the padding area on the right of an element.
    *
@@ -6371,7 +6371,7 @@ pl?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssProperties["pa
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
-pr?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssProperties["paddingRight"]>
+pr?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingRight"] | CssVars>>
  /**
    * The **`padding-top`** CSS property sets the height of the padding area on the top of an element.
    *
@@ -6385,7 +6385,7 @@ pr?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssProperties["p
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    */
-pt?: ConditionalValue<UtilityValues["paddingTop"] | CssVars | CssProperties["paddingTop"]>
+pt?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingTop"] | CssVars>>
  /**
    * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
    *
@@ -6399,7 +6399,7 @@ pt?: ConditionalValue<UtilityValues["paddingTop"] | CssVars | CssProperties["pad
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */
-pb?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssProperties["paddingBottom"]>
+pb?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBottom"] | CssVars>>
  /**
    * The **`padding-block`** CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6411,7 +6411,7 @@ pb?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssProperties["
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-py?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"]>
+py?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBlock"] | CssVars>>
  /**
    * The **`padding-block`** CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6423,7 +6423,7 @@ py?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["p
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-paddingY?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"]>
+paddingY?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingBlock"] | CssVars>>
  /**
    * The **`padding-inline`** CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6435,7 +6435,7 @@ paddingY?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-paddingX?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"]>
+paddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInline"] | CssVars>>
  /**
    * The **`padding-inline`** CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6447,7 +6447,7 @@ paddingX?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProper
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-px?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"]>
+px?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInline"] | CssVars>>
  /**
    * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6462,7 +6462,7 @@ px?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-pe?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"]>
+pe?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineEnd"] | CssVars>>
  /**
    * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6477,7 +6477,7 @@ pe?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-paddingEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"]>
+paddingEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineEnd"] | CssVars>>
  /**
    * The **`padding-inline-start`** CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6492,7 +6492,7 @@ paddingEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-ps?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"]>
+ps?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineStart"] | CssVars>>
  /**
    * The **`padding-inline-start`** CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6507,7 +6507,7 @@ ps?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-paddingStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"]>
+paddingStart?: ConditionalValue<WithEscapeHatch<UtilityValues["paddingInlineStart"] | CssVars>>
  /**
    * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -6521,7 +6521,7 @@ paddingStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    */
-ml?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssProperties["marginLeft"]>
+ml?: ConditionalValue<WithEscapeHatch<UtilityValues["marginLeft"] | CssVars>>
  /**
    * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -6535,7 +6535,7 @@ ml?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssProperties["mar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
-mr?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssProperties["marginRight"]>
+mr?: ConditionalValue<WithEscapeHatch<UtilityValues["marginRight"] | CssVars>>
  /**
    * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -6549,7 +6549,7 @@ mr?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssProperties["ma
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    */
-mt?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssProperties["marginTop"]>
+mt?: ConditionalValue<WithEscapeHatch<UtilityValues["marginTop"] | CssVars>>
  /**
    * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
    *
@@ -6563,7 +6563,7 @@ mt?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssProperties["marg
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
-mb?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssProperties["marginBottom"]>
+mb?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBottom"] | CssVars>>
  /**
    * The **`margin`** CSS shorthand property sets the margin area on all four sides of an element.
    *
@@ -6575,7 +6575,7 @@ mb?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin
    */
-m?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"]>
+m?: ConditionalValue<WithEscapeHatch<UtilityValues["margin"] | CssVars>>
  /**
    * The **`margin-block`** CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6587,7 +6587,7 @@ m?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-my?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"]>
+my?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBlock"] | CssVars>>
  /**
    * The **`margin-block`** CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6599,7 +6599,7 @@ my?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["ma
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-marginY?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"]>
+marginY?: ConditionalValue<WithEscapeHatch<UtilityValues["marginBlock"] | CssVars>>
  /**
    * The **`margin-inline`** CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6611,7 +6611,7 @@ marginY?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-mx?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"]>
+mx?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInline"] | CssVars>>
  /**
    * The **`margin-inline`** CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
    *
@@ -6623,7 +6623,7 @@ mx?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-marginX?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"]>
+marginX?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInline"] | CssVars>>
  /**
    * The **`margin-inline-end`** CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6638,7 +6638,7 @@ marginX?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-me?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"]>
+me?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineEnd"] | CssVars>>
  /**
    * The **`margin-inline-end`** CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6653,7 +6653,7 @@ me?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-marginEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"]>
+marginEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineEnd"] | CssVars>>
  /**
    * The **`margin-inline-start`** CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6668,7 +6668,7 @@ marginEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-ms?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"]>
+ms?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineStart"] | CssVars>>
  /**
    * The **`margin-inline-start`** CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -6683,7 +6683,7 @@ ms?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-marginStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"]>
+marginStart?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineStart"] | CssVars>>
  /**
    * The CSS **`outline-width`** property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the `border`.
    *
@@ -6737,7 +6737,7 @@ ring?: ConditionalValue<UtilityValues["outline"] | CssVars | CssProperties["outl
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-offset
    */
-ringOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssVars | CssProperties["outlineOffset"]>
+ringOffset?: ConditionalValue<WithEscapeHatch<UtilityValues["outlineOffset"] | CssVars>>
  /**
    * The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
    *
@@ -7306,7 +7306,7 @@ borderEndColor?: ConditionalValue<WithEscapeHatch<UtilityValues["borderInlineEnd
    */
 shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssVars | CssProperties["boxShadow"]>
  shadowColor?: ConditionalValue<WithEscapeHatch<UtilityValues["boxShadowColor"] | CssVars>>
- z?: ConditionalValue<UtilityValues["translateZ"] | CssVars | CssProperties["translateZ"]>
+ z?: ConditionalValue<WithEscapeHatch<UtilityValues["translateZ"] | CssVars>>
  /**
    * The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.
    *
@@ -7318,7 +7318,7 @@ shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssVars | CssProperties["
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block
    */
-scrollMarginY?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars | CssProperties["scrollMarginBlock"]>
+scrollMarginY?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginBlock"] | CssVars>>
  /**
    * The `scroll-margin-inline` shorthand property sets the scroll margins of an element in the inline dimension.
    *
@@ -7330,7 +7330,7 @@ scrollMarginY?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline
    */
-scrollMarginX?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars | CssProperties["scrollMarginInline"]>
+scrollMarginX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollMarginInline"] | CssVars>>
  /**
    * The `scroll-padding-block` shorthand property sets the scroll padding of an element in the block dimension.
    *
@@ -7342,7 +7342,7 @@ scrollMarginX?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block
    */
-scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"]>
+scrollPaddingY?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingBlock"] | CssVars>>
  /**
    * The `scroll-padding-inline` shorthand property sets the scroll padding of an element in the inline dimension.
    *
@@ -7354,11 +7354,11 @@ scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline
    */
-scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"]>
+scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingInline"] | CssVars>>
  hideFrom?: ConditionalValue<UtilityValues["hideFrom"] | CssVars | CssProperties["hideFrom"]>
  hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | CssVars | CssProperties["hideBelow"]>
- spaceX?: ConditionalValue<UtilityValues["spaceX"] | CssVars | CssProperties["spaceX"]>
- spaceY?: ConditionalValue<UtilityValues["spaceY"] | CssVars | CssProperties["spaceY"]>
+ spaceX?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceX"] | CssVars>>
+ spaceY?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceY"] | CssVars>>
  divideX?: ConditionalValue<string | number | CssProperties["divideX"]>
  divideY?: ConditionalValue<string | number | CssProperties["divideY"]>
  divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
@@ -7398,17 +7398,17 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
  backdropOpacity?: ConditionalValue<string | number | CssProperties["backdropOpacity"]>
  backdropSaturate?: ConditionalValue<string | number | CssProperties["backdropSaturate"]>
  backdropSepia?: ConditionalValue<string | number | CssProperties["backdropSepia"]>
- borderSpacingX?: ConditionalValue<UtilityValues["borderSpacingX"] | CssVars | CssProperties["borderSpacingX"]>
- borderSpacingY?: ConditionalValue<UtilityValues["borderSpacingY"] | CssVars | CssProperties["borderSpacingY"]>
+ borderSpacingX?: ConditionalValue<WithEscapeHatch<UtilityValues["borderSpacingX"] | CssVars>>
+ borderSpacingY?: ConditionalValue<WithEscapeHatch<UtilityValues["borderSpacingY"] | CssVars>>
  animationState?: ConditionalValue<string | number | CssProperties["animationState"]>
  rotateX?: ConditionalValue<string | number | CssProperties["rotateX"]>
  rotateY?: ConditionalValue<string | number | CssProperties["rotateY"]>
  rotateZ?: ConditionalValue<string | number | CssProperties["rotateZ"]>
  scaleX?: ConditionalValue<string | number | CssProperties["scaleX"]>
  scaleY?: ConditionalValue<string | number | CssProperties["scaleY"]>
- translateX?: ConditionalValue<UtilityValues["translateX"] | CssVars | CssProperties["translateX"]>
- translateY?: ConditionalValue<UtilityValues["translateY"] | CssVars | CssProperties["translateY"]>
- translateZ?: ConditionalValue<UtilityValues["translateZ"] | CssVars | CssProperties["translateZ"]>
+ translateX?: ConditionalValue<WithEscapeHatch<UtilityValues["translateX"] | CssVars>>
+ translateY?: ConditionalValue<WithEscapeHatch<UtilityValues["translateY"] | CssVars>>
+ translateZ?: ConditionalValue<WithEscapeHatch<UtilityValues["translateZ"] | CssVars>>
  scrollbar?: ConditionalValue<UtilityValues["scrollbar"] | CssVars | CssProperties["scrollbar"]>
  scrollSnapStrictness?: ConditionalValue<UtilityValues["scrollSnapStrictness"] | CssVars | CssProperties["scrollSnapStrictness"]>
  /**
@@ -7423,7 +7423,7 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin
    */
-scrollSnapMargin?: ConditionalValue<UtilityValues["scrollSnapMargin"] | CssVars | CssProperties["scrollSnapMargin"]>
+scrollSnapMargin?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSnapMargin"] | CssVars>>
  /**
    * The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -7438,7 +7438,7 @@ scrollSnapMargin?: ConditionalValue<UtilityValues["scrollSnapMargin"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top
    */
-scrollSnapMarginTop?: ConditionalValue<UtilityValues["scrollSnapMarginTop"] | CssVars | CssProperties["scrollSnapMarginTop"]>
+scrollSnapMarginTop?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSnapMarginTop"] | CssVars>>
  /**
    * The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -7453,7 +7453,7 @@ scrollSnapMarginTop?: ConditionalValue<UtilityValues["scrollSnapMarginTop"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom
    */
-scrollSnapMarginBottom?: ConditionalValue<UtilityValues["scrollSnapMarginBottom"] | CssVars | CssProperties["scrollSnapMarginBottom"]>
+scrollSnapMarginBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSnapMarginBottom"] | CssVars>>
  /**
    * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -7468,7 +7468,7 @@ scrollSnapMarginBottom?: ConditionalValue<UtilityValues["scrollSnapMarginBottom"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left
    */
-scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] | CssVars | CssProperties["scrollSnapMarginLeft"]>
+scrollSnapMarginLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSnapMarginLeft"] | CssVars>>
  /**
    * The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -7483,17 +7483,15 @@ scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right
    */
-scrollSnapMarginRight?: ConditionalValue<UtilityValues["scrollSnapMarginRight"] | CssVars | CssProperties["scrollSnapMarginRight"]>
+scrollSnapMarginRight?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSnapMarginRight"] | CssVars>>
  srOnly?: ConditionalValue<UtilityValues["srOnly"] | CssVars | CssProperties["srOnly"]>
  debug?: ConditionalValue<UtilityValues["debug"] | CssVars | CssProperties["debug"]>
- likec4Palette?: ConditionalValue<UtilityValues["likec4Palette"] | CssVars | CssProperties["likec4Palette"]>
- likec4RelationPalette?: ConditionalValue<UtilityValues["likec4RelationPalette"] | CssVars | CssProperties["likec4RelationPalette"]>
  colorPalette?: ConditionalValue<UtilityValues["colorPalette"] | CssVars | CssProperties["colorPalette"]>
  textStyle?: ConditionalValue<UtilityValues["textStyle"] | CssVars | CssProperties["textStyle"]>
  layerStyle?: ConditionalValue<UtilityValues["layerStyle"] | CssVars | CssProperties["layerStyle"]>
  animationStyle?: ConditionalValue<UtilityValues["animationStyle"] | CssVars | CssProperties["animationStyle"]>
 }
 
-type StrictTokenProps = "outlineColor" | "ringColor" | "divideColor" | "color" | "fontFamily" | "textDecorationColor" | "textEmphasisColor" | "textShadowColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "transitionTimingFunction" | "animationTimingFunction" | "accentColor" | "caretColor" | "scrollbarColor" | "fill" | "stroke"
+type StrictTokenProps = "top" | "left" | "inset" | "insetInline" | "insetX" | "insetBlock" | "insetY" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetEnd" | "end" | "insetInlineStart" | "insetStart" | "start" | "right" | "bottom" | "gap" | "gridGap" | "gridRowGap" | "gridColumnGap" | "rowGap" | "columnGap" | "padding" | "p" | "paddingLeft" | "pl" | "paddingRight" | "pr" | "paddingTop" | "pt" | "paddingBottom" | "pb" | "paddingBlock" | "py" | "paddingY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInline" | "paddingX" | "px" | "paddingInlineEnd" | "pe" | "paddingEnd" | "paddingInlineStart" | "ps" | "paddingStart" | "marginLeft" | "ml" | "marginRight" | "mr" | "marginTop" | "mt" | "marginBottom" | "mb" | "margin" | "m" | "marginBlock" | "my" | "marginY" | "marginBlockEnd" | "marginBlockStart" | "marginInline" | "mx" | "marginX" | "marginInlineEnd" | "me" | "marginEnd" | "marginInlineStart" | "ms" | "marginStart" | "spaceX" | "spaceY" | "outlineColor" | "ringColor" | "outlineOffset" | "ringOffset" | "divideColor" | "color" | "fontFamily" | "textDecorationColor" | "textEmphasisColor" | "textIndent" | "textShadowColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "borderSpacing" | "borderSpacingX" | "borderSpacingY" | "transitionTimingFunction" | "animationTimingFunction" | "translateX" | "x" | "translateY" | "y" | "translateZ" | "z" | "accentColor" | "caretColor" | "scrollbarColor" | "scrollMargin" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollMarginBottom" | "scrollMarginBlock" | "scrollMarginY" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInline" | "scrollMarginX" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingY" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingInline" | "scrollPaddingX" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollPaddingBottom" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "fill" | "stroke"
 
 type Restrict<Key, Value, Fallback> = Key extends StrictTokenProps ? Value : Value | Fallback