import type { ConditionalValue } from './conditions'; import type { CssProperties } from './system-types' import type { Tokens } from '../tokens' type PropertyValueTypes = { aspectRatio: "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"; top: Tokens["spacing"]; left: Tokens["spacing"]; insetInline: Tokens["spacing"]; insetBlock: Tokens["spacing"]; inset: Tokens["spacing"]; insetBlockEnd: Tokens["spacing"]; insetBlockStart: Tokens["spacing"]; insetInlineEnd: Tokens["spacing"]; insetInlineStart: Tokens["spacing"]; right: Tokens["spacing"]; bottom: Tokens["spacing"]; insetX: Tokens["spacing"] | CssProperties["insetInline"]; insetY: Tokens["spacing"] | CssProperties["insetBlock"]; float: "left" | "right" | "start" | "end"; hideFrom: Tokens["breakpoints"]; hideBelow: Tokens["breakpoints"]; flexBasis: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full"; flex: "1" | "auto" | "initial" | "none"; gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12"; gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12"; gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full"; gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full"; gridAutoColumns: "min" | "max" | "fr"; gridAutoRows: "min" | "max" | "fr"; gap: Tokens["spacing"]; gridGap: Tokens["spacing"]; gridRowGap: Tokens["spacing"]; gridColumnGap: Tokens["spacing"]; rowGap: Tokens["spacing"]; columnGap: Tokens["spacing"]; padding: Tokens["spacing"]; paddingLeft: Tokens["spacing"]; paddingRight: Tokens["spacing"]; paddingTop: Tokens["spacing"]; paddingBottom: Tokens["spacing"]; paddingBlock: Tokens["spacing"]; paddingBlockEnd: Tokens["spacing"]; paddingBlockStart: Tokens["spacing"]; paddingInline: Tokens["spacing"]; paddingInlineEnd: Tokens["spacing"]; paddingInlineStart: Tokens["spacing"]; marginLeft: Tokens["spacing"]; marginRight: Tokens["spacing"]; marginTop: Tokens["spacing"]; marginBottom: Tokens["spacing"]; margin: Tokens["spacing"]; marginBlock: Tokens["spacing"]; marginBlockEnd: Tokens["spacing"]; marginBlockStart: Tokens["spacing"]; marginInline: Tokens["spacing"]; marginInlineEnd: Tokens["spacing"]; marginInlineStart: Tokens["spacing"]; outlineColor: Tokens["colors"]; outline: Tokens["borders"]; outlineOffset: Tokens["spacing"]; divideX: string; divideY: string; divideColor: Tokens["colors"]; divideStyle: CssProperties["borderStyle"]; width: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; inlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; minWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; minInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; maxWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; maxInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen"; height: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; blockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; minHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; minBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; maxHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; maxBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6"; color: Tokens["colors"]; fontFamily: Tokens["fonts"]; fontSize: Tokens["fontSizes"]; fontWeight: Tokens["fontWeights"]; fontSmoothing: "antialiased" | "subpixel-antialiased"; letterSpacing: Tokens["letterSpacings"]; lineHeight: Tokens["lineHeights"]; textDecorationColor: Tokens["colors"]; textEmphasisColor: Tokens["colors"]; textIndent: Tokens["spacing"]; textShadow: Tokens["shadows"]; textWrap: "wrap" | "balance" | "nowrap"; truncate: boolean; listStyleImage: Tokens["assets"]; background: Tokens["colors"]; backgroundColor: Tokens["colors"]; backgroundImage: Tokens["assets"]; backgroundGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl"; textGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl"; gradientFrom: Tokens["colors"]; gradientTo: Tokens["colors"]; gradientVia: Tokens["colors"]; borderRadius: Tokens["radii"]; borderTopLeftRadius: Tokens["radii"]; borderTopRightRadius: Tokens["radii"]; borderBottomRightRadius: Tokens["radii"]; borderBottomLeftRadius: Tokens["radii"]; borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"]; borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"]; borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"]; borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"]; borderStartStartRadius: Tokens["radii"]; borderStartEndRadius: Tokens["radii"]; borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"]; borderEndStartRadius: Tokens["radii"]; borderEndEndRadius: Tokens["radii"]; borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"]; border: Tokens["borders"]; borderColor: Tokens["colors"]; borderInline: Tokens["borders"]; borderInlineWidth: Tokens["borderWidths"]; borderInlineColor: Tokens["colors"]; borderBlock: Tokens["borders"]; borderBlockWidth: Tokens["borderWidths"]; borderBlockColor: Tokens["colors"]; borderLeft: Tokens["borders"]; borderLeftColor: Tokens["colors"]; borderInlineStart: Tokens["borders"]; borderInlineStartColor: Tokens["colors"]; borderRight: Tokens["borders"]; borderRightColor: Tokens["colors"]; borderInlineEnd: Tokens["borders"]; borderInlineEndColor: Tokens["colors"]; borderTop: Tokens["borders"]; borderTopColor: Tokens["colors"]; borderBottom: Tokens["borders"]; borderBottomColor: Tokens["colors"]; borderBlockEnd: Tokens["borders"]; borderBlockEndColor: Tokens["colors"]; borderBlockStart: Tokens["borders"]; borderBlockStartColor: Tokens["colors"]; boxShadow: Tokens["shadows"]; boxShadowColor: Tokens["colors"]; filter: "auto"; dropShadow: Tokens["dropShadows"]; blur: Tokens["blurs"]; backdropFilter: "auto"; backdropBlur: Tokens["blurs"]; borderSpacing: Tokens["spacing"]; borderSpacingX: Tokens["spacing"]; borderSpacingY: Tokens["spacing"]; transitionTimingFunction: Tokens["easings"]; transitionDelay: Tokens["durations"]; transitionDuration: Tokens["durations"]; transitionProperty: "all" | "none" | "opacity" | "shadow" | "transform" | "base" | "background" | "colors"; animation: Tokens["animations"]; animationDelay: Tokens["durations"]; scale: "auto" | CssProperties["scale"]; translate: "auto" | CssProperties["translate"]; translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full"; translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full"; accentColor: Tokens["colors"]; caretColor: Tokens["colors"]; scrollbar: "visible" | "hidden"; scrollMargin: Tokens["spacing"]; scrollMarginX: Tokens["spacing"] | CssProperties["scrollMarginInline"]; scrollMarginY: Tokens["spacing"] | CssProperties["scrollMarginBlock"]; scrollMarginLeft: Tokens["spacing"]; scrollMarginRight: Tokens["spacing"]; scrollMarginTop: Tokens["spacing"]; scrollMarginBottom: Tokens["spacing"]; scrollMarginBlock: Tokens["spacing"]; scrollMarginBlockEnd: Tokens["spacing"]; scrollMarginBlockStart: Tokens["spacing"]; scrollMarginInline: Tokens["spacing"]; scrollMarginInlineEnd: Tokens["spacing"]; scrollMarginInlineStart: Tokens["spacing"]; scrollPadding: Tokens["spacing"]; scrollPaddingBlock: Tokens["spacing"]; scrollPaddingBlockStart: Tokens["spacing"]; scrollPaddingBlockEnd: Tokens["spacing"]; scrollPaddingInline: Tokens["spacing"]; scrollPaddingInlineEnd: Tokens["spacing"]; scrollPaddingInlineStart: Tokens["spacing"]; scrollPaddingX: Tokens["spacing"] | CssProperties["scrollPaddingInline"]; scrollPaddingY: Tokens["spacing"] | CssProperties["scrollPaddingBlock"]; scrollPaddingLeft: Tokens["spacing"]; scrollPaddingRight: Tokens["spacing"]; scrollPaddingTop: Tokens["spacing"]; scrollPaddingBottom: Tokens["spacing"]; scrollSnapType: "none" | "x" | "y" | "both"; scrollSnapStrictness: "mandatory" | "proximity"; scrollSnapMargin: Tokens["spacing"]; scrollSnapMarginTop: Tokens["spacing"]; scrollSnapMarginBottom: Tokens["spacing"]; scrollSnapMarginLeft: Tokens["spacing"]; scrollSnapMarginRight: Tokens["spacing"]; fill: Tokens["colors"]; stroke: Tokens["colors"]; srOnly: boolean; debug: boolean; colorPalette: "rose" | "pink" | "fuchsia" | "purple" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "gray" | "slate"; textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"; } type CssValue = T extends keyof CssProperties ? CssProperties[T] : never type Shorthand = T extends keyof PropertyValueTypes ? PropertyValueTypes[T] | CssValue : CssValue export type PropertyTypes = PropertyValueTypes & { pos: Shorthand<"position">; insetEnd: Shorthand<"insetInlineEnd">; end: Shorthand<"insetInlineEnd">; insetStart: Shorthand<"insetInlineStart">; start: Shorthand<"insetInlineStart">; flexDir: Shorthand<"flexDirection">; p: Shorthand<"padding">; pl: Shorthand<"paddingLeft">; pr: Shorthand<"paddingRight">; pt: Shorthand<"paddingTop">; pb: Shorthand<"paddingBottom">; py: Shorthand<"paddingBlock">; paddingY: Shorthand<"paddingBlock">; paddingX: Shorthand<"paddingInline">; px: Shorthand<"paddingInline">; pe: Shorthand<"paddingInlineEnd">; paddingEnd: Shorthand<"paddingInlineEnd">; ps: Shorthand<"paddingInlineStart">; paddingStart: Shorthand<"paddingInlineStart">; ml: Shorthand<"marginLeft">; mr: Shorthand<"marginRight">; mt: Shorthand<"marginTop">; mb: Shorthand<"marginBottom">; m: Shorthand<"margin">; my: Shorthand<"marginBlock">; marginY: Shorthand<"marginBlock">; mx: Shorthand<"marginInline">; marginX: Shorthand<"marginInline">; me: Shorthand<"marginInlineEnd">; marginEnd: Shorthand<"marginInlineEnd">; ms: Shorthand<"marginInlineStart">; marginStart: Shorthand<"marginInlineStart">; ringWidth: Shorthand<"outlineWidth">; ringColor: Shorthand<"outlineColor">; ring: Shorthand<"outline">; ringOffset: Shorthand<"outlineOffset">; w: Shorthand<"width">; minW: Shorthand<"minWidth">; maxW: Shorthand<"maxWidth">; h: Shorthand<"height">; minH: Shorthand<"minHeight">; maxH: Shorthand<"maxHeight">; bgPosition: Shorthand<"backgroundPosition">; bgPositionX: Shorthand<"backgroundPositionX">; bgPositionY: Shorthand<"backgroundPositionY">; bgAttachment: Shorthand<"backgroundAttachment">; bgClip: Shorthand<"backgroundClip">; bg: Shorthand<"background">; bgColor: Shorthand<"backgroundColor">; bgOrigin: Shorthand<"backgroundOrigin">; bgImage: Shorthand<"backgroundImage">; bgRepeat: Shorthand<"backgroundRepeat">; bgBlendMode: Shorthand<"backgroundBlendMode">; bgSize: Shorthand<"backgroundSize">; bgGradient: Shorthand<"backgroundGradient">; rounded: Shorthand<"borderRadius">; roundedTopLeft: Shorthand<"borderTopLeftRadius">; roundedTopRight: Shorthand<"borderTopRightRadius">; roundedBottomRight: Shorthand<"borderBottomRightRadius">; roundedBottomLeft: Shorthand<"borderBottomLeftRadius">; roundedTop: Shorthand<"borderTopRadius">; roundedRight: Shorthand<"borderRightRadius">; roundedBottom: Shorthand<"borderBottomRadius">; roundedLeft: Shorthand<"borderLeftRadius">; roundedStartStart: Shorthand<"borderStartStartRadius">; roundedStartEnd: Shorthand<"borderStartEndRadius">; roundedStart: Shorthand<"borderStartRadius">; roundedEndStart: Shorthand<"borderEndStartRadius">; roundedEndEnd: Shorthand<"borderEndEndRadius">; roundedEnd: Shorthand<"borderEndRadius">; borderX: Shorthand<"borderInline">; borderXWidth: Shorthand<"borderInlineWidth">; borderXColor: Shorthand<"borderInlineColor">; borderY: Shorthand<"borderBlock">; borderYWidth: Shorthand<"borderBlockWidth">; borderYColor: Shorthand<"borderBlockColor">; borderStart: Shorthand<"borderInlineStart">; borderStartColor: Shorthand<"borderInlineStartColor">; borderEnd: Shorthand<"borderInlineEnd">; borderEndColor: Shorthand<"borderInlineEndColor">; shadow: Shorthand<"boxShadow">; shadowColor: Shorthand<"boxShadowColor">; x: Shorthand<"translateX">; y: Shorthand<"translateY">; } export type PropertyValue = T extends keyof PropertyTypes ? ConditionalValue> : T extends keyof CssProperties ? ConditionalValue : ConditionalValue