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

package/dist/theme.d.ts

@@ -1,25 +1,39 @@
 import {ColorHueKey} from '@sanity/color'
-import {ColorTint} from '@sanity/color'
+import type {ColorHues} from '@sanity/color'
+import type {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
+import type {Hue as Hue_2} from '@sanity/ui/theme'
 import type {StyledObject} from 'styled-components'
 
+/** @public */
+export declare const AVATAR_COLORS: readonly [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+]
+
 /** @public */
 export declare const AVATAR_SIZE: readonly [0, 1, 2, 3]
 
+/** @public */
+export declare type AvatarColor = (typeof AVATAR_COLORS)[number]
+
 /** @public */
 export declare type AvatarSize = (typeof AVATAR_SIZE)[number]
 
-/**
- * @public
- */
+/** @public */
 export declare type BaseTheme = RootTheme
 
-/** @internal */
-export declare function buildColor_v3(tokens: ColorTokens): ThemeColor_v3
-
 /** @internal */
 export declare function buildTheme(_config?: ThemeConfig): RootTheme
 
+/** @public */
 export declare function buildTheme_v3(options?: ThemeOptions): Theme_v3
 
 /** @public */
@@ -29,62 +43,66 @@ export declare interface CardColorTokens {
     Hue,
     {
       _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
+      bg: ColorValue
+      fg: ColorValue
     }
   >
-  backdrop: [ColorToken, ColorToken]
-  focusRing: [ColorToken, ColorToken]
+  backdrop: ColorValue
+  code: {
+    bg: ColorValue
+    fg: ColorValue
+    token: {
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
+    }
+  }
+  focusRing: ColorValue
   link: {
-    fg: [ColorToken, ColorToken]
+    fg: ColorValue
   }
   shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   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]
+    from: ColorValue
+    to: ColorValue
   }
   variant: {
     solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
@@ -190,6 +208,9 @@ export declare const COLOR_CONFIG_STATES: readonly [
   'disabled',
 ]
 
+/** @public */
+export declare const COLOR_VARIANTS: readonly ['tinted', 'solid']
+
 /** @public */
 export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
@@ -229,24 +250,51 @@ export declare type ColorConfigValue =
   | `white`
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
-  | `${ColorHueKey}`
-  | `${ColorHueKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}`
-  | `${ColorHueKey}/${ColorTintKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
-  | `${ColorTintKey}`
-  | `${ColorTintKey} ${number}%`
-  | `${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${Hue}`
+  | `${Hue} ${number}%`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Hue}/${Tint}/${ColorConfigOpacityValue}`
+  | `${Tint}`
+  | `${Tint} ${number}%`
+  | `${Tint}/${ColorConfigOpacityValue}`
+
+/** @internal */
+export declare interface ColorInheritNode {
+  type: 'inherit'
+}
+
+/** @internal */
+export declare interface ColorNode {
+  type: 'color'
+  name: 'black' | 'white'
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
+}
+
+/** @internal */
+export declare interface ColorTintNode {
+  type: 'tint'
+  hue: Hue
+  tint: Tint
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
+}
 
 /** @public */
 export declare type ColorToken =
+  | `inherit`
   | `black`
   | `black/${ColorTokenOpacityValue}`
   | `white`
   | `white/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint}`
-  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint} ${number}%`
+  | `${Hue}-${Tint}`
+  | `${Hue}-${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint} ${number}%`
   | `${Tint}`
   | `${Tint}/${ColorTokenOpacityValue}`
   | `${Tint} ${number}%`
@@ -257,11 +305,24 @@ export declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
 /** @public */
 export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
 
+/**
+ * Theme color values are tuples of [light, dark] color tokens.
+ *
+ * @public
+ */
+export declare type ColorValue = [ColorToken, ColorToken]
+
+/** @public */
+export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5, 'auto']
+
 /** @public */
-export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5]
+export declare const CONTAINER_SCALE: readonly [0, 1, 2, 3, 4, 5]
 
 /** @public */
-export declare type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
+export declare type ContainerScale = (typeof CONTAINER_SCALE)[number]
+
+/** @public */
+export declare type ContainerWidth = (typeof CONTAINER)[number]
 
 /**
  * @public
@@ -278,26 +339,23 @@ export declare function createColorTheme(
  */
 export declare type CSSObject = StyledObject<any>
 
-declare type CSSVariableKey = `--${string}`
-
-export declare const defaultPalette: PaletteConfig
-
+/** @internal */
 export declare const defaultTokens: PartialTokens<Tokens>
 
 /** @public */
 export declare interface ElementColorTokens {
   _hue: Hue
   bg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
 }
 
@@ -328,7 +386,10 @@ export declare type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
 /** @public */
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
 
-/** @internal */
+/**
+ * @internal
+ * @deprecated Will be removed in next major version
+ */
 export declare function getContrastRatio(bg: string, fg: string): number
 
 /** @internal */
@@ -360,8 +421,10 @@ export declare interface HSL {
  */
 export declare function hslToRgb(hsl: HSL): RGB
 
+/** @public */
 export declare type Hue = (typeof HUES)[number]
 
+/** @public */
 export declare const HUES: readonly [
   'gray',
   'blue',
@@ -404,9 +467,6 @@ export declare function isColorOpacityValue(str: string): str is ColorConfigOpac
 /** @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'
 
@@ -423,31 +483,18 @@ export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
  */
 export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 
-export declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /**
  * @internal
  */
 export declare function parseColor(color: unknown): RGB | RGBA
 
 /** @internal */
-export declare function parseTokenKey(str: string): TokenKeyNode | undefined
+export declare function _parseColorToken(
+  str: ColorToken,
+  options: {
+    defaultHue: Hue
+  },
+): TokenizeColorResult
 
 /** @internal */
 export declare function parseTokenValue(str: string): TokenValueNode | undefined
@@ -468,20 +515,27 @@ export declare type PartialTokens<T> = T extends [ColorToken, ColorToken]
     : T
 
 /** @public */
-export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
+export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6]
 
 /** @public */
-export declare type Radius = (typeof RADIUS)[number] | 'full'
-
-export declare function renderColor(
-  token: [ColorToken, ColorToken],
-  context: RenderColorContext,
-): string
+export declare type Radius = (typeof RADIUS)[number]
 
-export declare interface RenderColorContext {
-  bgVar: CSSVariableKey
-  hue: Hue
-  scheme: ThemeColorSchemeKey
+/** @public */
+export declare interface ResolvedColorToken {
+  color:
+    | {
+        type: 'inherit'
+      }
+    | {
+        type: 'black' | 'white'
+      }
+    | {
+        type: 'hue'
+        hue: Hue
+        tint: Tint
+      }
+  opacity: number
+  mix: number
 }
 
 /** @internal */
@@ -528,9 +582,7 @@ export declare function rgbToHex(color: RGB | RGBA): string
  */
 export declare function rgbToHsl({r, g, b}: RGB): HSL
 
-/**
- * @public
- */
+/** @public */
 export declare interface RootTheme extends RootTheme_v0 {
   v2?: RootTheme_v2
   v3?: Theme_v3
@@ -601,9 +653,7 @@ export declare interface RootTheme_v0 {
   styles?: ThemeStyles
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface RootTheme_v2 {
   _version: 2
   avatar: ThemeAvatar_v2
@@ -651,7 +701,7 @@ export declare const SHADOW: readonly [0, 1, 2, 3, 4, 5]
 export declare type Shadow = (typeof SHADOW)[number]
 
 /** @public */
-export declare const SPACE: readonly [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+export declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 /** @public */
 export declare type Space = (typeof SPACE)[number]
@@ -726,9 +776,7 @@ export declare const THEME_COLOR_STATES: readonly [
   'disabled',
 ]
 
-/**
- * @public
- */
+/** @public */
 export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
   /**
@@ -746,7 +794,6 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
  */
 export declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -767,13 +814,14 @@ export declare interface Theme_v3 {
   }
   color: ThemeColor_v3
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
+  palette: ThemePalette_v3
+  radius: Record<Radius, number>
+  shadow: Record<Shadow, ThemeShadow | undefined>
+  space: Record<Space, number>
 }
 
 /**
@@ -787,9 +835,7 @@ export declare interface ThemeAvatar {
   }[]
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeAvatar_v2 {
   sizes: {
     /** Spacing between avatars in an <AvatarStack> component (px) */
@@ -800,9 +846,7 @@ export declare interface ThemeAvatar_v2 {
   focusRing: ThemeFocusRing
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeBoxShadow = [number, number, number, number]
 
 /**
@@ -822,29 +866,35 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
   syntax: ThemeColorSyntax
 }
 
-export declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+/** @public */
+export declare type ThemeColor_v3 = Record<ThemeColorCardToneKey, ThemeColorCard_v3>
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
 
+/** @public */
+export declare type ThemeColorAvatar_v3 = Record<AvatarColor, ThemeColorAvatarHue_v3>
+
 /** @public */
 export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorAvatarHue_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
   fg: string
 }
 
+/** @public */
+export declare interface ThemeColorAvatarHue_v3 {
+  bg: ColorValue
+  fg: ColorValue
+}
+
 /** @public */
 export declare interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
 }
@@ -863,9 +913,7 @@ export declare interface ThemeColorAvatarTokens {
   'cyan'?: ThemeColorAvatarHueTokens
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
 
 /** @public */
@@ -873,9 +921,7 @@ export declare type ThemeColorBadgeTokens = Partial<
   Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
 >
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorBadgeTone_v2 {
   bg: string
   fg: string
@@ -886,7 +932,7 @@ export declare interface ThemeColorBadgeTone_v2 {
 /** @public */
 export declare interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   dot?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -995,14 +1041,10 @@ export declare interface ThemeColorButton {
   bleed: ThemeColorButtonTones
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorButtonMode_v2 = Record<
   ThemeColorStateToneKey,
   ThemeColorButtonTone_v2
@@ -1032,12 +1074,10 @@ export declare interface ThemeColorButtonStates {
 /** @public */
 export declare interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
-  _hue?: ColorHueKey
+  _hue?: Hue_2
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /**
@@ -1065,9 +1105,7 @@ export declare interface ThemeColorCard {
   disabled: ThemeColorGenericState
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   /** @internal */
   _blend: ThemeColorBlendModeKey
@@ -1081,58 +1119,66 @@ export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   syntax: ThemeColorSyntax
 }
 
+/** @public */
 export declare interface ThemeColorCard_v3 {
   _hue: Hue
-  avatar: ThemeColorAvatar_v2
-  backdrop: string
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
+  avatar: ThemeColorAvatar_v3
+  backdrop: ColorValue
+  code: {
+    bg: ColorValue
+    fg: ColorValue
+    token: {
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
+    }
+  }
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
   }
-  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
+  shadow: {
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: string
-    to: string
+    from: ColorValue
+    to: ColorValue
   }
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
@@ -1146,19 +1192,20 @@ export declare type ThemeColorCardState = ThemeColorGenericState
 /** @public */
 export declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
 
+/** @public */
 export declare interface ThemeColorElement {
   _hue: Hue
   bg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
 }
 
@@ -1205,14 +1252,10 @@ export declare interface ThemeColorInput {
   invalid: ThemeColorInputStates
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorInputMode_v2 = Record<
   ThemeColorInputStateKey,
   ThemeColorInputState_v2
@@ -1234,9 +1277,7 @@ export declare interface ThemeColorInputState {
   placeholder: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorInputState_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
@@ -1265,7 +1306,7 @@ export declare interface ThemeColorInputStates {
 /** @public */
 export declare interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -1278,12 +1319,10 @@ export declare interface ThemeColorInputStateTokens {
 /** @public */
 export declare interface ThemeColorInputTokens
   extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
-  _hue?: ColorHueKey
+  _hue?: Hue_2
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorKBD {
   bg: string
   fg: string
@@ -1331,7 +1370,7 @@ export declare type ThemeColorName =
 export declare type ThemeColorPalette = {
   black: string | ColorTint
   white: string | ColorTint
-} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>
+} & Record<Hue, Record<Tint, string | ColorTint>>
 
 /**
  * @public
@@ -1339,18 +1378,10 @@ export declare type ThemeColorPalette = {
  */
 export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
-export declare interface ThemeColorScheme_v3 {
-  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
-}
-
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /**
@@ -1359,9 +1390,7 @@ export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
  */
 export declare type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
 
 /**
@@ -1376,9 +1405,7 @@ export declare interface ThemeColorSelectable {
   critical: ThemeColorSelectableStates
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorSelectable_v2 = Record<
   ThemeColorStateToneKey,
   ThemeColorSelectableTone_v2
@@ -1402,9 +1429,7 @@ export declare interface ThemeColorSelectableStates {
   disabled: ThemeColorSelectableState
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /** @public */
@@ -1452,9 +1477,7 @@ export declare type ThemeColorSpot = Record<ThemeColorSpotKey, string>
  */
 export declare type ThemeColorSpotKey = ThemeColorAvatarColorKey
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorState_v2 {
   /** @internal */
   _blend?: ThemeColorBlendModeKey
@@ -1502,7 +1525,7 @@ export declare type ThemeColorStatesTokens = Partial<
 /** @public */
 export declare interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   accent?: {
     fg?: ThemeColorTokenValue
   }
@@ -1537,9 +1560,7 @@ export declare interface ThemeColorStateTokens {
 /** @public */
 export declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorSyntax {
   atrule: string
   attrName: string
@@ -1588,7 +1609,7 @@ export declare interface ThemeColorTokens {
     Record<
       ColorConfigStateTone,
       {
-        _hue?: ColorHueKey
+        _hue?: Hue_2
       } & ThemeColorStatesTokens
     >
   >
@@ -1604,9 +1625,11 @@ export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
  */
 export declare type ThemeColorToneKey = ThemeColorName
 
+/** @public */
 export declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
 
-export declare type ThemeColorVariantKey = 'tinted' | 'solid'
+/** @public */
+export declare type ThemeColorVariantKey = (typeof COLOR_VARIANTS)[number]
 
 /** @public */
 export declare interface ThemeConfig {
@@ -1644,34 +1667,33 @@ export declare interface ThemeConfig {
 /** @public */
 export declare type ThemeEntry = [`--${string}`, string]
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeFocusRing {
   offset: number
   width: number
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeFont {
   family: string
-  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
   horizontalOffset?: number
 }
 
-/**
- * @public
- */
+/** @public */
+export declare interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  scale: ThemeFontSize_v3[]
+}
+
+/** @public */
 export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeFonts {
   code: ThemeFont
   heading: ThemeFont
@@ -1679,9 +1701,15 @@ export declare interface ThemeFonts {
   text: ThemeFont
 }
 
-/**
- * @public
- */
+/** @public */
+export declare interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
+/** @public */
 export declare interface ThemeFontSize {
   ascenderHeight: number
   descenderHeight: number
@@ -1691,9 +1719,18 @@ export declare interface ThemeFontSize {
   lineHeight: number
 }
 
-/**
- * @public
- */
+/** @public */
+export declare interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
 export declare interface ThemeFontWeight {
   regular: number
   medium: number
@@ -1701,9 +1738,7 @@ export declare interface ThemeFontWeight {
   bold: number
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
 
 /**
@@ -1730,9 +1765,7 @@ export declare interface ThemeInput {
   }
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeInput_v2 {
   checkbox: {
     size: number
@@ -1762,9 +1795,7 @@ export declare interface ThemeInput_v2 {
   }
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeLayer {
   dialog: {
     zOffset: number
@@ -1780,13 +1811,17 @@ export declare interface ThemeLayer {
 /** @public */
 export declare interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
-/**
- * @public
- */
+/** @public */
+export declare interface ThemePalette_v3 {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
+/** @public */
 export declare interface ThemeShadow {
   umbra: ThemeBoxShadow
   penumbra: ThemeBoxShadow
@@ -1805,29 +1840,11 @@ export declare interface ThemeStyles {
   }
 }
 
+/** @public */
 export declare type Tint = (typeof TINTS)[number]
 
-export declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+/** @public */
+export declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 /** @internal */
 export declare interface TokenBaseKeyNode {
@@ -1866,6 +1883,9 @@ export declare interface TokenHueValueNode {
   value?: ColorHueKey
 }
 
+/** @internal */
+export declare type TokenizeColorResult = ColorNode | ColorTintNode | ColorInheritNode
+
 /** @internal */
 export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode