@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/theme/v3/resolveTokens.ts

@@ -1,204 +0,0 @@
-import {
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
-  ThemeColorStateToneKey,
-} from '../v2'
-import {CardColorTokens} from './color/card'
-import {ElementColorTokens} from './color/element'
-import {merge} from './merge'
-import {PartialTokens, Tokens} from './tokens'
-
-const defaultElementTokens: ElementColorTokens = {
-  _hue: 'gray',
-  bg: {
-    0: ['950', '50'],
-    4: ['700', '300'],
-  },
-  border: {
-    0: ['700', '300'],
-    4: ['400', '600'],
-  },
-  fg: {
-    0: ['100', '900'],
-    4: ['400', '600'],
-  },
-}
-
-/** @internal */
-export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
-  return {
-    color: {
-      '*': resolveCardColorTokens(tokens.color?.['*']),
-
-      ...THEME_COLOR_CARD_TONES.reduce(
-        (acc, tone) => {
-          return {
-            ...acc,
-            [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
-          }
-        },
-        {} as Record<ThemeColorCardToneKey, CardColorTokens>,
-      ),
-    },
-  }
-}
-
-function resolveCardColorTokens(
-  tokens: PartialTokens<CardColorTokens> | undefined,
-): CardColorTokens {
-  return {
-    _hue: tokens?._hue ?? 'gray',
-    avatar: {
-      gray: {
-        _hue: tokens?.avatar?.gray?._hue ?? 'gray',
-        bg: tokens?.avatar?.gray?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
-      },
-      blue: {
-        _hue: tokens?.avatar?.blue?._hue ?? 'blue',
-        bg: tokens?.avatar?.blue?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
-      },
-      purple: {
-        _hue: tokens?.avatar?.purple?._hue ?? 'purple',
-        bg: tokens?.avatar?.purple?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
-      },
-      magenta: {
-        _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
-        bg: tokens?.avatar?.magenta?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
-      },
-      red: {
-        _hue: tokens?.avatar?.red?._hue ?? 'red',
-        bg: tokens?.avatar?.red?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
-      },
-      orange: {
-        _hue: tokens?.avatar?.orange?._hue ?? 'orange',
-        bg: tokens?.avatar?.orange?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
-      },
-      yellow: {
-        _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
-        bg: tokens?.avatar?.yellow?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
-      },
-      green: {
-        _hue: tokens?.avatar?.green?._hue ?? 'green',
-        bg: tokens?.avatar?.green?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
-      },
-      cyan: {
-        _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
-        bg: tokens?.avatar?.cyan?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
-      },
-    },
-    backdrop: tokens?.backdrop ?? ['900', '100'],
-    code: {
-      bg: tokens?.code?.bg ?? ['950', '50'],
-      fg: tokens?.code?.fg ?? ['400', '600'],
-      token: {
-        atrule: tokens?.code?.token?.atrule ?? ['400', '600'],
-        attribute: tokens?.code?.token?.attribute ?? ['400', '600'],
-        attrName: tokens?.code?.token?.attrName ?? ['400', '600'],
-        attrValue: tokens?.code?.token?.attrValue ?? ['400', '600'],
-        boolean: tokens?.code?.token?.boolean ?? ['400', '600'],
-        builtin: tokens?.code?.token?.builtin ?? ['400', '600'],
-        cdata: tokens?.code?.token?.cdata ?? ['400', '600'],
-        char: tokens?.code?.token?.char ?? ['400', '600'],
-        class: tokens?.code?.token?.class ?? ['400', '600'],
-        className: tokens?.code?.token?.className ?? ['400', '600'],
-        comment: tokens?.code?.token?.comment ?? ['600', '400'],
-        constant: tokens?.code?.token?.constant ?? ['400', '600'],
-        deleted: tokens?.code?.token?.deleted ?? ['400', '600'],
-        doctype: tokens?.code?.token?.doctype ?? ['400', '600'],
-        entity: tokens?.code?.token?.entity ?? ['400', '600'],
-        function: tokens?.code?.token?.function ?? ['400', '600'],
-        hexcode: tokens?.code?.token?.hexcode ?? ['400', '600'],
-        id: tokens?.code?.token?.id ?? ['400', '600'],
-        important: tokens?.code?.token?.important ?? ['400', '600'],
-        inserted: tokens?.code?.token?.inserted ?? ['400', '600'],
-        keyword: tokens?.code?.token?.keyword ?? ['400', '600'],
-        number: tokens?.code?.token?.number ?? ['400', '600'],
-        operator: tokens?.code?.token?.operator ?? ['400', '600'],
-        prolog: tokens?.code?.token?.prolog ?? ['400', '600'],
-        property: tokens?.code?.token?.property ?? ['400', '600'],
-        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['400', '600'],
-        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['400', '600'],
-        punctuation: tokens?.code?.token?.punctuation ?? ['400', '600'],
-        regex: tokens?.code?.token?.regex ?? ['400', '600'],
-        selector: tokens?.code?.token?.selector ?? ['400', '600'],
-        string: tokens?.code?.token?.string ?? ['400', '600'],
-        symbol: tokens?.code?.token?.symbol ?? ['400', '600'],
-        tag: tokens?.code?.token?.tag ?? ['400', '600'],
-        unit: tokens?.code?.token?.unit ?? ['400', '600'],
-        url: tokens?.code?.token?.url ?? ['400', '600'],
-        variable: tokens?.code?.token?.variable ?? ['400', '600'],
-      },
-    },
-    focusRing: tokens?.focusRing ?? ['500', '500'],
-    link: {
-      fg: tokens?.link?.fg ?? ['400', '600'],
-    },
-    shadow: {
-      outline: tokens?.shadow?.outline ?? ['500', '500'],
-      umbra: tokens?.shadow?.umbra ?? ['500', '500'],
-      penumbra: tokens?.shadow?.penumbra ?? ['500', '500'],
-      ambient: tokens?.shadow?.ambient ?? ['500', '500'],
-    },
-    skeleton: {
-      from: tokens?.skeleton?.from ?? ['900', '100'],
-      to: tokens?.skeleton?.to ?? ['950', '50'],
-    },
-
-    variant: {
-      solid: {
-        '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => {
-            acc[tone] = resolveElementTokens(
-              merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
-            )
-
-            return acc
-          },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
-        ),
-      },
-      tinted: {
-        '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => {
-            acc[tone] = resolveElementTokens(
-              merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
-            )
-
-            return acc
-          },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
-        ),
-      },
-    },
-  }
-}
-
-function resolveElementTokens(tokens?: PartialTokens<ElementColorTokens>): ElementColorTokens {
-  return {
-    _hue: tokens?._hue ?? 'gray',
-    bg: {
-      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
-      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4],
-    },
-    border: {
-      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
-      4: tokens?.border?.[4] ?? defaultElementTokens.border[4],
-    },
-    fg: {
-      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
-      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4],
-    },
-  }
-}

package/src/theme/v3/tokens.ts

@@ -1,16 +0,0 @@
-import {ColorToken} from './color/token'
-import {ColorTokens} from './color/tokens'
-
-/** @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

package/src/theme/v3/types.ts

@@ -1,45 +0,0 @@
-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/themeColor_v3_v2.ts

@@ -1,206 +0,0 @@
-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/v3_v2.ts

@@ -1,108 +0,0 @@
-// 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/StyleTags.tsx

@@ -1,24 +0,0 @@
-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>
-    </>
-  )
-}

package/src/ui/_compat/index.ts

@@ -1,9 +0,0 @@
-export * from './styles'
-export * from './theme'
-export * from './types'
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'

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

@@ -1,19 +0,0 @@
-import {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/ui/_compat/styles/index.ts

@@ -1 +0,0 @@
-export * from './_responsive'