@sanity/ui 2.0.0-alpha.5 → 2.0.0-alpha.6

package/src/theme/themeColorProvider.tsx

@@ -4,6 +4,7 @@ import {useRootTheme} from './useRootTheme'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorProviderProps {
   children?: React.ReactNode
@@ -13,6 +14,7 @@ export interface ThemeColorProviderProps {
 
 /**
  * @public
+ * @deprecated Use `toneContext` instead.
  */
 export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
   const {children, scheme, tone} = props

package/src/theme/themeProvider.tsx

@@ -1,10 +1,19 @@
 import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+import {ThemeProvider as StyledThemeProvider, createGlobalStyle} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
-import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'
+import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {createCssVars} from './lib/theme/color/cssVariables'
+import {cssObjectToCssString} from './lib/theme/color/cssVariables/utils'
 import {ThemeContext} from './themeContext'
+import {ToneProvider} from './toneContext/toneProvider'
 import {RootTheme, Theme, ThemeContextValue} from './types'
 
+const GlobalVariables = createGlobalStyle<{$vars?: string}>`
+  :root {
+    ${({$vars}) => $vars}
+  }
+`
+
 /**
  * @public
  */
@@ -30,13 +39,12 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const theme: Theme | null = useMemo(() => {
     if (!themeProp) return null
 
-    const {color: rootColor, layer: rootLayer, ...restTheme} = themeProp
-    const colorScheme = rootColor[scheme] || rootColor.light
-    const color = colorScheme[tone] || colorScheme.default
+    const {layer: rootLayer, ...restTheme} = themeProp
+
     const layer = rootLayer || DEFAULT_THEME_LAYER
 
-    return {sanity: {...restTheme, color, layer}}
-  }, [scheme, themeProp, tone])
+    return {sanity: {...restTheme, layer}}
+  }, [themeProp])
 
   const value: ThemeContextValue | null = useMemo(
     () =>
@@ -49,13 +57,24 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
     [themeProp, scheme, tone],
   )
 
+  const cssVariables = useMemo(() => {
+    if (!themeProp?.color.tones) return
+
+    return cssObjectToCssString(createCssVars(scheme, themeProp?.color.tones))
+  }, [scheme, themeProp?.color.tones])
+
   if (!theme) {
     return <pre>ThemeProvider: no "theme" property provided</pre>
   }
 
   return (
     <ThemeContext.Provider value={value}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      <GlobalVariables $vars={cssVariables} />
+      <StyledThemeProvider theme={theme}>
+        <ToneProvider tone={tone} scheme={scheme}>
+          {children}
+        </ToneProvider>
+      </StyledThemeProvider>
     </ThemeContext.Provider>
   )
 }

package/src/theme/toneContext/toneContext.ts

@@ -0,0 +1,12 @@
+import {createContext} from 'react'
+import {globalScope} from '../../lib/globalScope'
+import {ToneContextValue} from './types'
+
+const key = Symbol.for('@sanity/ui/context/toneContext')
+
+globalScope[key] = globalScope[key] || createContext<ToneContextValue | null>(null)
+
+/**
+ * @internal
+ */
+export const ToneContext: React.Context<ToneContextValue | null> = globalScope[key]

package/src/theme/toneContext/toneProvider.tsx

@@ -0,0 +1,31 @@
+import {useMemo} from 'react'
+import {ThemeColorName, ThemeColorSchemeKey, useRootTheme} from '..'
+import {ToneContext} from './toneContext'
+import {ToneContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ToneProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  tone: ThemeColorName
+}
+
+/**
+ * @public
+ */
+export function ToneProvider(props: ToneProviderProps): React.ReactElement {
+  const {children, scheme, tone} = props
+  const root = useRootTheme()
+  const value: ToneContextValue = useMemo(
+    () => ({
+      version: 0.0,
+      scheme: scheme || root.scheme,
+      tone,
+    }),
+    [root.scheme, scheme, tone],
+  )
+
+  return <ToneContext.Provider value={value}>{children}</ToneContext.Provider>
+}

package/src/theme/toneContext/types.ts

@@ -0,0 +1,10 @@
+import {ThemeColorName, ThemeColorSchemeKey} from '..'
+
+/**
+ * @public
+ */
+export interface ToneContextValue {
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  tone: ThemeColorName
+}

package/src/theme/toneContext/useToneContext.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {ToneContext} from './toneContext'
+import {ToneContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useToneContext(): ToneContextValue {
+  const value: unknown = useContext(ToneContext)
+
+  if (!value) {
+    throw new Error('useToneContext(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('useToneContext(): the context value is not compatible')
+  }
+
+  return value as any as ToneContextValue
+}

package/src/theme/types.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from '../types/styled'
-import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {BaseTheme, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
 
 /**
  * @public
@@ -23,9 +23,7 @@ export interface Styles {
  * @public
  */
 export interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
+  sanity: RootTheme
 }
 
 /**

package/src/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,15 +1,16 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
 
 const TestCard = styled(Card)`
-  --card-fg-color: orange;
+  ${mutableCardVariables['fg-color']}: orange;
 
   [data-eq-min~='0'] > & {
-    --card-fg-color: green;
+    ${mutableCardVariables['fg-color']}: green;
   }
 
   [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
+    ${mutableCardVariables['fg-color']}: blue;
   }
 `
 

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,30 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorGenericState {
-  bg: string
-  /**
-   * @beta
-   */
-  bg2?: string
-  border: string
-  fg: string
-  iconColor: 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'),
-  }
-}