@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.30

package/src/theme/config/tokens/parseTokenKey.ts

@@ -0,0 +1,66 @@
+import {isColorButtonMode} from '../../system'
+import {
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+} from '../helpers'
+import {TokenKeyNode} from './types'
+
+export function parseTokenKey(str: string): TokenKeyNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join('/')
+
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+  }
+
+  if (segment0 === 'button') {
+    const segment1 = segments.shift() || ''
+
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || ''
+
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join('/')
+
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+      }
+    }
+  }
+
+  return undefined
+}

package/src/theme/config/tokens/parseTokenValue.test.ts

@@ -0,0 +1,45 @@
+import {parseTokenValue} from './parseTokenValue'
+
+test('parse color value', () => {
+  expect(parseTokenValue('cyan')).toEqual({
+    type: 'hue',
+    value: 'cyan',
+  })
+
+  expect(parseTokenValue('50')).toEqual({
+    type: 'color',
+    tint: '50',
+  })
+
+  expect(parseTokenValue('cyan/500')).toEqual({
+    type: 'color',
+    key: 'cyan/500',
+    hue: 'cyan',
+    tint: '500',
+  })
+
+  expect(parseTokenValue('screen')).toEqual({
+    type: 'blendMode',
+    value: 'screen',
+  })
+
+  expect(parseTokenValue('multiply')).toEqual({
+    type: 'blendMode',
+    value: 'multiply',
+  })
+
+  expect(parseTokenValue('0')).toEqual({
+    type: 'color',
+    opacity: 0,
+  })
+
+  expect(parseTokenValue('0.1')).toEqual({
+    type: 'color',
+    opacity: 0.1,
+  })
+
+  expect(parseTokenValue('1')).toEqual({
+    type: 'color',
+    opacity: 1,
+  })
+})

package/src/theme/config/tokens/parseTokenValue.ts

@@ -0,0 +1,102 @@
+import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
+import {isColorOpacityValue, isColorValue} from '../helpers'
+import {TokenValueNode} from './types'
+
+export function parseTokenValue(str: string): TokenValueNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorTintKey(segment0)) {
+    const tint = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        tint,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      tint,
+    }
+  }
+
+  if (isColorValue(segment0)) {
+    const key = segment0 as 'black' | 'white'
+    const segment1 = segments.shift() || ''
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        key,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      key,
+    }
+  }
+
+  if (isColorHueKey(segment0)) {
+    const hue = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorTintKey(segment1)) {
+      const tint = segment1
+      const segment2 = segments.shift() || ''
+
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2)
+
+        return {
+          type: 'color',
+          key: `${hue}/${tint}`,
+          hue,
+          tint,
+          opacity,
+        }
+      }
+
+      return {
+        type: 'color',
+        key: `${hue}/${tint}`,
+        hue,
+        tint,
+      }
+    }
+
+    return {
+      type: 'hue',
+      value: `${hue}`,
+    }
+  }
+
+  if (isColorOpacityValue(segment0)) {
+    const opacity = Number(segment0)
+
+    return {
+      type: 'color',
+      opacity,
+    }
+  }
+
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0
+
+    return {
+      type: 'blendMode',
+      value,
+    }
+  }
+
+  return undefined
+}

package/src/theme/config/tokens/types.ts

@@ -0,0 +1,44 @@
+import {ColorHueKey, ColorTintKey} from '@sanity/color'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+import {
+  ColorConfigBaseKey,
+  ColorConfigBaseTone,
+  ColorConfigBlendKey,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+} from '../system'
+
+export interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigBaseTone
+  key: ColorConfigBaseKey | ColorConfigBlendKey
+}
+
+export interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ThemeColorButtonModeKey
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+export interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  hue?: ColorHueKey
+  tint?: ColorTintKey
+  opacity?: number
+}
+
+export interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueKey
+}
+
+export interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ThemeColorBlendModeKey
+}
+
+export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode

package/src/theme/config/types.ts

@@ -0,0 +1,51 @@
+import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
+import {
+  ThemeAvatar,
+  ThemeFocusRing,
+  ThemeFontWeightKey,
+  ThemeFonts,
+  ThemeInput,
+  ThemeLayer,
+  ThemeShadow,
+  ThemeStyles,
+} from '../system'
+import {ThemeColorTokens} from './tokens'
+
+export type ThemeColorPalette = {
+  black: string | ColorPaletteValue
+  white: string | ColorPaletteValue
+} & Record<ColorHueKey, Record<ColorTintKey, string | ColorPaletteValue>>
+
+export interface ThemeConfig {
+  avatar?: ThemeAvatar
+  button?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color?: ThemeColorTokens
+  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[]
+  palette?: ThemeColorPalette
+  radius?: number[]
+  shadows?: Array<ThemeShadow | null>
+  space?: number[]
+  styles?: ThemeStyles
+}

package/src/theme/index.ts

@@ -1,8 +1,4 @@
-export * from './lib/color-fns'
-export * from './lib/theme'
-export * from './studioTheme'
-export * from './themeColorProvider'
-export * from './themeProvider'
-export * from './types'
-export * from './useRootTheme'
-export * from './useTheme'
+export * from './build'
+export * from './config'
+export * from './themes/studio'
+export * from './system'

package/src/theme/system/_system.ts

@@ -0,0 +1,95 @@
+import type {StyledObject} from 'styled-components'
+import {ThemeAvatar} from './avatar'
+import {ThemeColor} from './color'
+import {ThemeColorSchemes} from './color'
+import {ThemeFonts, ThemeFontWeightKey} from './fonts'
+import {ThemeInput} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+
+/**
+ * Workaround types that are missing in v6
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ * */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSObject = StyledObject<any>
+
+/**
+ * @public
+ */
+export interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
+/**
+ * @deprecated Use `ThemeStyles` instead
+ * @public
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ */
+export interface ThemeFocusRing {
+  offset: number
+  width: number
+}
+
+/**
+ * @public
+ */
+export interface BaseTheme<
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  Styles extends {} = {},
+> {
+  avatar: ThemeAvatar
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  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
+}
+
+/**
+ * @public
+ */
+export type RootTheme = BaseTheme<ThemeStyles>
+
+/**
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
+}

package/src/theme/system/avatar.ts

@@ -0,0 +1,14 @@
+import {ThemeFocusRing} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeAvatar {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}

package/src/theme/system/color/_constants.ts

@@ -0,0 +1,38 @@
+import {COLOR_HUES} from '@sanity/color'
+
+/** @internal */
+export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
+
+/** @internal */
+export const THEME_COLOR_BASE_TONES = [
+  'transparent',
+  'default',
+  'primary', // todo: rename to `accent`
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @internal */
+export const THEME_COLOR_STATE_TONES = [
+  'default',
+  'primary', // todo: rename to `accent`
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @internal */
+export const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
+
+/** @internal */
+export const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
+
+/** @internal */
+export const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const
+
+/** @internal */
+export const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const
+
+/** @internal */
+export const THEME_COLOR_AVATAR_COLORS = COLOR_HUES

package/src/theme/{lib/theme/color/muted/types.ts → system/color/_deprecated/muted.ts}

@@ -1,7 +1,8 @@
-import {ThemeColorGenericState} from '../_generic/types'
+import {ThemeColorGenericState} from '../_generic'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorMutedTone {
   enabled: ThemeColorGenericState
@@ -13,6 +14,7 @@ export interface ThemeColorMutedTone {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorMuted {
   default: ThemeColorMutedTone

package/src/theme/{lib/theme/color/solid/types.ts → system/color/_deprecated/solid.ts}

@@ -1,7 +1,8 @@
-import {ThemeColorGenericState} from '../_generic/types'
+import {ThemeColorGenericState} from '../_generic'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorSolidTone {
   enabled: ThemeColorGenericState
@@ -13,6 +14,7 @@ export interface ThemeColorSolidTone {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorSolid {
   default: ThemeColorSolidTone

package/src/theme/system/color/_deprecated/spot.ts

@@ -0,0 +1,13 @@
+import {ThemeColorAvatarColorKey} from '../_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatarKey` instead
+ */
+export type ThemeColorSpotKey = ThemeColorAvatarColorKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatar` instead
+ */
+export type ThemeColorSpot = Record<ThemeColorSpotKey, string>

package/src/theme/{lib/theme/color/_generic/types.ts → system/color/_generic.ts}

@@ -1,7 +1,11 @@
+import {ThemeColorBlendModeKey} from './_system'
+
 /**
  * @public
  */
 export interface ThemeColorGenericState {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
   bg: string
   /**
    * @beta
@@ -9,7 +13,7 @@ export interface ThemeColorGenericState {
   bg2?: string
   border: string
   fg: string
-  iconColor: string
+  icon: string
   muted: {
     fg: string
   }

package/src/theme/system/color/_helpers.ts

@@ -0,0 +1,23 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
+import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
+
+/** @internal */
+export function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey {
+  return THEME_COLOR_BLEND_MODES.includes(str as ThemeColorBlendModeKey)
+}
+
+/** @internal */
+export function isColorHueKey(str: string): str is ColorHueKey {
+  return COLOR_HUES.includes(str as ColorHueKey)
+}
+
+/** @internal */
+export function isColorTintKey(str: string): str is ColorTintKey {
+  return COLOR_TINTS.includes(str as ColorTintKey)
+}
+
+/** @internal */
+export function isColorButtonMode(str: string): str is ThemeColorButtonModeKey {
+  return THEME_COLOR_BUTTON_MODES.includes(str as ThemeColorButtonModeKey)
+}

package/src/theme/system/color/_system.ts

@@ -0,0 +1,100 @@
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+} from './_constants'
+import {ThemeColorMuted} from './_deprecated/muted'
+import {ThemeColorSolid} from './_deprecated/solid'
+import {ThemeColorSpot} from './_deprecated/spot'
+import {ThemeColorAvatar} from './avatar'
+import {ThemeColorBadge} from './badge'
+import {ThemeColorBase} from './base'
+import {ThemeColorButton} from './button'
+import {ThemeColorCard} from './card'
+import {ThemeColorInput} from './input'
+import {ThemeColorKBD} from './kbd'
+import {ThemeColorSelectable} from './selectable'
+import {ThemeColorSyntax} from './syntax'
+
+/**
+ * @public
+ */
+export type ThemeColorSchemeKey = 'dark' | 'light'
+
+/** @internal */
+export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/** @internal */
+export type ThemeColorBaseToneKey = (typeof THEME_COLOR_BASE_TONES)[number]
+
+/** @internal */
+export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/** @internal */
+export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+/** @internal */
+export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/** @internal */
+export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/** @internal */
+export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/** @internal */
+export type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export type ThemeColorName = ThemeColorBaseToneKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export type ThemeColorToneKey = ThemeColorBaseToneKey
+
+/**
+ * @public
+ */
+export interface ThemeColor {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  _dark?: boolean
+  avatar?: ThemeColorAvatar
+  badge?: ThemeColorBadge
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  input: ThemeColorInput
+  kbd?: ThemeColorKBD
+  selectable?: ThemeColorSelectable
+  syntax: ThemeColorSyntax
+
+  /** @deprecated Use `_dark` instead */
+  dark: boolean
+  /** @deprecated */
+  muted: ThemeColorMuted
+  /** @deprecated */
+  spot: ThemeColorSpot
+  /** @deprecated */
+  solid: ThemeColorSolid
+}
+
+/**
+ * @public
+ */
+export type ThemeColorScheme = Record<ThemeColorBaseToneKey, ThemeColor>
+
+/**
+ * @public
+ */
+export type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>

package/src/theme/system/color/avatar.ts

@@ -0,0 +1,13 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+export interface ThemeColorAvatar {
+  gray: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  blue: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  purple: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  magenta: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  red: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  orange: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  yellow: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  green: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  cyan: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+}

package/src/theme/system/color/badge.ts

@@ -0,0 +1,9 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+export interface ThemeColorBadge {
+  default: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  primary: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  positive: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  caution: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+  critical: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+}