/* eslint-disable */ import type { ConditionalValue } from './conditions'; import type { CssProperties } from './system-types'; import type { Tokens } from '../tokens/index'; export interface UtilityValues { zIndex: Tokens["zIndex"]; top: Tokens["spacing"]; left: Tokens["spacing"]; inset: "auto" | Tokens["spacing"]; insetInline: Tokens["spacing"]; insetBlock: Tokens["spacing"]; insetBlockEnd: Tokens["spacing"]; insetBlockStart: Tokens["spacing"]; insetInlineEnd: Tokens["spacing"]; insetInlineStart: Tokens["spacing"]; right: Tokens["spacing"]; bottom: Tokens["spacing"]; float: "start" | "end"; hideFrom: Tokens["breakpoints"]; hideBelow: Tokens["breakpoints"]; flexBasis: 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" | "full"; flex: "1" | "auto" | "initial" | "none"; 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: "auto" | Tokens["spacing"]; marginRight: "auto" | Tokens["spacing"]; marginTop: "auto" | Tokens["spacing"]; marginBottom: "auto" | Tokens["spacing"]; margin: "auto" | Tokens["spacing"]; marginBlock: "auto" | Tokens["spacing"]; marginBlockEnd: "auto" | Tokens["spacing"]; marginBlockStart: "auto" | Tokens["spacing"]; marginInline: "auto" | Tokens["spacing"]; marginInlineEnd: "auto" | Tokens["spacing"]; marginInlineStart: "auto" | Tokens["spacing"]; spaceX: "auto" | Tokens["spacing"]; spaceY: "auto" | Tokens["spacing"]; outlineColor: Tokens["colors"]; outlineOffset: Tokens["spacing"]; focusRing: "outside" | "inside" | "mixed" | "none"; focusVisibleRing: "outside" | "inside" | "mixed" | "none"; focusRingColor: Tokens["colors"]; focusRingOffset: Tokens["spacing"]; divideColor: Tokens["colors"]; width: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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: "auto" | 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"; boxSize: "auto" | 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"; color: Tokens["colors"]; fontFamily: Tokens["fonts"]; fontSize: Tokens["fontSizes"]; fontWeight: Tokens["fontWeights"]; fontSmoothing: "antialiased" | "subpixel-antialiased"; textDecorationColor: Tokens["colors"]; textEmphasisColor: Tokens["colors"]; textIndent: Tokens["spacing"]; textShadowColor: Tokens["colors"]; textWrap: "wrap" | "balance" | "nowrap"; truncate: boolean; background: Tokens["colors"]; backgroundColor: Tokens["colors"]; backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl"; backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl"; textGradient: "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"]; borderRightRadius: Tokens["radii"]; borderBottomRadius: Tokens["radii"]; borderLeftRadius: Tokens["radii"]; borderStartStartRadius: Tokens["radii"]; borderStartEndRadius: Tokens["radii"]; borderStartRadius: Tokens["radii"]; borderEndStartRadius: Tokens["radii"]; borderEndEndRadius: Tokens["radii"]; borderEndRadius: Tokens["radii"]; borderColor: Tokens["colors"]; borderInlineColor: Tokens["colors"]; borderBlockColor: Tokens["colors"]; borderLeftColor: Tokens["colors"]; borderInlineStartColor: Tokens["colors"]; borderRightColor: Tokens["colors"]; borderInlineEndColor: Tokens["colors"]; borderTopColor: Tokens["colors"]; borderBottomColor: Tokens["colors"]; borderBlockEndColor: Tokens["colors"]; borderBlockStartColor: Tokens["colors"]; boxShadowColor: Tokens["colors"]; filter: "auto"; backdropFilter: "auto"; borderSpacing: Tokens["spacing"] | "auto"; borderSpacingX: Tokens["spacing"]; borderSpacingY: Tokens["spacing"]; transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform"; animationName: "fadeIn" | "fadeOut" | "slideInLeft" | "slideInRight" | "slideInTop" | "slideInBottom" | "spin"; rotate: "auto" | "auto-3d"; scale: "auto"; translate: "auto" | "auto-3d"; translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-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" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full"; translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full"; accentColor: Tokens["colors"]; caretColor: Tokens["colors"]; scrollbar: "visible" | "hidden"; scrollbarColor: Tokens["colors"]; scrollbarWidth: Tokens["sizes"]; scrollMargin: Tokens["spacing"]; 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"]; 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: "extra-dark-teal" | "dark-teal" | "cream" | "info-blue" | "error-red" | "success-green" | "warning-orange" | "teal" | "pink" | "purple" | "green" | "gray" | "white" | "black" | "transparent" | "R1" | "R2" | "R3" | "R4" | "R5" | "R6" | "R7" | "R8" | "R9" | "R10" | "O1" | "O2" | "O3" | "O4" | "O5" | "O6" | "O7" | "O8" | "O9" | "O10" | "G1" | "G2" | "G3" | "G4" | "G5" | "G6" | "G7" | "G8" | "G9" | "G10" | "T1" | "T2" | "T3" | "T4" | "T5" | "T6" | "T7" | "T8" | "T9" | "T10" | "A1" | "A2" | "A3" | "A4" | "A5" | "A6" | "A7" | "A8" | "A9" | "A10" | "B1" | "B2" | "B3" | "B4" | "B5" | "B6" | "B7" | "B8" | "B9" | "B10" | "P1" | "P2" | "P3" | "P4" | "P5" | "P6" | "P7" | "P8" | "P9" | "P10" | "M1" | "M2" | "M3" | "M4" | "M5" | "M6" | "M7" | "M8" | "M9" | "M10" | "N1" | "N2" | "N3" | "N4" | "N5" | "N6" | "N7" | "N8" | "N9" | "N10" | "background" | "background.opacity-100" | "background.opacity-10" | "background.opacity-4" | "background.opacity-20" | "background.opacity-30" | "background.opacity-40" | "background.opacity-50" | "background.opacity-60" | "background.opacity-70" | "background.opacity-80" | "background.opacity-90" | "text" | "text.primary" | "text.secondary" | "elements" | "elements.primary" | "elements.primary.hovered" | "elements.secondary" | "elements.secondary.hovered" | "elements.tertiary" | "elements.tertiary.hovered" | "elements.error" | "elements.error.hovered" | "elements.warning" | "elements.warning.hovered" | "elements.confirmation" | "elements.confirmation.hovered" | "elements.information" | "elements.information.hovered" | "elements.overrides" | "elements.overrides.form" | "elements.overrides.form.checkbox" | "elements.overrides.form.checkbox.hovered" | "elements.overrides.form.checkbox.error" | "elements.overrides.form.checkbox.checked" | "elements.overrides.form.checkbox.disabled" | "elements.overrides.form.input" | "elements.overrides.form.input.disabled" | "elements.overrides.form.input.error" | "elements.overrides.form.input.hovered" | "elements.overrides.form.radio" | "elements.overrides.form.radio.hovered" | "elements.overrides.form.radio.error" | "elements.overrides.form.radio.disabled" | "elements.overrides.form.radio.checked" | "elements.overrides.form.switch" | "elements.overrides.form.switch.hovered" | "elements.overrides.form.switch.checked" | "elements.overrides.form.switch.error" | "elements.overrides.form.switch.disabled" | "elements.overrides.form.slider" | "elements.overrides.form.slider.hover" | "elements.overrides.button" | "elements.overrides.button.text" | "elements.overrides.button.text.hovered" | "elements.disabled" | "elements.disabled.hovered" | "elements.default" | "elements.default.hovered" | "elements.faded" | "elements.faded.hovered" | "elements.reversed" | "elements.reversed.hovered" | "elements.overlay" | "links" | "links.hovered" | "stroke" | "stroke.opacity-10" | "stroke.opacity-100" | "stroke.disabled" | "stroke.opacity-4" | "stroke.opacity-20" | "stroke.opacity-30" | "stroke.opacity-40" | "stroke.opacity-50" | "stroke.opacity-60" | "stroke.opacity-70" | "stroke.opacity-80" | "stroke.opacity-90" | "icon" | "charting" | "charting.categorical" | "charting.categorical.dark" | "charting.categorical.light" | "accent" | "alert" | "background.opacity-55"; textStyle: "inherit"; layerStyle: "controlTransparent"; } type WithColorOpacityModifier = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never type ImportantMark = "!" | "!important" type WhitespaceImportant = ` ${ImportantMark}` type Important = ImportantMark | WhitespaceImportant type WithImportant = [T] extends [string] ? `${T}${Important}` & { __important?: true } : never /** * Only relevant when using `strictTokens` or `strictPropertyValues` in your config. * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value. * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values. * - Allows you to use an important mark (e.g. `!` or `!important`) in the value. * * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults. * * @example * css({ * fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token * }) * * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues */ export type WithEscapeHatch = T | `[${string}]` | WithColorOpacityModifier | WithImportant /** * Will restrict the value of properties that have predefined values to those values only. * * @example * css({ * display: 'abc', // ❌ will throw * }) * * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues */ export type OnlyKnown = Value extends boolean ? Value : Value extends `${infer _}` ? Value : never