@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/dist/css.d.ts

@@ -0,0 +1,943 @@
+import {AvatarPosition} from '@sanity/ui'
+import {AvatarSize} from '@sanity/ui/theme'
+import {ButtonMode} from '@sanity/ui'
+import {ButtonTone} from '@sanity/ui'
+import {ContainerWidth} from '@sanity/ui/theme'
+import * as CSS_2 from 'csstype'
+import {FontCodeSize} from '@sanity/ui/theme'
+import {FontHeadingSize} from '@sanity/ui/theme'
+import {FontLabelSize} from '@sanity/ui/theme'
+import {FontStyleProps as FontStyleProps_2} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
+import {FontWeight} from '@sanity/ui/theme'
+import {Radius} from '@sanity/ui/theme'
+import {RadiusStyleProps as RadiusStyleProps_2} from '@sanity/ui/css'
+import {RootTheme_v2} from '@sanity/ui/theme'
+import {SelectableTone} from '@sanity/ui'
+import {Shadow} from '@sanity/ui/theme'
+import {Space} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+import {ThemeColorInputModeKey} from '@sanity/ui/theme'
+import {ThemeColorInputStateKey} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ThemeColorStateKey} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {WidthStyleProps as WidthStyleProps_2} from '@sanity/ui/css'
+
+export declare function avatar(props: AvatarStyleProps): string
+
+export declare function avatarArrow(): string
+
+export declare function avatarBgStroke(): string
+
+export declare function avatarImage(): string
+
+export declare function avatarInitials(): string
+
+export declare function avatarStroke(): string
+
+export declare interface AvatarStyleProps {
+  color: ThemeColorAvatarColorKey
+  size: ResponsiveProp<AvatarSize>
+  arrowPosition?: AvatarPosition
+}
+
+/** @public */
+export declare function badge(props: BadgeStyleProps): string
+
+/** @public */
+export declare interface BadgeStyleProps extends RadiusStyleProps_2 {
+  tone: ThemeColorStateToneKey
+}
+
+/** @public */
+export declare interface BorderStyleProps {
+  border?: ResponsiveProp<boolean>
+  borderTop?: ResponsiveProp<boolean>
+  borderRight?: ResponsiveProp<boolean>
+  borderBottom?: ResponsiveProp<boolean>
+  borderLeft?: ResponsiveProp<boolean>
+}
+
+/** @public */
+export declare function box(props: BoxStyleProps): string
+
+/**
+ * @public
+ */
+export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export declare type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
+
+/**
+ * @public
+ */
+export declare type BoxSizing = 'content' | 'border'
+
+/** @public */
+export declare interface BoxStyleProps
+  extends FlexStyleProps,
+    FlexItemStyleProps,
+    GapStyleProps,
+    GridItemStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps,
+    PaddingStyleProps,
+    PointerEventsStyleProps,
+    PositionStyleProps,
+    WidthStyleProps {
+  display?: ResponsiveProp<BoxDisplay>
+  height?: ResponsiveProp<BoxHeight>
+  overflow?: ResponsiveProp<BoxOverflow>
+  sizing?: ResponsiveProp<BoxSizing>
+}
+
+export declare function breadcrumbs(): string
+
+export declare function button(props: ButtonStyleProps): string
+
+export declare function buttonLoadingBox(): string
+
+export declare interface ButtonStyleProps extends RadiusStyleProps, WidthStyleProps_2 {
+  mode?: ButtonMode
+  tone?: ButtonTone
+}
+
+export declare function card(props: CardStyleProps): string
+
+export declare type CardScopedVarName =
+  | `--color-accent-fg`
+  | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
+  | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-backdrop`
+  | `--color-badge-bg`
+  | `--color-badge-dot`
+  | `--color-badge-fg`
+  | `--color-badge-icon`
+  | `--color-badge-${ThemeColorStateToneKey}-bg`
+  | `--color-badge-${ThemeColorStateToneKey}-dot`
+  | `--color-badge-${ThemeColorStateToneKey}-fg`
+  | `--color-badge-${ThemeColorStateToneKey}-icon`
+  | `--color-bg`
+  | `--color-border`
+  | `--color-code-bg`
+  | `--color-code-fg`
+  | `--color-fg`
+  | `--color-focus-ring`
+  | `--color-icon`
+  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
+  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
+  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
+  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
+  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
+  | `--color-kbd-bg`
+  | `--color-kbd-border`
+  | `--color-kbd-fg`
+  | `--color-link-fg`
+  | `--color-muted-bg`
+  | `--color-muted-fg`
+  | `--color-shadow-outline`
+  | `--color-shadow-umbra`
+  | `--color-shadow-penumbra`
+  | `--color-shadow-ambient`
+  | `--color-skeleton-from`
+  | `--color-skeleton-to`
+  | `--color-syntax-atrule`
+  | `--color-syntax-attrName`
+  | `--color-syntax-attrValue`
+  | `--color-syntax-attribute`
+  | `--color-syntax-boolean`
+  | `--color-syntax-builtin`
+  | `--color-syntax-cdata`
+  | `--color-syntax-char`
+  | `--color-syntax-class`
+  | `--color-syntax-className`
+  | `--color-syntax-comment`
+  | `--color-syntax-constant`
+  | `--color-syntax-deleted`
+  | `--color-syntax-doctype`
+  | `--color-syntax-entity`
+  | `--color-syntax-function`
+  | `--color-syntax-hexcode`
+  | `--color-syntax-id`
+  | `--color-syntax-important`
+  | `--color-syntax-inserted`
+  | `--color-syntax-keyword`
+  | `--color-syntax-number`
+  | `--color-syntax-operator`
+  | `--color-syntax-prolog`
+  | `--color-syntax-property`
+  | `--color-syntax-pseudoClass`
+  | `--color-syntax-pseudoElement`
+  | `--color-syntax-punctuation`
+  | `--color-syntax-regex`
+  | `--color-syntax-selector`
+  | `--color-syntax-string`
+  | `--color-syntax-symbol`
+  | `--color-syntax-tag`
+  | `--color-syntax-unit`
+  | `--color-syntax-url`
+  | `--color-syntax-variable`
+  | `--card-accent-fg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
+  | `--card-backdrop-color`
+  | `--card-badge-${ThemeColorStateToneKey}-bg-color`
+  | `--card-badge-${ThemeColorStateToneKey}-dot-color`
+  | `--card-badge-${ThemeColorStateToneKey}-fg-color`
+  | `--card-badge-${ThemeColorStateToneKey}-icon-color`
+  | `--card-bg-color`
+  | `--card-border-color`
+  | `--card-code-bg-color`
+  | `--card-code-fg-color`
+  | `--card-fg-color`
+  | `--card-focus-ring-color`
+  | `--card-icon-color`
+  | `--card-kbd-bg-color`
+  | `--card-kbd-border-color`
+  | `--card-kbd-fg-color`
+  | `--card-link-fg-color`
+  | `--card-muted-bg-color`
+  | `--card-muted-fg-color`
+  | `--card-shadow-outline-color`
+  | `--card-shadow-umbra-color`
+  | `--card-shadow-penumbra-color`
+  | `--card-shadow-ambient-color`
+  | `--card-skeleton-from-color`
+  | `--card-skeleton-to-color`
+  | `--avatar-bg-color`
+  | `--avatar-fg-color`
+  | `--color-checkbox-bg`
+  | `--color-checkbox-fg`
+  | `--color-checkbox-border`
+  | `--font-ascender-height`
+  | `--font-cap-height`
+  | `--font-descender-height`
+  | `--font-family`
+  | `--font-icon-offset`
+  | `--font-icon-size`
+  | `--font-letter-spacing`
+  | `--font-line-height`
+  | `--font-size`
+  | `--font-weight-regular`
+  | `--font-weight-medium`
+  | `--font-weight-semibold`
+  | `--font-weight-bold`
+  | `--font-weight`
+  | `--fg-color`
+
+export declare interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
+  checkered?: boolean
+  shadow?: ResponsiveProp<number>
+}
+
+export declare function checkbox(): string
+
+export declare function checkboxInput(): string
+
+/** @public */
+export declare function code(props: CodeStyleProps): string
+
+/** @public */
+export declare type CodeSize = number
+
+/** @public */
+export declare interface CodeStyleProps extends FontStyleProps_2 {
+  size?: ResponsiveProp<CodeSize>
+}
+
+export declare interface ColorAvatarColorVarNames {
+  bg: CSSVarName
+  fg: CSSVarName
+}
+
+export declare interface ColorAvatarColorVars {
+  bg: CSSVar
+  fg: CSSVar
+}
+
+export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
+
+export declare interface ColorBadgeToneVarNames {
+  bg: CSSVarName
+  dot: CSSVarName
+  fg: CSSVarName
+  icon: CSSVarName
+}
+
+export declare interface ColorBadgeToneVars {
+  bg: CSSVar
+  dot: CSSVar
+  fg: CSSVar
+  icon: CSSVar
+}
+
+export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
+
+export declare interface ColorCardVarNames extends ColorStateVarNames {
+  backdrop: ThemeVarName
+  focusRing: ThemeVarName
+  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVarNames>>
+}
+
+export declare interface ColorCardVars extends ColorStateVars {
+  backdrop: CSSVar
+  focusRing: CSSVar
+  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVars>>
+}
+
+export declare type ColorInputModeVars = Record<ThemeColorInputStateKey, ColorInputStateVars>
+
+export declare interface ColorInputStateVarNames {
+  bg: CSSVarName
+  border: CSSVarName
+  fg: CSSVarName
+  muted: {
+    bg: CSSVarName
+  }
+  placeholder: CSSVarName
+}
+
+export declare interface ColorInputStateVars {
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  muted: {
+    bg: CSSVar
+  }
+  placeholder: CSSVar
+}
+
+export declare interface ColorInputStateVars {
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  muted: {
+    bg: CSSVar
+  }
+  placeholder: CSSVar
+}
+
+export declare type ColorInputVars = Record<ThemeColorInputModeKey, ColorInputModeVars>
+
+export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
+
+export declare type ColorSchemeVars = Record<ThemeColorCardToneKey, ColorCardVars>
+
+export declare interface ColorStateVarNames {
+  accent: {
+    fg: CSSVarName
+  }
+  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
+  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames>
+  bg: CSSVarName
+  border: CSSVarName
+  code: {
+    bg: CSSVarName
+    fg: CSSVarName
+  }
+  fg: CSSVarName
+  icon: CSSVarName
+  kbd: {
+    bg: CSSVarName
+    border: CSSVarName
+    fg: CSSVarName
+  }
+  link: {
+    fg: CSSVarName
+  }
+  muted: {
+    bg: CSSVarName
+    fg: CSSVarName
+  }
+  shadow: {
+    outline: CSSVarName
+    umbra: CSSVarName
+    penumbra: CSSVarName
+    ambient: CSSVarName
+  }
+  skeleton: {
+    from: CSSVarName
+    to: CSSVarName
+  }
+  syntax: {
+    atrule: CSSVarName
+    attrName: CSSVarName
+    attrValue: CSSVarName
+    attribute: CSSVarName
+    boolean: CSSVarName
+    builtin: CSSVarName
+    cdata: CSSVarName
+    char: CSSVarName
+    class: CSSVarName
+    className: CSSVarName
+    comment: CSSVarName
+    constant: CSSVarName
+    deleted: CSSVarName
+    doctype: CSSVarName
+    entity: CSSVarName
+    function: CSSVarName
+    hexcode: CSSVarName
+    id: CSSVarName
+    important: CSSVarName
+    inserted: CSSVarName
+    keyword: CSSVarName
+    number: CSSVarName
+    operator: CSSVarName
+    prolog: CSSVarName
+    property: CSSVarName
+    pseudoClass: CSSVarName
+    pseudoElement: CSSVarName
+    punctuation: CSSVarName
+    regex: CSSVarName
+    selector: CSSVarName
+    string: CSSVarName
+    symbol: CSSVarName
+    tag: CSSVarName
+    unit: CSSVarName
+    url: CSSVarName
+    variable: CSSVarName
+  }
+}
+
+export declare interface ColorStateVars {
+  accent: {
+    fg: CSSVar
+  }
+  avatar: ColorAvatarVars
+  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVars>
+  bg: CSSVar
+  border: CSSVar
+  code: {
+    bg: CSSVar
+    fg: CSSVar
+  }
+  fg: CSSVar
+  icon: CSSVar
+  input: ColorInputVars
+  kbd: {
+    bg: CSSVar
+    border: CSSVar
+    fg: CSSVar
+  }
+  link: {
+    fg: CSSVar
+  }
+  muted: {
+    bg: CSSVar
+    fg: CSSVar
+  }
+  shadow: {
+    outline: CSSVar
+    umbra: CSSVar
+    penumbra: CSSVar
+    ambient: CSSVar
+  }
+  skeleton: {
+    from: CSSVar
+    to: CSSVar
+  }
+  syntax: {
+    atrule: CSSVar
+    attrName: CSSVar
+    attrValue: CSSVar
+    attribute: CSSVar
+    boolean: CSSVar
+    builtin: CSSVar
+    cdata: CSSVar
+    char: CSSVar
+    class: CSSVar
+    className: CSSVar
+    comment: CSSVar
+    constant: CSSVar
+    deleted: CSSVar
+    doctype: CSSVar
+    entity: CSSVar
+    function: CSSVar
+    hexcode: CSSVar
+    id: CSSVar
+    important: CSSVar
+    inserted: CSSVar
+    keyword: CSSVar
+    number: CSSVar
+    operator: CSSVar
+    prolog: CSSVar
+    property: CSSVar
+    pseudoClass: CSSVar
+    pseudoElement: CSSVar
+    punctuation: CSSVar
+    regex: CSSVar
+    selector: CSSVar
+    string: CSSVar
+    symbol: CSSVar
+    tag: CSSVar
+    unit: CSSVar
+    url: CSSVar
+    variable: CSSVar
+  }
+}
+
+/** @public */
+export declare function compileSystem(): string
+
+/** @public */
+export declare function compileTheme(theme: RootTheme_v2): string
+
+export declare function composeClassNames(...classNames: Array<string | false | undefined>): string
+
+export declare function container(props: ContainerStyleProps): string
+
+export declare interface ContainerStyleProps {
+  width?: ResponsiveProp<ContainerWidth>
+}
+
+/** @public */
+export declare type CSSVar = `var(${CSSVarName})`
+
+/** @public */
+export declare type CSSVarName = ThemeVarName | CardScopedVarName
+
+/** @public */
+export declare interface CustomCSSProperties extends Record<CSSVarName, string> {}
+
+export declare function dialog(): string
+
+export declare function dialogCardRoot(): string
+
+export declare function dialogContainer(): string
+
+export declare function dialogContent(): string
+
+export declare function dialogFooter(): string
+
+export declare function dialogHeader(): string
+
+export declare function dialogLayout(): string
+
+/**
+ * @public
+ */
+export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/** @public */
+export declare interface FlexItemStyleProps {
+  flex?: ResponsiveProp<FlexValue>
+}
+
+/**
+ * @public
+ */
+export declare type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/** @public */
+export declare interface FlexStyleProps {
+  align?: ResponsiveProp<FlexAlign>
+  direction?: ResponsiveProp<FlexDirection>
+  justify?: ResponsiveProp<FlexJustify>
+  wrap?: ResponsiveProp<FlexWrap>
+}
+
+/**
+ * @public
+ */
+export declare type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+
+/** @public */
+export declare interface FontStyleProps {
+  weight?: FontWeight
+}
+
+/** @public */
+export declare interface GapStyleProps {
+  gap?: ResponsiveProp<Space>
+  gapX?: ResponsiveProp<Space>
+  gapY?: ResponsiveProp<Space>
+}
+
+/**
+ * @public
+ */
+export declare type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export declare type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRowEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRowStart = 'auto' | number
+
+export declare interface GridItemStyleProps {
+  column?: ResponsiveProp<GridItemColumn>
+  columnStart?: ResponsiveProp<GridItemColumnStart>
+  columnEnd?: ResponsiveProp<GridItemColumnEnd>
+  row?: ResponsiveProp<GridItemRow>
+  rowStart?: ResponsiveProp<GridItemRowStart>
+  rowEnd?: ResponsiveProp<GridItemRowEnd>
+}
+
+/** @public */
+export declare function heading(props: HeadingStyleProps): string
+
+/** @public */
+export declare type HeadingSize = number
+
+/** @public */
+export declare interface HeadingStyleProps extends FontStyleProps_2 {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<HeadingSize>
+}
+
+/** @public */
+export declare type Inset = 0
+
+export declare function kbd(props: KBDStyleProps): string
+
+export declare interface KBDStyleProps extends RadiusStyleProps {}
+
+/** @public */
+export declare function label(props: LabelStyleProps): string
+
+/** @public */
+export declare type LabelSize = number
+
+/** @public */
+export declare interface LabelStyleProps extends FontStyleProps_2 {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<LabelSize>
+}
+
+export declare interface MarginStyleProps {
+  margin?: ResponsiveProp<number>
+  marginTop?: ResponsiveProp<number>
+  marginRight?: ResponsiveProp<number>
+  marginBottom?: ResponsiveProp<number>
+  marginLeft?: ResponsiveProp<number>
+  marginX?: ResponsiveProp<number>
+  marginY?: ResponsiveProp<number>
+}
+
+export declare interface MaxWidthStyleProps {
+  maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
+}
+
+/** @public */
+export declare interface PaddingStyleProps {
+  padding?: ResponsiveProp<number>
+  paddingTop?: ResponsiveProp<number>
+  paddingRight?: ResponsiveProp<number>
+  paddingBottom?: ResponsiveProp<number>
+  paddingLeft?: ResponsiveProp<number>
+  paddingX?: ResponsiveProp<number>
+  paddingY?: ResponsiveProp<number>
+}
+
+/** @public */
+export declare type PointerEvents = 'auto' | 'none'
+
+/** @public */
+export declare interface PointerEventsStyleProps {
+  pointerEvents?: PointerEvents
+}
+
+export declare function popover(): string
+
+/** @public */
+export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
+
+/** @public */
+export declare interface PositionStyleProps {
+  inset?: ResponsiveProp<Inset>
+  position?: ResponsiveProp<Position>
+}
+
+/** @public */
+export declare interface Properties extends CSS_2.PropertiesFallback, Partial<CustomCSSProperties> {
+  '@keyframes'?: Record<string, Record<string, Properties>>
+  '@media'?: Record<string, Properties>
+  '@nest'?: Record<string, Properties>
+}
+
+export declare function radio(): string
+
+/** @public */
+export declare interface RadiusStyleProps {
+  radius?: ResponsiveProp<Radius>
+}
+
+export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
+
+/** @public */
+export declare interface Rules {
+  [className: string]: Properties
+}
+
+export declare interface ScopedColorVarNames extends Omit<ColorStateVarNames, 'badge'> {
+  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames> & ColorBadgeToneVarNames
+}
+
+export declare interface ScopedColorVars extends Omit<ColorStateVars, 'badge'> {
+  badge: ColorBadgeVars & ColorBadgeToneVars
+}
+
+export declare function select(): string
+
+export declare function selectable(props: SelectableStyleProps): string
+
+export declare interface SelectableStyleProps extends RadiusStyleProps {
+  tone?: SelectableTone
+}
+
+export declare function spinner(): string
+
+export declare function _switch(): string
+
+/** @public */
+export declare function text(props: TextStyleProps): string
+
+export declare function textArea(): string
+
+export declare function textInput(props: {size: ResponsiveProp<number>}): string
+
+export declare type TextSize = number
+
+/** @public */
+export declare interface TextStyleProps extends FontStyleProps_2 {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<TextSize>
+}
+
+/** @public */
+export declare type ThemeVarName =
+  | `--avatar-focus-ring-offset`
+  | `--avatar-focus-ring-width`
+  | `--avatar-${AvatarSize}-distance`
+  | `--avatar-${AvatarSize}-size`
+  | `--button-border-width`
+  | `--button-focus-ring-offset`
+  | `--button-focus-ring-width`
+  | `--button-text-weight`
+  | `--card-border-width`
+  | `--card-focus-ring-offset`
+  | `--card-focus-ring-width`
+  | `--card-shadow-outline`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-dot`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-icon`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-border`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-accent-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-border`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-icon`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-link-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-from`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-to`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-icon`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-border`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-atrule`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrName`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrValue`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attribute`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-boolean`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-builtin`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-cdata`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-char`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-class`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-className`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-comment`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-constant`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-deleted`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-doctype`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-entity`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-function`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-hexcode`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-id`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-important`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-inserted`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-keyword`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-number`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-operator`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-prolog`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-property`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoClass`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoElement`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-punctuation`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-regex`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-selector`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-string`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-symbol`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-tag`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-unit`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-url`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-variable`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-fg`
+  | `--container-${ContainerWidth}`
+  | `--font-code-family`
+  | `--font-code-weight-${FontWeight}`
+  | `--font-code-${FontCodeSize}-ascender-height`
+  | `--font-code-${FontCodeSize}-descender-height`
+  | `--font-code-${FontCodeSize}-size`
+  | `--font-code-${FontCodeSize}-line-height`
+  | `--font-code-${FontCodeSize}-letter-spacing`
+  | `--font-code-${FontCodeSize}-icon-size`
+  | `--font-heading-family`
+  | `--font-heading-weight-${FontWeight}`
+  | `--font-heading-${FontHeadingSize}-ascender-height`
+  | `--font-heading-${FontHeadingSize}-descender-height`
+  | `--font-heading-${FontHeadingSize}-size`
+  | `--font-heading-${FontHeadingSize}-line-height`
+  | `--font-heading-${FontHeadingSize}-letter-spacing`
+  | `--font-heading-${FontHeadingSize}-icon-size`
+  | `--font-label-family`
+  | `--font-label-weight-${FontWeight}`
+  | `--font-label-${FontLabelSize}-ascender-height`
+  | `--font-label-${FontLabelSize}-descender-height`
+  | `--font-label-${FontLabelSize}-size`
+  | `--font-label-${FontLabelSize}-line-height`
+  | `--font-label-${FontLabelSize}-letter-spacing`
+  | `--font-label-${FontLabelSize}-icon-size`
+  | `--font-text-family`
+  | `--font-text-weight-${FontWeight}`
+  | `--font-text-${FontTextSize}-ascender-height`
+  | `--font-text-${FontTextSize}-descender-height`
+  | `--font-text-${FontTextSize}-size`
+  | `--font-text-${FontTextSize}-line-height`
+  | `--font-text-${FontTextSize}-letter-spacing`
+  | `--font-text-${FontTextSize}-icon-size`
+  | `--input-border-width`
+  | `--input-box-shadow`
+  | `--input-checkbox-focus-ring-offset`
+  | `--input-checkbox-focus-ring-width`
+  | `--input-checkbox-size`
+  | `--input-radio-focus-ring-offset`
+  | `--input-radio-focus-ring-width`
+  | `--input-radio-mark-size`
+  | `--input-radio-size`
+  | `--input-select-focus-ring-offset`
+  | `--input-select-focus-ring-width`
+  | `--input-switch-focus-ring-offset`
+  | `--input-switch-focus-ring-width`
+  | '--input-switch-width'
+  | '--input-switch-height'
+  | '--input-switch-padding'
+  | '--input-switch-transition-duration-ms'
+  | '--input-switch-transition-timing-function'
+  | '--input-text-focus-ring-offset'
+  | '--input-text-focus-ring-width'
+  | '--layer-dialog-z-offset'
+  | `--radius-${Radius}`
+  | `--space-${Space}`
+  | `--shadow-${Shadow}-umbra`
+  | `--shadow-${Shadow}-penumbra`
+  | `--shadow-${Shadow}-ambient`
+
+export declare function tooltip(): string
+
+export declare function tooltipCard(): string
+
+export declare function treeItem(): string
+
+/** @public */
+export declare interface VarNames {
+  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> & ScopedColorVarNames
+  avatar: {
+    focusRing: {
+      offset: CSSVarName
+      width: CSSVarName
+    }
+  }
+  space: Record<Space, CSSVarName>
+}
+
+/** @public */
+export declare interface Vars {
+  color: {
+    dark: ColorSchemeVars
+    light: ColorSchemeVars
+  } & ScopedColorVars
+  space: Record<Space, CSSVar>
+}
+
+export declare type Width = 'fill'
+
+export declare interface WidthStyleProps {
+  width?: ResponsiveProp<ContainerWidth | 'fill'>
+}
+
+export {}