@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

package/dist/theme.d.ts

@@ -1,20 +1,35 @@
 import {ColorHueKey} from '@sanity/color'
-import {ColorTint} from '@sanity/color'
+import type {ColorHues} from '@sanity/color'
+import type {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
+import type {Hue as Hue_2} from '@sanity/ui/theme'
 import type {StyledObject} from 'styled-components'
 
+/** @public */
+export declare const AVATAR_COLORS: readonly [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+]
+
 /** @public */
 export declare const AVATAR_SIZE: readonly [0, 1, 2, 3]
 
+/** @public */
+export declare type AvatarColor = (typeof AVATAR_COLORS)[number]
+
 /** @public */
 export declare type AvatarSize = (typeof AVATAR_SIZE)[number]
 
 /** @public */
 export declare type BaseTheme = RootTheme
 
-/** @internal */
-export declare function buildColor_v3(tokens: ColorTokens): ThemeColor_v3
-
 /** @internal */
 export declare function buildTheme(_config?: ThemeConfig): RootTheme
 
@@ -28,66 +43,66 @@ export declare interface CardColorTokens {
     Hue,
     {
       _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
+      bg: ColorValue
+      fg: ColorValue
     }
   >
-  backdrop: [ColorToken, ColorToken]
+  backdrop: ColorValue
   code: {
-    bg: [ColorToken, ColorToken]
-    fg: [ColorToken, ColorToken]
+    bg: ColorValue
+    fg: ColorValue
     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]
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
     }
   }
-  focusRing: [ColorToken, ColorToken]
+  focusRing: ColorValue
   link: {
-    fg: [ColorToken, ColorToken]
+    fg: ColorValue
   }
   shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: [ColorToken, ColorToken]
-    to: [ColorToken, ColorToken]
+    from: ColorValue
+    to: ColorValue
   }
   variant: {
     solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
@@ -193,6 +208,9 @@ export declare const COLOR_CONFIG_STATES: readonly [
   'disabled',
 ]
 
+/** @public */
+export declare const COLOR_VARIANTS: readonly ['tinted', 'solid']
+
 /** @public */
 export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
@@ -232,14 +250,40 @@ export declare type ColorConfigValue =
   | `white`
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
-  | `${ColorHueKey}`
-  | `${ColorHueKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}`
-  | `${ColorHueKey}/${ColorTintKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
-  | `${ColorTintKey}`
-  | `${ColorTintKey} ${number}%`
-  | `${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${Hue}`
+  | `${Hue} ${number}%`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Hue}/${Tint}/${ColorConfigOpacityValue}`
+  | `${Tint}`
+  | `${Tint} ${number}%`
+  | `${Tint}/${ColorConfigOpacityValue}`
+
+/** @internal */
+export declare interface ColorInheritNode {
+  type: 'inherit'
+}
+
+/** @internal */
+export declare interface ColorNode {
+  type: 'color'
+  name: 'black' | 'white'
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
+}
+
+/** @internal */
+export declare interface ColorTintNode {
+  type: 'tint'
+  hue: Hue
+  tint: Tint
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
+}
 
 /** @public */
 export declare type ColorToken =
@@ -248,9 +292,9 @@ export declare type ColorToken =
   | `black/${ColorTokenOpacityValue}`
   | `white`
   | `white/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint}`
-  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint} ${number}%`
+  | `${Hue}-${Tint}`
+  | `${Hue}-${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint} ${number}%`
   | `${Tint}`
   | `${Tint}/${ColorTokenOpacityValue}`
   | `${Tint} ${number}%`
@@ -261,9 +305,22 @@ export declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
 /** @public */
 export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
 
+/**
+ * Theme color values are tuples of [light, dark] color tokens.
+ *
+ * @public
+ */
+export declare type ColorValue = [ColorToken, ColorToken]
+
 /** @public */
 export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5, 'auto']
 
+/** @public */
+export declare const CONTAINER_SCALE: readonly [0, 1, 2, 3, 4, 5]
+
+/** @public */
+export declare type ContainerScale = (typeof CONTAINER_SCALE)[number]
+
 /** @public */
 export declare type ContainerWidth = (typeof CONTAINER)[number]
 
@@ -282,9 +339,6 @@ export declare function createColorTheme(
  */
 export declare type CSSObject = StyledObject<any>
 
-/** @public */
-export declare type CSSVariableKey = `--${string}`
-
 /** @internal */
 export declare const defaultTokens: PartialTokens<Tokens>
 
@@ -292,16 +346,16 @@ export declare const defaultTokens: PartialTokens<Tokens>
 export declare interface ElementColorTokens {
   _hue: Hue
   bg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
+    0: ColorValue
+    4: ColorValue
   }
 }
 
@@ -332,7 +386,10 @@ export declare type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
 /** @public */
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
 
-/** @internal */
+/**
+ * @internal
+ * @deprecated Will be removed in next major version
+ */
 export declare function getContrastRatio(bg: string, fg: string): number
 
 /** @internal */
@@ -410,9 +467,6 @@ export declare function isColorOpacityValue(str: string): str is ColorConfigOpac
 /** @internal */
 export declare function isColorTintKey(str: string): str is ColorTintKey
 
-/** @internal */
-export declare function isColorTokenValue(str: string): str is ColorConfigValue
-
 /** @internal */
 export declare function isColorValue(str: string): str is 'black' | 'white'
 
@@ -435,7 +489,12 @@ export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 export declare function parseColor(color: unknown): RGB | RGBA
 
 /** @internal */
-export declare function parseTokenKey(str: string): TokenKeyNode | undefined
+export declare function _parseColorToken(
+  str: ColorToken,
+  options: {
+    defaultHue: Hue
+  },
+): TokenizeColorResult
 
 /** @internal */
 export declare function parseTokenValue(str: string): TokenValueNode | undefined
@@ -456,23 +515,27 @@ export declare type PartialTokens<T> = T extends [ColorToken, ColorToken]
     : T
 
 /** @public */
-export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
+export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6]
 
 /** @public */
 export declare type Radius = (typeof RADIUS)[number]
 
 /** @public */
-export declare function renderColor(
-  token: [ColorToken, ColorToken],
-  context: RenderColorContext,
-): string
-
-/** @public */
-export declare interface RenderColorContext {
-  bgVar: CSSVariableKey
-  bgValue: string
-  hue: Hue
-  scheme: ThemeColorSchemeKey
+export declare interface ResolvedColorToken {
+  color:
+    | {
+        type: 'inherit'
+      }
+    | {
+        type: 'black' | 'white'
+      }
+    | {
+        type: 'hue'
+        hue: Hue
+        tint: Tint
+      }
+  opacity: number
+  mix: number
 }
 
 /** @internal */
@@ -638,7 +701,7 @@ export declare const SHADOW: readonly [0, 1, 2, 3, 4, 5]
 export declare type Shadow = (typeof SHADOW)[number]
 
 /** @public */
-export declare const SPACE: readonly [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+export declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 /** @public */
 export declare type Space = (typeof SPACE)[number]
@@ -755,9 +818,10 @@ export declare interface Theme_v3 {
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
-  radius: number[]
+  palette: ThemePalette_v3
+  radius: Record<Radius, number>
   shadow: Array<ThemeShadow | null>
-  space: number[]
+  space: Record<Space, number>
 }
 
 /**
@@ -803,11 +867,14 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
 }
 
 /** @public */
-export declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
+export declare type ThemeColor_v3 = Record<ThemeColorCardToneKey, ThemeColorCard_v3>
 
 /** @public */
 export declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
 
+/** @public */
+export declare type ThemeColorAvatar_v3 = Record<AvatarColor, ThemeColorAvatarHue_v3>
+
 /** @public */
 export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
 
@@ -818,10 +885,16 @@ export declare interface ThemeColorAvatarHue_v2 {
   fg: string
 }
 
+/** @public */
+export declare interface ThemeColorAvatarHue_v3 {
+  bg: ColorValue
+  fg: ColorValue
+}
+
 /** @public */
 export declare interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
 }
@@ -859,7 +932,7 @@ export declare interface ThemeColorBadgeTone_v2 {
 /** @public */
 export declare interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   dot?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -1001,7 +1074,7 @@ export declare interface ThemeColorButtonStates {
 /** @public */
 export declare interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
-  _hue?: ColorHueKey
+  _hue?: Hue_2
 }
 
 /** @public */
@@ -1049,60 +1122,63 @@ export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
 /** @public */
 export declare interface ThemeColorCard_v3 {
   _hue: Hue
-  avatar: ThemeColorAvatar_v2
-  backdrop: string
+  avatar: ThemeColorAvatar_v3
+  backdrop: ColorValue
   code: {
-    bg: string
-    fg: string
+    bg: ColorValue
+    fg: ColorValue
     token: {
-      atrule: string
-      attrName: string
-      attrValue: string
-      attribute: string
-      boolean: string
-      builtin: string
-      cdata: string
-      char: string
-      class: string
-      className: string
-      comment: string
-      constant: string
-      deleted: string
-      doctype: string
-      entity: string
-      function: string
-      hexcode: string
-      id: string
-      important: string
-      inserted: string
-      keyword: string
-      number: string
-      operator: string
-      prolog: string
-      property: string
-      pseudoClass: string
-      pseudoElement: string
-      punctuation: string
-      regex: string
-      selector: string
-      string: string
-      symbol: string
-      tag: string
-      unit: string
-      url: string
-      variable: string
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
     }
   }
-  focusRing: string
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
+  }
   shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   skeleton: {
-    from: string
-    to: string
+    from: ColorValue
+    to: ColorValue
   }
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
@@ -1120,16 +1196,16 @@ export declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[numb
 export declare interface ThemeColorElement {
   _hue: Hue
   bg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   border: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
   fg: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   }
 }
 
@@ -1230,7 +1306,7 @@ export declare interface ThemeColorInputStates {
 /** @public */
 export declare interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   bg?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -1243,7 +1319,7 @@ export declare interface ThemeColorInputStateTokens {
 /** @public */
 export declare interface ThemeColorInputTokens
   extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
-  _hue?: ColorHueKey
+  _hue?: Hue_2
 }
 
 /** @public */
@@ -1294,7 +1370,7 @@ export declare type ThemeColorName =
 export declare type ThemeColorPalette = {
   black: string | ColorTint
   white: string | ColorTint
-} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>
+} & Record<Hue, Record<Tint, string | ColorTint>>
 
 /**
  * @public
@@ -1305,11 +1381,6 @@ export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
 /** @public */
 export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
-/** @public */
-export declare interface ThemeColorScheme_v3 {
-  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
-}
-
 /** @public */
 export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
@@ -1454,7 +1525,7 @@ export declare type ThemeColorStatesTokens = Partial<
 /** @public */
 export declare interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
+  _hue?: Hue_2
   accent?: {
     fg?: ThemeColorTokenValue
   }
@@ -1538,7 +1609,7 @@ export declare interface ThemeColorTokens {
     Record<
       ColorConfigStateTone,
       {
-        _hue?: ColorHueKey
+        _hue?: Hue_2
       } & ThemeColorStatesTokens
     >
   >
@@ -1558,7 +1629,7 @@ export declare type ThemeColorToneKey = ThemeColorName
 export declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
 
 /** @public */
-export declare type ThemeColorVariantKey = 'tinted' | 'solid'
+export declare type ThemeColorVariantKey = (typeof COLOR_VARIANTS)[number]
 
 /** @public */
 export declare interface ThemeConfig {
@@ -1717,6 +1788,13 @@ export declare interface ThemeOptions {
   tokens?: PartialTokens<Tokens>
 }
 
+/** @public */
+export declare interface ThemePalette_v3 {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
 /** @public */
 export declare interface ThemeShadow {
   umbra: ThemeBoxShadow
@@ -1779,6 +1857,9 @@ export declare interface TokenHueValueNode {
   value?: ColorHueKey
 }
 
+/** @internal */
+export declare type TokenizeColorResult = ColorNode | ColorTintNode | ColorInheritNode
+
 /** @internal */
 export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode