@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/theme/studioTheme/fonts.ts

@@ -0,0 +1,219 @@
+import {ThemeFonts} from '../lib/theme'
+
+export const fonts: ThemeFonts = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 3,
+        descenderHeight: 3,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 13,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 17,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 21,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 25,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  heading: {
+    family:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 12,
+        iconSize: 17,
+        lineHeight: 17,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 21,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 33,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 39,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 9,
+        descenderHeight: 9,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 45,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  label: {
+    family:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.8,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 11.25,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.75,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 14,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15.5,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+      },
+    ],
+  },
+  text: {
+    family:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 3,
+        descenderHeight: 3,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 13,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 17,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 21,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 25,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: 0,
+      },
+    ],
+  },
+}

package/src/theme/studioTheme/helpers.ts

@@ -0,0 +1,17 @@
+import {parseColor, rgbToHex, screen as _screen, multiply as _multiply} from '../lib/color-fns'
+
+export function multiply(bg: string, fg: string): string {
+  const b = parseColor(bg)
+  const s = parseColor(fg)
+  const hex = rgbToHex(_multiply(b, s))
+
+  return hex
+}
+
+export function screen(bg: string, fg: string): string {
+  const b = parseColor(bg)
+  const s = parseColor(fg)
+  const hex = rgbToHex(_screen(b, s))
+
+  return hex
+}

package/src/theme/studioTheme/index.ts

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

package/src/theme/studioTheme/theme.ts

@@ -0,0 +1,68 @@
+import {RootTheme} from '../types'
+import {color} from './color'
+import {fonts} from './fonts'
+
+/**
+ * @public
+ */
+export const studioTheme: RootTheme = {
+  avatar: {
+    sizes: [
+      {distance: -3, size: 25},
+      {distance: -6, size: 35},
+      {distance: -9, size: 55},
+    ],
+  },
+  button: {
+    textWeight: 'medium',
+  },
+  color,
+  container: [320, 640, 960, 1280, 1600, 1920],
+  focusRing: {
+    offset: 1,
+    width: 2,
+  },
+  fonts,
+  media: [360, 600, 900, 1200, 1800, 2400],
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  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, 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]},
+  ],
+  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
+  input: {
+    checkbox: {
+      size: 17,
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+    },
+    switch: {
+      width: 33,
+      height: 17,
+      padding: 4,
+      transitionDurationMs: 150,
+      transitionTimingFunction: 'ease-out',
+    },
+    border: {
+      width: 1,
+    },
+  },
+  // styles: {
+  //   button: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  //   card: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  // },
+}

package/src/theme/theme.test.tsx

@@ -0,0 +1,105 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../test'
+import {studioTheme} from './studioTheme'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+import {useRootTheme} from './useRootTheme'
+
+describe('theme', () => {
+  describe('useRootTheme', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootTheme = useRootTheme()
+
+        log(rootTheme)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ThemeContextValue = {
+          version: 0.0,
+          scheme: 'light',
+          theme: studioTheme,
+          tone: 'default',
+        }
+
+        return (
+          <ThemeContext.Provider value={value}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].scheme).toBe('light')
+      expect(log.mock.calls[0][0].tone).toBe('default')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useRootTheme()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ThemeContext.Provider value={value as any}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      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/themeColorProvider.tsx

@@ -0,0 +1,26 @@
+import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {ThemeProvider} from './themeProvider'
+import {useRootTheme} from './useRootTheme'
+
+/**
+ * @public
+ */
+export interface ThemeColorProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorName
+}
+
+/**
+ * @public
+ */
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
+  const {children, scheme, tone} = props
+  const root = useRootTheme()
+
+  return (
+    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
+      {children}
+    </ThemeProvider>
+  )
+}

package/src/theme/themeContext.ts

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

package/src/theme/themeProvider.tsx

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

package/src/theme/types.ts

@@ -0,0 +1,39 @@
+import {CSSObject} from 'styled-components'
+import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+
+/**
+ * @public
+ */
+export type RootTheme = BaseTheme<Styles>
+
+/**
+ * TODO: Rename to `ThemeStyles`
+ * @public
+ */
+export interface Styles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
+/**
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
+}
+
+/**
+ * @public
+ */
+export interface ThemeContextValue {
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorName
+}

package/src/theme/useRootTheme.ts

@@ -0,0 +1,24 @@
+import {useContext} from 'react'
+import {isRecord} from '../lib/isRecord'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useRootTheme(): ThemeContextValue {
+  const value: unknown = useContext(ThemeContext)
+
+  if (!value) {
+    throw new Error('useRootTheme(): 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('useRootTheme(): the context value is not compatible')
+  }
+
+  return value as any as ThemeContextValue
+}

package/src/theme/useTheme.ts

@@ -0,0 +1,10 @@
+import {useTheme as useStyledTheme} from 'styled-components'
+
+import {Theme} from './types'
+
+/**
+ * @public
+ */
+export function useTheme(): Theme {
+  return useStyledTheme() as Theme
+}

package/src/types/avatar.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export type AvatarSize = 0 | 1 | 2
+
+/**
+ * @public
+ */
+export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/types/badge.ts

@@ -0,0 +1,9 @@
+/**
+ * @public
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export type BadgeTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/box.ts

@@ -0,0 +1,19 @@
+/**
+ * @public
+ */
+export type BoxSizing = 'content' | 'border'
+
+/**
+ * @public
+ */
+export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/types/button.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type ButtonMode = 'default' | 'ghost' | 'bleed'
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/card.ts

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

package/src/types/dialog.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type DialogPosition = 'absolute' | 'fixed'

package/src/types/flex.ts

@@ -0,0 +1,30 @@
+/**
+ * @public
+ */
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+export type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+export type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'