@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

package/src/core/theme/__workshop__/debug/story.tsx

@@ -0,0 +1,196 @@
+import {CropIcon} from '@sanity/icons'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorCard_v2,
+  ThemeColorScheme_v2,
+  ThemeColorState_v2,
+} from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
+import {CSSProperties} from 'react'
+import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
+import {useRootTheme} from '../../useRootTheme'
+
+export default function DebugStory() {
+  const {color} = useRootTheme().theme.v2!
+
+  return (
+    <Flex>
+      {THEME_COLOR_SCHEMES.map((scheme) => (
+        <DebugScheme key={scheme} scheme={color[scheme]} />
+      ))}
+    </Flex>
+  )
+}
+
+function DebugScheme(props: {scheme: ThemeColorScheme_v2}) {
+  const {scheme} = props
+
+  const button = useBoolean('Button', false, 'Props') || false
+  const selectable = useBoolean('Selectable', false, 'Props') || false
+
+  return (
+    <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
+      {THEME_COLOR_CARD_TONES.map((tone) => (
+        <DebugCard card={scheme[tone]} features={{button, selectable}} key={tone} />
+      ))}
+    </Box>
+  )
+}
+
+function DebugCard(props: {
+  card: ThemeColorCard_v2
+  features: {button: boolean; selectable: boolean}
+}) {
+  const {card, features} = props
+
+  // card.avatar
+  // card.backdrop
+  // card.badge
+  // card.button
+  // card.focusRing
+  // card.icon
+  // card.input
+  // card.kbd
+  // card.link
+  // card.selectable
+  // card.shadow
+  // card.skeleton
+  // card.syntax
+
+  return (
+    <Box style={getStateVars(card)}>
+      <DebugState />
+
+      {features.button && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_BUTTON_MODES.map((mode) => (
+            <Stack key={mode} space={1}>
+              {THEME_COLOR_STATE_TONES.map((stateTone) => (
+                <Flex key={stateTone} gap={1}>
+                  {/* {mode} */}
+                  {THEME_COLOR_STATES.map((state) => (
+                    <Box
+                      flex={1}
+                      key={state}
+                      style={getStateVars(card.button[mode][stateTone][state])}
+                    >
+                      <DebugState />
+                    </Box>
+                  ))}
+                </Flex>
+              ))}
+            </Stack>
+          ))}
+        </Stack>
+      )}
+
+      {features.selectable && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_STATE_TONES.map((stateTone) => (
+            <Flex key={stateTone} gap={1}>
+              {/* {mode} */}
+              {THEME_COLOR_STATES.map((state) => (
+                <Box flex={1} key={state} style={getStateVars(card.selectable[stateTone][state])}>
+                  <DebugState />
+                </Box>
+              ))}
+            </Flex>
+          ))}
+        </Stack>
+      )}
+    </Box>
+  )
+}
+
+function DebugState() {
+  return (
+    <Stack
+      overflow="auto"
+      padding={4}
+      space={3}
+      style={{border: '1px solid var(--card-border-color)'}}
+    >
+      <Flex gap={3}>
+        <Text size={1}>Text</Text>
+        <Text size={1}>
+          <CropIcon />
+        </Text>
+      </Flex>
+      <Text muted size={1}>
+        Muted
+      </Text>
+      <Text accent size={1}>
+        Accent
+      </Text>
+      <Text size={1}>
+        <code>Code</code>
+      </Text>
+      <div>
+        <KBD>Cmd</KBD>
+      </div>
+      <Flex gap={1}>
+        {THEME_COLOR_STATE_TONES.map((stateTone) => (
+          <Box flex="none" key={stateTone}>
+            <Badge tone={stateTone}>{stateTone}</Badge>
+          </Box>
+        ))}
+      </Flex>
+      <div style={{borderBottom: '1px solid var(--card-border-color)'}} />
+    </Stack>
+  )
+}
+
+function getStateVars(state: ThemeColorState_v2) {
+  return {
+    '--card-accent-fg-color': state.accent.fg,
+
+    '--card-code-bg-color': state.code.bg,
+    '--card-code-fg-color': state.code.fg,
+
+    '--card-bg-color': state.bg,
+
+    '--card-border-color': state.border,
+
+    '--card-fg-color': state.fg,
+
+    '--card-icon-color': state.icon,
+
+    '--card-muted-fg-color': state.muted.fg,
+
+    '--card-kbd-bg-color': state.kbd.bg,
+    '--card-kbd-border-color': state.kbd.border,
+    '--card-kbd-fg-color': state.kbd.fg,
+
+    '--card-badge-default-bg-color': state.badge.default.bg,
+    '--card-badge-default-dot-color': state.badge.default.dot,
+    '--card-badge-default-fg-color': state.badge.default.fg,
+    '--card-badge-default-icon-color': state.badge.default.icon,
+
+    '--card-badge-primary-bg-color': state.badge.primary.bg,
+    '--card-badge-primary-dot-color': state.badge.primary.dot,
+    '--card-badge-primary-fg-color': state.badge.primary.fg,
+    '--card-badge-primary-icon-color': state.badge.primary.icon,
+
+    '--card-badge-positive-bg-color': state.badge.positive.bg,
+    '--card-badge-positive-dot-color': state.badge.positive.dot,
+    '--card-badge-positive-fg-color': state.badge.positive.fg,
+    '--card-badge-positive-icon-color': state.badge.positive.icon,
+
+    '--card-badge-caution-bg-color': state.badge.caution.bg,
+    '--card-badge-caution-dot-color': state.badge.caution.dot,
+    '--card-badge-caution-fg-color': state.badge.caution.fg,
+    '--card-badge-caution-icon-color': state.badge.caution.icon,
+
+    '--card-badge-critical-bg-color': state.badge.critical.bg,
+    '--card-badge-critical-dot-color': state.badge.critical.dot,
+    '--card-badge-critical-fg-color': state.badge.critical.fg,
+    '--card-badge-critical-icon-color': state.badge.critical.icon,
+
+    backgroundColor: 'var(--card-bg-color)',
+    color: 'var(--card-fg-color)',
+  } as CSSProperties
+}

package/src/core/theme/__workshop__/index.ts

@@ -5,6 +5,11 @@ export default defineScope({
   name: 'theme',
   title: 'Theme',
   stories: [
+    {
+      name: 'debug',
+      title: 'Debug',
+      component: lazy(() => import('./debug/story')),
+    },
     {
       name: 'build',
       title: 'Build theme',

package/src/core/theme/theme.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {defaultTheme} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
@@ -24,7 +24,7 @@ describe('theme', () => {
         const value: ThemeContextValue = {
           version: 0.0,
           scheme: 'light',
-          theme: defaultTheme,
+          theme: buildTheme(),
           tone: 'default',
         }
 

package/src/core/types/button.ts

@@ -1,5 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {ThemeColorButtonModeKey} from '../_compat'
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public

package/src/core/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export function ConditionalWrapper({
   children,
   condition,

package/src/core/utils/conditionalWrapper/index.ts

@@ -0,0 +1 @@
+export * from './conditionalWrapper'

package/src/core/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './arrow'
 export * from './boundaryElement'
+export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'

package/src/theme/build/_deprecated/color/factory.ts

@@ -27,7 +27,7 @@ import {createSpot} from './spot/createSpot'
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `buildColorTheme` instead.
  */
 export interface ThemeColorBuilderOpts {
   base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
@@ -82,13 +82,13 @@ export interface ThemeColorBuilderOpts {
 
 /**
  * @public
- * @deprecated
+ * @deprecated Use `ThemeConfig` instead.
  */
 export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
 
 /**
  * @public
- * @deprecated Use `buildTheme` instead
+ * @deprecated Use `buildColorTheme` instead.
  */
 export function createColorTheme(
   partialOpts: PartialThemeColorBuilderOpts = {},

package/src/theme/build/buildColorTheme.test.ts

@@ -65,7 +65,7 @@ test('buildColorTheme: base', () => {
     light: {
       transparent: {
         bg: 'gray/50',
-        fg: 'gray/600',
+        fg: 'gray/800',
       },
       default: {
         bg: 'white',
@@ -79,7 +79,7 @@ test('buildColorTheme: base', () => {
     dark: {
       transparent: {
         bg: 'black',
-        fg: 'gray/400',
+        fg: 'gray/200',
       },
       default: {
         bg: 'gray/950',

package/src/theme/build/buildColorTheme.ts

@@ -18,11 +18,11 @@ import {
   ThemeColorShadow,
   ThemeColorState_v2,
   ThemeColorButton_v2,
-  ThemeColorButtonTones_v2,
-  ThemeColorButtonStates_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorAvatarHue_v2,
   ThemeColorInput_v2,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
 } from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
@@ -215,16 +215,16 @@ function buildButtonTonesColorTheme(
     mode: ThemeColorButtonModeKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   const {mode, scheme} = options
 
-  const tones: Partial<ThemeColorButtonTones_v2> = {}
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
     tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
   }
 
-  return tones as ThemeColorButtonTones_v2
+  return tones as ThemeColorButtonMode_v2
 }
 
 function buildButtonStatesColorTheme(
@@ -234,16 +234,16 @@ function buildButtonStatesColorTheme(
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   const {mode, scheme, tone} = options
 
-  const states: Partial<ThemeColorButtonStates_v2> = {}
+  const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
     states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
   }
 
-  return states as ThemeColorButtonStates_v2
+  return states as ThemeColorButtonTone_v2
 }
 
 function buildButtonStateColorTheme(
@@ -314,7 +314,7 @@ function buildInputStatesColorTheme(
     tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
-): ThemeColorInputStates_v2 {
+): ThemeColorInputMode_v2 {
   const {mode, scheme, tone} = options
 
   return {
@@ -357,16 +357,16 @@ function buildSelectableColorTheme(
     scheme: ThemeColorSchemeKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   const {scheme} = options
 
-  const tones: Partial<ThemeColorButtonTones_v2> = {}
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
     tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
   }
 
-  return tones as ThemeColorButtonTones_v2
+  return tones as ThemeColorButtonMode_v2
 }
 
 function buildSelectableStatesColorTheme(
@@ -375,16 +375,16 @@ function buildSelectableStatesColorTheme(
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   const {scheme, tone} = options
 
-  const states: Partial<ThemeColorButtonStates_v2> = {}
+  const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
     states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
   }
 
-  return states as ThemeColorButtonStates_v2
+  return states as ThemeColorButtonTone_v2
 }
 
 function buildSelectableStateColorTheme(

package/src/theme/build/colorToken/colorToken.ts

@@ -0,0 +1,19 @@
+import {ThemeColorTokenValue, parseTokenValue} from '../../config'
+import {compileColorTokenValue} from './compileColorToken'
+import {ColorTokenContext} from './types'
+
+const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
+
+export function resolveColorTokenValue(
+  context: ColorTokenContext,
+  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
+): string {
+  const {hue, scheme} = context
+  const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
+
+  if (!node || node.type !== 'color') {
+    throw new Error(`Invalid color token: ${value[0]}`)
+  }
+
+  return compileColorTokenValue({...node, hue: node.hue || hue})
+}

package/src/theme/build/colorToken/compileColorToken.ts

@@ -0,0 +1,21 @@
+import {TokenColorValueNode} from '../../config'
+
+export function compileColorTokenValue(node: TokenColorValueNode): string {
+  let key = ''
+
+  if (node.key === 'black' || node.key === 'white') {
+    key = node.key
+  } else {
+    key = `${node.hue}/${node.tint}`
+  }
+
+  if (node.mix !== undefined) {
+    return `${key} ${node.mix * 100}%`
+  }
+
+  if (node.opacity !== undefined) {
+    key += `/${node.opacity}`
+  }
+
+  return key
+}

package/src/theme/build/colorToken/index.ts

@@ -0,0 +1,2 @@
+export * from './colorToken'
+export * from './types'

package/src/theme/build/colorToken/types.ts

@@ -0,0 +1,6 @@
+import {ColorHueKey} from '@sanity/color'
+
+export interface ColorTokenContext {
+  hue: ColorHueKey
+  scheme: 'light' | 'dark'
+}

package/src/theme/build/renderColorTheme.ts

@@ -5,18 +5,18 @@ import {
   ThemeColorBadgeTone_v2,
   ThemeColorBadge_v2,
   ThemeColorBlendModeKey,
-  ThemeColorButtonStates_v2,
-  ThemeColorButtonTones_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorButton_v2,
   ThemeColorCardToneKey,
   ThemeColorCard_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
-  ThemeColorInputStates_v2,
   ThemeColorInput_v2,
   ThemeColorKBD,
   ThemeColorScheme_v2,
   ThemeColorSchemes_v2,
-  ThemeColorSelectableStates_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
   ThemeColorShadow,
   ThemeColorState_v2,
@@ -278,10 +278,9 @@ function renderThemeColorBadgeColor(
   }
 
   return {
-    // _blend: blendMode,
     bg,
-    fg: renderColorValue(value.fg, colorOptions),
     dot: renderColorValue(value.dot, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
     icon: renderColorValue(value.icon, colorOptions),
   }
 }
@@ -302,13 +301,13 @@ function renderThemeColorButton(
 }
 
 function renderThemeColorButtonTones(
-  value: ThemeColorButtonTones_v2,
+  value: ThemeColorButtonMode_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   return {
     default: renderThemeColorButtonStates(value.default, options),
     primary: renderThemeColorButtonStates(value.primary, options),
@@ -319,13 +318,13 @@ function renderThemeColorButtonTones(
 }
 
 function renderThemeColorButtonStates(
-  value: ThemeColorButtonStates_v2,
+  value: ThemeColorButtonTone_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   return {
     enabled: renderThemeColorState(value.enabled, options),
     hovered: renderThemeColorState(value.hovered, options),
@@ -366,7 +365,7 @@ function renderThemeColorState(
       fg: renderColorValue(value.accent.fg, colorOptions),
     },
     avatar: renderThemeColorAvatar(value.avatar, {baseBg, colorPalette, blendMode}),
-    badge: renderThemeColorBadge(value.badge, {baseBg, colorPalette, blendMode}),
+    badge: renderThemeColorBadge(value.badge, {baseBg: bg, colorPalette, blendMode}),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -409,13 +408,13 @@ function renderThemeColorInput(
 }
 
 function renderInputStatesColorTheme(
-  value: ThemeColorInputStates_v2,
+  value: ThemeColorInputMode_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorInputStates_v2 {
+): ThemeColorInputMode_v2 {
   return {
     enabled: renderInputStateColorTheme(value.enabled, options),
     hovered: renderInputStateColorTheme(value.hovered, options),
@@ -468,13 +467,13 @@ function renderThemeColorSelectable(
 }
 
 function renderThemeColorSelectableStates(
-  value: ThemeColorSelectableStates_v2,
+  value: ThemeColorSelectableTone_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorSelectableStates_v2 {
+): ThemeColorSelectableTone_v2 {
   return {
     enabled: renderThemeColorState(value.enabled, options),
     hovered: renderThemeColorState(value.hovered, options),

package/src/theme/build/renderColorValue.ts

@@ -1,7 +1,7 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
 import {ThemeColorPalette, parseTokenValue} from '../config'
 import {ThemeColorBlendModeKey} from '../system'
-import {rgba} from './lib/color-fns'
+import {hexToRgb, mix, rgbToHex, rgba} from './lib/color-fns'
 import {mixThemeColor} from './mixThemeColor'
 
 export interface RenderColorValueOptions {
@@ -53,9 +53,16 @@ export function renderColorValue(str: string, options: RenderColorValueOptions):
 
   try {
     hex = mixThemeColor(hex, mixOptions)
+
+    if (bg && node.mix !== undefined) {
+      const from = hexToRgb(bg)
+      const to = hexToRgb(hex)
+
+      hex = rgbToHex(mix(from, to, node.mix))
+    }
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.log('could not blend', hex, mixOptions)
+    console.warn('could not blend', hex, mixOptions)
     throw err
   }
 

package/src/theme/config/system.ts

@@ -9,7 +9,7 @@ import {
   ThemeColorBlendModeKey,
 } from '../system'
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_KEYS = [
   '_hue',
   'bg',
@@ -30,7 +30,7 @@ export const COLOR_CONFIG_STATE_KEYS = [
 /** @public */
 export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_KEYS = [
   ...COLOR_CONFIG_STATE_KEYS,
   '_hue',
@@ -47,7 +47,7 @@ export const COLOR_CONFIG_CARD_KEYS = [
 /** @public */
 export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
 
 /** @public */
@@ -63,11 +63,13 @@ export type ColorConfigValue =
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
   | `${ColorHueKey}`
+  | `${ColorHueKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
   | `${ColorTintKey}`
+  | `${ColorTintKey} ${number}%`
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
-  | ThemeColorBlendModeKey
 
 /** @public */
 export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
@@ -75,37 +77,37 @@ export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
 /** @public */
 export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
 
 /** @public */
 export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
 
 /** @public */
 export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
 
 /** @public */
 export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
 
 /** @public */
 export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
 
 /** @public */
 export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
 
 /** @public */