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

package/src/theme/v3/types.ts

@@ -1,9 +1,60 @@
-import {ThemeConfig} from '../config'
-import {PaletteConfig} from '../palette'
-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'
+import type {ColorHues, ColorTint} from '@sanity/color'
+
+import type {
+  ThemeFocusRing,
+  ThemeFontWeight,
+  ThemeFontWeightKey,
+  ThemeLayer,
+  ThemeShadow,
+} from '../v0'
+import type {ThemeAvatar_v2, ThemeConfig, ThemeInput_v2} from '../v2'
+import type {
+  AVATAR_SIZE,
+  CONTAINER,
+  CONTAINER_SCALE,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
+} from './_constants'
+import type {ThemeColor_v3} from './color'
+import type {PartialTokens, Tokens} from './tokens'
+
+/** @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 type ThemeEntry = [`--${string}`, string]
@@ -11,10 +62,43 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
+/** @public */
+export interface ThemePalette_v3 {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
+/** @public */
+export interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
+export interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  scale: ThemeFontSize_v3[]
+}
+
+/** @public */
+export interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
 /**
  * Supersedes `RootTheme` and `RootTheme_v2`.
  *
@@ -22,7 +106,6 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -38,11 +121,13 @@ export interface Theme_v3 {
   color: ThemeColor_v3
   // color: ThemeColorSchemes_v2
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
+  palette: ThemePalette_v3
+  radius: Record<Radius, number>
+  // shadow: Array<ThemeShadow | null>
+  shadow: Record<Shadow, ThemeShadow | undefined>
+  space: Record<Space, number>
 }

package/src/theme/versioning/getTheme_v2.ts

@@ -1,6 +1,6 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {Theme} from '../types'
-import {Theme_v2} from '../v2'
+import type {Theme} from '../types'
+import type {Theme_v2} from '../v2'
+import {defaultThemeConfig} from '../v2/defaults/config'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()

package/src/theme/versioning/is_v0.ts

@@ -1,5 +1,5 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {

package/src/theme/versioning/is_v2.ts

@@ -1,5 +1,5 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   ThemeColor,
   ThemeColorGenericState,
   ThemeColorInputState,
   ThemeColorInputStates,
   ThemeColorMuted,
 } from '../v0'
-import {
+import type {
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -1,4 +1,4 @@
-import {ThemeColorCard_v2} from '../v2'
+import type {ThemeColorCard_v2} from '../v2'
 
 /**
  * Apply `neutral` and `suggest` if they're not already part of the color object,

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -4,43 +4,80 @@ import {
   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,
+  type ThemeColorBadge_v2,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorInput_v2,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputState_v2,
+  type ThemeColorSelectable_v2,
+  type ThemeColorSelectableTone_v2,
+  type ThemeColorState_v2,
+  type ThemeColorStateKey,
+  type ThemeColorStateToneKey,
 } from '../v2'
-import {ThemeColorCard_v3, ThemeColorElement, ThemeColorVariantKey} from '../v3'
+import {
+  _parseColorToken,
+  type ColorToken,
+  type ColorValue,
+  type Hue,
+  type ThemeColorCard_v3,
+  type ThemeColorElement,
+  type ThemeColorVariantKey,
+  type ThemePalette_v3,
+} from '../v3'
+
+function renderColor(colorToken: ColorToken, options: {defaultHue: Hue; palette: ThemePalette_v3}) {
+  const {defaultHue, palette} = options
+
+  const color = _parseColorToken(colorToken, {defaultHue})
+
+  if (color.type === 'color') {
+    return palette[color.name].hex
+  }
+
+  if (color.type === 'tint') {
+    return palette.hues[color.hue][color.tint].hex
+  }
+
+  return '#000'
+}
 
 export function themeColor_v3_v2(options: {
   color: ThemeColorCard_v3
   dark: boolean
+  palette: ThemePalette_v3
 }): ThemeColorCard_v2 {
-  const {color, dark} = options
+  const {color, dark, palette} = options
+
+  const i = dark ? 1 : 0
+
+  const defaultHue = color._hue
+
+  const colorOptions = {defaultHue, palette}
 
   return {
     _blend: 'screen',
     _dark: dark,
     ...buildColorState({
       cardColor: color,
+      dark,
+      palette,
       state: 'enabled',
       tone: 'default',
       variant: 'tinted',
     }),
-    backdrop: color.backdrop,
+
+    backdrop: renderColor(color.backdrop[i], colorOptions),
     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,
+            dark,
+            palette,
             state,
             tone,
             variant: mode === 'default' ? 'solid' : 'tinted',
@@ -58,10 +95,15 @@ export function themeColor_v3_v2(options: {
 
       return modes
     }, {} as ThemeColorButton_v2),
-    focusRing: color.focusRing,
+
+    focusRing: renderColor(color.focusRing[i], colorOptions),
     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)
+        states[state] = buildInputState(color.variant.tinted.default, {
+          dark,
+          defaultHue,
+          palette,
+        })
 
         return states
       }, {} as ThemeColorInputMode_v2)
@@ -72,7 +114,8 @@ export function themeColor_v3_v2(options: {
       tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorSelectableTone_v2>((states, state) => {
         states[state] = buildColorState({
           cardColor: color,
-          // cardVars: vars,
+          dark,
+          palette,
           state,
           tone,
           variant: 'tinted',
@@ -83,8 +126,52 @@ export function themeColor_v3_v2(options: {
 
       return tones
     }, {} as ThemeColorSelectable_v2),
-    shadow: color.shadow,
-    syntax: color.token,
+
+    shadow: {
+      outline: renderColor(color.shadow.outline[i], colorOptions),
+      umbra: renderColor(color.shadow.umbra[i], colorOptions),
+      penumbra: renderColor(color.shadow.penumbra[i], colorOptions),
+      ambient: renderColor(color.shadow.ambient[i], colorOptions),
+    },
+
+    syntax: {
+      atrule: renderColor(color.code.token.atrule[i], colorOptions),
+      attrName: renderColor(color.code.token.attrName[i], colorOptions),
+      attrValue: renderColor(color.code.token.attrValue[i], colorOptions),
+      attribute: renderColor(color.code.token.attribute[i], colorOptions),
+      boolean: renderColor(color.code.token.boolean[i], colorOptions),
+      builtin: renderColor(color.code.token.builtin[i], colorOptions),
+      cdata: renderColor(color.code.token.cdata[i], colorOptions),
+      char: renderColor(color.code.token.char[i], colorOptions),
+      class: renderColor(color.code.token.class[i], colorOptions),
+      className: renderColor(color.code.token.className[i], colorOptions),
+      comment: renderColor(color.code.token.comment[i], colorOptions),
+      constant: renderColor(color.code.token.constant[i], colorOptions),
+      deleted: renderColor(color.code.token.deleted[i], colorOptions),
+      doctype: renderColor(color.code.token.doctype[i], colorOptions),
+      entity: renderColor(color.code.token.entity[i], colorOptions),
+      function: renderColor(color.code.token.function[i], colorOptions),
+      hexcode: renderColor(color.code.token.hexcode[i], colorOptions),
+      id: renderColor(color.code.token.id[i], colorOptions),
+      important: renderColor(color.code.token.important[i], colorOptions),
+      inserted: renderColor(color.code.token.inserted[i], colorOptions),
+      keyword: renderColor(color.code.token.keyword[i], colorOptions),
+      number: renderColor(color.code.token.number[i], colorOptions),
+      operator: renderColor(color.code.token.operator[i], colorOptions),
+      prolog: renderColor(color.code.token.prolog[i], colorOptions),
+      property: renderColor(color.code.token.property[i], colorOptions),
+      pseudoClass: renderColor(color.code.token.pseudoClass[i], colorOptions),
+      pseudoElement: renderColor(color.code.token.pseudoElement[i], colorOptions),
+      punctuation: renderColor(color.code.token.punctuation[i], colorOptions),
+      regex: renderColor(color.code.token.regex[i], colorOptions),
+      selector: renderColor(color.code.token.selector[i], colorOptions),
+      string: renderColor(color.code.token.string[i], colorOptions),
+      symbol: renderColor(color.code.token.symbol[i], colorOptions),
+      tag: renderColor(color.code.token.tag[i], colorOptions),
+      unit: renderColor(color.code.token.unit[i], colorOptions),
+      url: renderColor(color.code.token.url[i], colorOptions),
+      variable: renderColor(color.code.token.variable[i], colorOptions),
+    },
   }
 }
 
@@ -127,80 +214,170 @@ const stateShades: Record<
 
 function mix(
   tokens: {
-    0: string
-    4: string
+    0: ColorValue
+    4: ColorValue
   },
   index: ElementTokenIndex,
+  options: {
+    dark: boolean
+    defaultHue: Hue
+    palette: ThemePalette_v3
+  },
 ) {
+  const {dark, defaultHue, palette} = options
+  const colorOptions = {defaultHue, palette}
+  const i = dark ? 1 : 0
+
+  const from = renderColor(tokens[0][i], colorOptions)
+  const to = renderColor(tokens[4][i], colorOptions)
+
   if (index === 0) {
-    return tokens[0]
+    return from
   }
 
   if (index === 4) {
-    return tokens[4]
+    return to
   }
 
-  return `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`
+  return `color-mix(in oklch, ${from}, ${to} ${index * 25}%)`
 }
 
 function buildColorState(options: {
   cardColor: ThemeColorCard_v3
+  dark: boolean
+  palette: ThemePalette_v3
   state: ThemeColorStateKey
   tone: ThemeColorStateToneKey
   variant: ThemeColorVariantKey
 }): ThemeColorState_v2 {
-  const {cardColor, state, tone, variant} = options
+  const {cardColor, dark, palette, state, tone, variant} = options
   const color = cardColor.variant[variant][tone]
 
   const shades = stateShades[state]
 
+  const defaultHue = cardColor._hue
+  const colorOptions = {defaultHue, palette}
+
+  const i = dark ? 1 : 0
+
+  // cardColor.avatar.blue.bg
+
   return {
     accent: {
-      fg: color.fg[4],
+      fg: renderColor(color.fg[4][i], colorOptions),
     },
-    avatar: cardColor.avatar,
+
+    avatar: {
+      gray: {
+        bg: renderColor(cardColor.avatar.gray.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.gray.fg[i], colorOptions),
+      },
+      blue: {
+        bg: renderColor(cardColor.avatar.blue.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.blue.fg[i], colorOptions),
+      },
+      purple: {
+        bg: renderColor(cardColor.avatar.purple.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.purple.fg[i], colorOptions),
+      },
+      magenta: {
+        bg: renderColor(cardColor.avatar.magenta.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.magenta.fg[i], colorOptions),
+      },
+      red: {
+        bg: renderColor(cardColor.avatar.red.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.red.fg[i], colorOptions),
+      },
+      orange: {
+        bg: renderColor(cardColor.avatar.orange.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.orange.fg[i], colorOptions),
+      },
+      yellow: {
+        bg: renderColor(cardColor.avatar.yellow.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.yellow.fg[i], colorOptions),
+      },
+      green: {
+        bg: renderColor(cardColor.avatar.green.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.green.fg[i], colorOptions),
+      },
+      cyan: {
+        bg: renderColor(cardColor.avatar.cyan.bg[i], colorOptions),
+        fg: renderColor(cardColor.avatar.cyan.fg[i], colorOptions),
+      },
+    },
+
+    // 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),
+        bg: mix(color.bg, 1, {dark, defaultHue, palette}),
+
+        fg: mix(color.fg, 1, {dark, defaultHue, palette}),
+
+        dot: mix(color.fg, 3, {dark, defaultHue, palette}),
+
+        icon: mix(color.fg, 3, {dark, defaultHue, palette}),
       }
 
       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]),
+
+    bg: mix(color.bg, shades.bg[0], {dark, defaultHue, palette}),
+
+    border: mix(color.border, shades.border[0], {dark, defaultHue, palette}),
+
+    fg: mix(color.fg, shades.fg[0], {dark, defaultHue, palette}),
     code: {
-      bg: mix(color.bg, shades.bg[1]),
-      fg: mix(color.fg, shades.fg[2]),
+      bg: mix(color.bg, shades.bg[1], {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     },
-    icon: mix(color.fg, shades.fg[2]),
+
+    icon: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     kbd: {
-      bg: mix(color.bg, 0),
-      fg: mix(color.fg, 0),
-      border: mix(color.bg, 0),
+      bg: mix(color.bg, 0, {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, 0, {dark, defaultHue, palette}),
+
+      border: mix(color.bg, 0, {dark, defaultHue, palette}),
     },
     link: {
-      fg: mix(color.fg, shades.fg[2]),
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
     },
     muted: {
-      bg: mix(color.bg, shades.bg[1]),
-      fg: mix(color.fg, shades.fg[2]),
+      bg: mix(color.bg, shades.bg[1], {dark, defaultHue, palette}),
+
+      fg: mix(color.fg, shades.fg[2], {dark, defaultHue, palette}),
+    },
+
+    skeleton: {
+      from: renderColor(cardColor.skeleton.from[i], colorOptions),
+      to: renderColor(cardColor.skeleton.to[i], colorOptions),
     },
-    skeleton: cardColor.skeleton,
   }
 }
 
-function buildInputState(colorElement: ThemeColorElement): ThemeColorInputState_v2 {
+function buildInputState(
+  colorElement: ThemeColorElement,
+  options: {
+    dark: boolean
+    defaultHue: Hue
+    palette: ThemePalette_v3
+  },
+): ThemeColorInputState_v2 {
+  const {dark, defaultHue, palette} = options
+  const colorOptions = {defaultHue, palette}
+  const i = dark ? 1 : 0
+
   return {
-    bg: colorElement.bg[0],
-    border: colorElement.bg[0],
-    fg: colorElement.fg[0],
+    bg: renderColor(colorElement.bg[0][i], colorOptions),
+
+    border: renderColor(colorElement.bg[0][i], colorOptions),
+
+    fg: renderColor(colorElement.fg[0][i], colorOptions),
     muted: {
-      bg: colorElement.bg[0],
+      bg: renderColor(colorElement.bg[0][i], colorOptions),
     },
-    placeholder: colorElement.fg[0],
+
+    placeholder: renderColor(colorElement.fg[0][i], colorOptions),
   }
 }

package/src/theme/versioning/v0_v2.ts

@@ -1,6 +1,6 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
+import {defaultThemeConfig} from '../v2/defaults/config'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()

package/src/theme/versioning/v2_v0.ts

@@ -1,12 +1,12 @@
-import {RootTheme} from '../types'
-import {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
-import {
+import type {RootTheme} from '../types'
+import type {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
+import type {
   RootTheme_v2,
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
 } from '../v2'
-import {Theme_v3} from '../v3'
+import type {Theme_v3} from '../v3'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()