@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/theme/lib/theme/color/cssVariables/tints.ts

@@ -1,312 +0,0 @@
-/**
- * This file creates a translation between the tints and the studio colors
- * Providing readable names, and allowing to mix colors and tints in the same ThemeColor.
- * e.g. for positive theme: `{"bg_base": "white", ""bg-base-hover"": "gray/50", ""bg-base-active"": "cyan/50"}
- * This is not possible in the previous configuration, as each ThemeColor uses only one tint.
- */
-import {ColorTintKey, ColorTints, ColorTint, black, hues, white} from '@sanity/color'
-import {rgba} from '../../../color-fns'
-import {ThemeColorName, ThemeColorSchemeKey} from '../types'
-
-export const colorKeys = [
-  'text-primary',
-  'text-secondary',
-  'text-inactive',
-  // TODO: Can this be replaced by other of the text colors? It's used by the code html element if it's inside a text
-  'text-code',
-  'text-muted',
-  'text-link',
-  'text-accent',
-  'bg-base',
-  'bg-base-hover',
-  'bg-base-active',
-  'bg-accent',
-  'bg-accent-hover',
-  'bg-accent-active',
-  'bg-tint',
-  // TODO: Can we replace this with bg_tint?  It's used by the code html element if it's inside a text
-  'bg-tint-code',
-
-  'icon-default',
-  'icon-inverted',
-  'border-base',
-  'border-base-hover',
-  'border-accent',
-  'border-accent-inverted',
-
-  // Colors starting with -base won't be affected by the mix function
-  'base-bg-card', // This is used by the card when a tone is defined, it will also override the bg-base in the rest of the components.
-  'base-bg-raw', // This is the same color as bg-base, but it won't be overridden by the card bg color, used in selectable items.
-
-  'base-shadow-outline-color',
-  'base-shadow-umbra-color',
-  'base-shadow-penumbra-color',
-  'base-shadow-ambient-color',
-  'base-text-color', // Color used by the buttons for default mode text
-
-  'skeleton-from',
-  'skeleton-to',
-] as const
-
-export type ColorKey = (typeof colorKeys)[number]
-
-type ColorWithOpacity = {
-  type: 'colorWithOpacity'
-  tint: ColorTintKey
-  /**
-   * Number between 0 and 1
-   */
-  opacity: number
-}
-
-type DefaultColor = {
-  type: 'colorTint'
-  value: ColorTint
-}
-
-type ColorTintsDictionary = Record<ColorKey, ColorTintKey | DefaultColor | ColorWithOpacity>
-const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
-  light: {
-    'text-primary': '900',
-    'text-secondary': '600',
-    'text-inactive': '500',
-    'text-code': '600',
-    'text-muted': '600',
-    'text-link': {
-      type: 'colorTint',
-      value: hues.blue['600'],
-    },
-    'text-accent': {
-      type: 'colorTint',
-      value: hues.red['500'],
-    },
-    'bg-base': {
-      type: 'colorTint',
-      value: white,
-    },
-    'bg-base-hover': '50',
-    'bg-base-active': '100',
-    'bg-accent': '500',
-    'bg-accent-hover': '600',
-    'bg-accent-active': '700',
-    'bg-tint': '50',
-    'bg-tint-code': '50',
-    'icon-default': '500',
-    'icon-inverted': {
-      type: 'colorTint',
-      value: white,
-    },
-    'border-base': '100',
-    'border-base-hover': '200',
-    'border-accent': '500',
-    'border-accent-inverted': {
-      type: 'colorTint',
-      value: white,
-    },
-    'base-bg-card': '50',
-    'base-bg-raw': {
-      type: 'colorTint',
-      value: white,
-    },
-    'base-text-color': {type: 'colorTint', value: white},
-    'base-shadow-outline-color': {
-      type: 'colorWithOpacity',
-      tint: '500',
-      opacity: 0.2,
-    },
-    'base-shadow-umbra-color': {
-      type: 'colorWithOpacity',
-      tint: '500',
-      opacity: 0.1,
-    },
-    'base-shadow-penumbra-color': {
-      type: 'colorWithOpacity',
-      tint: '500',
-      opacity: 0.07,
-    },
-    'base-shadow-ambient-color': {
-      type: 'colorWithOpacity',
-      tint: '500',
-      opacity: 0.06,
-    },
-    'skeleton-from': '100',
-    'skeleton-to': {
-      type: 'colorWithOpacity',
-      tint: '50',
-      opacity: 0.5,
-    },
-  },
-  dark: {
-    'text-primary': '50',
-    'text-secondary': '300',
-    'text-inactive': '400',
-    'text-code': '400',
-    'text-muted': '400',
-    'text-link': {
-      type: 'colorTint',
-      value: hues.blue['400'],
-    },
-    'text-accent': {
-      type: 'colorTint',
-      value: hues.red['400'],
-    },
-    'bg-base': {type: 'colorTint', value: black},
-    'bg-base-hover': '900',
-    'bg-base-active': '800',
-    'bg-accent': '500',
-    'bg-accent-hover': '400',
-    'bg-accent-active': '300',
-    'bg-tint': '900',
-    'bg-tint-code': '950',
-    'icon-default': '300',
-    'icon-inverted': {type: 'colorTint', value: hues.gray[900]},
-    'border-base': '800',
-    'border-base-hover': '700',
-    'border-accent': '300',
-    'border-accent-inverted': {type: 'colorTint', value: hues.gray[900]},
-    'base-bg-card': '950',
-    'base-text-color': {type: 'colorTint', value: black},
-    'base-shadow-outline-color': {
-      type: 'colorWithOpacity',
-      tint: '500',
-      opacity: 0.4,
-    },
-    'base-shadow-umbra-color': {
-      type: 'colorWithOpacity',
-      tint: '900',
-      opacity: 0.4,
-    },
-    'base-shadow-penumbra-color': {
-      type: 'colorWithOpacity',
-      tint: '900',
-      opacity: 0.28,
-    },
-    'base-shadow-ambient-color': {
-      type: 'colorWithOpacity',
-      tint: '900',
-      opacity: 0.24,
-    },
-    'base-bg-raw': {
-      type: 'colorTint',
-      value: black,
-    },
-    'skeleton-from': '900',
-    'skeleton-to': {
-      type: 'colorWithOpacity',
-      tint: '50',
-      opacity: 0.5,
-    },
-  },
-}
-
-export const colorTints: Record<
-  ThemeColorSchemeKey,
-  Record<ThemeColorName, ColorTintsDictionary>
-> = {
-  light: {
-    default: {
-      ...defaultTints.light,
-      'base-bg-card': {type: 'colorTint', value: white},
-      'bg-accent': '900',
-      'bg-accent-hover': '950',
-      'bg-accent-active': {type: 'colorTint', value: black},
-      'border-accent': '600',
-    },
-    primary: {
-      ...defaultTints.light,
-      'bg-accent': '900',
-      'bg-accent-hover': '950',
-      'bg-accent-active': {type: 'colorTint', value: black},
-      'border-accent': '600',
-    },
-    positive: {
-      ...defaultTints.light,
-      'bg-base-hover': {type: 'colorTint', value: hues.gray[50]},
-      'bg-base-active': '50',
-      'bg-accent': '400',
-      'bg-accent-hover': '500',
-      'bg-accent-active': '600',
-      'border-accent': '400',
-    },
-    transparent: defaultTints.light,
-    caution: defaultTints.light,
-    critical: {...defaultTints.light, 'text-inactive': '300'},
-  },
-  dark: {
-    default: {
-      ...defaultTints.dark,
-      'base-bg-card': {type: 'colorTint', value: black},
-      'text-primary': {type: 'colorTint', value: white},
-      'bg-accent': {type: 'colorTint', value: white},
-      'bg-accent-hover': '50',
-      'bg-accent-active': '100',
-      'base-shadow-umbra-color': {
-        type: 'colorWithOpacity',
-        tint: '950',
-        opacity: 0.4,
-      },
-      'base-shadow-penumbra-color': {
-        type: 'colorWithOpacity',
-        tint: '950',
-        opacity: 0.28,
-      },
-      'base-shadow-ambient-color': {
-        type: 'colorWithOpacity',
-        tint: '950',
-        opacity: 0.24,
-      },
-    },
-    primary: {
-      ...defaultTints.dark,
-      'text-primary': {type: 'colorTint', value: white},
-      'bg-accent': {type: 'colorTint', value: white},
-      'bg-accent-hover': '50',
-      'bg-accent-active': '100',
-    },
-    positive: {
-      ...defaultTints.dark,
-      'bg-base-hover': {type: 'colorTint', value: hues.gray[900]},
-      'bg-base-active': '900',
-      'bg-accent': '400',
-      'bg-accent-hover': '300',
-      'bg-accent-active': '200',
-      'border-accent': '400',
-    },
-    transparent: defaultTints.dark,
-    caution: defaultTints.dark,
-    critical: {...defaultTints.dark, 'text-inactive': '700'},
-  },
-}
-
-export const getColorValue = (
-  tints: ColorTints,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorName,
-  key: ColorKey,
-): ColorTint => {
-  const value = colorTints[scheme][tone][key]
-
-  if (typeof value === 'string') {
-    return tints[value]
-  }
-
-  if (value.type === 'colorWithOpacity') {
-    const base = tints[value.tint]
-
-    return {
-      hex: rgba(base.hex, value.opacity),
-      title: `${base.title} ${Math.round(value.opacity * 100)}%`,
-    }
-  }
-
-  return value.value
-}
-
-export const getColorHex = (
-  tints: ColorTints,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorName,
-  key: ColorKey,
-): string => {
-  return getColorValue(tints, scheme, tone, key).hex
-}

package/src/theme/lib/theme/color/cssVariables/tones.ts

@@ -1,67 +0,0 @@
-import {ColorTints} from '@sanity/color'
-import {multiply, screen} from '../../../../studioTheme/helpers'
-import {ThemeColorName, ThemeColorSchemeKey} from '../types'
-import {ColorKey, colorKeys, getColorHex} from './tints'
-
-export const getToneCssVar = (tone: ThemeColorName, key: ColorKey): string => `--${tone}-${key}`
-
-export const createTonesVariables = (
-  scheme: ThemeColorSchemeKey,
-  tones: Record<ThemeColorName, ColorTints>,
-  defaultTone: ThemeColorName = 'default',
-  baseBg: string,
-): Record<string, string> => {
-  const tonesVariables: Record<string, string> = {}
-  const keys = Object.keys(tones) as ThemeColorName[]
-  const mix = scheme === 'dark' ? screen : multiply
-  const needsMixing = defaultTone !== 'default'
-
-  keys.forEach((_tone: ThemeColorName) => {
-    const tone = _tone == 'default' ? defaultTone : _tone
-    const tint = tones[tone]
-
-    colorKeys.forEach((key) => {
-      const colorHex = getColorHex(tint, scheme, tone, key)
-      const varName = getToneCssVar(_tone, key)
-      const willBeMixed = needsMixing && !key.startsWith('base-')
-
-      tonesVariables[varName] = willBeMixed ? mix(baseBg, colorHex) : colorHex
-    })
-  })
-
-  // If we are changing the default tone, we need to update the bg-base to match with the new base bg color.
-  // As components are using this bg-base for the background color, and it needs to match with the card bg color.
-  if (defaultTone !== 'default') {
-    tonesVariables[getToneCssVar('default', 'bg-base')] = tonesCssVariables.default['base-bg-card']
-  }
-
-  return tonesVariables
-}
-
-const themeNames: ThemeColorName[] = [
-  'default',
-  'transparent',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export const tonesCssVariables: Record<
-  ThemeColorName,
-  Record<ColorKey, string>
-> = themeNames.reduce(
-  (acc, tone) => {
-    acc[tone] = colorKeys.reduce(
-      (acc, key) => {
-        acc[key] = `var(${getToneCssVar(tone, key)})`
-
-        return acc
-      },
-      {} as Record<ColorKey, string>,
-    )
-
-    return acc
-  },
-  {} as Record<ThemeColorName, Record<ColorKey, string>>,
-)

package/src/theme/lib/theme/color/cssVariables/utils.test.ts

@@ -1,15 +0,0 @@
-import {cssObjectToCssString} from './utils'
-
-describe('cssObjectToCssString', () => {
-  it('should transform css variables object to a style declaration type string', () => {
-    const cssObject = {
-      '--default-text-primary': '#007bff',
-      '--default-text-secondary': '#6c757d',
-      '--default-text-inactive': '#28a745',
-    }
-
-    const expectedCssString = `--default-text-primary: #007bff; --default-text-secondary: #6c757d; --default-text-inactive: #28a745; `
-
-    expect(cssObjectToCssString(cssObject)).toEqual(expectedCssString)
-  })
-})

package/src/theme/lib/theme/color/cssVariables/utils.ts

@@ -1,9 +0,0 @@
-/**
- * @internal
- * Transform css variables object to a style declaration type string
- */
-export function cssObjectToCssString(rules: Record<string, string>): string {
-  return Object.keys(rules).reduce((acc, key) => {
-    return `${acc}${key}: ${rules[key]}; `
-  }, '')
-}

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

@@ -1,5 +0,0 @@
-export * from './types'
-
-// Css Variables
-export * from './cssVariables'
-export * from './_legacy'

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

@@ -1,41 +0,0 @@
-import {ColorTints} from '@sanity/color'
-
-/**
- * @public
- */
-export type ThemeColorSchemeKey = 'dark' | 'light'
-
-/**
- * @public
- */
-export type ThemeColorName =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
-
-/**
- * @public
- */
-export type ThemeColorToneKey =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
-
-/**
- * @public
- */
-export interface ThemeColorSchemes {
-  // Could we update this to only return Record<ThemeColorName ,  keyof typeof hues> ? Then the function that assigns the color would search the ColorTint
-  tones: Record<ThemeColorName, ColorTints>
-}
-
-/**
- * @beta
- */
-export type CSSVariableKey = ThemeColorName & ('spot' | 'syntax' | 'mutable')

package/src/theme/lib/theme/shadow.ts

@@ -1,20 +0,0 @@
-/**
- * TODO: Rename to `ThemeBoxShadow`
- * @public
- */
-export type BoxShadow = [
-  // offsetX, offsetY, blurRadius, spreadRadius
-  number,
-  number,
-  number,
-  number,
-]
-
-/**
- * @public
- */
-export interface ThemeShadow {
-  umbra: BoxShadow
-  penumbra: BoxShadow
-  ambient: BoxShadow
-}

package/src/theme/lib/theme/theme.ts

@@ -1,43 +0,0 @@
-import {FocusRing} from '../../types'
-import {ThemeAvatar} from './avatar'
-import {ThemeColorSchemes} from './color'
-import {ThemeFonts, ThemeFontWeightKey} from './fonts'
-import {ThemeInput} from './input'
-import {ThemeLayer} from './layer'
-import {ThemeShadow} from './shadow'
-
-/**
- * @public
- */
-export interface BaseTheme<
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  Styles extends {} = {},
-> {
-  avatar: ThemeAvatar
-  button: {
-    textWeight: ThemeFontWeightKey
-    focusRing: FocusRing
-  }
-  card: {
-    focusRing: FocusRing
-  }
-  color: ThemeColorSchemes
-  container: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
-  focusRing: {
-    offset: number
-    width: number
-  }
-  fonts: ThemeFonts
-  input: ThemeInput
-  /**
-   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
-   * @beta
-   */
-  layer?: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadows: Array<ThemeShadow | null>
-  space: number[]
-  styles?: Styles
-}

package/src/theme/studioTheme/color.ts

@@ -1,11 +0,0 @@
-import {ColorTints, hues} from '@sanity/color'
-import {ThemeColorName} from '../lib/theme'
-
-export const tones: Record<ThemeColorName, ColorTints> = {
-  default: hues.gray,
-  transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
-  caution: hues.yellow,
-  critical: hues.red,
-} as const

package/src/theme/studioTheme/helpers.ts

@@ -1,31 +0,0 @@
-import {
-  parseColor,
-  rgbToHex,
-  screen as _screen,
-  multiply as _multiply,
-  rgba,
-} 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))
-
-  if (s.a) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}
-
-export function screen(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_screen(b, s))
-
-  if (s.a) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}

package/src/theme/studioTheme/index.ts

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

package/src/theme/themeProvider.tsx

@@ -1,81 +0,0 @@
-import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider, createGlobalStyle} from 'styled-components'
-import {DEFAULT_THEME_LAYER} from './defaults'
-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
- */
-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 {layer: rootLayer, ...restTheme} = themeProp
-
-    const layer = rootLayer || DEFAULT_THEME_LAYER
-
-    return {sanity: {...restTheme, layer, color: {...legacyColors, tones: restTheme.color.tones}}}
-  }, [themeProp])
-
-  const value: ThemeContextValue | null = useMemo(
-    () =>
-      themeProp && {
-        version: 0.0,
-        theme: themeProp,
-        scheme,
-        tone,
-      },
-    [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}>
-      <GlobalVariables $vars={cssVariables} />
-      <StyledThemeProvider theme={theme}>
-        <ToneProvider tone={tone} scheme={scheme}>
-          {children}
-        </ToneProvider>
-      </StyledThemeProvider>
-    </ThemeContext.Provider>
-  )
-}

package/src/theme/toneContext/toneContext.ts

@@ -1,12 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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>
-}