@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

package/dist/theme.d.ts

@@ -6,46 +6,72 @@ import type {StyledObject} from 'styled-components'
 /**
  * @public
  */
-export declare interface BaseTheme<Styles extends {} = {}> {
+export declare interface BaseTheme {
+  _version?: 0
+  /**
+   * @deprecated Use `v2.avatar` instead
+   */
   avatar: ThemeAvatar
+  /**
+   * @deprecated Use `v2.button` instead
+   */
   button: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
     textWeight: ThemeFontWeightKey
   }
-  card: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
-    shadow: {
-      outline: number
-    }
-  }
+  /**
+   * @deprecated Use `v2.color` instead
+   */
   color: ThemeColorSchemes
+  /**
+   * @deprecated Use `v2.container` instead
+   */
   container: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
+  /**
+   * @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
+   */
   focusRing: {
     offset: number
     width: number
   }
+  /**
+   * @deprecated Use `v2.font` instead
+   */
   fonts: ThemeFonts
+  /**
+   * @deprecated Use `v2.input` instead
+   */
   input: ThemeInput
   /**
    * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
    * @beta
+   * @deprecated Use `v2.layer` instead
    */
   layer?: ThemeLayer
+  /**
+   * @deprecated Use `v2.media` instead
+   */
   media: number[]
+  /**
+   * @deprecated Use `v2.radius` instead
+   */
   radius: number[]
+  /**
+   * @deprecated Use `v2.shadow` instead
+   */
   shadows: Array<ThemeShadow | null>
+  /**
+   * @deprecated Use `v2.space` instead
+   */
   space: number[]
-  styles?: Styles
+  /**
+   * @deprecated Use `v2.style` instead
+   */
+  styles?: ThemeStyles
+  v2?: RootTheme_v2
 }
 
 /**
+ * @public
  * @deprecated Use `ThemeBoxShadow` instead
  */
 export declare type BoxShadow = ThemeBoxShadow
@@ -53,27 +79,41 @@ export declare type BoxShadow = ThemeBoxShadow
 /** @internal */
 export declare function buildTheme(config?: ThemeConfig): RootTheme
 
+/** @internal */
 export declare const COLOR_CONFIG_AVATAR_COLORS: readonly ['*', ...ColorHueKey[]]
 
-export declare const COLOR_CONFIG_BASE_KEYS: readonly [
+/** @internal */
+export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
+
+/** @internal */
+export declare const COLOR_CONFIG_CARD_KEYS: readonly [
   '_hue',
   'bg',
   'fg',
   'border',
   'focusRing',
   'muted/fg',
+  'accent/fg',
   'link/fg',
   'code/bg',
   'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+  'status/dot',
+  'status/icon',
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
   'shadow/outline',
   'shadow/umbra',
   'shadow/penumbra',
   'shadow/ambient',
-  'skeleton/from',
-  'skeleton/to',
 ]
 
-export declare const COLOR_CONFIG_BASE_TONES: readonly [
+/** @internal */
+export declare const COLOR_CONFIG_CARD_TONES: readonly [
   '*',
   'transparent',
   'default',
@@ -83,10 +123,10 @@ export declare const COLOR_CONFIG_BASE_TONES: readonly [
   'critical',
 ]
 
-export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
-
+/** @internal */
 export declare const COLOR_CONFIG_INPUT_MODES: readonly ['*', 'default', 'invalid']
 
+/** @internal */
 export declare const COLOR_CONFIG_INPUT_STATES: readonly [
   '*',
   'enabled',
@@ -95,6 +135,7 @@ export declare const COLOR_CONFIG_INPUT_STATES: readonly [
   'disabled',
 ]
 
+/** @internal */
 export declare const COLOR_CONFIG_STATE_KEYS: readonly [
   '_hue',
   'bg',
@@ -102,13 +143,17 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
   'border',
   'focusRing',
   'muted/fg',
+  'accent/fg',
   'link/fg',
   'code/bg',
   'code/fg',
   'skeleton/from',
   'skeleton/to',
+  'status/dot',
+  'status/icon',
 ]
 
+/** @internal */
 export declare const COLOR_CONFIG_STATE_TONES: readonly [
   '*',
   'default',
@@ -118,6 +163,7 @@ export declare const COLOR_CONFIG_STATE_TONES: readonly [
   'critical',
 ]
 
+/** @internal */
 export declare const COLOR_CONFIG_STATES: readonly [
   '*',
   'enabled',
@@ -127,28 +173,40 @@ export declare const COLOR_CONFIG_STATES: readonly [
   'disabled',
 ]
 
+/** @public */
 export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
+/** @public */
 export declare type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
 
-export declare type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
+/** @public */
+export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
 
-export declare type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+/** @public */
+export declare type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
 
-export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+/** @public */
+export declare type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
 
+/** @public */
 export declare type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
 
+/** @public */
 export declare type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]
 
+/** @public */
 export declare type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
 
+/** @public */
 export declare type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
 
+/** @public */
 export declare type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
 
+/** @public */
 export declare type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
 
+/** @public */
 export declare type ColorConfigValue =
   | `black`
   | `white`
@@ -170,14 +228,30 @@ export declare function createColorTheme(
 ): ThemeColorSchemes
 
 /**
- * Workaround types that are missing in v6
+ * Work around types that are missing in `styled-components@6`
  * https://github.com/styled-components/styled-components/issues/4062
  * @internal
  * */
 export declare type CSSObject = StyledObject<any>
 
+/**
+ * @public
+ */
+export declare const defaultTheme: BaseTheme
+
+/** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number
 
+/** @internal */
+export declare function getScopedTheme(
+  themeProp: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+): Theme
+
+/** @public */
+export declare function getTheme_v2(theme: Theme): Theme_v2
+
 /**
  * @internal
  */
@@ -197,32 +271,46 @@ export declare interface HSL {
  */
 export declare function hslToRgb(hsl: HSL): RGB
 
+/** @internal */
+export declare function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme
+
+/** @internal */
+export declare function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2
+
 /** @internal */
 export declare function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey
 
 /** @internal */
 export declare function isColorButtonMode(str: string): str is ThemeColorButtonModeKey
 
-export declare function isColorConfigBaseKey(str: string): str is ColorConfigBaseKey
+/** @internal */
+export declare function isColorConfigBaseKey(str: string): str is ColorConfigCardKey
 
-export declare function isColorConfigBaseTone(str: string): str is ColorConfigBaseTone
+/** @internal */
+export declare function isColorConfigBaseTone(str: string): str is ColorConfigCardTone
 
+/** @internal */
 export declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey
 
+/** @internal */
 export declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey
 
+/** @internal */
 export declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone
 
 /** @internal */
 export declare function isColorHueKey(str: string): str is ColorHueKey
 
+/** @internal */
 export declare function isColorOpacityValue(str: string): str is ColorConfigOpacityValue
 
 /** @internal */
 export declare function isColorTintKey(str: string): str is ColorTintKey
 
+/** @internal */
 export declare function isColorTokenValue(str: string): str is ColorConfigValue
 
+/** @internal */
 export declare function isColorValue(str: string): str is 'black' | 'white'
 
 /**
@@ -297,7 +385,41 @@ export declare function rgbToHsl({r, g, b}: RGB): HSL
 /**
  * @public
  */
-export declare type RootTheme = BaseTheme<ThemeStyles>
+export declare type RootTheme = BaseTheme
+
+/**
+ * @public
+ */
+export declare interface RootTheme_v2 {
+  _version: 2
+  avatar: ThemeAvatar
+  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
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+  style?: ThemeStyles
+}
 
 /**
  * Apply the \`screen\` blend mode
@@ -307,14 +429,9 @@ export declare type RootTheme = BaseTheme<ThemeStyles>
 declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
-/**
- * @public
- */
-export declare const studioTheme: RootTheme
-
 /**
  * @deprecated Use `ThemeStyles` instead
- * @public
+ * @internal
  */
 export declare type Styles = ThemeStyles
 
@@ -322,16 +439,26 @@ export declare type Styles = ThemeStyles
  * @public
  */
 export declare interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
+  sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
     color: ThemeColor
+    v2?: Theme_v2
   }
 }
 
-/** @internal */
+/** @public */
 export declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
 
-/** @internal */
-export declare const THEME_COLOR_BASE_TONES: readonly [
+/** @public */
+export declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
+
+/** @public */
+export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
+
+/** @public */
+export declare const THEME_COLOR_CARD_TONES: readonly [
   'transparent',
   'default',
   'primary',
@@ -340,16 +467,10 @@ export declare const THEME_COLOR_BASE_TONES: readonly [
   'critical',
 ]
 
-/** @internal */
-export declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
-
-/** @internal */
-export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
-
-/** @internal */
+/** @public */
 export declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
 
-/** @internal */
+/** @public */
 export declare const THEME_COLOR_INPUT_STATES: readonly [
   'enabled',
   'hovered',
@@ -357,7 +478,7 @@ export declare const THEME_COLOR_INPUT_STATES: readonly [
   'disabled',
 ]
 
-/** @internal */
+/** @public */
 export declare const THEME_COLOR_STATE_TONES: readonly [
   'default',
   'primary',
@@ -366,7 +487,7 @@ export declare const THEME_COLOR_STATE_TONES: readonly [
   'critical',
 ]
 
-/** @internal */
+/** @public */
 export declare const THEME_COLOR_STATES: readonly [
   'enabled',
   'hovered',
@@ -375,6 +496,13 @@ export declare const THEME_COLOR_STATES: readonly [
   'disabled',
 ]
 
+/**
+ * @public
+ */
+export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
+  color: ThemeColorCard_v2
+}
+
 /**
  * @public
  */
@@ -395,131 +523,126 @@ export declare type ThemeBoxShadow = [number, number, number, number]
 
 /**
  * @public
+ * @deprecated Use `ThemeColor_v2` instead.
  */
-export declare interface ThemeColor {
-  /** @internal */
-  _blend?: ThemeColorBlendModeKey
-  _dark?: boolean
-  avatar?: ThemeColorAvatar
-  badge?: ThemeColorBadge
+export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'>> {
   base: ThemeColorBase
   button: ThemeColorButton
   card: ThemeColorCard
-  input: ThemeColorInput
-  kbd?: ThemeColorKBD
-  selectable?: ThemeColorSelectable
-  syntax: ThemeColorSyntax
-  /** @deprecated Use `_dark` instead */
   dark: boolean
-  /** @deprecated */
+  focusRing?: string
+  input: ThemeColorInput
   muted: ThemeColorMuted
-  /** @deprecated */
-  spot: ThemeColorSpot
-  /** @deprecated */
+  selectable?: ThemeColorSelectable
   solid: ThemeColorSolid
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
 }
 
-export declare interface ThemeColorAvatar {
-  gray: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  blue: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  purple: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  magenta: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  red: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  orange: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  yellow: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  green: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  cyan: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
+/**
+ * @public
+ */
+export declare interface ThemeColorAvatar_v2 {
+  gray: ThemeColorAvatarHue_v2
+  blue: ThemeColorAvatarHue_v2
+  purple: ThemeColorAvatarHue_v2
+  magenta: ThemeColorAvatarHue_v2
+  red: ThemeColorAvatarHue_v2
+  orange: ThemeColorAvatarHue_v2
+  yellow: ThemeColorAvatarHue_v2
+  green: ThemeColorAvatarHue_v2
+  cyan: ThemeColorAvatarHue_v2
 }
 
-/** @internal */
+/** @public */
 export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
 
-export declare interface ThemeColorAvatarTokens {
+/**
+ * @public
+ */
+export declare interface ThemeColorAvatarHue_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+}
+
+export declare interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
 }
 
-export declare interface ThemeColorBadge {
-  default: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  primary: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  positive: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  caution: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
-  critical: {
-    _blend?: ThemeColorBlendModeKey
-    bg: string
-    fg: string
-  }
+export declare interface ThemeColorAvatarTokens {
+  '*'?: ThemeColorAvatarHueTokens
+  gray?: ThemeColorAvatarHueTokens
+  blue?: ThemeColorAvatarHueTokens
+  purple?: ThemeColorAvatarHueTokens
+  magenta?: ThemeColorAvatarHueTokens
+  red?: ThemeColorAvatarHueTokens
+  orange?: ThemeColorAvatarHueTokens
+  yellow?: ThemeColorAvatarHueTokens
+  green?: ThemeColorAvatarHueTokens
+  cyan?: ThemeColorAvatarHueTokens
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorBadge_v2 {
+  default: ThemeColorBadgeTone_v2
+  primary: ThemeColorBadgeTone_v2
+  positive: ThemeColorBadgeTone_v2
+  caution: ThemeColorBadgeTone_v2
+  critical: ThemeColorBadgeTone_v2
+}
+
+export declare interface ThemeColorBadgeTokens {
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
 }
 
 export declare interface ThemeColorBadgeTokens {
+  '*'?: ThemeColorBadgeToneTokens
+  default?: ThemeColorBadgeToneTokens
+  primary?: ThemeColorBadgeToneTokens
+  positive?: ThemeColorBadgeToneTokens
+  caution?: ThemeColorBadgeToneTokens
+  critical?: ThemeColorBadgeToneTokens
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+export declare interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
 }
 
 /**
  * @public
+ * @deprecated Use `ThemeColorCard_v2` instead.
  */
 export declare interface ThemeColorBase {
   bg: string
   fg: string
   border: string
   focusRing: string
+  backdrop?: string
   shadow: {
     outline: string
     umbra: string
@@ -532,29 +655,18 @@ export declare interface ThemeColorBase {
   }
 }
 
-export declare interface ThemeColorBaseTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  border?: ThemeColorTokenValue
+export declare interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
+  backdrop?: ThemeColorTokenValue
   shadow?: {
     outline?: ThemeColorTokenValue
     umbra?: ThemeColorTokenValue
     penumbra?: ThemeColorTokenValue
     ambient?: ThemeColorTokenValue
   }
-  skeleton?: {
-    from?: ThemeColorTokenValue
-    to?: ThemeColorTokenValue
-  }
 }
 
-/** @internal */
-export declare type ThemeColorBaseToneKey = (typeof THEME_COLOR_BASE_TONES)[number]
-
-/** @internal */
+/** @public */
 export declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
 
 /**
@@ -614,6 +726,7 @@ export declare interface ThemeColorBuilderOpts {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorButton {
   default: ThemeColorButtonTones
@@ -621,17 +734,27 @@ export declare interface ThemeColorButton {
   bleed: ThemeColorButtonTones
 }
 
-/** @internal */
+/**
+ * @public
+ */
+export declare interface ThemeColorButton_v2 {
+  default: ThemeColorButtonTones_v2
+  ghost: ThemeColorButtonTones_v2
+  bleed: ThemeColorButtonTones_v2
+}
+
+/** @public */
 export declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
 
 /**
- * @deprecated Use `ThemeColorGenericState` instead.
  * @public
+ * @deprecated Use `ThemeColorGenericState` instead.
  */
 export declare type ThemeColorButtonState = ThemeColorGenericState
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorButtonStates {
   enabled: ThemeColorGenericState
@@ -641,6 +764,17 @@ export declare interface ThemeColorButtonStates {
   disabled: ThemeColorGenericState
 }
 
+/**
+ * @public
+ */
+export declare interface ThemeColorButtonStates_v2 {
+  enabled: ThemeColorState_v2
+  hovered: ThemeColorState_v2
+  pressed: ThemeColorState_v2
+  selected: ThemeColorState_v2
+  disabled: ThemeColorState_v2
+}
+
 export declare interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
   _hue?: ColorHueKey
@@ -649,6 +783,7 @@ export declare interface ThemeColorButtonTokens
 /**
  * TODO: Rename to `ThemeColorButtonMode`.
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorButtonTones {
   default: ThemeColorButtonStates
@@ -659,8 +794,21 @@ export declare interface ThemeColorButtonTones {
 }
 
 /**
+ * TODO: Rename to `ThemeColorButtonMode`.
  * @public
  */
+export declare interface ThemeColorButtonTones_v2 {
+  default: ThemeColorButtonStates_v2
+  primary: ThemeColorButtonStates_v2
+  positive: ThemeColorButtonStates_v2
+  caution: ThemeColorButtonStates_v2
+  critical: ThemeColorButtonStates_v2
+}
+
+/**
+ * @public
+ * @deprecated
+ */
 export declare interface ThemeColorCard {
   enabled: ThemeColorGenericState
   hovered: ThemeColorGenericState
@@ -670,13 +818,33 @@ export declare interface ThemeColorCard {
 }
 
 /**
- * @deprecated Use `ThemeColorGenericState` instead.
  * @public
  */
+export 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
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorGenericState` instead.
+ */
 export declare type ThemeColorCardState = ThemeColorGenericState
 
+/** @public */
+export declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
+
 /**
  * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export declare interface ThemeColorGenericState {
   /** @internal */
@@ -710,32 +878,57 @@ export declare interface ThemeColorGenericState {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorInput {
   default: ThemeColorInputStates
   invalid: ThemeColorInputStates
 }
 
-/** @internal */
+/**
+ * @public
+ */
+export declare interface ThemeColorInput_v2 {
+  default: ThemeColorInputStates_v2
+  invalid: ThemeColorInputStates_v2
+}
+
+/** @public */
 export declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorInputState {
   _blend?: ThemeColorBlendModeKey
   bg: string
   bg2: string
+  border: string
   fg: string
+  placeholder: string
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInputState_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
   border: string
+  fg: string
+  muted: {
+    bg: string
+  }
   placeholder: string
 }
 
-/** @internal */
+/** @public */
 export declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ThemeColorInputStates {
   enabled: ThemeColorInputState
@@ -744,13 +937,25 @@ export declare interface ThemeColorInputStates {
   readOnly: ThemeColorInputState
 }
 
+/**
+ * @public
+ */
+export declare interface ThemeColorInputStates_v2 {
+  enabled: ThemeColorInputState_v2
+  disabled: ThemeColorInputState_v2
+  hovered: ThemeColorInputState_v2
+  readOnly: ThemeColorInputState_v2
+}
+
 export declare interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
-  bg2?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  muted?: {
+    bg?: ThemeColorTokenValue
+  }
   placeholder?: ThemeColorTokenValue
 }
 
@@ -759,8 +964,10 @@ export declare interface ThemeColorInputTokens
   _hue?: ColorHueKey
 }
 
+/**
+ * @public
+ */
 export declare interface ThemeColorKBD {
-  _blend?: ThemeColorBlendModeKey
   bg: string
   fg: string
   border: string
@@ -795,8 +1002,9 @@ export declare interface ThemeColorMutedTone {
  * @public
  * @deprecated Use `ThemeColorBaseToneKey` instead.
  */
-export declare type ThemeColorName = ThemeColorBaseToneKey
+export declare type ThemeColorName = ThemeColorCardToneKey
 
+/** @public */
 export declare type ThemeColorPalette = {
   black: string | ColorTint
   white: string | ColorTint
@@ -804,8 +1012,14 @@ export declare type ThemeColorPalette = {
 
 /**
  * @public
+ * @deprecated Use `ThemeColorScheme_v2` instead.
  */
-export declare type ThemeColorScheme = Record<ThemeColorBaseToneKey, ThemeColor>
+export declare type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
+
+/**
+ * @public
+ */
+export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
 /**
  * @public
@@ -814,12 +1028,19 @@ export declare type ThemeColorSchemeKey = 'dark' | 'light'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorSchemes_v2` instead.
  */
 export declare type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>
 
 /**
  * @public
  */
+export declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
 export declare interface ThemeColorSelectable {
   default: ThemeColorSelectableStates
   primary: ThemeColorSelectableStates
@@ -829,13 +1050,25 @@ export declare interface ThemeColorSelectable {
 }
 
 /**
- * @deprecated Use `ThemeColorGenericState` instead.
  * @public
  */
+export declare interface ThemeColorSelectable_v2 {
+  default: ThemeColorSelectableStates_v2
+  primary: ThemeColorSelectableStates_v2
+  positive: ThemeColorSelectableStates_v2
+  caution: ThemeColorSelectableStates_v2
+  critical: ThemeColorSelectableStates_v2
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
 export declare type ThemeColorSelectableState = ThemeColorGenericState
 
 /**
  * @public
+ * @deprecated Use `ThemeColorSelectableStates_v2` instead.
  */
 export declare interface ThemeColorSelectableStates {
   enabled: ThemeColorSelectableState
@@ -845,6 +1078,25 @@ export declare interface ThemeColorSelectableStates {
   disabled: ThemeColorSelectableState
 }
 
+/**
+ * @public
+ */
+export declare interface ThemeColorSelectableStates_v2 {
+  enabled: ThemeColorState_v2
+  hovered: ThemeColorState_v2
+  pressed: ThemeColorState_v2
+  selected: ThemeColorState_v2
+  disabled: ThemeColorState_v2
+}
+
+/** @public */
+export declare interface ThemeColorShadow {
+  outline: string
+  umbra: string
+  penumbra: string
+  ambient: string
+}
+
 /**
  * @public
  * @deprecated
@@ -872,17 +1124,50 @@ export declare interface ThemeColorSolidTone {
 
 /**
  * @public
- * @deprecated Use `ThemeColorAvatar` instead
+ * @deprecated Use `ThemeColorAvatar_v2` instead
  */
 export declare type ThemeColorSpot = Record<ThemeColorSpotKey, string>
 
 /**
  * @public
- * @deprecated Use `ThemeColorAvatarKey` instead
+ * @deprecated Use `ThemeColorAvatarColorKey` instead
  */
 export declare type ThemeColorSpotKey = ThemeColorAvatarColorKey
 
-/** @internal */
+/**
+ * @public
+ */
+export declare interface ThemeColorState_v2 {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  accent: {
+    fg: string
+  }
+  avatar: ThemeColorAvatar_v2
+  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 */
 export declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
 
 export declare type ThemeColorStatesTokens = Partial<
@@ -892,21 +1177,28 @@ export declare type ThemeColorStatesTokens = Partial<
 export declare interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
+  accent?: {
+    fg?: ThemeColorTokenValue
+  }
+  avatar?: ThemeColorAvatarTokens
+  badge?: ThemeColorBadgeTokens
   bg?: ThemeColorTokenValue
-  bg2?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
-  muted?: {
+  code?: {
+    bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
   }
-  accent?: {
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+  kbd?: {
+    bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
+    border?: ThemeColorTokenValue
   }
   link?: {
     fg?: ThemeColorTokenValue
   }
-  code?: {
+  muted?: {
     bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
   }
@@ -916,7 +1208,7 @@ export declare interface ThemeColorStateTokens {
   }
 }
 
-/** @internal */
+/** @public */
 export declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
 
 /**
@@ -962,18 +1254,9 @@ export declare interface ThemeColorSyntax {
 }
 
 export declare interface ThemeColorTokens {
-  avatar?: Partial<Record<ColorConfigAvatarColor, ThemeColorAvatarTokens>>
-  badge?: Partial<Record<ColorConfigStateTone, ThemeColorBadgeTokens>>
-  base?: Partial<Record<ColorConfigBaseTone, ThemeColorBaseTokens>>
+  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
   button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
-  card?: Partial<Record<ColorConfigState, ThemeColorStateTokens>>
   input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
-  kbd?: {
-    _blend?: ColorBlendModeTokenValue
-    bg?: ThemeColorTokenValue
-    fg?: ThemeColorTokenValue
-    border?: ThemeColorTokenValue
-  }
   selectable?: Partial<
     Record<
       ColorConfigStateTone,
@@ -982,18 +1265,19 @@ export declare interface ThemeColorTokens {
       } & ThemeColorStatesTokens
     >
   >
-  spot?: Partial<Record<ColorHueKey, ThemeColorTokenValue>>
   syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
 }
 
+/** @public */
 export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
 
 /**
  * @public
  * @deprecated Use `ThemeColorBaseToneKey` instead.
  */
-export declare type ThemeColorToneKey = ThemeColorBaseToneKey
+export declare type ThemeColorToneKey = ThemeColorCardToneKey
 
+/** @public */
 export declare interface ThemeConfig {
   avatar?: ThemeAvatar
   button?: {
@@ -1014,24 +1298,16 @@ export declare interface ThemeConfig {
   }
   color?: ThemeColorTokens
   container?: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
-  focusRing?: {
-    offset: number
-    width: number
-  }
   fonts?: ThemeFonts
   input?: ThemeInput
-  /**
-   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
-   * @beta
-   */
   layer?: ThemeLayer
   media?: number[]
   palette?: ThemeColorPalette
   radius?: number[]
-  shadows?: Array<ThemeShadow | null>
+  shadow?: Array<ThemeShadow | null>
   space?: number[]
-  styles?: ThemeStyles
+  /** @internal */
+  style?: ThemeStyles
 }
 
 /**
@@ -1128,8 +1404,7 @@ export declare interface ThemeInput {
 }
 
 /**
- * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
 export declare interface ThemeLayer {
   dialog: {
@@ -1153,7 +1428,7 @@ export declare interface ThemeShadow {
 }
 
 /**
- * @public
+ * @internal
  */
 export declare interface ThemeStyles {
   button?: {
@@ -1164,17 +1439,20 @@ export declare interface ThemeStyles {
   }
 }
 
+/** @internal */
 export declare interface TokenBaseKeyNode {
   type: 'base'
-  tone: ColorConfigBaseTone
-  key: ColorConfigBaseKey | ColorConfigBlendKey
+  tone: ColorConfigCardTone
+  key: ColorConfigCardKey | ColorConfigBlendKey
 }
 
+/** @internal */
 export declare interface TokenBlendModeValueNode {
   type: 'blendMode'
   value?: ThemeColorBlendModeKey
 }
 
+/** @internal */
 export declare interface TokenButtonKeyNode {
   type: 'button'
   tone: ColorConfigStateTone
@@ -1182,6 +1460,7 @@ export declare interface TokenButtonKeyNode {
   key: ColorConfigStateKey | ColorConfigBlendKey
 }
 
+/** @internal */
 export declare interface TokenColorValueNode {
   type: 'color'
   key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
@@ -1190,16 +1469,25 @@ export declare interface TokenColorValueNode {
   opacity?: number
 }
 
+/** @internal */
 export declare interface TokenHueValueNode {
   type: 'hue'
   value?: ColorHueKey
 }
 
+/** @internal */
 export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
 
+/** @internal */
 export declare type TokenValueNode =
   | TokenColorValueNode
   | TokenHueValueNode
   | TokenBlendModeValueNode
 
+/** @internal */
+export declare function v0_v2(v0: RootTheme): RootTheme_v2
+
+/** @internal */
+export declare function v2_v0(v2: RootTheme_v2): RootTheme
+
 export {}