@sanity/ui 3.0.0-static.33 → 3.0.0-static.34

package/src/theme/types.ts

@@ -1,28 +1,368 @@
-import type {ThemeColor} from './v0'
-import type {RootTheme_v0} from './v0/theme'
-import type {RootTheme_v2, Theme_v2} from './v2/theme'
-import type {Theme_v3} from './v3'
+import type {ColorHues, ColorTint} from '@sanity/color'
+
+import type {
+  AVATAR_COLORS,
+  AVATAR_SIZE,
+  BUTTON_MODES,
+  CARD_TONES,
+  COLOR_SCHEMES,
+  COLOR_VARIANTS,
+  CONTAINER,
+  CONTAINER_SCALE,
+  ELEMENT_TONES,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  HUES,
+  RADIUS,
+  SHADOW,
+  SPACE,
+  TINTS,
+} from './constants'
+
+/** @public */
+export type Hue = (typeof HUES)[number]
+
+/** @public */
+export type Tint = (typeof TINTS)[number]
+
+/** @public */
+export type AvatarColor = (typeof AVATAR_COLORS)[number]
 
 /** @public */
-export interface RootTheme extends RootTheme_v0 {
-  v2?: RootTheme_v2
-  v3?: Theme_v3
+export type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+export type ColorToken =
+  | `inherit`
+  | `black`
+  | `black/${ColorTokenOpacityValue}`
+  | `white`
+  | `white/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint}`
+  | `${Hue}-${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}-${Tint} ${number}%`
+  | `${Tint}`
+  | `${Tint}/${ColorTokenOpacityValue}`
+  | `${Tint} ${number}%`
+
+/** @public */
+export interface ResolvedColorToken {
+  color: {type: 'inherit'} | {type: 'black' | 'white'} | {type: 'hue'; hue: Hue; tint: Tint}
+  opacity: number
+  mix: number
 }
 
 /** @public */
-export type BaseTheme = RootTheme
+export type ColorTokens = Record<'*' | CardTone, CardColorTokens>
+
+/** @public */
+export interface Tokens {
+  color: ColorTokens
+}
+
+/** @public */
+export type PartialTokens<T> = T extends [ColorToken, ColorToken]
+  ? T
+  : T extends {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+    ? {
+        [P in keyof T]?: PartialTokens<T[P]>
+      }
+    : T
 
 /**
- * Used for the `theme` prop in `styled-components`’s `ThemeProvider`.
+ * Theme color values are tuples of [light, dark] color tokens.
  *
  * @public
  */
+export type ColorValue = [ColorToken, ColorToken]
+
+/** @public */
+export interface AvatarColorProperties {
+  _hue: Hue
+  bg: ColorValue
+  fg: ColorValue
+}
+
+/** @public */
+export type AvatarsColor = Record<AvatarColor, AvatarColorProperties>
+
+/** @public */
+export interface ElementColorTokens {
+  _hue: Hue
+  bg: {
+    0: ColorValue
+    4: ColorValue
+  }
+  border: {
+    0: ColorValue
+    4: ColorValue
+  }
+  fg: {
+    0: ColorValue
+    4: ColorValue
+  }
+}
+
+/** @public */
+export type ElementsColorTokens = Record<'*' | ElementTone, ElementColorTokens>
+
+/** @public */
+export type ColorVariant = (typeof COLOR_VARIANTS)[number]
+
+/** @public */
+export interface CardColorTokens {
+  _hue: Hue
+  avatar: AvatarsColor
+  backdrop: ColorValue
+  code: {
+    bg: ColorValue
+    fg: ColorValue
+    token: {
+      atrule: ColorValue
+      attrName: ColorValue
+      attrValue: ColorValue
+      attribute: ColorValue
+      boolean: ColorValue
+      builtin: ColorValue
+      cdata: ColorValue
+      char: ColorValue
+      class: ColorValue
+      className: ColorValue
+      comment: ColorValue
+      constant: ColorValue
+      deleted: ColorValue
+      doctype: ColorValue
+      entity: ColorValue
+      function: ColorValue
+      hexcode: ColorValue
+      id: ColorValue
+      important: ColorValue
+      inserted: ColorValue
+      keyword: ColorValue
+      number: ColorValue
+      operator: ColorValue
+      prolog: ColorValue
+      property: ColorValue
+      pseudoClass: ColorValue
+      pseudoElement: ColorValue
+      punctuation: ColorValue
+      regex: ColorValue
+      selector: ColorValue
+      string: ColorValue
+      symbol: ColorValue
+      tag: ColorValue
+      unit: ColorValue
+      url: ColorValue
+      variable: ColorValue
+    }
+  }
+  focusRing: ColorValue
+  link: {
+    fg: ColorValue
+  }
+  shadow: {
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
+  }
+  skeleton: {
+    from: ColorValue
+    to: ColorValue
+  }
+  variant: Record<ColorVariant, ElementsColorTokens>
+}
+
+/** @public */
+export type Color = Record<CardTone, CardColorTokens>
+
+/** @public */
+export interface Input {
+  checkbox: {
+    size: number
+    focusRing: FocusRing
+  }
+  radio: {
+    size: number
+    markSize: number
+    focusRing: FocusRing
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+    focusRing: FocusRing
+  }
+  border: {
+    width: number
+  }
+  select: {
+    focusRing: FocusRing
+  }
+  text: {
+    focusRing: FocusRing
+  }
+}
+
+/** @public */
+export type ColorScheme = (typeof COLOR_SCHEMES)[number]
+
+/** @public */
+export type CardTone = (typeof CARD_TONES)[number]
+
+/** @public */
+export type ElementTone = (typeof ELEMENT_TONES)[number]
+
+/** @public */
+export type ButtonMode = (typeof BUTTON_MODES)[number]
+
+/** @public */
+export interface ThemeAvatar {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: FocusRing
+}
+
+/** @public */
+export type BoxShadow = [
+  // offsetX, offsetY, blurRadius, spreadRadius
+  number,
+  number,
+  number,
+  number,
+]
+
+/** @public */
+export interface ShadowProperties {
+  umbra: BoxShadow
+  penumbra: BoxShadow
+  ambient: BoxShadow
+}
+
+/** @public */
+export interface Layer {
+  dialog: {zOffset: number}
+  popover: {zOffset: number}
+  tooltip: {zOffset: number}
+}
+
+/** @public */
+export interface FontWeights {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/** @public */
+export interface FocusRing {
+  offset: number
+  width: number
+}
+
+/** @public */
+export type AvatarSize = (typeof AVATAR_SIZE)[number]
+
+/** @public */
+export type ContainerScale = (typeof CONTAINER_SCALE)[number]
+
+/** @public */
+export type ContainerWidth = (typeof CONTAINER)[number]
+
+/** @public */
+export type Radius = (typeof RADIUS)[number] // | 'full'
+
+/** @public */
+export type Space = (typeof SPACE)[number]
+
+/** @public */
+export type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/** @public */
+export type FontCodeSize = (typeof FONT_CODE_SIZE)[number]
+
+/** @public */
+export type FontHeadingSize = (typeof FONT_HEADING_SIZE)[number]
+
+/** @public */
+export type FontLabelSize = (typeof FONT_LABEL_SIZE)[number]
+
+/** @public */
+export type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
+
+/** @public */
+export type Shadow = (typeof SHADOW)[number]
+
+/** @public */
+export interface Options {
+  tokens?: PartialTokens<Tokens>
+}
+
+/** @public */
+export interface Palette {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
+/** @public */
+export interface FontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
+export interface Font {
+  family: string
+  featureSettings?: string
+  weight: FontWeights
+  scale: FontSize[]
+}
+
+/** @public */
+export interface Fonts {
+  code: Font
+  heading: Font
+  label: Font
+  text: Font
+}
+
+/** @public */
 export interface Theme {
-  sanity: Omit<RootTheme, 'color' | 'v2'> & {
-    /**
-     * @deprecated Use `v2.color` instead
-     */
-    color: ThemeColor
-    v2?: Theme_v2
+  _version: 3
+  _tokens: Tokens
+  avatar: ThemeAvatar
+  button: {
+    border: {width: number}
+    focusRing: FocusRing
+    textWeight: FontWeight
+  }
+  card: {
+    border: {width: number}
+    focusRing: FocusRing
+    shadow: {outline: number}
   }
+  color: Color
+  container: number[]
+  font: Fonts
+  input: Input
+  layer: Layer
+  media: number[]
+  palette: Palette
+  radius: Record<Radius, number>
+  shadow: Record<Shadow, ShadowProperties | undefined>
+  space: Record<Space, number>
 }

package/src/core/__DEV__.ts

@@ -1,5 +0,0 @@
-declare global {
-  var __DEV__: boolean
-}
-
-export {}

package/src/core/_compat/helpers.ts

@@ -1,72 +0,0 @@
-import {
-  createColorTheme as _createColorTheme,
-  hexToRgb as _hexToRgb,
-  hslToRgb as _hslToRgb,
-  multiply as _multiply,
-  parseColor as _parseColor,
-  rgba as _rgba,
-  rgbToHex as _rgbToHex,
-  rgbToHsl as _rgbToHsl,
-  screen as _screen,
-} from '@sanity/ui/theme'
-
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export const createColorTheme = _createColorTheme
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export const hexToRgb = _hexToRgb
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export const hslToRgb = _hslToRgb
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export const multiply = _multiply
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export const parseColor = _parseColor
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export const rgbToHex = _rgbToHex
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export const rgbToHsl = _rgbToHsl
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export const rgba = _rgba
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export const screen = _screen

package/src/core/_compat/styles/_responsive.ts

@@ -1,19 +0,0 @@
-import type {CSSObject} from '@sanity/ui/theme'
-
-/**
- * @internal
- * @deprecated do not use
- */
-export function _responsive<T>(
-  media: number[],
-  values: T[],
-  callback: (value: T, index: number, array: T[]) => CSSObject,
-): CSSObject[] {
-  const statements = values?.map(callback) || []
-
-  return statements.map((statement, mediaIndex) => {
-    if (mediaIndex === 0) return statement
-
-    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
-  })
-}

package/src/core/_compat/theme/theme.test.tsx

@@ -1,73 +0,0 @@
-import {buildTheme} from '@sanity/ui/theme'
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {ThemeContext} from './themeContext'
-import type {ThemeContextValue} from './types'
-import {useRootTheme} from './useRootTheme'
-
-describe('theme', () => {
-  describe('useRootTheme', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootTheme = useRootTheme()
-
-        log(rootTheme)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: ThemeContextValue = {
-          version: 0.0,
-          scheme: 'light',
-          theme: buildTheme(),
-          tone: 'default',
-        }
-
-        return (
-          <ThemeContext.Provider value={value}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].scheme).toBe('light')
-      expect(log.mock.calls[0][0].tone).toBe('default')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <ThemeContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
-    })
-  })
-})

package/src/core/_compat/theme/themeColorProvider.tsx

@@ -1,24 +0,0 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import type {ReactElement, ReactNode} from 'react'
-
-import {ThemeProvider} from './themeProvider'
-import {useRootTheme} from './useRootTheme'
-
-/** @public */
-export interface ThemeColorProviderProps {
-  children?: ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
-}
-
-/** @public */
-export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
-  const {children, scheme, tone} = props
-  const root = useRootTheme()
-
-  return (
-    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
-      {children}
-    </ThemeProvider>
-  )
-}

package/src/core/_compat/theme/themeContext.ts

@@ -1,10 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import type {ThemeContextValue} from './types'
-
-/**
- * @internal
- */
-export const ThemeContext: Context<ThemeContextValue | null> =
-  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/core/_compat/theme/themeProvider.tsx

@@ -1,68 +0,0 @@
-import {
-  getScopedTheme,
-  type RootTheme,
-  type Theme,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-} from '@sanity/ui/theme'
-import {type ReactElement, type ReactNode, useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
-
-import {CardProvider} from '../../primitives/card/cardProvider'
-import {ThemeColorProvider} from './themeColorProvider'
-import {ThemeContext} from './themeContext'
-import type {ThemeContextValue} from './types'
-
-/** @public */
-export interface ThemeProviderProps {
-  children?: ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorCardToneKey
-}
-
-/** @public */
-export function ThemeProvider(props: ThemeProviderProps): ReactElement {
-  const parentTheme = useContext(ThemeContext)
-  const {children} = props
-  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = props.theme ?? (parentTheme?.theme || null)
-  const tone = props.tone ?? (parentTheme?.tone || 'default')
-
-  const themeContext: ThemeContextValue | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return {
-      version: 0.0,
-      theme: rootTheme,
-      scheme,
-      tone,
-    }
-  }, [rootTheme, scheme, tone])
-
-  const theme: Theme | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return getScopedTheme(rootTheme, scheme, tone)
-  }, [scheme, rootTheme, tone])
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <CardProvider
-      scheme={scheme}
-      tone={tone}
-      unstable_CompatProvider={
-        // Render a theme provider around the card if the scheme or tone differs from the root theme.
-        // This is needed for backwards compatibility with the legacy theme API.
-        ThemeColorProvider
-      }
-    >
-      <ThemeContext.Provider value={themeContext}>
-        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-      </ThemeContext.Provider>
-    </CardProvider>
-  )
-}

package/src/core/_compat/theme/types.ts

@@ -1,10 +0,0 @@
-import type {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-
-/** @public */
-export interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorCardToneKey
-}

package/src/core/_compat/theme/useRootTheme.ts

@@ -1,15 +0,0 @@
-import {useContext} from 'react'
-
-import {ThemeContext} from './themeContext'
-import type {ThemeContextValue} from './types'
-
-/** @public */
-export function useRootTheme(): ThemeContextValue {
-  const value = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  return value as unknown as ThemeContextValue
-}

package/src/core/_compat/theme/useTheme.ts

@@ -1,12 +0,0 @@
-import {getTheme_v2, type Theme, type Theme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
-
-/** @public */
-export function useTheme(): Theme {
-  return useStyledTheme() as Theme
-}
-
-/** @public */
-export function useTheme_v2(): Theme_v2 {
-  return getTheme_v2(useStyledTheme() as Theme)
-}