@sanity/ui 2.0.0-alpha.8 → 2.0.0-beta.1

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 {
+  ThemeColorButtonStates_v2,
+  ThemeColorButtonTones_v2,
+  ThemeColorButton_v2,
+  ThemeColorScheme_v2,
+  ThemeColorSelectableStates_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+  ThemeColorCard_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: ThemeColorButtonTones_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: ThemeColorButtonStates_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: ThemeColorSelectableStates_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/{theme → core/theme}/__workshop__/color.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {Box, Card, Tree, TreeItem, cssVars, useRootTheme} from '@sanity/ui'
+import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
 
 export default function ColorStory() {
   const {theme} = useRootTheme()
@@ -11,11 +10,9 @@ export default function ColorStory() {
   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} />
-          ))}
+        {Object.entries(theme.color).map(([key, value]) => (
+          <ColorGroup key={key} name={key} value={value} />
+        ))}
       </Tree>
     </Box>
   )
@@ -48,7 +45,7 @@ function ColorPreview({name, value}: {name: string; value: string}) {
         radius={2}
         style={{
           backgroundColor: value,
-          boxShadow: `inset 0 0 0 1px ${cssVars.default['base-shadow-outline-color']}`,
+          boxShadow: 'inset 0 0 0 1px var(--card-shadow-outline-color)',
           display: 'inline-block',
           height: 17,
           width: 25,

package/src/{theme → core/theme}/__workshop__/index.ts

@@ -5,6 +5,16 @@ export default defineScope({
   name: 'theme',
   title: 'Theme',
   stories: [
+    {
+      name: 'build',
+      title: 'Build theme',
+      component: lazy(() => import('./build/story')),
+    },
+    {
+      name: 'canvas',
+      title: 'Canvas',
+      component: lazy(() => import('./canvas')),
+    },
     {
       name: 'nested-provider',
       title: 'Nested provider',

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/{theme → core/theme}/theme.test.tsx

@@ -1,8 +1,8 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../test'
-import {studioTheme} from './studioTheme'
+import {defaultTheme} from '@sanity/ui/theme'
+import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'
@@ -24,7 +24,7 @@ describe('theme', () => {
         const value: ThemeContextValue = {
           version: 0.0,
           scheme: 'light',
-          theme: studioTheme,
+          theme: defaultTheme,
           tone: 'default',
         }
 
@@ -69,38 +69,5 @@ describe('theme', () => {
 
       expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
     })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <ThemeContext.Provider value={value as any}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useRootTheme(): the context value is not compatible',
-      )
-    })
   })
 })

package/src/{theme → core/theme}/themeColorProvider.tsx

@@ -1,20 +1,18 @@
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
 /**
  * @public
- * @deprecated
  */
 export interface ThemeColorProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
+  tone?: ThemeColorCardToneKey
 }
 
 /**
  * @public
- * @deprecated Use `toneContext` instead.
  */
 export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
   const {children, scheme, tone} = props

package/src/{theme → core/theme}/themeContext.ts

@@ -1,4 +1,4 @@
-import {createContext} from 'react'
+import {Context, createContext} from 'react'
 import {globalScope} from '../lib/globalScope'
 import {ThemeContextValue} from './types'
 
@@ -9,4 +9,4 @@ globalScope[key] = globalScope[key] || createContext<ThemeContextValue | null>(n
 /**
  * @internal
  */
-export const ThemeContext: React.Context<ThemeContextValue | null> = globalScope[key]
+export const ThemeContext: Context<ThemeContextValue | null> = globalScope[key]

package/src/core/theme/themeProvider.tsx

@@ -0,0 +1,61 @@
+import {
+  RootTheme,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  Theme,
+  getScopedTheme,
+} from '@sanity/ui/theme'
+import {useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+  const parentTheme = useContext(ThemeContext)
+  const {
+    children,
+    scheme = parentTheme?.scheme || 'light',
+    theme: rootTheme = parentTheme?.theme || null,
+    tone = parentTheme?.tone || 'default',
+  } = props
+
+  const themeContext: ThemeContextValue | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return {
+      version: 0.0,
+      theme: rootTheme,
+      scheme,
+      tone,
+    }
+  }, [rootTheme, scheme, tone])
+
+  const theme: Theme | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
+
+  if (!theme) {
+    return <pre>ThemeProvider: no "theme" property provided</pre>
+  }
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+    </ThemeContext.Provider>
+  )
+}

package/src/core/theme/types.ts

@@ -0,0 +1,12 @@
+import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorCardToneKey
+}

package/src/core/theme/useRootTheme.ts

@@ -0,0 +1,16 @@
+import {useContext} from 'react'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useRootTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext)
+
+  if (!value) {
+    throw new Error('useRootTheme(): missing context value')
+  }
+
+  return value as unknown as ThemeContextValue
+}

package/src/core/theme/useTheme.ts

@@ -0,0 +1,16 @@
+import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
+import {useTheme as useStyledTheme} from 'styled-components'
+
+/**
+ * @public
+ */
+export function useTheme(): Theme {
+  return useStyledTheme() as Theme
+}
+
+/**
+ * @public
+ */
+export function useTheme_v2(): Theme_v2 {
+  return getTheme_v2(useStyledTheme() as Theme)
+}

package/src/core/types/badge.ts

@@ -0,0 +1,12 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated No longer used
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export type BadgeTone = ThemeColorStateToneKey

package/src/core/types/button.ts

@@ -0,0 +1,22 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey} from '../_compat'
+
+/**
+ * @public
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'

package/src/core/types/card.ts

@@ -0,0 +1,6 @@
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/{types → core/types}/index.ts

@@ -11,5 +11,4 @@ export * from './placement'
 export * from './popover'
 export * from './radius'
 export * from './selectable'
-export * from './styled'
 export * from './text'

package/src/core/types/selectable.ts

@@ -0,0 +1,6 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type SelectableTone = ThemeColorStateToneKey