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

package/dist/css.d.mts

@@ -1,4 +1,5 @@
 import {AvatarSize} from '@sanity/ui/theme'
+import {ColorHueKey} from '@sanity/color'
 import {ContainerWidth} from '@sanity/ui/theme'
 import {default as CSS_2} from 'csstype'
 import {FontCodeSize} from '@sanity/ui/theme'
@@ -6,27 +7,29 @@ import {FontHeadingSize} from '@sanity/ui/theme'
 import {FontLabelSize} from '@sanity/ui/theme'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
-import {Hue} from '@sanity/ui/theme'
+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 {RootTheme} from '@sanity/ui/theme'
 import {Shadow} from '@sanity/ui/theme'
 import {Space} from '@sanity/ui/theme'
-import {ThemeBoxShadow} from '@sanity/ui/theme'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {Tint} from '@sanity/ui/theme'
+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 | undefined
 
 /** @internal */
 export declare function _arrow(): string | undefined
 
-export declare function _arrowShape(): string | undefined
+export declare function _arrowShape(): string
 
-export declare function _arrowStroke(): string | undefined
+export declare function _arrowStroke(): string
 
 export declare function avatar(props: AvatarStyleProps): string | undefined
 
@@ -47,7 +50,7 @@ export declare type AvatarScopedVarName =
 export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
 
 export declare interface AvatarStyleProps {
-  color: ThemeColorAvatarColorKey
+  color: ThemeColorAvatarColorKey_2
   size: ResponsiveProp<AvatarSize>
 }
 
@@ -56,7 +59,7 @@ export declare function badge(props: BadgeStyleProps): string | undefined
 
 /** @public */
 export declare interface BadgeStyleProps extends RadiusStyleProps {
-  tone: ThemeColorStateToneKey
+  tone: ThemeColorStateToneKey_2
 }
 
 /** @public */
@@ -96,17 +99,16 @@ export declare interface BoxStyleProps
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
-    HeightStyleProps,
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
-    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
     WidthStyleProps {
+  height?: ResponsiveProp<BoxHeight>
   muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
@@ -118,68 +120,100 @@ export declare function button(props: ButtonStyleProps): string | undefined
 
 export declare function buttonLoadingBox(): string | undefined
 
-export declare type ButtonScopedVarName = '--button-box-shadow'
-
 export declare interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
     RadiusStyleProps,
     WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
+  mode?: ThemeColorButtonModeKey_2
+  tone?: ThemeColorStateToneKey_2
 }
 
 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-bg`
   | `--color-avatar-fg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-avatar-${ThemeColorAvatarColorKey_2}-bg`
+  | `--color-avatar-${ThemeColorAvatarColorKey_2}-fg`
   | `--color-backdrop`
-  | `--color-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
+  | `--color-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
   | `--color-bg`
   | `--color-border`
   | `--color-code-bg`
   | `--color-code-fg`
-  | `--color-code-token-atrule`
-  | `--color-code-token-attr-name`
-  | `--color-code-token-attr-value`
-  | `--color-code-token-attribute`
-  | `--color-code-token-boolean`
-  | `--color-code-token-builtin`
-  | `--color-code-token-cdata`
-  | `--color-code-token-char`
-  | `--color-code-token-class`
-  | `--color-code-token-class-name`
-  | `--color-code-token-comment`
-  | `--color-code-token-constant`
-  | `--color-code-token-deleted`
-  | `--color-code-token-doctype`
-  | `--color-code-token-entity`
-  | `--color-code-token-function`
-  | `--color-code-token-hexcode`
-  | `--color-code-token-id`
-  | `--color-code-token-important`
-  | `--color-code-token-inserted`
-  | `--color-code-token-keyword`
-  | `--color-code-token-number`
-  | `--color-code-token-operator`
-  | `--color-code-token-prolog`
-  | `--color-code-token-property`
-  | `--color-code-token-pseudo-class`
-  | `--color-code-token-pseudo-element`
-  | `--color-code-token-punctuation`
-  | `--color-code-token-regex`
-  | `--color-code-token-selector`
-  | `--color-code-token-string`
-  | `--color-code-token-symbol`
-  | `--color-code-token-tag`
-  | `--color-code-token-unit`
-  | `--color-code-token-url`
-  | `--color-code-token-variable`
   | `--color-fg`
   | `--color-focus-ring`
   | `--color-link-fg`
@@ -191,6 +225,42 @@ export declare type CardScopedVarName =
   | `--color-shadow-ambient`
   | `--color-skeleton-from`
   | `--color-skeleton-to`
+  | `--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`
@@ -219,8 +289,9 @@ export declare type CardScopedVarName =
 
 export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey | 'inherit'
+  selectable?: boolean
+  scheme?: ThemeColorSchemeKey_2
+  tone?: ThemeColorCardToneKey_2 | 'inherit'
 }
 
 export declare function checkbox(): string | undefined
@@ -246,8 +317,8 @@ export declare interface CodeStyleProps extends FontStyleProps {
 
 /** @public */
 export declare interface ColorAvatarColorVarNames {
-  bg: VarName
-  fg: VarName
+  bg: CSSVarName
+  fg: CSSVarName
 }
 
 /** @public */
@@ -257,7 +328,7 @@ export declare interface ColorAvatarColorVars {
 }
 
 /** @public */
-export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
+export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVars>
 
 /** @public */
 export declare interface ColorBadgeToneVars {
@@ -268,184 +339,176 @@ export declare interface ColorBadgeToneVars {
 }
 
 /** @public */
-export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
+export declare type ColorBadgeVars = Record<ThemeColorStateToneKey_2, ColorBadgeToneVars>
 
 export declare type ColorCardToneScopedVarName =
-  | `--color-${ThemeColorCardToneKey}-accent-fg`
-  | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
-  | `--color-${ThemeColorCardToneKey}-backdrop`
-  | `--color-${ThemeColorCardToneKey}-code-bg`
-  | `--color-${ThemeColorCardToneKey}-code-fg`
-  | `--color-${ThemeColorCardToneKey}-code-token-atrule`
-  | `--color-${ThemeColorCardToneKey}-code-token-attr-name`
-  | `--color-${ThemeColorCardToneKey}-code-token-attr-value`
-  | `--color-${ThemeColorCardToneKey}-code-token-attribute`
-  | `--color-${ThemeColorCardToneKey}-code-token-boolean`
-  | `--color-${ThemeColorCardToneKey}-code-token-builtin`
-  | `--color-${ThemeColorCardToneKey}-code-token-cdata`
-  | `--color-${ThemeColorCardToneKey}-code-token-char`
-  | `--color-${ThemeColorCardToneKey}-code-token-class`
-  | `--color-${ThemeColorCardToneKey}-code-token-class-name`
-  | `--color-${ThemeColorCardToneKey}-code-token-comment`
-  | `--color-${ThemeColorCardToneKey}-code-token-constant`
-  | `--color-${ThemeColorCardToneKey}-code-token-deleted`
-  | `--color-${ThemeColorCardToneKey}-code-token-doctype`
-  | `--color-${ThemeColorCardToneKey}-code-token-entity`
-  | `--color-${ThemeColorCardToneKey}-code-token-function`
-  | `--color-${ThemeColorCardToneKey}-code-token-hexcode`
-  | `--color-${ThemeColorCardToneKey}-code-token-id`
-  | `--color-${ThemeColorCardToneKey}-code-token-important`
-  | `--color-${ThemeColorCardToneKey}-code-token-inserted`
-  | `--color-${ThemeColorCardToneKey}-code-token-keyword`
-  | `--color-${ThemeColorCardToneKey}-code-token-number`
-  | `--color-${ThemeColorCardToneKey}-code-token-operator`
-  | `--color-${ThemeColorCardToneKey}-code-token-prolog`
-  | `--color-${ThemeColorCardToneKey}-code-token-property`
-  | `--color-${ThemeColorCardToneKey}-code-token-pseudo-class`
-  | `--color-${ThemeColorCardToneKey}-code-token-pseudo-element`
-  | `--color-${ThemeColorCardToneKey}-code-token-punctuation`
-  | `--color-${ThemeColorCardToneKey}-code-token-regex`
-  | `--color-${ThemeColorCardToneKey}-code-token-selector`
-  | `--color-${ThemeColorCardToneKey}-code-token-string`
-  | `--color-${ThemeColorCardToneKey}-code-token-symbol`
-  | `--color-${ThemeColorCardToneKey}-code-token-tag`
-  | `--color-${ThemeColorCardToneKey}-code-token-unit`
-  | `--color-${ThemeColorCardToneKey}-code-token-url`
-  | `--color-${ThemeColorCardToneKey}-code-token-variable`
-  | `--color-${ThemeColorCardToneKey}-focus-ring`
-  | `--color-${ThemeColorCardToneKey}-link-fg`
-  | `--color-${ThemeColorCardToneKey}-muted-bg`
-  | `--color-${ThemeColorCardToneKey}-muted-fg`
-  | `--color-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
-  | `--color-${ThemeColorCardToneKey}-shadow-outline`
-  | `--color-${ThemeColorCardToneKey}-shadow-umbra`
-  | `--color-${ThemeColorCardToneKey}-shadow-penumbra`
-  | `--color-${ThemeColorCardToneKey}-shadow-ambient`
-  | `--color-${ThemeColorCardToneKey}-skeleton-from`
-  | `--color-${ThemeColorCardToneKey}-skeleton-to`
+  | `--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}-${ThemeColorCardToneKey}-accent-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-atrule`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attr-name`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attr-value`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attribute`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-boolean`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-builtin`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-cdata`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-char`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-class`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-class-name`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-comment`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-constant`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-deleted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-doctype`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-entity`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-function`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-hexcode`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-id`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-important`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-inserted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-keyword`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-number`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-operator`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-prolog`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-property`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-pseudo-class`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-pseudo-element`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-punctuation`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-regex`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-selector`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-string`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-symbol`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-tag`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-unit`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-url`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-variable`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
+  | `--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`
 
 /** @public */
 export declare interface ColorCardVarNames {
   accent: {
-    fg: VarName
-  }
-  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
-  backdrop: VarName
-  code: {
-    bg: VarName
-    fg: VarName
-    token: {
-      atrule: VarName
-      attrName: VarName
-      attrValue: VarName
-      attribute: VarName
-      boolean: VarName
-      builtin: VarName
-      cdata: VarName
-      char: VarName
-      class: VarName
-      className: VarName
-      comment: VarName
-      constant: VarName
-      deleted: VarName
-      doctype: VarName
-      entity: VarName
-      function: VarName
-      hexcode: VarName
-      id: VarName
-      important: VarName
-      inserted: VarName
-      keyword: VarName
-      number: VarName
-      operator: VarName
-      prolog: VarName
-      property: VarName
-      pseudoClass: VarName
-      pseudoElement: VarName
-      punctuation: VarName
-      regex: VarName
-      selector: VarName
-      string: VarName
-      symbol: VarName
-      tag: VarName
-      unit: VarName
-      url: VarName
-      variable: VarName
-    }
+    fg: CSSVarName
   }
-  focusRing: VarName
+  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames>
+  backdrop: CSSVarName
+  focusRing: CSSVarName
   link: {
-    fg: VarName
+    fg: CSSVarName
   }
   muted: {
-    bg: VarName
-    fg: VarName
+    bg: CSSVarName
+    fg: CSSVarName
   }
   shadow: {
-    outline: VarName
-    umbra: VarName
-    penumbra: VarName
-    ambient: VarName
+    outline: CSSVarName
+    umbra: CSSVarName
+    penumbra: CSSVarName
+    ambient: CSSVarName
   }
   skeleton: {
-    from: VarName
-    to: VarName
+    from: CSSVarName
+    to: CSSVarName
+  }
+  token: {
+    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
   }
   solid: ColorVariantVarNames
   tinted: ColorVariantVarNames
@@ -458,48 +521,6 @@ export declare interface ColorCardVars {
   }
   avatar: ColorAvatarVars
   backdrop: CSSVar
-  code: {
-    bg: CSSVar
-    fg: CSSVar
-    token: {
-      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
-    }
-  }
   focusRing: CSSVar
   link: {
     fg: CSSVar
@@ -518,6 +539,44 @@ export declare interface ColorCardVars {
     from: CSSVar
     to: CSSVar
   }
+  token: {
+    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
+  }
   solid: ColorVariantVars
   tinted: ColorVariantVars
 }
@@ -525,25 +584,25 @@ export declare interface ColorCardVars {
 /** @public */
 export declare interface ColorElementVarNames {
   bg: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
   border: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
   fg: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
 }
 
@@ -584,23 +643,42 @@ export declare interface ColorInputStateVars {
 }
 
 /** @public */
-export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
+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 */
-export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
+declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
 
 export declare interface ColorVariantVarNames
   extends ColorElementVarNames,
-    Record<ThemeColorStateToneKey, ColorElementVarNames> {}
+    Record<ThemeColorStateToneKey_2, ColorElementVarNames> {}
 
 /** @public */
 export declare interface ColorVariantVars
-  extends Record<ThemeColorStateToneKey, ColorElementVars>,
+  extends Record<ThemeColorStateToneKey_2, ColorElementVars>,
     ColorElementVars {}
 
-export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export declare function compilePalette(): string
+export declare function compilePalette(config: PaletteConfig_2): string
 
 /** @public */
 export declare function compileSystem(): string
@@ -617,11 +695,31 @@ 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(${VarName})`
+export declare type CSSVar = `var(${CSSVarName})`
 
 /** @public */
-export declare interface CustomCSSProperties extends Record<VarName, string> {}
+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 | undefined
 
@@ -655,6 +753,23 @@ 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'
 
@@ -723,23 +838,7 @@ export declare interface FlexStyleProps {
 /**
  * @public
  */
-export declare type FlexValue =
-  | 'none'
-  | 'auto'
-  | 'initial'
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
+export declare type FlexValue = number | 'none' | 'auto' | 'initial'
 
 /**
  * @public
@@ -751,12 +850,12 @@ export declare function font(props: FontStyleProps): string | undefined
 
 /** @public */
 export declare interface FontSizeVarNames {
-  ascenderHeight: VarName
-  descenderHeight: VarName
-  fontSize: VarName
-  lineHeight: VarName
-  letterSpacing: VarName
-  iconSize: VarName
+  ascenderHeight: CSSVarName
+  descenderHeight: CSSVarName
+  fontSize: CSSVarName
+  lineHeight: CSSVarName
+  letterSpacing: CSSVarName
+  iconSize: CSSVarName
 }
 
 /** @public */
@@ -776,16 +875,14 @@ export declare interface FontStyleProps {
 }
 
 export declare interface FontVarNames<Size extends number> {
-  family: VarName
+  family: CSSVarName
   sizes: Record<Size, FontSizeVarNames>
-  weight: Record<FontWeight, VarName>
 }
 
 /** @public */
 export declare interface FontVars<Size extends number> {
   family: CSSVar
   sizes: Record<Size, FontSizeVars>
-  weight: Record<FontWeight, CSSVar>
 }
 
 /** @public */
@@ -798,8 +895,6 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
-export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
-
 export declare function grid(props: GridStyleProps): string | undefined
 
 /**
@@ -887,19 +982,26 @@ export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyle
   size?: ResponsiveProp<HeadingSize>
 }
 
-/** @public */
-export declare function height(props: HeightStyleProps): string | undefined
+declare type Hue = (typeof HUES)[number]
 
-export declare interface HeightStyleProps {
-  height?: ResponsiveProp<BoxHeight>
-}
+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 | undefined
+export declare function _inputElement(): string
 
-export declare function _inputPresentation(): string | undefined
+export declare function _inputPresentation(): string
 
 /** @public */
 export declare type InputScopedVarName =
@@ -967,13 +1069,13 @@ export declare interface LabelStyleProps extends FontStyleProps {
 
 export declare type LegacyCardScopedVarName =
   | `--card-accent-fg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey_2}-bg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey_2}-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-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`
@@ -1014,21 +1116,13 @@ export declare interface MarginStyleProps {
 export declare function maxWidth(props: MaxWidthStyleProps): string
 
 export declare interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
+  maxWidth?: ResponsiveProp<ContainerWidth>
 }
 
 export declare function menu(): string | undefined
 
 export declare function menuDivider(): string | undefined
 
-export declare type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
-
-export declare function minWidth(props: MinWidthStyleProps): string
-
-export declare interface MinWidthStyleProps {
-  minWidth?: ResponsiveProp<MinWidth>
-}
-
 export declare function overflow(props: OverflowStyleProps): string | undefined
 
 /** @public */
@@ -1051,8 +1145,26 @@ export declare interface PaddingStyleProps {
   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}-${Tint}`
+export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
 
 /** @public */
 export declare type PointerEvents = 'auto' | 'none'
@@ -1066,8 +1178,6 @@ export declare interface PointerEventsStyleProps {
 
 export declare function popover(): string | undefined
 
-export declare function popoverCard(): string | undefined
-
 /** @public */
 export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
 
@@ -1079,19 +1189,10 @@ export declare interface PositionStyleProps {
 }
 
 /** @public */
-export declare type Properties = PropertiesWithVarsAndNested & {
-  '@media'?: Record<string, PropertiesWithVarsAndNested>
-}
-
-/** @public */
-export declare type PropertiesWithVars = CSS_2.Properties &
-  Partial<Record<VarName, string>> & {
-    _prefix?: boolean
-  }
-
-/** @public */
-export declare type PropertiesWithVarsAndNested = PropertiesWithVars & {
-  '@nest'?: Record<string, PropertiesWithVars>
+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 px(value: number): string
@@ -1103,7 +1204,7 @@ export declare function radius(props: RadiusStyleProps): string | undefined
 
 /** @public */
 export declare interface RadiusStyleProps {
-  radius?: ResponsiveProp<Radius | 'full'>
+  radius?: ResponsiveProp<Radius>
 }
 
 export declare function rem(value: number): string
@@ -1111,28 +1212,61 @@ export declare function rem(value: number): string
 /** @public */
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
-export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+/**
+ * @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 */
 export declare interface Rules {
   [className: string]: Properties
 }
 
-export declare function scopeClassName(className: string | undefined): string | undefined
-
 export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
   accent: {
-    fg: VarName
+    fg: CSSVarName
   }
-  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
-  bg: VarName
-  border: VarName
-  fg: VarName
+  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
+  bg: CSSVarName
+  border: CSSVarName
+  fg: CSSVarName
   input: {
-    bg: VarName
-    border: VarName
-    fg: VarName
-    placeholder: VarName
+    bg: CSSVarName
+    border: CSSVarName
+    fg: CSSVarName
+    placeholder: CSSVarName
   }
 }
 
@@ -1156,7 +1290,7 @@ export declare function _selectable(props: SelectableStyleProps): string | undef
 
 /** @internal */
 export declare interface SelectableStyleProps extends RadiusStyleProps {
-  tone?: ThemeColorStateToneKey
+  tone?: ThemeColorStateToneKey_2
 }
 
 export declare function selectPresentation(): string | undefined
@@ -1181,28 +1315,6 @@ export declare function spinner(): string | undefined
 
 export declare function srOnly(): string | undefined
 
-/** @public */
-export declare function stack(): string | undefined
-
-/** @public */
-export declare type Style = {
-  keyframes?: StyleKeyframes
-  layers?: StyleLayers
-  rules?: StyleRules
-}
-
-/** @public */
-export declare type StyleKeyframes = Record<string, Record<string, Properties>>
-
-/** @public */
-export declare type StyleLayers = Record<string, StyleRules>
-
-/** @public */
-export declare type StyleRules = Partial<Record<StyleSelector, Properties>>
-
-/** @public */
-export declare type StyleSelector = `.${string}` | `#${string}` | `:root`
-
 export declare function _switch(): string | undefined
 
 export declare function _switchElement(): string | undefined
@@ -1264,6 +1376,543 @@ export declare interface TextStyleProps extends FlexItemStyleProps, FontStylePro
   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`
@@ -1342,6 +1991,30 @@ export declare type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+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
@@ -1352,7 +2025,12 @@ export declare function toastLoadingBarMask(): string | undefined
 
 export declare function toastLoadingBarProgress(): string | undefined
 
-export declare function toBoxShadow(value: ThemeBoxShadow | undefined): string
+export declare function toBoxShadow(value: ThemeBoxShadow_2 | undefined): string
+
+/** @public */
+declare interface Tokens {
+  color: ColorTokens
+}
 
 export declare function tooltip(): string | undefined
 
@@ -1360,38 +2038,25 @@ export declare function tooltipCard(): string | undefined
 
 export declare function treeItem(): string | undefined
 
-/** @public */
-export declare type VarName =
-  | AvatarScopedVarName
-  | LegacyCardScopedVarName
-  | PaletteVarName
-  | ThemeVarName
-  | ColorCardVarName
-  | ButtonScopedVarName
-  | ColorCardToneScopedVarName
-  | CardScopedVarName
-  | ElementColorVariantScopedVarName
-  | InputScopedVarName
-  | SwitchScopedVarName
+export declare function v3_v2(theme_v3: Theme_v3): RootTheme_v2
 
 /** @public */
 export declare interface VarNames {
-  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
+  color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
     ScopedColorVarNames &
-    Record<ThemeColorCardToneKey, ColorCardVarNames>
-  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
+    Record<ThemeColorCardToneKey_2, ColorCardVarNames>
   avatar: {
-    distance: VarName
+    distance: CSSVarName
     focusRing: {
-      offset: VarName
-      width: VarName
+      offset: CSSVarName
+      width: CSSVarName
     }
-    size: VarName
+    size: CSSVarName
     sizes: Record<
       AvatarSize,
       {
-        distance: VarName
-        size: VarName
+        distance: CSSVarName
+        size: CSSVarName
       }
     >
   }
@@ -1402,16 +2067,15 @@ export declare interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
-    fontSize: VarName
-    lineHeight: VarName
-    letterSpacing: VarName
-    ascenderHeight: VarName
-    descenderHeight: VarName
-    gap: VarName
-    padding: VarName
+    fontSize: CSSVarName
+    lineHeight: CSSVarName
+    letterSpacing: CSSVarName
+    ascenderHeight: CSSVarName
+    descenderHeight: CSSVarName
+    gap: CSSVarName
+    padding: CSSVarName
   }
-  radius: Record<Radius, VarName>
-  space: Record<Space, VarName>
+  space: Record<Space, CSSVarName>
 }
 
 export declare const varNames: VarNames
@@ -1433,8 +2097,7 @@ export declare interface Vars {
     dark: ColorSchemeVars
     light: ColorSchemeVars
   } & ScopedColorVars &
-    Record<ThemeColorCardToneKey, ColorCardVars>
-  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
+    Record<ThemeColorCardToneKey_2, ColorCardVars>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
@@ -1456,13 +2119,12 @@ export declare interface Vars {
       }
     }
   }
-  radius: Record<Radius, CSSVar>
   space: Record<Space, CSSVar>
 }
 
 export declare const vars: Vars
 
-export declare type Width = ContainerWidth | 'fill'
+export declare type Width = ContainerWidth
 
 export declare function width(props: WidthStyleProps): string