@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/theme.cjs.mjs

@@ -15,11 +15,11 @@ export const THEME_COLOR_BUTTON_MODES = cjs.THEME_COLOR_BUTTON_MODES;
 export const THEME_COLOR_CARD_TONES = cjs.THEME_COLOR_CARD_TONES;
 export const THEME_COLOR_INPUT_MODES = cjs.THEME_COLOR_INPUT_MODES;
 export const THEME_COLOR_INPUT_STATES = cjs.THEME_COLOR_INPUT_STATES;
+export const THEME_COLOR_SCHEMES = cjs.THEME_COLOR_SCHEMES;
 export const THEME_COLOR_STATES = cjs.THEME_COLOR_STATES;
 export const THEME_COLOR_STATE_TONES = cjs.THEME_COLOR_STATE_TONES;
 export const buildTheme = cjs.buildTheme;
 export const createColorTheme = cjs.createColorTheme;
-export const defaultTheme = cjs.defaultTheme;
 export const getContrastRatio = cjs.getContrastRatio;
 export const getScopedTheme = cjs.getScopedTheme;
 export const getTheme_v2 = cjs.getTheme_v2;

package/dist/theme.d.ts

@@ -64,28 +64,23 @@ export declare interface BaseTheme {
    */
   space: number[]
   /**
+   * @internal
    * @deprecated Use `v2.style` instead
    */
   styles?: ThemeStyles
   v2?: RootTheme_v2
 }
 
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` instead
- */
-export declare type BoxShadow = ThemeBoxShadow
-
 /** @internal */
 export declare function buildTheme(config?: ThemeConfig): RootTheme
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_AVATAR_COLORS: readonly ['*', ...ColorHueKey[]]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_CARD_KEYS: readonly [
   '_hue',
   'bg',
@@ -112,7 +107,7 @@ export declare const COLOR_CONFIG_CARD_KEYS: readonly [
   'shadow/ambient',
 ]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_CARD_TONES: readonly [
   '*',
   'transparent',
@@ -123,10 +118,10 @@ export declare const COLOR_CONFIG_CARD_TONES: readonly [
   'critical',
 ]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_INPUT_MODES: readonly ['*', 'default', 'invalid']
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_INPUT_STATES: readonly [
   '*',
   'enabled',
@@ -135,7 +130,7 @@ export declare const COLOR_CONFIG_INPUT_STATES: readonly [
   'disabled',
 ]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_STATE_KEYS: readonly [
   '_hue',
   'bg',
@@ -153,7 +148,7 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
   'status/icon',
 ]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_STATE_TONES: readonly [
   '*',
   'default',
@@ -163,7 +158,7 @@ export declare const COLOR_CONFIG_STATE_TONES: readonly [
   'critical',
 ]
 
-/** @internal */
+/** @public */
 export declare const COLOR_CONFIG_STATES: readonly [
   '*',
   'enabled',
@@ -213,15 +208,17 @@ export declare type ColorConfigValue =
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
   | `${ColorHueKey}`
+  | `${ColorHueKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
   | `${ColorTintKey}`
+  | `${ColorTintKey} ${number}%`
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
-  | ThemeColorBlendModeKey
 
 /**
  * @public
- * @deprecated Use `buildTheme` instead
+ * @deprecated Use `buildColorTheme` instead.
  */
 export declare function createColorTheme(
   partialOpts?: PartialThemeColorBuilderOpts,
@@ -234,11 +231,6 @@ export declare function createColorTheme(
  * */
 export declare type CSSObject = StyledObject<any>
 
-/**
- * @public
- */
-export declare const defaultTheme: BaseTheme
-
 /** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number
 
@@ -331,13 +323,15 @@ 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
 
+/** @internal */
 export declare function parseTokenValue(str: string): TokenValueNode | undefined
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeConfig` instead.
  */
 export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
 
@@ -418,6 +412,7 @@ export declare interface RootTheme_v2 {
   radius: number[]
   shadow: Array<ThemeShadow | null>
   space: number[]
+  /** @internal */
   style?: ThemeStyles
 }
 
@@ -429,12 +424,6 @@ export declare interface RootTheme_v2 {
 declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
-/**
- * @deprecated Use `ThemeStyles` instead
- * @internal
- */
-export declare type Styles = ThemeStyles
-
 /**
  * @public
  */
@@ -478,6 +467,9 @@ export declare const THEME_COLOR_INPUT_STATES: readonly [
   'disabled',
 ]
 
+/** @public */
+export declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
+
 /** @public */
 export declare const THEME_COLOR_STATE_TONES: readonly [
   'default',
@@ -501,11 +493,17 @@ export declare const THEME_COLOR_STATES: readonly [
  */
 export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
+  /**
+   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
+   * with sanity V2 components accessing a v1 <ThemeProvider>.
+   * See https://github.com/sanity-io/ui/pull/1203 for more info.
+   */
+  _resolved: boolean
 }
 
 /**
  * @public
- * @deprecated Use `ThemeAvatar_v2` instead
+ * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
  */
 export declare interface ThemeAvatar {
   sizes: {
@@ -541,7 +539,6 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
   button: ThemeColorButton
   card: ThemeColorCard
   dark: boolean
-  focusRing?: string
   input: ThemeColorInput
   muted: ThemeColorMuted
   selectable?: ThemeColorSelectable
@@ -553,17 +550,7 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
 /**
  * @public
  */
-export declare interface ThemeColorAvatar_v2 {
-  gray: ThemeColorAvatarHue_v2
-  blue: ThemeColorAvatarHue_v2
-  purple: ThemeColorAvatarHue_v2
-  magenta: ThemeColorAvatarHue_v2
-  red: ThemeColorAvatarHue_v2
-  orange: ThemeColorAvatarHue_v2
-  yellow: ThemeColorAvatarHue_v2
-  green: ThemeColorAvatarHue_v2
-  cyan: ThemeColorAvatarHue_v2
-}
+export declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
 
 /** @public */
 export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
@@ -577,6 +564,7 @@ export declare interface ThemeColorAvatarHue_v2 {
   fg: string
 }
 
+/** @public */
 export declare interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -584,6 +572,7 @@ export declare interface ThemeColorAvatarHueTokens {
   fg?: ThemeColorTokenValue
 }
 
+/** @public */
 export declare interface ThemeColorAvatarTokens {
   '*'?: ThemeColorAvatarHueTokens
   gray?: ThemeColorAvatarHueTokens
@@ -608,6 +597,7 @@ export declare interface ThemeColorBadge_v2 {
   critical: ThemeColorBadgeTone_v2
 }
 
+/** @public */
 export declare interface ThemeColorBadgeTokens {
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
@@ -616,6 +606,7 @@ export declare interface ThemeColorBadgeTokens {
   icon?: ThemeColorTokenValue
 }
 
+/** @public */
 export declare interface ThemeColorBadgeTokens {
   '*'?: ThemeColorBadgeToneTokens
   default?: ThemeColorBadgeToneTokens
@@ -635,6 +626,7 @@ export declare interface ThemeColorBadgeTone_v2 {
   icon: string
 }
 
+/** @public */
 export declare interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -666,6 +658,7 @@ export declare interface ThemeColorBase {
   }
 }
 
+/** @public */
 export declare interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
   backdrop?: ThemeColorTokenValue
@@ -682,7 +675,7 @@ export declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[nu
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `buildColorTheme` instead.
  */
 export declare interface ThemeColorBuilderOpts {
   base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
@@ -737,7 +730,7 @@ export declare interface ThemeColorBuilderOpts {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButton_v2` instead.
  */
 export declare interface ThemeColorButton {
   default: ThemeColorButtonTones
@@ -748,24 +741,28 @@ export declare interface ThemeColorButton {
 /**
  * @public
  */
-export declare interface ThemeColorButton_v2 {
-  default: ThemeColorButtonTones_v2
-  ghost: ThemeColorButtonTones_v2
-  bleed: ThemeColorButtonTones_v2
-}
+export declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
+
+/**
+ * @public
+ */
+export declare type ThemeColorButtonMode_v2 = Record<
+  ThemeColorStateToneKey,
+  ThemeColorButtonTone_v2
+>
 
 /** @public */
 export declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export declare type ThemeColorButtonState = ThemeColorGenericState
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonStates_v2` instead.
  */
 export declare interface ThemeColorButtonStates {
   enabled: ThemeColorGenericState
@@ -775,26 +772,21 @@ export declare interface ThemeColorButtonStates {
   disabled: ThemeColorGenericState
 }
 
-/**
- * @public
- */
-export declare interface ThemeColorButtonStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
-
+/** @public */
 export declare interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
   _hue?: ColorHueKey
 }
 
+/**
+ * @public
+ */
+export declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
+
 /**
  * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonTones_v2` instead.
  */
 export declare interface ThemeColorButtonTones {
   default: ThemeColorButtonStates
@@ -805,20 +797,8 @@ export declare interface ThemeColorButtonTones {
 }
 
 /**
- * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- */
-export declare interface ThemeColorButtonTones_v2 {
-  default: ThemeColorButtonStates_v2
-  primary: ThemeColorButtonStates_v2
-  positive: ThemeColorButtonStates_v2
-  caution: ThemeColorButtonStates_v2
-  critical: ThemeColorButtonStates_v2
-}
-
-/**
- * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export declare interface ThemeColorCard {
   enabled: ThemeColorGenericState
@@ -846,7 +826,7 @@ export declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export declare type ThemeColorCardState = ThemeColorGenericState
 
@@ -889,7 +869,7 @@ export declare interface ThemeColorGenericState {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInput_v2` instead.
  */
 export declare interface ThemeColorInput {
   default: ThemeColorInputStates
@@ -899,17 +879,22 @@ export declare interface ThemeColorInput {
 /**
  * @public
  */
-export declare interface ThemeColorInput_v2 {
-  default: ThemeColorInputStates_v2
-  invalid: ThemeColorInputStates_v2
-}
+export declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
+
+/**
+ * @public
+ */
+export declare type ThemeColorInputMode_v2 = Record<
+  ThemeColorInputStateKey,
+  ThemeColorInputState_v2
+>
 
 /** @public */
 export declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputState_v2` instead.
  */
 export declare interface ThemeColorInputState {
   _blend?: ThemeColorBlendModeKey
@@ -939,7 +924,7 @@ export declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
  */
 export declare interface ThemeColorInputStates {
   enabled: ThemeColorInputState
@@ -948,16 +933,7 @@ export declare interface ThemeColorInputStates {
   readOnly: ThemeColorInputState
 }
 
-/**
- * @public
- */
-export declare interface ThemeColorInputStates_v2 {
-  enabled: ThemeColorInputState_v2
-  disabled: ThemeColorInputState_v2
-  hovered: ThemeColorInputState_v2
-  readOnly: ThemeColorInputState_v2
-}
-
+/** @public */
 export declare interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -970,6 +946,7 @@ export declare interface ThemeColorInputStateTokens {
   placeholder?: ThemeColorTokenValue
 }
 
+/** @public */
 export declare interface ThemeColorInputTokens
   extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
   _hue?: ColorHueKey
@@ -986,7 +963,7 @@ export declare interface ThemeColorKBD {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export declare interface ThemeColorMuted {
   default: ThemeColorMutedTone
@@ -999,7 +976,7 @@ export declare interface ThemeColorMuted {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export declare interface ThemeColorMutedTone {
   enabled: ThemeColorGenericState
@@ -1035,7 +1012,7 @@ export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeCol
 /**
  * @public
  */
-export declare type ThemeColorSchemeKey = 'dark' | 'light'
+export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /**
  * @public
@@ -1063,13 +1040,10 @@ export declare interface ThemeColorSelectable {
 /**
  * @public
  */
-export declare interface ThemeColorSelectable_v2 {
-  default: ThemeColorSelectableStates_v2
-  primary: ThemeColorSelectableStates_v2
-  positive: ThemeColorSelectableStates_v2
-  caution: ThemeColorSelectableStates_v2
-  critical: ThemeColorSelectableStates_v2
-}
+export declare type ThemeColorSelectable_v2 = Record<
+  ThemeColorStateToneKey,
+  ThemeColorSelectableTone_v2
+>
 
 /**
  * @public
@@ -1092,13 +1066,7 @@ export declare interface ThemeColorSelectableStates {
 /**
  * @public
  */
-export declare interface ThemeColorSelectableStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
+export declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /** @public */
 export declare interface ThemeColorShadow {
@@ -1110,7 +1078,7 @@ export declare interface ThemeColorShadow {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export declare interface ThemeColorSolid {
   default: ThemeColorSolidTone
@@ -1123,7 +1091,7 @@ export declare interface ThemeColorSolid {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export declare interface ThemeColorSolidTone {
   enabled: ThemeColorGenericState
@@ -1181,10 +1149,12 @@ export declare interface ThemeColorState_v2 {
 /** @public */
 export declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
 
+/** @public */
 export declare type ThemeColorStatesTokens = Partial<
   Record<ColorConfigState, ThemeColorStateTokens>
 >
 
+/** @public */
 export declare interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -1264,6 +1234,7 @@ export declare interface ThemeColorSyntax {
   variable: string
 }
 
+/** @public */
 export declare interface ThemeColorTokens {
   base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
   button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
@@ -1498,10 +1469,11 @@ export declare interface TokenButtonKeyNode {
 /** @internal */
 export declare interface TokenColorValueNode {
   type: 'color'
-  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  key?: 'black' | 'white'
   hue?: ColorHueKey
-  tint?: ColorTintKey
+  mix?: number
   opacity?: number
+  tint?: ColorTintKey
 }
 
 /** @internal */