@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/theme/defaults/config.ts

@@ -1,84 +0,0 @@
-import {RootTheme_v2} from '../system'
-
-const BORDER_WIDTH = 1
-const OUTLINE_WIDTH = 0.5
-
-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},
-    ],
-    focusRing: {offset: 1, width: 1},
-  },
-  button: {
-    textWeight: 'medium',
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-  },
-  card: {
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-    shadow: {outline: OUTLINE_WIDTH},
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: {zOffset: 600},
-    popover: {zOffset: 400},
-    tooltip: {zOffset: 200},
-  },
-  radius: [0, 1, 3, 6, 9, 12, 21],
-  shadow: [
-    null,
-    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
-    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
-    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
-    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: BORDER_WIDTH,
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {offset: -1, width: 1},
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {offset: -1, width: 1},
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-      focusRing: {offset: 1, width: 1},
-    },
-    select: {
-      focusRing: {offset: -1, width: 1},
-    },
-    text: {
-      focusRing: {offset: -1, width: 1},
-    },
-  },
-  style: {
-    button: {
-      root: {
-        transition: 'background-color 100ms,border-color 100ms,color 100ms',
-      },
-    },
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  },
-}

package/src/theme/defaults/fonts.ts

@@ -1,227 +0,0 @@
-import {ThemeFonts} from '../system'
-
-export const defaultThemeFonts: ThemeFonts = {
-  code: {
-    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  heading: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
-      bold: 900,
-    },
-    sizes: [
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 17,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 27,
-        iconSize: 41,
-        lineHeight: 35,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 9.5,
-        descenderHeight: 8.5,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 41,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 10.5,
-        descenderHeight: 9.5,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 47,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  label: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900,
-    },
-    sizes: [
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 8.1,
-        iconSize: 13,
-        lineHeight: 10,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 9.5,
-        iconSize: 15,
-        lineHeight: 11,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 10.8,
-        iconSize: 17,
-        lineHeight: 12,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 12.25,
-        iconSize: 19,
-        lineHeight: 13,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 13.6,
-        iconSize: 21,
-        lineHeight: 14,
-        letterSpacing: 0.5,
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 15,
-        iconSize: 23,
-        lineHeight: 15,
-        letterSpacing: 0.5,
-      },
-    ],
-  },
-  text: {
-    family:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 15,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 18,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0,
-      },
-    ],
-  },
-}

package/src/theme/getScopedTheme.ts

@@ -1,98 +0,0 @@
-import {defineLazyProperty} from './build/lib/lazy'
-import {defaultThemeConfig} from './defaults/config'
-import {
-  RootTheme,
-  RootTheme_v2,
-  Theme,
-  ThemeColor,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-} from './system'
-import {is_v2, v0_v2, v2_v0} from './versioning'
-import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
-
-// cache[scheme][tone][rootTheme] = theme
-const cache = new Map<
-  ThemeColorSchemeKey,
-  Map<ThemeColorCardToneKey, WeakMap<RootTheme | RootTheme_v2, Theme>>
->()
-
-/** @internal */
-export function getScopedTheme(
-  themeProp: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-): Theme {
-  const cachedTheme = _getCachedTheme(themeProp, scheme, tone)
-
-  if (cachedTheme) return cachedTheme
-
-  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
-  const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
-
-  const layer_v0 = v0.layer || defaultThemeConfig.layer
-
-  const colorScheme_v2 = v2.color[scheme] || v2.color.light
-  const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
-  const color_v2_9 = themeColor_v0_v2_9(color_v2)
-  const layer_v2 = v2.layer || defaultThemeConfig.layer
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {color: _v0Color, ...v0Rest} = v0
-
-  const sanity = {
-    ...v0Rest,
-    layer: layer_v0,
-    v2: {
-      ...v2,
-      _resolved: true,
-      color: color_v2_9,
-      layer: layer_v2,
-    },
-  } as Theme['sanity']
-
-  // Defer v0 color computation — only resolved if legacy code reads theme.sanity.color
-  defineLazyProperty(sanity, 'color', () => {
-    const colorScheme_v0 = v0.color[scheme] || v0.color.light
-    return (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
-  })
-
-  const theme: Theme = {sanity}
-
-  _setCachedTheme(themeProp, scheme, tone, theme)
-
-  return theme
-}
-
-function _getCachedTheme(
-  rootTheme: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-) {
-  const schemeCache = cache.get(scheme)
-
-  if (!schemeCache) return undefined
-
-  const toneCache = schemeCache.get(tone)
-
-  if (!toneCache) return undefined
-
-  return toneCache.get(rootTheme)
-}
-
-function _setCachedTheme(
-  rootTheme: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-  theme: Theme,
-) {
-  if (!cache.has(scheme)) cache.set(scheme, new Map())
-
-  const schemeCache = cache.get(scheme)!
-
-  if (!schemeCache.has(tone)) schemeCache.set(tone, new WeakMap())
-
-  const toneCache = schemeCache.get(tone)!
-
-  toneCache.set(rootTheme, theme)
-}

package/src/theme/index.ts

@@ -1,5 +0,0 @@
-export * from './build'
-export * from './config'
-export * from './getScopedTheme'
-export * from './system'
-export * from './versioning'

package/src/theme/system/avatar.ts

@@ -1,14 +0,0 @@
-import {ThemeFocusRing} from './focusRing'
-
-/**
- * @public
- */
-export interface ThemeAvatar_v2 {
-  sizes: {
-    /** Spacing between avatars in an <AvatarStack> component (px) */
-    distance: number
-    /** Diameter of the avatar (px) */
-    size: number
-  }[]
-  focusRing: ThemeFocusRing
-}

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

@@ -1,45 +0,0 @@
-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
-
-/** @public */
-export const THEME_COLOR_CARD_TONES = [
-  'transparent',
-  'default',
-  'neutral',
-  'primary', // deprecated
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-] as const
-
-/** @public */
-export const THEME_COLOR_STATE_TONES = [
-  'default',
-  'neutral',
-  'primary', // deprecated
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-] as const
-
-/** @public */
-export const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
-
-/** @public */
-export const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
-
-/** @public */
-export const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const
-
-/** @public */
-export const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const
-
-/** @public */
-export const THEME_COLOR_AVATAR_COLORS = COLOR_HUES

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

@@ -1,24 +0,0 @@
-import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
-
-import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
-import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
-
-/** @internal */
-export function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey {
-  return THEME_COLOR_BLEND_MODES.includes(str as ThemeColorBlendModeKey)
-}
-
-/** @internal */
-export function isColorHueKey(str: string): str is ColorHueKey {
-  return COLOR_HUES.includes(str as ColorHueKey)
-}
-
-/** @internal */
-export function isColorTintKey(str: string): str is ColorTintKey {
-  return COLOR_TINTS.includes(str as ColorTintKey)
-}
-
-/** @internal */
-export function isColorButtonMode(str: string): str is ThemeColorButtonModeKey {
-  return THEME_COLOR_BUTTON_MODES.includes(str as ThemeColorButtonModeKey)
-}

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

@@ -1,40 +0,0 @@
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_BLEND_MODES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATE_TONES,
-  THEME_COLOR_STATES,
-} from './_constants'
-
-/**
- * @public
- */
-export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
-
-/** @public */
-export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
-
-/** @public */
-export type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
-
-/** @public */
-export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
-
-/** @public */
-export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
-
-/** @public */
-export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
-
-/** @public */
-export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
-
-/** @public */
-export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
-
-/** @public */
-export type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]

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

@@ -1,15 +0,0 @@
-import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
-
-/**
- * @public
- */
-export interface ThemeColorAvatarHue_v2 {
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  fg: string
-}
-
-/**
- * @public
- */
-export type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

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

@@ -1,16 +0,0 @@
-import {ThemeColorStateToneKey} from './_system'
-
-/**
- * @public
- */
-export interface ThemeColorBadgeTone_v2 {
-  bg: string
-  fg: string
-  dot: string
-  icon: string
-}
-
-/**
- * @public
- */
-export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

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

@@ -1,17 +0,0 @@
-import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
-import {ThemeColorState_v2} from './state'
-
-/**
- * @public
- */
-export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
-
-/**
- * @public
- */
-export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
-
-/**
- * @public
- */
-export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

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

@@ -1,34 +0,0 @@
-import {ThemeColorBlendModeKey, ThemeColorCardToneKey, ThemeColorSchemeKey} from './_system'
-import {ThemeColorButton_v2} from './button'
-import {ThemeColorInput_v2} from './input'
-import {ThemeColorSelectable_v2} from './selectable'
-import {ThemeColorShadow} from './shadow'
-import {ThemeColorState_v2} from './state'
-import {ThemeColorSyntax} from './syntax'
-
-/**
- * @public
- */
-export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
-  /** @internal */
-  _blend: ThemeColorBlendModeKey
-  _dark: boolean
-
-  backdrop: string
-  button: ThemeColorButton_v2
-  focusRing: string
-  input: ThemeColorInput_v2
-  selectable: ThemeColorSelectable_v2
-  shadow: ThemeColorShadow
-  syntax: ThemeColorSyntax
-}
-
-/**
- * @public
- */
-export type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
-
-/**
- * @public
- */
-export type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>

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

@@ -1,13 +0,0 @@
-export * from './_constants'
-export * from './_helpers'
-export * from './_system'
-export * from './avatar'
-export * from './badge'
-export * from './button'
-export * from './color'
-export * from './input'
-export * from './kbd'
-export * from './selectable'
-export * from './shadow'
-export * from './state'
-export * from './syntax'

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

@@ -1,25 +0,0 @@
-import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
-
-/**
- * @public
- */
-export interface ThemeColorInputState_v2 {
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  border: string
-  fg: string
-  muted: {
-    bg: string
-  }
-  placeholder: string
-}
-
-/**
- * @public
- */
-export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
-
-/**
- * @public
- */
-export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

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

@@ -1,8 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorKBD {
-  bg: string
-  fg: string
-  border: string
-}

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

@@ -1,12 +0,0 @@
-import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
-import {ThemeColorState_v2} from './state'
-
-/**
- * @public
- */
-export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
-
-/**
- * @public
- */
-export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

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

@@ -1,7 +0,0 @@
-/** @public */
-export interface ThemeColorShadow {
-  outline: string
-  umbra: string
-  penumbra: string
-  ambient: string
-}