@sanity/ui 1.8.3 → 2.0.0-alpha.10

package/src/theme/studioTheme/theme.ts

@@ -1,5 +1,5 @@
 import {RootTheme} from '../types'
-import {color} from './color'
+import {tones} from './color'
 import {fonts} from './fonts'
 
 /**
@@ -12,11 +12,22 @@ export const studioTheme: RootTheme = {
       {distance: -6, size: 35},
       {distance: -9, size: 55},
     ],
+    focusRing: {offset: 1, width: 1},
   },
   button: {
     textWeight: 'medium',
+    focusRing: {offset: -1, width: 2},
+  },
+  card: {
+    focusRing: {offset: -1, width: 1},
+  },
+  color: {
+    tones: tones,
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This is necessary until workshop is updated.
+    base: {bg: '#fffff'},
   },
-  color,
   container: [320, 640, 960, 1280, 1600, 1920],
   focusRing: {
     offset: 1,
@@ -28,7 +39,7 @@ export const studioTheme: RootTheme = {
   shadows: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
     {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
     {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
@@ -37,21 +48,30 @@ export const studioTheme: RootTheme = {
   input: {
     checkbox: {
       size: 17,
+      focusRing: {offset: -1, width: 1},
     },
     radio: {
       size: 17,
       markSize: 9,
+      focusRing: {offset: -1, width: 1},
     },
     switch: {
-      width: 33,
-      height: 17,
-      padding: 4,
+      width: 21,
+      height: 13,
+      padding: 2,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
+      focusRing: {offset: 1, width: 1},
     },
     border: {
       width: 1,
     },
+    select: {
+      focusRing: {offset: -1, width: 1},
+    },
+    text: {
+      focusRing: {offset: -1, width: 1},
+    },
   },
   // styles: {
   //   button: {

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,20 @@
 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 {legacyColors} from './lib/theme/color/_legacy/legacyColor'
+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 +40,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, color: {...legacyColors, tones: restTheme.color.tones}}}
+  }, [themeProp])
 
   const value: ThemeContextValue | null = useMemo(
     () =>
@@ -49,13 +58,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
 }
 
 /**
@@ -37,3 +35,11 @@ export interface ThemeContextValue {
   theme: RootTheme
   tone: ThemeColorName
 }
+
+/**
+ * @public
+ */
+export interface FocusRing {
+  offset: number
+  width: number
+}

package/src/types/index.ts

@@ -9,6 +9,7 @@ export * from './grid'
 export * from './gridItem'
 export * from './placement'
 export * from './popover'
+export * from './radius'
 export * from './selectable'
 export * from './styled'
 export * from './text'

package/src/types/radius.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type Radius = number | 'full'

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;
   }
 `