@sanity/ui/dist/theme.d.mts

The Sanity UI components.

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 {
  _version?: 0
  /**
   * @deprecated Use `v2.avatar` instead
   */
  avatar: ThemeAvatar
  /**
   * @deprecated Use `v2.button` instead
   */
  button: {
    textWeight: ThemeFontWeightKey
  }
  /**
   * @deprecated Use `v2.color` instead
   */
  color: ThemeColorSchemes
  /**
   * @deprecated Use `v2.container` instead
   */
  container: number[]
  /**
   * @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[]
  /**
   * @internal
   * @deprecated Use `v2.style` instead
   */
  styles?: ThemeStyles
  v2?: RootTheme_v2
}

/** @internal */
export declare function buildTheme(config?: ThemeConfig): RootTheme

/** @public */
export declare const COLOR_CONFIG_AVATAR_COLORS: readonly ['*', ...ColorHueKey[]]

/** @public */
export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']

/** @public */
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',
]

/** @public */
export declare const COLOR_CONFIG_CARD_TONES: readonly [
  '*',
  'transparent',
  'default',
  'neutral',
  'primary',
  'suggest',
  'positive',
  'caution',
  'critical',
]

/** @public */
export declare const COLOR_CONFIG_INPUT_MODES: readonly ['*', 'default', 'invalid']

/** @public */
export declare const COLOR_CONFIG_INPUT_STATES: readonly [
  '*',
  'enabled',
  'hovered',
  'readOnly',
  'disabled',
]

/** @public */
export declare const COLOR_CONFIG_STATE_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',
]

/** @public */
export declare const COLOR_CONFIG_STATE_TONES: readonly [
  '*',
  'default',
  'neutral',
  'primary',
  'suggest',
  'positive',
  'caution',
  'critical',
]

/** @public */
export declare const COLOR_CONFIG_STATES: readonly [
  '*',
  'enabled',
  'hovered',
  'pressed',
  'selected',
  'disabled',
]

/** @public */
export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]

/** @public */
export declare type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]

/** @public */
export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]

/** @public */
export declare type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_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`
  | `black/${ColorConfigOpacityValue}`
  | `white/${ColorConfigOpacityValue}`
  | `${ColorHueKey}`
  | `${ColorHueKey} ${number}%`
  | `${ColorHueKey}/${ColorTintKey}`
  | `${ColorHueKey}/${ColorTintKey} ${number}%`
  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
  | `${ColorTintKey}`
  | `${ColorTintKey} ${number}%`
  | `${ColorTintKey}/${ColorConfigOpacityValue}`

/**
 * @public
 * @deprecated Use `buildColorTheme` instead.
 */
export declare function createColorTheme(
  partialOpts?: PartialThemeColorBuilderOpts,
): ThemeColorSchemes

/**
 * 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>

/** @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
 */
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 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

/** @internal */
export declare function isColorConfigBaseKey(str: string): str is ColorConfigCardKey

/** @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'

/**
 * 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

/** @internal */
export declare function parseTokenKey(str: string): TokenKeyNode | undefined

/** @internal */
export declare function parseTokenValue(str: string): TokenValueNode | undefined

/**
 * @public
 * @deprecated Use `ThemeConfig` instead.
 */
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

/**
 * @public
 */
export 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
}

/**
 * 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 interface Theme {
  sanity: Omit<RootTheme, 'color' | 'v2'> & {
    /**
     * @deprecated Use `v2.color` instead
     */
    color: ThemeColor
    v2?: Theme_v2
  }
}

/** @public */
export declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]

/** @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',
  'neutral',
  'primary',
  'suggest',
  'positive',
  'caution',
  'critical',
]

/** @public */
export declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']

/** @public */
export declare const THEME_COLOR_INPUT_STATES: readonly [
  'enabled',
  'hovered',
  'readOnly',
  'disabled',
]

/** @public */
export declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']

/** @public */
export declare const THEME_COLOR_STATE_TONES: readonly [
  'default',
  'neutral',
  'primary',
  'suggest',
  'positive',
  'caution',
  'critical',
]

/** @public */
export declare const THEME_COLOR_STATES: readonly [
  'enabled',
  'hovered',
  'pressed',
  'selected',
  'disabled',
]

/**
 * @public
 */
export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
  color: ThemeColorCard_v2
  /**
   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
   * with sanity V2 components accessing a v1 <ThemeProvider>.
   * See https://github.com/sanity-io/ui/pull/1203 for more info.
   */
  _resolved: boolean
}

/**
 * @public
 * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
 */
export declare interface ThemeAvatar {
  sizes: {
    distance: number
    size: number
  }[]
}

/**
 * @public
 */
export 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
 */
export declare type ThemeBoxShadow = [number, number, number, number]

/**
 * @public
 * @deprecated Use `ThemeColor_v2` instead.
 */
export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'>> {
  base: ThemeColorBase
  button: ThemeColorButton
  card: ThemeColorCard
  dark: boolean
  input: ThemeColorInput
  muted: ThemeColorMuted
  selectable?: ThemeColorSelectable
  solid: ThemeColorSolid
  spot: ThemeColorSpot
  syntax: ThemeColorSyntax
}

/**
 * @public
 */
export declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

/** @public */
export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]

/**
 * @public
 */
export declare interface ThemeColorAvatarHue_v2 {
  _blend?: ThemeColorBlendModeKey
  bg: string
  fg: string
}

/** @public */
export declare interface ThemeColorAvatarHueTokens {
  _blend?: ColorBlendModeTokenValue
  _hue?: ColorHueKey
  bg?: ThemeColorTokenValue
  fg?: ThemeColorTokenValue
}

/** @public */
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 type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

/** @public */
export declare type ThemeColorBadgeTokens = Partial<
  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
>

/**
 * @public
 */
export declare interface ThemeColorBadgeTone_v2 {
  bg: string
  fg: string
  dot: string
  icon: string
}

/** @public */
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
    penumbra: string
    ambient: string
  }
  skeleton?: {
    from: string
    to: string
  }
}

/** @public */
export declare interface ThemeColorBaseTokens extends ThemeColorStateTokens {
  focusRing?: ThemeColorTokenValue
  backdrop?: ThemeColorTokenValue
  shadow?: {
    outline?: ThemeColorTokenValue
    umbra?: ThemeColorTokenValue
    penumbra?: ThemeColorTokenValue
    ambient?: ThemeColorTokenValue
  }
}

/** @public */
export declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]

/**
 * @public
 * @deprecated Use `buildColorTheme` instead.
 */
export declare interface ThemeColorBuilderOpts {
  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
  solid: (opts: {
    base: ThemeColorBase
    dark: boolean
    tone: ThemeColorName
    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
 * @deprecated Use `ThemeColorButton_v2` instead.
 */
export declare interface ThemeColorButton {
  default: ThemeColorButtonTones
  ghost: ThemeColorButtonTones
  bleed: ThemeColorButtonTones
}

/**
 * @public
 */
export declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

/**
 * @public
 */
export declare type ThemeColorButtonMode_v2 = Record<
  ThemeColorStateToneKey,
  ThemeColorButtonTone_v2
>

/** @public */
export declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]

/**
 * @public
 * @deprecated Use `ThemeColorState_v2` instead.
 */
export declare type ThemeColorButtonState = ThemeColorGenericState

/**
 * @public
 * @deprecated Use `ThemeColorButtonStates_v2` instead.
 */
export declare interface ThemeColorButtonStates {
  enabled: ThemeColorGenericState
  hovered: ThemeColorGenericState
  pressed: ThemeColorGenericState
  selected: ThemeColorGenericState
  disabled: ThemeColorGenericState
}

/** @public */
export declare interface ThemeColorButtonTokens
  extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
  _hue?: ColorHueKey
}

/**
 * @public
 */
export declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>

/**
 * TODO: Rename to `ThemeColorButtonMode`.
 * @public
 * @deprecated Use `ThemeColorButtonTones_v2` instead.
 */
export declare interface ThemeColorButtonTones {
  default: ThemeColorButtonStates
  primary: ThemeColorButtonStates
  positive: ThemeColorButtonStates
  caution: ThemeColorButtonStates
  critical: ThemeColorButtonStates
}

/**
 * @public
 * @deprecated Use `ThemeColorSelectable_v2` instead.
 */
export declare interface ThemeColorCard {
  enabled: ThemeColorGenericState
  hovered: ThemeColorGenericState
  pressed: ThemeColorGenericState
  selected: ThemeColorGenericState
  disabled: ThemeColorGenericState
}

/**
 * @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 `ThemeColorState_v2` 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 */
  _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
 * @deprecated Use `ThemeColorInput_v2` instead.
 */
export declare interface ThemeColorInput {
  default: ThemeColorInputStates
  invalid: ThemeColorInputStates
}

/**
 * @public
 */
export declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

/**
 * @public
 */
export declare type ThemeColorInputMode_v2 = Record<
  ThemeColorInputStateKey,
  ThemeColorInputState_v2
>

/** @public */
export declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]

/**
 * @public
 * @deprecated Use `ThemeColorInputState_v2` instead.
 */
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
}

/** @public */
export declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]

/**
 * @public
 * @deprecated Use `ThemeColorInputMode_v2` instead.
 */
export declare interface ThemeColorInputStates {
  enabled: ThemeColorInputState
  disabled: ThemeColorInputState
  hovered: ThemeColorInputState
  readOnly: ThemeColorInputState
}

/** @public */
export declare interface ThemeColorInputStateTokens {
  _blend?: ColorBlendModeTokenValue
  _hue?: ColorHueKey
  bg?: ThemeColorTokenValue
  border?: ThemeColorTokenValue
  fg?: ThemeColorTokenValue
  muted?: {
    bg?: ThemeColorTokenValue
  }
  placeholder?: ThemeColorTokenValue
}

/** @public */
export declare interface ThemeColorInputTokens
  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
  _hue?: ColorHueKey
}

/**
 * @public
 */
export declare interface ThemeColorKBD {
  bg: string
  fg: string
  border: string
}

/**
 * @public
 * @deprecated Use `ThemeColorSelectable_v2` instead.
 */
export declare interface ThemeColorMuted {
  default: ThemeColorMutedTone
  transparent: ThemeColorMutedTone
  primary: ThemeColorMutedTone
  positive: ThemeColorMutedTone
  caution: ThemeColorMutedTone
  critical: ThemeColorMutedTone
}

/**
 * @public
 * @deprecated Use `ThemeColorSelectableTone_v2` instead.
 */
export declare interface ThemeColorMutedTone {
  enabled: ThemeColorGenericState
  disabled: ThemeColorGenericState
  hovered: ThemeColorGenericState
  pressed: ThemeColorGenericState
  selected: ThemeColorGenericState
}

/**
 * @public
 * @deprecated Use `ThemeColorCardToneKey` instead.
 */
export declare type ThemeColorName =
  | 'transparent'
  | 'default'
  | 'primary'
  | 'positive'
  | 'caution'
  | 'critical'

/** @public */
export declare type ThemeColorPalette = {
  black: string | ColorTint
  white: string | ColorTint
} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>

/**
 * @public
 * @deprecated Use `ThemeColorScheme_v2` instead.
 */
export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>

/**
 * @public
 */
export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>

/**
 * @public
 */
export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]

/**
 * @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
  positive: ThemeColorSelectableStates
  caution: ThemeColorSelectableStates
  critical: ThemeColorSelectableStates
}

/**
 * @public
 */
export declare type ThemeColorSelectable_v2 = Record<
  ThemeColorStateToneKey,
  ThemeColorSelectableTone_v2
>

/**
 * @public
 * @deprecated Use `ThemeColorState_v2` instead.
 */
export declare type ThemeColorSelectableState = ThemeColorGenericState

/**
 * @public
 * @deprecated Use `ThemeColorSelectableStates_v2` instead.
 */
export declare interface ThemeColorSelectableStates {
  enabled: ThemeColorSelectableState
  hovered: ThemeColorSelectableState
  pressed: ThemeColorSelectableState
  selected: ThemeColorSelectableState
  disabled: ThemeColorSelectableState
}

/**
 * @public
 */
export declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>

/** @public */
export declare interface ThemeColorShadow {
  outline: string
  umbra: string
  penumbra: string
  ambient: string
}

/**
 * @public
 * @deprecated Use `ThemeColorSelectable_v2` instead.
 */
export declare interface ThemeColorSolid {
  default: ThemeColorSolidTone
  transparent: ThemeColorSolidTone
  primary: ThemeColorSolidTone
  positive: ThemeColorSolidTone
  caution: ThemeColorSolidTone
  critical: ThemeColorSolidTone
}

/**
 * @public
 * @deprecated Use `ThemeColorSelectableTone_v2` instead.
 */
export declare interface ThemeColorSolidTone {
  enabled: ThemeColorGenericState
  disabled: ThemeColorGenericState
  hovered: ThemeColorGenericState
  pressed: ThemeColorGenericState
  selected: ThemeColorGenericState
}

/**
 * @public
 * @deprecated Use `ThemeColorAvatar_v2` instead
 */
export declare type ThemeColorSpot = Record<ThemeColorSpotKey, string>

/**
 * @public
 * @deprecated Use `ThemeColorAvatarColorKey` instead
 */
export declare type ThemeColorSpotKey = ThemeColorAvatarColorKey

/**
 * @public
 */
export 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 */
export declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]

/** @public */
export declare type ThemeColorStatesTokens = Partial<
  Record<ColorConfigState, ThemeColorStateTokens>
>

/** @public */
export declare interface ThemeColorStateTokens {
  _blend?: ColorBlendModeTokenValue
  _hue?: ColorHueKey
  accent?: {
    fg?: ThemeColorTokenValue
  }
  avatar?: ThemeColorAvatarTokens
  badge?: ThemeColorBadgeTokens
  bg?: ThemeColorTokenValue
  border?: ThemeColorTokenValue
  code?: {
    bg?: ThemeColorTokenValue
    fg?: ThemeColorTokenValue
  }
  fg?: ThemeColorTokenValue
  icon?: ThemeColorTokenValue
  kbd?: {
    bg?: ThemeColorTokenValue
    fg?: ThemeColorTokenValue
    border?: ThemeColorTokenValue
  }
  link?: {
    fg?: ThemeColorTokenValue
  }
  muted?: {
    bg?: ThemeColorTokenValue
    fg?: ThemeColorTokenValue
  }
  skeleton?: {
    from?: ThemeColorTokenValue
    to?: ThemeColorTokenValue
  }
}

/** @public */
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
}

/** @public */
export declare interface ThemeColorTokens {
  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
  button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
  input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
  selectable?: Partial<
    Record<
      ColorConfigStateTone,
      {
        _hue?: ColorHueKey
      } & ThemeColorStatesTokens
    >
  >
  syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
}

/** @public */
export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]

/**
 * @public
 * @deprecated Use `ThemeColorCardToneKey` instead.
 */
export declare type ThemeColorToneKey = ThemeColorName

/** @public */
export declare interface ThemeConfig {
  avatar?: ThemeAvatar_v2
  button?: {
    border: {
      width: number
    }
    focusRing: ThemeFocusRing
    textWeight: ThemeFontWeightKey
  }
  card?: {
    border: {
      width: number
    }
    focusRing: ThemeFocusRing
    shadow: {
      outline: number
    }
  }
  color?: ThemeColorTokens
  container?: number[]
  font?: ThemeFonts
  input?: ThemeInput_v2
  layer?: ThemeLayer
  media?: number[]
  palette?: ThemeColorPalette
  radius?: number[]
  shadow?: Array<ThemeShadow | null>
  space?: number[]
  /** @internal */
  style?: 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
 * @deprecated Use `ThemeInput_v2` instead
 */
export declare interface ThemeInput {
  checkbox: {
    size: number
  }
  radio: {
    size: number
    markSize: number
  }
  switch: {
    width: number
    height: number
    padding: number
    transitionDurationMs: number
    transitionTimingFunction: string
  }
  border: {
    width: number
  }
}

/**
 * @public
 */
export 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
 */
export declare interface ThemeLayer {
  dialog: {
    zOffset: number
  }
  popover: {
    zOffset: number
  }
  tooltip: {
    zOffset: number
  }
}

/**
 * @public
 */
export declare interface ThemeShadow {
  umbra: ThemeBoxShadow
  penumbra: ThemeBoxShadow
  ambient: ThemeBoxShadow
}

/**
 * @internal
 */
export declare interface ThemeStyles {
  button?: {
    root?: CSSObject
  }
  card?: {
    root?: CSSObject
  }
}

/** @internal */
export declare interface TokenBaseKeyNode {
  type: 'base'
  tone: ColorConfigCardTone
  key: ColorConfigCardKey | ColorConfigBlendKey
}

/** @internal */
export declare interface TokenBlendModeValueNode {
  type: 'blendMode'
  value?: ThemeColorBlendModeKey
}

/** @internal */
export declare interface TokenButtonKeyNode {
  type: 'button'
  tone: ColorConfigStateTone
  mode: ThemeColorButtonModeKey
  key: ColorConfigStateKey | ColorConfigBlendKey
}

/** @internal */
export declare interface TokenColorValueNode {
  type: 'color'
  key?: 'black' | 'white'
  hue?: ColorHueKey
  mix?: number
  opacity?: number
  tint?: ColorTintKey
}

/** @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 {}