@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.11

package/src/theme/defaults/config.ts

@@ -7,6 +7,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
   _version: 2,
   avatar: {
     sizes: [
+      {distance: -4, size: 19},
       {distance: -4, size: 25},
       {distance: -8, size: 33},
       {distance: -12, size: 49},
@@ -56,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/defaults/fonts.ts

@@ -125,7 +125,15 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 9.8,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
         letterSpacing: 0.5,
@@ -133,7 +141,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 11.25,
+        fontSize: 10.8,
         iconSize: 17,
         lineHeight: 12,
         letterSpacing: 0.5,
@@ -141,7 +149,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 12.75,
+        fontSize: 12.25,
         iconSize: 19,
         lineHeight: 13,
         letterSpacing: 0.5,
@@ -149,7 +157,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 14,
+        fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,
         letterSpacing: 0.5,
@@ -157,7 +165,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 15.5,
+        fontSize: 15,
         iconSize: 23,
         lineHeight: 15,
         letterSpacing: 0.5,

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

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/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/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>()
@@ -106,7 +106,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
-}