@sanity/ui 3.0.0-static.9 → 3.0.0

package/src/theme/v0/color/spot.ts

@@ -1,13 +0,0 @@
-import {ThemeColorAvatarColorKey} from '../../v2/color/_system'
-
-/**
- * @public
- * @deprecated Use `ThemeColorAvatarColorKey` instead
- */
-export type ThemeColorSpotKey = ThemeColorAvatarColorKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorAvatar_v2` instead
- */
-export type ThemeColorSpot = Record<ThemeColorSpotKey, string>

package/src/theme/v0/font.ts

@@ -1,53 +0,0 @@
-/**
- * @public
- */
-export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
-
-/**
- * @public
- */
-export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
-
-/**
- * @public
- */
-export interface ThemeFontSize {
-  ascenderHeight: number
-  descenderHeight: number
-  fontSize: number
-  iconSize: number
-  letterSpacing: number
-  lineHeight: number
-}
-
-/**
- * @public
- */
-export interface ThemeFontWeight {
-  regular: number
-  medium: number
-  semibold: number
-  bold: number
-}
-
-/**
- * @public
- */
-export interface ThemeFont {
-  family: string
-  featureSettings?: string
-  weights: ThemeFontWeight
-  sizes: ThemeFontSize[]
-  /** @deprecated No longer supported. */
-  horizontalOffset?: number
-}
-
-/**
- * @public
- */
-export interface ThemeFonts {
-  code: ThemeFont
-  heading: ThemeFont
-  label: ThemeFont
-  text: ThemeFont
-}

package/src/theme/v0/index.ts

@@ -1,10 +0,0 @@
-export * from './avatar'
-export * from './color'
-export * from './css'
-export * from './focusRing'
-export * from './font'
-export * from './input'
-export * from './layer'
-export * from './shadow'
-export * from './styles'
-export * from './theme'

package/src/theme/v0/theme.ts

@@ -1,72 +0,0 @@
-import {ThemeAvatar} from './avatar'
-import {ThemeColorSchemes} from './color'
-import {ThemeFonts, ThemeFontWeightKey} from './font'
-import {ThemeInput} from './input'
-import {ThemeLayer} from './layer'
-import {ThemeShadow} from './shadow'
-import {ThemeStyles} from './styles'
-
-/** @public */
-export interface RootTheme_v0 {
-  _version?: 0
-  /**
-   * @deprecated Use `v2.avatar` instead
-   */
-  avatar: ThemeAvatar
-  /**
-   * @deprecated Use `v2.button` instead
-   */
-  button: {
-    textWeight: ThemeFontWeightKey
-  }
-  /**
-   * @deprecated Use `v2.color` instead
-   */
-  color: ThemeColorSchemes
-  /**
-   * @deprecated Use `v2.container` instead
-   */
-  container: number[]
-  /**
-   * @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
-   */
-  focusRing: {
-    offset: number
-    width: number
-  }
-  /**
-   * @deprecated Use `v2.font` instead
-   */
-  fonts: ThemeFonts
-  /**
-   * @deprecated Use `v2.input` instead
-   */
-  input: ThemeInput
-  /**
-   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
-   * @beta
-   * @deprecated Use `v2.layer` instead
-   */
-  layer?: ThemeLayer
-  /**
-   * @deprecated Use `v2.media` instead
-   */
-  media: number[]
-  /**
-   * @deprecated Use `v2.radius` instead
-   */
-  radius: number[]
-  /**
-   * @deprecated Use `v2.shadow` instead
-   */
-  shadows: Array<ThemeShadow | null>
-  /**
-   * @deprecated Use `v2.space` instead
-   */
-  space: number[]
-  /**
-   * @internal
-   * @deprecated Use `v2.style` instead
-   */
-  styles?: ThemeStyles
-}

package/src/theme/v2/avatar.ts

@@ -1,14 +0,0 @@
-import {ThemeFocusRing} from '../v0/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/v2/index.ts

@@ -1,4 +0,0 @@
-export * from './avatar'
-export * from './color'
-export * from './input'
-export * from './theme'

package/src/theme/v2/input.ts

@@ -1,33 +0,0 @@
-import {ThemeFocusRing} from '../v0/focusRing'
-
-/**
- * @public
- */
-export interface ThemeInput_v2 {
-  checkbox: {
-    size: number
-    focusRing: ThemeFocusRing
-  }
-  radio: {
-    size: number
-    markSize: number
-    focusRing: ThemeFocusRing
-  }
-  switch: {
-    width: number
-    height: number
-    padding: number
-    transitionDurationMs: number
-    transitionTimingFunction: string
-    focusRing: ThemeFocusRing
-  }
-  border: {
-    width: number
-  }
-  select: {
-    focusRing: ThemeFocusRing
-  }
-  text: {
-    focusRing: ThemeFocusRing
-  }
-}

package/src/theme/v2/theme.ts

@@ -1,49 +0,0 @@
-import {ThemeFocusRing} from '../v0/focusRing'
-import {ThemeFonts, ThemeFontWeightKey} from '../v0/font'
-import {ThemeLayer} from '../v0/layer'
-import {ThemeShadow} from '../v0/shadow'
-import {ThemeStyles} from '../v0/styles'
-import {ThemeAvatar_v2} from './avatar'
-import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
-import {ThemeInput_v2} from './input'
-
-/**
- * @public
- */
-export interface RootTheme_v2 {
-  _version: 2
-  avatar: ThemeAvatar_v2
-  button: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    textWeight: ThemeFontWeightKey
-  }
-  card: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    shadow: {outline: number}
-  }
-  color: ThemeColorSchemes_v2
-  container: number[]
-  font: ThemeFonts
-  input: ThemeInput_v2
-  layer: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
-  /** @internal */
-  style?: ThemeStyles
-}
-/**
- * @public
- */
-export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
-  color: ThemeColorCard_v2
-  /**
-   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
-   * with sanity V2 components accessing a v1 <ThemeProvider>.
-   * See https://github.com/sanity-io/ui/pull/1203 for more info.
-   */
-  _resolved: boolean
-}

package/src/theme/v3/buildTheme_v3.test.ts

@@ -1,40 +0,0 @@
-import {buildTheme_v3} from './buildTheme_v3'
-
-it('should build theme', () => {
-  const theme = buildTheme_v3({
-    tokens: {
-      color: {
-        '*': {
-          variant: {
-            tinted: {
-              '*': {
-                bg: {
-                  0: ['50', '950'],
-                },
-                fg: {
-                  0: ['900 50%', '100 50%'],
-                },
-              },
-            },
-          },
-        },
-        'primary': {
-          _hue: 'purple',
-        },
-        'positive': {
-          _hue: 'green',
-        },
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log('default', theme.color.light.card.default)
-  // eslint-disable-next-line no-console
-  console.log('primary', theme.color.light.card.primary)
-  // eslint-disable-next-line no-console
-  console.log(
-    'primary.variant.tinted.positive',
-    theme.color.light.card.primary.variant.tinted.positive,
-  )
-})

package/src/theme/v3/buildTheme_v3.ts

@@ -1,29 +0,0 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {defaultThemeFonts} from '../defaults/fonts'
-import {buildColor_v3} from './color/buildColor_v3'
-import {defaultTokens} from './defaults'
-import {resolveTokens} from './resolveTokens'
-import {Theme_v3, ThemeOptions} from './types'
-
-export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
-  const {v2} = options ?? {}
-
-  const tokens = resolveTokens(options?.tokens ?? defaultTokens)
-
-  return {
-    _version: 3,
-    _tokens: tokens,
-    avatar: v2?.avatar ?? defaultThemeConfig.avatar,
-    button: v2?.button ?? defaultThemeConfig.button,
-    card: v2?.card ?? defaultThemeConfig.card,
-    color: buildColor_v3(tokens.color),
-    container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
-    input: v2?.input ?? defaultThemeConfig.input,
-    layer: v2?.layer ?? defaultThemeConfig.layer,
-    media: v2?.media ?? defaultThemeConfig.media,
-    radius: v2?.radius ?? defaultThemeConfig.radius,
-    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
-    space: v2?.space ?? defaultThemeConfig.space,
-  }
-}

package/src/theme/v3/color/buildColor_v3.ts

@@ -1,198 +0,0 @@
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
-} from '../../v2'
-import {CardColorTokens} from './card'
-import {
-  ThemeColor_v3,
-  ThemeColorCard_v3,
-  ThemeColorElement,
-  ThemeColorScheme_v3,
-  ThemeColorVariant,
-} from './color'
-import {ElementColorTokens} from './element'
-import {renderColor, RenderColorContext} from './renderColor'
-import {ColorTokens} from './tokens'
-
-const debug = false
-
-let nodeLen = 0
-
-/** @internal */
-export function buildColor_v3(tokens: ColorTokens): ThemeColor_v3 {
-  return {
-    dark: buildColorScheme_v3(tokens, {scheme: 'dark'}),
-    light: buildColorScheme_v3(tokens, {scheme: 'light'}),
-  }
-}
-
-function buildColorScheme_v3(
-  tokens: ColorTokens,
-  options: {scheme: ThemeColorSchemeKey},
-): ThemeColorScheme_v3 {
-  const {scheme} = options
-
-  return {
-    card: THEME_COLOR_CARD_TONES.reduce(
-      (acc, tone) => {
-        acc[tone] = buildColorCard_v3(tokens[tone], {cardTone: tone, scheme})
-
-        return acc
-      },
-      {} as Record<ThemeColorCardToneKey, ThemeColorCard_v3>,
-    ),
-  }
-}
-
-function buildColorCard_v3(
-  tokens: CardColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    scheme: ThemeColorSchemeKey
-  },
-): ThemeColorCard_v3 {
-  const {cardTone, scheme} = options
-  const context: RenderColorContext = {bgVar: `--color-bg-1`, hue: tokens._hue, scheme}
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    avatar: THEME_COLOR_AVATAR_COLORS.reduce<ThemeColorAvatar_v2>((acc, hue) => {
-      const avatarTokens = tokens.avatar[hue]
-
-      acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-        fg: renderColor(avatarTokens.fg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-      }
-
-      return acc
-    }, {} as ThemeColorAvatar_v2),
-    backdrop: renderColor(tokens.backdrop, context),
-    code: {
-      bg: renderColor(tokens.code.bg, context),
-      fg: renderColor(tokens.code.fg, context),
-      token: {
-        atrule: renderColor(tokens.code.token.atrule, context),
-        attrName: renderColor(tokens.code.token.attrName, context),
-        attrValue: renderColor(tokens.code.token.attrValue, context),
-        attribute: renderColor(tokens.code.token.attribute, context),
-        boolean: renderColor(tokens.code.token.boolean, context),
-        builtin: renderColor(tokens.code.token.builtin, context),
-        cdata: renderColor(tokens.code.token.cdata, context),
-        char: renderColor(tokens.code.token.char, context),
-        class: renderColor(tokens.code.token.class, context),
-        className: renderColor(tokens.code.token.className, context),
-        comment: renderColor(tokens.code.token.comment, context),
-        constant: renderColor(tokens.code.token.constant, context),
-        deleted: renderColor(tokens.code.token.deleted, context),
-        doctype: renderColor(tokens.code.token.doctype, context),
-        entity: renderColor(tokens.code.token.entity, context),
-        function: renderColor(tokens.code.token.function, context),
-        hexcode: renderColor(tokens.code.token.hexcode, context),
-        id: renderColor(tokens.code.token.id, context),
-        important: renderColor(tokens.code.token.important, context),
-        inserted: renderColor(tokens.code.token.inserted, context),
-        keyword: renderColor(tokens.code.token.keyword, context),
-        number: renderColor(tokens.code.token.number, context),
-        operator: renderColor(tokens.code.token.operator, context),
-        prolog: renderColor(tokens.code.token.prolog, context),
-        property: renderColor(tokens.code.token.property, context),
-        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
-        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
-        punctuation: renderColor(tokens.code.token.punctuation, context),
-        regex: renderColor(tokens.code.token.regex, context),
-        selector: renderColor(tokens.code.token.selector, context),
-        string: renderColor(tokens.code.token.string, context),
-        symbol: renderColor(tokens.code.token.symbol, context),
-        tag: renderColor(tokens.code.token.tag, context),
-        unit: renderColor(tokens.code.token.unit, context),
-        url: renderColor(tokens.code.token.url, context),
-        variable: renderColor(tokens.code.token.variable, context),
-      },
-    },
-    focusRing: renderColor(tokens.focusRing, context),
-    shadow: {
-      outline: renderColor(tokens.shadow.outline, context),
-      umbra: renderColor(tokens.shadow.umbra, context),
-      penumbra: renderColor(tokens.shadow.penumbra, context),
-      ambient: renderColor(tokens.shadow.ambient, context),
-    },
-    skeleton: {
-      from: renderColor(tokens.skeleton.from, context),
-      to: renderColor(tokens.skeleton.to, context),
-    },
-
-    variant: {
-      solid: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-              cardTone,
-              debugId: `solid`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-      tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
-              cardTone,
-              debugId: `tinted`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-    },
-  }
-}
-
-function buildColorElement_v3(
-  tokens: ElementColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    debugId?: string
-    scheme: ThemeColorSchemeKey
-    tone?: ThemeColorStateToneKey
-  },
-): ThemeColorElement {
-  const {cardTone, debugId, scheme, tone} = options
-
-  const path = [scheme, cardTone, debugId, tone].filter(Boolean).join('/')
-
-  if (debug) {
-    // eslint-disable-next-line no-console
-    console.log(nodeLen, path)
-    nodeLen += 1
-  }
-
-  const context: RenderColorContext = {bgVar: `--bg`, hue: tokens._hue, scheme}
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    bg: {
-      0: renderColor(tokens.bg[0], context),
-      4: renderColor(tokens.bg[4], context),
-    },
-    border: {
-      0: renderColor(tokens.border[0], context),
-      4: renderColor(tokens.border[4], context),
-    },
-    fg: {
-      0: renderColor(tokens.fg[0], context),
-      4: renderColor(tokens.fg[4], context),
-    },
-  }
-}

package/src/theme/v3/color/card.ts

@@ -1,121 +0,0 @@
-import {Hue} from '../../palette'
-import {ThemeColorStateToneKey} from '../../v2'
-import {ElementColorTokens} from './element'
-import {ColorToken} from './token'
-
-/** @public */
-export interface CardColorTokens {
-  _hue: Hue
-  avatar: Record<
-    Hue,
-    {
-      _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
-    }
-  >
-  backdrop: [ColorToken, ColorToken]
-  code: {
-    bg: [ColorToken, ColorToken]
-    fg: [ColorToken, ColorToken]
-    token: {
-      atrule: [ColorToken, ColorToken]
-      attrName: [ColorToken, ColorToken]
-      attrValue: [ColorToken, ColorToken]
-      attribute: [ColorToken, ColorToken]
-      boolean: [ColorToken, ColorToken]
-      builtin: [ColorToken, ColorToken]
-      cdata: [ColorToken, ColorToken]
-      char: [ColorToken, ColorToken]
-      class: [ColorToken, ColorToken]
-      className: [ColorToken, ColorToken]
-      comment: [ColorToken, ColorToken]
-      constant: [ColorToken, ColorToken]
-      deleted: [ColorToken, ColorToken]
-      doctype: [ColorToken, ColorToken]
-      entity: [ColorToken, ColorToken]
-      function: [ColorToken, ColorToken]
-      hexcode: [ColorToken, ColorToken]
-      id: [ColorToken, ColorToken]
-      important: [ColorToken, ColorToken]
-      inserted: [ColorToken, ColorToken]
-      keyword: [ColorToken, ColorToken]
-      number: [ColorToken, ColorToken]
-      operator: [ColorToken, ColorToken]
-      prolog: [ColorToken, ColorToken]
-      property: [ColorToken, ColorToken]
-      pseudoClass: [ColorToken, ColorToken]
-      pseudoElement: [ColorToken, ColorToken]
-      punctuation: [ColorToken, ColorToken]
-      regex: [ColorToken, ColorToken]
-      selector: [ColorToken, ColorToken]
-      string: [ColorToken, ColorToken]
-      symbol: [ColorToken, ColorToken]
-      tag: [ColorToken, ColorToken]
-      unit: [ColorToken, ColorToken]
-      url: [ColorToken, ColorToken]
-      variable: [ColorToken, ColorToken]
-    }
-  }
-  focusRing: [ColorToken, ColorToken]
-  link: {
-    fg: [ColorToken, ColorToken]
-  }
-  shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
-  }
-  skeleton: {
-    from: [ColorToken, ColorToken]
-    to: [ColorToken, ColorToken]
-  }
-
-  variant: {
-    solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-    tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-  }
-}
-
-// /**
-//  * @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
-// }