@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.10

package/src/core/theme/__workshop__/build/Root.tsx

@@ -159,6 +159,7 @@ export const Root = styled.div((props) => {
       --link-fg: var(--card-enabled-link-fg);
       --code-bg: var(--card-enabled-code-bg);
       --code-fg: var(--card-enabled-code-fg);
+      --kbd-bg: var(--card-enabled-kbd-bg);
       --skeleton-from: var(--card-enabled-skeleton-from);
       --skeleton-to: var(--card-enabled-skeleton-to);
 
@@ -322,15 +323,15 @@ export const Root = styled.div((props) => {
       color: var(--icon);
     }
 
-    .muted-fg {
+    .muted {
       color: var(--muted-fg);
     }
 
-    .accent-fg {
+    .accent {
       color: var(--accent-fg);
     }
 
-    .link-fg {
+    .link {
       color: var(--link-fg);
     }
 
@@ -339,6 +340,22 @@ export const Root = styled.div((props) => {
       color: var(--code-fg);
     }
 
+    .kbd {
+      background-color: var(--kbd-bg);
+      color: var(--kbd-fg);
+    }
+
+    .badge {
+      background-color: var(--badge-bg);
+      color: var(--badge-fg);
+    }
+
+    .badge--default {
+      --badge-bg: var(--badge-default-bg);
+      --badge-fg: var(--badge-default-fg);
+      --badge-border: var(--badge-default-border);
+    }
+
     .skeleton-from {
       color: var(--skeleton-from);
     }

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

@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {
-  ThemeColorButtonStates_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorCard_v2,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {
-  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
   ThemeColorCardToneKey,
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
-import {defaultTheme} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
 
-const theme = defaultTheme
+const theme = buildTheme()
 
 export default function BuildStory(): ReactElement {
   return (
@@ -268,7 +268,7 @@ function StatePreview(props: {theme: ThemeColorState_v2}) {
   )
 }
 
-function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
+function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
   const {theme: button} = props
 
   return (
@@ -289,18 +289,24 @@ function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
         <div className="icon" style={{flex: 'none'}}>
           &copy;
         </div>
-        <div className="muted-fg" style={{flex: 'none'}}>
+        <div className="muted" style={{flex: 'none'}}>
           m
         </div>
-        <div className="accent-fg" style={{flex: 'none'}}>
+        <div className="accent" style={{flex: 'none'}}>
           a
         </div>
-        <div className="link-fg" style={{flex: 'none'}}>
+        <div className="link" style={{flex: 'none'}}>
           l
         </div>
         <div className="code" style={{flex: 'none'}}>
           c
         </div>
+        <div className="kbd" style={{flex: 'none'}}>
+          k
+        </div>
+        <div className="badge badge--default" style={{flex: 'none'}}>
+          b
+        </div>
         <div style={{flex: 'none'}}>
           <CheckeredBackground />
         </div>
@@ -424,7 +430,7 @@ function Skeleton() {
   )
 }
 
-function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputStates_v2}) {
+function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
   const {mode, theme: input} = props
 
   return (

package/src/core/theme/__workshop__/canvas.tsx

@@ -10,14 +10,14 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {
-  ThemeColorButtonStates_v2,
-  ThemeColorButtonTones_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorButton_v2,
+  ThemeColorCard_v2,
   ThemeColorScheme_v2,
-  ThemeColorSelectableStates_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
   ThemeColorState_v2,
-  ThemeColorCard_v2,
   getContrastRatio,
   mix,
   parseColor,
@@ -202,7 +202,7 @@ function ColorButton(props: {color: ThemeColorButton_v2}) {
   )
 }
 
-function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
+function ColorButtonMode(props: {color: ThemeColorButtonMode_v2}) {
   const {color} = props
 
   return (
@@ -243,7 +243,7 @@ function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
   )
 }
 
-function ColorGenericStates(props: {color: ThemeColorButtonStates_v2}) {
+function ColorGenericStates(props: {color: ThemeColorButtonTone_v2}) {
   const {color} = props
 
   return (
@@ -335,7 +335,7 @@ function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
   )
 }
 
-function ColorSelectableTone(props: {color: ThemeColorSelectableStates_v2}) {
+function ColorSelectableTone(props: {color: ThemeColorSelectableTone_v2}) {
   const {color} = props
 
   return (

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

@@ -0,0 +1,159 @@
+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 {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
+
+  return (
+    <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
+      {THEME_COLOR_CARD_TONES.map((tone) => (
+        <DebugCard card={scheme[tone]} key={tone} />
+      ))}
+    </Box>
+  )
+}
+
+function DebugCard(props: {card: ThemeColorCard_v2}) {
+  const {card} = 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 />
+      <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 />
+                    {/* {state} */}
+                  </Box>
+                ))}
+              </Flex>
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+function DebugState() {
+  return (
+    <Stack
+      overflow="auto"
+      padding={4}
+      space={3}
+      style={{border: '1px solid var(--card-border-color)'}}
+    >
+      <Text size={1}>Text</Text>
+      <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-bg-color': state.bg,
+    '--card-border-color': state.border,
+    '--card-fg-color': state.fg,
+    '--card-accent-fg-color': state.accent.fg,
+    '--card-muted-fg-color': state.muted.fg,
+    '--card-code-bg-color': state.code.bg,
+    '--card-code-fg-color': state.code.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/avatar.ts

@@ -6,7 +6,7 @@ export type AvatarPosition = 'top' | 'bottom' | 'inside'
 /**
  * @public
  */
-export type AvatarSize = 0 | 1 | 2
+export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public

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.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'
+}