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

package/src/theme/{defaults → v2/defaults}/fonts.ts

@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../v0'
+import type {ThemeFonts} from '../../v0'
 
 export const defaultThemeFonts: ThemeFonts = {
   code: {
@@ -55,12 +55,11 @@ export const defaultThemeFonts: ThemeFonts = {
   heading: {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
     },
     sizes: [
       {

package/src/theme/v2/index.ts

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

package/src/theme/v2/input.ts

@@ -1,8 +1,6 @@
-import {ThemeFocusRing} from '../v0/focusRing'
+import type {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeInput_v2 {
   checkbox: {
     size: number

package/src/theme/v2/theme.ts

@@ -1,15 +1,13 @@
-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'
+import type {ThemeFocusRing} from '../v0/focusRing'
+import type {ThemeFonts, ThemeFontWeightKey} from '../v0/font'
+import type {ThemeLayer} from '../v0/layer'
+import type {ThemeShadow} from '../v0/shadow'
+import type {ThemeStyles} from '../v0/styles'
+import type {ThemeAvatar_v2} from './avatar'
+import type {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
+import type {ThemeInput_v2} from './input'
 
-/**
- * @public
- */
+/** @public */
 export interface RootTheme_v2 {
   _version: 2
   avatar: ThemeAvatar_v2
@@ -35,9 +33,7 @@ export interface RootTheme_v2 {
   /** @internal */
   style?: ThemeStyles
 }
-/**
- * @public
- */
+/** @public */
 export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
   /**

package/src/theme/{_constants.ts → v3/_constants.ts}

@@ -2,13 +2,16 @@
 export const AVATAR_SIZE = [0, 1, 2, 3] as const
 
 /** @public */
-export const CONTAINER = [0, 1, 2, 3, 4, 5] as const
+export const CONTAINER_SCALE = [0, 1, 2, 3, 4, 5] as const
 
 /** @public */
-export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const
+export const CONTAINER = [...CONTAINER_SCALE, 'auto'] as const
 
 /** @public */
-export const SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+export const RADIUS = [0, 1, 2, 3, 4, 5, 6] as const
+
+/** @public */
+export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
 
 /** @public */
 export const FONT_CODE_SIZE = [0, 1, 2, 3, 4] as const

package/src/theme/v3/{color/parseColor.ts → _parseColorToken.ts}

@@ -1,31 +1,45 @@
-import {Hue, HUES, Tint, TINTS} from '../../palette'
+import type {ColorToken} from './color'
+import {type Hue, HUES, type Tint, TINTS} from './palette'
 
 const RE_PERCENTAGE = /^([0-9]+)%/
 const RE_OPACITY = /^(1|0\.[0-9]+)?/
 
-export interface TokenizeColorResult {
-  color: {type: 'black' | 'white'} | {type: 'hue'; hue: Hue | undefined; tint: Tint | undefined}
-  opacity: number | undefined
-  mix: number | undefined
+/** @internal */
+export interface ColorNode {
+  type: 'color'
+  name: 'black' | 'white'
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
 }
 
-export function parseColor(str: string): TokenizeColorResult {
-  let cursor = 0
+/** @internal */
+export interface ColorTintNode {
+  type: 'tint'
+  hue: Hue
+  tint: Tint
+  /** Between 0 and 1 */
+  opacity: number
+  /** Between 0 and 1 */
+  mix: number
+}
 
-  const color = getColor()
+/** @internal */
+export interface ColorInheritNode {
+  type: 'inherit'
+}
 
-  if (!color) {
-    throw new Error(`Invalid color: ${str}`)
-  }
+/** @internal */
+export type TokenizeColorResult = ColorNode | ColorTintNode | ColorInheritNode
 
-  const opacity = getOpacity()
-  const mix = getMixPercentage()
+/** @internal */
+export function _parseColorToken(str: ColorToken, options: {defaultHue: Hue}): TokenizeColorResult {
+  const {defaultHue} = options
 
-  return {
-    color,
-    mix,
-    opacity,
-  }
+  let cursor = 0
+
+  return parseColorNode()
 
   function _consume(s: string) {
     if (str.startsWith(s, cursor)) {
@@ -41,14 +55,17 @@ export function parseColor(str: string): TokenizeColorResult {
     return str[cursor]
   }
 
-  function getColor(): TokenizeColorResult['color'] | undefined {
+  function parseColorNode(): ColorNode | ColorTintNode | ColorInheritNode {
     ignoreWhitespace()
 
     let v = _consume('black') || _consume('white')
 
     if (v) {
       return {
-        type: v as 'black' | 'white',
+        type: 'color',
+        name: v as 'black' | 'white',
+        opacity: parseOpacity() ?? 1,
+        mix: parseMix() ?? 1,
       }
     }
 
@@ -56,45 +73,52 @@ export function parseColor(str: string): TokenizeColorResult {
       v = _consume(String(hue))
 
       if (v) {
-        if (_peek() !== '/') {
-          throw new Error(`Expected slash after hue`)
+        if (_peek() !== '-') {
+          throw new Error(`Expected "-" after hue key`)
         }
 
         cursor += 1
 
-        const tint = getTint()
+        const tint = parseTint()
 
         if (!tint) {
           throw new Error(`Expected tint after hue`)
         }
 
         return {
-          type: 'hue',
+          type: 'tint',
           hue,
           tint,
+          opacity: parseOpacity() ?? 1,
+          mix: parseMix() ?? 1,
         }
       }
     }
 
-    const tint = getTint()
+    const tint = parseTint()
 
     if (tint) {
       return {
-        type: 'hue',
-        hue: undefined,
+        type: 'tint',
+        hue: defaultHue,
         tint,
+        opacity: parseOpacity() ?? 1,
+        mix: parseMix() ?? 1,
       }
     }
 
-    return undefined
+    if (str === 'inherit') {
+      return {
+        type: 'inherit',
+      }
+    }
+
+    throw new Error(`Invalid color: ${str}`)
   }
 
-  function getTint() {
+  function parseTint() {
     ignoreWhitespace()
 
-    // if (_peek() === '/') {
-    //   cursor += 1
-
     let v = Number(str.slice(cursor, cursor + 3)) as Tint
 
     if (TINTS.includes(v)) {
@@ -111,21 +135,10 @@ export function parseColor(str: string): TokenizeColorResult {
       return v
     }
 
-    // for (const tint of COLOR_TINTS) {
-    //   const v = _consume(String(tint))
-
-    //   if (v) {
-    //     return tint
-    //   }
-    // }
-
-    //   cursor -= 1
-    // }
-
     return undefined
   }
 
-  function getMixPercentage() {
+  function parseMix() {
     ignoreWhitespace()
 
     const match = RE_PERCENTAGE.exec(str.slice(cursor))
@@ -133,13 +146,13 @@ export function parseColor(str: string): TokenizeColorResult {
     if (match) {
       cursor += match[0].length
 
-      return parseFloat(match[1])
+      return parseFloat(match[1]) / 100
     }
 
     return undefined
   }
 
-  function getOpacity() {
+  function parseOpacity() {
     ignoreWhitespace()
 
     if (_peek() === '/') {

package/src/theme/v3/buildTheme_v3.ts

@@ -1,10 +1,12 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {defaultThemeFonts} from '../defaults/fonts'
-import {buildColor_v3} from './color/buildColor_v3'
-import {defaultPalette, defaultTokens} from './defaults'
+import {black, hues, white} from '@sanity/color'
+
+import {defaultThemeConfig} from '../v2/defaults/config'
+import {defaultThemeFonts} from './defaultFonts'
+import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
-import {Theme_v3, ThemeOptions} from './types'
+import type {Radius, Space, Theme_v3, ThemeOptions} from './types'
 
+/** @public */
 export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
   const {v2} = options ?? {}
 
@@ -12,19 +14,21 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   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),
+    color: tokens.color,
     container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
+    font: defaultThemeFonts,
     input: v2?.input ?? defaultThemeConfig.input,
     layer: v2?.layer ?? defaultThemeConfig.layer,
     media: v2?.media ?? defaultThemeConfig.media,
-    radius: v2?.radius ?? defaultThemeConfig.radius,
+    palette: {black, white, hues},
+    // TODO
+    radius: (v2?.radius ?? defaultThemeConfig.radius) as unknown as Record<Radius, number>,
     shadow: v2?.shadow ?? defaultThemeConfig.shadow,
-    space: v2?.space ?? defaultThemeConfig.space,
+    // TODO
+    space: (v2?.space ?? defaultThemeConfig.space) as unknown as Record<Space, number>,
   }
 }

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

@@ -0,0 +1,15 @@
+/** @public */
+export const COLOR_VARIANTS = ['tinted', 'solid'] as const
+
+/** @public */
+export const AVATAR_COLORS = [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const

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

@@ -0,0 +1,14 @@
+import type {AVATAR_COLORS} from './_constants'
+import type {ColorValue} from './token'
+
+/** @public */
+export type AvatarColor = (typeof AVATAR_COLORS)[number]
+
+/** @public */
+export interface ThemeColorAvatarHue_v3 {
+  bg: ColorValue
+  fg: ColorValue
+}
+
+/** @public */
+export type ThemeColorAvatar_v3 = Record<AvatarColor, ThemeColorAvatarHue_v3>

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

@@ -1,7 +1,7 @@
-import {Hue} from '../../palette'
-import {ThemeColorStateToneKey} from '../../v2'
-import {ElementColorTokens} from './element'
-import {ColorToken} from './token'
+import type {ThemeColorStateToneKey} from '../../v2'
+import type {Hue} from '../palette'
+import type {ElementColorTokens} from './element'
+import type {ColorValue} from './token'
 
 /** @public */
 export interface CardColorTokens {
@@ -10,107 +10,70 @@ export interface CardColorTokens {
     Hue,
     {
       _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
+      bg: ColorValue
+      fg: ColorValue
     }
   >
-  backdrop: [ColorToken, ColorToken]
-  focusRing: [ColorToken, ColorToken]
+  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: [ColorToken, ColorToken]
+    fg: ColorValue
   }
   shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
+    outline: ColorValue
+    umbra: ColorValue
+    penumbra: ColorValue
+    ambient: ColorValue
   }
   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]
+    from: ColorValue
+    to: ColorValue
   }
+
   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
-// }