@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/theme/{lib/theme → system/v0}/input.ts

@@ -1,17 +1,14 @@
-import {FocusRing} from '../../types'
-
 /**
  * @public
+ * @deprecated Use `ThemeInput_v2` instead
  */
 export interface ThemeInput {
   checkbox: {
     size: number
-    focusRing: FocusRing
   }
   radio: {
     size: number
     markSize: number
-    focusRing: FocusRing
   }
   switch: {
     width: number
@@ -19,15 +16,8 @@ export interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
-    focusRing: FocusRing
   }
   border: {
     width: number
   }
-  select: {
-    focusRing: FocusRing
-  }
-  text: {
-    focusRing: FocusRing
-  }
 }

package/src/theme/versioning/getTheme_v2.ts

@@ -0,0 +1,56 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {Theme, Theme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<Theme, Theme_v2>()
+
+/** @public */
+export function getTheme_v2(theme: Theme): Theme_v2 {
+  if (theme.sanity.v2) return theme.sanity.v2
+
+  const cached_v2 = cache.get(theme)
+
+  if (cached_v2) return cached_v2
+
+  const v2: Theme_v2 = {
+    _version: 2,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...theme.sanity.button,
+    },
+    card: defaultThemeConfig.card,
+    color: themeColor_v0_v2(theme.sanity.color),
+    container: theme.sanity.container,
+    font: theme.sanity.fonts,
+    input: {
+      ...defaultThemeConfig.input,
+      ...theme.sanity.input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...theme.sanity.input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...theme.sanity.input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...theme.sanity.input.switch,
+      },
+    },
+    layer: theme.sanity.layer ?? defaultThemeConfig.layer,
+    media: theme.sanity.media,
+    radius: theme.sanity.radius,
+    shadow: theme.sanity.shadows,
+    space: theme.sanity.space,
+    style: theme.sanity.styles,
+  }
+
+  cache.set(theme, v2)
+
+  return v2
+}

package/src/theme/versioning/index.ts

@@ -0,0 +1,5 @@
+export * from './getTheme_v2'
+export * from './is_v0'
+export * from './is_v2'
+export * from './v0_v2'
+export * from './v2_v0'

package/src/theme/versioning/is_v0.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {
+  return themeProp._version === 0
+}

package/src/theme/versioning/is_v2.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {
+  return themeProp._version === 2
+}

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -0,0 +1,217 @@
+import {
+  ThemeColor,
+  ThemeColorGenericState,
+  ThemeColorMuted,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+  ThemeColorCard_v2,
+  ThemeColorInputStates,
+  ThemeColorInputStates_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+} from '../system'
+
+const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
+
+/** @internal */
+export function themeColor_v0_v2(color_v0: ThemeColor): ThemeColorCard_v2 {
+  const cached_v2 = cache.get(color_v0)
+
+  if (cached_v2) return cached_v2
+
+  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled)
+
+  const color_v2: ThemeColorCard_v2 = {
+    _blend: color_v0._blend || (color_v0.dark ? 'screen' : 'multiply'),
+    _dark: color_v0.dark,
+    accent: base.accent,
+    avatar: base.avatar,
+    backdrop: color_v0.base.shadow.ambient,
+    badge: base.badge,
+    bg: color_v0.base.bg,
+    border: color_v0.base.border,
+    button: {
+      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
+      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
+      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed),
+    },
+    code: base.code,
+    fg: color_v0.base.fg,
+    focusRing: color_v0.base.focusRing,
+    icon: base.muted.fg,
+    input: {
+      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
+      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid),
+    },
+    kbd: base.kbd,
+    link: base.link,
+    muted: {
+      ...base.muted,
+      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg,
+    },
+    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
+    shadow: color_v0.base.shadow,
+    skeleton: {
+      from: color_v0.skeleton?.from || color_v0.base.border,
+      to: color_v0.skeleton?.to || color_v0.base.border,
+    },
+    syntax: color_v0.syntax,
+  }
+
+  cache.set(color_v0, color_v2)
+
+  return color_v2
+}
+
+function stateTonesThemeColor_v0_v2(
+  v0: ThemeColor,
+  t: Omit<ThemeColorMuted, 'transparent'>,
+): ThemeColorSelectable_v2 {
+  return {
+    default: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
+    primary: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
+    },
+    positive: {
+      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled),
+    },
+    caution: {
+      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled),
+    },
+    critical: {
+      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),
+    },
+  }
+}
+
+function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): ThemeColorState_v2 {
+  return {
+    ...state,
+    avatar: {
+      gray: {
+        bg: v0.spot.gray,
+        fg: v0.base.bg,
+      },
+      blue: {
+        bg: v0.spot.blue,
+        fg: v0.base.bg,
+      },
+      purple: {
+        bg: v0.spot.purple,
+        fg: v0.base.bg,
+      },
+      magenta: {
+        bg: v0.spot.magenta,
+        fg: v0.base.bg,
+      },
+      red: {
+        bg: v0.spot.red,
+        fg: v0.base.bg,
+      },
+      orange: {
+        bg: v0.spot.orange,
+        fg: v0.base.bg,
+      },
+      yellow: {
+        bg: v0.spot.yellow,
+        fg: v0.base.bg,
+      },
+      green: {
+        bg: v0.spot.green,
+        fg: v0.base.bg,
+      },
+      cyan: {
+        bg: v0.spot.cyan,
+        fg: v0.base.bg,
+      },
+    },
+    badge: {
+      default: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg,
+      },
+      primary: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg,
+      },
+      positive: {
+        bg: v0.muted.positive.enabled.bg,
+        fg: v0.muted.positive.enabled.fg,
+        dot: v0.muted.positive.enabled.muted.fg,
+        icon: v0.muted.positive.enabled.muted.fg,
+      },
+      caution: {
+        bg: v0.muted.caution.enabled.bg,
+        fg: v0.muted.caution.enabled.fg,
+        dot: v0.muted.caution.enabled.muted.fg,
+        icon: v0.muted.caution.enabled.muted.fg,
+      },
+      critical: {
+        bg: v0.muted.critical.enabled.bg,
+        fg: v0.muted.critical.enabled.fg,
+        dot: v0.muted.critical.enabled.muted.fg,
+        icon: v0.muted.critical.enabled.muted.fg,
+      },
+    },
+    kbd: {
+      bg: v0.muted.default.enabled.bg,
+      fg: v0.muted.default.enabled.fg,
+      border: v0.muted.default.enabled.border,
+    },
+    muted: {
+      ...v0.muted.default.enabled.muted,
+      bg: state.bg2 || state.bg,
+    },
+    skeleton: {
+      from: state.skeleton?.from || state.border,
+      to: state.skeleton?.to || state.border,
+    },
+  }
+}
+
+function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputStates_v2 {
+  return {
+    enabled: inputStateThemeColor_v0_v2(states.enabled),
+    disabled: inputStateThemeColor_v0_v2(states.disabled),
+    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
+    hovered: inputStateThemeColor_v0_v2(states.hovered),
+  }
+}
+
+function inputStateThemeColor_v0_v2(state: ThemeColorInputState): ThemeColorInputState_v2 {
+  return {
+    bg: state.bg,
+    border: state.border,
+    fg: state.fg,
+    muted: {
+      bg: state.bg2,
+    },
+    placeholder: state.placeholder,
+  }
+}

package/src/theme/versioning/v0_v2.ts

@@ -0,0 +1,90 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {RootTheme, RootTheme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<RootTheme, RootTheme_v2>()
+
+/** @internal */
+export function v0_v2(v0: RootTheme): RootTheme_v2 {
+  if (v0.v2) return v0.v2
+
+  const cached_v2 = cache.get(v0)
+
+  if (cached_v2) return cached_v2
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusRing: _unused_focusRing,
+    fonts: font,
+    input,
+    layer,
+    media,
+    radius,
+    shadows: shadow,
+    space,
+    styles: style,
+  } = v0
+
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...button,
+    },
+    card: defaultThemeConfig.card,
+    color: {
+      light: {
+        transparent: themeColor_v0_v2(color.light.transparent),
+        default: themeColor_v0_v2(color.light.default),
+        primary: themeColor_v0_v2(color.light.primary),
+        positive: themeColor_v0_v2(color.light.positive),
+        caution: themeColor_v0_v2(color.light.caution),
+        critical: themeColor_v0_v2(color.light.critical),
+      },
+      dark: {
+        transparent: themeColor_v0_v2(color.dark.transparent),
+        default: themeColor_v0_v2(color.dark.default),
+        primary: themeColor_v0_v2(color.dark.primary),
+        positive: themeColor_v0_v2(color.dark.positive),
+        caution: themeColor_v0_v2(color.dark.caution),
+        critical: themeColor_v0_v2(color.dark.critical),
+      },
+    },
+    container,
+    font,
+    input: {
+      ...defaultThemeConfig.input,
+      ...input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...input.switch,
+      },
+    },
+    layer: layer ?? defaultThemeConfig.layer,
+    media,
+    radius,
+    shadow,
+    space,
+    style,
+  }
+
+  cache.set(v0, v2)
+
+  return v2
+}

package/src/theme/versioning/v2_v0.ts

@@ -0,0 +1,126 @@
+import {
+  RootTheme,
+  RootTheme_v2,
+  ThemeColor,
+  ThemeColorCard_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+  ThemeColorInputStates,
+  ThemeColorInputStates_v2,
+} from '../system'
+
+const cache = new WeakMap<RootTheme_v2, RootTheme>()
+
+/** @internal */
+export function v2_v0(v2: RootTheme_v2): RootTheme {
+  const cachedTheme = cache.get(v2)
+
+  if (cachedTheme) return cachedTheme
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    font: fonts,
+    input,
+    media,
+    radius,
+    shadow: shadows,
+    space,
+    style: styles,
+  } = v2
+
+  return {
+    _version: 0,
+    avatar,
+    button,
+    container,
+    color: {
+      light: {
+        transparent: themeColor_v2_v0(color.light.transparent),
+        default: themeColor_v2_v0(color.light.default),
+        primary: themeColor_v2_v0(color.light.primary),
+        positive: themeColor_v2_v0(color.light.positive),
+        caution: themeColor_v2_v0(color.light.caution),
+        critical: themeColor_v2_v0(color.light.critical),
+      },
+      dark: {
+        transparent: themeColor_v2_v0(color.dark.transparent),
+        default: themeColor_v2_v0(color.dark.default),
+        primary: themeColor_v2_v0(color.dark.primary),
+        positive: themeColor_v2_v0(color.dark.positive),
+        caution: themeColor_v2_v0(color.dark.caution),
+        critical: themeColor_v2_v0(color.dark.critical),
+      },
+    },
+    focusRing: input.text.focusRing,
+    fonts,
+    input,
+    media,
+    radius,
+    shadows,
+    space,
+    styles,
+
+    v2,
+  }
+}
+
+function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
+  return {
+    base: {
+      bg: color_v2.bg,
+      fg: color_v2.fg,
+      border: color_v2.border,
+      focusRing: color_v2.focusRing,
+      shadow: color_v2.shadow,
+    },
+    button: color_v2.button,
+    card: color_v2.selectable.default,
+    dark: color_v2._dark,
+    input: {
+      default: inputStatesThemeColor_v2_v0(color_v2.input.default),
+      invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid),
+    },
+    muted: {
+      ...color_v2.button.ghost,
+      transparent: color_v2.button.ghost.default,
+    },
+    solid: {
+      ...color_v2.button.default,
+      transparent: color_v2.button.default.default,
+    },
+    spot: {
+      gray: color_v2.avatar.gray.bg,
+      blue: color_v2.avatar.blue.bg,
+      purple: color_v2.avatar.purple.bg,
+      magenta: color_v2.avatar.magenta.bg,
+      red: color_v2.avatar.red.bg,
+      orange: color_v2.avatar.orange.bg,
+      yellow: color_v2.avatar.yellow.bg,
+      green: color_v2.avatar.green.bg,
+      cyan: color_v2.avatar.cyan.bg,
+    },
+    syntax: color_v2.syntax,
+  }
+}
+
+function inputStatesThemeColor_v2_v0(t: ThemeColorInputStates_v2): ThemeColorInputStates {
+  return {
+    enabled: inputStateThemeColor_v2_v0(t.enabled),
+    disabled: inputStateThemeColor_v2_v0(t.disabled),
+    readOnly: inputStateThemeColor_v2_v0(t.readOnly),
+    hovered: inputStateThemeColor_v2_v0(t.hovered),
+  }
+}
+
+function inputStateThemeColor_v2_v0(t: ThemeColorInputState_v2): ThemeColorInputState {
+  return {
+    bg: t.bg,
+    bg2: t.muted.bg,
+    border: t.border,
+    fg: t.fg,
+    placeholder: t.placeholder,
+  }
+}

package/src/components/dialog/constants.ts

@@ -1,4 +0,0 @@
-/**
- * Left/right border offsets for header + footer components (in px).
- */
-export const BORDER_OFFSET_X: number = 12

package/src/components/dialog/styles.ts

@@ -1,37 +0,0 @@
-import {_responsive, ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
-import {DialogPosition} from '../../types'
-import {CSSObject} from '../../types/styled'
-
-/**
- * @internal
- */
-export interface ResponsiveDialogPositionStyleProps {
-  $position: DialogPosition[]
-}
-
-export function dialogStyle(): CSSObject {
-  return {
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    outline: 'none',
-    background: cssVars.default['base-shadow-umbra-color'],
-  }
-}
-
-export function responsiveDialogPositionStyle(
-  props: ResponsiveDialogPositionStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
-}

package/src/primitives/avatar/spotColors.ts

@@ -1,53 +0,0 @@
-import {
-  gray,
-  blue,
-  purple,
-  magenta,
-  red,
-  orange,
-  yellow,
-  green,
-  cyan,
-  ColorTint,
-} from '@sanity/color'
-import {ThemeColorSchemeKey} from '../../theme'
-import {ThemeColorSpotKey} from './types'
-
-export const spotColor: Record<ThemeColorSpotKey, Record<ThemeColorSchemeKey, ColorTint>> = {
-  gray: {
-    dark: gray['400'],
-    light: gray['500'],
-  },
-  blue: {
-    dark: blue['400'],
-    light: blue['500'],
-  },
-  purple: {
-    dark: purple['400'],
-    light: purple['500'],
-  },
-  magenta: {
-    dark: magenta['400'],
-    light: magenta['500'],
-  },
-  red: {
-    dark: red['400'],
-    light: red['500'],
-  },
-  orange: {
-    dark: orange['400'],
-    light: orange['500'],
-  },
-  yellow: {
-    dark: yellow['400'],
-    light: yellow['500'],
-  },
-  green: {
-    dark: green['400'],
-    light: green['500'],
-  },
-  cyan: {
-    dark: cyan['400'],
-    light: cyan['500'],
-  },
-}

package/src/primitives/badge/styles.ts

@@ -1,19 +0,0 @@
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-import {CSSObject} from '../../types/styled'
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$mode, $tone} = props
-
-  return {
-    backgroundColor: $mode === 'outline' ? cssVars[$tone]['bg-base'] : cssVars[$tone]['bg-tint'],
-    [mutableCardVariables['fg-color']]: cssVars[$tone]['text-secondary'],
-    boxShadow: $mode === 'outline' ? `inset 0 0 0 1px ${cssVars[$tone]['border-base']}` : undefined,
-    cursor: 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  }
-}