@sanity/ui 1.8.3 → 2.0.0-alpha.10

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 {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/lib/theme/color/_generic/index.ts

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

package/src/theme/lib/theme/color/_generic/types.ts

@@ -1,29 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorGenericState {
-  bg: string
-  /**
-   * @beta
-   */
-  bg2?: string
-  border: string
-  fg: string
-  muted: {
-    fg: string
-  }
-  accent: {
-    fg: string
-  }
-  link: {
-    fg: string
-  }
-  code: {
-    bg: string
-    fg: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}

package/src/theme/lib/theme/color/base/index.ts

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

package/src/theme/lib/theme/color/base/types.ts

@@ -1,19 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorBase {
-  bg: string
-  fg: string
-  border: string
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}

package/src/theme/lib/theme/color/button/createButtonModes.ts

@@ -1,20 +0,0 @@
-import {ThemeColorBase} from '../base'
-import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {createButtonTones} from './createButtonTones'
-import {ThemeColorButton} from './types'
-
-export function createButtonModes(
-  opts: ThemeColorBuilderOpts,
-  base: ThemeColorBase,
-  dark: boolean,
-  solid: ThemeColorSolid,
-  muted: ThemeColorMuted,
-): ThemeColorButton {
-  return {
-    default: createButtonTones(opts, base, dark, solid, muted, 'default'),
-    ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
-    bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),
-  }
-}

package/src/theme/lib/theme/color/button/createButtonTones.ts

@@ -1,52 +0,0 @@
-import {ThemeColorBase} from '../base'
-import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorButtonModeKey, ThemeColorButtonTones} from './types'
-
-export function createButtonTones(
-  opts: ThemeColorBuilderOpts,
-  base: ThemeColorBase,
-  dark: boolean,
-  solid: ThemeColorSolid,
-  muted: ThemeColorMuted,
-  mode: ThemeColorButtonModeKey,
-): ThemeColorButtonTones {
-  return {
-    default: opts.button({
-      base,
-      dark,
-      solid: solid.default,
-      muted: muted.default,
-      mode,
-    }),
-    primary: opts.button({
-      base,
-      dark,
-      solid: solid.primary,
-      muted: muted.primary,
-      mode,
-    }),
-    positive: opts.button({
-      base,
-      dark,
-      solid: solid.positive,
-      muted: muted.positive,
-      mode,
-    }),
-    caution: opts.button({
-      base,
-      dark,
-      solid: solid.caution,
-      muted: muted.caution,
-      mode,
-    }),
-    critical: opts.button({
-      base,
-      dark,
-      solid: solid.critical,
-      muted: muted.critical,
-      mode,
-    }),
-  }
-}

package/src/theme/lib/theme/color/button/index.ts

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

package/src/theme/lib/theme/color/button/types.ts

@@ -1,44 +0,0 @@
-import {ThemeColorGenericState} from '../_generic'
-
-/**
- * @public
- */
-export type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
-
-/**
- * @deprecated Use `ThemeColorGenericState` instead.
- * @public
- */
-export type ThemeColorButtonState = ThemeColorGenericState
-
-/**
- * @public
- */
-export interface ThemeColorButtonStates {
-  enabled: ThemeColorButtonState
-  hovered: ThemeColorButtonState
-  pressed: ThemeColorButtonState
-  selected: ThemeColorButtonState
-  disabled: ThemeColorButtonState
-}
-
-/**
- * TODO: Rename to `ThemeColorButtonMode`.
- * @public
- */
-export interface ThemeColorButtonTones {
-  default: ThemeColorButtonStates
-  primary: ThemeColorButtonStates
-  positive: ThemeColorButtonStates
-  caution: ThemeColorButtonStates
-  critical: ThemeColorButtonStates
-}
-
-/**
- * @public
- */
-export interface ThemeColorButton {
-  default: ThemeColorButtonTones
-  ghost: ThemeColorButtonTones
-  bleed: ThemeColorButtonTones
-}

package/src/theme/lib/theme/color/card/createCardStates.ts

@@ -1,58 +0,0 @@
-import {ThemeColorBase} from '../base'
-import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorName} from '../types'
-import {ThemeColorCard} from './types'
-
-export function createCardStates(
-  opts: ThemeColorBuilderOpts,
-  base: ThemeColorBase,
-  dark: boolean,
-  name: ThemeColorName,
-  solid: ThemeColorSolid,
-  muted: ThemeColorMuted,
-): ThemeColorCard {
-  return {
-    enabled: opts.card({
-      base,
-      dark,
-      name,
-      state: 'enabled',
-      solid,
-      muted,
-    }),
-    disabled: opts.card({
-      base,
-      dark,
-      name,
-      state: 'disabled',
-      solid,
-      muted,
-    }),
-    hovered: opts.card({
-      base,
-      dark,
-      name,
-      state: 'hovered',
-      solid,
-      muted,
-    }),
-    pressed: opts.card({
-      base,
-      dark,
-      name,
-      state: 'pressed',
-      solid,
-      muted,
-    }),
-    selected: opts.card({
-      base,
-      dark,
-      name,
-      state: 'selected',
-      solid,
-      muted,
-    }),
-  }
-}

package/src/theme/lib/theme/color/card/index.ts

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

package/src/theme/lib/theme/color/card/types.ts

@@ -1,18 +0,0 @@
-import {ThemeColorGenericState} from '../_generic'
-
-/**
- * @deprecated Use `ThemeColorGenericState` instead.
- * @public
- */
-export type ThemeColorCardState = ThemeColorGenericState
-
-/**
- * @public
- */
-export interface ThemeColorCard {
-  enabled: ThemeColorCardState
-  hovered: ThemeColorCardState
-  pressed: ThemeColorCardState
-  selected: ThemeColorCardState
-  disabled: ThemeColorCardState
-}