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

package/dist/theme.d.ts

@@ -12,74 +12,90 @@ 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]
+  code: {
+    bg: [ColorToken, ColorToken]
+    fg: [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]
+    }
   }
-  /**
-   * @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
+  focusRing: [ColorToken, ColorToken]
+  link: {
+    fg: [ColorToken, ColorToken]
+  }
+  shadow: {
+    outline: [ColorToken, ColorToken]
+    umbra: [ColorToken, ColorToken]
+    penumbra: [ColorToken, ColorToken]
+    ambient: [ColorToken, ColorToken]
+  }
+  skeleton: {
+    from: [ColorToken, ColorToken]
+    to: [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 +134,9 @@ export declare const COLOR_CONFIG_CARD_TONES: readonly [
   '*',
   'transparent',
   'default',
+  'neutral',
   'primary',
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -158,7 +176,9 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
 export declare const COLOR_CONFIG_STATE_TONES: readonly [
   '*',
   'default',
+  'neutral',
   'primary',
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -223,10 +243,29 @@ export declare type ColorConfigValue =
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
 
 /** @public */
-export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5]
+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 ContainerWidth = (typeof CONTAINER)[number] | 'auto'
+export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
+
+/** @public */
+export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5, 'auto']
+
+/** @public */
+export declare type ContainerWidth = (typeof CONTAINER)[number]
 
 /**
  * @public
@@ -240,20 +279,41 @@ 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 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 +362,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
@@ -374,11 +442,34 @@ 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 type Radius = (typeof RADIUS)[number]
+
+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 +515,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 +628,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 +641,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 +668,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 +693,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 +723,42 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   _resolved: boolean
 }
 
+/**
+ * Supersedes `RootTheme` and `RootTheme_v2`.
+ *
+ * @public
+ */
+export declare interface Theme_v3 {
+  _version: 3
+  _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 +805,8 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
   syntax: ThemeColorSyntax
 }
 
+export declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+
 /**
  * @public
  */
@@ -645,32 +849,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 +922,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 +1064,66 @@ export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   syntax: ThemeColorSyntax
 }
 
+export declare interface ThemeColorCard_v3 {
+  _hue: Hue
+  avatar: ThemeColorAvatar_v2
+  backdrop: string
+  code: {
+    bg: string
+    fg: 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
+    }
+  }
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+  variant: Record<ThemeColorVariantKey, ThemeColorVariant>
+}
+
 /**
  * @public
  * @deprecated Use `ThemeColorState_v2` instead.
@@ -889,6 +1133,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 +1306,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 +1324,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 +1589,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 +1628,9 @@ export declare interface ThemeConfig {
   style?: ThemeStyles
 }
 
+/** @public */
+export declare type ThemeEntry = [`--${string}`, string]
+
 /**
  * @public
  */
@@ -1367,6 +1644,7 @@ export declare interface ThemeFocusRing {
  */
 export declare interface ThemeFont {
   family: string
+  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
@@ -1486,6 +1764,12 @@ export declare interface ThemeLayer {
   }
 }
 
+/** @public */
+export declare interface ThemeOptions {
+  v2?: ThemeConfig
+  tokens?: PartialTokens<Tokens>
+}
+
 /**
  * @public
  */
@@ -1507,6 +1791,10 @@ export declare interface ThemeStyles {
   }
 }
 
+export declare type Tint = (typeof TINTS)[number]
+
+export declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
 /** @internal */
 export declare interface TokenBaseKeyNode {
   type: 'base'
@@ -1547,16 +1835,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 {}