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

package/src/theme/defaults/config.ts

@@ -24,7 +24,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     focusRing: {offset: -1, width: 1},
     shadow: {outline: OUTLINE_WIDTH},
   },
-  container: [480, 640, 960, 1280, 1600, 1920],
+  container: [320, 640, 960, 1280, 1600, 1920],
   media: [360, 600, 900, 1200, 1800, 2400],
   layer: {
     dialog: {zOffset: 600},
@@ -57,7 +57,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     switch: {
       width: 25,
       height: 17,
-      padding: 2,
+      padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
       focusRing: {offset: 1, width: 1},

package/src/theme/getScopedTheme.ts

@@ -36,6 +36,7 @@ export function getScopedTheme(
       layer: layer_v0,
       v2: {
         ...v2,
+        _resolved: true,
         color: color_v2,
         layer: layer_v2,
       },

package/src/theme/index.ts

@@ -1,12 +1,5 @@
-import {buildTheme} from './build'
-
 export * from './build'
 export * from './config'
 export * from './getScopedTheme'
 export * from './system'
 export * from './versioning'
-
-/**
- * @public
- */
-export const defaultTheme = buildTheme()

package/src/theme/system/color/_constants.ts

@@ -1,5 +1,8 @@
 import {COLOR_HUES} from '@sanity/color'
 
+/** @public */
+export const THEME_COLOR_SCHEMES = ['light', 'dark'] as const
+
 /** @public */
 export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 
@@ -7,7 +10,7 @@ export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 export const THEME_COLOR_CARD_TONES = [
   'transparent',
   'default',
-  'primary', // todo: rename to `accent` in the next breaking major version
+  'primary',
   'positive',
   'caution',
   'critical',
@@ -16,7 +19,7 @@ export const THEME_COLOR_CARD_TONES = [
 /** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary', // todo: rename to `accent` in the next breaking major version
+  'primary',
   'positive',
   'caution',
   'critical',

package/src/theme/system/color/_system.ts

@@ -5,6 +5,7 @@ import {
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_SCHEMES,
   THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
 } from './_constants'
@@ -12,7 +13,7 @@ import {
 /**
  * @public
  */
-export type ThemeColorSchemeKey = 'dark' | 'light'
+export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /** @public */
 export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]

package/src/theme/system/color/avatar.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
 
 /**
  * @public
@@ -12,14 +12,4 @@ export interface ThemeColorAvatarHue_v2 {
 /**
  * @public
  */
-export 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 type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

package/src/theme/system/color/button.ts

@@ -1,33 +1,17 @@
+import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
 /**
  * @public
  */
-export interface ThemeColorButtonStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
+export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /**
- * TODO: Rename to `ThemeColorButtonMode`.
  * @public
  */
-export interface ThemeColorButtonTones_v2 {
-  default: ThemeColorButtonStates_v2
-  primary: ThemeColorButtonStates_v2
-  positive: ThemeColorButtonStates_v2
-  caution: ThemeColorButtonStates_v2
-  critical: ThemeColorButtonStates_v2
-}
+export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
 
 /**
  * @public
  */
-export interface ThemeColorButton_v2 {
-  default: ThemeColorButtonTones_v2
-  ghost: ThemeColorButtonTones_v2
-  bleed: ThemeColorButtonTones_v2
-}
+export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

package/src/theme/system/color/input.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
 
 /**
  * @public
@@ -17,17 +17,9 @@ export interface ThemeColorInputState_v2 {
 /**
  * @public
  */
-export interface ThemeColorInputStates_v2 {
-  enabled: ThemeColorInputState_v2
-  disabled: ThemeColorInputState_v2
-  hovered: ThemeColorInputState_v2
-  readOnly: ThemeColorInputState_v2
-}
+export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
 
 /**
  * @public
  */
-export interface ThemeColorInput_v2 {
-  default: ThemeColorInputStates_v2
-  invalid: ThemeColorInputStates_v2
-}
+export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

package/src/theme/system/color/selectable.ts

@@ -1,23 +1,12 @@
+import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
 /**
  * @public
  */
-export interface ThemeColorSelectableStates_v2 {
-  enabled: ThemeColorState_v2
-  hovered: ThemeColorState_v2
-  pressed: ThemeColorState_v2
-  selected: ThemeColorState_v2
-  disabled: ThemeColorState_v2
-}
+export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
 /**
  * @public
  */
-export interface ThemeColorSelectable_v2 {
-  default: ThemeColorSelectableStates_v2
-  primary: ThemeColorSelectableStates_v2
-  positive: ThemeColorSelectableStates_v2
-  caution: ThemeColorSelectableStates_v2
-  critical: ThemeColorSelectableStates_v2
-}
+export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

package/src/theme/system/shadow.ts

@@ -9,12 +9,6 @@ export type ThemeBoxShadow = [
   number,
 ]
 
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` instead
- */
-export type BoxShadow = ThemeBoxShadow
-
 /**
  * @public
  */

package/src/theme/system/styles.ts

@@ -11,9 +11,3 @@ export interface ThemeStyles {
     root?: CSSObject
   }
 }
-
-/**
- * @deprecated Use `ThemeStyles` instead
- * @internal
- */
-export type Styles = ThemeStyles

package/src/theme/system/theme.ts

@@ -33,6 +33,7 @@ export interface RootTheme_v2 {
   radius: number[]
   shadow: Array<ThemeShadow | null>
   space: number[]
+  /** @internal */
   style?: ThemeStyles
 }
 
@@ -97,6 +98,7 @@ export interface BaseTheme {
    */
   space: number[]
   /**
+   * @internal
    * @deprecated Use `v2.style` instead
    */
   styles?: ThemeStyles
@@ -112,7 +114,15 @@ export type RootTheme = BaseTheme
 /**
  * @public
  */
-export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {color: ThemeColorCard_v2}
+export 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

package/src/theme/system/v0/avatar.ts

@@ -1,6 +1,6 @@
 /**
  * @public
- * @deprecated Use `ThemeAvatar_v2` instead
+ * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
  */
 export interface ThemeAvatar {
   sizes: {

package/src/theme/system/v0/color/button.ts

@@ -2,13 +2,13 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export type ThemeColorButtonState = ThemeColorGenericState
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonStates_v2` instead.
  */
 export interface ThemeColorButtonStates {
   enabled: ThemeColorGenericState
@@ -21,7 +21,7 @@ export interface ThemeColorButtonStates {
 /**
  * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButtonTones_v2` instead.
  */
 export interface ThemeColorButtonTones {
   default: ThemeColorButtonStates
@@ -33,7 +33,7 @@ export interface ThemeColorButtonTones {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorButton_v2` instead.
  */
 export interface ThemeColorButton {
   default: ThemeColorButtonTones

package/src/theme/system/v0/color/card.ts

@@ -2,13 +2,13 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated Use `ThemeColorGenericState` instead.
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export type ThemeColorCardState = ThemeColorGenericState
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorCard {
   enabled: ThemeColorGenericState

package/src/theme/system/v0/color/color.ts

@@ -18,7 +18,6 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
   button: ThemeColorButton
   card: ThemeColorCard
   dark: boolean
-  focusRing?: string
   input: ThemeColorInput
   muted: ThemeColorMuted
   selectable?: ThemeColorSelectable

package/src/theme/system/v0/color/input.ts

@@ -2,7 +2,7 @@ import {ThemeColorBlendModeKey} from '../../color/_system'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputState_v2` instead.
  */
 export interface ThemeColorInputState {
   _blend?: ThemeColorBlendModeKey
@@ -15,7 +15,7 @@ export interface ThemeColorInputState {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
  */
 export interface ThemeColorInputStates {
   enabled: ThemeColorInputState
@@ -26,7 +26,7 @@ export interface ThemeColorInputStates {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorInput_v2` instead.
  */
 export interface ThemeColorInput {
   default: ThemeColorInputStates

package/src/theme/system/v0/color/muted.ts

@@ -2,7 +2,7 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export interface ThemeColorMutedTone {
   enabled: ThemeColorGenericState
@@ -14,7 +14,7 @@ export interface ThemeColorMutedTone {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorMuted {
   default: ThemeColorMutedTone

package/src/theme/system/v0/color/solid.ts

@@ -2,7 +2,7 @@ import {ThemeColorGenericState} from './_generic'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
  */
 export interface ThemeColorSolidTone {
   enabled: ThemeColorGenericState
@@ -14,7 +14,7 @@ export interface ThemeColorSolidTone {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
  */
 export interface ThemeColorSolid {
   default: ThemeColorSolidTone

package/src/theme/versioning/getTheme_v2.ts

@@ -6,7 +6,7 @@ const cache = new WeakMap<Theme, Theme_v2>()
 
 /** @public */
 export function getTheme_v2(theme: Theme): Theme_v2 {
-  if (theme.sanity.v2) return theme.sanity.v2
+  if (theme.sanity.v2?._resolved) return theme.sanity.v2
 
   const cached_v2 = cache.get(theme)
 
@@ -14,6 +14,7 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
 
   const v2: Theme_v2 = {
     _version: 2,
+    _resolved: true,
     avatar: {
       ...defaultThemeConfig.avatar,
       ...theme.sanity.avatar,

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -6,7 +6,7 @@ import {
   ThemeColorState_v2,
   ThemeColorCard_v2,
   ThemeColorInputStates,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState,
   ThemeColorInputState_v2,
 } from '../system'
@@ -195,7 +195,7 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
   }
 }
 
-function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputStates_v2 {
+function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputMode_v2 {
   return {
     enabled: inputStateThemeColor_v0_v2(states.enabled),
     disabled: inputStateThemeColor_v0_v2(states.disabled),

package/src/theme/versioning/v2_v0.ts

@@ -3,10 +3,10 @@ import {
   RootTheme_v2,
   ThemeColor,
   ThemeColorCard_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState,
   ThemeColorInputState_v2,
   ThemeColorInputStates,
-  ThemeColorInputStates_v2,
 } from '../system'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
@@ -91,6 +91,7 @@ function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
       ...color_v2.button.default,
       transparent: color_v2.button.default.default,
     },
+    selectable: color_v2.selectable,
     spot: {
       gray: color_v2.avatar.gray.bg,
       blue: color_v2.avatar.blue.bg,
@@ -106,7 +107,7 @@ function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
   }
 }
 
-function inputStatesThemeColor_v2_v0(t: ThemeColorInputStates_v2): ThemeColorInputStates {
+function inputStatesThemeColor_v2_v0(t: ThemeColorInputMode_v2): ThemeColorInputStates {
   return {
     enabled: inputStateThemeColor_v2_v0(t.enabled),
     disabled: inputStateThemeColor_v2_v0(t.disabled),

package/src/theme/build/colorToken.ts

@@ -1,39 +0,0 @@
-import {ColorHueKey} from '@sanity/color'
-import {ThemeColorTokenValue, parseTokenValue, TokenColorValueNode} from '../config'
-
-export interface ColorTokenContext {
-  hue: ColorHueKey
-  scheme: 'light' | 'dark'
-}
-
-const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
-
-export function resolveColorTokenValue(
-  context: ColorTokenContext,
-  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
-): string {
-  const {hue, scheme} = context
-  const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
-
-  if (!node || node.type !== 'color') {
-    throw new Error(`Invalid color token: ${value[0]}`)
-  }
-
-  return compileColorTokenValue({...node, hue: node.hue || hue})
-}
-
-export function compileColorTokenValue(node: TokenColorValueNode): string {
-  let key = ''
-
-  if (node.key === 'black' || node.key === 'white') {
-    key = node.key
-  } else {
-    key = `${node.hue}/${node.tint}`
-  }
-
-  if (node.opacity !== undefined) {
-    key += `/${node.opacity}`
-  }
-
-  return key
-}