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

package/src/theme/defaults/fonts.ts

@@ -0,0 +1,227 @@
+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

@@ -0,0 +1,81 @@
+import {defaultThemeConfig} from './defaults/config'
+import {RootTheme, RootTheme_v2, Theme, ThemeColorCardToneKey, ThemeColorSchemeKey} from './system'
+import {is_v2, v0_v2, v2_v0} from './versioning'
+
+// 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 colorScheme_v0 = v0.color[scheme] || v0.color.light
+  const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default
+  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 layer_v2 = v2.layer || defaultThemeConfig.layer
+
+  const theme: Theme = {
+    sanity: {
+      ...v0,
+      color: color_v0,
+      layer: layer_v0,
+      v2: {
+        ...v2,
+        color: color_v2,
+        layer: layer_v2,
+      },
+    },
+  }
+
+  _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,8 +1,5 @@
-export * from './lib/color-fns'
-export * from './lib/theme'
-export * from './studioTheme'
-export * from './themeColorProvider'
-export * from './themeProvider'
-export * from './types'
-export * from './useRootTheme'
-export * from './useTheme'
+export * from './build'
+export * from './config'
+export * from './getScopedTheme'
+export * from './system'
+export * from './versioning'

package/src/theme/system/avatar.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,41 @@
+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',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATE_TONES = [
+  'default',
+  'primary',
+  '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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,40 @@
+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_STATES,
+  THEME_COLOR_STATE_TONES,
+} 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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,20 @@
+/**
+ * @public
+ */
+export interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorBadge_v2 {
+  default: ThemeColorBadgeTone_v2
+  primary: ThemeColorBadgeTone_v2
+  positive: ThemeColorBadgeTone_v2
+  caution: ThemeColorBadgeTone_v2
+  critical: ThemeColorBadgeTone_v2
+}

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,34 @@
+import {ThemeColorCardToneKey, ThemeColorBlendModeKey, 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,25 @@
+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

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

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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,37 @@
+import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorAvatar_v2} from './avatar'
+import {ThemeColorBadge_v2} from './badge'
+import {ThemeColorKBD} from './kbd'
+
+/**
+ * @public
+ */
+export interface ThemeColorState_v2 {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  accent: {
+    fg: string
+  }
+  avatar: ThemeColorAvatar_v2
+  badge: ThemeColorBadge_v2
+  bg: string
+  border: string
+  code: {
+    bg: string
+    fg: string
+  }
+  fg: string
+  icon: string
+  kbd: ThemeColorKBD
+  link: {
+    fg: string
+  }
+  muted: {
+    bg: string
+    fg: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * @public
+ */
+export interface ThemeColorSyntax {
+  atrule: string
+  attrName: string
+  attrValue: string
+  attribute: string
+  boolean: string
+  builtin: string
+  cdata: string
+  char: string
+  class: string
+  className: string
+  comment: string
+  constant: string
+  deleted: string
+  doctype: string
+  entity: string
+  function: string
+  hexcode: string
+  id: string
+  important: string
+  inserted: string
+  keyword: string
+  number: string
+  operator: string
+  prolog: string
+  property: string
+  pseudoClass: string
+  pseudoElement: string
+  punctuation: string
+  regex: string
+  selector: string
+  string: string
+  symbol: string
+  tag: string
+  unit: string
+  url: string
+  variable: string
+}

package/src/theme/system/css.ts

@@ -0,0 +1,9 @@
+import type {StyledObject} from 'styled-components'
+
+/**
+ * Work around types that are missing in `styled-components@6`
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ * */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSObject = StyledObject<any>