@sanity/ui 0.37.3 → 0.37.4

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

@@ -0,0 +1,24 @@
+import {ThemeColorGenericState} from '../_generic/types'
+
+/**
+ * @public
+ */
+export interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorMuted {
+  default: ThemeColorMutedTone
+  transparent: ThemeColorMutedTone
+  primary: ThemeColorMutedTone
+  positive: ThemeColorMutedTone
+  caution: ThemeColorMutedTone
+  critical: ThemeColorMutedTone
+}

package/src/theme/lib/theme/color/selectable/createSelectableTones.ts

@@ -0,0 +1,73 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {ThemeColorSelectable, ThemeColorSelectableStates} from './types'
+
+export function createSelectableTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted
+): ThemeColorSelectable {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
+  }
+}
+
+function _createSelectableStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+): ThemeColorSelectableStates {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'enabled',
+      tone,
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'hovered',
+      tone,
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'pressed',
+      tone,
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'selected',
+      tone,
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'disabled',
+      tone,
+    }),
+  }
+}

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

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

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

@@ -0,0 +1,29 @@
+import {ThemeColorGenericState} from '../_generic'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export type ThemeColorSelectableState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export interface ThemeColorSelectableStates {
+  enabled: ThemeColorSelectableState
+  hovered: ThemeColorSelectableState
+  pressed: ThemeColorSelectableState
+  selected: ThemeColorSelectableState
+  disabled: ThemeColorSelectableState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSelectable {
+  default: ThemeColorSelectableStates
+  primary: ThemeColorSelectableStates
+  positive: ThemeColorSelectableStates
+  caution: ThemeColorSelectableStates
+  critical: ThemeColorSelectableStates
+}

package/src/theme/lib/theme/color/solid/createSolidTones.ts

@@ -0,0 +1,56 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorName} from '../types'
+import {ThemeColorSolid} from './types'
+
+export function createSolidTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName
+): ThemeColorSolid {
+  return {
+    default: {
+      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+import {ThemeColorGenericState} from '../_generic/types'
+
+/**
+ * @public
+ */
+export interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}

package/src/theme/lib/theme/color/spot/createSpot.ts

@@ -0,0 +1,21 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorSpot} from './types'
+
+export function createSpot(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean
+): ThemeColorSpot {
+  return {
+    gray: opts.spot({base, dark, key: 'gray'}),
+    blue: opts.spot({base, dark, key: 'blue'}),
+    purple: opts.spot({base, dark, key: 'purple'}),
+    magenta: opts.spot({base, dark, key: 'magenta'}),
+    red: opts.spot({base, dark, key: 'red'}),
+    orange: opts.spot({base, dark, key: 'orange'}),
+    yellow: opts.spot({base, dark, key: 'yellow'}),
+    green: opts.spot({base, dark, key: 'green'}),
+    cyan: opts.spot({base, dark, key: 'cyan'}),
+  }
+}

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * @public
+ */
+export type ThemeColorSpotKey =
+  | 'gray'
+  | 'blue'
+  | 'purple'
+  | 'magenta'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'cyan'
+
+/**
+ * @public
+ */
+export interface ThemeColorSpot {
+  gray: string
+  blue: string
+  purple: string
+  magenta: string
+  red: string
+  orange: string
+  yellow: string
+  green: string
+  cyan: string
+}

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

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

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

@@ -0,0 +1,41 @@
+/**
+ * @public
+ */
+export interface ThemeColorSyntax {
+  atrule: string
+  attrName: string
+  attrValue: string
+  attribute: string
+  boolean: string
+  builtin: string
+  cdata: string
+  char: string
+  class: string
+  className: string
+  comment: string
+  constant: string
+  deleted: string
+  doctype: string
+  entity: string
+  function: string
+  hexcode: string
+  id: string
+  important: string
+  inserted: string
+  keyword: string
+  number: string
+  operator: string
+  prolog: string
+  property: string
+  pseudoClass: string
+  pseudoElement: string
+  punctuation: string
+  regex: string
+  selector: string
+  string: string
+  symbol: string
+  tag: string
+  unit: string
+  url: string
+  variable: string
+}

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

@@ -0,0 +1,72 @@
+import {ThemeColorBase} from './base'
+import {ThemeColorButton} from './button'
+import {ThemeColorCard} from './card'
+import {ThemeColorInput} from './input'
+import {ThemeColorMuted} from './muted'
+import {ThemeColorSelectable} from './selectable'
+import {ThemeColorSolid} from './solid'
+import {ThemeColorSpot} from './spot'
+import {ThemeColorSyntax} from './syntax'
+
+/**
+ * @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 ThemeColor {
+  dark: boolean
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  input: ThemeColorInput
+  selectable?: ThemeColorSelectable
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+  solid: ThemeColorSolid
+  muted: ThemeColorMuted
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorScheme {
+  default: ThemeColor
+  transparent: ThemeColor
+  primary: ThemeColor
+  positive: ThemeColor
+  caution: ThemeColor
+  critical: ThemeColor
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSchemes {
+  dark: ThemeColorScheme
+  light: ThemeColorScheme
+}

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

@@ -0,0 +1,54 @@
+/**
+ * @public
+ */
+export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+
+/**
+ * @public
+ */
+export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/**
+ * @public
+ */
+export interface ThemeFontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFontWeight {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFont {
+  family: string
+  weights: ThemeFontWeight
+  sizes: ThemeFontSize[]
+  /**
+   * @beta
+   */
+  horizontalOffset?: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFonts {
+  code: ThemeFont
+  heading: ThemeFont
+  label: ThemeFont
+  text: ThemeFont
+}

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

@@ -0,0 +1,7 @@
+export * from './avatar'
+export * from './color'
+export * from './fonts'
+export * from './input'
+export * from './layer'
+export * from './shadow'
+export * from './theme'

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

@@ -0,0 +1,22 @@
+/**
+ * @public
+ */
+export interface ThemeInput {
+  checkbox: {
+    size: number
+  }
+  radio: {
+    size: number
+    markSize: number
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+  }
+  border: {
+    width: number
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+ * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface ThemeLayer {
+  dialog: {zOffset: number}
+  popover: {zOffset: number}
+  tooltip: {zOffset: number}
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @public
+ * @todo Rename to `ThemeBoxShadow`
+ */
+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

@@ -0,0 +1,37 @@
+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
+  }
+  color: ThemeColorSchemes
+  container: number[]
+  focusRing: {
+    offset: number
+    width: number
+  }
+  fonts: ThemeFonts
+  /**
+   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
+   * @beta
+   */
+  layer?: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadows: Array<ThemeShadow | null>
+  space: number[]
+  input: ThemeInput
+  styles?: Styles
+}