@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/dist/css.d.ts

@@ -1,60 +1,70 @@
-import {AvatarPosition} from '@sanity/ui'
 import {AvatarSize} from '@sanity/ui/theme'
-import {ButtonMode} from '@sanity/ui'
-import {ButtonTone} from '@sanity/ui'
+import {ColorHueKey} from '@sanity/color'
 import {ContainerWidth} from '@sanity/ui/theme'
-import * as CSS_2 from 'csstype'
+import {default 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 {GridStyleProps as GridStyleProps_2} from '@sanity/ui/css'
+import {Hue as Hue_2} from '@sanity/ui/theme'
+import {PaletteConfig as PaletteConfig_2} 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 {RootTheme} from '@sanity/ui/theme'
 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'
+import type {StyledObject} from 'styled-components'
+import {ThemeBoxShadow as ThemeBoxShadow_2} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey as ThemeColorAvatarColorKey_2} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey as ThemeColorCardToneKey_2} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey as ThemeColorSchemeKey_2} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey as ThemeColorStateToneKey_2} from '@sanity/ui/theme'
+import {Tint as Tint_2} from '@sanity/ui/theme'
 
-export declare function animatedSpinnerIcon(): string
+export declare function animatedSpinnerIcon(): string | undefined
 
-export declare function avatar(props: AvatarStyleProps): string
+/** @internal */
+export declare function _arrow(): string | undefined
 
-export declare function avatarArrow(): string
+export declare function _arrowShape(): string
 
-export declare function avatarBgStroke(): string
+export declare function _arrowStroke(): string
 
-export declare function avatarImage(): string
+export declare function avatar(props: AvatarStyleProps): string | undefined
 
-export declare function avatarInitials(): string
+export declare function avatarArrow(): string | undefined
 
-export declare function avatarStroke(): string
+export declare function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined
+
+export declare function avatarImage(): string | undefined
+
+export declare function avatarInitials(): string | undefined
+
+export declare type AvatarScopedVarName =
+  | `--avatar-bg-color`
+  | `--avatar-fg-color`
+  | `--avatar-distance`
+  | `--avatar-size`
+
+export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
 
 export declare interface AvatarStyleProps {
-  color: ThemeColorAvatarColorKey
+  color: ThemeColorAvatarColorKey_2
   size: ResponsiveProp<AvatarSize>
-  arrowPosition?: AvatarPosition
 }
 
 /** @public */
-export declare function badge(props: BadgeStyleProps): string
+export declare function badge(props: BadgeStyleProps): string | undefined
 
 /** @public */
-export declare interface BadgeStyleProps extends RadiusStyleProps_2 {
-  tone: ThemeColorStateToneKey
+export declare interface BadgeStyleProps extends RadiusStyleProps {
+  tone: ThemeColorStateToneKey_2
 }
 
+/** @public */
+export declare function border(props: BorderStyleProps): string | undefined
+
 /** @public */
 export declare interface BorderStyleProps {
   border?: ResponsiveProp<boolean>
@@ -65,7 +75,7 @@ export declare interface BorderStyleProps {
 }
 
 /** @public */
-export declare function box(props: BoxStyleProps): string
+export declare function box(props: BoxStyleProps): string | undefined
 
 /**
  * @public
@@ -82,65 +92,130 @@ export declare type BoxSizing = 'content' | 'border'
 
 /** @public */
 export declare interface BoxStyleProps
-  extends FlexStyleProps,
+  extends BorderStyleProps,
+    DisplayStyleProps,
+    FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
-    GridStyleProps_2,
+    GridStyleProps,
     GridItemStyleProps,
+    InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
+    RadiusStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<Display>
   height?: ResponsiveProp<BoxHeight>
+  muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }
 
-export declare function breadcrumbs(): string
+export declare function breadcrumbs(): string | undefined
 
-export declare function button(props: ButtonStyleProps): string
+export declare function button(props: ButtonStyleProps): string | undefined
 
-export declare function buttonLoadingBox(): string
+export declare function buttonLoadingBox(): string | undefined
 
-export declare interface ButtonStyleProps extends RadiusStyleProps, WidthStyleProps_2 {
-  mode?: ButtonMode
-  tone?: ButtonTone
+export declare interface ButtonStyleProps
+  extends DisplayStyleProps,
+    FlexItemStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {
+  mode?: ThemeColorButtonModeKey_2
+  tone?: ThemeColorStateToneKey_2
 }
 
-export declare function card(props: CardStyleProps): string
+export declare function card(props: CardStyleProps): string | undefined
+
+/** @public */
+declare interface CardColorTokens {
+  _hue: Hue
+  avatar: Record<
+    Hue,
+    {
+      _hue: Hue
+      bg: [ColorToken, ColorToken]
+      fg: [ColorToken, ColorToken]
+    }
+  >
+  backdrop: [ColorToken, ColorToken]
+  focusRing: [ColorToken, ColorToken]
+  link: {
+    fg: [ColorToken, ColorToken]
+  }
+  shadow: {
+    outline: [ColorToken, ColorToken]
+    umbra: [ColorToken, ColorToken]
+    penumbra: [ColorToken, ColorToken]
+    ambient: [ColorToken, ColorToken]
+  }
+  skeleton: {
+    from: [ColorToken, ColorToken]
+    to: [ColorToken, ColorToken]
+  }
+  token: {
+    atrule: [ColorToken, ColorToken]
+    attrName: [ColorToken, ColorToken]
+    attrValue: [ColorToken, ColorToken]
+    attribute: [ColorToken, ColorToken]
+    boolean: [ColorToken, ColorToken]
+    builtin: [ColorToken, ColorToken]
+    cdata: [ColorToken, ColorToken]
+    char: [ColorToken, ColorToken]
+    class: [ColorToken, ColorToken]
+    className: [ColorToken, ColorToken]
+    comment: [ColorToken, ColorToken]
+    constant: [ColorToken, ColorToken]
+    deleted: [ColorToken, ColorToken]
+    doctype: [ColorToken, ColorToken]
+    entity: [ColorToken, ColorToken]
+    function: [ColorToken, ColorToken]
+    hexcode: [ColorToken, ColorToken]
+    id: [ColorToken, ColorToken]
+    important: [ColorToken, ColorToken]
+    inserted: [ColorToken, ColorToken]
+    keyword: [ColorToken, ColorToken]
+    number: [ColorToken, ColorToken]
+    operator: [ColorToken, ColorToken]
+    prolog: [ColorToken, ColorToken]
+    property: [ColorToken, ColorToken]
+    pseudoClass: [ColorToken, ColorToken]
+    pseudoElement: [ColorToken, ColorToken]
+    punctuation: [ColorToken, ColorToken]
+    regex: [ColorToken, ColorToken]
+    selector: [ColorToken, ColorToken]
+    string: [ColorToken, ColorToken]
+    symbol: [ColorToken, ColorToken]
+    tag: [ColorToken, ColorToken]
+    unit: [ColorToken, ColorToken]
+    url: [ColorToken, ColorToken]
+    variable: [ColorToken, ColorToken]
+  }
+  variant: {
+    solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
+    tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
+  }
+}
 
+/** @public */
 export declare type CardScopedVarName =
   | `--color-accent-fg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-avatar-bg`
+  | `--color-avatar-fg`
+  | `--color-avatar-${ThemeColorAvatarColorKey_2}-bg`
+  | `--color-avatar-${ThemeColorAvatarColorKey_2}-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-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
   | `--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`
@@ -150,83 +225,49 @@ export declare type CardScopedVarName =
   | `--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-bg-image`
-  | `--card-bg2-color`
-  | `--card-border-color`
-  | `--card-code-bg-color`
-  | `--card-code-fg-color`
-  | `--card-fg-color`
-  | `--card-focus-ring-color`
-  | `--card-hairline-soft-color`
-  | `--card-hairline-hard-color`
-  | `--card-icon-color`
-  | `--card-kbd-bg-color`
-  | `--card-kbd-border-color`
-  | `--card-kbd-fg-color`
-  | `--card-link-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-token-atrule`
+  | `--color-token-attr-name`
+  | `--color-token-attr-value`
+  | `--color-token-attribute`
+  | `--color-token-boolean`
+  | `--color-token-builtin`
+  | `--color-token-cdata`
+  | `--color-token-char`
+  | `--color-token-class`
+  | `--color-token-class-name`
+  | `--color-token-comment`
+  | `--color-token-constant`
+  | `--color-token-deleted`
+  | `--color-token-doctype`
+  | `--color-token-entity`
+  | `--color-token-function`
+  | `--color-token-hexcode`
+  | `--color-token-id`
+  | `--color-token-important`
+  | `--color-token-inserted`
+  | `--color-token-keyword`
+  | `--color-token-number`
+  | `--color-token-operator`
+  | `--color-token-prolog`
+  | `--color-token-property`
+  | `--color-token-pseudo-class`
+  | `--color-token-pseudo-element`
+  | `--color-token-punctuation`
+  | `--color-token-regex`
+  | `--color-token-selector`
+  | `--color-token-string`
+  | `--color-token-symbol`
+  | `--color-token-tag`
+  | `--color-token-unit`
+  | `--color-token-url`
+  | `--color-token-variable`
   | `--color-checkbox-bg`
   | `--color-checkbox-fg`
   | `--color-checkbox-border`
   | `--font-ascender-height`
-  | `--font-cap-height`
   | `--font-descender-height`
   | `--font-family`
+  | `--font-feature-settings`
   | `--font-icon-offset`
   | `--font-icon-size`
   | `--font-letter-spacing`
@@ -241,59 +282,55 @@ export declare type CardScopedVarName =
   | `--font-weight-bold`
   | `--font-weight`
   | `--fg-color`
-  | `--input-bg-color`
-  | `--input-border-color`
-  | `--input-fg-color`
   | `--padding-top`
   | `--padding-right`
   | `--padding-bottom`
   | `--padding-left`
 
-export declare interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
+export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  shadow?: ResponsiveProp<number>
+  selectable?: boolean
+  scheme?: ThemeColorSchemeKey_2
+  tone?: ThemeColorCardToneKey_2 | 'inherit'
 }
 
-export declare function checkbox(): string
+export declare function checkbox(): string | undefined
 
-export declare function checkboxInput(): string
+export declare function checkboxInput(): string | undefined
 
 /** @public */
-export declare function code(props: CodeStyleProps): string
+export declare function code(props: CodeStyleProps): string | undefined
 
 /** @public */
 export declare type CodeSize = number
 
-export declare function codeSkeleton(props: CodeSkeletonStyleProps): string
+export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
 
 export declare interface CodeSkeletonStyleProps {
   size?: ResponsiveProp<FontCodeSize>
 }
 
 /** @public */
-export declare interface CodeStyleProps extends FontStyleProps_2 {
+export declare interface CodeStyleProps extends FontStyleProps {
   size?: ResponsiveProp<CodeSize>
 }
 
+/** @public */
 export declare interface ColorAvatarColorVarNames {
   bg: CSSVarName
   fg: CSSVarName
 }
 
+/** @public */
 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
-}
+/** @public */
+export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVars>
 
+/** @public */
 export declare interface ColorBadgeToneVars {
   bg: CSSVar
   dot: CSSVar
@@ -301,77 +338,123 @@ export declare interface ColorBadgeToneVars {
   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>
+/** @public */
+export declare type ColorBadgeVars = Record<ThemeColorStateToneKey_2, ColorBadgeToneVars>
+
+export declare type ColorCardToneScopedVarName =
+  | `--color-${ThemeColorCardToneKey_2}-accent-fg`
+  | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
+  | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
+  | `--color-${ThemeColorCardToneKey_2}-backdrop`
+  | `--color-${ThemeColorCardToneKey_2}-focus-ring`
+  | `--color-${ThemeColorCardToneKey_2}-link-fg`
+  | `--color-${ThemeColorCardToneKey_2}-muted-bg`
+  | `--color-${ThemeColorCardToneKey_2}-muted-fg`
+  | `--color-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
+  | `--color-${ThemeColorCardToneKey_2}-shadow-outline`
+  | `--color-${ThemeColorCardToneKey_2}-shadow-umbra`
+  | `--color-${ThemeColorCardToneKey_2}-shadow-penumbra`
+  | `--color-${ThemeColorCardToneKey_2}-shadow-ambient`
+  | `--color-${ThemeColorCardToneKey_2}-skeleton-from`
+  | `--color-${ThemeColorCardToneKey_2}-skeleton-to`
+  | `--color-${ThemeColorCardToneKey_2}-token-atrule`
+  | `--color-${ThemeColorCardToneKey_2}-token-attr-name`
+  | `--color-${ThemeColorCardToneKey_2}-token-attr-value`
+  | `--color-${ThemeColorCardToneKey_2}-token-attribute`
+  | `--color-${ThemeColorCardToneKey_2}-token-boolean`
+  | `--color-${ThemeColorCardToneKey_2}-token-builtin`
+  | `--color-${ThemeColorCardToneKey_2}-token-cdata`
+  | `--color-${ThemeColorCardToneKey_2}-token-char`
+  | `--color-${ThemeColorCardToneKey_2}-token-class`
+  | `--color-${ThemeColorCardToneKey_2}-token-class-name`
+  | `--color-${ThemeColorCardToneKey_2}-token-comment`
+  | `--color-${ThemeColorCardToneKey_2}-token-constant`
+  | `--color-${ThemeColorCardToneKey_2}-token-deleted`
+  | `--color-${ThemeColorCardToneKey_2}-token-doctype`
+  | `--color-${ThemeColorCardToneKey_2}-token-entity`
+  | `--color-${ThemeColorCardToneKey_2}-token-function`
+  | `--color-${ThemeColorCardToneKey_2}-token-hexcode`
+  | `--color-${ThemeColorCardToneKey_2}-token-id`
+  | `--color-${ThemeColorCardToneKey_2}-token-important`
+  | `--color-${ThemeColorCardToneKey_2}-token-inserted`
+  | `--color-${ThemeColorCardToneKey_2}-token-keyword`
+  | `--color-${ThemeColorCardToneKey_2}-token-number`
+  | `--color-${ThemeColorCardToneKey_2}-token-operator`
+  | `--color-${ThemeColorCardToneKey_2}-token-prolog`
+  | `--color-${ThemeColorCardToneKey_2}-token-property`
+  | `--color-${ThemeColorCardToneKey_2}-token-pseudo-class`
+  | `--color-${ThemeColorCardToneKey_2}-token-pseudo-element`
+  | `--color-${ThemeColorCardToneKey_2}-token-punctuation`
+  | `--color-${ThemeColorCardToneKey_2}-token-regex`
+  | `--color-${ThemeColorCardToneKey_2}-token-selector`
+  | `--color-${ThemeColorCardToneKey_2}-token-string`
+  | `--color-${ThemeColorCardToneKey_2}-token-symbol`
+  | `--color-${ThemeColorCardToneKey_2}-token-tag`
+  | `--color-${ThemeColorCardToneKey_2}-token-unit`
+  | `--color-${ThemeColorCardToneKey_2}-token-url`
+  | `--color-${ThemeColorCardToneKey_2}-token-variable`
+
+export declare type ColorCardVarName =
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-accent-fg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-backdrop`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-focus-ring`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-link-fg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-bg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-fg`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-outline`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-umbra`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-penumbra`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-ambient`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-from`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-to`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-atrule`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-name`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-value`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attribute`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-boolean`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-builtin`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-cdata`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-char`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class-name`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-comment`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-constant`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-deleted`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-doctype`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-entity`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-function`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-hexcode`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-id`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-important`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-inserted`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-keyword`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-number`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-operator`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-prolog`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-property`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-class`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-element`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-punctuation`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-regex`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-selector`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-string`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-symbol`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-tag`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-unit`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-url`
+  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-variable`
 
-export declare interface ColorStateVarNames {
+/** @public */
+export declare interface ColorCardVarNames {
   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
-  }
+  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames>
+  backdrop: CSSVarName
+  focusRing: CSSVarName
   link: {
     fg: CSSVarName
   }
@@ -389,7 +472,7 @@ export declare interface ColorStateVarNames {
     from: CSSVarName
     to: CSSVarName
   }
-  syntax: {
+  token: {
     atrule: CSSVarName
     attrName: CSSVarName
     attrValue: CSSVarName
@@ -427,28 +510,18 @@ export declare interface ColorStateVarNames {
     url: CSSVarName
     variable: CSSVarName
   }
+  solid: ColorVariantVarNames
+  tinted: ColorVariantVarNames
 }
 
-export declare interface ColorStateVars {
+/** @public */
+export declare interface ColorCardVars {
   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
-  }
+  backdrop: CSSVar
+  focusRing: CSSVar
   link: {
     fg: CSSVar
   }
@@ -466,7 +539,7 @@ export declare interface ColorStateVars {
     from: CSSVar
     to: CSSVar
   }
-  syntax: {
+  token: {
     atrule: CSSVar
     attrName: CSSVar
     attrValue: CSSVar
@@ -504,51 +577,226 @@ export declare interface ColorStateVars {
     url: CSSVar
     variable: CSSVar
   }
+  solid: ColorVariantVars
+  tinted: ColorVariantVars
+}
+
+/** @public */
+export declare interface ColorElementVarNames {
+  bg: {
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
+  }
+  border: {
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
+  }
+  fg: {
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
+  }
+}
+
+/** @public */
+export declare interface ColorElementVars {
+  bg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  border: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  fg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+}
+
+/** @public */
+export declare interface ColorInputStateVars {
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  muted: {
+    bg: CSSVar
+  }
+  placeholder: CSSVar
 }
 
+/** @public */
+export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey_2, ColorCardVarNames>
+
+/** @public */
+export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey_2, ColorCardVars> {}
+
+/** @public */
+declare type ColorToken =
+  | `black`
+  | `black/${ColorTokenOpacityValue}`
+  | `white`
+  | `white/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Tint}`
+  | `${Tint}/${ColorTokenOpacityValue}`
+  | `${Tint} ${number}%`
+
+/** @public */
+declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
+
+export declare interface ColorVariantVarNames
+  extends ColorElementVarNames,
+    Record<ThemeColorStateToneKey_2, ColorElementVarNames> {}
+
+/** @public */
+export declare interface ColorVariantVars
+  extends Record<ThemeColorStateToneKey_2, ColorElementVars>,
+    ColorElementVars {}
+
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
+export declare function compilePalette(config: PaletteConfig_2): string
+
 /** @public */
 export declare function compileSystem(): string
 
-/** @public */
-export declare function compileTheme(theme: RootTheme_v2): string
+export declare function compileTheme(theme: RootTheme): string
 
-export declare function composeClassNames(...classNames: Array<string | false | undefined>): string
+export declare function composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined
 
-export declare function container(props: ContainerStyleProps): string
+export declare function container(props: ContainerStyleProps): string | undefined
 
 export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
 
+/**
+ * Work around types that are missing in `styled-components@6`
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ */
+declare type CSSObject = StyledObject<any>
+
 /** @public */
 export declare type CSSVar = `var(${CSSVarName})`
 
 /** @public */
-export declare type CSSVarName = ThemeVarName | CardScopedVarName
+export declare type CSSVarName =
+  | AvatarScopedVarName
+  | LegacyCardScopedVarName
+  | PaletteVarName
+  | ThemeVarName
+  | ColorCardVarName
+  | ColorCardToneScopedVarName
+  | CardScopedVarName
+  | ElementColorVariantScopedVarName
+  | InputScopedVarName
+  | SwitchScopedVarName
 
 /** @public */
 export declare interface CustomCSSProperties extends Record<CSSVarName, string> {}
 
-export declare function dialog(): string
+export declare function dialog(): string | undefined
 
-export declare function dialogCardRoot(): string
+export declare function dialogCardRoot(): string | undefined
 
-export declare function dialogContainer(): string
+export declare function dialogContainer(): string | undefined
 
-export declare function dialogContent(): string
+export declare function dialogContent(): string | undefined
 
-export declare function dialogFooter(): string
+export declare function dialogFooter(): string | undefined
 
-export declare function dialogHeader(): string
+export declare function dialogHeader(): string | undefined
 
-export declare function dialogLayout(): string
+export declare function dialogLayout(): string | undefined
 
 /**
  * @public
  */
-export declare type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+export declare type Display =
+  | 'block'
+  | 'inline-block'
+  | 'flex'
+  | 'inline-flex'
+  | 'grid'
+  | 'inline-grid'
+  | 'none'
+
+export declare function display(props: DisplayStyleProps): string | undefined
+
+export declare interface DisplayStyleProps {
+  display?: ResponsiveProp<Display>
+}
+
+/** @public */
+declare interface ElementColorTokens {
+  _hue: Hue
+  bg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  border: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  fg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+}
+
+/** @public */
+export declare type ElementColorVariant = 'solid' | 'tinted'
+
+/** @public */
+export declare type ElementColorVariantKey =
+  | 'bg-0'
+  | 'bg-1'
+  | 'bg-2'
+  | 'bg-3'
+  | 'bg-4'
+  | 'border-0'
+  | 'border-1'
+  | 'border-2'
+  | 'border-3'
+  | 'border-4'
+  | 'fg-0'
+  | 'fg-1'
+  | 'fg-2'
+  | 'fg-3'
+  | 'fg-4'
+
+/** @public */
+export declare type ElementColorVariantScopedVarName =
+  `--color-${ElementColorVariant}-${ElementColorVariantKey}`
+
+/** @public */
+export declare function flex(props: FlexStyleProps): string | undefined
 
 /**
  * @public
@@ -560,6 +808,9 @@ export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline
  */
 export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
+/** @public */
+export declare function flexItem(props: FlexItemStyleProps): string | undefined
+
 /** @public */
 export declare interface FlexItemStyleProps {
   flex?: ResponsiveProp<FlexValue>
@@ -594,6 +845,20 @@ export declare type FlexValue = number | 'none' | 'auto' | 'initial'
  */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
+/** @public */
+export declare function font(props: FontStyleProps): string | undefined
+
+/** @public */
+export declare interface FontSizeVarNames {
+  ascenderHeight: CSSVarName
+  descenderHeight: CSSVarName
+  fontSize: CSSVarName
+  lineHeight: CSSVarName
+  letterSpacing: CSSVarName
+  iconSize: CSSVarName
+}
+
+/** @public */
 export declare interface FontSizeVars {
   ascenderHeight: CSSVar
   descenderHeight: CSSVar
@@ -609,11 +874,20 @@ export declare interface FontStyleProps {
   weight?: FontWeight
 }
 
+export declare interface FontVarNames<Size extends number> {
+  family: CSSVarName
+  sizes: Record<Size, FontSizeVarNames>
+}
+
+/** @public */
 export declare interface FontVars<Size extends number> {
   family: CSSVar
   sizes: Record<Size, FontSizeVars>
 }
 
+/** @public */
+export declare function gap(props: GapStyleProps): string | undefined
+
 /** @public */
 export declare interface GapStyleProps {
   gap?: ResponsiveProp<Space>
@@ -621,6 +895,8 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
+export declare function grid(props: GridStyleProps): string | undefined
+
 /**
  * @public
  */
@@ -636,6 +912,9 @@ export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dens
  */
 export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
+/** @public */
+export declare function gridItem(props: GridItemStyleProps): string | undefined
+
 /**
  * @public
  */
@@ -685,50 +964,145 @@ export declare interface GridStyleProps {
 }
 
 /** @public */
-export declare function heading(props: HeadingStyleProps): string
+export declare function heading(props: HeadingStyleProps): string | undefined
 
 /** @public */
 export declare type HeadingSize = number
 
-export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string
+export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
 
 export declare interface HeadingSkeletonStyleProps {
   size?: ResponsiveProp<FontHeadingSize>
 }
 
 /** @public */
-export declare interface HeadingStyleProps extends FontStyleProps_2 {
+export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }
 
+declare type Hue = (typeof HUES)[number]
+
+declare const HUES: readonly [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+]
+
+/** @internal */
+export declare function _input(props: InputStyleProps): string | undefined
+
+export declare function _inputElement(): string
+
+export declare function _inputPresentation(): string
+
+/** @public */
+export declare type InputScopedVarName =
+  | `--color-input-bg`
+  | `--color-input-border`
+  | `--color-input-fg`
+  | `--color-input-placeholder`
+  | `--input-ascender-height`
+  | `--input-descender-height`
+  | `--input-font-size`
+  | `--input-gap`
+  | `--input-letter-spacing`
+  | `--input-line-height`
+  | `--input-padding`
+
+/** @public */
+export declare interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+  border?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  padding?: ResponsiveProp<Space>
+}
+
 /** @public */
 export declare type Inset = 0
 
-export declare function kbd(props: KBDStyleProps): string
+export declare function inset(props: InsetStyleProps): string | undefined
+
+/** @public */
+export declare interface InsetStyleProps {
+  inset?: ResponsiveProp<Inset>
+  insetTop?: ResponsiveProp<Inset>
+  insetRight?: ResponsiveProp<Inset>
+  insetBottom?: ResponsiveProp<Inset>
+  insetLeft?: ResponsiveProp<Inset>
+}
+
+export declare function isArray(value: unknown): value is unknown[]
 
+export declare function isRecord(value: unknown): value is Record<string, unknown>
+
+export declare function kbd(props: KBDStyleProps): string | undefined
+
+/** @public */
 export declare interface KBDStyleProps extends RadiusStyleProps {}
 
 /** @public */
-export declare function label(props: LabelStyleProps): string
+export declare function label(props: LabelStyleProps): string | undefined
 
 /** @public */
 export declare type LabelSize = number
 
-export declare function labelSkeleton(props: LabelSkeletonStyleProps): string
+export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
 
 export declare interface LabelSkeletonStyleProps {
   size?: ResponsiveProp<FontLabelSize>
 }
 
 /** @public */
-export declare interface LabelStyleProps extends FontStyleProps_2 {
+export declare interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<LabelSize>
 }
 
+export declare type LegacyCardScopedVarName =
+  | `--card-accent-fg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey_2}-bg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey_2}-fg-color`
+  | `--card-backdrop-color`
+  | `--card-badge-${ThemeColorStateToneKey_2}-bg-color`
+  | `--card-badge-${ThemeColorStateToneKey_2}-dot-color`
+  | `--card-badge-${ThemeColorStateToneKey_2}-fg-color`
+  | `--card-badge-${ThemeColorStateToneKey_2}-icon-color`
+  | `--card-bg-color`
+  | `--card-bg-image`
+  | `--card-bg2-color`
+  | `--card-border-color`
+  | `--card-code-bg-color`
+  | `--card-code-fg-color`
+  | `--card-fg-color`
+  | `--card-focus-ring-color`
+  | `--card-hairline-soft-color`
+  | `--card-hairline-hard-color`
+  | `--card-icon-color`
+  | `--card-kbd-bg-color`
+  | `--card-kbd-border-color`
+  | `--card-kbd-fg-color`
+  | `--card-link-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`
+
+export declare function margin(props: MarginStyleProps): string | undefined
+
 export declare interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>
@@ -739,11 +1113,17 @@ export declare interface MarginStyleProps {
   marginY?: ResponsiveProp<number>
 }
 
+export declare function maxWidth(props: MaxWidthStyleProps): string
+
 export declare interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
+  maxWidth?: ResponsiveProp<ContainerWidth>
 }
 
-export declare function menuDivider(): string
+export declare function menu(): string | undefined
+
+export declare function menuDivider(): string | undefined
+
+export declare function overflow(props: OverflowStyleProps): string | undefined
 
 /** @public */
 export declare interface OverflowStyleProps {
@@ -752,33 +1132,59 @@ export declare interface OverflowStyleProps {
   overflowY?: ResponsiveProp<BoxOverflow>
 }
 
+export declare function padding(props: PaddingStyleProps): string | undefined
+
 /** @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>
+  padding?: ResponsiveProp<Space>
+  paddingTop?: ResponsiveProp<Space>
+  paddingRight?: ResponsiveProp<Space>
+  paddingBottom?: ResponsiveProp<Space>
+  paddingLeft?: ResponsiveProp<Space>
+  paddingX?: ResponsiveProp<Space>
+  paddingY?: ResponsiveProp<Space>
+}
+
+declare type PaletteConfig = {
+  chroma: {
+    min: number
+    max: number
+  }
+  luminosity: {
+    min: number
+    max: number
+  }
+  hues: Record<
+    Hue,
+    {
+      h: number
+      c: number
+    }
+  >
 }
 
+/** @public */
+export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
+
 /** @public */
 export declare type PointerEvents = 'auto' | 'none'
 
+export declare function pointerEvents(props: PointerEventsStyleProps): string | undefined
+
 /** @public */
 export declare interface PointerEventsStyleProps {
   pointerEvents?: PointerEvents
 }
 
-export declare function popover(): string
+export declare function popover(): string | undefined
 
 /** @public */
 export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
 
+export declare function position(props: PositionStyleProps): string | undefined
+
 /** @public */
 export declare interface PositionStyleProps {
-  inset?: ResponsiveProp<Inset>
   position?: ResponsiveProp<Position>
 }
 
@@ -789,15 +1195,58 @@ export declare interface Properties extends CSS_2.PropertiesFallback, Partial<Cu
   '@nest'?: Record<string, Properties>
 }
 
-export declare function radio(): string
+export declare function px(value: number): string
+
+export declare function radio(): string | undefined
+
+/** @public */
+export declare function radius(props: RadiusStyleProps): string | undefined
 
 /** @public */
 export declare interface RadiusStyleProps {
   radius?: ResponsiveProp<Radius>
 }
 
+export declare function rem(value: number): string
+
+/** @public */
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+/**
+ * @public
+ */
+declare interface RootTheme_v2 {
+  _version: 2
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    shadow: {
+      outline: number
+    }
+  }
+  color: ThemeColorSchemes_v2
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+  /** @internal */
+  style?: ThemeStyles
+}
+
 export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
 /** @public */
@@ -805,67 +1254,665 @@ export declare interface Rules {
   [className: string]: Properties
 }
 
-export declare interface ScopedColorVarNames extends Omit<ColorStateVarNames, 'badge'> {
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames> & ColorBadgeToneVarNames
+export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
+  accent: {
+    fg: CSSVarName
+  }
+  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
+  bg: CSSVarName
+  border: CSSVarName
+  fg: CSSVarName
+  input: {
+    bg: CSSVarName
+    border: CSSVarName
+    fg: CSSVarName
+    placeholder: CSSVarName
+  }
 }
 
-export declare interface ScopedColorVars extends Omit<ColorStateVars, 'badge'> {
-  badge: ColorBadgeVars & ColorBadgeToneVars
+export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
+  avatar: ColorAvatarVars & ColorAvatarColorVars
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  input: {
+    bg: CSSVar
+    border: CSSVar
+    fg: CSSVar
+    placeholder: CSSVar
+  }
 }
 
-export declare function select(): string
+export declare function select(props: SelectStyleProps): string | undefined
 
-export declare function selectable(props: SelectableStyleProps): string
+/** @internal */
+export declare function _selectable(props: SelectableStyleProps): string | undefined
 
+/** @internal */
 export declare interface SelectableStyleProps extends RadiusStyleProps {
-  tone?: SelectableTone
+  tone?: ThemeColorStateToneKey_2
+}
+
+export declare function selectPresentation(): string | undefined
+
+/** @public */
+export declare interface SelectStyleProps extends InputStyleProps {}
+
+export declare function shadow(props: ShadowStyleProps): string | undefined
+
+/** @public */
+export declare interface ShadowStyleProps {
+  shadow?: ResponsiveProp<Shadow>
 }
 
 /** @beta */
-export declare function skeleton(props: SkeletonStyleProps): string
+export declare function skeleton(props: SkeletonStyleProps): string | undefined
 
 /** @beta */
 export declare interface SkeletonStyleProps extends RadiusStyleProps {}
 
-export declare function spinner(): string
+export declare function spinner(): string | undefined
+
+export declare function srOnly(): string | undefined
+
+export declare function _switch(): string | undefined
 
-export declare function _switch(): string
+export declare function _switchElement(): string | undefined
+
+export declare function _switchPresentation(): string | undefined
 
 /** @public */
-export declare function text(props: TextStyleProps): string
+export declare type SwitchScopedVarName =
+  | `--switch-bg-color`
+  | `--switch-fg-color`
+  | '--switch-thumb-offset'
+  | '--switch-thumb-size'
+
+export declare function _switchThumb(): string | undefined
+
+export declare function _switchTrack(): string | undefined
+
+/** @public */
+export declare function text(props: TextStyleProps): string | undefined
 
 /**
  * @public
  */
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
-export declare function textArea(): string
+export declare function textArea(props: TextAreaStyleProps): string | undefined
 
-export declare function textInput(props: TextInputStyleProps): string
+/** @public */
+export declare interface TextAreaStyleProps extends InputStyleProps {}
 
-export declare function textInputElement(): string
+export declare function textInput(props: TextInputStyleProps): string | undefined
 
 /** @public */
-export declare interface TextInputStyleProps {
-  padding: ResponsiveProp<Space>
-  size: ResponsiveProp<FontTextSize>
+export declare interface TextInputStyleProps extends InputStyleProps {}
+
+export declare function textOverflow(props: TextOverflowStyleProps): string | undefined
+
+export declare interface TextOverflowStyleProps {
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis' | 'clip'
 }
 
 export declare type TextSize = number
 
-export declare function textSkeleton(props: TextSkeletonStyleProps): string
+export declare function textSkeleton(props: TextSkeletonStyleProps): string | undefined
 
 export declare interface TextSkeletonStyleProps {
   size?: ResponsiveProp<FontTextSize>
 }
 
 /** @public */
-export declare interface TextStyleProps extends FontStyleProps_2 {
+export declare interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }
 
+/** @public */
+declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
+
+/** @public */
+declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
+
+/** @public */
+declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
+
+/** @public */
+declare const THEME_COLOR_CARD_TONES: readonly [
+  'transparent',
+  'default',
+  'neutral',
+  'primary',
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+]
+
+/** @public */
+declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
+
+/** @public */
+declare const THEME_COLOR_INPUT_STATES: readonly ['enabled', 'hovered', 'readOnly', 'disabled']
+
+/** @public */
+declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
+
+/** @public */
+declare const THEME_COLOR_STATE_TONES: readonly [
+  'default',
+  'neutral',
+  'primary',
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+]
+
+/** @public */
+declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'selected', 'disabled']
+
+/**
+ * Supersedes `RootTheme` and `RootTheme_v2`.
+ *
+ * @public
+ */
+declare interface Theme_v3 {
+  _version: 3
+  _palette: PaletteConfig
+  _tokens: Tokens
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    shadow: {
+      outline: number
+    }
+  }
+  color: ThemeColor_v3
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+}
+
+/**
+ * @public
+ */
+declare interface ThemeAvatar_v2 {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}
+
+/**
+ * @public
+ */
+declare type ThemeBoxShadow = [number, number, number, number]
+
+declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+
+/**
+ * @public
+ */
+declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
+
+/** @public */
+declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
+
+/**
+ * @public
+ */
+declare interface ThemeColorAvatarHue_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+}
+
+/**
+ * @public
+ */
+declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
+
+/**
+ * @public
+ */
+declare interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+/** @public */
+declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/**
+ * @public
+ */
+declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
+
+/**
+ * @public
+ */
+declare type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
+
+/** @public */
+declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/**
+ * @public
+ */
+declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
+
+/**
+ * @public
+ */
+declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
+  /** @internal */
+  _blend: ThemeColorBlendModeKey
+  _dark: boolean
+  backdrop: string
+  button: ThemeColorButton_v2
+  focusRing: string
+  input: ThemeColorInput_v2
+  selectable: ThemeColorSelectable_v2
+  shadow: ThemeColorShadow
+  syntax: ThemeColorSyntax
+}
+
+declare interface ThemeColorCard_v3 {
+  _hue: Hue
+  avatar: ThemeColorAvatar_v2
+  backdrop: string
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  token: {
+    atrule: string
+    attrName: string
+    attrValue: string
+    attribute: string
+    boolean: string
+    builtin: string
+    cdata: string
+    char: string
+    class: string
+    className: string
+    comment: string
+    constant: string
+    deleted: string
+    doctype: string
+    entity: string
+    function: string
+    hexcode: string
+    id: string
+    important: string
+    inserted: string
+    keyword: string
+    number: string
+    operator: string
+    prolog: string
+    property: string
+    pseudoClass: string
+    pseudoElement: string
+    punctuation: string
+    regex: string
+    selector: string
+    string: string
+    symbol: string
+    tag: string
+    unit: string
+    url: string
+    variable: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+  variant: Record<ThemeColorVariantKey, ThemeColorVariant>
+}
+
+/** @public */
+declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
+
+declare interface ThemeColorElement {
+  _hue: Hue
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
+
+/**
+ * @public
+ */
+declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
+
+/**
+ * @public
+ */
+declare type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
+
+/** @public */
+declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/**
+ * @public
+ */
+declare interface ThemeColorInputState_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  border: string
+  fg: string
+  muted: {
+    bg: string
+  }
+  placeholder: string
+}
+
+/** @public */
+declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/**
+ * @public
+ */
+declare interface ThemeColorKBD {
+  bg: string
+  fg: string
+  border: string
+}
+
+/**
+ * @public
+ */
+declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
+
+declare interface ThemeColorScheme_v3 {
+  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
+}
+
+/**
+ * @public
+ */
+declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
+
+/**
+ * @public
+ */
+declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
+
+/**
+ * @public
+ */
+declare type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>
+
+/**
+ * @public
+ */
+declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
+
+/** @public */
+declare interface ThemeColorShadow {
+  outline: string
+  umbra: string
+  penumbra: string
+  ambient: string
+}
+
+/**
+ * @public
+ */
+declare interface ThemeColorState_v2 {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  accent: {
+    fg: string
+  }
+  /**
+   * @internal  This may be removed in a future release
+   * */
+  avatar: ThemeColorAvatar_v2
+  /**
+   * @internal  This may be removed in a future release
+   * */
+  badge: ThemeColorBadge_v2
+  bg: string
+  border: string
+  code: {
+    bg: string
+    fg: string
+  }
+  fg: string
+  icon: string
+  kbd: ThemeColorKBD
+  link: {
+    fg: string
+  }
+  muted: {
+    bg: string
+    fg: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+}
+
+/** @public */
+declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+/** @public */
+declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/**
+ * @public
+ */
+declare interface ThemeColorSyntax {
+  atrule: string
+  attrName: string
+  attrValue: string
+  attribute: string
+  boolean: string
+  builtin: string
+  cdata: string
+  char: string
+  class: string
+  className: string
+  comment: string
+  constant: string
+  deleted: string
+  doctype: string
+  entity: string
+  function: string
+  hexcode: string
+  id: string
+  important: string
+  inserted: string
+  keyword: string
+  number: string
+  operator: string
+  prolog: string
+  property: string
+  pseudoClass: string
+  pseudoElement: string
+  punctuation: string
+  regex: string
+  selector: string
+  string: string
+  symbol: string
+  tag: string
+  unit: string
+  url: string
+  variable: string
+}
+
+declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
+
+declare type ThemeColorVariantKey = 'tinted' | 'solid'
+
+/**
+ * @public
+ */
+declare interface ThemeFocusRing {
+  offset: number
+  width: number
+}
+
+/**
+ * @public
+ */
+declare interface ThemeFont {
+  family: string
+  featureSettings?: string
+  weights: ThemeFontWeight
+  sizes: ThemeFontSize[]
+  /** @deprecated No longer supported. */
+  horizontalOffset?: number
+}
+
+/**
+ * @public
+ */
+declare interface ThemeFonts {
+  code: ThemeFont
+  heading: ThemeFont
+  label: ThemeFont
+  text: ThemeFont
+}
+
+/**
+ * @public
+ */
+declare interface ThemeFontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+}
+
+/**
+ * @public
+ */
+declare interface ThemeFontWeight {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/**
+ * @public
+ */
+declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/**
+ * @public
+ */
+declare interface ThemeInput_v2 {
+  checkbox: {
+    size: number
+    focusRing: ThemeFocusRing
+  }
+  radio: {
+    size: number
+    markSize: number
+    focusRing: ThemeFocusRing
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+    focusRing: ThemeFocusRing
+  }
+  border: {
+    width: number
+  }
+  select: {
+    focusRing: ThemeFocusRing
+  }
+  text: {
+    focusRing: ThemeFocusRing
+  }
+}
+
+/**
+ * @public
+ */
+declare interface ThemeLayer {
+  dialog: {
+    zOffset: number
+  }
+  popover: {
+    zOffset: number
+  }
+  tooltip: {
+    zOffset: number
+  }
+}
+
+/**
+ * @public
+ */
+declare interface ThemeShadow {
+  umbra: ThemeBoxShadow
+  penumbra: ThemeBoxShadow
+  ambient: ThemeBoxShadow
+}
+
+/**
+ * @internal
+ */
+declare interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
 /** @public */
 export declare type ThemeVarName =
   | `--avatar-focus-ring-offset`
@@ -879,89 +1926,10 @@ export declare type ThemeVarName =
   | `--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`
+  | `--shadow-outline`
   | `--container-${ContainerWidth}`
   | `--font-code-family`
+  | `--font-code-feature-settings`
   | `--font-code-weight-${FontWeight}`
   | `--font-code-${FontCodeSize}-ascender-height`
   | `--font-code-${FontCodeSize}-descender-height`
@@ -970,6 +1938,7 @@ export declare type ThemeVarName =
   | `--font-code-${FontCodeSize}-letter-spacing`
   | `--font-code-${FontCodeSize}-icon-size`
   | `--font-heading-family`
+  | `--font-heading-feature-settings`
   | `--font-heading-weight-${FontWeight}`
   | `--font-heading-${FontHeadingSize}-ascender-height`
   | `--font-heading-${FontHeadingSize}-descender-height`
@@ -978,6 +1947,7 @@ export declare type ThemeVarName =
   | `--font-heading-${FontHeadingSize}-letter-spacing`
   | `--font-heading-${FontHeadingSize}-icon-size`
   | `--font-label-family`
+  | `--font-label-feature-settings`
   | `--font-label-weight-${FontWeight}`
   | `--font-label-${FontLabelSize}-ascender-height`
   | `--font-label-${FontLabelSize}-descender-height`
@@ -986,6 +1956,7 @@ export declare type ThemeVarName =
   | `--font-label-${FontLabelSize}-letter-spacing`
   | `--font-label-${FontLabelSize}-icon-size`
   | `--font-text-family`
+  | `--font-text-feature-settings`
   | `--font-text-weight-${FontWeight}`
   | `--font-text-${FontTextSize}-ascender-height`
   | `--font-text-${FontTextSize}-descender-height`
@@ -1020,43 +1991,145 @@ export declare type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
-export declare function tooltip(): string
+declare type Tint = (typeof TINTS)[number]
+
+declare const TINTS: readonly [
+  50,
+  100,
+  150,
+  200,
+  250,
+  300,
+  350,
+  400,
+  450,
+  500,
+  550,
+  600,
+  650,
+  700,
+  750,
+  800,
+  850,
+  900,
+  950,
+]
+
+export declare function toast(): string | undefined
+
+export declare function toastLayer(): string | undefined
+
+export declare function toastLoadingBar(): string | undefined
 
-export declare function tooltipCard(): string
+export declare function toastLoadingBarMask(): string | undefined
 
-export declare function treeItem(): string
+export declare function toastLoadingBarProgress(): string | undefined
+
+export declare function toBoxShadow(value: ThemeBoxShadow_2 | undefined): string
+
+/** @public */
+declare interface Tokens {
+  color: ColorTokens
+}
+
+export declare function tooltip(): string | undefined
+
+export declare function tooltipCard(): string | undefined
+
+export declare function treeItem(): string | undefined
+
+export declare function v3_v2(theme_v3: Theme_v3): RootTheme_v2
 
 /** @public */
 export declare interface VarNames {
-  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> & ScopedColorVarNames
+  color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
+    ScopedColorVarNames &
+    Record<ThemeColorCardToneKey_2, ColorCardVarNames>
   avatar: {
+    distance: CSSVarName
     focusRing: {
       offset: CSSVarName
       width: CSSVarName
     }
+    size: CSSVarName
+    sizes: Record<
+      AvatarSize,
+      {
+        distance: CSSVarName
+        size: CSSVarName
+      }
+    >
+  }
+  font: {
+    code: FontVarNames<FontCodeSize>
+    heading: FontVarNames<FontHeadingSize>
+    label: FontVarNames<FontLabelSize>
+    text: FontVarNames<FontTextSize>
+  }
+  input: {
+    fontSize: CSSVarName
+    lineHeight: CSSVarName
+    letterSpacing: CSSVarName
+    ascenderHeight: CSSVarName
+    descenderHeight: CSSVarName
+    gap: CSSVarName
+    padding: CSSVarName
   }
   space: Record<Space, CSSVarName>
 }
 
+export declare const varNames: VarNames
+
 /** @public */
 export declare interface Vars {
+  avatar: {
+    distance: CSSVar
+    size: CSSVar
+    sizes: Record<
+      AvatarSize,
+      {
+        distance: CSSVar
+        size: CSSVar
+      }
+    >
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
-  } & ScopedColorVars
+  } & ScopedColorVars &
+    Record<ThemeColorCardToneKey_2, ColorCardVars>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
     label: FontVars<FontLabelSize>
     text: FontVars<FontTextSize>
   }
+  input: {
+    fontSize: CSSVar
+    lineHeight: CSSVar
+    letterSpacing: CSSVar
+    ascenderHeight: CSSVar
+    descenderHeight: CSSVar
+    gap: CSSVar
+    padding: CSSVar
+    text: {
+      focusRing: {
+        offset: CSSVar
+        width: CSSVar
+      }
+    }
+  }
   space: Record<Space, CSSVar>
 }
 
-export declare type Width = 'fill'
+export declare const vars: Vars
+
+export declare type Width = ContainerWidth
+
+export declare function width(props: WidthStyleProps): string
 
 export declare interface WidthStyleProps {
-  width?: ResponsiveProp<ContainerWidth | 'fill'>
+  width?: ResponsiveProp<Width>
 }
 
 export {}