@trackunit/css-component-tokens 1.7.107 → 1.7.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-component-tokens",
-  "version": "1.7.107",
+  "version": "1.7.111",
   "main": "./index.cjs.js",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -10,7 +10,7 @@
   "dependencies": {
     "csstype": "3.1.2",
     "tailwindcss": "3.4.3",
-    "@trackunit/css-tailwind-custom-properties-plugin": "1.7.107"
+    "@trackunit/css-tailwind-custom-properties-plugin": "1.7.110"
   },
   "module": "./index.esm.js",
   "types": "./index.d.ts"

package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts

@@ -1,220 +1,4 @@
-import { ThemeNames } from "./ComponentTokenDefinition";
+import { ComponentTokenDefinition, ThemeNames } from "./ComponentTokenDefinition";
 import { ComponentTokenDefinitions } from "./ComponentTokens";
 /** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
-export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => {
-    [k: string]: {
-        readonly border: {
-            readonly borderColor: "rgb(var(--color-neutral-200))";
-            readonly borderRadius: "var(--border-radius-lg)";
-        };
-        readonly "popover-border": {
-            readonly borderRadius: "var(--border-radius-lg)";
-        };
-        readonly shadow: {
-            readonly boxShadow: "var(--box-shadow-none)";
-        };
-        readonly spacing: {
-            readonly gap: "var(--spacing-3)";
-            readonly padding: "var(--spacing-3)";
-        };
-        readonly "spacing-sm": {
-            readonly gap: "var(--spacing-4)";
-            readonly padding: "var(--spacing-4)";
-        };
-        readonly "spacing-md": {
-            readonly gap: "var(--spacing-4)";
-            readonly padding: "var(--spacing-4)";
-        };
-    } | {
-        readonly border: {
-            readonly borderColor: "rgba(0, 0, 0, 0)";
-            readonly borderRadius: "2rem";
-        };
-        readonly "popover-border": {
-            readonly borderRadius: "1rem";
-        };
-        readonly shadow: {
-            readonly boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)";
-        };
-        readonly spacing: {
-            readonly gap: "var(--spacing-3)";
-            readonly padding: "var(--spacing-3)";
-        };
-        readonly "spacing-sm": {
-            readonly gap: "var(--spacing-4)";
-            readonly padding: "var(--spacing-4)";
-        };
-        readonly "spacing-md": {
-            readonly gap: "var(--spacing-4)";
-            readonly padding: "var(--spacing-6)";
-        };
-    } | {
-        readonly "secondary-color": {
-            readonly backgroundColor: "rgb(var(--color-neutral-200))";
-            readonly color: "rgb(var(--color-neutral-600))";
-        };
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-lg)";
-        };
-        readonly height: {
-            readonly height: "auto";
-        };
-        readonly padding: {
-            readonly paddingLeft: "var(--spacing-2-5)";
-            readonly paddingRight: "var(--spacing-2-5)";
-        };
-    } | {
-        readonly "secondary-color": {
-            readonly backgroundColor: "rgb(var(--color-neutral-600))";
-            readonly color: "rgb(var(--color-neutral-50))";
-        };
-        readonly border: {
-            readonly borderRadius: "50px";
-        };
-        readonly height: {
-            readonly height: "55px";
-        };
-        readonly padding: {
-            readonly paddingLeft: "var(--spacing-12)";
-            readonly paddingRight: "var(--spacing-12)";
-        };
-    } | {
-        readonly width: {
-            readonly width: "9rem";
-        };
-        readonly background: {
-            readonly backgroundColor: "";
-        };
-        readonly borderless: {
-            readonly borderStyle: "hidden";
-        };
-        readonly "focus-hover": {
-            readonly borderWidth: "1px";
-            readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-400))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
-            readonly backgroundColor: "rgb(var(--color-neutral-50))";
-        };
-        readonly border: {
-            readonly borderStyle: "solid";
-            readonly borderWidth: "1px";
-            readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-200))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-200))";
-            readonly borderRadius: "0.5rem";
-        };
-        readonly "focus-within": {
-            readonly borderColor: "rgb(var(--color-neutral-400))";
-            readonly boxShadow: "var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
-        };
-        readonly widen: {
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
-        };
-        readonly "widen-focus": {
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
-        };
-        readonly prefix: {
-            readonly color: "rgb(var(--color-neutral-400))";
-            readonly cursor: "default";
-        };
-    } | {
-        readonly width: {
-            readonly width: "0px";
-        };
-        readonly background: {
-            readonly backgroundColor: "transparent";
-        };
-        readonly borderless: {
-            readonly borderStyle: "hidden";
-        };
-        readonly "focus-hover": {
-            readonly borderWidth: "1px";
-            readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-black-DEFAULT))";
-            readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
-            readonly backgroundColor: "transparent";
-        };
-        readonly border: {
-            readonly borderStyle: "solid";
-            readonly borderWidth: "1px";
-            readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-300))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-300))";
-            readonly borderRadius: "0px";
-        };
-        readonly "focus-within": {
-            readonly borderColor: "none";
-            readonly boxShadow: "none";
-        };
-        readonly widen: {
-            readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
-        };
-        readonly "widen-focus": {
-            readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
-        };
-        readonly prefix: {
-            readonly color: "rgb(var(--color-neutral-600))";
-            readonly cursor: "pointer";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "1rem";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "1rem";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-lg)";
-            readonly borderWidth: "1px";
-        };
-        readonly shadow: {
-            readonly boxShadow: "var(--box-shadow-sm)";
-        };
-        readonly background: {
-            readonly backgroundColor: "white";
-        };
-        readonly prefix: {
-            readonly borderRightWidth: "1px";
-        };
-    } | {
-        readonly border: {
-            readonly borderRadius: "8px";
-            readonly borderWidth: "1px";
-        };
-        readonly shadow: {
-            readonly boxShadow: "none";
-        };
-        readonly background: {
-            readonly backgroundColor: "rgb(var(--color-stone-50))";
-        };
-        readonly prefix: {
-            readonly borderRightWidth: "0px";
-        };
-    } | {
-        readonly gap: {
-            readonly display: "auto";
-            readonly gap: "auto";
-        };
-        readonly font: {
-            readonly fontWeight: "normal";
-        };
-    } | {
-        readonly gap: {
-            readonly display: "grid";
-            readonly gap: "var(--spacing-4)";
-        };
-        readonly font: {
-            readonly fontWeight: "700";
-        };
-    };
-};
+export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => Record<string, ComponentTokenDefinition[ThemeNames]>;

package/src/component-tokens/pluginUtilityFunctions.d.ts

@@ -21,9 +21,7 @@ export declare const componentTokenAsCssVariableString: <Component extends Compo
  * @param {CSSProperties} tokenObject The CSSProperties for the component token
  * @returns {*}  {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
  */
-export declare const componentTokenToCSSProperties: <Component extends ComponentNames, Token extends ComponentTokenNames<Component>>(component: Component, token: Token, tokenObject: CSSProperties) => {
-    [k: string]: `var(--component-${Component}-${Token}-border)` | `var(--component-${Component}-${Token}-height)` | `var(--component-${Component}-${Token}-padding)` | `var(--component-${Component}-${Token}-width)` | `var(--component-${Component}-${Token}-background)` | `var(--component-${Component}-${Token}-inset)` | `var(--component-${Component}-${Token}-gap)` | `var(--component-${Component}-${Token}-flex)` | `var(--component-${Component}-${Token}-grid)` | `var(--component-${Component}-${Token}-font)` | `var(--component-${Component}-${Token}-accentColor)` | `var(--component-${Component}-${Token}-alignContent)` | `var(--component-${Component}-${Token}-alignItems)` | `var(--component-${Component}-${Token}-alignSelf)` | `var(--component-${Component}-${Token}-alignTracks)` | `var(--component-${Component}-${Token}-animationComposition)` | `var(--component-${Component}-${Token}-animationDelay)` | `var(--component-${Component}-${Token}-animationDirection)` | `var(--component-${Component}-${Token}-animationDuration)` | `var(--component-${Component}-${Token}-animationFillMode)` | `var(--component-${Component}-${Token}-animationIterationCount)` | `var(--component-${Component}-${Token}-animationName)` | `var(--component-${Component}-${Token}-animationPlayState)` | `var(--component-${Component}-${Token}-animationTimeline)` | `var(--component-${Component}-${Token}-animationTimingFunction)` | `var(--component-${Component}-${Token}-appearance)` | `var(--component-${Component}-${Token}-aspectRatio)` | `var(--component-${Component}-${Token}-backdropFilter)` | `var(--component-${Component}-${Token}-backfaceVisibility)` | `var(--component-${Component}-${Token}-backgroundAttachment)` | `var(--component-${Component}-${Token}-backgroundBlendMode)` | `var(--component-${Component}-${Token}-backgroundClip)` | `var(--component-${Component}-${Token}-backgroundColor)` | `var(--component-${Component}-${Token}-backgroundImage)` | `var(--component-${Component}-${Token}-backgroundOrigin)` | `var(--component-${Component}-${Token}-backgroundPositionX)` | `var(--component-${Component}-${Token}-backgroundPositionY)` | `var(--component-${Component}-${Token}-backgroundRepeat)` | `var(--component-${Component}-${Token}-backgroundSize)` | `var(--component-${Component}-${Token}-blockOverflow)` | `var(--component-${Component}-${Token}-blockSize)` | `var(--component-${Component}-${Token}-borderBlockColor)` | `var(--component-${Component}-${Token}-borderBlockEndColor)` | `var(--component-${Component}-${Token}-borderBlockEndStyle)` | `var(--component-${Component}-${Token}-borderBlockEndWidth)` | `var(--component-${Component}-${Token}-borderBlockStartColor)` | `var(--component-${Component}-${Token}-borderBlockStartStyle)` | `var(--component-${Component}-${Token}-borderBlockStartWidth)` | `var(--component-${Component}-${Token}-borderBlockStyle)` | `var(--component-${Component}-${Token}-borderBlockWidth)` | `var(--component-${Component}-${Token}-borderBottomColor)` | `var(--component-${Component}-${Token}-borderBottomLeftRadius)` | `var(--component-${Component}-${Token}-borderBottomRightRadius)` | `var(--component-${Component}-${Token}-borderBottomStyle)` | `var(--component-${Component}-${Token}-borderBottomWidth)` | `var(--component-${Component}-${Token}-borderCollapse)` | `var(--component-${Component}-${Token}-borderEndEndRadius)` | `var(--component-${Component}-${Token}-borderEndStartRadius)` | `var(--component-${Component}-${Token}-borderImageOutset)` | `var(--component-${Component}-${Token}-borderImageRepeat)` | `var(--component-${Component}-${Token}-borderImageSlice)` | `var(--component-${Component}-${Token}-borderImageSource)` | `var(--component-${Component}-${Token}-borderImageWidth)` | `var(--component-${Component}-${Token}-borderInlineColor)` | `var(--component-${Component}-${Token}-borderInlineEndColor)` | `var(--component-${Component}-${Token}-borderInlineEndStyle)` | `var(--component-${Component}-${Token}-borderInlineEndWidth)` | `var(--component-${Component}-${Token}-borderInlineStartColor)` | `var(--component-${Component}-${Token}-borderInlineStartStyle)` | `var(--component-${Component}-${Token}-borderInlineStartWidth)` | `var(--component-${Component}-${Token}-borderInlineStyle)` | `var(--component-${Component}-${Token}-borderInlineWidth)` | `var(--component-${Component}-${Token}-borderLeftColor)` | `var(--component-${Component}-${Token}-borderLeftStyle)` | `var(--component-${Component}-${Token}-borderLeftWidth)` | `var(--component-${Component}-${Token}-borderRightColor)` | `var(--component-${Component}-${Token}-borderRightStyle)` | `var(--component-${Component}-${Token}-borderRightWidth)` | `var(--component-${Component}-${Token}-borderSpacing)` | `var(--component-${Component}-${Token}-borderStartEndRadius)` | `var(--component-${Component}-${Token}-borderStartStartRadius)` | `var(--component-${Component}-${Token}-borderTopColor)` | `var(--component-${Component}-${Token}-borderTopLeftRadius)` | `var(--component-${Component}-${Token}-borderTopRightRadius)` | `var(--component-${Component}-${Token}-borderTopStyle)` | `var(--component-${Component}-${Token}-borderTopWidth)` | `var(--component-${Component}-${Token}-bottom)` | `var(--component-${Component}-${Token}-boxDecorationBreak)` | `var(--component-${Component}-${Token}-boxShadow)` | `var(--component-${Component}-${Token}-boxSizing)` | `var(--component-${Component}-${Token}-breakAfter)` | `var(--component-${Component}-${Token}-breakBefore)` | `var(--component-${Component}-${Token}-breakInside)` | `var(--component-${Component}-${Token}-captionSide)` | `var(--component-${Component}-${Token}-caretColor)` | `var(--component-${Component}-${Token}-caretShape)` | `var(--component-${Component}-${Token}-clear)` | `var(--component-${Component}-${Token}-clipPath)` | `var(--component-${Component}-${Token}-color)` | `var(--component-${Component}-${Token}-colorAdjust)` | `var(--component-${Component}-${Token}-colorScheme)` | `var(--component-${Component}-${Token}-columnCount)` | `var(--component-${Component}-${Token}-columnFill)` | `var(--component-${Component}-${Token}-columnGap)` | `var(--component-${Component}-${Token}-columnRuleColor)` | `var(--component-${Component}-${Token}-columnRuleStyle)` | `var(--component-${Component}-${Token}-columnRuleWidth)` | `var(--component-${Component}-${Token}-columnSpan)` | `var(--component-${Component}-${Token}-columnWidth)` | `var(--component-${Component}-${Token}-contain)` | `var(--component-${Component}-${Token}-containIntrinsicBlockSize)` | `var(--component-${Component}-${Token}-containIntrinsicHeight)` | `var(--component-${Component}-${Token}-containIntrinsicInlineSize)` | `var(--component-${Component}-${Token}-containIntrinsicWidth)` | `var(--component-${Component}-${Token}-containerName)` | `var(--component-${Component}-${Token}-containerType)` | `var(--component-${Component}-${Token}-content)` | `var(--component-${Component}-${Token}-contentVisibility)` | `var(--component-${Component}-${Token}-counterIncrement)` | `var(--component-${Component}-${Token}-counterReset)` | `var(--component-${Component}-${Token}-counterSet)` | `var(--component-${Component}-${Token}-cursor)` | `var(--component-${Component}-${Token}-direction)` | `var(--component-${Component}-${Token}-display)` | `var(--component-${Component}-${Token}-emptyCells)` | `var(--component-${Component}-${Token}-filter)` | `var(--component-${Component}-${Token}-flexBasis)` | `var(--component-${Component}-${Token}-flexDirection)` | `var(--component-${Component}-${Token}-flexGrow)` | `var(--component-${Component}-${Token}-flexShrink)` | `var(--component-${Component}-${Token}-flexWrap)` | `var(--component-${Component}-${Token}-float)` | `var(--component-${Component}-${Token}-fontFamily)` | `var(--component-${Component}-${Token}-fontFeatureSettings)` | `var(--component-${Component}-${Token}-fontKerning)` | `var(--component-${Component}-${Token}-fontLanguageOverride)` | `var(--component-${Component}-${Token}-fontOpticalSizing)` | `var(--component-${Component}-${Token}-fontPalette)` | `var(--component-${Component}-${Token}-fontSize)` | `var(--component-${Component}-${Token}-fontSizeAdjust)` | `var(--component-${Component}-${Token}-fontSmooth)` | `var(--component-${Component}-${Token}-fontStretch)` | `var(--component-${Component}-${Token}-fontStyle)` | `var(--component-${Component}-${Token}-fontSynthesis)` | `var(--component-${Component}-${Token}-fontVariant)` | `var(--component-${Component}-${Token}-fontVariantAlternates)` | `var(--component-${Component}-${Token}-fontVariantCaps)` | `var(--component-${Component}-${Token}-fontVariantEastAsian)` | `var(--component-${Component}-${Token}-fontVariantEmoji)` | `var(--component-${Component}-${Token}-fontVariantLigatures)` | `var(--component-${Component}-${Token}-fontVariantNumeric)` | `var(--component-${Component}-${Token}-fontVariantPosition)` | `var(--component-${Component}-${Token}-fontVariationSettings)` | `var(--component-${Component}-${Token}-fontWeight)` | `var(--component-${Component}-${Token}-forcedColorAdjust)` | `var(--component-${Component}-${Token}-gridAutoColumns)` | `var(--component-${Component}-${Token}-gridAutoFlow)` | `var(--component-${Component}-${Token}-gridAutoRows)` | `var(--component-${Component}-${Token}-gridColumnEnd)` | `var(--component-${Component}-${Token}-gridColumnStart)` | `var(--component-${Component}-${Token}-gridRowEnd)` | `var(--component-${Component}-${Token}-gridRowStart)` | `var(--component-${Component}-${Token}-gridTemplateAreas)` | `var(--component-${Component}-${Token}-gridTemplateColumns)` | `var(--component-${Component}-${Token}-gridTemplateRows)` | `var(--component-${Component}-${Token}-hangingPunctuation)` | `var(--component-${Component}-${Token}-hyphenateCharacter)` | `var(--component-${Component}-${Token}-hyphenateLimitChars)` | `var(--component-${Component}-${Token}-hyphens)` | `var(--component-${Component}-${Token}-imageOrientation)` | `var(--component-${Component}-${Token}-imageRendering)` | `var(--component-${Component}-${Token}-imageResolution)` | `var(--component-${Component}-${Token}-initialLetter)` | `var(--component-${Component}-${Token}-inlineSize)` | `var(--component-${Component}-${Token}-inputSecurity)` | `var(--component-${Component}-${Token}-insetBlockEnd)` | `var(--component-${Component}-${Token}-insetBlockStart)` | `var(--component-${Component}-${Token}-insetInlineEnd)` | `var(--component-${Component}-${Token}-insetInlineStart)` | `var(--component-${Component}-${Token}-isolation)` | `var(--component-${Component}-${Token}-justifyContent)` | `var(--component-${Component}-${Token}-justifyItems)` | `var(--component-${Component}-${Token}-justifySelf)` | `var(--component-${Component}-${Token}-justifyTracks)` | `var(--component-${Component}-${Token}-left)` | `var(--component-${Component}-${Token}-letterSpacing)` | `var(--component-${Component}-${Token}-lineBreak)` | `var(--component-${Component}-${Token}-lineHeight)` | `var(--component-${Component}-${Token}-lineHeightStep)` | `var(--component-${Component}-${Token}-listStyleImage)` | `var(--component-${Component}-${Token}-listStylePosition)` | `var(--component-${Component}-${Token}-listStyleType)` | `var(--component-${Component}-${Token}-marginBlockEnd)` | `var(--component-${Component}-${Token}-marginBlockStart)` | `var(--component-${Component}-${Token}-marginBottom)` | `var(--component-${Component}-${Token}-marginInlineEnd)` | `var(--component-${Component}-${Token}-marginInlineStart)` | `var(--component-${Component}-${Token}-marginLeft)` | `var(--component-${Component}-${Token}-marginRight)` | `var(--component-${Component}-${Token}-marginTop)` | `var(--component-${Component}-${Token}-marginTrim)` | `var(--component-${Component}-${Token}-maskBorderMode)` | `var(--component-${Component}-${Token}-maskBorderOutset)` | `var(--component-${Component}-${Token}-maskBorderRepeat)` | `var(--component-${Component}-${Token}-maskBorderSlice)` | `var(--component-${Component}-${Token}-maskBorderSource)` | `var(--component-${Component}-${Token}-maskBorderWidth)` | `var(--component-${Component}-${Token}-maskClip)` | `var(--component-${Component}-${Token}-maskComposite)` | `var(--component-${Component}-${Token}-maskImage)` | `var(--component-${Component}-${Token}-maskMode)` | `var(--component-${Component}-${Token}-maskOrigin)` | `var(--component-${Component}-${Token}-maskPosition)` | `var(--component-${Component}-${Token}-maskRepeat)` | `var(--component-${Component}-${Token}-maskSize)` | `var(--component-${Component}-${Token}-maskType)` | `var(--component-${Component}-${Token}-mathDepth)` | `var(--component-${Component}-${Token}-mathShift)` | `var(--component-${Component}-${Token}-mathStyle)` | `var(--component-${Component}-${Token}-maxBlockSize)` | `var(--component-${Component}-${Token}-maxHeight)` | `var(--component-${Component}-${Token}-maxInlineSize)` | `var(--component-${Component}-${Token}-maxLines)` | `var(--component-${Component}-${Token}-maxWidth)` | `var(--component-${Component}-${Token}-minBlockSize)` | `var(--component-${Component}-${Token}-minHeight)` | `var(--component-${Component}-${Token}-minInlineSize)` | `var(--component-${Component}-${Token}-minWidth)` | `var(--component-${Component}-${Token}-mixBlendMode)` | `var(--component-${Component}-${Token}-motionDistance)` | `var(--component-${Component}-${Token}-motionPath)` | `var(--component-${Component}-${Token}-motionRotation)` | `var(--component-${Component}-${Token}-objectFit)` | `var(--component-${Component}-${Token}-objectPosition)` | `var(--component-${Component}-${Token}-offsetAnchor)` | `var(--component-${Component}-${Token}-offsetDistance)` | `var(--component-${Component}-${Token}-offsetPath)` | `var(--component-${Component}-${Token}-offsetPosition)` | `var(--component-${Component}-${Token}-offsetRotate)` | `var(--component-${Component}-${Token}-offsetRotation)` | `var(--component-${Component}-${Token}-opacity)` | `var(--component-${Component}-${Token}-order)` | `var(--component-${Component}-${Token}-orphans)` | `var(--component-${Component}-${Token}-outlineColor)` | `var(--component-${Component}-${Token}-outlineOffset)` | `var(--component-${Component}-${Token}-outlineStyle)` | `var(--component-${Component}-${Token}-outlineWidth)` | `var(--component-${Component}-${Token}-overflowAnchor)` | `var(--component-${Component}-${Token}-overflowBlock)` | `var(--component-${Component}-${Token}-overflowClipBox)` | `var(--component-${Component}-${Token}-overflowClipMargin)` | `var(--component-${Component}-${Token}-overflowInline)` | `var(--component-${Component}-${Token}-overflowWrap)` | `var(--component-${Component}-${Token}-overflowX)` | `var(--component-${Component}-${Token}-overflowY)` | `var(--component-${Component}-${Token}-overscrollBehaviorBlock)` | `var(--component-${Component}-${Token}-overscrollBehaviorInline)` | `var(--component-${Component}-${Token}-overscrollBehaviorX)` | `var(--component-${Component}-${Token}-overscrollBehaviorY)` | `var(--component-${Component}-${Token}-paddingBlockEnd)` | `var(--component-${Component}-${Token}-paddingBlockStart)` | `var(--component-${Component}-${Token}-paddingBottom)` | `var(--component-${Component}-${Token}-paddingInlineEnd)` | `var(--component-${Component}-${Token}-paddingInlineStart)` | `var(--component-${Component}-${Token}-paddingLeft)` | `var(--component-${Component}-${Token}-paddingRight)` | `var(--component-${Component}-${Token}-paddingTop)` | `var(--component-${Component}-${Token}-page)` | `var(--component-${Component}-${Token}-pageBreakAfter)` | `var(--component-${Component}-${Token}-pageBreakBefore)` | `var(--component-${Component}-${Token}-pageBreakInside)` | `var(--component-${Component}-${Token}-paintOrder)` | `var(--component-${Component}-${Token}-perspective)` | `var(--component-${Component}-${Token}-perspectiveOrigin)` | `var(--component-${Component}-${Token}-pointerEvents)` | `var(--component-${Component}-${Token}-position)` | `var(--component-${Component}-${Token}-printColorAdjust)` | `var(--component-${Component}-${Token}-quotes)` | `var(--component-${Component}-${Token}-resize)` | `var(--component-${Component}-${Token}-right)` | `var(--component-${Component}-${Token}-rotate)` | `var(--component-${Component}-${Token}-rowGap)` | `var(--component-${Component}-${Token}-rubyAlign)` | `var(--component-${Component}-${Token}-rubyMerge)` | `var(--component-${Component}-${Token}-rubyPosition)` | `var(--component-${Component}-${Token}-scale)` | `var(--component-${Component}-${Token}-scrollBehavior)` | `var(--component-${Component}-${Token}-scrollMarginBlockEnd)` | `var(--component-${Component}-${Token}-scrollMarginBlockStart)` | `var(--component-${Component}-${Token}-scrollMarginBottom)` | `var(--component-${Component}-${Token}-scrollMarginInlineEnd)` | `var(--component-${Component}-${Token}-scrollMarginInlineStart)` | `var(--component-${Component}-${Token}-scrollMarginLeft)` | `var(--component-${Component}-${Token}-scrollMarginRight)` | `var(--component-${Component}-${Token}-scrollMarginTop)` | `var(--component-${Component}-${Token}-scrollPaddingBlockEnd)` | `var(--component-${Component}-${Token}-scrollPaddingBlockStart)` | `var(--component-${Component}-${Token}-scrollPaddingBottom)` | `var(--component-${Component}-${Token}-scrollPaddingInlineEnd)` | `var(--component-${Component}-${Token}-scrollPaddingInlineStart)` | `var(--component-${Component}-${Token}-scrollPaddingLeft)` | `var(--component-${Component}-${Token}-scrollPaddingRight)` | `var(--component-${Component}-${Token}-scrollPaddingTop)` | `var(--component-${Component}-${Token}-scrollSnapAlign)` | `var(--component-${Component}-${Token}-scrollSnapMarginBottom)` | `var(--component-${Component}-${Token}-scrollSnapMarginLeft)` | `var(--component-${Component}-${Token}-scrollSnapMarginRight)` | `var(--component-${Component}-${Token}-scrollSnapMarginTop)` | `var(--component-${Component}-${Token}-scrollSnapStop)` | `var(--component-${Component}-${Token}-scrollSnapType)` | `var(--component-${Component}-${Token}-scrollTimelineAxis)` | `var(--component-${Component}-${Token}-scrollTimelineName)` | `var(--component-${Component}-${Token}-scrollbarColor)` | `var(--component-${Component}-${Token}-scrollbarGutter)` | `var(--component-${Component}-${Token}-scrollbarWidth)` | `var(--component-${Component}-${Token}-shapeImageThreshold)` | `var(--component-${Component}-${Token}-shapeMargin)` | `var(--component-${Component}-${Token}-shapeOutside)` | `var(--component-${Component}-${Token}-tabSize)` | `var(--component-${Component}-${Token}-tableLayout)` | `var(--component-${Component}-${Token}-textAlign)` | `var(--component-${Component}-${Token}-textAlignLast)` | `var(--component-${Component}-${Token}-textCombineUpright)` | `var(--component-${Component}-${Token}-textDecorationColor)` | `var(--component-${Component}-${Token}-textDecorationLine)` | `var(--component-${Component}-${Token}-textDecorationSkip)` | `var(--component-${Component}-${Token}-textDecorationSkipInk)` | `var(--component-${Component}-${Token}-textDecorationStyle)` | `var(--component-${Component}-${Token}-textDecorationThickness)` | `var(--component-${Component}-${Token}-textEmphasisColor)` | `var(--component-${Component}-${Token}-textEmphasisPosition)` | `var(--component-${Component}-${Token}-textEmphasisStyle)` | `var(--component-${Component}-${Token}-textIndent)` | `var(--component-${Component}-${Token}-textJustify)` | `var(--component-${Component}-${Token}-textOrientation)` | `var(--component-${Component}-${Token}-textOverflow)` | `var(--component-${Component}-${Token}-textRendering)` | `var(--component-${Component}-${Token}-textShadow)` | `var(--component-${Component}-${Token}-textSizeAdjust)` | `var(--component-${Component}-${Token}-textTransform)` | `var(--component-${Component}-${Token}-textUnderlineOffset)` | `var(--component-${Component}-${Token}-textUnderlinePosition)` | `var(--component-${Component}-${Token}-top)` | `var(--component-${Component}-${Token}-touchAction)` | `var(--component-${Component}-${Token}-transform)` | `var(--component-${Component}-${Token}-transformBox)` | `var(--component-${Component}-${Token}-transformOrigin)` | `var(--component-${Component}-${Token}-transformStyle)` | `var(--component-${Component}-${Token}-transitionDelay)` | `var(--component-${Component}-${Token}-transitionDuration)` | `var(--component-${Component}-${Token}-transitionProperty)` | `var(--component-${Component}-${Token}-transitionTimingFunction)` | `var(--component-${Component}-${Token}-translate)` | `var(--component-${Component}-${Token}-unicodeBidi)` | `var(--component-${Component}-${Token}-userSelect)` | `var(--component-${Component}-${Token}-verticalAlign)` | `var(--component-${Component}-${Token}-viewTransitionName)` | `var(--component-${Component}-${Token}-visibility)` | `var(--component-${Component}-${Token}-whiteSpace)` | `var(--component-${Component}-${Token}-widows)` | `var(--component-${Component}-${Token}-willChange)` | `var(--component-${Component}-${Token}-wordBreak)` | `var(--component-${Component}-${Token}-wordSpacing)` | `var(--component-${Component}-${Token}-wordWrap)` | `var(--component-${Component}-${Token}-writingMode)` | `var(--component-${Component}-${Token}-zIndex)` | `var(--component-${Component}-${Token}-zoom)` | `var(--component-${Component}-${Token}-all)` | `var(--component-${Component}-${Token}-animation)` | `var(--component-${Component}-${Token}-backgroundPosition)` | `var(--component-${Component}-${Token}-borderBlock)` | `var(--component-${Component}-${Token}-borderBlockEnd)` | `var(--component-${Component}-${Token}-borderBlockStart)` | `var(--component-${Component}-${Token}-borderBottom)` | `var(--component-${Component}-${Token}-borderColor)` | `var(--component-${Component}-${Token}-borderImage)` | `var(--component-${Component}-${Token}-borderInline)` | `var(--component-${Component}-${Token}-borderInlineEnd)` | `var(--component-${Component}-${Token}-borderInlineStart)` | `var(--component-${Component}-${Token}-borderLeft)` | `var(--component-${Component}-${Token}-borderRadius)` | `var(--component-${Component}-${Token}-borderRight)` | `var(--component-${Component}-${Token}-borderStyle)` | `var(--component-${Component}-${Token}-borderTop)` | `var(--component-${Component}-${Token}-borderWidth)` | `var(--component-${Component}-${Token}-caret)` | `var(--component-${Component}-${Token}-columnRule)` | `var(--component-${Component}-${Token}-columns)` | `var(--component-${Component}-${Token}-containIntrinsicSize)` | `var(--component-${Component}-${Token}-container)` | `var(--component-${Component}-${Token}-flexFlow)` | `var(--component-${Component}-${Token}-gridArea)` | `var(--component-${Component}-${Token}-gridColumn)` | `var(--component-${Component}-${Token}-gridRow)` | `var(--component-${Component}-${Token}-gridTemplate)` | `var(--component-${Component}-${Token}-insetBlock)` | `var(--component-${Component}-${Token}-insetInline)` | `var(--component-${Component}-${Token}-lineClamp)` | `var(--component-${Component}-${Token}-listStyle)` | `var(--component-${Component}-${Token}-margin)` | `var(--component-${Component}-${Token}-marginBlock)` | `var(--component-${Component}-${Token}-marginInline)` | `var(--component-${Component}-${Token}-mask)` | `var(--component-${Component}-${Token}-maskBorder)` | `var(--component-${Component}-${Token}-motion)` | `var(--component-${Component}-${Token}-offset)` | `var(--component-${Component}-${Token}-outline)` | `var(--component-${Component}-${Token}-overflow)` | `var(--component-${Component}-${Token}-overscrollBehavior)` | `var(--component-${Component}-${Token}-paddingBlock)` | `var(--component-${Component}-${Token}-paddingInline)` | `var(--component-${Component}-${Token}-placeContent)` | `var(--component-${Component}-${Token}-placeItems)` | `var(--component-${Component}-${Token}-placeSelf)` | `var(--component-${Component}-${Token}-scrollMargin)` | `var(--component-${Component}-${Token}-scrollMarginBlock)` | `var(--component-${Component}-${Token}-scrollMarginInline)` | `var(--component-${Component}-${Token}-scrollPadding)` | `var(--component-${Component}-${Token}-scrollPaddingBlock)` | `var(--component-${Component}-${Token}-scrollPaddingInline)` | `var(--component-${Component}-${Token}-scrollSnapMargin)` | `var(--component-${Component}-${Token}-scrollTimeline)` | `var(--component-${Component}-${Token}-textDecoration)` | `var(--component-${Component}-${Token}-textEmphasis)` | `var(--component-${Component}-${Token}-transition)` | `var(--component-${Component}-${Token}-MozAnimationDelay)` | `var(--component-${Component}-${Token}-MozAnimationDirection)` | `var(--component-${Component}-${Token}-MozAnimationDuration)` | `var(--component-${Component}-${Token}-MozAnimationFillMode)` | `var(--component-${Component}-${Token}-MozAnimationIterationCount)` | `var(--component-${Component}-${Token}-MozAnimationName)` | `var(--component-${Component}-${Token}-MozAnimationPlayState)` | `var(--component-${Component}-${Token}-MozAnimationTimingFunction)` | `var(--component-${Component}-${Token}-MozAppearance)` | `var(--component-${Component}-${Token}-MozBackfaceVisibility)` | `var(--component-${Component}-${Token}-MozBinding)` | `var(--component-${Component}-${Token}-MozBorderBottomColors)` | `var(--component-${Component}-${Token}-MozBorderEndColor)` | `var(--component-${Component}-${Token}-MozBorderEndStyle)` | `var(--component-${Component}-${Token}-MozBorderEndWidth)` | `var(--component-${Component}-${Token}-MozBorderLeftColors)` | `var(--component-${Component}-${Token}-MozBorderRightColors)` | `var(--component-${Component}-${Token}-MozBorderStartColor)` | `var(--component-${Component}-${Token}-MozBorderStartStyle)` | `var(--component-${Component}-${Token}-MozBorderTopColors)` | `var(--component-${Component}-${Token}-MozBoxSizing)` | `var(--component-${Component}-${Token}-MozColumnCount)` | `var(--component-${Component}-${Token}-MozColumnFill)` | `var(--component-${Component}-${Token}-MozColumnRuleColor)` | `var(--component-${Component}-${Token}-MozColumnRuleStyle)` | `var(--component-${Component}-${Token}-MozColumnRuleWidth)` | `var(--component-${Component}-${Token}-MozColumnWidth)` | `var(--component-${Component}-${Token}-MozContextProperties)` | `var(--component-${Component}-${Token}-MozFontFeatureSettings)` | `var(--component-${Component}-${Token}-MozFontLanguageOverride)` | `var(--component-${Component}-${Token}-MozHyphens)` | `var(--component-${Component}-${Token}-MozImageRegion)` | `var(--component-${Component}-${Token}-MozMarginEnd)` | `var(--component-${Component}-${Token}-MozMarginStart)` | `var(--component-${Component}-${Token}-MozOrient)` | `var(--component-${Component}-${Token}-MozOsxFontSmoothing)` | `var(--component-${Component}-${Token}-MozPaddingEnd)` | `var(--component-${Component}-${Token}-MozPaddingStart)` | `var(--component-${Component}-${Token}-MozPerspective)` | `var(--component-${Component}-${Token}-MozPerspectiveOrigin)` | `var(--component-${Component}-${Token}-MozStackSizing)` | `var(--component-${Component}-${Token}-MozTabSize)` | `var(--component-${Component}-${Token}-MozTextBlink)` | `var(--component-${Component}-${Token}-MozTextSizeAdjust)` | `var(--component-${Component}-${Token}-MozTransformOrigin)` | `var(--component-${Component}-${Token}-MozTransformStyle)` | `var(--component-${Component}-${Token}-MozTransitionDelay)` | `var(--component-${Component}-${Token}-MozTransitionDuration)` | `var(--component-${Component}-${Token}-MozTransitionProperty)` | `var(--component-${Component}-${Token}-MozTransitionTimingFunction)` | `var(--component-${Component}-${Token}-MozUserFocus)` | `var(--component-${Component}-${Token}-MozUserModify)` | `var(--component-${Component}-${Token}-MozUserSelect)` | `var(--component-${Component}-${Token}-MozWindowDragging)` | `var(--component-${Component}-${Token}-MozWindowShadow)` | `var(--component-${Component}-${Token}-msAccelerator)` | `var(--component-${Component}-${Token}-msBlockProgression)` | `var(--component-${Component}-${Token}-msContentZoomChaining)` | `var(--component-${Component}-${Token}-msContentZoomLimitMax)` | `var(--component-${Component}-${Token}-msContentZoomLimitMin)` | `var(--component-${Component}-${Token}-msContentZoomSnapPoints)` | `var(--component-${Component}-${Token}-msContentZoomSnapType)` | `var(--component-${Component}-${Token}-msContentZooming)` | `var(--component-${Component}-${Token}-msFilter)` | `var(--component-${Component}-${Token}-msFlexDirection)` | `var(--component-${Component}-${Token}-msFlexPositive)` | `var(--component-${Component}-${Token}-msFlowFrom)` | `var(--component-${Component}-${Token}-msFlowInto)` | `var(--component-${Component}-${Token}-msGridColumns)` | `var(--component-${Component}-${Token}-msGridRows)` | `var(--component-${Component}-${Token}-msHighContrastAdjust)` | `var(--component-${Component}-${Token}-msHyphenateLimitChars)` | `var(--component-${Component}-${Token}-msHyphenateLimitLines)` | `var(--component-${Component}-${Token}-msHyphenateLimitZone)` | `var(--component-${Component}-${Token}-msHyphens)` | `var(--component-${Component}-${Token}-msImeAlign)` | `var(--component-${Component}-${Token}-msLineBreak)` | `var(--component-${Component}-${Token}-msOrder)` | `var(--component-${Component}-${Token}-msOverflowStyle)` | `var(--component-${Component}-${Token}-msOverflowX)` | `var(--component-${Component}-${Token}-msOverflowY)` | `var(--component-${Component}-${Token}-msScrollChaining)` | `var(--component-${Component}-${Token}-msScrollLimitXMax)` | `var(--component-${Component}-${Token}-msScrollLimitXMin)` | `var(--component-${Component}-${Token}-msScrollLimitYMax)` | `var(--component-${Component}-${Token}-msScrollLimitYMin)` | `var(--component-${Component}-${Token}-msScrollRails)` | `var(--component-${Component}-${Token}-msScrollSnapPointsX)` | `var(--component-${Component}-${Token}-msScrollSnapPointsY)` | `var(--component-${Component}-${Token}-msScrollSnapType)` | `var(--component-${Component}-${Token}-msScrollTranslation)` | `var(--component-${Component}-${Token}-msScrollbar3dlightColor)` | `var(--component-${Component}-${Token}-msScrollbarArrowColor)` | `var(--component-${Component}-${Token}-msScrollbarBaseColor)` | `var(--component-${Component}-${Token}-msScrollbarDarkshadowColor)` | `var(--component-${Component}-${Token}-msScrollbarFaceColor)` | `var(--component-${Component}-${Token}-msScrollbarHighlightColor)` | `var(--component-${Component}-${Token}-msScrollbarShadowColor)` | `var(--component-${Component}-${Token}-msScrollbarTrackColor)` | `var(--component-${Component}-${Token}-msTextAutospace)` | `var(--component-${Component}-${Token}-msTextCombineHorizontal)` | `var(--component-${Component}-${Token}-msTextOverflow)` | `var(--component-${Component}-${Token}-msTouchAction)` | `var(--component-${Component}-${Token}-msTouchSelect)` | `var(--component-${Component}-${Token}-msTransform)` | `var(--component-${Component}-${Token}-msTransformOrigin)` | `var(--component-${Component}-${Token}-msTransitionDelay)` | `var(--component-${Component}-${Token}-msTransitionDuration)` | `var(--component-${Component}-${Token}-msTransitionProperty)` | `var(--component-${Component}-${Token}-msTransitionTimingFunction)` | `var(--component-${Component}-${Token}-msUserSelect)` | `var(--component-${Component}-${Token}-msWordBreak)` | `var(--component-${Component}-${Token}-msWrapFlow)` | `var(--component-${Component}-${Token}-msWrapMargin)` | `var(--component-${Component}-${Token}-msWrapThrough)` | `var(--component-${Component}-${Token}-msWritingMode)` | `var(--component-${Component}-${Token}-WebkitAlignContent)` | `var(--component-${Component}-${Token}-WebkitAlignItems)` | `var(--component-${Component}-${Token}-WebkitAlignSelf)` | `var(--component-${Component}-${Token}-WebkitAnimationDelay)` | `var(--component-${Component}-${Token}-WebkitAnimationDirection)` | `var(--component-${Component}-${Token}-WebkitAnimationDuration)` | `var(--component-${Component}-${Token}-WebkitAnimationFillMode)` | `var(--component-${Component}-${Token}-WebkitAnimationIterationCount)` | `var(--component-${Component}-${Token}-WebkitAnimationName)` | `var(--component-${Component}-${Token}-WebkitAnimationPlayState)` | `var(--component-${Component}-${Token}-WebkitAnimationTimingFunction)` | `var(--component-${Component}-${Token}-WebkitAppearance)` | `var(--component-${Component}-${Token}-WebkitBackdropFilter)` | `var(--component-${Component}-${Token}-WebkitBackfaceVisibility)` | `var(--component-${Component}-${Token}-WebkitBackgroundClip)` | `var(--component-${Component}-${Token}-WebkitBackgroundOrigin)` | `var(--component-${Component}-${Token}-WebkitBackgroundSize)` | `var(--component-${Component}-${Token}-WebkitBorderBeforeColor)` | `var(--component-${Component}-${Token}-WebkitBorderBeforeStyle)` | `var(--component-${Component}-${Token}-WebkitBorderBeforeWidth)` | `var(--component-${Component}-${Token}-WebkitBorderBottomLeftRadius)` | `var(--component-${Component}-${Token}-WebkitBorderBottomRightRadius)` | `var(--component-${Component}-${Token}-WebkitBorderImageSlice)` | `var(--component-${Component}-${Token}-WebkitBorderTopLeftRadius)` | `var(--component-${Component}-${Token}-WebkitBorderTopRightRadius)` | `var(--component-${Component}-${Token}-WebkitBoxDecorationBreak)` | `var(--component-${Component}-${Token}-WebkitBoxReflect)` | `var(--component-${Component}-${Token}-WebkitBoxShadow)` | `var(--component-${Component}-${Token}-WebkitBoxSizing)` | `var(--component-${Component}-${Token}-WebkitClipPath)` | `var(--component-${Component}-${Token}-WebkitColumnCount)` | `var(--component-${Component}-${Token}-WebkitColumnFill)` | `var(--component-${Component}-${Token}-WebkitColumnRuleColor)` | `var(--component-${Component}-${Token}-WebkitColumnRuleStyle)` | `var(--component-${Component}-${Token}-WebkitColumnRuleWidth)` | `var(--component-${Component}-${Token}-WebkitColumnSpan)` | `var(--component-${Component}-${Token}-WebkitColumnWidth)` | `var(--component-${Component}-${Token}-WebkitFilter)` | `var(--component-${Component}-${Token}-WebkitFlexBasis)` | `var(--component-${Component}-${Token}-WebkitFlexDirection)` | `var(--component-${Component}-${Token}-WebkitFlexGrow)` | `var(--component-${Component}-${Token}-WebkitFlexShrink)` | `var(--component-${Component}-${Token}-WebkitFlexWrap)` | `var(--component-${Component}-${Token}-WebkitFontFeatureSettings)` | `var(--component-${Component}-${Token}-WebkitFontKerning)` | `var(--component-${Component}-${Token}-WebkitFontSmoothing)` | `var(--component-${Component}-${Token}-WebkitFontVariantLigatures)` | `var(--component-${Component}-${Token}-WebkitHyphenateCharacter)` | `var(--component-${Component}-${Token}-WebkitHyphens)` | `var(--component-${Component}-${Token}-WebkitInitialLetter)` | `var(--component-${Component}-${Token}-WebkitJustifyContent)` | `var(--component-${Component}-${Token}-WebkitLineBreak)` | `var(--component-${Component}-${Token}-WebkitLineClamp)` | `var(--component-${Component}-${Token}-WebkitMarginEnd)` | `var(--component-${Component}-${Token}-WebkitMarginStart)` | `var(--component-${Component}-${Token}-WebkitMaskAttachment)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImageOutset)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImageRepeat)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImageSlice)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImageSource)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImageWidth)` | `var(--component-${Component}-${Token}-WebkitMaskClip)` | `var(--component-${Component}-${Token}-WebkitMaskComposite)` | `var(--component-${Component}-${Token}-WebkitMaskImage)` | `var(--component-${Component}-${Token}-WebkitMaskOrigin)` | `var(--component-${Component}-${Token}-WebkitMaskPosition)` | `var(--component-${Component}-${Token}-WebkitMaskPositionX)` | `var(--component-${Component}-${Token}-WebkitMaskPositionY)` | `var(--component-${Component}-${Token}-WebkitMaskRepeat)` | `var(--component-${Component}-${Token}-WebkitMaskRepeatX)` | `var(--component-${Component}-${Token}-WebkitMaskRepeatY)` | `var(--component-${Component}-${Token}-WebkitMaskSize)` | `var(--component-${Component}-${Token}-WebkitMaxInlineSize)` | `var(--component-${Component}-${Token}-WebkitOrder)` | `var(--component-${Component}-${Token}-WebkitOverflowScrolling)` | `var(--component-${Component}-${Token}-WebkitPaddingEnd)` | `var(--component-${Component}-${Token}-WebkitPaddingStart)` | `var(--component-${Component}-${Token}-WebkitPerspective)` | `var(--component-${Component}-${Token}-WebkitPerspectiveOrigin)` | `var(--component-${Component}-${Token}-WebkitPrintColorAdjust)` | `var(--component-${Component}-${Token}-WebkitRubyPosition)` | `var(--component-${Component}-${Token}-WebkitScrollSnapType)` | `var(--component-${Component}-${Token}-WebkitShapeMargin)` | `var(--component-${Component}-${Token}-WebkitTapHighlightColor)` | `var(--component-${Component}-${Token}-WebkitTextCombine)` | `var(--component-${Component}-${Token}-WebkitTextDecorationColor)` | `var(--component-${Component}-${Token}-WebkitTextDecorationLine)` | `var(--component-${Component}-${Token}-WebkitTextDecorationSkip)` | `var(--component-${Component}-${Token}-WebkitTextDecorationStyle)` | `var(--component-${Component}-${Token}-WebkitTextEmphasisColor)` | `var(--component-${Component}-${Token}-WebkitTextEmphasisPosition)` | `var(--component-${Component}-${Token}-WebkitTextEmphasisStyle)` | `var(--component-${Component}-${Token}-WebkitTextFillColor)` | `var(--component-${Component}-${Token}-WebkitTextOrientation)` | `var(--component-${Component}-${Token}-WebkitTextSizeAdjust)` | `var(--component-${Component}-${Token}-WebkitTextStrokeColor)` | `var(--component-${Component}-${Token}-WebkitTextStrokeWidth)` | `var(--component-${Component}-${Token}-WebkitTextUnderlinePosition)` | `var(--component-${Component}-${Token}-WebkitTouchCallout)` | `var(--component-${Component}-${Token}-WebkitTransform)` | `var(--component-${Component}-${Token}-WebkitTransformOrigin)` | `var(--component-${Component}-${Token}-WebkitTransformStyle)` | `var(--component-${Component}-${Token}-WebkitTransitionDelay)` | `var(--component-${Component}-${Token}-WebkitTransitionDuration)` | `var(--component-${Component}-${Token}-WebkitTransitionProperty)` | `var(--component-${Component}-${Token}-WebkitTransitionTimingFunction)` | `var(--component-${Component}-${Token}-WebkitUserModify)` | `var(--component-${Component}-${Token}-WebkitUserSelect)` | `var(--component-${Component}-${Token}-WebkitWritingMode)` | `var(--component-${Component}-${Token}-MozAnimation)` | `var(--component-${Component}-${Token}-MozBorderImage)` | `var(--component-${Component}-${Token}-MozColumnRule)` | `var(--component-${Component}-${Token}-MozColumns)` | `var(--component-${Component}-${Token}-MozTransition)` | `var(--component-${Component}-${Token}-msContentZoomLimit)` | `var(--component-${Component}-${Token}-msContentZoomSnap)` | `var(--component-${Component}-${Token}-msFlex)` | `var(--component-${Component}-${Token}-msScrollLimit)` | `var(--component-${Component}-${Token}-msScrollSnapX)` | `var(--component-${Component}-${Token}-msScrollSnapY)` | `var(--component-${Component}-${Token}-msTransition)` | `var(--component-${Component}-${Token}-WebkitAnimation)` | `var(--component-${Component}-${Token}-WebkitBorderBefore)` | `var(--component-${Component}-${Token}-WebkitBorderImage)` | `var(--component-${Component}-${Token}-WebkitBorderRadius)` | `var(--component-${Component}-${Token}-WebkitColumnRule)` | `var(--component-${Component}-${Token}-WebkitColumns)` | `var(--component-${Component}-${Token}-WebkitFlex)` | `var(--component-${Component}-${Token}-WebkitFlexFlow)` | `var(--component-${Component}-${Token}-WebkitMask)` | `var(--component-${Component}-${Token}-WebkitMaskBoxImage)` | `var(--component-${Component}-${Token}-WebkitTextEmphasis)` | `var(--component-${Component}-${Token}-WebkitTextStroke)` | `var(--component-${Component}-${Token}-WebkitTransition)` | `var(--component-${Component}-${Token}-azimuth)` | `var(--component-${Component}-${Token}-boxAlign)` | `var(--component-${Component}-${Token}-boxDirection)` | `var(--component-${Component}-${Token}-boxFlex)` | `var(--component-${Component}-${Token}-boxFlexGroup)` | `var(--component-${Component}-${Token}-boxLines)` | `var(--component-${Component}-${Token}-boxOrdinalGroup)` | `var(--component-${Component}-${Token}-boxOrient)` | `var(--component-${Component}-${Token}-boxPack)` | `var(--component-${Component}-${Token}-clip)` | `var(--component-${Component}-${Token}-gridColumnGap)` | `var(--component-${Component}-${Token}-gridGap)` | `var(--component-${Component}-${Token}-gridRowGap)` | `var(--component-${Component}-${Token}-imeMode)` | `var(--component-${Component}-${Token}-offsetBlock)` | `var(--component-${Component}-${Token}-offsetBlockEnd)` | `var(--component-${Component}-${Token}-offsetBlockStart)` | `var(--component-${Component}-${Token}-offsetInline)` | `var(--component-${Component}-${Token}-offsetInlineEnd)` | `var(--component-${Component}-${Token}-offsetInlineStart)` | `var(--component-${Component}-${Token}-scrollSnapCoordinate)` | `var(--component-${Component}-${Token}-scrollSnapDestination)` | `var(--component-${Component}-${Token}-scrollSnapPointsX)` | `var(--component-${Component}-${Token}-scrollSnapPointsY)` | `var(--component-${Component}-${Token}-scrollSnapTypeX)` | `var(--component-${Component}-${Token}-scrollSnapTypeY)` | `var(--component-${Component}-${Token}-KhtmlBoxAlign)` | `var(--component-${Component}-${Token}-KhtmlBoxDirection)` | `var(--component-${Component}-${Token}-KhtmlBoxFlex)` | `var(--component-${Component}-${Token}-KhtmlBoxFlexGroup)` | `var(--component-${Component}-${Token}-KhtmlBoxLines)` | `var(--component-${Component}-${Token}-KhtmlBoxOrdinalGroup)` | `var(--component-${Component}-${Token}-KhtmlBoxOrient)` | `var(--component-${Component}-${Token}-KhtmlBoxPack)` | `var(--component-${Component}-${Token}-KhtmlLineBreak)` | `var(--component-${Component}-${Token}-KhtmlOpacity)` | `var(--component-${Component}-${Token}-KhtmlUserSelect)` | `var(--component-${Component}-${Token}-MozBackgroundClip)` | `var(--component-${Component}-${Token}-MozBackgroundInlinePolicy)` | `var(--component-${Component}-${Token}-MozBackgroundOrigin)` | `var(--component-${Component}-${Token}-MozBackgroundSize)` | `var(--component-${Component}-${Token}-MozBorderRadius)` | `var(--component-${Component}-${Token}-MozBorderRadiusBottomleft)` | `var(--component-${Component}-${Token}-MozBorderRadiusBottomright)` | `var(--component-${Component}-${Token}-MozBorderRadiusTopleft)` | `var(--component-${Component}-${Token}-MozBorderRadiusTopright)` | `var(--component-${Component}-${Token}-MozBoxAlign)` | `var(--component-${Component}-${Token}-MozBoxDirection)` | `var(--component-${Component}-${Token}-MozBoxFlex)` | `var(--component-${Component}-${Token}-MozBoxOrdinalGroup)` | `var(--component-${Component}-${Token}-MozBoxOrient)` | `var(--component-${Component}-${Token}-MozBoxPack)` | `var(--component-${Component}-${Token}-MozBoxShadow)` | `var(--component-${Component}-${Token}-MozFloatEdge)` | `var(--component-${Component}-${Token}-MozForceBrokenImageIcon)` | `var(--component-${Component}-${Token}-MozOpacity)` | `var(--component-${Component}-${Token}-MozOutline)` | `var(--component-${Component}-${Token}-MozOutlineColor)` | `var(--component-${Component}-${Token}-MozOutlineRadius)` | `var(--component-${Component}-${Token}-MozOutlineRadiusBottomleft)` | `var(--component-${Component}-${Token}-MozOutlineRadiusBottomright)` | `var(--component-${Component}-${Token}-MozOutlineRadiusTopleft)` | `var(--component-${Component}-${Token}-MozOutlineRadiusTopright)` | `var(--component-${Component}-${Token}-MozOutlineStyle)` | `var(--component-${Component}-${Token}-MozOutlineWidth)` | `var(--component-${Component}-${Token}-MozTextAlignLast)` | `var(--component-${Component}-${Token}-MozTextDecorationColor)` | `var(--component-${Component}-${Token}-MozTextDecorationLine)` | `var(--component-${Component}-${Token}-MozTextDecorationStyle)` | `var(--component-${Component}-${Token}-MozUserInput)` | `var(--component-${Component}-${Token}-msImeMode)` | `var(--component-${Component}-${Token}-OAnimation)` | `var(--component-${Component}-${Token}-OAnimationDelay)` | `var(--component-${Component}-${Token}-OAnimationDirection)` | `var(--component-${Component}-${Token}-OAnimationDuration)` | `var(--component-${Component}-${Token}-OAnimationFillMode)` | `var(--component-${Component}-${Token}-OAnimationIterationCount)` | `var(--component-${Component}-${Token}-OAnimationName)` | `var(--component-${Component}-${Token}-OAnimationPlayState)` | `var(--component-${Component}-${Token}-OAnimationTimingFunction)` | `var(--component-${Component}-${Token}-OBackgroundSize)` | `var(--component-${Component}-${Token}-OBorderImage)` | `var(--component-${Component}-${Token}-OObjectFit)` | `var(--component-${Component}-${Token}-OObjectPosition)` | `var(--component-${Component}-${Token}-OTabSize)` | `var(--component-${Component}-${Token}-OTextOverflow)` | `var(--component-${Component}-${Token}-OTransform)` | `var(--component-${Component}-${Token}-OTransformOrigin)` | `var(--component-${Component}-${Token}-OTransition)` | `var(--component-${Component}-${Token}-OTransitionDelay)` | `var(--component-${Component}-${Token}-OTransitionDuration)` | `var(--component-${Component}-${Token}-OTransitionProperty)` | `var(--component-${Component}-${Token}-OTransitionTimingFunction)` | `var(--component-${Component}-${Token}-WebkitBoxAlign)` | `var(--component-${Component}-${Token}-WebkitBoxDirection)` | `var(--component-${Component}-${Token}-WebkitBoxFlex)` | `var(--component-${Component}-${Token}-WebkitBoxFlexGroup)` | `var(--component-${Component}-${Token}-WebkitBoxLines)` | `var(--component-${Component}-${Token}-WebkitBoxOrdinalGroup)` | `var(--component-${Component}-${Token}-WebkitBoxOrient)` | `var(--component-${Component}-${Token}-WebkitBoxPack)` | `var(--component-${Component}-${Token}-WebkitScrollSnapPointsX)` | `var(--component-${Component}-${Token}-WebkitScrollSnapPointsY)` | `var(--component-${Component}-${Token}-alignmentBaseline)` | `var(--component-${Component}-${Token}-baselineShift)` | `var(--component-${Component}-${Token}-clipRule)` | `var(--component-${Component}-${Token}-colorInterpolation)` | `var(--component-${Component}-${Token}-colorRendering)` | `var(--component-${Component}-${Token}-dominantBaseline)` | `var(--component-${Component}-${Token}-fill)` | `var(--component-${Component}-${Token}-fillOpacity)` | `var(--component-${Component}-${Token}-fillRule)` | `var(--component-${Component}-${Token}-floodColor)` | `var(--component-${Component}-${Token}-floodOpacity)` | `var(--component-${Component}-${Token}-glyphOrientationVertical)` | `var(--component-${Component}-${Token}-lightingColor)` | `var(--component-${Component}-${Token}-marker)` | `var(--component-${Component}-${Token}-markerEnd)` | `var(--component-${Component}-${Token}-markerMid)` | `var(--component-${Component}-${Token}-markerStart)` | `var(--component-${Component}-${Token}-shapeRendering)` | `var(--component-${Component}-${Token}-stopColor)` | `var(--component-${Component}-${Token}-stopOpacity)` | `var(--component-${Component}-${Token}-stroke)` | `var(--component-${Component}-${Token}-strokeDasharray)` | `var(--component-${Component}-${Token}-strokeDashoffset)` | `var(--component-${Component}-${Token}-strokeLinecap)` | `var(--component-${Component}-${Token}-strokeLinejoin)` | `var(--component-${Component}-${Token}-strokeMiterlimit)` | `var(--component-${Component}-${Token}-strokeOpacity)` | `var(--component-${Component}-${Token}-strokeWidth)` | `var(--component-${Component}-${Token}-textAnchor)` | `var(--component-${Component}-${Token}-vectorEffect)`;
-};
+export declare const componentTokenToCSSProperties: <Component extends ComponentNames, Token extends ComponentTokenNames<Component>>(component: Component, token: Token, tokenObject: CSSProperties) => Record<string, string>;
 /**
  * Generate the full object og componentToken rules for the Tailwind plugin.
  */