@sanity/ui 3.3.2 → 3.3.4

package/src/theme/build/_deprecated/color/factory.ts

@@ -1,178 +0,0 @@
-import {
-  ThemeColor,
-  ThemeColorBase,
-  ThemeColorButtonModeKey,
-  ThemeColorButtonStates,
-  ThemeColorGenericState,
-  ThemeColorInputState,
-  ThemeColorMuted,
-  ThemeColorMutedTone,
-  ThemeColorName,
-  ThemeColorScheme,
-  ThemeColorSchemes,
-  ThemeColorSolid,
-  ThemeColorSolidTone,
-  ThemeColorSpotKey,
-  ThemeColorSyntax,
-  ThemeColorToneKey,
-} from '../../../system'
-import {createSelectableTones} from './_selectable/createSelectableTones'
-import {createSolidTones} from './_solid/createSolidTones'
-import {createButtonModes} from './button/createButtonModes'
-import {createCardStates} from './card/createCardStates'
-import {defaultOpts} from './defaults'
-import {createInputModes} from './input/createInputModes'
-import {createMutedTones} from './muted/createMuted'
-import {createSpot} from './spot/createSpot'
-
-/**
- * @public
- * @deprecated Use `buildColorTheme` instead.
- */
-export interface ThemeColorBuilderOpts {
-  // oxlint-disable-next-line no-deprecated
-  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
-  solid: (opts: {
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    dark: boolean
-    // oxlint-disable-next-line no-deprecated
-    tone: ThemeColorName
-    // oxlint-disable-next-line no-deprecated
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorGenericState
-  muted: (opts: {
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    dark: boolean
-    // oxlint-disable-next-line no-deprecated
-    tone: ThemeColorToneKey
-    // oxlint-disable-next-line no-deprecated
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorGenericState
-  card: (opts: {
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    dark: boolean
-    // oxlint-disable-next-line no-deprecated
-    muted: ThemeColorMuted
-    // oxlint-disable-next-line no-deprecated
-    name: ThemeColorName
-    // oxlint-disable-next-line no-deprecated
-    solid: ThemeColorSolid
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorGenericState
-  button: (opts: {
-    dark: boolean
-    mode: ThemeColorButtonModeKey
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    // oxlint-disable-next-line no-deprecated
-    solid: ThemeColorSolidTone
-    // oxlint-disable-next-line no-deprecated
-    muted: ThemeColorMutedTone
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorButtonStates
-  input: (opts: {
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    // oxlint-disable-next-line no-deprecated
-    solid: ThemeColorSolidTone
-    // oxlint-disable-next-line no-deprecated
-    muted: ThemeColorMutedTone
-    dark: boolean
-    mode: 'default' | 'invalid'
-    state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorInputState
-  selectable: (opts: {
-    dark: boolean
-    // oxlint-disable-next-line no-deprecated
-    base: ThemeColorBase
-    // oxlint-disable-next-line no-deprecated
-    solid: ThemeColorSolid
-    // oxlint-disable-next-line no-deprecated
-    muted: ThemeColorMuted
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
-    // oxlint-disable-next-line no-deprecated
-  }) => ThemeColorGenericState
-  // oxlint-disable-next-line no-deprecated
-  syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
-  // oxlint-disable-next-line no-deprecated
-  spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
-}
-
-/**
- * @public
- * @deprecated Use `ThemeConfig` instead.
- */
-// oxlint-disable-next-line no-deprecated
-export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
-
-/**
- * @public
- * @deprecated Use `buildColorTheme` instead.
- */
-export function createColorTheme(
-  // oxlint-disable-next-line no-deprecated
-  partialOpts: PartialThemeColorBuilderOpts = {},
-  // oxlint-disable-next-line no-deprecated
-): ThemeColorSchemes {
-  // oxlint-disable-next-line no-deprecated
-  const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
-
-  return {
-    light: _createColorScheme(builders, false),
-    dark: _createColorScheme(builders, true),
-  }
-}
-
-/**
- * @internal
- */
-// oxlint-disable-next-line no-deprecated
-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(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  name: ThemeColorName,
-  // oxlint-disable-next-line no-deprecated
-): 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/build/_deprecated/color/index.ts

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

package/src/theme/build/_deprecated/color/input/createInputModes.ts

@@ -1,86 +0,0 @@
-import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'
-import {ThemeColorBuilderOpts} from '../factory'
-
-export function createInputModes(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  solid: ThemeColorSolid,
-  // oxlint-disable-next-line no-deprecated
-  muted: ThemeColorMuted,
-  // oxlint-disable-next-line no-deprecated
-): 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/build/_deprecated/color/muted/createMuted.ts

@@ -1,58 +0,0 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'
-import {ThemeColorBuilderOpts} from '../factory'
-
-export function createMutedTones(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  name: ThemeColorName,
-  // oxlint-disable-next-line no-deprecated
-): 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/build/_deprecated/color/spot/createSpot.ts

@@ -1,23 +0,0 @@
-import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
-import {ThemeColorBuilderOpts} from '../factory'
-
-export function createSpot(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-): 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/build/buildColorTheme.test.ts

@@ -1,185 +0,0 @@
-import {expect, test} from 'vitest'
-
-import {ThemeColorTokens} from '../config'
-import {buildColorTheme} from './buildColorTheme'
-
-test('buildColorTheme: base', () => {
-  const {light, dark} = buildColorTheme({
-    color: {
-      base: {
-        '*': {
-          bg: ['50', '900'],
-          fg: ['800', '200'],
-        },
-        'transparent': {
-          bg: ['50', 'black'],
-        },
-        'default': {
-          bg: ['white', '950'],
-          fg: ['black', '200'],
-        },
-        'primary': {
-          _hue: 'purple',
-        },
-        'positive': {
-          _hue: 'cyan',
-        },
-        'caution': {
-          _hue: 'yellow',
-        },
-        'critical': {
-          _hue: 'red',
-        },
-      },
-    },
-  })
-
-  expect({
-    light: {
-      transparent: {
-        bg: light.transparent.bg,
-        fg: light.transparent.fg,
-      },
-      default: {
-        bg: light.default.bg,
-        fg: light.default.fg,
-      },
-      primary: {
-        bg: light.primary.bg,
-        fg: light.primary.fg,
-      },
-    },
-    dark: {
-      transparent: {
-        bg: dark.transparent.bg,
-        fg: dark.transparent.fg,
-      },
-      default: {
-        bg: dark.default.bg,
-        fg: dark.default.fg,
-      },
-      primary: {
-        bg: dark.primary.bg,
-        fg: dark.primary.fg,
-      },
-    },
-  }).toEqual({
-    light: {
-      transparent: {
-        bg: 'gray/50',
-        fg: 'gray/800',
-      },
-      default: {
-        bg: 'white',
-        fg: 'black',
-      },
-      primary: {
-        bg: 'purple/50',
-        fg: 'purple/800',
-      },
-    },
-    dark: {
-      transparent: {
-        bg: 'black',
-        fg: 'gray/200',
-      },
-      default: {
-        bg: 'gray/950',
-        fg: 'gray/200',
-      },
-      primary: {
-        bg: 'purple/900',
-        fg: 'purple/200',
-      },
-    },
-  })
-})
-
-test('buildColorTheme: button', () => {
-  const tokens: ThemeColorTokens = {
-    base: {
-      '*': {
-        bg: ['50', '900'],
-        fg: ['800', '200'],
-      },
-      'transparent': {
-        bg: ['50', 'black'],
-      },
-      'default': {
-        bg: ['white', '950'],
-        fg: ['black', '200'],
-      },
-      'primary': {
-        _hue: 'purple',
-      },
-      'positive': {
-        _hue: 'cyan',
-      },
-      'caution': {
-        _hue: 'yellow',
-      },
-      'critical': {
-        _hue: 'red',
-      },
-    },
-    button: {
-      default: {
-        '*': {
-          '*': {
-            bg: ['500', '400'],
-            fg: ['white', 'black'],
-          },
-          'hovered': {
-            bg: ['600', '300'],
-          },
-        },
-      },
-    },
-  }
-
-  const {dark, light} = buildColorTheme({color: tokens})
-
-  expect({
-    light: {
-      enabled: {
-        bg: light.default.button.default.primary.enabled.bg,
-        fg: light.default.button.default.primary.enabled.fg,
-      },
-      hovered: {
-        bg: light.default.button.default.primary.hovered.bg,
-        fg: light.default.button.default.primary.hovered.fg,
-      },
-    },
-    dark: {
-      enabled: {
-        bg: dark.default.button.default.primary.enabled.bg,
-        fg: dark.default.button.default.primary.enabled.fg,
-      },
-      hovered: {
-        bg: dark.default.button.default.primary.hovered.bg,
-        fg: dark.default.button.default.primary.hovered.fg,
-      },
-    },
-  }).toEqual({
-    light: {
-      enabled: {
-        bg: 'purple/500',
-        fg: 'white',
-      },
-      hovered: {
-        bg: 'purple/600',
-        fg: 'white',
-      },
-    },
-    dark: {
-      enabled: {
-        bg: 'purple/400',
-        fg: 'black',
-      },
-      hovered: {
-        bg: 'purple/300',
-        fg: 'black',
-      },
-    },
-  })
-})