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

package/src/theme/{studioTheme → defaults}/fonts.ts

@@ -1,6 +1,6 @@
-import {ThemeFonts} from '../lib/theme'
+import {ThemeFonts} from '../system'
 
-export const fonts: ThemeFonts = {
+export const defaultThemeFonts: ThemeFonts = {
   code: {
     family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
     weights: {
@@ -11,43 +11,43 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 3,
-        descenderHeight: 3,
+        ascenderHeight: 4,
+        descenderHeight: 4,
         fontSize: 10,
         iconSize: 17,
-        lineHeight: 13,
+        lineHeight: 15,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
+        ascenderHeight: 5,
+        descenderHeight: 5,
         fontSize: 13,
         iconSize: 21,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
+        ascenderHeight: 6,
+        descenderHeight: 6,
         fontSize: 16,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
+        ascenderHeight: 7,
+        descenderHeight: 7,
         fontSize: 19,
         iconSize: 29,
-        lineHeight: 25,
+        lineHeight: 27,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
+        ascenderHeight: 8,
+        descenderHeight: 8,
         fontSize: 22,
         iconSize: 33,
-        lineHeight: 29,
+        lineHeight: 31,
         letterSpacing: 0,
       },
     ],
@@ -63,51 +63,51 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 12,
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
         iconSize: 17,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
+        ascenderHeight: 6,
+        descenderHeight: 6,
         fontSize: 16,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
+        ascenderHeight: 7,
+        descenderHeight: 7,
         fontSize: 21,
         iconSize: 33,
-        lineHeight: 27,
+        lineHeight: 29,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
+        ascenderHeight: 8,
+        descenderHeight: 8,
         fontSize: 27,
         iconSize: 41,
-        lineHeight: 33,
+        lineHeight: 35,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 8,
-        descenderHeight: 8,
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
         fontSize: 33,
         iconSize: 49,
-        lineHeight: 39,
+        lineHeight: 41,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 9,
-        descenderHeight: 9,
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
         fontSize: 38,
         iconSize: 53,
-        lineHeight: 45,
+        lineHeight: 47,
         letterSpacing: 0,
       },
     ],
@@ -125,7 +125,15 @@ export const fonts: 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 fonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 11.25,
+        fontSize: 10.8,
         iconSize: 17,
         lineHeight: 12,
         letterSpacing: 0.5,
@@ -141,7 +149,7 @@ export const fonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 12.75,
+        fontSize: 12.25,
         iconSize: 19,
         lineHeight: 13,
         letterSpacing: 0.5,
@@ -149,7 +157,7 @@ export const fonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 14,
+        fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,
         letterSpacing: 0.5,
@@ -157,7 +165,7 @@ export const fonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 15.5,
+        fontSize: 15,
         iconSize: 23,
         lineHeight: 15,
         letterSpacing: 0.5,
@@ -175,43 +183,43 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 3,
-        descenderHeight: 3,
+        ascenderHeight: 4,
+        descenderHeight: 4,
         fontSize: 10,
         iconSize: 17,
-        lineHeight: 13,
+        lineHeight: 15,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
+        ascenderHeight: 5,
+        descenderHeight: 5,
         fontSize: 13,
         iconSize: 21,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 16,
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 19,
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
         iconSize: 29,
-        lineHeight: 25,
+        lineHeight: 27,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 22,
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
         iconSize: 33,
-        lineHeight: 29,
+        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,12 @@
-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'
+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/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,38 @@
+import {COLOR_HUES} from '@sanity/color'
+
+/** @public */
+export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
+
+/** @public */
+export const THEME_COLOR_CARD_TONES = [
+  'transparent',
+  'default',
+  'primary', // todo: rename to `accent` in the next breaking major version
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATE_TONES = [
+  'default',
+  'primary', // todo: rename to `accent` in the next breaking major version
+  '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,39 @@
+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_STATES,
+  THEME_COLOR_STATE_TONES,
+} from './_constants'
+
+/**
+ * @public
+ */
+export type ThemeColorSchemeKey = 'dark' | 'light'
+
+/** @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,25 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorAvatarHue_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+}
+
+/**
+ * @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
+}

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,33 @@
+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
+}
+
+/**
+ * TODO: Rename to `ThemeColorButtonMode`.
+ * @public
+ */
+export interface ThemeColorButtonTones_v2 {
+  default: ThemeColorButtonStates_v2
+  primary: ThemeColorButtonStates_v2
+  positive: ThemeColorButtonStates_v2
+  caution: ThemeColorButtonStates_v2
+  critical: ThemeColorButtonStates_v2
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorButton_v2 {
+  default: ThemeColorButtonTones_v2
+  ghost: ThemeColorButtonTones_v2
+  bleed: ThemeColorButtonTones_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,33 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorInputState_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  border: string
+  fg: string
+  muted: {
+    bg: string
+  }
+  placeholder: string
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorInputStates_v2 {
+  enabled: ThemeColorInputState_v2
+  disabled: ThemeColorInputState_v2
+  hovered: ThemeColorInputState_v2
+  readOnly: ThemeColorInputState_v2
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorInput_v2 {
+  default: ThemeColorInputStates_v2
+  invalid: ThemeColorInputStates_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,23 @@
+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
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSelectable_v2 {
+  default: ThemeColorSelectableStates_v2
+  primary: ThemeColorSelectableStates_v2
+  positive: ThemeColorSelectableStates_v2
+  caution: ThemeColorSelectableStates_v2
+  critical: ThemeColorSelectableStates_v2
+}

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

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