@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

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

@@ -0,0 +1,350 @@
+import {
+  Box,
+  Card,
+  CardTone,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  ThemeColorProvider,
+  useRootTheme,
+} from '@sanity/ui'
+import {
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
+  ThemeColorButton_v2,
+  ThemeColorCard_v2,
+  ThemeColorScheme_v2,
+  ThemeColorSelectableTone_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+  getContrastRatio,
+  mix,
+  parseColor,
+  rgbToHex,
+} from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
+import {createContext, useContext} from 'react'
+
+interface Features {
+  light: boolean
+  dark: boolean
+
+  base: boolean
+  button: boolean
+  input: boolean
+  selectable: boolean
+  spot: boolean
+}
+
+const defaultFeatures: Features = {
+  light: true,
+  dark: false,
+
+  base: false,
+  button: false,
+  input: false,
+  selectable: false,
+  spot: false,
+}
+
+const FeaturesContext = createContext<Features>(defaultFeatures)
+
+function useFeatures() {
+  return useContext(FeaturesContext)
+}
+
+export default function CanvasStory() {
+  const {theme} = useRootTheme()
+  const features: Features = {
+    ...defaultFeatures,
+    light: useBoolean('Light', defaultFeatures.light, 'Props') ?? defaultFeatures.light,
+    dark: useBoolean('Dark', defaultFeatures.dark, 'Props') ?? defaultFeatures.dark,
+    base: useBoolean('Base', defaultFeatures.base, 'Props') ?? defaultFeatures.base,
+    button: useBoolean('Button', defaultFeatures.button, 'Props') ?? defaultFeatures.button,
+    input: useBoolean('Input', defaultFeatures.input, 'Props') ?? defaultFeatures.input,
+    selectable:
+      useBoolean('Selectable', defaultFeatures.selectable, 'Props') ?? defaultFeatures.selectable,
+    spot: useBoolean('Avatar', defaultFeatures.spot, 'Props') ?? defaultFeatures.spot,
+  }
+
+  return (
+    <FeaturesContext.Provider value={features}>
+      <Flex>
+        {features.light && (
+          <ThemeColorProvider scheme="light">
+            <ColorScheme scheme={theme.v2!.color.light} />
+          </ThemeColorProvider>
+        )}
+
+        {features.dark && (
+          <ThemeColorProvider scheme="dark">
+            <ColorScheme scheme={theme.v2!.color.dark} />
+          </ThemeColorProvider>
+        )}
+      </Flex>
+    </FeaturesContext.Provider>
+  )
+}
+
+function ColorScheme(props: {scheme: ThemeColorScheme_v2}) {
+  const {scheme} = props
+
+  return (
+    <Flex direction="column" flex={1}>
+      <Color color={scheme.default} tone="default" />
+      <Color color={scheme.transparent} tone="transparent" />
+      <Color color={scheme.primary} tone="primary" />
+      <Color color={scheme.positive} tone="positive" />
+      <Color color={scheme.caution} tone="caution" />
+      <Color color={scheme.critical} tone="critical" />
+    </Flex>
+  )
+}
+
+function Color(props: {color: ThemeColorCard_v2; tone: CardTone}) {
+  const {color, tone} = props
+  const features = useFeatures()
+
+  return (
+    <Card padding={[3, 4]} tone={tone}>
+      <Stack
+        space={[3, 4]}
+        // style={{outline: '1px solid #ccc'}}
+      >
+        {features.base && <ColorBase color={color} />}
+
+        {features.button && <ColorButton color={color.button} />}
+
+        {features.input && (
+          <Box padding={2} style={{backgroundColor: color.input.default.enabled.bg}}>
+            <Text style={{color: 'inherit'}}>Input</Text>
+          </Box>
+        )}
+
+        {/* {features.muted && <ColorMuted color={color.muted} />} */}
+
+        {/* @todo: remove use of `muted` here */}
+        {features.selectable && <ColorSelectable color={color.selectable || color.muted} />}
+
+        {/* {features.solid && <ColorSolid color={color.solid} />} */}
+
+        {features.spot && (
+          <Flex gap={1}>
+            <Box flex={1} style={{backgroundColor: color.avatar?.blue.bg, width: 25, height: 25}} />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.purple.bg, width: 25, height: 25}}
+            />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.magenta.bg, width: 25, height: 25}}
+            />
+            <Box flex={1} style={{backgroundColor: color.avatar?.red.bg, width: 25, height: 25}} />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.yellow.bg, width: 25, height: 25}}
+            />
+            <Box
+              flex={1}
+              style={{backgroundColor: color.avatar?.green.bg, width: 25, height: 25}}
+            />
+            <Box flex={1} style={{backgroundColor: color.avatar?.cyan.bg, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.avatar?.gray.bg, width: 25, height: 25}} />
+          </Flex>
+        )}
+      </Stack>
+    </Card>
+  )
+}
+
+function ColorBase(props: {color: ThemeColorCard_v2}) {
+  const {color} = props
+
+  return (
+    <Stack
+      padding={3}
+      space={2}
+      style={{
+        borderRadius: 3,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+      }}
+    >
+      <Text>Text</Text>
+      <Text muted>Muted</Text>
+
+      <Text accent>Accent</Text>
+      <Text>
+        <a href="#">Link</a>
+      </Text>
+      <Text>
+        <code>Code</code>
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
+function ColorButton(props: {color: ThemeColorButton_v2}) {
+  const {color} = props
+
+  return (
+    <Stack space={3}>
+      <ColorButtonMode color={color.default} />
+      <ColorButtonMode color={color.ghost} />
+      <ColorButtonMode color={color.bleed} />
+    </Stack>
+  )
+}
+
+function ColorButtonMode(props: {color: ThemeColorButtonMode_v2}) {
+  const {color} = props
+
+  return (
+    <Stack space={1}>
+      <Grid columns={5} marginBottom={1} gap={1}>
+        <Box>
+          <Text align="center" muted size={1}>
+            Enabled
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Hovered
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Pressed
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Selected
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Disabled
+          </Text>
+        </Box>
+      </Grid>
+      <ColorGenericStates color={color.default} />
+      <ColorGenericStates color={color.primary} />
+      <ColorGenericStates color={color.positive} />
+      <ColorGenericStates color={color.caution} />
+      <ColorGenericStates color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorGenericStates(props: {color: ThemeColorButtonTone_v2}) {
+  const {color} = props
+
+  return (
+    <Grid columns={5} gap={1}>
+      <ColorGenericState color={color.enabled} />
+      <ColorGenericState color={color.hovered} />
+      <ColorGenericState color={color.pressed} />
+      <ColorGenericState color={color.selected} />
+      <ColorGenericState color={color.disabled} />
+    </Grid>
+  )
+}
+
+function _contrast(baseBg: string, bg: string, fg: string) {
+  const baseBgRgb = parseColor(baseBg)
+  let bgRgb = parseColor(bg)
+
+  if (typeof bgRgb.a === 'number') {
+    bgRgb = mix(baseBgRgb, bgRgb, bgRgb.a)
+  }
+
+  return getContrastRatio(rgbToHex(bgRgb), fg)
+}
+
+function ColorGenericState(props: {color: ThemeColorState_v2}) {
+  const {color} = props
+
+  return (
+    <Stack
+      padding={2}
+      space={2}
+      style={{
+        backgroundColor: color.bg,
+        color: color.fg,
+        border: `1px solid ${color.border}`,
+        borderRadius: 3,
+      }}
+    >
+      <Flex style={{border: `1px solid ${color.border}`}}>
+        <Box flex={1} padding={3} style={{backgroundColor: color.bg}}>
+          <Text align="center" size={1} style={{color: 'inherit'}}>
+            bg
+          </Text>
+        </Box>
+        <Box flex={1} padding={3} style={{backgroundColor: color.muted.bg}}>
+          <Text align="center" size={1} style={{color: 'inherit'}}>
+            bg2
+          </Text>
+        </Box>
+      </Flex>
+
+      <Text align="center" size={1} style={{color: 'inherit'}}>
+        Text &ndash; {_contrast(color.bg, color.bg, color.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.muted.fg}}>
+        Muted &ndash; {_contrast(color.bg, color.bg, color.muted.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.link.fg}}>
+        Link &ndash; {_contrast(color.bg, color.bg, color.link.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.accent.fg}}>
+        Accent &ndash; {_contrast(color.bg, color.bg, color.accent.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.code.fg}}>
+        <span style={{backgroundColor: color.code.bg}}>Code</span> &ndash;{' '}
+        {_contrast(color.bg, color.code.bg, color.code.fg).toFixed(2)}
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
+function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
+  const {color} = props
+
+  return (
+    <Stack space={1}>
+      <ColorSelectableTone color={color.default} />
+      <ColorSelectableTone color={color.primary} />
+      <ColorSelectableTone color={color.positive} />
+      <ColorSelectableTone color={color.caution} />
+      <ColorSelectableTone color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorSelectableTone(props: {color: ThemeColorSelectableTone_v2}) {
+  const {color} = props
+
+  return (
+    <Grid columns={5} gap={1}>
+      <ColorGenericState color={color.enabled} />
+      <ColorGenericState color={color.hovered} />
+      <ColorGenericState color={color.pressed} />
+      <ColorGenericState color={color.selected} />
+      <ColorGenericState color={color.disabled} />
+    </Grid>
+  )
+}

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

@@ -0,0 +1,62 @@
+import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
+
+export default function ColorStory() {
+  const {theme} = useRootTheme()
+
+  if (!theme.color) {
+    return null
+  }
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Tree space={1}>
+        {Object.entries(theme.color).map(([key, value]) => (
+          <ColorGroup key={key} name={key} value={value} />
+        ))}
+      </Tree>
+    </Box>
+  )
+}
+
+function ColorGroup({name, value}: {name: string; value: Record<string, unknown>}) {
+  const entries = Object.entries(value)
+
+  return (
+    <TreeItem fontSize={1} padding={2} text={name}>
+      {entries.map(([key, value]) => {
+        if (value && typeof value === 'object') {
+          return <ColorGroup key={key} name={key} value={value as Record<string, unknown>} />
+        }
+
+        if (typeof value !== 'string') {
+          return null
+        }
+
+        return <ColorPreview key={key} name={key} value={value} />
+      })}
+    </TreeItem>
+  )
+}
+
+function ColorPreview({name, value}: {name: string; value: string}) {
+  const text = (
+    <>
+      <Card
+        radius={2}
+        style={{
+          backgroundColor: value,
+          boxShadow: 'inset 0 0 0 1px var(--card-shadow-outline-color)',
+          display: 'inline-block',
+          height: 17,
+          width: 25,
+          margin: '0 8px -6px 0',
+          verticalAlign: 'top',
+        }}
+        tone="inherit"
+      />
+      {name} <code>{value}</code>
+    </>
+  )
+
+  return <TreeItem fontSize={1} padding={2} text={text} />
+}

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

@@ -0,0 +1,39 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'theme',
+  title: 'Theme',
+  stories: [
+    {
+      name: 'debug',
+      title: 'Debug',
+      component: lazy(() => import('./debug/story')),
+    },
+    {
+      name: 'build',
+      title: 'Build theme',
+      component: lazy(() => import('./build/story')),
+    },
+    {
+      name: 'canvas',
+      title: 'Canvas',
+      component: lazy(() => import('./canvas')),
+    },
+    {
+      name: 'nested-provider',
+      title: 'Nested provider',
+      component: lazy(() => import('./nestedProvider')),
+    },
+    {
+      name: 'layer',
+      title: 'Layer',
+      component: lazy(() => import('./layer')),
+    },
+    {
+      name: 'color',
+      title: 'Color',
+      component: lazy(() => import('./color')),
+    },
+  ],
+})

package/src/core/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './themeColorProvider'
+export * from './themeProvider'
+export * from './useRootTheme'
+export * from './useTheme'
+export * from './types'

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

@@ -0,0 +1,73 @@
+/** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {buildTheme} from '@sanity/ui/theme'
+import {render} from '../../../test'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+import {useRootTheme} from './useRootTheme'
+
+describe('theme', () => {
+  describe('useRootTheme', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootTheme = useRootTheme()
+
+        log(rootTheme)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ThemeContextValue = {
+          version: 0.0,
+          scheme: 'light',
+          theme: buildTheme(),
+          tone: 'default',
+        }
+
+        return (
+          <ThemeContext.Provider value={value}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].scheme).toBe('light')
+      expect(log.mock.calls[0][0].tone).toBe('default')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useRootTheme()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ThemeContext.Provider value={value as any}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
+    })
+  })
+})