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

package/src/theme/{system/v0 → v0}/color/spot.ts

@@ -1,4 +1,4 @@
-import {ThemeColorAvatarColorKey} from '../../color/_system'
+import {ThemeColorAvatarColorKey} from '../../v2/color/_system'
 
 /**
  * @public

package/src/theme/{system → v0}/css.ts

@@ -4,6 +4,5 @@ import type {StyledObject} from 'styled-components'
  * Work around types that are missing in `styled-components@6`
  * https://github.com/styled-components/styled-components/issues/4062
  * @internal
- * */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ */
 export type CSSObject = StyledObject<any>

package/src/theme/{system → v0}/font.ts

@@ -35,6 +35,7 @@ export interface ThemeFontWeight {
  */
 export interface ThemeFont {
   family: string
+  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */

package/src/theme/{system → v0}/index.ts

@@ -1,7 +1,3 @@
-export * from './v0'
-
-export * from './_constants'
-export * from './_types'
 export * from './avatar'
 export * from './color'
 export * from './css'

package/src/theme/v0/theme.ts

@@ -0,0 +1,72 @@
+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/{system → v2}/avatar.ts

@@ -1,4 +1,4 @@
-import {ThemeFocusRing} from './focusRing'
+import {ThemeFocusRing} from '../v0/focusRing'
 
 /**
  * @public

package/src/theme/{system → v2}/color/_constants.ts

@@ -10,7 +10,9 @@ export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 export const THEME_COLOR_CARD_TONES = [
   'transparent',
   'default',
-  'primary',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -19,7 +21,9 @@ export const THEME_COLOR_CARD_TONES = [
 /** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
   'positive',
   'caution',
   'critical',

package/src/theme/{system → v2}/color/_helpers.ts

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

package/src/theme/v2/color/badge.ts

@@ -0,0 +1,16 @@
+import {ThemeColorStateToneKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+/**
+ * @public
+ */
+export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

package/src/theme/{system → v2}/color/color.ts

@@ -1,4 +1,4 @@
-import {ThemeColorCardToneKey, ThemeColorBlendModeKey, ThemeColorSchemeKey} from './_system'
+import {ThemeColorBlendModeKey, ThemeColorCardToneKey, ThemeColorSchemeKey} from './_system'
 import {ThemeColorButton_v2} from './button'
 import {ThemeColorInput_v2} from './input'
 import {ThemeColorSelectable_v2} from './selectable'

package/src/theme/{system/v0 → v2}/index.ts

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

package/src/theme/{system → v2}/input.ts

@@ -1,4 +1,4 @@
-import {ThemeFocusRing} from './focusRing'
+import {ThemeFocusRing} from '../v0/focusRing'
 
 /**
  * @public

package/src/theme/v2/theme.ts

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

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

@@ -0,0 +1,30 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import {buildColor_v3} from './color/buildColor_v3'
+import {defaultPalette, 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,
+    _palette: options?.palette ?? defaultPalette,
+    _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

@@ -0,0 +1,193 @@
+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),
+    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),
+    },
+    token: {
+      atrule: renderColor(tokens.token.atrule, context),
+      attrName: renderColor(tokens.token.attrName, context),
+      attrValue: renderColor(tokens.token.attrValue, context),
+      attribute: renderColor(tokens.token.attribute, context),
+      boolean: renderColor(tokens.token.boolean, context),
+      builtin: renderColor(tokens.token.builtin, context),
+      cdata: renderColor(tokens.token.cdata, context),
+      char: renderColor(tokens.token.char, context),
+      class: renderColor(tokens.token.class, context),
+      className: renderColor(tokens.token.className, context),
+      comment: renderColor(tokens.token.comment, context),
+      constant: renderColor(tokens.token.constant, context),
+      deleted: renderColor(tokens.token.deleted, context),
+      doctype: renderColor(tokens.token.doctype, context),
+      entity: renderColor(tokens.token.entity, context),
+      function: renderColor(tokens.token.function, context),
+      hexcode: renderColor(tokens.token.hexcode, context),
+      id: renderColor(tokens.token.id, context),
+      important: renderColor(tokens.token.important, context),
+      inserted: renderColor(tokens.token.inserted, context),
+      keyword: renderColor(tokens.token.keyword, context),
+      number: renderColor(tokens.token.number, context),
+      operator: renderColor(tokens.token.operator, context),
+      prolog: renderColor(tokens.token.prolog, context),
+      property: renderColor(tokens.token.property, context),
+      pseudoClass: renderColor(tokens.token.pseudoClass, context),
+      pseudoElement: renderColor(tokens.token.pseudoElement, context),
+      punctuation: renderColor(tokens.token.punctuation, context),
+      regex: renderColor(tokens.token.regex, context),
+      selector: renderColor(tokens.token.selector, context),
+      string: renderColor(tokens.token.string, context),
+      symbol: renderColor(tokens.token.symbol, context),
+      tag: renderColor(tokens.token.tag, context),
+      unit: renderColor(tokens.token.unit, context),
+      url: renderColor(tokens.token.url, context),
+      variable: renderColor(tokens.token.variable, 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

@@ -0,0 +1,116 @@
+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]
+  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]
+  }
+  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]
+  }
+  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
+// }