@sanity/ui 2.0.0-alpha.5 → 2.0.0-alpha.6

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

@@ -1,138 +0,0 @@
-import {ThemeColorGenericState} from './_generic'
-import {ThemeColorBase} from './base'
-import {ThemeColorButtonModeKey, ThemeColorButtonStates} from './button'
-import {createButtonModes} from './button/createButtonModes'
-import {ThemeColorCardState} from './card'
-import {createCardStates} from './card/createCardStates'
-import {defaultOpts} from './defaults'
-import {ThemeColorInputState} from './input'
-import {createInputModes} from './input/createInputModes'
-import {ThemeColorMuted, ThemeColorMutedTone} from './muted'
-import {createMutedTones} from './muted/createMuted'
-import {ThemeColorSelectableState} from './selectable'
-import {createSelectableTones} from './selectable/createSelectableTones'
-import {ThemeColorSolid, ThemeColorSolidTone} from './solid'
-import {createSolidTones} from './solid/createSolidTones'
-import {ThemeColorSpotKey} from './spot'
-import {createSpot} from './spot/createSpot'
-import {ThemeColorSyntax} from './syntax'
-import {
-  ThemeColorName,
-  ThemeColorScheme,
-  ThemeColorSchemes,
-  ThemeColor,
-  ThemeColorToneKey,
-} from './types'
-
-/**
- * @public
- */
-export interface ThemeColorBuilderOpts {
-  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
-  solid: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    tone: ThemeColorToneKey
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorGenericState
-  muted: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    tone: ThemeColorToneKey
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorGenericState
-  card: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    muted: ThemeColorMuted
-    name: ThemeColorName
-    solid: ThemeColorSolid
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorCardState
-  button: (opts: {
-    dark: boolean
-    mode: ThemeColorButtonModeKey
-    base: ThemeColorBase
-    solid: ThemeColorSolidTone
-    muted: ThemeColorMutedTone
-  }) => ThemeColorButtonStates
-  input: (opts: {
-    base: ThemeColorBase
-    solid: ThemeColorSolidTone
-    muted: ThemeColorMutedTone
-    dark: boolean
-    mode: 'default' | 'invalid'
-    state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
-  }) => ThemeColorInputState
-  selectable: (opts: {
-    dark: boolean
-    base: ThemeColorBase
-    solid: ThemeColorSolid
-    muted: ThemeColorMuted
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
-  }) => ThemeColorSelectableState
-  syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
-  spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
-}
-
-/**
- * @public
- */
-export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
-
-/**
- * @public
- */
-export function createColorTheme(
-  partialOpts: PartialThemeColorBuilderOpts = {},
-): ThemeColorSchemes {
-  const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
-
-  return {
-    light: _createColorScheme(builders, false),
-    dark: _createColorScheme(builders, true),
-  }
-}
-
-/**
- * @internal
- */
-function _createColorScheme(opts: ThemeColorBuilderOpts, dark: boolean): ThemeColorScheme {
-  return {
-    default: _createColor(opts, dark, 'default'),
-    transparent: _createColor(opts, dark, 'transparent'),
-    primary: _createColor(opts, dark, 'primary'),
-    positive: _createColor(opts, dark, 'positive'),
-    caution: _createColor(opts, dark, 'caution'),
-    critical: _createColor(opts, dark, 'critical'),
-  }
-}
-
-/**
- * @internal
- */
-function _createColor(
-  opts: ThemeColorBuilderOpts,
-  dark: boolean,
-  name: ThemeColorName,
-): ThemeColor {
-  const base = opts.base({dark, name})
-  const solid = createSolidTones(opts, base, dark, name)
-  const muted = createMutedTones(opts, base, dark, name)
-
-  return {
-    base,
-    button: createButtonModes(opts, base, dark, solid, muted),
-    card: createCardStates(opts, base, dark, name, solid, muted),
-    dark,
-    input: createInputModes(opts, base, dark, solid, muted),
-    selectable: createSelectableTones(opts, base, dark, solid, muted),
-    spot: createSpot(opts, base, dark),
-    syntax: opts.syntax({base, dark}),
-    solid,
-    muted,
-  }
-}

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

@@ -1,84 +0,0 @@
-import {ThemeColorBase} from '../base'
-import {ThemeColorBuilderOpts} from '../factory'
-import {ThemeColorMuted} from '../muted'
-import {ThemeColorSolid} from '../solid'
-import {ThemeColorInput} from './types'
-
-export function createInputModes(
-  opts: ThemeColorBuilderOpts,
-  base: ThemeColorBase,
-  dark: boolean,
-  solid: ThemeColorSolid,
-  muted: ThemeColorMuted,
-): ThemeColorInput {
-  return {
-    default: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: 'default',
-        state: 'enabled',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: 'default',
-        state: 'disabled',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: 'default',
-        state: 'hovered',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: 'default',
-        state: 'readOnly',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-    },
-    invalid: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: 'invalid',
-        state: 'enabled',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: 'invalid',
-        state: 'disabled',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: 'invalid',
-        state: 'hovered',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: 'invalid',
-        state: 'readOnly',
-        solid: solid.default,
-        muted: muted.default,
-      }),
-    },
-  }
-}

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

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

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

@@ -1,28 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorInputState {
-  bg: string
-  bg2: string
-  fg: string
-  border: string
-  placeholder: string
-}
-
-/**
- * @public
- */
-export interface ThemeColorInputStates {
-  enabled: ThemeColorInputState
-  disabled: ThemeColorInputState
-  hovered: ThemeColorInputState
-  readOnly: ThemeColorInputState
-}
-
-/**
- * @public
- */
-export interface ThemeColorInput {
-  default: ThemeColorInputStates
-  invalid: ThemeColorInputStates
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,28 +0,0 @@
-/**
- * @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

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

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

@@ -1,41 +0,0 @@
-/**
- * @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
-}