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

package/dist/theme.d.mts

@@ -12,74 +12,86 @@ export declare type AvatarSize = (typeof AVATAR_SIZE)[number]
 /**
  * @public
  */
-export declare interface BaseTheme {
-  _version?: 0
-  /**
-   * @deprecated Use `v2.avatar` instead
-   */
-  avatar: ThemeAvatar
-  /**
-   * @deprecated Use `v2.button` instead
-   */
-  button: {
-    textWeight: ThemeFontWeightKey
+export declare type BaseTheme = RootTheme
+
+/** @internal */
+export declare function buildColor_v3(tokens: ColorTokens): ThemeColor_v3
+
+/** @internal */
+export declare function buildTheme(_config?: ThemeConfig): RootTheme
+
+export declare function buildTheme_v3(options?: ThemeOptions): Theme_v3
+
+/** @public */
+export declare interface CardColorTokens {
+  _hue: Hue
+  avatar: Record<
+    Hue,
+    {
+      _hue: Hue
+      bg: [ColorToken, ColorToken]
+      fg: [ColorToken, ColorToken]
+    }
+  >
+  backdrop: [ColorToken, ColorToken]
+  focusRing: [ColorToken, ColorToken]
+  link: {
+    fg: [ColorToken, ColorToken]
   }
-  /**
-   * @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
+  shadow: {
+    outline: [ColorToken, ColorToken]
+    umbra: [ColorToken, ColorToken]
+    penumbra: [ColorToken, ColorToken]
+    ambient: [ColorToken, ColorToken]
+  }
+  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]
+  }
+  variant: {
+    solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
+    tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
   }
-  /**
-   * @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[]]
 
@@ -118,7 +130,9 @@ export declare const COLOR_CONFIG_CARD_TONES: readonly [
   '*',
   'transparent',
   'default',
+  'neutral',
   'primary',
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -158,7 +172,9 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
 export declare const COLOR_CONFIG_STATE_TONES: readonly [
   '*',
   'default',
+  'neutral',
   'primary',
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -222,11 +238,30 @@ export declare type ColorConfigValue =
   | `${ColorTintKey} ${number}%`
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
 
+/** @public */
+export declare type ColorToken =
+  | `black`
+  | `black/${ColorTokenOpacityValue}`
+  | `white`
+  | `white/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Tint}`
+  | `${Tint}/${ColorTokenOpacityValue}`
+  | `${Tint} ${number}%`
+
+/** @public */
+export declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
+
 /** @public */
 export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5]
 
 /** @public */
-export declare type ContainerWidth = (typeof CONTAINER)[number] | 'auto'
+export declare type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
 
 /**
  * @public
@@ -240,20 +275,43 @@ export declare function createColorTheme(
  * 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>
 
+declare type CSSVariableKey = `--${string}`
+
+export declare const defaultPalette: PaletteConfig
+
+export declare const defaultTokens: PartialTokens<Tokens>
+
+/** @public */
+export declare interface ElementColorTokens {
+  _hue: Hue
+  bg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  border: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  fg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+}
+
 /** @public */
-export declare const FONT_CODE_SIZE: readonly [0, 1, 2, 3, 4, 5]
+export declare const FONT_CODE_SIZE: readonly [0, 1, 2, 3, 4]
 
 /** @public */
-export declare const FONT_HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6]
+export declare const FONT_HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5]
 
 /** @public */
-export declare const FONT_LABEL_SIZE: readonly [0, 1, 2, 3, 4, 5, 6]
+export declare const FONT_LABEL_SIZE: readonly [0, 1, 2, 3, 4, 5]
 
 /** @public */
-export declare const FONT_TEXT_SIZE: readonly [0, 1, 2, 3, 4, 5]
+export declare const FONT_TEXT_SIZE: readonly [0, 1, 2, 3, 4]
 
 /** @public */
 export declare type FontCodeSize = (typeof FONT_CODE_SIZE)[number]
@@ -302,11 +360,19 @@ export declare interface HSL {
  */
 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
+export declare type Hue = (typeof HUES)[number]
+
+export declare const HUES: readonly [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+]
 
 /** @internal */
 export declare function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey
@@ -357,6 +423,24 @@ 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
  */
@@ -374,12 +458,35 @@ export declare function parseTokenValue(str: string): TokenValueNode | undefined
  */
 export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
 
+/** @public */
+export declare type PartialTokens<T> = T extends [ColorToken, ColorToken]
+  ? T
+  : T extends {}
+    ? {
+        [P in keyof T]?: PartialTokens<T[P]>
+      }
+    : T
+
 /** @public */
 export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 /** @public */
 export declare type Radius = (typeof RADIUS)[number] | 'full'
 
+export declare function renderColor(
+  token: [ColorToken, ColorToken],
+  context: RenderColorContext,
+): string
+
+export declare interface RenderColorContext {
+  bgVar: CSSVariableKey
+  hue: Hue
+  scheme: ThemeColorSchemeKey
+}
+
+/** @internal */
+export declare function resolveTokens(tokens?: PartialTokens<Tokens>): Tokens
+
 /**
  * @internal
  */
@@ -424,7 +531,75 @@ export declare function rgbToHsl({r, g, b}: RGB): HSL
 /**
  * @public
  */
-export declare type RootTheme = BaseTheme
+export declare interface RootTheme extends RootTheme_v0 {
+  v2?: RootTheme_v2
+  v3?: Theme_v3
+}
+
+/** @public */
+export declare interface RootTheme_v0 {
+  _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
+}
 
 /**
  * @public
@@ -469,6 +644,7 @@ export declare interface RootTheme_v2 {
 declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
+/** @public */
 export declare const SHADOW: readonly [0, 1, 2, 3, 4, 5]
 
 /** @public */
@@ -481,6 +657,8 @@ export declare const SPACE: readonly [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 export declare type Space = (typeof SPACE)[number]
 
 /**
+ * Used for the `theme` prop in `styled-components`’s `ThemeProvider`.
+ *
  * @public
  */
 export declare interface Theme {
@@ -506,7 +684,9 @@ export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bl
 export declare const THEME_COLOR_CARD_TONES: readonly [
   'transparent',
   'default',
+  'neutral',
   'primary',
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -529,7 +709,9 @@ 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',
@@ -557,6 +739,43 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   _resolved: boolean
 }
 
+/**
+ * Supersedes `RootTheme` and `RootTheme_v2`.
+ *
+ * @public
+ */
+export declare interface Theme_v3 {
+  _version: 3
+  _palette: PaletteConfig
+  _tokens: Tokens
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {
+      width: number
+    }
+    focusRing: ThemeFocusRing
+    shadow: {
+      outline: number
+    }
+  }
+  color: ThemeColor_v3
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+}
+
 /**
  * @public
  * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
@@ -603,6 +822,8 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
   syntax: ThemeColorSyntax
 }
 
+export declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+
 /**
  * @public
  */
@@ -645,32 +866,12 @@ export declare interface ThemeColorAvatarTokens {
 /**
  * @public
  */
-export declare interface ThemeColorBadge_v2 {
-  default: ThemeColorBadgeTone_v2
-  primary: ThemeColorBadgeTone_v2
-  positive: ThemeColorBadgeTone_v2
-  caution: ThemeColorBadgeTone_v2
-  critical: ThemeColorBadgeTone_v2
-}
+export declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
 
 /** @public */
-export declare interface ThemeColorBadgeTokens {
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  dot?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-}
-
-/** @public */
-export declare interface ThemeColorBadgeTokens {
-  '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
-}
+export declare type ThemeColorBadgeTokens = Partial<
+  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
+>
 
 /**
  * @public
@@ -738,7 +939,7 @@ export declare interface ThemeColorBuilderOpts {
   solid: (opts: {
     base: ThemeColorBase
     dark: boolean
-    tone: ThemeColorToneKey
+    tone: ThemeColorName
     name: ThemeColorName
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
   }) => ThemeColorGenericState
@@ -880,6 +1081,62 @@ export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   syntax: ThemeColorSyntax
 }
 
+export declare interface ThemeColorCard_v3 {
+  _hue: Hue
+  avatar: ThemeColorAvatar_v2
+  backdrop: string
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  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
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+  variant: Record<ThemeColorVariantKey, ThemeColorVariant>
+}
+
 /**
  * @public
  * @deprecated Use `ThemeColorState_v2` instead.
@@ -889,6 +1146,22 @@ export declare type ThemeColorCardState = ThemeColorGenericState
 /** @public */
 export declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
 
+export declare interface ThemeColorElement {
+  _hue: Hue
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
+
 /**
  * @public
  * @deprecated Use `ThemeColorState_v2` instead.
@@ -1046,7 +1319,13 @@ export declare interface ThemeColorMutedTone {
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export declare type ThemeColorName = ThemeColorCardToneKey
+export declare type ThemeColorName =
+  | 'transparent'
+  | 'default'
+  | 'primary'
+  | 'positive'
+  | 'caution'
+  | 'critical'
 
 /** @public */
 export declare type ThemeColorPalette = {
@@ -1058,13 +1337,17 @@ export declare type ThemeColorPalette = {
  * @public
  * @deprecated Use `ThemeColorScheme_v2` instead.
  */
-export declare type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
+export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
 
 /**
  * @public
  */
 export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
+export declare interface ThemeColorScheme_v3 {
+  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
+}
+
 /**
  * @public
  */
@@ -1319,7 +1602,11 @@ export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export declare type ThemeColorToneKey = ThemeColorCardToneKey
+export declare type ThemeColorToneKey = ThemeColorName
+
+export declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
+
+export declare type ThemeColorVariantKey = 'tinted' | 'solid'
 
 /** @public */
 export declare interface ThemeConfig {
@@ -1354,6 +1641,9 @@ export declare interface ThemeConfig {
   style?: ThemeStyles
 }
 
+/** @public */
+export declare type ThemeEntry = [`--${string}`, string]
+
 /**
  * @public
  */
@@ -1367,6 +1657,7 @@ export declare interface ThemeFocusRing {
  */
 export declare interface ThemeFont {
   family: string
+  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
@@ -1486,6 +1777,13 @@ export declare interface ThemeLayer {
   }
 }
 
+/** @public */
+export declare interface ThemeOptions {
+  v2?: ThemeConfig
+  palette?: PaletteConfig
+  tokens?: PartialTokens<Tokens>
+}
+
 /**
  * @public
  */
@@ -1507,6 +1805,30 @@ export declare interface ThemeStyles {
   }
 }
 
+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,
+]
+
 /** @internal */
 export declare interface TokenBaseKeyNode {
   type: 'base'
@@ -1547,16 +1869,15 @@ export declare interface TokenHueValueNode {
 /** @internal */
 export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
 
+/** @public */
+export declare interface Tokens {
+  color: ColorTokens
+}
+
 /** @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 {}