@sanity/ui 1.8.3 → 2.0.0-alpha.10

package/dist/index.d.ts

@@ -3,6 +3,7 @@
 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'
@@ -49,8 +50,10 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
       HTMLProps<HTMLInputElement>,
+      | 'type'
       | 'value'
       | 'ref'
+      | 'as'
       | 'id'
       | 'spellCheck'
       | 'role'
@@ -64,9 +67,7 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       | 'aria-owns'
       | 'onChange'
       | 'onSelect'
-      | 'as'
       | 'autoComplete'
-      | 'type'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
     },
@@ -132,7 +133,7 @@ export declare interface AutocompleteProps<
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
     Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
   renderOption?: (option: Option) => ReactElement
@@ -342,14 +343,20 @@ export declare interface BaseTheme<Styles extends {} = {}> {
   avatar: ThemeAvatar
   button: {
     textWeight: ThemeFontWeightKey
+    focusRing: FocusRing
+  }
+  card: {
+    focusRing: FocusRing
   }
   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
@@ -359,7 +366,6 @@ export declare interface BaseTheme<Styles extends {} = {}> {
   radius: number[]
   shadows: Array<ThemeShadow | null>
   space: number[]
-  input: ThemeInput
   styles?: Styles
 }
 
@@ -390,7 +396,7 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -438,7 +444,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'as' | 'type'> &
+    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -481,6 +487,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   selected?: boolean
   space?: number | number[]
   textAlign?: ButtonTextAlign
+  muted?: boolean
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
@@ -500,7 +507,7 @@ export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -525,6 +532,12 @@ 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
 }
 
 /**
@@ -534,6 +547,8 @@ export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
+  $scheme: ThemeColorSchemeKey
+  $updateCssVars: boolean
 }
 
 /**
@@ -545,7 +560,7 @@ export declare type CardTone = ThemeColorToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -566,7 +581,7 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
+  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -585,7 +600,7 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -603,7 +618,7 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -618,11 +633,19 @@ export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {
 export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
 
 /**
- * @public
+ * @internal
+ * @deprecated Use studioTheme instead.
  */
-export declare function createColorTheme(
-  partialOpts?: PartialThemeColorBuilderOpts,
-): ThemeColorSchemes
+export declare function createColorTheme(): null
+
+/**
+ * @beta
+ */
+export declare const createCssVars: (
+  scheme: ThemeColorSchemeKey,
+  tones: Record<ThemeColorName, ColorTints>,
+  defaultTone?: ThemeColorName,
+) => Record<string, string>
 
 /** @internal */
 export declare type CSSObject = StyledObject<any>
@@ -630,6 +653,223 @@ 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
+ */
 export declare type Delay =
   | number
   | Partial<{
@@ -641,7 +881,7 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'id' | 'as'>, 'ref'> &
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'width' | 'id'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -677,7 +917,7 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
    * @beta
    */
   __unstable_hideCloseButton?: boolean
-  cardRadius?: number | number[]
+  cardRadius?: Radius | Radius[]
   cardShadow?: number | number[]
   contentRef?: React.ForwardedRef<HTMLDivElement>
   footer?: React.ReactNode
@@ -799,7 +1039,7 @@ export declare function _fillCSSObject(
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'wrap'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -854,6 +1094,14 @@ export declare function focusFirstDescendant(element: HTMLElement): boolean
  */
 export declare function focusLastDescendant(element: HTMLElement): boolean
 
+/**
+ * @public
+ */
+export declare interface FocusRing {
+  offset: number
+  width: number
+}
+
 /**
  * @internal
  */
@@ -879,7 +1127,7 @@ export declare function _getResponsiveSpace(
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -942,7 +1190,7 @@ export declare function _hasFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
+  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> &
     RefAttributes<HTMLElement>
 >
 
@@ -970,7 +1218,7 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -993,7 +1241,7 @@ export declare function hexToRgb(hex: string): RGB
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -1002,7 +1250,7 @@ export declare const Hotkeys: ForwardRefExoticComponent<
 export declare interface HotkeysProps {
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   keys?: string[]
 }
@@ -1084,7 +1332,7 @@ export declare function _isScrollable(el: Node): boolean
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLDivElement>
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -1094,14 +1342,14 @@ export declare interface KBDProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 /**
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1129,7 +1377,7 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1204,7 +1452,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'tabIndex' | 'role'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1244,7 +1492,7 @@ export declare interface MenuButtonProps {
   /**
    * @deprecated Use `popover={{radius: 2}}` instead.
    */
-  popoverRadius?: number | number[]
+  popoverRadius?: Radius | Radius[]
   /**
    * @beta Do not use in production.
    * @deprecated Use `popover={{portal: true}}` instead.
@@ -1312,8 +1560,8 @@ export declare const MenuDivider: IStyledComponent<
     security?: string | undefined
     unselectable?: 'on' | 'off' | undefined
     inputMode?:
-      | 'text'
       | 'search'
+      | 'text'
       | 'none'
       | 'tel'
       | 'url'
@@ -1592,7 +1840,7 @@ export declare interface MenuGroupProps {
   icon?: React.ElementType | React.ReactNode
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
@@ -1603,7 +1851,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'ref' | 'height' | 'tabIndex' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'height' | 'tabIndex' | 'selected'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1620,7 +1868,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   selected?: boolean
   space?: number | number[]
   text?: React.ReactNode
-  tone?: SelectableTone
+  tone?: ThemeColorToneKey
 }
 
 /**
@@ -1650,17 +1898,12 @@ export declare interface MenuProps extends ResponsivePaddingProps {
  * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
  * @internal
  */
-export declare function multiply(b: RGB, s: RGB): RGB
+export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 
 /**
  * @internal
  */
-export declare function parseColor(color: unknown): RGB
-
-/**
- * @public
- */
-export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
+export declare function parseColor(color: unknown): RGB | RGBA
 
 /**
  * Placement of floating UI elements.
@@ -1685,7 +1928,7 @@ export declare type Placement =
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
-      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'width' | 'as'>,
+      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content' | 'width'>,
       'ref'
     > &
       RefAttributes<HTMLDivElement>
@@ -1788,7 +2031,7 @@ export declare interface PortalProviderProps {
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1799,6 +2042,11 @@ export declare interface RadioProps {
   customValidity?: string
 }
 
+/**
+ * @public
+ */
+export declare type Radius = number | 'full'
+
 /**
  * @internal
  */
@@ -1971,7 +2219,7 @@ export declare interface ResponsivePaddingProps {
  * @public
  */
 export declare interface ResponsiveRadiusProps {
-  radius?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 /**
@@ -2025,6 +2273,17 @@ 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
 }
 
 /**
@@ -2032,6 +2291,11 @@ export declare interface RGB {
  */
 export declare function rgba(color: unknown, a: number): string
 
+/**
+ * @internal
+ */
+export declare function rgbaToRGBA(rgba: string): RGBA
+
 /**
  * @internal
  */
@@ -2053,7 +2317,7 @@ export declare type RootTheme = BaseTheme<Styles>
  * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
  * @internal
  */
-declare function screen_2(b: RGB, s: RGB): RGB
+declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
 /**
@@ -2075,7 +2339,7 @@ export declare type SelectableTone = 'default' | 'primary' | 'positive' | 'cauti
 export declare interface SelectProps {
   fontSize?: number | number[]
   padding?: number | number[]
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   customValidity?: string
 }
@@ -2101,7 +2365,7 @@ export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxPr
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2117,7 +2381,7 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'aria-hidden'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2166,7 +2430,7 @@ export declare interface Styles {
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2182,7 +2446,7 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'id' | 'aria-controls' | 'as' | 'type'>,
+    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'type' | 'label' | 'as' | 'id' | 'aria-controls'>,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>
@@ -2192,7 +2456,7 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<unknown>
 >
 
@@ -2208,7 +2472,7 @@ export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'>
  */
 export declare const TabPanel: ForwardRefExoticComponent<
   Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'id' | 'role' | 'aria-labelledby'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2247,7 +2511,7 @@ export declare interface TabProps {
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
@@ -2274,13 +2538,14 @@ 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>, 'prefix' | 'as' | 'type'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2309,11 +2574,12 @@ export declare interface TextInputProps {
   onClear?: () => void
   padding?: number | number[]
   prefix?: React.ReactNode
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 /**
@@ -2357,7 +2623,7 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2375,9 +2641,7 @@ export declare interface TextSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
+  sanity: RootTheme
 }
 
 /**
@@ -2388,237 +2652,7 @@ export declare interface ThemeAvatar {
     distance: number
     size: number
   }[]
-}
-
-/**
- * @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
-  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
-  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
+  focusRing: FocusRing
 }
 
 /**
@@ -2634,11 +2668,13 @@ 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
@@ -2646,18 +2682,6 @@ export declare interface ThemeColorProviderProps {
   tone?: ThemeColorName
 }
 
-/**
- * @public
- */
-export declare interface ThemeColorScheme {
-  default: ThemeColor
-  transparent: ThemeColor
-  primary: ThemeColor
-  positive: ThemeColor
-  caution: ThemeColor
-  critical: ThemeColor
-}
-
 /**
  * @public
  */
@@ -2667,74 +2691,7 @@ export declare type ThemeColorSchemeKey = 'dark' | 'light'
  * @public
  */
 export declare interface ThemeColorSchemes {
-  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
+  tones: Record<ThemeColorName, ColorTints>
 }
 
 /**
@@ -2751,48 +2708,6 @@ 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
  */
@@ -2873,10 +2788,12 @@ export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bo
 export declare interface ThemeInput {
   checkbox: {
     size: number
+    focusRing: FocusRing
   }
   radio: {
     size: number
     markSize: number
+    focusRing: FocusRing
   }
   switch: {
     width: number
@@ -2884,10 +2801,17 @@ export declare interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
+    focusRing: FocusRing
   }
   border: {
     width: number
   }
+  select: {
+    focusRing: FocusRing
+  }
+  text: {
+    focusRing: FocusRing
+  }
 }
 
 /**
@@ -2996,7 +2920,7 @@ export declare interface ToastProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'as'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -3074,7 +2998,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'wrap' | 'height' | 'role' | 'as' | 'align'> &
+      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'wrap' | 'height' | 'role' | 'align'> &
       RefAttributes<HTMLDivElement>
   >
 >
@@ -3099,7 +3023,7 @@ export declare interface TreeContextValue {
  * @beta
  */
 export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'role' | 'as'>
+  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'as' | 'role'>
 >
 
 /**
@@ -3264,7 +3188,7 @@ export declare function useTree(): TreeContextValue
 export declare const VirtualList: ForwardRefExoticComponent<
   VirtualListProps<any> &
     StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'as' | 'onChange'> &
     RefAttributes<HTMLDivElement>
 >