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

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>()
 

package/src/theme/versioning/v3_v2.ts

@@ -1,10 +1,10 @@
-// import {vars} from '@sanity/ui/css'
-
-import {RootTheme_v2} from '../v2'
-import {Theme_v3} from '../v3'
+import type {RootTheme_v2} from '../v2'
+import type {Theme_v3} from '../v3'
 import {themeColor_v3_v2} from './themeColor_v3_v2'
 
 export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
+  const palette = theme_v3.palette
+
   return {
     _version: 2,
     avatar: theme_v3.avatar,
@@ -13,96 +13,97 @@ export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
     color: {
       dark: {
         transparent: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.transparent,
+          color: theme_v3.color.transparent,
           dark: true,
-          // vars: vars.color.dark.transparent,
+          palette,
         }),
         default: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.default,
+          color: theme_v3.color.default,
           dark: true,
-          // vars: vars.color.dark.default,
+          palette,
         }),
         neutral: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.neutral,
+          color: theme_v3.color.neutral,
           dark: true,
-          // vars: vars.color.dark.neutral,
+          palette,
         }),
         primary: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.primary,
+          color: theme_v3.color.primary,
           dark: true,
-          // vars: vars.color.dark.primary,
+          palette,
         }),
         suggest: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.suggest,
+          color: theme_v3.color.suggest,
           dark: true,
-          // vars: vars.color.dark.suggest,
+          palette,
         }),
         positive: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.positive,
+          color: theme_v3.color.positive,
           dark: true,
-          // vars: vars.color.dark.positive,
+          palette,
         }),
         caution: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.caution,
+          color: theme_v3.color.caution,
           dark: true,
-          // vars: vars.color.dark.caution,
+          palette,
         }),
         critical: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.critical,
+          color: theme_v3.color.critical,
           dark: true,
-          // vars: vars.color.dark.critical,
+          palette,
         }),
       },
       light: {
         transparent: themeColor_v3_v2({
-          color: theme_v3.color.light.card.transparent,
+          color: theme_v3.color.transparent,
           dark: false,
-          // vars: vars.color.light.transparent,
+          palette,
         }),
         default: themeColor_v3_v2({
-          color: theme_v3.color.light.card.default,
+          color: theme_v3.color.default,
           dark: false,
-          // vars: vars.color.light.default,
+          palette,
         }),
         neutral: themeColor_v3_v2({
-          color: theme_v3.color.light.card.neutral,
+          color: theme_v3.color.neutral,
           dark: false,
-          // vars: vars.color.light.neutral,
+          palette,
         }),
         primary: themeColor_v3_v2({
-          color: theme_v3.color.light.card.primary,
+          color: theme_v3.color.primary,
           dark: false,
-          // vars: vars.color.light.primary,
+          palette,
         }),
         suggest: themeColor_v3_v2({
-          color: theme_v3.color.light.card.suggest,
+          color: theme_v3.color.suggest,
           dark: false,
-          // vars: vars.color.light.suggest,
+          palette,
         }),
         positive: themeColor_v3_v2({
-          color: theme_v3.color.light.card.positive,
+          color: theme_v3.color.positive,
           dark: false,
-          // vars: vars.color.light.positive,
+          palette,
         }),
         caution: themeColor_v3_v2({
-          color: theme_v3.color.light.card.caution,
+          color: theme_v3.color.caution,
           dark: false,
-          // vars: vars.color.light.caution,
+          palette,
         }),
         critical: themeColor_v3_v2({
-          color: theme_v3.color.light.card.critical,
+          color: theme_v3.color.critical,
           dark: false,
-          // vars: vars.color.light.critical,
+          palette,
         }),
       },
     },
     container: theme_v3.container,
+    // @ts-expect-error TODO: fix this
     font: theme_v3.font,
     input: theme_v3.input,
     layer: theme_v3.layer,
     media: theme_v3.media,
-    radius: theme_v3.radius,
+    radius: Object.values(theme_v3.radius),
     shadow: theme_v3.shadow,
-    space: theme_v3.space,
+    space: Object.values(theme_v3.space),
   }
 }