@sanity/ui 0.37.3 → 0.37.4

package/src/theme/__workshop__/canvas.tsx

@@ -0,0 +1,395 @@
+import {
+  Box,
+  Card,
+  CardTone,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  ThemeColor,
+  ThemeColorButton,
+  ThemeColorButtonState,
+  ThemeColorButtonStates,
+  ThemeColorButtonTones,
+  ThemeColorMuted,
+  ThemeColorMutedTone,
+  ThemeColorProvider,
+  ThemeColorScheme,
+  ThemeColorSelectable,
+  ThemeColorSelectableStates,
+  ThemeColorSolid,
+  ThemeColorSolidTone,
+  useRootTheme,
+} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import React, {createContext, useContext} from 'react'
+import {ThemeColorCard} from '../lib/theme'
+
+interface Features {
+  light: boolean
+  dark: boolean
+
+  base: boolean
+  button: boolean
+  card: boolean
+  input: boolean
+  muted: boolean
+  selectable: boolean
+  solid: boolean
+  spot: boolean
+}
+
+const defaultFeatures: Features = {
+  light: true,
+  dark: false,
+
+  base: false,
+  button: false,
+  card: false,
+  input: false,
+  muted: true,
+  selectable: false,
+  solid: 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,
+    card: useBoolean('Card', defaultFeatures.card, 'Props') ?? defaultFeatures.card,
+    input: useBoolean('Input', defaultFeatures.input, 'Props') ?? defaultFeatures.input,
+    muted: useBoolean('Muted', defaultFeatures.muted, 'Props') ?? defaultFeatures.muted,
+    selectable:
+      useBoolean('Selectable', defaultFeatures.selectable, 'Props') ?? defaultFeatures.selectable,
+    solid: useBoolean('Solid', defaultFeatures.solid, 'Props') ?? defaultFeatures.solid,
+    spot: useBoolean('Spot', defaultFeatures.spot, 'Props') ?? defaultFeatures.spot,
+  }
+
+  return (
+    <FeaturesContext.Provider value={features}>
+      <Flex>
+        {features.light && (
+          <ThemeColorProvider scheme="light">
+            <ColorScheme scheme={theme.color.light} />
+          </ThemeColorProvider>
+        )}
+
+        {features.dark && (
+          <ThemeColorProvider scheme="dark">
+            <ColorScheme scheme={theme.color.dark} />
+          </ThemeColorProvider>
+        )}
+      </Flex>
+    </FeaturesContext.Provider>
+  )
+}
+
+function ColorScheme(props: {scheme: ThemeColorScheme}) {
+  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: ThemeColor; 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 && (
+          <Stack
+            padding={3}
+            space={2}
+            style={{
+              borderRadius: 3,
+              boxShadow: `inset 0 0 0 1px ${color.base.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.base.skeleton?.from}, ${color.base.skeleton?.to})`,
+              }}
+            />
+          </Stack>
+        )}
+
+        {features.button && <ColorButton color={color.button} />}
+
+        {features.card && <ColorCard color={color.card} />}
+
+        {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.spot.blue, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.purple, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.magenta, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.red, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.yellow, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.green, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.cyan, width: 25, height: 25}} />
+            <Box flex={1} style={{backgroundColor: color.spot.gray, width: 25, height: 25}} />
+          </Flex>
+        )}
+      </Stack>
+    </Card>
+  )
+}
+
+function ColorCard(props: {color: ThemeColorCard}) {
+  const {color} = props
+
+  return (
+    <Box style={{backgroundColor: color.enabled.bg}}>
+      <ColorGenericStates color={color} />
+    </Box>
+  )
+}
+
+function ColorButton(props: {color: ThemeColorButton}) {
+  const {color} = props
+
+  return (
+    <Stack space={3}>
+      <ColorButtonMode color={color.default} />
+      <ColorButtonMode color={color.ghost} />
+      <ColorButtonMode color={color.bleed} />
+    </Stack>
+  )
+}
+
+function ColorButtonMode(props: {color: ThemeColorButtonTones}) {
+  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: ThemeColorButtonStates}) {
+  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 ColorGenericState(props: {color: ThemeColorButtonState}) {
+  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.bg2}}>
+          <Text align="center" size={1} style={{color: 'inherit'}}>
+            bg2
+          </Text>
+        </Box>
+      </Flex>
+
+      <Text align="center" style={{color: 'inherit'}}>
+        Text
+      </Text>
+      <Text align="center" size={1} style={{color: color.muted.fg}}>
+        Muted
+      </Text>
+      <Text align="center" size={1} style={{color: color.link.fg}}>
+        Link
+      </Text>
+      <Text align="center" size={1} style={{color: color.accent.fg}}>
+        Accent
+      </Text>
+      <Text align="center" size={1} style={{color: color.code.fg}}>
+        <span style={{backgroundColor: color.code.bg}}>Code</span>
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
+function ColorMuted(props: {color: ThemeColorMuted}) {
+  const {color} = props
+
+  return (
+    <Stack space={1}>
+      <ColorMutedTone color={color.default} />
+      <ColorMutedTone color={color.primary} />
+      <ColorMutedTone color={color.positive} />
+      <ColorMutedTone color={color.caution} />
+      <ColorMutedTone color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorMutedTone(props: {color: ThemeColorMutedTone}) {
+  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 ColorSolid(props: {color: ThemeColorSolid}) {
+  const {color} = props
+
+  return (
+    <Stack space={1}>
+      <ColorSolidTone color={color.default} />
+      <ColorSolidTone color={color.primary} />
+      <ColorSolidTone color={color.positive} />
+      <ColorSolidTone color={color.caution} />
+      <ColorSolidTone color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorSolidTone(props: {color: ThemeColorSolidTone}) {
+  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 ColorSelectable(props: {color: ThemeColorSelectable}) {
+  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: ThemeColorSelectableStates}) {
+  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/theme/__workshop__/color.tsx

@@ -0,0 +1,65 @@
+import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
+import React from 'react'
+
+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)
+          // .filter((v) => v[0] !== 'dark')
+          .map(([key, value]) => (
+            <ColorGroup key={key} name={key} value={value as any} />
+          ))}
+      </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/theme/__workshop__/index.ts

@@ -0,0 +1,25 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('theme', 'Theme', [
+  {
+    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/theme/__workshop__/layer.tsx

@@ -0,0 +1,78 @@
+import {Box, Button, Container, Dialog, Flex, Popover, Stack, Text, Tooltip} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+
+export default function LayerStory() {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const openDialog = useCallback(() => setDialogOpen(true), [])
+  const closeDialog = useCallback(() => setDialogOpen(false), [])
+
+  return (
+    <Flex padding={[4, 5, 6]}>
+      <Container>
+        {dialogOpen && (
+          <Dialog header="Dialog" id="dialog" onClickOutside={closeDialog} onClose={closeDialog}>
+            <Box padding={4}>
+              <Stack space={[4, 5, 6]}>
+                <Popover
+                  content={
+                    <Box padding={2}>
+                      <Text>Popover content</Text>
+                    </Box>
+                  }
+                  open
+                  portal
+                >
+                  <Text>Popover</Text>
+                </Popover>
+
+                <Flex>
+                  <Tooltip
+                    content={
+                      <Box padding={2}>
+                        <Text>Tooltip content</Text>
+                      </Box>
+                    }
+                    placement="top"
+                    portal
+                  >
+                    <Text size={1}>Tooltip</Text>
+                  </Tooltip>
+                </Flex>
+              </Stack>
+            </Box>
+          </Dialog>
+        )}
+
+        <Stack space={[4, 5, 6]}>
+          <Popover
+            content={
+              <Box padding={2}>
+                <Text>Popover content</Text>
+              </Box>
+            }
+            open
+            portal
+          >
+            <Text>Popover</Text>
+          </Popover>
+
+          <Flex>
+            <Tooltip
+              content={
+                <Box padding={2}>
+                  <Text size={1}>Tooltip content</Text>
+                </Box>
+              }
+              placement="top"
+              portal
+            >
+              <Text>Tooltip</Text>
+            </Tooltip>
+          </Flex>
+
+          <Button onClick={openDialog} text="Open dialog" />
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

package/src/theme/__workshop__/nestedProvider.tsx

@@ -0,0 +1,16 @@
+import {Card, Flex, Text, ThemeProvider} from '@sanity/ui'
+import React from 'react'
+
+export default function NestedProviderStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <ThemeProvider>
+        <Card padding={[3, 4, 5]} radius={3} tone="primary">
+          <Text>
+            This card is wrapped in a nested <code>ThemeProvider</code>
+          </Text>
+        </Card>
+      </ThemeProvider>
+    </Flex>
+  )
+}

package/src/theme/defaults.ts

@@ -0,0 +1,7 @@
+import {ThemeLayer} from './lib/theme/layer'
+
+export const DEFAULT_THEME_LAYER: ThemeLayer = {
+  dialog: {zOffset: 600},
+  popover: {zOffset: 400},
+  tooltip: {zOffset: 200},
+}

package/src/theme/index.ts

@@ -0,0 +1,8 @@
+export * from './lib/color-fns'
+export * from './lib/theme'
+export * from './studioTheme'
+export * from './themeColorProvider'
+export * from './themeProvider'
+export * from './types'
+export * from './useRootTheme'
+export * from './useTheme'

package/src/theme/lib/color-fns/blend/index.ts

@@ -0,0 +1,2 @@
+export * from './multiply'
+export * from './screen'

package/src/theme/lib/color-fns/blend/multiply.ts

@@ -0,0 +1,22 @@
+import {RGB} from '../types'
+
+function multiplyChannel(b: number, s: number) {
+  return b * s
+}
+
+/**
+ * Apply the \`multiply\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
+ * @internal
+ */
+export function multiply(b: RGB, s: RGB): RGB {
+  return {
+    r: Math.round(clamp(multiplyChannel(b.r / 255, s.r / 255) * 255)),
+    g: Math.round(clamp(multiplyChannel(b.g / 255, s.g / 255) * 255)),
+    b: Math.round(clamp(multiplyChannel(b.b / 255, s.b / 255) * 255)),
+  }
+}
+
+function clamp(num: number) {
+  return Math.max(Math.min(num, 255), 0)
+}

package/src/theme/lib/color-fns/blend/screen.ts

@@ -0,0 +1,22 @@
+import {RGB} from '../types'
+
+function screenChannel(b: number, s: number) {
+  return b + s - b * s
+}
+
+/**
+ * Apply the \`screen\` blend mode
+ * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
+ * @internal
+ */
+export function screen(b: RGB, s: RGB): RGB {
+  return {
+    r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
+    g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),
+    b: Math.round(clamp(screenChannel(b.b / 255, s.b / 255) * 255)),
+  }
+}
+
+function clamp(num: number) {
+  return Math.max(Math.min(num, 255), 0)
+}