@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/theme/v3/types.ts

@@ -0,0 +1,45 @@
+import {ThemeConfig} from '../config'
+import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
+import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
+import {ThemeColor_v3} from './color'
+import {PartialTokens, Tokens} from './tokens'
+
+/** @public */
+export type ThemeEntry = [`--${string}`, string]
+
+/** @public */
+export interface ThemeOptions {
+  v2?: ThemeConfig
+  tokens?: PartialTokens<Tokens>
+}
+
+/**
+ * Supersedes `RootTheme` and `RootTheme_v2`.
+ *
+ * @public
+ */
+export interface Theme_v3 {
+  _version: 3
+  _tokens: Tokens
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color: ThemeColor_v3
+  // color: ThemeColorSchemes_v2
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+}

package/src/theme/versioning/getTheme_v2.ts

@@ -1,5 +1,6 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {Theme, Theme_v2} from '../system'
+import {Theme} from '../types'
+import {Theme_v2} from '../v2'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()

package/src/theme/versioning/index.ts

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

@@ -1,4 +1,5 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {

package/src/theme/versioning/is_v2.ts

@@ -1,4 +1,5 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -1,15 +1,17 @@
 import {
   ThemeColor,
   ThemeColorGenericState,
+  ThemeColorInputState,
+  ThemeColorInputStates,
   ThemeColorMuted,
-  ThemeColorSelectable_v2,
-  ThemeColorState_v2,
+} from '../v0'
+import {
   ThemeColorCard_v2,
-  ThemeColorInputStates,
   ThemeColorInputMode_v2,
-  ThemeColorInputState,
   ThemeColorInputState_v2,
-} from '../system'
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+} from '../v2'
 
 const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
 
@@ -75,6 +77,13 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.default.selected),
       disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
     },
+    neutral: {
+      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),
@@ -82,6 +91,13 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.primary.selected),
       disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
     },
+    suggest: {
+      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),
@@ -154,12 +170,24 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
         dot: v0.muted.default.enabled.muted.fg,
         icon: v0.muted.default.enabled.muted.fg,
       },
+      neutral: {
+        bg: v0.muted.transparent.enabled.bg,
+        fg: v0.muted.transparent.enabled.fg,
+        dot: v0.muted.transparent.enabled.muted.fg,
+        icon: v0.muted.transparent.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,
       },
+      suggest: {
+        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,

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -0,0 +1,49 @@
+import {ThemeColorCard_v2} from '../v2'
+
+/**
+ * Apply `neutral` and `suggest` if they're not already part of the color object,
+ * as this was introduced in v2.9, but is not compatible with v2.0.
+ *
+ * @param color - The color object to upgrade
+ * @returns The upgraded color object. Returns as-is if already upgraded.
+ * @internal
+ */
+export function themeColor_v0_v2_9(color: ThemeColorCard_v2): ThemeColorCard_v2 {
+  if ('neutral' in color.badge) {
+    return color // Already at >= v2.9
+  }
+
+  // TypeScript narrows to `never` because the above should always be true
+  const colors = color as ThemeColorCard_v2
+
+  return {
+    ...colors,
+    badge: {
+      ...colors.badge,
+      neutral: colors.badge.default,
+      suggest: colors.badge.primary,
+    },
+    button: {
+      bleed: {
+        ...colors.button.bleed,
+        neutral: colors.button.bleed.default,
+        suggest: colors.button.bleed.primary,
+      },
+      default: {
+        ...colors.button.default,
+        neutral: colors.button.default.default,
+        suggest: colors.button.default.primary,
+      },
+      ghost: {
+        ...colors.button.ghost,
+        neutral: colors.button.ghost.default,
+        suggest: colors.button.ghost.primary,
+      },
+    },
+    selectable: {
+      ...colors.selectable,
+      neutral: colors.selectable.default,
+      suggest: colors.selectable.primary,
+    },
+  }
+}

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -0,0 +1,206 @@
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  ThemeColorBadge_v2,
+  ThemeColorButton_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
+  ThemeColorCard_v2,
+  ThemeColorInput_v2,
+  ThemeColorInputMode_v2,
+  ThemeColorInputState_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorSelectableTone_v2,
+  ThemeColorState_v2,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+} from '../v2'
+import {ThemeColorCard_v3, ThemeColorElement, ThemeColorVariantKey} from '../v3'
+
+export function themeColor_v3_v2(options: {
+  color: ThemeColorCard_v3
+  dark: boolean
+}): ThemeColorCard_v2 {
+  const {color, dark} = options
+
+  return {
+    _blend: 'screen',
+    _dark: dark,
+    ...buildColorState({
+      cardColor: color,
+      state: 'enabled',
+      tone: 'default',
+      variant: 'tinted',
+    }),
+    backdrop: color.backdrop,
+    button: THEME_COLOR_BUTTON_MODES.reduce<ThemeColorButton_v2>((modes, mode) => {
+      modes[mode] = THEME_COLOR_STATE_TONES.reduce<ThemeColorButtonMode_v2>((tones, tone) => {
+        tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorButtonTone_v2>((states, state) => {
+          states[state] = buildColorState({
+            cardColor: color,
+            state,
+            tone,
+            variant: mode === 'default' ? 'solid' : 'tinted',
+          })
+
+          if (mode === 'bleed') {
+            states[state].border = 'transparent'
+          }
+
+          return states
+        }, {} as ThemeColorButtonTone_v2)
+
+        return tones
+      }, {} as ThemeColorButtonMode_v2)
+
+      return modes
+    }, {} as ThemeColorButton_v2),
+    focusRing: color.focusRing,
+    input: THEME_COLOR_INPUT_MODES.reduce<ThemeColorInput_v2>((modes, mode) => {
+      modes[mode] = THEME_COLOR_INPUT_STATES.reduce<ThemeColorInputMode_v2>((states, state) => {
+        states[state] = buildInputState(color.variant.tinted.default)
+
+        return states
+      }, {} as ThemeColorInputMode_v2)
+
+      return modes
+    }, {} as ThemeColorInput_v2),
+    selectable: THEME_COLOR_STATE_TONES.reduce<ThemeColorSelectable_v2>((tones, tone) => {
+      tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorSelectableTone_v2>((states, state) => {
+        states[state] = buildColorState({
+          cardColor: color,
+          // cardVars: vars,
+          state,
+          tone,
+          variant: 'tinted',
+        })
+
+        return states
+      }, {} as ThemeColorSelectableTone_v2)
+
+      return tones
+    }, {} as ThemeColorSelectable_v2),
+    shadow: color.shadow,
+    syntax: color.code.token,
+  }
+}
+
+type ElementTokenIndex = 0 | 1 | 2 | 3 | 4
+
+const stateShades: Record<
+  ThemeColorStateKey,
+  {
+    bg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+    border: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+    fg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+  }
+> = {
+  enabled: {
+    bg: [0, 1, 2],
+    border: [0, 1, 2],
+    fg: [0, 1, 2],
+  },
+  hovered: {
+    bg: [1, 2, 3],
+    border: [1, 2, 3],
+    fg: [1, 2, 3],
+  },
+  pressed: {
+    bg: [2, 3, 4],
+    border: [2, 3, 4],
+    fg: [2, 3, 4],
+  },
+  selected: {
+    bg: [3, 4, 4],
+    border: [3, 4, 4],
+    fg: [3, 4, 4],
+  },
+  disabled: {
+    bg: [4, 4, 4],
+    border: [4, 4, 4],
+    fg: [4, 4, 4],
+  },
+}
+
+function mix(
+  tokens: {
+    0: string
+    4: string
+  },
+  index: ElementTokenIndex,
+) {
+  if (index === 0) {
+    return tokens[0]
+  }
+
+  if (index === 4) {
+    return tokens[4]
+  }
+
+  return `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`
+}
+
+function buildColorState(options: {
+  cardColor: ThemeColorCard_v3
+  state: ThemeColorStateKey
+  tone: ThemeColorStateToneKey
+  variant: ThemeColorVariantKey
+}): ThemeColorState_v2 {
+  const {cardColor, state, tone, variant} = options
+  const color = cardColor.variant[variant][tone]
+
+  const shades = stateShades[state]
+
+  return {
+    accent: {
+      fg: color.fg[4],
+    },
+    avatar: cardColor.avatar,
+    badge: THEME_COLOR_STATE_TONES.reduce<ThemeColorBadge_v2>((tones, tone) => {
+      tones[tone] = {
+        bg: mix(color.bg, 1),
+        fg: mix(color.fg, 1),
+        dot: mix(color.fg, 3),
+        icon: mix(color.fg, 3),
+      }
+
+      return tones
+    }, {} as ThemeColorBadge_v2),
+    bg: mix(color.bg, shades.bg[0]),
+    border: mix(color.border, shades.border[0]),
+    fg: mix(color.fg, shades.fg[0]),
+    code: {
+      bg: mix(color.bg, shades.bg[1]),
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    icon: mix(color.fg, shades.fg[2]),
+    kbd: {
+      bg: mix(color.bg, 0),
+      fg: mix(color.fg, 0),
+      border: mix(color.bg, 0),
+    },
+    link: {
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    muted: {
+      bg: mix(color.bg, shades.bg[1]),
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    skeleton: cardColor.skeleton,
+  }
+}
+
+function buildInputState(colorElement: ThemeColorElement): ThemeColorInputState_v2 {
+  return {
+    bg: colorElement.bg[0],
+    border: colorElement.bg[0],
+    fg: colorElement.fg[0],
+    muted: {
+      bg: colorElement.bg[0],
+    },
+    placeholder: colorElement.fg[0],
+  }
+}

package/src/theme/versioning/v0_v2.ts

@@ -1,5 +1,6 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()
@@ -44,7 +45,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
       light: {
         transparent: themeColor_v0_v2(color.light.transparent),
         default: themeColor_v0_v2(color.light.default),
+        neutral: themeColor_v0_v2(color.light.transparent),
         primary: themeColor_v0_v2(color.light.primary),
+        suggest: 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),
@@ -52,7 +55,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
       dark: {
         transparent: themeColor_v0_v2(color.dark.transparent),
         default: themeColor_v0_v2(color.dark.default),
+        neutral: themeColor_v0_v2(color.dark.transparent),
         primary: themeColor_v0_v2(color.dark.primary),
+        suggest: 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),

package/src/theme/versioning/v2_v0.ts

@@ -1,18 +1,17 @@
+import {RootTheme} from '../types'
+import {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
 import {
-  RootTheme,
   RootTheme_v2,
-  ThemeColor,
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
-  ThemeColorInputState,
   ThemeColorInputState_v2,
-  ThemeColorInputStates,
-} from '../system'
+} from '../v2'
+import {Theme_v3} from '../v3'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 
 /** @internal */
-export function v2_v0(v2: RootTheme_v2): RootTheme {
+export function v2_v0(v2: RootTheme_v2, v3?: Theme_v3): RootTheme {
   const cachedTheme = cache.get(v2)
 
   if (cachedTheme) return cachedTheme
@@ -64,6 +63,7 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
     styles,
 
     v2,
+    v3,
   }
 }
 

package/src/theme/versioning/v3_v2.ts

@@ -0,0 +1,108 @@
+// import {vars} from '@sanity/ui/css'
+
+import {RootTheme_v2} from '../v2'
+import {Theme_v3} from '../v3'
+import {themeColor_v3_v2} from './themeColor_v3_v2'
+
+export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
+  return {
+    _version: 2,
+    avatar: theme_v3.avatar,
+    button: theme_v3.button,
+    card: theme_v3.card,
+    color: {
+      dark: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.transparent,
+          dark: true,
+          // vars: vars.color.dark.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.default,
+          dark: true,
+          // vars: vars.color.dark.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.neutral,
+          dark: true,
+          // vars: vars.color.dark.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.primary,
+          dark: true,
+          // vars: vars.color.dark.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.suggest,
+          dark: true,
+          // vars: vars.color.dark.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.positive,
+          dark: true,
+          // vars: vars.color.dark.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.caution,
+          dark: true,
+          // vars: vars.color.dark.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.critical,
+          dark: true,
+          // vars: vars.color.dark.critical,
+        }),
+      },
+      light: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.light.card.transparent,
+          dark: false,
+          // vars: vars.color.light.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.light.card.default,
+          dark: false,
+          // vars: vars.color.light.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.light.card.neutral,
+          dark: false,
+          // vars: vars.color.light.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.light.card.primary,
+          dark: false,
+          // vars: vars.color.light.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.light.card.suggest,
+          dark: false,
+          // vars: vars.color.light.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.light.card.positive,
+          dark: false,
+          // vars: vars.color.light.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.light.card.caution,
+          dark: false,
+          // vars: vars.color.light.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.light.card.critical,
+          dark: false,
+          // vars: vars.color.light.critical,
+        }),
+      },
+    },
+    container: theme_v3.container,
+    font: theme_v3.font,
+    input: theme_v3.input,
+    layer: theme_v3.layer,
+    media: theme_v3.media,
+    radius: theme_v3.radius,
+    shadow: theme_v3.shadow,
+    space: theme_v3.space,
+  }
+}

package/src/ui/RootClassNames.tsx

@@ -0,0 +1,41 @@
+import {card, scopeClassName as _} from '@sanity/ui/css'
+import {useEffect} from 'react'
+
+import {_raf2} from './helpers'
+import {useCard} from './primitives'
+
+export function RootClassNames(props: {element: HTMLElement}) {
+  const {element} = props
+  const {scheme, tone} = useCard() ?? {}
+
+  useEffect(() => {
+    const els = document.querySelectorAll(
+      [_('button'), _('card'), _('font')].map((n) => `.${n}`).join(', '),
+    )
+
+    // temporarily disable all transitions when the theme changes
+    for (const el of els) {
+      if (el instanceof HTMLElement) {
+        el.style.transition = 'none'
+      }
+    }
+
+    _raf2(() => {
+      document.documentElement.className = card({scheme, tone}) ?? ''
+
+      _raf2(() => {
+        for (const el of els) {
+          if (el instanceof HTMLElement) {
+            el.style.transition = ''
+          }
+        }
+      })
+    })
+
+    return () => {
+      document.documentElement.className = ''
+    }
+  }, [element, scheme, tone])
+
+  return null
+}

package/src/ui/StyleTags.tsx

@@ -0,0 +1,24 @@
+import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
+import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
+import {ReactNode} from 'react'
+
+/* @beta */
+export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
+  const {theme: themeProp} = props
+
+  const theme = themeProp ?? buildTheme_v3()
+
+  return (
+    <>
+      <style href="sanity-palette" precedence="palette">
+        {compilePalette()}
+      </style>
+      <style href="sanity-theme" precedence="theme">
+        {compileTheme({v3: theme} as RootTheme)}
+      </style>
+      <style href="sanity-system" precedence="system">
+        {compileSystem()}
+      </style>
+    </>
+  )
+}