@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/dist/theme.d.ts

@@ -0,0 +1,1205 @@
+import {ColorHueKey} from '@sanity/color'
+import {ColorTint} from '@sanity/color'
+import {ColorTintKey} from '@sanity/color'
+import type {StyledObject} from 'styled-components'
+
+/**
+ * @public
+ */
+export declare interface BaseTheme<Styles extends {} = {}> {
+  avatar: ThemeAvatar
+  button: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    shadow: {
+      outline: number
+    }
+  }
+  color: ThemeColorSchemes
+  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[]
+  radius: number[]
+  shadows: Array<ThemeShadow | null>
+  space: number[]
+  styles?: Styles
+}
+
+/**
+ * @deprecated Use `ThemeBoxShadow` instead
+ */
+export declare type BoxShadow = ThemeBoxShadow
+
+/** @internal */
+export declare function buildTheme(config?: ThemeConfig): RootTheme
+
+export declare const COLOR_CONFIG_AVATAR_COLORS: readonly ['*', ...ColorHueKey[]]
+
+export declare const COLOR_CONFIG_BASE_KEYS: readonly [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+  'skeleton/from',
+  'skeleton/to',
+]
+
+export declare const COLOR_CONFIG_BASE_TONES: readonly [
+  '*',
+  'transparent',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
+
+export declare const COLOR_CONFIG_INPUT_MODES: readonly ['*', 'default', 'invalid']
+
+export declare const COLOR_CONFIG_INPUT_STATES: readonly [
+  '*',
+  'enabled',
+  'hovered',
+  'readOnly',
+  'disabled',
+]
+
+export declare const COLOR_CONFIG_STATE_KEYS: readonly [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+]
+
+export declare const COLOR_CONFIG_STATE_TONES: readonly [
+  '*',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_CONFIG_STATES: readonly [
+  '*',
+  'enabled',
+  'hovered',
+  'pressed',
+  'selected',
+  'disabled',
+]
+
+export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
+
+export declare type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
+
+export declare type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
+
+export declare type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+
+export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+
+export declare type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
+
+export declare type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]
+
+export declare type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
+
+export declare type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
+
+export declare type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+export declare type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+export declare type ColorConfigValue =
+  | `black`
+  | `white`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueKey}`
+  | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${ColorTintKey}`
+  | `${ColorTintKey}/${ColorConfigOpacityValue}`
+  | ThemeColorBlendModeKey
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` instead
+ */
+export declare function createColorTheme(
+  partialOpts?: PartialThemeColorBuilderOpts,
+): ThemeColorSchemes
+
+/**
+ * Workaround types that are missing in v6
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ * */
+export declare type CSSObject = StyledObject<any>
+
+export declare function getContrastRatio(bg: string, fg: string): number
+
+/**
+ * @internal
+ */
+export declare function hexToRgb(hex: string): RGB
+
+/**
+ * @internal
+ */
+export declare interface HSL {
+  h: number
+  s: number
+  l: number
+}
+
+/**
+ * @internal
+ */
+export declare function hslToRgb(hsl: HSL): RGB
+
+/** @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
+
+export declare function isColorConfigBaseTone(str: string): str is ColorConfigBaseTone
+
+export declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey
+
+export declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey
+
+export declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone
+
+/** @internal */
+export declare function isColorHueKey(str: string): str is ColorHueKey
+
+export declare function isColorOpacityValue(str: string): str is ColorConfigOpacityValue
+
+/** @internal */
+export declare function isColorTintKey(str: string): str is ColorTintKey
+
+export declare function isColorTokenValue(str: string): str is ColorConfigValue
+
+export declare function isColorValue(str: string): str is 'black' | 'white'
+
+/**
+ * Apply the \`mix\` blend mode
+ * @internal
+ */
+export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
+
+/**
+ * Apply the \`multiply\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
+ * @internal
+ */
+export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
+
+/**
+ * @internal
+ */
+export declare function parseColor(color: unknown): RGB | RGBA
+
+export declare function parseTokenKey(str: string): TokenKeyNode | undefined
+
+export declare function parseTokenValue(str: string): TokenValueNode | undefined
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
+
+/**
+ * @internal
+ */
+export declare interface RGB {
+  r: number
+  g: number
+  b: number
+  a?: undefined
+}
+
+/**
+ * @internal
+ */
+export declare interface RGBA {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+/**
+ * @internal
+ */
+export declare function rgba(color: unknown, a: number): string
+
+/**
+ * @internal
+ */
+export declare function rgbaToRGBA(rgba: string): RGBA
+
+/**
+ * @internal
+ */
+export declare function rgbToHex(color: RGB | RGBA): string
+
+/**
+ * @internal
+ * @see https://css-tricks.com/converting-color-spaces-in-javascript/
+ */
+export declare function rgbToHsl({r, g, b}: RGB): HSL
+
+/**
+ * @public
+ */
+export declare type RootTheme = BaseTheme<ThemeStyles>
+
+/**
+ * Apply the \`screen\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
+ * @internal
+ */
+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
+ */
+export declare type Styles = ThemeStyles
+
+/**
+ * @public
+ */
+export declare interface Theme {
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
+}
+
+/** @internal */
+export declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
+
+/** @internal */
+export declare const THEME_COLOR_BASE_TONES: readonly [
+  'transparent',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  '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 */
+export declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
+
+/** @internal */
+export declare const THEME_COLOR_INPUT_STATES: readonly [
+  'enabled',
+  'hovered',
+  'readOnly',
+  'disabled',
+]
+
+/** @internal */
+export declare const THEME_COLOR_STATE_TONES: readonly [
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+/** @internal */
+export declare const THEME_COLOR_STATES: readonly [
+  'enabled',
+  'hovered',
+  'pressed',
+  'selected',
+  'disabled',
+]
+
+/**
+ * @public
+ */
+export declare interface ThemeAvatar {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}
+
+/**
+ * @public
+ */
+export declare type ThemeBoxShadow = [number, number, number, number]
+
+/**
+ * @public
+ */
+export declare interface ThemeColor {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  _dark?: boolean
+  avatar?: ThemeColorAvatar
+  badge?: ThemeColorBadge
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  input: ThemeColorInput
+  kbd?: ThemeColorKBD
+  selectable?: ThemeColorSelectable
+  syntax: ThemeColorSyntax
+  /** @deprecated Use `_dark` instead */
+  dark: boolean
+  /** @deprecated */
+  muted: ThemeColorMuted
+  /** @deprecated */
+  spot: ThemeColorSpot
+  /** @deprecated */
+  solid: ThemeColorSolid
+}
+
+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
+  }
+}
+
+/** @internal */
+export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
+
+export declare interface ThemeColorAvatarTokens {
+  _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 ThemeColorBadgeTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorBase {
+  bg: string
+  fg: string
+  border: string
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}
+
+export declare interface ThemeColorBaseTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  focusRing?: 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 */
+export declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare interface ThemeColorBuilderOpts {
+  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
+  solid: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    tone: ThemeColorToneKey
+    name: ThemeColorName
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorGenericState
+  muted: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    tone: ThemeColorToneKey
+    name: ThemeColorName
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorGenericState
+  card: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    muted: ThemeColorMuted
+    name: ThemeColorName
+    solid: ThemeColorSolid
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorGenericState
+  button: (opts: {
+    dark: boolean
+    mode: ThemeColorButtonModeKey
+    base: ThemeColorBase
+    solid: ThemeColorSolidTone
+    muted: ThemeColorMutedTone
+  }) => ThemeColorButtonStates
+  input: (opts: {
+    base: ThemeColorBase
+    solid: ThemeColorSolidTone
+    muted: ThemeColorMutedTone
+    dark: boolean
+    mode: 'default' | 'invalid'
+    state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
+  }) => ThemeColorInputState
+  selectable: (opts: {
+    dark: boolean
+    base: ThemeColorBase
+    solid: ThemeColorSolid
+    muted: ThemeColorMuted
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+    tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+  }) => ThemeColorGenericState
+  syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
+  spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorButton {
+  default: ThemeColorButtonTones
+  ghost: ThemeColorButtonTones
+  bleed: ThemeColorButtonTones
+}
+
+/** @internal */
+export declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export declare type ThemeColorButtonState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export declare interface ThemeColorButtonStates {
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+}
+
+export declare interface ThemeColorButtonTokens
+  extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
+  _hue?: ColorHueKey
+}
+
+/**
+ * TODO: Rename to `ThemeColorButtonMode`.
+ * @public
+ */
+export declare interface ThemeColorButtonTones {
+  default: ThemeColorButtonStates
+  primary: ThemeColorButtonStates
+  positive: ThemeColorButtonStates
+  caution: ThemeColorButtonStates
+  critical: ThemeColorButtonStates
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorCard {
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+}
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export declare type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export declare interface ThemeColorGenericState {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  /**
+   * @beta
+   */
+  bg2?: string
+  border: string
+  fg: string
+  icon: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInput {
+  default: ThemeColorInputStates
+  invalid: ThemeColorInputStates
+}
+
+/** @internal */
+export declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInputState {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  bg2: string
+  fg: string
+  border: string
+  placeholder: string
+}
+
+/** @internal */
+export declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+export declare interface ThemeColorInputStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  bg2?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  placeholder?: ThemeColorTokenValue
+}
+
+export declare interface ThemeColorInputTokens
+  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
+  _hue?: ColorHueKey
+}
+
+export declare interface ThemeColorKBD {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+  border: string
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare interface ThemeColorMuted {
+  default: ThemeColorMutedTone
+  transparent: ThemeColorMutedTone
+  primary: ThemeColorMutedTone
+  positive: ThemeColorMutedTone
+  caution: ThemeColorMutedTone
+  critical: ThemeColorMutedTone
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export declare type ThemeColorName = ThemeColorBaseToneKey
+
+export declare type ThemeColorPalette = {
+  black: string | ColorTint
+  white: string | ColorTint
+} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>
+
+/**
+ * @public
+ */
+export declare type ThemeColorScheme = Record<ThemeColorBaseToneKey, ThemeColor>
+
+/**
+ * @public
+ */
+export declare type ThemeColorSchemeKey = 'dark' | 'light'
+
+/**
+ * @public
+ */
+export declare type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>
+
+/**
+ * @public
+ */
+export declare interface ThemeColorSelectable {
+  default: ThemeColorSelectableStates
+  primary: ThemeColorSelectableStates
+  positive: ThemeColorSelectableStates
+  caution: ThemeColorSelectableStates
+  critical: ThemeColorSelectableStates
+}
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export declare type ThemeColorSelectableState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export declare interface ThemeColorSelectableStates {
+  enabled: ThemeColorSelectableState
+  hovered: ThemeColorSelectableState
+  pressed: ThemeColorSelectableState
+  selected: ThemeColorSelectableState
+  disabled: ThemeColorSelectableState
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export declare interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatar` instead
+ */
+export declare type ThemeColorSpot = Record<ThemeColorSpotKey, string>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatarKey` instead
+ */
+export declare type ThemeColorSpotKey = ThemeColorAvatarColorKey
+
+/** @internal */
+export declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+export declare type ThemeColorStatesTokens = Partial<
+  Record<ColorConfigState, ThemeColorStateTokens>
+>
+
+export declare interface ThemeColorStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  bg2?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  muted?: {
+    fg?: ThemeColorTokenValue
+  }
+  accent?: {
+    fg?: ThemeColorTokenValue
+  }
+  link?: {
+    fg?: ThemeColorTokenValue
+  }
+  code?: {
+    bg?: ThemeColorTokenValue
+    fg?: ThemeColorTokenValue
+  }
+  skeleton?: {
+    from?: ThemeColorTokenValue
+    to?: ThemeColorTokenValue
+  }
+}
+
+/** @internal */
+export declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/**
+ * @public
+ */
+export 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
+}
+
+export declare interface ThemeColorTokens {
+  avatar?: Partial<Record<ColorConfigAvatarColor, ThemeColorAvatarTokens>>
+  badge?: Partial<Record<ColorConfigStateTone, ThemeColorBadgeTokens>>
+  base?: Partial<Record<ColorConfigBaseTone, 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,
+      {
+        _hue?: ColorHueKey
+      } & ThemeColorStatesTokens
+    >
+  >
+  spot?: Partial<Record<ColorHueKey, ThemeColorTokenValue>>
+  syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
+}
+
+export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export declare type ThemeColorToneKey = ThemeColorBaseToneKey
+
+export declare interface ThemeConfig {
+  avatar?: ThemeAvatar
+  button?: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card?: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    shadow: {
+      outline: number
+    }
+  }
+  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>
+  space?: number[]
+  styles?: ThemeStyles
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeFocusRing {
+  offset: number
+  width: number
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeFont {
+  family: string
+  weights: ThemeFontWeight
+  sizes: ThemeFontSize[]
+  /** @deprecated No longer supported. */
+  horizontalOffset?: number
+}
+
+/**
+ * @public
+ */
+export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+
+/**
+ * @public
+ */
+export declare interface ThemeFonts {
+  code: ThemeFont
+  heading: ThemeFont
+  label: ThemeFont
+  text: ThemeFont
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeFontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeFontWeight {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/**
+ * @public
+ */
+export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/**
+ * @public
+ */
+export declare interface ThemeInput {
+  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
+  }
+}
+
+/**
+ * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare interface ThemeLayer {
+  dialog: {
+    zOffset: number
+  }
+  popover: {
+    zOffset: number
+  }
+  tooltip: {
+    zOffset: number
+  }
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeShadow {
+  umbra: ThemeBoxShadow
+  penumbra: ThemeBoxShadow
+  ambient: ThemeBoxShadow
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
+export declare interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigBaseTone
+  key: ColorConfigBaseKey | ColorConfigBlendKey
+}
+
+export declare interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ThemeColorBlendModeKey
+}
+
+export declare interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ThemeColorButtonModeKey
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+export declare interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  hue?: ColorHueKey
+  tint?: ColorTintKey
+  opacity?: number
+}
+
+export declare interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueKey
+}
+
+export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+export declare type TokenValueNode =
+  | TokenColorValueNode
+  | TokenHueValueNode
+  | TokenBlendModeValueNode
+
+export {}