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

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,18 +7,20 @@ 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
 
@@ -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 */
@@ -100,7 +103,6 @@ export declare interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
-    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
@@ -125,61 +127,95 @@ export declare interface ButtonStyleProps
     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 +227,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 +291,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
@@ -257,7 +330,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,167 +341,121 @@ 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>
+  avatar: Record<ThemeColorAvatarColorKey_2, 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
-    }
-  }
   focusRing: VarName
   link: {
     fg: VarName
@@ -447,6 +474,44 @@ export declare interface ColorCardVarNames {
     from: VarName
     to: 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
+  }
   solid: ColorVariantVarNames
   tinted: ColorVariantVarNames
 }
@@ -458,48 +523,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 +541,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
 }
@@ -584,23 +645,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, ColorCardVars> {}
+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, 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,6 +697,13 @@ 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})`
 
@@ -655,6 +742,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'
 
@@ -778,14 +882,12 @@ export declare interface FontStyleProps {
 export declare interface FontVarNames<Size extends number> {
   family: VarName
   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 */
@@ -894,6 +996,20 @@ export declare interface HeightStyleProps {
   height?: ResponsiveProp<BoxHeight>
 }
 
+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
 
@@ -967,13 +1083,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`
@@ -1021,14 +1137,6 @@ 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 +1159,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 +1192,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'
 
@@ -1111,7 +1235,42 @@ 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 {
@@ -1124,7 +1283,7 @@ export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'av
   accent: {
     fg: VarName
   }
-  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
+  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
   bg: VarName
   border: VarName
   fg: VarName
@@ -1156,7 +1315,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,9 +1340,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
@@ -1264,6 +1420,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 +2035,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 +2069,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,6 +2082,8 @@ 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 type VarName =
   | AvatarScopedVarName
@@ -1376,9 +2100,9 @@ export declare type VarName =
 
 /** @public */
 export declare interface VarNames {
-  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
+  color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
     ScopedColorVarNames &
-    Record<ThemeColorCardToneKey, ColorCardVarNames>
+    Record<ThemeColorCardToneKey_2, ColorCardVarNames>
   container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
     distance: VarName
@@ -1433,7 +2157,7 @@ export declare interface Vars {
     dark: ColorSchemeVars
     light: ColorSchemeVars
   } & ScopedColorVars &
-    Record<ThemeColorCardToneKey, ColorCardVars>
+    Record<ThemeColorCardToneKey_2, ColorCardVars>
   container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>