@sanity/ui 2.0.0-alpha.10 → 2.0.0-alpha.11

package/dist/index.d.ts

@@ -3,7 +3,6 @@
 import {AnimationEventHandler} from 'react'
 import {AriaRole} from 'react'
 import {ClipboardEventHandler} from 'react'
-import {ColorTints} from '@sanity/color'
 import {Component} from 'react'
 import {CompositionEventHandler} from 'react'
 import {CSSProperties} from 'react'
@@ -50,10 +49,8 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
       HTMLProps<HTMLInputElement>,
-      | 'type'
       | 'value'
       | 'ref'
-      | 'as'
       | 'id'
       | 'spellCheck'
       | 'role'
@@ -67,7 +64,9 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       | 'aria-owns'
       | 'onChange'
       | 'onSelect'
+      | 'as'
       | 'autoComplete'
+      | 'type'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
     },
@@ -396,7 +395,7 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -444,7 +443,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
+    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'as' | 'type'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -507,7 +506,7 @@ export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -532,12 +531,6 @@ export declare interface CardProps
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
-  /**
-   * @internal
-   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
-   * So if it's inheriting styles from the parent, it needs to create a new cars context
-   */
-  updateCssVars?: boolean
 }
 
 /**
@@ -547,8 +540,6 @@ export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
-  $updateCssVars: boolean
 }
 
 /**
@@ -560,7 +551,7 @@ export declare type CardTone = ThemeColorToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -581,7 +572,7 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> & RefAttributes<HTMLElement>
+  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -600,7 +591,7 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -618,7 +609,7 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>, 'ref'> &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -633,240 +624,15 @@ export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {
 export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
 
 /**
- * @internal
- * @deprecated Use studioTheme instead.
- */
-export declare function createColorTheme(): null
-
-/**
- * @beta
+ * @public
  */
-export declare const createCssVars: (
-  scheme: ThemeColorSchemeKey,
-  tones: Record<ThemeColorName, ColorTints>,
-  defaultTone?: ThemeColorName,
-) => Record<string, string>
+export declare function createColorTheme(
+  partialOpts?: PartialThemeColorBuilderOpts,
+): ThemeColorSchemes
 
 /** @internal */
 export declare type CSSObject = StyledObject<any>
 
-/**
- * @beta
- */
-export declare type CSSVariableKey = ThemeColorName & ('spot' | 'syntax' | 'mutable')
-
-/**
- * @beta
- */
-export declare const cssVars: {
-  /**
-   * This variables are mutable, they can be updated by other components.
-   * The main component that updates them is the card, these are the only ones that should be exposed for use from the cards.
-   */
-  mutable: Record<
-    'bg-color' | 'muted-fg-color' | 'icon-color' | 'fg-color' | 'bg-image' | 'accent-color',
-    string
-  >
-  default: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  transparent: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  primary: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  positive: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  caution: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  critical: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-}
-
 /**
  * @public
  */
@@ -881,7 +647,7 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'width' | 'id'>, 'ref'> &
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'id' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1039,7 +805,7 @@ export declare function _fillCSSObject(
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'wrap'>, 'ref'> &
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1127,7 +893,7 @@ export declare function _getResponsiveSpace(
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>, 'ref'> &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1190,7 +956,7 @@ export declare function _hasFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> &
+  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLElement>
 >
 
@@ -1218,7 +984,7 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1241,7 +1007,7 @@ export declare function hexToRgb(hex: string): RGB
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -1332,7 +1098,7 @@ export declare function _isScrollable(el: Node): boolean
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLDivElement>
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -1349,7 +1115,7 @@ export declare interface KBDProps {
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1377,7 +1143,7 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1452,7 +1218,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'tabIndex' | 'role'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1560,8 +1326,8 @@ export declare const MenuDivider: IStyledComponent<
     security?: string | undefined
     unselectable?: 'on' | 'off' | undefined
     inputMode?:
-      | 'search'
       | 'text'
+      | 'search'
       | 'none'
       | 'tel'
       | 'url'
@@ -1851,7 +1617,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'height' | 'tabIndex' | 'selected'> &
+    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'ref' | 'height' | 'tabIndex' | 'as'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1868,7 +1634,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   selected?: boolean
   space?: number | number[]
   text?: React.ReactNode
-  tone?: ThemeColorToneKey
+  tone?: SelectableTone
 }
 
 /**
@@ -1905,6 +1671,11 @@ export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
  */
 export declare function parseColor(color: unknown): RGB | RGBA
 
+/**
+ * @public
+ */
+export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
+
 /**
  * Placement of floating UI elements.
  *
@@ -1928,7 +1699,7 @@ export declare type Placement =
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
-      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content' | 'width'>,
+      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'width' | 'as'>,
       'ref'
     > &
       RefAttributes<HTMLDivElement>
@@ -2031,7 +1802,7 @@ export declare interface PortalProviderProps {
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2365,7 +2136,7 @@ export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxPr
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2381,7 +2152,7 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'aria-hidden'>, 'ref'> &
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2430,7 +2201,7 @@ export declare interface Styles {
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2446,7 +2217,7 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'type' | 'label' | 'as' | 'id' | 'aria-controls'>,
+    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'id' | 'aria-controls' | 'as' | 'type'>,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>
@@ -2456,7 +2227,7 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<unknown>
 >
 
@@ -2472,7 +2243,7 @@ export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'>
  */
 export declare const TabPanel: ForwardRefExoticComponent<
   Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'id' | 'role' | 'aria-labelledby'>,
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2511,7 +2282,7 @@ export declare interface TabProps {
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
@@ -2538,14 +2309,13 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
   fontSize?: number | number[]
   padding?: number | number[]
   weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
 }
 
 /**
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'as' | 'type'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2579,7 +2349,6 @@ export declare interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
 }
 
 /**
@@ -2623,7 +2392,7 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2641,7 +2410,9 @@ export declare interface TextSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare interface Theme {
-  sanity: RootTheme
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
 }
 
 /**
@@ -2655,6 +2426,239 @@ export declare interface ThemeAvatar {
   focusRing: FocusRing
 }
 
+/**
+ * @public
+ */
+export declare interface ThemeColor {
+  dark: boolean
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  input: ThemeColorInput
+  selectable?: ThemeColorSelectable
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+  solid: ThemeColorSolid
+  muted: ThemeColorMuted
+}
+
+/**
+ * @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
+  }
+}
+
+/**
+ * @public
+ */
+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'
+  }) => ThemeColorCardState
+  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'
+  }) => ThemeColorSelectableState
+  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
+}
+
+/**
+ * @public
+ */
+export declare type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export declare type ThemeColorButtonState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export declare interface ThemeColorButtonStates {
+  enabled: ThemeColorButtonState
+  hovered: ThemeColorButtonState
+  pressed: ThemeColorButtonState
+  selected: ThemeColorButtonState
+  disabled: ThemeColorButtonState
+}
+
+/**
+ * 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: ThemeColorCardState
+  hovered: ThemeColorCardState
+  pressed: ThemeColorCardState
+  selected: ThemeColorCardState
+  disabled: ThemeColorCardState
+}
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export declare type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export declare interface ThemeColorGenericState {
+  bg: string
+  /**
+   * @beta
+   */
+  bg2?: string
+  border: string
+  fg: string
+  iconColor: 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
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInputState {
+  bg: string
+  bg2: string
+  fg: string
+  border: string
+  placeholder: string
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorMuted {
+  default: ThemeColorMutedTone
+  transparent: ThemeColorMutedTone
+  primary: ThemeColorMutedTone
+  positive: ThemeColorMutedTone
+  caution: ThemeColorMutedTone
+  critical: ThemeColorMutedTone
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
 /**
  * @public
  */
@@ -2668,13 +2672,11 @@ export declare type ThemeColorName =
 
 /**
  * @public
- * @deprecated Use `toneContext` instead.
  */
 export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ThemeColorProviderProps {
   children?: React.ReactNode
@@ -2682,6 +2684,18 @@ export declare interface ThemeColorProviderProps {
   tone?: ThemeColorName
 }
 
+/**
+ * @public
+ */
+export declare interface ThemeColorScheme {
+  default: ThemeColor
+  transparent: ThemeColor
+  primary: ThemeColor
+  positive: ThemeColor
+  caution: ThemeColor
+  critical: ThemeColor
+}
+
 /**
  * @public
  */
@@ -2691,7 +2705,74 @@ export declare type ThemeColorSchemeKey = 'dark' | 'light'
  * @public
  */
 export declare interface ThemeColorSchemes {
-  tones: Record<ThemeColorName, ColorTints>
+  dark: ThemeColorScheme
+  light: 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
+ */
+export declare interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeColorSpot {
+  gray: string
+  blue: string
+  purple: string
+  magenta: string
+  red: string
+  orange: string
+  yellow: string
+  green: string
+  cyan: string
 }
 
 /**
@@ -2708,6 +2789,48 @@ export declare type ThemeColorSpotKey =
   | 'green'
   | 'cyan'
 
+/**
+ * @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
  */
@@ -2920,7 +3043,7 @@ export declare interface ToastProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2998,7 +3121,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'wrap' | 'height' | 'role' | 'align'> &
+      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'wrap' | 'height' | 'role' | 'as' | 'align'> &
       RefAttributes<HTMLDivElement>
   >
 >
@@ -3023,7 +3146,7 @@ export declare interface TreeContextValue {
  * @beta
  */
 export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'as' | 'role'>
+  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'role' | 'as'>
 >
 
 /**
@@ -3188,7 +3311,7 @@ export declare function useTree(): TreeContextValue
 export declare const VirtualList: ForwardRefExoticComponent<
   VirtualListProps<any> &
     StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'as' | 'onChange'> &
+    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
     RefAttributes<HTMLDivElement>
 >