@sanity/ui 0.37.2 → 0.37.3

package/src/theme/__workshop__/canvas.tsx

@@ -1,395 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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)
-}