@pandacss/studio 0.36.1 → 0.37.0

package/styled-system/types/style-props.d.ts

@@ -239,7 +239,7 @@ WebkitUserModify?: ConditionalValue<CssProperties["WebkitUserModify"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/accent-color
    */
-accentColor?: ConditionalValue<UtilityValues["accentColor"] | CssProperties["accentColor"] | AnyString>
+accentColor?: ConditionalValue<UtilityValues["accentColor"] | CssVars | CssProperties["accentColor"] | AnyString>
  /**
    * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
    *
@@ -325,7 +325,7 @@ all?: ConditionalValue<CssVars | CssProperties["all"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation
    */
-animation?: ConditionalValue<UtilityValues["animation"] | CssProperties["animation"] | AnyString>
+animation?: ConditionalValue<UtilityValues["animation"] | CssVars | CssProperties["animation"] | AnyString>
  /**
    * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
    *
@@ -354,7 +354,7 @@ animationComposition?: ConditionalValue<CssVars | CssProperties["animationCompos
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-delay
    */
-animationDelay?: ConditionalValue<UtilityValues["animationDelay"] | CssProperties["animationDelay"] | AnyString>
+animationDelay?: ConditionalValue<UtilityValues["animationDelay"] | CssVars | CssProperties["animationDelay"] | AnyString>
  /**
    * The **`animation-direction`** CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
    *
@@ -384,7 +384,7 @@ animationDirection?: ConditionalValue<CssVars | CssProperties["animationDirectio
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-duration
    */
-animationDuration?: ConditionalValue<CssProperties["animationDuration"] | AnyString>
+animationDuration?: ConditionalValue<UtilityValues["animationDuration"] | CssVars | CssProperties["animationDuration"] | AnyString>
  /**
    * The **`animation-fill-mode`** CSS property sets how a CSS animation applies styles to its target before and after its execution.
    *
@@ -499,7 +499,7 @@ animationRangeStart?: ConditionalValue<CssProperties["animationRangeStart"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-timing-function
    */
-animationTimingFunction?: ConditionalValue<CssProperties["animationTimingFunction"] | AnyString>
+animationTimingFunction?: ConditionalValue<UtilityValues["animationTimingFunction"] | CssVars | CssProperties["animationTimingFunction"] | AnyString>
  /**
    * The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of an animation.
    *
@@ -542,7 +542,7 @@ appearance?: ConditionalValue<CssVars | CssProperties["appearance"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
    */
-aspectRatio?: ConditionalValue<UtilityValues["aspectRatio"] | CssProperties["aspectRatio"] | AnyString>
+aspectRatio?: ConditionalValue<UtilityValues["aspectRatio"] | CssVars | CssProperties["aspectRatio"] | AnyString>
  azimuth?: ConditionalValue<CssProperties["azimuth"] | AnyString>
  /**
    * The **`backdrop-filter`** CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything _behind_ the element, to see the effect you must make the element or its background at least partially transparent.
@@ -557,7 +557,7 @@ aspectRatio?: ConditionalValue<UtilityValues["aspectRatio"] | CssProperties["asp
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/backdrop-filter
    */
-backdropFilter?: ConditionalValue<UtilityValues["backdropFilter"] | CssProperties["backdropFilter"] | AnyString>
+backdropFilter?: ConditionalValue<UtilityValues["backdropFilter"] | CssVars | CssProperties["backdropFilter"] | AnyString>
  /**
    * The **`backface-visibility`** CSS property sets whether the back face of an element is visible when turned towards the user.
    *
@@ -584,7 +584,7 @@ backfaceVisibility?: ConditionalValue<CssVars | CssProperties["backfaceVisibilit
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background
    */
-background?: ConditionalValue<UtilityValues["background"] | CssProperties["background"] | AnyString>
+background?: ConditionalValue<UtilityValues["background"] | CssVars | CssProperties["background"] | AnyString>
  /**
    * The **`background-attachment`** CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
    *
@@ -641,7 +641,7 @@ backgroundClip?: ConditionalValue<CssVars | CssProperties["backgroundClip"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background-color
    */
-backgroundColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssProperties["backgroundColor"] | AnyString>
+backgroundColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssVars | CssProperties["backgroundColor"] | AnyString>
  /**
    * The **`background-image`** CSS property sets one or more background images on an element.
    *
@@ -655,7 +655,7 @@ backgroundColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background-image
    */
-backgroundImage?: ConditionalValue<UtilityValues["backgroundImage"] | CssProperties["backgroundImage"] | AnyString>
+backgroundImage?: ConditionalValue<UtilityValues["backgroundImage"] | CssVars | CssProperties["backgroundImage"] | AnyString>
  /**
    * The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
    *
@@ -754,7 +754,7 @@ backgroundSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/block-size
    */
-blockSize?: ConditionalValue<UtilityValues["blockSize"] | CssProperties["blockSize"] | AnyString>
+blockSize?: ConditionalValue<UtilityValues["blockSize"] | CssVars | CssProperties["blockSize"] | AnyString>
  /**
    * The **`border`** shorthand CSS property sets an element's border. It sets the values of `border-width`, `border-style`, and `border-color`.
    *
@@ -766,7 +766,7 @@ blockSize?: ConditionalValue<UtilityValues["blockSize"] | CssProperties["blockSi
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border
    */
-border?: ConditionalValue<UtilityValues["border"] | CssProperties["border"] | AnyString>
+border?: ConditionalValue<UtilityValues["border"] | CssVars | CssProperties["border"] | AnyString>
  /**
    * The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
    *
@@ -778,7 +778,7 @@ border?: ConditionalValue<UtilityValues["border"] | CssProperties["border"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block
    */
-borderBlock?: ConditionalValue<UtilityValues["borderBlock"] | CssProperties["borderBlock"] | AnyString>
+borderBlock?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssProperties["borderBlock"] | AnyString>
  /**
    * The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -792,7 +792,7 @@ borderBlock?: ConditionalValue<UtilityValues["borderBlock"] | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-color
    */
-borderBlockColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssProperties["borderBlockColor"] | AnyString>
+borderBlockColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssVars | CssProperties["borderBlockColor"] | AnyString>
  /**
    * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -832,7 +832,7 @@ borderBlockWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end
    */
-borderBlockEnd?: ConditionalValue<UtilityValues["borderBlockEnd"] | CssProperties["borderBlockEnd"] | AnyString>
+borderBlockEnd?: ConditionalValue<UtilityValues["borderBlockEnd"] | CssVars | CssProperties["borderBlockEnd"] | AnyString>
  /**
    * The **`border-block-end-color`** CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -846,7 +846,7 @@ borderBlockEnd?: ConditionalValue<UtilityValues["borderBlockEnd"] | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-color
    */
-borderBlockEndColor?: ConditionalValue<UtilityValues["borderBlockEndColor"] | CssProperties["borderBlockEndColor"] | AnyString>
+borderBlockEndColor?: ConditionalValue<UtilityValues["borderBlockEndColor"] | CssVars | CssProperties["borderBlockEndColor"] | AnyString>
  /**
    * The **`border-block-end-style`** CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -886,7 +886,7 @@ borderBlockEndWidth?: ConditionalValue<CssProperties["borderBlockEndWidth"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start
    */
-borderBlockStart?: ConditionalValue<UtilityValues["borderBlockStart"] | CssProperties["borderBlockStart"] | AnyString>
+borderBlockStart?: ConditionalValue<UtilityValues["borderBlockStart"] | CssVars | CssProperties["borderBlockStart"] | AnyString>
  /**
    * The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -900,7 +900,7 @@ borderBlockStart?: ConditionalValue<UtilityValues["borderBlockStart"] | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-color
    */
-borderBlockStartColor?: ConditionalValue<UtilityValues["borderBlockStartColor"] | CssProperties["borderBlockStartColor"] | AnyString>
+borderBlockStartColor?: ConditionalValue<UtilityValues["borderBlockStartColor"] | CssVars | CssProperties["borderBlockStartColor"] | AnyString>
  /**
    * The **`border-block-start-style`** CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -940,7 +940,7 @@ borderBlockStartWidth?: ConditionalValue<CssProperties["borderBlockStartWidth"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom
    */
-borderBottom?: ConditionalValue<UtilityValues["borderBottom"] | CssProperties["borderBottom"] | AnyString>
+borderBottom?: ConditionalValue<UtilityValues["borderBottom"] | CssVars | CssProperties["borderBottom"] | AnyString>
  /**
    * The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.
    *
@@ -954,7 +954,7 @@ borderBottom?: ConditionalValue<UtilityValues["borderBottom"] | CssProperties["b
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-color
    */
-borderBottomColor?: ConditionalValue<UtilityValues["borderBottomColor"] | CssProperties["borderBottomColor"] | AnyString>
+borderBottomColor?: ConditionalValue<UtilityValues["borderBottomColor"] | CssVars | CssProperties["borderBottomColor"] | AnyString>
  /**
    * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -969,7 +969,7 @@ borderBottomColor?: ConditionalValue<UtilityValues["borderBottomColor"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
    */
-borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssProperties["borderBottomLeftRadius"] | AnyString>
+borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssVars | CssProperties["borderBottomLeftRadius"] | AnyString>
  /**
    * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -984,7 +984,7 @@ borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
    */
-borderBottomRightRadius?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssProperties["borderBottomRightRadius"] | AnyString>
+borderBottomRightRadius?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssVars | CssProperties["borderBottomRightRadius"] | AnyString>
  /**
    * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
    *
@@ -1038,7 +1038,7 @@ borderCollapse?: ConditionalValue<CssVars | CssProperties["borderCollapse"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-color
    */
-borderColor?: ConditionalValue<UtilityValues["borderColor"] | CssProperties["borderColor"] | AnyString>
+borderColor?: ConditionalValue<UtilityValues["borderColor"] | CssVars | CssProperties["borderColor"] | AnyString>
  /**
    * The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends 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.
    *
@@ -1052,7 +1052,7 @@ borderColor?: ConditionalValue<UtilityValues["borderColor"] | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
    */
-borderEndEndRadius?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssProperties["borderEndEndRadius"] | AnyString>
+borderEndEndRadius?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssVars | CssProperties["borderEndEndRadius"] | AnyString>
  /**
    * The **`border-end-start-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.
    *
@@ -1066,7 +1066,7 @@ borderEndEndRadius?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
    */
-borderEndStartRadius?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssProperties["borderEndStartRadius"] | AnyString>
+borderEndStartRadius?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssVars | CssProperties["borderEndStartRadius"] | AnyString>
  /**
    * The **`border-image`** CSS property draws an image around a given element. It replaces the element's regular border.
    *
@@ -1161,7 +1161,7 @@ borderImageWidth?: ConditionalValue<CssProperties["borderImageWidth"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline
    */
-borderInline?: ConditionalValue<UtilityValues["borderInline"] | CssProperties["borderInline"] | AnyString>
+borderInline?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperties["borderInline"] | AnyString>
  /**
    * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
    *
@@ -1173,7 +1173,7 @@ borderInline?: ConditionalValue<UtilityValues["borderInline"] | CssProperties["b
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
    */
-borderInlineEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssProperties["borderInlineEnd"] | AnyString>
+borderInlineEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1187,7 +1187,7 @@ borderInlineEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-color
    */
-borderInlineColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssProperties["borderInlineColor"] | AnyString>
+borderInlineColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssVars | CssProperties["borderInlineColor"] | AnyString>
  /**
    * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1230,7 +1230,7 @@ borderInlineWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color
    */
-borderInlineEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssProperties["borderInlineEndColor"] | AnyString>
+borderInlineEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssVars | CssProperties["borderInlineEndColor"] | AnyString>
  /**
    * The **`border-inline-end-style`** CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1272,7 +1272,7 @@ borderInlineEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start
    */
-borderInlineStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssProperties["borderInlineStart"] | AnyString>
+borderInlineStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | CssProperties["borderInlineStart"] | AnyString>
  /**
    * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1287,7 +1287,7 @@ borderInlineStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color
    */
-borderInlineStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | CssProperties["borderInlineStartColor"] | AnyString>
+borderInlineStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | CssVars | CssProperties["borderInlineStartColor"] | AnyString>
  /**
    * The **`border-inline-start-style`** CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1328,7 +1328,7 @@ borderInlineStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left
    */
-borderLeft?: ConditionalValue<UtilityValues["borderLeft"] | CssProperties["borderLeft"] | AnyString>
+borderLeft?: ConditionalValue<UtilityValues["borderLeft"] | CssVars | CssProperties["borderLeft"] | AnyString>
  /**
    * The **`border-left-color`** CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties `border-color` or `border-left`.
    *
@@ -1342,7 +1342,7 @@ borderLeft?: ConditionalValue<UtilityValues["borderLeft"] | CssProperties["borde
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left-color
    */
-borderLeftColor?: ConditionalValue<UtilityValues["borderLeftColor"] | CssProperties["borderLeftColor"] | AnyString>
+borderLeftColor?: ConditionalValue<UtilityValues["borderLeftColor"] | CssVars | CssProperties["borderLeftColor"] | AnyString>
  /**
    * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
    *
@@ -1383,7 +1383,7 @@ borderLeftWidth?: ConditionalValue<CssProperties["borderLeftWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
    */
-borderRadius?: ConditionalValue<UtilityValues["borderRadius"] | CssProperties["borderRadius"] | AnyString>
+borderRadius?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssProperties["borderRadius"] | AnyString>
  /**
    * The **`border-right`** shorthand CSS property sets all the properties of an element's right border.
    *
@@ -1395,7 +1395,7 @@ borderRadius?: ConditionalValue<UtilityValues["borderRadius"] | CssProperties["b
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right
    */
-borderRight?: ConditionalValue<UtilityValues["borderRight"] | CssProperties["borderRight"] | AnyString>
+borderRight?: ConditionalValue<UtilityValues["borderRight"] | CssVars | CssProperties["borderRight"] | AnyString>
  /**
    * The **`border-right-color`** CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties `border-color` or `border-right`.
    *
@@ -1409,7 +1409,7 @@ borderRight?: ConditionalValue<UtilityValues["borderRight"] | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right-color
    */
-borderRightColor?: ConditionalValue<UtilityValues["borderRightColor"] | CssProperties["borderRightColor"] | AnyString>
+borderRightColor?: ConditionalValue<UtilityValues["borderRightColor"] | CssVars | CssProperties["borderRightColor"] | AnyString>
  /**
    * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
    *
@@ -1451,7 +1451,7 @@ borderRightWidth?: ConditionalValue<CssProperties["borderRightWidth"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-spacing
    */
-borderSpacing?: ConditionalValue<UtilityValues["borderSpacing"] | CssProperties["borderSpacing"] | AnyString>
+borderSpacing?: ConditionalValue<UtilityValues["borderSpacing"] | CssVars | CssProperties["borderSpacing"] | AnyString>
  /**
    * 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.
    *
@@ -1465,7 +1465,7 @@ borderSpacing?: ConditionalValue<UtilityValues["borderSpacing"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
    */
-borderStartEndRadius?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssProperties["borderStartEndRadius"] | AnyString>
+borderStartEndRadius?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssVars | CssProperties["borderStartEndRadius"] | AnyString>
  /**
    * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends 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.
    *
@@ -1479,7 +1479,7 @@ borderStartEndRadius?: ConditionalValue<UtilityValues["borderStartEndRadius"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
    */
-borderStartStartRadius?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssProperties["borderStartStartRadius"] | AnyString>
+borderStartStartRadius?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssVars | CssProperties["borderStartStartRadius"] | AnyString>
  /**
    * The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.
    *
@@ -1503,7 +1503,7 @@ borderStyle?: ConditionalValue<CssProperties["borderStyle"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top
    */
-borderTop?: ConditionalValue<UtilityValues["borderTop"] | CssProperties["borderTop"] | AnyString>
+borderTop?: ConditionalValue<UtilityValues["borderTop"] | CssVars | CssProperties["borderTop"] | AnyString>
  /**
    * The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`.
    *
@@ -1517,7 +1517,7 @@ borderTop?: ConditionalValue<UtilityValues["borderTop"] | CssProperties["borderT
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-color
    */
-borderTopColor?: ConditionalValue<UtilityValues["borderTopColor"] | CssProperties["borderTopColor"] | AnyString>
+borderTopColor?: ConditionalValue<UtilityValues["borderTopColor"] | CssVars | CssProperties["borderTopColor"] | AnyString>
  /**
    * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -1532,7 +1532,7 @@ borderTopColor?: ConditionalValue<UtilityValues["borderTopColor"] | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius
    */
-borderTopLeftRadius?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssProperties["borderTopLeftRadius"] | AnyString>
+borderTopLeftRadius?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssVars | CssProperties["borderTopLeftRadius"] | AnyString>
  /**
    * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -1547,7 +1547,7 @@ borderTopLeftRadius?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius
    */
-borderTopRightRadius?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssProperties["borderTopRightRadius"] | AnyString>
+borderTopRightRadius?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssVars | CssProperties["borderTopRightRadius"] | AnyString>
  /**
    * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
    *
@@ -1601,7 +1601,7 @@ borderWidth?: ConditionalValue<CssProperties["borderWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/bottom
    */
-bottom?: ConditionalValue<UtilityValues["bottom"] | CssProperties["bottom"] | AnyString>
+bottom?: ConditionalValue<UtilityValues["bottom"] | CssVars | CssProperties["bottom"] | AnyString>
  boxAlign?: ConditionalValue<CssProperties["boxAlign"] | AnyString>
  /**
    * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
@@ -1638,7 +1638,7 @@ boxDecorationBreak?: ConditionalValue<CssVars | CssProperties["boxDecorationBrea
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
    */
-boxShadow?: ConditionalValue<UtilityValues["boxShadow"] | CssProperties["boxShadow"] | AnyString>
+boxShadow?: ConditionalValue<UtilityValues["boxShadow"] | CssVars | CssProperties["boxShadow"] | AnyString>
  /**
    * The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.
    *
@@ -1725,7 +1725,7 @@ caret?: ConditionalValue<CssProperties["caret"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/caret-color
    */
-caretColor?: ConditionalValue<UtilityValues["caretColor"] | CssProperties["caretColor"] | AnyString>
+caretColor?: ConditionalValue<UtilityValues["caretColor"] | CssVars | CssProperties["caretColor"] | AnyString>
  /**
    * **Syntax**: `auto | bar | block | underscore`
    *
@@ -1775,7 +1775,7 @@ clipPath?: ConditionalValue<CssProperties["clipPath"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/color
    */
-color?: ConditionalValue<UtilityValues["color"] | CssProperties["color"] | AnyString>
+color?: ConditionalValue<UtilityValues["color"] | CssVars | CssProperties["color"] | AnyString>
  /**
    * The **`color-scheme`** CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
    *
@@ -1833,7 +1833,7 @@ columnFill?: ConditionalValue<CssVars | CssProperties["columnFill"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/column-gap
    */
-columnGap?: ConditionalValue<UtilityValues["columnGap"] | CssProperties["columnGap"] | AnyString>
+columnGap?: ConditionalValue<UtilityValues["columnGap"] | CssVars | CssProperties["columnGap"] | AnyString>
  /**
    * The **`column-rule`** shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
    *
@@ -2042,7 +2042,7 @@ container?: ConditionalValue<CssProperties["container"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/container-name
    */
-containerName?: ConditionalValue<UtilityValues["containerName"] | CssProperties["containerName"] | AnyString>
+containerName?: ConditionalValue<UtilityValues["containerName"] | CssVars | CssProperties["containerName"] | AnyString>
  /**
    * The **container-type** CSS property is used to define the type of containment used in a container query.
    *
@@ -2197,7 +2197,7 @@ emptyCells?: ConditionalValue<CssVars | CssProperties["emptyCells"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/filter
    */
-filter?: ConditionalValue<UtilityValues["filter"] | CssProperties["filter"] | AnyString>
+filter?: ConditionalValue<UtilityValues["filter"] | CssVars | CssProperties["filter"] | AnyString>
  /**
    * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
    *
@@ -2210,7 +2210,7 @@ filter?: ConditionalValue<UtilityValues["filter"] | CssProperties["filter"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/flex
    */
-flex?: ConditionalValue<UtilityValues["flex"] | CssProperties["flex"] | AnyString>
+flex?: ConditionalValue<UtilityValues["flex"] | CssVars | CssProperties["flex"] | AnyString>
  /**
    * The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.
    *
@@ -2225,7 +2225,7 @@ flex?: ConditionalValue<UtilityValues["flex"] | CssProperties["flex"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/flex-basis
    */
-flexBasis?: ConditionalValue<UtilityValues["flexBasis"] | CssProperties["flexBasis"] | AnyString>
+flexBasis?: ConditionalValue<UtilityValues["flexBasis"] | CssVars | CssProperties["flexBasis"] | AnyString>
  /**
    * 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).
    *
@@ -2338,7 +2338,7 @@ font?: ConditionalValue<CssProperties["font"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/font-family
    */
-fontFamily?: ConditionalValue<UtilityValues["fontFamily"] | CssProperties["fontFamily"] | AnyString>
+fontFamily?: ConditionalValue<UtilityValues["fontFamily"] | CssVars | CssProperties["fontFamily"] | AnyString>
  /**
    * The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.
    *
@@ -2437,7 +2437,7 @@ fontVariationSettings?: ConditionalValue<CssProperties["fontVariationSettings"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/font-size
    */
-fontSize?: ConditionalValue<UtilityValues["fontSize"] | CssProperties["fontSize"] | AnyString>
+fontSize?: ConditionalValue<UtilityValues["fontSize"] | CssVars | CssProperties["fontSize"] | AnyString>
  /**
    * The **`font-size-adjust`** CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).
    *
@@ -2688,7 +2688,7 @@ fontVariantPosition?: ConditionalValue<CssProperties["fontVariantPosition"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
    */
-fontWeight?: ConditionalValue<UtilityValues["fontWeight"] | CssProperties["fontWeight"] | AnyString>
+fontWeight?: ConditionalValue<UtilityValues["fontWeight"] | CssVars | CssProperties["fontWeight"] | AnyString>
  /**
    * The **`forced-color-adjust`** CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.
    *
@@ -2715,7 +2715,7 @@ forcedColorAdjust?: ConditionalValue<CssVars | CssProperties["forcedColorAdjust"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/gap
    */
-gap?: ConditionalValue<UtilityValues["gap"] | CssProperties["gap"] | AnyString>
+gap?: ConditionalValue<UtilityValues["gap"] | CssVars | CssProperties["gap"] | AnyString>
  /**
    * The **`grid`** CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
    *
@@ -2753,7 +2753,7 @@ gridArea?: ConditionalValue<CssProperties["gridArea"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns
    */
-gridAutoColumns?: ConditionalValue<UtilityValues["gridAutoColumns"] | CssProperties["gridAutoColumns"] | AnyString>
+gridAutoColumns?: ConditionalValue<UtilityValues["gridAutoColumns"] | CssVars | CssProperties["gridAutoColumns"] | AnyString>
  /**
    * The **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
    *
@@ -2781,7 +2781,7 @@ gridAutoFlow?: ConditionalValue<CssProperties["gridAutoFlow"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows
    */
-gridAutoRows?: ConditionalValue<UtilityValues["gridAutoRows"] | CssProperties["gridAutoRows"] | AnyString>
+gridAutoRows?: ConditionalValue<UtilityValues["gridAutoRows"] | CssVars | CssProperties["gridAutoRows"] | AnyString>
  /**
    * The **`grid-column`** CSS shorthand property specifies a grid item's size and location within a grid column 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.
    *
@@ -2793,7 +2793,7 @@ gridAutoRows?: ConditionalValue<UtilityValues["gridAutoRows"] | CssProperties["g
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column
    */
-gridColumn?: ConditionalValue<UtilityValues["gridColumn"] | CssProperties["gridColumn"] | AnyString>
+gridColumn?: ConditionalValue<UtilityValues["gridColumn"] | CssVars | CssProperties["gridColumn"] | AnyString>
  /**
    * The **`grid-column-end`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
    *
@@ -2808,7 +2808,7 @@ gridColumn?: ConditionalValue<UtilityValues["gridColumn"] | CssProperties["gridC
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column-end
    */
 gridColumnEnd?: ConditionalValue<CssProperties["gridColumnEnd"] | AnyString>
- gridColumnGap?: ConditionalValue<UtilityValues["gridColumnGap"] | CssProperties["gridColumnGap"] | AnyString>
+ gridColumnGap?: ConditionalValue<UtilityValues["gridColumnGap"] | CssVars | CssProperties["gridColumnGap"] | AnyString>
  /**
    * 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.
    *
@@ -2823,7 +2823,7 @@ gridColumnEnd?: ConditionalValue<CssProperties["gridColumnEnd"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column-start
    */
 gridColumnStart?: ConditionalValue<CssProperties["gridColumnStart"] | AnyString>
- gridGap?: ConditionalValue<UtilityValues["gridGap"] | CssProperties["gridGap"] | AnyString>
+ gridGap?: ConditionalValue<UtilityValues["gridGap"] | CssVars | CssProperties["gridGap"] | AnyString>
  /**
    * 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.
    *
@@ -2835,7 +2835,7 @@ gridColumnStart?: ConditionalValue<CssProperties["gridColumnStart"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-row
    */
-gridRow?: ConditionalValue<UtilityValues["gridRow"] | CssProperties["gridRow"] | AnyString>
+gridRow?: ConditionalValue<UtilityValues["gridRow"] | CssVars | CssProperties["gridRow"] | AnyString>
  /**
    * The **`grid-row-end`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
    *
@@ -2850,7 +2850,7 @@ gridRow?: ConditionalValue<UtilityValues["gridRow"] | CssProperties["gridRow"] |
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-row-end
    */
 gridRowEnd?: ConditionalValue<CssProperties["gridRowEnd"] | AnyString>
- gridRowGap?: ConditionalValue<UtilityValues["gridRowGap"] | CssProperties["gridRowGap"] | AnyString>
+ gridRowGap?: ConditionalValue<UtilityValues["gridRowGap"] | CssVars | CssProperties["gridRowGap"] | AnyString>
  /**
    * 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.
    *
@@ -2904,7 +2904,7 @@ gridTemplateAreas?: ConditionalValue<CssProperties["gridTemplateAreas"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-columns
    */
-gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | CssProperties["gridTemplateColumns"] | AnyString>
+gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | CssVars | CssProperties["gridTemplateColumns"] | AnyString>
  /**
    * The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.
    *
@@ -2918,7 +2918,7 @@ gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-rows
    */
-gridTemplateRows?: ConditionalValue<UtilityValues["gridTemplateRows"] | CssProperties["gridTemplateRows"] | AnyString>
+gridTemplateRows?: ConditionalValue<UtilityValues["gridTemplateRows"] | CssVars | CssProperties["gridTemplateRows"] | AnyString>
  /**
    * The **`hanging-punctuation`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
    *
@@ -2946,7 +2946,7 @@ hangingPunctuation?: ConditionalValue<CssProperties["hangingPunctuation"] | AnyS
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/height
    */
-height?: ConditionalValue<UtilityValues["height"] | CssProperties["height"] | AnyString>
+height?: ConditionalValue<UtilityValues["height"] | CssVars | CssProperties["height"] | AnyString>
  /**
    * The **`hyphenate-character`** CSS property sets the character (or string) used at the end of a line before a hyphenation break.
    *
@@ -3052,7 +3052,7 @@ initialLetter?: ConditionalValue<CssProperties["initialLetter"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inline-size
    */
-inlineSize?: ConditionalValue<UtilityValues["inlineSize"] | CssProperties["inlineSize"] | AnyString>
+inlineSize?: ConditionalValue<UtilityValues["inlineSize"] | CssVars | CssProperties["inlineSize"] | AnyString>
  /**
    * **Syntax**: `auto | none`
    *
@@ -3070,7 +3070,7 @@ inputSecurity?: ConditionalValue<CssProperties["inputSecurity"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset
    */
-inset?: ConditionalValue<UtilityValues["inset"] | CssProperties["inset"] | AnyString>
+inset?: ConditionalValue<UtilityValues["inset"] | CssVars | CssProperties["inset"] | AnyString>
  /**
    * 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`.
    *
@@ -3082,7 +3082,7 @@ inset?: ConditionalValue<UtilityValues["inset"] | CssProperties["inset"] | AnySt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block
    */
-insetBlock?: ConditionalValue<UtilityValues["insetBlock"] | CssProperties["insetBlock"] | AnyString>
+insetBlock?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties["insetBlock"] | AnyString>
  /**
    * 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`.
    *
@@ -3096,7 +3096,7 @@ insetBlock?: ConditionalValue<UtilityValues["insetBlock"] | CssProperties["inset
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block-end
    */
-insetBlockEnd?: ConditionalValue<UtilityValues["insetBlockEnd"] | CssProperties["insetBlockEnd"] | AnyString>
+insetBlockEnd?: ConditionalValue<UtilityValues["insetBlockEnd"] | CssVars | CssProperties["insetBlockEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -3110,7 +3110,7 @@ insetBlockEnd?: ConditionalValue<UtilityValues["insetBlockEnd"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block-start
    */
-insetBlockStart?: ConditionalValue<UtilityValues["insetBlockStart"] | CssProperties["insetBlockStart"] | AnyString>
+insetBlockStart?: ConditionalValue<UtilityValues["insetBlockStart"] | CssVars | CssProperties["insetBlockStart"] | AnyString>
  /**
    * 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`.
    *
@@ -3122,7 +3122,7 @@ insetBlockStart?: ConditionalValue<UtilityValues["insetBlockStart"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline
    */
-insetInline?: ConditionalValue<UtilityValues["insetInline"] | CssProperties["insetInline"] | AnyString>
+insetInline?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties["insetInline"] | AnyString>
  /**
    * 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`.
    *
@@ -3136,7 +3136,7 @@ insetInline?: ConditionalValue<UtilityValues["insetInline"] | CssProperties["ins
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssProperties["insetInlineEnd"] | AnyString>
+insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -3150,7 +3150,7 @@ insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-insetInlineStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssProperties["insetInlineStart"] | AnyString>
+insetInlineStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"] | AnyString>
  /**
    * The **`isolation`** CSS property determines whether an element must create a new stacking context.
    *
@@ -3235,7 +3235,7 @@ justifyTracks?: ConditionalValue<CssProperties["justifyTracks"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/left
    */
-left?: ConditionalValue<UtilityValues["left"] | CssProperties["left"] | AnyString>
+left?: ConditionalValue<UtilityValues["left"] | CssVars | CssProperties["left"] | AnyString>
  /**
    * 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.
    *
@@ -3249,7 +3249,7 @@ left?: ConditionalValue<UtilityValues["left"] | CssProperties["left"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
    */
-letterSpacing?: ConditionalValue<UtilityValues["letterSpacing"] | CssProperties["letterSpacing"] | AnyString>
+letterSpacing?: ConditionalValue<UtilityValues["letterSpacing"] | CssVars | CssProperties["letterSpacing"] | AnyString>
  /**
    * The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
    *
@@ -3284,7 +3284,7 @@ lineClamp?: ConditionalValue<CssProperties["lineClamp"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/line-height
    */
-lineHeight?: ConditionalValue<UtilityValues["lineHeight"] | CssProperties["lineHeight"] | AnyString>
+lineHeight?: ConditionalValue<UtilityValues["lineHeight"] | CssVars | CssProperties["lineHeight"] | AnyString>
  /**
    * The **`line-height-step`** CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.
    *
@@ -3324,7 +3324,7 @@ listStyle?: ConditionalValue<CssProperties["listStyle"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/list-style-image
    */
-listStyleImage?: ConditionalValue<UtilityValues["listStyleImage"] | CssProperties["listStyleImage"] | AnyString>
+listStyleImage?: ConditionalValue<UtilityValues["listStyleImage"] | CssVars | CssProperties["listStyleImage"] | AnyString>
  /**
    * The **`list-style-position`** CSS property sets the position of the `::marker` relative to a list item.
    *
@@ -3364,7 +3364,7 @@ listStyleType?: ConditionalValue<CssProperties["listStyleType"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin
    */
-margin?: ConditionalValue<UtilityValues["margin"] | CssProperties["margin"] | AnyString>
+margin?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"] | AnyString>
  /**
    * 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.
    *
@@ -3376,7 +3376,7 @@ margin?: ConditionalValue<UtilityValues["margin"] | CssProperties["margin"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-marginBlock?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["marginBlock"] | AnyString>
+marginBlock?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"] | AnyString>
  /**
    * 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.
    *
@@ -3390,7 +3390,7 @@ marginBlock?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["mar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block-end
    */
-marginBlockEnd?: ConditionalValue<UtilityValues["marginBlockEnd"] | CssProperties["marginBlockEnd"] | AnyString>
+marginBlockEnd?: ConditionalValue<UtilityValues["marginBlockEnd"] | CssVars | CssProperties["marginBlockEnd"] | AnyString>
  /**
    * 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.
    *
@@ -3404,7 +3404,7 @@ marginBlockEnd?: ConditionalValue<UtilityValues["marginBlockEnd"] | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block-start
    */
-marginBlockStart?: ConditionalValue<UtilityValues["marginBlockStart"] | CssProperties["marginBlockStart"] | AnyString>
+marginBlockStart?: ConditionalValue<UtilityValues["marginBlockStart"] | CssVars | CssProperties["marginBlockStart"] | AnyString>
  /**
    * 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.
    *
@@ -3418,7 +3418,7 @@ marginBlockStart?: ConditionalValue<UtilityValues["marginBlockStart"] | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
-marginBottom?: ConditionalValue<UtilityValues["marginBottom"] | CssProperties["marginBottom"] | AnyString>
+marginBottom?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssProperties["marginBottom"] | AnyString>
  /**
    * 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.
    *
@@ -3430,7 +3430,7 @@ marginBottom?: ConditionalValue<UtilityValues["marginBottom"] | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-marginInline?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["marginInline"] | AnyString>
+marginInline?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"] | AnyString>
  /**
    * 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`.
    *
@@ -3445,7 +3445,7 @@ marginInline?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-marginInlineEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssProperties["marginInlineEnd"] | AnyString>
+marginInlineEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -3460,7 +3460,7 @@ marginInlineEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-marginInlineStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssProperties["marginInlineStart"] | AnyString>
+marginInlineStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"] | AnyString>
  /**
    * 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.
    *
@@ -3474,7 +3474,7 @@ marginInlineStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    */
-marginLeft?: ConditionalValue<UtilityValues["marginLeft"] | CssProperties["marginLeft"] | AnyString>
+marginLeft?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssProperties["marginLeft"] | AnyString>
  /**
    * 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.
    *
@@ -3488,7 +3488,7 @@ marginLeft?: ConditionalValue<UtilityValues["marginLeft"] | CssProperties["margi
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
-marginRight?: ConditionalValue<UtilityValues["marginRight"] | CssProperties["marginRight"] | AnyString>
+marginRight?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssProperties["marginRight"] | AnyString>
  /**
    * 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.
    *
@@ -3502,7 +3502,7 @@ marginRight?: ConditionalValue<UtilityValues["marginRight"] | CssProperties["mar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    */
-marginTop?: ConditionalValue<UtilityValues["marginTop"] | CssProperties["marginTop"] | AnyString>
+marginTop?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssProperties["marginTop"] | AnyString>
  /**
    * The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges.
    *
@@ -3827,7 +3827,7 @@ mathStyle?: ConditionalValue<CssProperties["mathStyle"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-block-size
    */
-maxBlockSize?: ConditionalValue<UtilityValues["maxBlockSize"] | CssProperties["maxBlockSize"] | AnyString>
+maxBlockSize?: ConditionalValue<UtilityValues["maxBlockSize"] | CssVars | CssProperties["maxBlockSize"] | AnyString>
  /**
    * The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`.
    *
@@ -3841,7 +3841,7 @@ maxBlockSize?: ConditionalValue<UtilityValues["maxBlockSize"] | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-height
    */
-maxHeight?: ConditionalValue<UtilityValues["maxHeight"] | CssProperties["maxHeight"] | AnyString>
+maxHeight?: ConditionalValue<UtilityValues["maxHeight"] | CssVars | CssProperties["maxHeight"] | AnyString>
  /**
    * The **`max-inline-size`** CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the `max-width` or the `max-height` property, depending on the value of `writing-mode`.
    *
@@ -3856,7 +3856,7 @@ maxHeight?: ConditionalValue<UtilityValues["maxHeight"] | CssProperties["maxHeig
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-inline-size
    */
-maxInlineSize?: ConditionalValue<UtilityValues["maxInlineSize"] | CssProperties["maxInlineSize"] | AnyString>
+maxInlineSize?: ConditionalValue<UtilityValues["maxInlineSize"] | CssVars | CssProperties["maxInlineSize"] | AnyString>
  /**
    * **Syntax**: `none | <integer>`
    *
@@ -3876,7 +3876,7 @@ maxLines?: ConditionalValue<CssProperties["maxLines"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-width
    */
-maxWidth?: ConditionalValue<UtilityValues["maxWidth"] | CssProperties["maxWidth"] | AnyString>
+maxWidth?: ConditionalValue<UtilityValues["maxWidth"] | CssVars | CssProperties["maxWidth"] | AnyString>
  /**
    * The **`min-block-size`** CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`.
    *
@@ -3890,7 +3890,7 @@ maxWidth?: ConditionalValue<UtilityValues["maxWidth"] | CssProperties["maxWidth"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-block-size
    */
-minBlockSize?: ConditionalValue<UtilityValues["minBlockSize"] | CssProperties["minBlockSize"] | AnyString>
+minBlockSize?: ConditionalValue<UtilityValues["minBlockSize"] | CssVars | CssProperties["minBlockSize"] | AnyString>
  /**
    * The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`.
    *
@@ -3904,7 +3904,7 @@ minBlockSize?: ConditionalValue<UtilityValues["minBlockSize"] | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-height
    */
-minHeight?: ConditionalValue<UtilityValues["minHeight"] | CssProperties["minHeight"] | AnyString>
+minHeight?: ConditionalValue<UtilityValues["minHeight"] | CssVars | CssProperties["minHeight"] | AnyString>
  /**
    * The **`min-inline-size`** CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`.
    *
@@ -3918,7 +3918,7 @@ minHeight?: ConditionalValue<UtilityValues["minHeight"] | CssProperties["minHeig
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-inline-size
    */
-minInlineSize?: ConditionalValue<UtilityValues["minInlineSize"] | CssProperties["minInlineSize"] | AnyString>
+minInlineSize?: ConditionalValue<UtilityValues["minInlineSize"] | CssVars | CssProperties["minInlineSize"] | AnyString>
  /**
    * The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`.
    *
@@ -3932,7 +3932,7 @@ minInlineSize?: ConditionalValue<UtilityValues["minInlineSize"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-width
    */
-minWidth?: ConditionalValue<UtilityValues["minWidth"] | CssProperties["minWidth"] | AnyString>
+minWidth?: ConditionalValue<UtilityValues["minWidth"] | CssVars | CssProperties["minWidth"] | AnyString>
  /**
    * The **`mix-blend-mode`** CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
    *
@@ -4111,7 +4111,7 @@ orphans?: ConditionalValue<CssProperties["orphans"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline
    */
-outline?: ConditionalValue<UtilityValues["outline"] | CssProperties["outline"] | AnyString>
+outline?: ConditionalValue<UtilityValues["outline"] | CssVars | CssProperties["outline"] | AnyString>
  /**
    * The **`outline-color`** CSS property sets the color of an element's outline.
    *
@@ -4125,7 +4125,7 @@ outline?: ConditionalValue<UtilityValues["outline"] | CssProperties["outline"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-color
    */
-outlineColor?: ConditionalValue<UtilityValues["outlineColor"] | CssProperties["outlineColor"] | AnyString>
+outlineColor?: ConditionalValue<UtilityValues["outlineColor"] | CssVars | CssProperties["outlineColor"] | AnyString>
  /**
    * The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.
    *
@@ -4139,7 +4139,7 @@ outlineColor?: ConditionalValue<UtilityValues["outlineColor"] | CssProperties["o
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-offset
    */
-outlineOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssProperties["outlineOffset"] | AnyString>
+outlineOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssVars | CssProperties["outlineOffset"] | AnyString>
  /**
    * 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`.
    *
@@ -4376,7 +4376,7 @@ overscrollBehaviorY?: ConditionalValue<CssProperties["overscrollBehaviorY"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding
    */
-padding?: ConditionalValue<UtilityValues["padding"] | CssProperties["padding"] | AnyString>
+padding?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["padding"] | AnyString>
  /**
    * 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.
    *
@@ -4388,7 +4388,7 @@ padding?: ConditionalValue<UtilityValues["padding"] | CssProperties["padding"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-paddingBlock?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["paddingBlock"] | AnyString>
+paddingBlock?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"] | AnyString>
  /**
    * 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.
    *
@@ -4402,7 +4402,7 @@ paddingBlock?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["p
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block-end
    */
-paddingBlockEnd?: ConditionalValue<UtilityValues["paddingBlockEnd"] | CssProperties["paddingBlockEnd"] | AnyString>
+paddingBlockEnd?: ConditionalValue<UtilityValues["paddingBlockEnd"] | CssVars | CssProperties["paddingBlockEnd"] | AnyString>
  /**
    * 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.
    *
@@ -4416,7 +4416,7 @@ paddingBlockEnd?: ConditionalValue<UtilityValues["paddingBlockEnd"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block-start
    */
-paddingBlockStart?: ConditionalValue<UtilityValues["paddingBlockStart"] | CssProperties["paddingBlockStart"] | AnyString>
+paddingBlockStart?: ConditionalValue<UtilityValues["paddingBlockStart"] | CssVars | CssProperties["paddingBlockStart"] | AnyString>
  /**
    * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
    *
@@ -4430,7 +4430,7 @@ paddingBlockStart?: ConditionalValue<UtilityValues["paddingBlockStart"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */
-paddingBottom?: ConditionalValue<UtilityValues["paddingBottom"] | CssProperties["paddingBottom"] | AnyString>
+paddingBottom?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssProperties["paddingBottom"] | AnyString>
  /**
    * 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.
    *
@@ -4442,7 +4442,7 @@ paddingBottom?: ConditionalValue<UtilityValues["paddingBottom"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-paddingInline?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties["paddingInline"] | AnyString>
+paddingInline?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"] | AnyString>
  /**
    * 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.
    *
@@ -4457,7 +4457,7 @@ paddingInline?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-paddingInlineEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssProperties["paddingInlineEnd"] | AnyString>
+paddingInlineEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"] | AnyString>
  /**
    * 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.
    *
@@ -4472,7 +4472,7 @@ paddingInlineEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-paddingInlineStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssProperties["paddingInlineStart"] | AnyString>
+paddingInlineStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"] | AnyString>
  /**
    * The **`padding-left`** CSS property sets the width of the padding area to the left of an element.
    *
@@ -4486,7 +4486,7 @@ paddingInlineStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    */
-paddingLeft?: ConditionalValue<UtilityValues["paddingLeft"] | CssProperties["paddingLeft"] | AnyString>
+paddingLeft?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssProperties["paddingLeft"] | AnyString>
  /**
    * The **`padding-right`** CSS property sets the width of the padding area on the right of an element.
    *
@@ -4500,7 +4500,7 @@ paddingLeft?: ConditionalValue<UtilityValues["paddingLeft"] | CssProperties["pad
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
-paddingRight?: ConditionalValue<UtilityValues["paddingRight"] | CssProperties["paddingRight"] | AnyString>
+paddingRight?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssProperties["paddingRight"] | AnyString>
  /**
    * The **`padding-top`** CSS property sets the height of the padding area on the top of an element.
    *
@@ -4514,7 +4514,7 @@ paddingRight?: ConditionalValue<UtilityValues["paddingRight"] | CssProperties["p
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    */
-paddingTop?: ConditionalValue<UtilityValues["paddingTop"] | CssProperties["paddingTop"] | AnyString>
+paddingTop?: ConditionalValue<UtilityValues["paddingTop"] | CssVars | CssProperties["paddingTop"] | AnyString>
  /**
    * The **`page`** CSS property is used to specify the named page, a specific type of page defined by the `@page` at-rule.
    *
@@ -4735,7 +4735,7 @@ resize?: ConditionalValue<CssVars | CssProperties["resize"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/right
    */
-right?: ConditionalValue<UtilityValues["right"] | CssProperties["right"] | AnyString>
+right?: ConditionalValue<UtilityValues["right"] | CssVars | CssProperties["right"] | AnyString>
  /**
    * 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.
    *
@@ -4749,7 +4749,7 @@ right?: ConditionalValue<UtilityValues["right"] | CssProperties["right"] | AnySt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/rotate
    */
-rotate?: ConditionalValue<CssProperties["rotate"] | AnyString>
+rotate?: ConditionalValue<UtilityValues["rotate"] | CssVars | CssProperties["rotate"] | AnyString>
  /**
    * The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
    *
@@ -4763,7 +4763,7 @@ rotate?: ConditionalValue<CssProperties["rotate"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
    */
-rowGap?: ConditionalValue<UtilityValues["rowGap"] | CssProperties["rowGap"] | AnyString>
+rowGap?: ConditionalValue<UtilityValues["rowGap"] | CssVars | CssProperties["rowGap"] | AnyString>
  /**
    * The **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.
    *
@@ -4812,7 +4812,7 @@ rubyPosition?: ConditionalValue<CssProperties["rubyPosition"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scale
    */
-scale?: ConditionalValue<UtilityValues["scale"] | CssProperties["scale"] | AnyString>
+scale?: ConditionalValue<UtilityValues["scale"] | CssVars | CssProperties["scale"] | AnyString>
  /**
    * The **`scrollbar-color`** CSS property sets the color of the scrollbar track and thumb.
    *
@@ -4881,7 +4881,7 @@ scrollBehavior?: ConditionalValue<CssVars | CssProperties["scrollBehavior"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin
    */
-scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssProperties["scrollMargin"] | AnyString>
+scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssVars | CssProperties["scrollMargin"] | AnyString>
  /**
    * The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.
    *
@@ -4893,7 +4893,7 @@ scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssProperties["s
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block
    */
-scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssProperties["scrollMarginBlock"] | AnyString>
+scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars | CssProperties["scrollMarginBlock"] | AnyString>
  /**
    * 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.
    *
@@ -4907,7 +4907,7 @@ scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start
    */
-scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"] | CssProperties["scrollMarginBlockStart"] | AnyString>
+scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"] | CssVars | CssProperties["scrollMarginBlockStart"] | AnyString>
  /**
    * 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.
    *
@@ -4921,7 +4921,7 @@ scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end
    */
-scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] | CssProperties["scrollMarginBlockEnd"] | AnyString>
+scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] | CssVars | CssProperties["scrollMarginBlockEnd"] | AnyString>
  /**
    * 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.
    *
@@ -4936,7 +4936,7 @@ scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom
    */
-scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssProperties["scrollMarginBottom"] | AnyString>
+scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssVars | CssProperties["scrollMarginBottom"] | AnyString>
  /**
    * The `scroll-margin-inline` shorthand property sets the scroll margins of an element in the inline dimension.
    *
@@ -4948,7 +4948,7 @@ scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline
    */
-scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssProperties["scrollMarginInline"] | AnyString>
+scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars | CssProperties["scrollMarginInline"] | AnyString>
  /**
    * 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.
    *
@@ -4962,7 +4962,7 @@ scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start
    */
-scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStart"] | CssProperties["scrollMarginInlineStart"] | AnyString>
+scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStart"] | CssVars | CssProperties["scrollMarginInlineStart"] | AnyString>
  /**
    * 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.
    *
@@ -4976,7 +4976,7 @@ scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end
    */
-scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"] | CssProperties["scrollMarginInlineEnd"] | AnyString>
+scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"] | CssVars | CssProperties["scrollMarginInlineEnd"] | AnyString>
  /**
    * 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.
    *
@@ -4991,7 +4991,7 @@ scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left
    */
-scrollMarginLeft?: ConditionalValue<UtilityValues["scrollMarginLeft"] | CssProperties["scrollMarginLeft"] | AnyString>
+scrollMarginLeft?: ConditionalValue<UtilityValues["scrollMarginLeft"] | CssVars | CssProperties["scrollMarginLeft"] | AnyString>
  /**
    * 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.
    *
@@ -5006,7 +5006,7 @@ scrollMarginLeft?: ConditionalValue<UtilityValues["scrollMarginLeft"] | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right
    */
-scrollMarginRight?: ConditionalValue<UtilityValues["scrollMarginRight"] | CssProperties["scrollMarginRight"] | AnyString>
+scrollMarginRight?: ConditionalValue<UtilityValues["scrollMarginRight"] | CssVars | CssProperties["scrollMarginRight"] | AnyString>
  /**
    * 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.
    *
@@ -5021,7 +5021,7 @@ scrollMarginRight?: ConditionalValue<UtilityValues["scrollMarginRight"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top
    */
-scrollMarginTop?: ConditionalValue<UtilityValues["scrollMarginTop"] | CssProperties["scrollMarginTop"] | AnyString>
+scrollMarginTop?: ConditionalValue<UtilityValues["scrollMarginTop"] | CssVars | CssProperties["scrollMarginTop"] | AnyString>
  /**
    * 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.
    *
@@ -5033,7 +5033,7 @@ scrollMarginTop?: ConditionalValue<UtilityValues["scrollMarginTop"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding
    */
-scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssProperties["scrollPadding"] | AnyString>
+scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssVars | CssProperties["scrollPadding"] | AnyString>
  /**
    * The `scroll-padding-block` shorthand property sets the scroll padding of an element in the block dimension.
    *
@@ -5045,7 +5045,7 @@ scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block
    */
-scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssProperties["scrollPaddingBlock"] | AnyString>
+scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"] | AnyString>
  /**
    * 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.
    *
@@ -5059,7 +5059,7 @@ scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start
    */
-scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStart"] | CssProperties["scrollPaddingBlockStart"] | AnyString>
+scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStart"] | CssVars | CssProperties["scrollPaddingBlockStart"] | AnyString>
  /**
    * 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.
    *
@@ -5073,7 +5073,7 @@ scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStar
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end
    */
-scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"] | CssProperties["scrollPaddingBlockEnd"] | AnyString>
+scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"] | CssVars | CssProperties["scrollPaddingBlockEnd"] | AnyString>
  /**
    * 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.
    *
@@ -5087,7 +5087,7 @@ scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom
    */
-scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | CssProperties["scrollPaddingBottom"] | AnyString>
+scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | CssVars | CssProperties["scrollPaddingBottom"] | AnyString>
  /**
    * The `scroll-padding-inline` shorthand property sets the scroll padding of an element in the inline dimension.
    *
@@ -5099,7 +5099,7 @@ scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline
    */
-scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssProperties["scrollPaddingInline"] | AnyString>
+scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"] | AnyString>
  /**
    * 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.
    *
@@ -5113,7 +5113,7 @@ scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start
    */
-scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineStart"] | CssProperties["scrollPaddingInlineStart"] | AnyString>
+scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineStart"] | CssVars | CssProperties["scrollPaddingInlineStart"] | AnyString>
  /**
    * 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.
    *
@@ -5127,7 +5127,7 @@ scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineSt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end
    */
-scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"] | CssProperties["scrollPaddingInlineEnd"] | AnyString>
+scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"] | CssVars | CssProperties["scrollPaddingInlineEnd"] | AnyString>
  /**
    * 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.
    *
@@ -5141,7 +5141,7 @@ scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left
    */
-scrollPaddingLeft?: ConditionalValue<UtilityValues["scrollPaddingLeft"] | CssProperties["scrollPaddingLeft"] | AnyString>
+scrollPaddingLeft?: ConditionalValue<UtilityValues["scrollPaddingLeft"] | CssVars | CssProperties["scrollPaddingLeft"] | AnyString>
  /**
    * 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.
    *
@@ -5155,7 +5155,7 @@ scrollPaddingLeft?: ConditionalValue<UtilityValues["scrollPaddingLeft"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right
    */
-scrollPaddingRight?: ConditionalValue<UtilityValues["scrollPaddingRight"] | CssProperties["scrollPaddingRight"] | AnyString>
+scrollPaddingRight?: ConditionalValue<UtilityValues["scrollPaddingRight"] | CssVars | CssProperties["scrollPaddingRight"] | AnyString>
  /**
    * 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.
    *
@@ -5169,7 +5169,7 @@ scrollPaddingRight?: ConditionalValue<UtilityValues["scrollPaddingRight"] | CssP
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top
    */
-scrollPaddingTop?: ConditionalValue<UtilityValues["scrollPaddingTop"] | CssProperties["scrollPaddingTop"] | AnyString>
+scrollPaddingTop?: ConditionalValue<UtilityValues["scrollPaddingTop"] | CssVars | CssProperties["scrollPaddingTop"] | AnyString>
  /**
    * 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.
    *
@@ -5216,7 +5216,7 @@ scrollSnapStop?: ConditionalValue<CssProperties["scrollSnapStop"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type
    */
-scrollSnapType?: ConditionalValue<UtilityValues["scrollSnapType"] | CssProperties["scrollSnapType"] | AnyString>
+scrollSnapType?: ConditionalValue<UtilityValues["scrollSnapType"] | CssVars | CssProperties["scrollSnapType"] | AnyString>
  scrollSnapTypeX?: ConditionalValue<CssProperties["scrollSnapTypeX"] | AnyString>
  scrollSnapTypeY?: ConditionalValue<CssProperties["scrollSnapTypeY"] | AnyString>
  /**
@@ -5399,7 +5399,7 @@ textDecoration?: ConditionalValue<CssProperties["textDecoration"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-decoration-color
    */
-textDecorationColor?: ConditionalValue<UtilityValues["textDecorationColor"] | CssProperties["textDecorationColor"] | AnyString>
+textDecorationColor?: ConditionalValue<UtilityValues["textDecorationColor"] | CssVars | CssProperties["textDecorationColor"] | AnyString>
  /**
    * The **`text-decoration-line`** CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
    *
@@ -5500,7 +5500,7 @@ textEmphasis?: ConditionalValue<CssProperties["textEmphasis"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color
    */
-textEmphasisColor?: ConditionalValue<UtilityValues["textEmphasisColor"] | CssProperties["textEmphasisColor"] | AnyString>
+textEmphasisColor?: ConditionalValue<UtilityValues["textEmphasisColor"] | CssVars | CssProperties["textEmphasisColor"] | AnyString>
  /**
    * The **`text-emphasis-position`** CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.
    *
@@ -5544,7 +5544,7 @@ textEmphasisStyle?: ConditionalValue<CssProperties["textEmphasisStyle"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-indent
    */
-textIndent?: ConditionalValue<UtilityValues["textIndent"] | CssProperties["textIndent"] | AnyString>
+textIndent?: ConditionalValue<UtilityValues["textIndent"] | CssVars | CssProperties["textIndent"] | AnyString>
  /**
    * The **`text-justify`** CSS property sets what type of justification should be applied to text when `text-align``: justify;` is set on an element.
    *
@@ -5615,7 +5615,7 @@ textRendering?: ConditionalValue<CssProperties["textRendering"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-shadow
    */
-textShadow?: ConditionalValue<UtilityValues["textShadow"] | CssProperties["textShadow"] | AnyString>
+textShadow?: ConditionalValue<UtilityValues["textShadow"] | CssVars | CssProperties["textShadow"] | AnyString>
  /**
    * The **`text-size-adjust`** CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.
    *
@@ -5686,7 +5686,7 @@ textUnderlinePosition?: ConditionalValue<CssProperties["textUnderlinePosition"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/text-wrap
    */
-textWrap?: ConditionalValue<UtilityValues["textWrap"] | CssProperties["textWrap"] | AnyString>
+textWrap?: ConditionalValue<UtilityValues["textWrap"] | CssVars | CssProperties["textWrap"] | AnyString>
  /**
    * The **`timeline-scope`** CSS property modifies the scope of a named animation timeline.
    *
@@ -5714,7 +5714,7 @@ timelineScope?: ConditionalValue<CssProperties["timelineScope"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/top
    */
-top?: ConditionalValue<UtilityValues["top"] | CssProperties["top"] | AnyString>
+top?: ConditionalValue<UtilityValues["top"] | CssVars | CssProperties["top"] | AnyString>
  /**
    * 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).
    *
@@ -5801,7 +5801,7 @@ transformStyle?: ConditionalValue<CssVars | CssProperties["transformStyle"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition
    */
-transition?: ConditionalValue<UtilityValues["transition"] | CssProperties["transition"] | AnyString>
+transition?: ConditionalValue<UtilityValues["transition"] | CssVars | CssProperties["transition"] | AnyString>
  /**
    * The **`transition-behavior`** CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.
    *
@@ -5830,7 +5830,7 @@ transitionBehavior?: ConditionalValue<CssProperties["transitionBehavior"] | AnyS
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-delay
    */
-transitionDelay?: ConditionalValue<UtilityValues["transitionDelay"] | CssProperties["transitionDelay"] | AnyString>
+transitionDelay?: ConditionalValue<UtilityValues["transitionDelay"] | CssVars | CssProperties["transitionDelay"] | AnyString>
  /**
    * The **`transition-duration`** CSS property sets the length of time a transition animation should take to complete. By default, the value is `0s`, meaning that no animation will occur.
    *
@@ -5845,7 +5845,7 @@ transitionDelay?: ConditionalValue<UtilityValues["transitionDelay"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-duration
    */
-transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssProperties["transitionDuration"] | AnyString>
+transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssVars | CssProperties["transitionDuration"] | AnyString>
  /**
    * The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.
    *
@@ -5875,7 +5875,7 @@ transitionProperty?: ConditionalValue<CssProperties["transitionProperty"] | AnyS
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-timing-function
    */
-transitionTimingFunction?: ConditionalValue<UtilityValues["transitionTimingFunction"] | CssProperties["transitionTimingFunction"] | AnyString>
+transitionTimingFunction?: ConditionalValue<UtilityValues["transitionTimingFunction"] | CssVars | CssProperties["transitionTimingFunction"] | AnyString>
  /**
    * The **`translate`** CSS property allows you to specify translation 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` value.
    *
@@ -5889,7 +5889,7 @@ transitionTimingFunction?: ConditionalValue<UtilityValues["transitionTimingFunct
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/translate
    */
-translate?: ConditionalValue<UtilityValues["translate"] | CssProperties["translate"] | AnyString>
+translate?: ConditionalValue<UtilityValues["translate"] | CssVars | CssProperties["translate"] | AnyString>
  /**
    * The **`unicode-bidi`** CSS property, together with the `direction` property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The `unicode-bidi` property overrides this algorithm and allows the developer to control the text embedding.
    *
@@ -6070,7 +6070,7 @@ widows?: ConditionalValue<CssProperties["widows"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/width
    */
-width?: ConditionalValue<UtilityValues["width"] | CssProperties["width"] | AnyString>
+width?: ConditionalValue<UtilityValues["width"] | CssVars | CssProperties["width"] | AnyString>
  /**
    * The **`will-change`** CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
    *
@@ -6174,7 +6174,7 @@ zoom?: ConditionalValue<CssProperties["zoom"] | AnyString>
  colorInterpolation?: ConditionalValue<CssProperties["colorInterpolation"] | AnyString>
  colorRendering?: ConditionalValue<CssProperties["colorRendering"] | AnyString>
  dominantBaseline?: ConditionalValue<CssProperties["dominantBaseline"] | AnyString>
- fill?: ConditionalValue<UtilityValues["fill"] | CssProperties["fill"] | AnyString>
+ fill?: ConditionalValue<UtilityValues["fill"] | CssVars | CssProperties["fill"] | AnyString>
  fillOpacity?: ConditionalValue<CssProperties["fillOpacity"] | AnyString>
  fillRule?: ConditionalValue<CssProperties["fillRule"] | AnyString>
  floodColor?: ConditionalValue<CssProperties["floodColor"] | AnyString>
@@ -6188,7 +6188,7 @@ zoom?: ConditionalValue<CssProperties["zoom"] | AnyString>
  shapeRendering?: ConditionalValue<CssProperties["shapeRendering"] | AnyString>
  stopColor?: ConditionalValue<CssProperties["stopColor"] | AnyString>
  stopOpacity?: ConditionalValue<CssProperties["stopOpacity"] | AnyString>
- stroke?: ConditionalValue<UtilityValues["stroke"] | CssProperties["stroke"] | AnyString>
+ stroke?: ConditionalValue<UtilityValues["stroke"] | CssVars | CssProperties["stroke"] | AnyString>
  strokeDasharray?: ConditionalValue<CssProperties["strokeDasharray"] | AnyString>
  strokeDashoffset?: ConditionalValue<CssProperties["strokeDashoffset"] | AnyString>
  strokeLinecap?: ConditionalValue<CssProperties["strokeLinecap"] | AnyString>
@@ -6223,7 +6223,7 @@ pos?: ConditionalValue<CssProperties["position"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline
    */
-insetX?: ConditionalValue<UtilityValues["insetInline"] | CssProperties["insetInline"] | AnyString>
+insetX?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties["insetInline"] | AnyString>
  /**
    * 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`.
    *
@@ -6235,7 +6235,7 @@ insetX?: ConditionalValue<UtilityValues["insetInline"] | CssProperties["insetInl
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-block
    */
-insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssProperties["insetBlock"] | AnyString>
+insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties["insetBlock"] | AnyString>
  /**
    * 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`.
    *
@@ -6249,7 +6249,7 @@ insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssProperties["insetBloc
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-insetEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssProperties["insetInlineEnd"] | AnyString>
+insetEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -6263,7 +6263,7 @@ insetEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssProperties["ins
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
    */
-end?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssProperties["insetInlineEnd"] | AnyString>
+end?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | CssProperties["insetInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -6277,7 +6277,7 @@ end?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssProperties["insetInl
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-insetStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssProperties["insetInlineStart"] | AnyString>
+insetStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"] | AnyString>
  /**
    * 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`.
    *
@@ -6291,7 +6291,7 @@ insetStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
-start?: ConditionalValue<UtilityValues["insetInlineStart"] | CssProperties["insetInlineStart"] | AnyString>
+start?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"] | AnyString>
  /**
    * 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).
    *
@@ -6318,7 +6318,7 @@ flexDir?: ConditionalValue<CssProperties["flexDirection"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding
    */
-p?: ConditionalValue<UtilityValues["padding"] | CssProperties["padding"] | AnyString>
+p?: ConditionalValue<UtilityValues["padding"] | CssVars | CssProperties["padding"] | AnyString>
  /**
    * The **`padding-left`** CSS property sets the width of the padding area to the left of an element.
    *
@@ -6332,7 +6332,7 @@ p?: ConditionalValue<UtilityValues["padding"] | CssProperties["padding"] | AnySt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    */
-pl?: ConditionalValue<UtilityValues["paddingLeft"] | CssProperties["paddingLeft"] | AnyString>
+pl?: ConditionalValue<UtilityValues["paddingLeft"] | CssVars | CssProperties["paddingLeft"] | AnyString>
  /**
    * The **`padding-right`** CSS property sets the width of the padding area on the right of an element.
    *
@@ -6346,7 +6346,7 @@ pl?: ConditionalValue<UtilityValues["paddingLeft"] | CssProperties["paddingLeft"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
-pr?: ConditionalValue<UtilityValues["paddingRight"] | CssProperties["paddingRight"] | AnyString>
+pr?: ConditionalValue<UtilityValues["paddingRight"] | CssVars | CssProperties["paddingRight"] | AnyString>
  /**
    * The **`padding-top`** CSS property sets the height of the padding area on the top of an element.
    *
@@ -6360,7 +6360,7 @@ pr?: ConditionalValue<UtilityValues["paddingRight"] | CssProperties["paddingRigh
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    */
-pt?: ConditionalValue<UtilityValues["paddingTop"] | CssProperties["paddingTop"] | AnyString>
+pt?: ConditionalValue<UtilityValues["paddingTop"] | CssVars | CssProperties["paddingTop"] | AnyString>
  /**
    * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
    *
@@ -6374,7 +6374,7 @@ pt?: ConditionalValue<UtilityValues["paddingTop"] | CssProperties["paddingTop"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */
-pb?: ConditionalValue<UtilityValues["paddingBottom"] | CssProperties["paddingBottom"] | AnyString>
+pb?: ConditionalValue<UtilityValues["paddingBottom"] | CssVars | CssProperties["paddingBottom"] | AnyString>
  /**
    * 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.
    *
@@ -6386,7 +6386,7 @@ pb?: ConditionalValue<UtilityValues["paddingBottom"] | CssProperties["paddingBot
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-py?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["paddingBlock"] | AnyString>
+py?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"] | AnyString>
  /**
    * 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.
    *
@@ -6398,7 +6398,7 @@ py?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["paddingBloc
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
    */
-paddingY?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["paddingBlock"] | AnyString>
+paddingY?: ConditionalValue<UtilityValues["paddingBlock"] | CssVars | CssProperties["paddingBlock"] | AnyString>
  /**
    * 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.
    *
@@ -6410,7 +6410,7 @@ paddingY?: ConditionalValue<UtilityValues["paddingBlock"] | CssProperties["paddi
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-paddingX?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties["paddingInline"] | AnyString>
+paddingX?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"] | AnyString>
  /**
    * 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.
    *
@@ -6422,7 +6422,7 @@ paddingX?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties["padd
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
    */
-px?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties["paddingInline"] | AnyString>
+px?: ConditionalValue<UtilityValues["paddingInline"] | CssVars | CssProperties["paddingInline"] | AnyString>
  /**
    * 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.
    *
@@ -6437,7 +6437,7 @@ px?: ConditionalValue<UtilityValues["paddingInline"] | CssProperties["paddingInl
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-pe?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssProperties["paddingInlineEnd"] | AnyString>
+pe?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"] | AnyString>
  /**
    * 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.
    *
@@ -6452,7 +6452,7 @@ pe?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssProperties["padding
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-end
    */
-paddingEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssProperties["paddingInlineEnd"] | AnyString>
+paddingEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssVars | CssProperties["paddingInlineEnd"] | AnyString>
  /**
    * 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.
    *
@@ -6467,7 +6467,7 @@ paddingEnd?: ConditionalValue<UtilityValues["paddingInlineEnd"] | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-ps?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssProperties["paddingInlineStart"] | AnyString>
+ps?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"] | AnyString>
  /**
    * 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.
    *
@@ -6482,7 +6482,7 @@ ps?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssProperties["paddi
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline-start
    */
-paddingStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssProperties["paddingInlineStart"] | AnyString>
+paddingStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssVars | CssProperties["paddingInlineStart"] | AnyString>
  /**
    * 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.
    *
@@ -6496,7 +6496,7 @@ paddingStart?: ConditionalValue<UtilityValues["paddingInlineStart"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    */
-ml?: ConditionalValue<UtilityValues["marginLeft"] | CssProperties["marginLeft"] | AnyString>
+ml?: ConditionalValue<UtilityValues["marginLeft"] | CssVars | CssProperties["marginLeft"] | AnyString>
  /**
    * 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.
    *
@@ -6510,7 +6510,7 @@ ml?: ConditionalValue<UtilityValues["marginLeft"] | CssProperties["marginLeft"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
-mr?: ConditionalValue<UtilityValues["marginRight"] | CssProperties["marginRight"] | AnyString>
+mr?: ConditionalValue<UtilityValues["marginRight"] | CssVars | CssProperties["marginRight"] | AnyString>
  /**
    * 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.
    *
@@ -6524,7 +6524,7 @@ mr?: ConditionalValue<UtilityValues["marginRight"] | CssProperties["marginRight"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    */
-mt?: ConditionalValue<UtilityValues["marginTop"] | CssProperties["marginTop"] | AnyString>
+mt?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssProperties["marginTop"] | AnyString>
  /**
    * 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.
    *
@@ -6538,7 +6538,7 @@ mt?: ConditionalValue<UtilityValues["marginTop"] | CssProperties["marginTop"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
-mb?: ConditionalValue<UtilityValues["marginBottom"] | CssProperties["marginBottom"] | AnyString>
+mb?: ConditionalValue<UtilityValues["marginBottom"] | CssVars | CssProperties["marginBottom"] | AnyString>
  /**
    * The **`margin`** CSS shorthand property sets the margin area on all four sides of an element.
    *
@@ -6550,7 +6550,7 @@ mb?: ConditionalValue<UtilityValues["marginBottom"] | CssProperties["marginBotto
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin
    */
-m?: ConditionalValue<UtilityValues["margin"] | CssProperties["margin"] | AnyString>
+m?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"] | AnyString>
  /**
    * 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.
    *
@@ -6562,7 +6562,7 @@ m?: ConditionalValue<UtilityValues["margin"] | CssProperties["margin"] | AnyStri
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-my?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["marginBlock"] | AnyString>
+my?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"] | AnyString>
  /**
    * 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.
    *
@@ -6574,7 +6574,7 @@ my?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["marginBlock"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
    */
-marginY?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["marginBlock"] | AnyString>
+marginY?: ConditionalValue<UtilityValues["marginBlock"] | CssVars | CssProperties["marginBlock"] | AnyString>
  /**
    * 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.
    *
@@ -6586,7 +6586,7 @@ marginY?: ConditionalValue<UtilityValues["marginBlock"] | CssProperties["marginB
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-mx?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["marginInline"] | AnyString>
+mx?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"] | AnyString>
  /**
    * 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.
    *
@@ -6598,7 +6598,7 @@ mx?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["marginInlin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
    */
-marginX?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["marginInline"] | AnyString>
+marginX?: ConditionalValue<UtilityValues["marginInline"] | CssVars | CssProperties["marginInline"] | AnyString>
  /**
    * 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`.
    *
@@ -6613,7 +6613,7 @@ marginX?: ConditionalValue<UtilityValues["marginInline"] | CssProperties["margin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-me?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssProperties["marginInlineEnd"] | AnyString>
+me?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -6628,7 +6628,7 @@ me?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssProperties["marginIn
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-end
    */
-marginEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssProperties["marginInlineEnd"] | AnyString>
+marginEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssVars | CssProperties["marginInlineEnd"] | AnyString>
  /**
    * 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`.
    *
@@ -6643,7 +6643,7 @@ marginEnd?: ConditionalValue<UtilityValues["marginInlineEnd"] | CssProperties["m
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-ms?: ConditionalValue<UtilityValues["marginInlineStart"] | CssProperties["marginInlineStart"] | AnyString>
+ms?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"] | AnyString>
  /**
    * 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`.
    *
@@ -6658,7 +6658,7 @@ ms?: ConditionalValue<UtilityValues["marginInlineStart"] | CssProperties["margin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline-start
    */
-marginStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssProperties["marginInlineStart"] | AnyString>
+marginStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | CssProperties["marginInlineStart"] | AnyString>
  /**
    * 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`.
    *
@@ -6686,7 +6686,7 @@ ringWidth?: ConditionalValue<CssProperties["outlineWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-color
    */
-ringColor?: ConditionalValue<UtilityValues["outlineColor"] | CssProperties["outlineColor"] | AnyString>
+ringColor?: ConditionalValue<UtilityValues["outlineColor"] | CssVars | CssProperties["outlineColor"] | AnyString>
  /**
    * The **`outline`** CSS shorthand property sets most of the outline properties in a single declaration.
    *
@@ -6698,7 +6698,7 @@ ringColor?: ConditionalValue<UtilityValues["outlineColor"] | CssProperties["outl
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline
    */
-ring?: ConditionalValue<UtilityValues["outline"] | CssProperties["outline"] | AnyString>
+ring?: ConditionalValue<UtilityValues["outline"] | CssVars | CssProperties["outline"] | AnyString>
  /**
    * The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.
    *
@@ -6712,7 +6712,7 @@ ring?: ConditionalValue<UtilityValues["outline"] | CssProperties["outline"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-offset
    */
-ringOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssProperties["outlineOffset"] | AnyString>
+ringOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssVars | CssProperties["outlineOffset"] | AnyString>
  /**
    * 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.
    *
@@ -6726,7 +6726,7 @@ ringOffset?: ConditionalValue<UtilityValues["outlineOffset"] | CssProperties["ou
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/width
    */
-w?: ConditionalValue<UtilityValues["width"] | CssProperties["width"] | AnyString>
+w?: ConditionalValue<UtilityValues["width"] | CssVars | CssProperties["width"] | AnyString>
  /**
    * The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`.
    *
@@ -6740,7 +6740,7 @@ w?: ConditionalValue<UtilityValues["width"] | CssProperties["width"] | AnyString
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-width
    */
-minW?: ConditionalValue<UtilityValues["minWidth"] | CssProperties["minWidth"] | AnyString>
+minW?: ConditionalValue<UtilityValues["minWidth"] | CssVars | CssProperties["minWidth"] | AnyString>
  /**
    * The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
    *
@@ -6754,7 +6754,7 @@ minW?: ConditionalValue<UtilityValues["minWidth"] | CssProperties["minWidth"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-width
    */
-maxW?: ConditionalValue<UtilityValues["maxWidth"] | CssProperties["maxWidth"] | AnyString>
+maxW?: ConditionalValue<UtilityValues["maxWidth"] | CssVars | CssProperties["maxWidth"] | AnyString>
  /**
    * The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area.
    *
@@ -6768,7 +6768,7 @@ maxW?: ConditionalValue<UtilityValues["maxWidth"] | CssProperties["maxWidth"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/height
    */
-h?: ConditionalValue<UtilityValues["height"] | CssProperties["height"] | AnyString>
+h?: ConditionalValue<UtilityValues["height"] | CssVars | CssProperties["height"] | AnyString>
  /**
    * The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`.
    *
@@ -6782,7 +6782,7 @@ h?: ConditionalValue<UtilityValues["height"] | CssProperties["height"] | AnyStri
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/min-height
    */
-minH?: ConditionalValue<UtilityValues["minHeight"] | CssProperties["minHeight"] | AnyString>
+minH?: ConditionalValue<UtilityValues["minHeight"] | CssVars | CssProperties["minHeight"] | AnyString>
  /**
    * The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`.
    *
@@ -6796,8 +6796,8 @@ minH?: ConditionalValue<UtilityValues["minHeight"] | CssProperties["minHeight"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/max-height
    */
-maxH?: ConditionalValue<UtilityValues["maxHeight"] | CssProperties["maxHeight"] | AnyString>
- textShadowColor?: ConditionalValue<UtilityValues["textShadowColor"] | AnyString>
+maxH?: ConditionalValue<UtilityValues["maxHeight"] | CssVars | CssProperties["maxHeight"] | AnyString>
+ textShadowColor?: ConditionalValue<UtilityValues["textShadowColor"] | CssVars | AnyString>
  /**
    * The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.
    *
@@ -6880,7 +6880,7 @@ bgClip?: ConditionalValue<CssProperties["backgroundClip"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background
    */
-bg?: ConditionalValue<UtilityValues["background"] | CssProperties["background"] | AnyString>
+bg?: ConditionalValue<UtilityValues["background"] | CssVars | CssProperties["background"] | AnyString>
  /**
    * The **`background-color`** CSS property sets the background color of an element.
    *
@@ -6894,7 +6894,7 @@ bg?: ConditionalValue<UtilityValues["background"] | CssProperties["background"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background-color
    */
-bgColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssProperties["backgroundColor"] | AnyString>
+bgColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssVars | CssProperties["backgroundColor"] | AnyString>
  /**
    * The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
    *
@@ -6922,7 +6922,7 @@ bgOrigin?: ConditionalValue<CssProperties["backgroundOrigin"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/background-image
    */
-bgImage?: ConditionalValue<UtilityValues["backgroundImage"] | CssProperties["backgroundImage"] | AnyString>
+bgImage?: ConditionalValue<UtilityValues["backgroundImage"] | CssVars | CssProperties["backgroundImage"] | AnyString>
  /**
    * The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
    *
@@ -6966,7 +6966,7 @@ bgBlendMode?: ConditionalValue<CssProperties["backgroundBlendMode"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/background-size
    */
 bgSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
- bgGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | AnyString>
+ bgGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -6979,7 +6979,7 @@ bgSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
    */
-rounded?: ConditionalValue<UtilityValues["borderRadius"] | CssProperties["borderRadius"] | AnyString>
+rounded?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssProperties["borderRadius"] | AnyString>
  /**
    * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -6994,7 +6994,7 @@ rounded?: ConditionalValue<UtilityValues["borderRadius"] | CssProperties["border
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius
    */
-roundedTopLeft?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssProperties["borderTopLeftRadius"] | AnyString>
+roundedTopLeft?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssVars | CssProperties["borderTopLeftRadius"] | AnyString>
  /**
    * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7009,7 +7009,7 @@ roundedTopLeft?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssProp
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius
    */
-roundedTopRight?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssProperties["borderTopRightRadius"] | AnyString>
+roundedTopRight?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssVars | CssProperties["borderTopRightRadius"] | AnyString>
  /**
    * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7024,7 +7024,7 @@ roundedTopRight?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssPr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
    */
-roundedBottomRight?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssProperties["borderBottomRightRadius"] | AnyString>
+roundedBottomRight?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssVars | CssProperties["borderBottomRightRadius"] | AnyString>
  /**
    * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7039,11 +7039,11 @@ roundedBottomRight?: ConditionalValue<UtilityValues["borderBottomRightRadius"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
    */
-roundedBottomLeft?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssProperties["borderBottomLeftRadius"] | AnyString>
- roundedTop?: ConditionalValue<UtilityValues["borderTopRadius"] | AnyString>
- roundedRight?: ConditionalValue<UtilityValues["borderRightRadius"] | AnyString>
- roundedBottom?: ConditionalValue<UtilityValues["borderBottomRadius"] | AnyString>
- roundedLeft?: ConditionalValue<UtilityValues["borderLeftRadius"] | AnyString>
+roundedBottomLeft?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssVars | CssProperties["borderBottomLeftRadius"] | AnyString>
+ roundedTop?: ConditionalValue<UtilityValues["borderTopRadius"] | CssVars | AnyString>
+ roundedRight?: ConditionalValue<UtilityValues["borderRightRadius"] | CssVars | AnyString>
+ roundedBottom?: ConditionalValue<UtilityValues["borderBottomRadius"] | CssVars | AnyString>
+ roundedLeft?: ConditionalValue<UtilityValues["borderLeftRadius"] | CssVars | AnyString>
  /**
    * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends 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.
    *
@@ -7057,7 +7057,7 @@ roundedBottomLeft?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | C
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
    */
-roundedStartStart?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssProperties["borderStartStartRadius"] | AnyString>
+roundedStartStart?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssVars | CssProperties["borderStartStartRadius"] | AnyString>
  /**
    * 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.
    *
@@ -7071,8 +7071,8 @@ roundedStartStart?: ConditionalValue<UtilityValues["borderStartStartRadius"] | C
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
    */
-roundedStartEnd?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssProperties["borderStartEndRadius"] | AnyString>
- roundedStart?: ConditionalValue<UtilityValues["borderStartRadius"] | AnyString>
+roundedStartEnd?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssVars | CssProperties["borderStartEndRadius"] | AnyString>
+ roundedStart?: ConditionalValue<UtilityValues["borderStartRadius"] | CssVars | AnyString>
  /**
    * The **`border-end-start-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.
    *
@@ -7086,7 +7086,7 @@ roundedStartEnd?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssPr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
    */
-roundedEndStart?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssProperties["borderEndStartRadius"] | AnyString>
+roundedEndStart?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssVars | CssProperties["borderEndStartRadius"] | AnyString>
  /**
    * The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends 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.
    *
@@ -7100,8 +7100,8 @@ roundedEndStart?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssPr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
    */
-roundedEndEnd?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssProperties["borderEndEndRadius"] | AnyString>
- roundedEnd?: ConditionalValue<UtilityValues["borderEndRadius"] | AnyString>
+roundedEndEnd?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssVars | CssProperties["borderEndEndRadius"] | AnyString>
+ roundedEnd?: ConditionalValue<UtilityValues["borderEndRadius"] | CssVars | AnyString>
  /**
    * The **`border-inline`** CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
    *
@@ -7113,7 +7113,7 @@ roundedEndEnd?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssProper
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline
    */
-borderX?: ConditionalValue<UtilityValues["borderInline"] | CssProperties["borderInline"] | AnyString>
+borderX?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperties["borderInline"] | AnyString>
  /**
    * The **`border-inline-width`** CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7141,7 +7141,7 @@ borderXWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-color
    */
-borderXColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssProperties["borderInlineColor"] | AnyString>
+borderXColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssVars | CssProperties["borderInlineColor"] | AnyString>
  /**
    * The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
    *
@@ -7153,7 +7153,7 @@ borderXColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block
    */
-borderY?: ConditionalValue<UtilityValues["borderBlock"] | CssProperties["borderBlock"] | AnyString>
+borderY?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssProperties["borderBlock"] | AnyString>
  /**
    * The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7181,7 +7181,7 @@ borderYWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-color
    */
-borderYColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssProperties["borderBlockColor"] | AnyString>
+borderYColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssVars | CssProperties["borderBlockColor"] | AnyString>
  /**
    * The **`border-inline-start`** CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
    *
@@ -7193,7 +7193,7 @@ borderYColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start
    */
-borderStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssProperties["borderInlineStart"] | AnyString>
+borderStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | CssProperties["borderInlineStart"] | AnyString>
  /**
    * The **`border-inline-start-width`** CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7222,7 +7222,7 @@ borderStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color
    */
-borderStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | CssProperties["borderInlineStartColor"] | AnyString>
+borderStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | CssVars | CssProperties["borderInlineStartColor"] | AnyString>
  /**
    * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
    *
@@ -7234,7 +7234,7 @@ borderStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
    */
-borderEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssProperties["borderInlineEnd"] | AnyString>
+borderEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-end-width`** CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7264,7 +7264,7 @@ borderEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color
    */
-borderEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssProperties["borderInlineEndColor"] | AnyString>
+borderEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssVars | CssProperties["borderInlineEndColor"] | AnyString>
  /**
    * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
    *
@@ -7279,10 +7279,11 @@ borderEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
    */
-shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssProperties["boxShadow"] | AnyString>
- shadowColor?: ConditionalValue<UtilityValues["boxShadowColor"] | AnyString>
- x?: ConditionalValue<UtilityValues["translateX"] | AnyString>
- y?: ConditionalValue<UtilityValues["translateY"] | AnyString>
+shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssVars | CssProperties["boxShadow"] | AnyString>
+ shadowColor?: ConditionalValue<UtilityValues["boxShadowColor"] | CssVars | AnyString>
+ x?: ConditionalValue<UtilityValues["translateX"] | CssVars | AnyString>
+ y?: ConditionalValue<UtilityValues["translateY"] | CssVars | AnyString>
+ z?: ConditionalValue<UtilityValues["translateZ"] | CssVars | AnyString>
  /**
    * The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.
    *
@@ -7294,7 +7295,7 @@ shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssProperties["boxShadow"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block
    */
-scrollMarginY?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssProperties["scrollMarginBlock"] | AnyString>
+scrollMarginY?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars | CssProperties["scrollMarginBlock"] | AnyString>
  /**
    * The `scroll-margin-inline` shorthand property sets the scroll margins of an element in the inline dimension.
    *
@@ -7306,7 +7307,7 @@ scrollMarginY?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssPropert
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline
    */
-scrollMarginX?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssProperties["scrollMarginInline"] | AnyString>
+scrollMarginX?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars | CssProperties["scrollMarginInline"] | AnyString>
  /**
    * The `scroll-padding-block` shorthand property sets the scroll padding of an element in the block dimension.
    *
@@ -7318,7 +7319,7 @@ scrollMarginX?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssProper
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block
    */
-scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssProperties["scrollPaddingBlock"] | AnyString>
+scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"] | AnyString>
  /**
    * The `scroll-padding-inline` shorthand property sets the scroll padding of an element in the inline dimension.
    *
@@ -7330,27 +7331,32 @@ scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssPrope
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline
    */
-scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssProperties["scrollPaddingInline"] | AnyString>
- hideFrom?: ConditionalValue<UtilityValues["hideFrom"] | AnyString>
- hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | AnyString>
- divideX?: ConditionalValue<UtilityValues["divideX"] | AnyString>
- divideY?: ConditionalValue<UtilityValues["divideY"] | AnyString>
- divideColor?: ConditionalValue<UtilityValues["divideColor"] | AnyString>
- divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | AnyString>
- fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | AnyString>
- truncate?: ConditionalValue<UtilityValues["truncate"] | AnyString>
- backgroundGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | AnyString>
- textGradient?: ConditionalValue<UtilityValues["textGradient"] | AnyString>
- gradientFrom?: ConditionalValue<UtilityValues["gradientFrom"] | AnyString>
- gradientTo?: ConditionalValue<UtilityValues["gradientTo"] | AnyString>
- gradientVia?: ConditionalValue<UtilityValues["gradientVia"] | AnyString>
- borderTopRadius?: ConditionalValue<UtilityValues["borderTopRadius"] | AnyString>
- borderRightRadius?: ConditionalValue<UtilityValues["borderRightRadius"] | AnyString>
- borderBottomRadius?: ConditionalValue<UtilityValues["borderBottomRadius"] | AnyString>
- borderLeftRadius?: ConditionalValue<UtilityValues["borderLeftRadius"] | AnyString>
- borderStartRadius?: ConditionalValue<UtilityValues["borderStartRadius"] | AnyString>
- borderEndRadius?: ConditionalValue<UtilityValues["borderEndRadius"] | AnyString>
- boxShadowColor?: ConditionalValue<UtilityValues["boxShadowColor"] | AnyString>
+scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"] | AnyString>
+ hideFrom?: ConditionalValue<UtilityValues["hideFrom"] | CssVars | AnyString>
+ hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | CssVars | AnyString>
+ spaceX?: ConditionalValue<UtilityValues["spaceX"] | CssVars | AnyString>
+ spaceY?: ConditionalValue<UtilityValues["spaceY"] | CssVars | AnyString>
+ divideX?: ConditionalValue<string | number | AnyString>
+ divideY?: ConditionalValue<string | number | AnyString>
+ divideColor?: ConditionalValue<UtilityValues["divideColor"] | CssVars | AnyString>
+ divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | CssVars | AnyString>
+ fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | CssVars | AnyString>
+ truncate?: ConditionalValue<UtilityValues["truncate"] | CssVars | AnyString>
+ backgroundGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
+ textGradient?: ConditionalValue<UtilityValues["textGradient"] | CssVars | AnyString>
+ gradientFromPosition?: ConditionalValue<string | number | AnyString>
+ gradientToPosition?: ConditionalValue<string | number | AnyString>
+ gradientFrom?: ConditionalValue<UtilityValues["gradientFrom"] | CssVars | AnyString>
+ gradientTo?: ConditionalValue<UtilityValues["gradientTo"] | CssVars | AnyString>
+ gradientVia?: ConditionalValue<UtilityValues["gradientVia"] | CssVars | AnyString>
+ gradientViaPosition?: ConditionalValue<string | number | AnyString>
+ borderTopRadius?: ConditionalValue<UtilityValues["borderTopRadius"] | CssVars | AnyString>
+ borderRightRadius?: ConditionalValue<UtilityValues["borderRightRadius"] | CssVars | AnyString>
+ borderBottomRadius?: ConditionalValue<UtilityValues["borderBottomRadius"] | CssVars | AnyString>
+ borderLeftRadius?: ConditionalValue<UtilityValues["borderLeftRadius"] | CssVars | AnyString>
+ borderStartRadius?: ConditionalValue<UtilityValues["borderStartRadius"] | CssVars | AnyString>
+ borderEndRadius?: ConditionalValue<UtilityValues["borderEndRadius"] | CssVars | AnyString>
+ boxShadowColor?: ConditionalValue<UtilityValues["boxShadowColor"] | CssVars | AnyString>
  brightness?: ConditionalValue<string | number | AnyString>
  contrast?: ConditionalValue<string | number | AnyString>
  grayscale?: ConditionalValue<string | number | AnyString>
@@ -7359,8 +7365,8 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssProp
  saturate?: ConditionalValue<string | number | AnyString>
  sepia?: ConditionalValue<string | number | AnyString>
  dropShadow?: ConditionalValue<string | number | AnyString>
- blur?: ConditionalValue<UtilityValues["blur"] | AnyString>
- backdropBlur?: ConditionalValue<UtilityValues["backdropBlur"] | AnyString>
+ blur?: ConditionalValue<UtilityValues["blur"] | CssVars | AnyString>
+ backdropBlur?: ConditionalValue<UtilityValues["backdropBlur"] | CssVars | AnyString>
  backdropBrightness?: ConditionalValue<string | number | AnyString>
  backdropContrast?: ConditionalValue<string | number | AnyString>
  backdropGrayscale?: ConditionalValue<string | number | AnyString>
@@ -7369,14 +7375,18 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssProp
  backdropOpacity?: ConditionalValue<string | number | AnyString>
  backdropSaturate?: ConditionalValue<string | number | AnyString>
  backdropSepia?: ConditionalValue<string | number | AnyString>
- borderSpacingX?: ConditionalValue<UtilityValues["borderSpacingX"] | AnyString>
- borderSpacingY?: ConditionalValue<UtilityValues["borderSpacingY"] | AnyString>
+ borderSpacingX?: ConditionalValue<UtilityValues["borderSpacingX"] | CssVars | AnyString>
+ borderSpacingY?: ConditionalValue<UtilityValues["borderSpacingY"] | CssVars | AnyString>
+ rotateX?: ConditionalValue<UtilityValues["rotateX"] | CssVars | AnyString>
+ rotateY?: ConditionalValue<UtilityValues["rotateY"] | CssVars | AnyString>
+ rotateZ?: ConditionalValue<UtilityValues["rotateZ"] | CssVars | AnyString>
  scaleX?: ConditionalValue<string | number | AnyString>
  scaleY?: ConditionalValue<string | number | AnyString>
- translateX?: ConditionalValue<UtilityValues["translateX"] | AnyString>
- translateY?: ConditionalValue<UtilityValues["translateY"] | AnyString>
- scrollbar?: ConditionalValue<UtilityValues["scrollbar"] | AnyString>
- scrollSnapStrictness?: ConditionalValue<UtilityValues["scrollSnapStrictness"] | AnyString>
+ translateX?: ConditionalValue<UtilityValues["translateX"] | CssVars | AnyString>
+ translateY?: ConditionalValue<UtilityValues["translateY"] | CssVars | AnyString>
+ translateZ?: ConditionalValue<UtilityValues["translateZ"] | CssVars | AnyString>
+ scrollbar?: ConditionalValue<UtilityValues["scrollbar"] | CssVars | AnyString>
+ scrollSnapStrictness?: ConditionalValue<UtilityValues["scrollSnapStrictness"] | CssVars | AnyString>
  /**
    * The **`scroll-margin`** shorthand property sets all of the scroll margins of an element at once, assigning values much like the `margin` property does for margins of an element.
    *
@@ -7389,7 +7399,7 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssProp
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin
    */
-scrollSnapMargin?: ConditionalValue<UtilityValues["scrollSnapMargin"] | AnyString>
+scrollSnapMargin?: ConditionalValue<UtilityValues["scrollSnapMargin"] | CssVars | AnyString>
  /**
    * 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.
    *
@@ -7404,7 +7414,7 @@ scrollSnapMargin?: ConditionalValue<UtilityValues["scrollSnapMargin"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top
    */
-scrollSnapMarginTop?: ConditionalValue<UtilityValues["scrollSnapMarginTop"] | AnyString>
+scrollSnapMarginTop?: ConditionalValue<UtilityValues["scrollSnapMarginTop"] | CssVars | AnyString>
  /**
    * 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.
    *
@@ -7419,7 +7429,7 @@ scrollSnapMarginTop?: ConditionalValue<UtilityValues["scrollSnapMarginTop"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom
    */
-scrollSnapMarginBottom?: ConditionalValue<UtilityValues["scrollSnapMarginBottom"] | AnyString>
+scrollSnapMarginBottom?: ConditionalValue<UtilityValues["scrollSnapMarginBottom"] | CssVars | AnyString>
  /**
    * 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.
    *
@@ -7434,7 +7444,7 @@ scrollSnapMarginBottom?: ConditionalValue<UtilityValues["scrollSnapMarginBottom"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left
    */
-scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] | AnyString>
+scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] | CssVars | AnyString>
  /**
    * 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.
    *
@@ -7449,9 +7459,9 @@ scrollSnapMarginLeft?: ConditionalValue<UtilityValues["scrollSnapMarginLeft"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right
    */
-scrollSnapMarginRight?: ConditionalValue<UtilityValues["scrollSnapMarginRight"] | AnyString>
- srOnly?: ConditionalValue<UtilityValues["srOnly"] | AnyString>
- debug?: ConditionalValue<UtilityValues["debug"] | AnyString>
- colorPalette?: ConditionalValue<UtilityValues["colorPalette"] | AnyString>
- textStyle?: ConditionalValue<UtilityValues["textStyle"] | AnyString>
+scrollSnapMarginRight?: ConditionalValue<UtilityValues["scrollSnapMarginRight"] | CssVars | AnyString>
+ srOnly?: ConditionalValue<UtilityValues["srOnly"] | CssVars | AnyString>
+ debug?: ConditionalValue<UtilityValues["debug"] | CssVars | AnyString>
+ colorPalette?: ConditionalValue<UtilityValues["colorPalette"] | CssVars | AnyString>
+ textStyle?: ConditionalValue<UtilityValues["textStyle"] | CssVars | AnyString>
 }