@sanity/ui 1.8.3 → 2.0.0-alpha.10

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

@@ -1,62 +0,0 @@
-/** @jest-environment jsdom */
-
-import {createColorTheme} from './factory'
-
-describe('color', () => {
-  describe('createColorTheme', () => {
-    it('should generate base (scheme=light, name=default)', () => {
-      const theme = createColorTheme()
-      const scheme = 'light'
-      const name = 'default'
-      const color = theme[scheme][name]
-
-      expect(color.base).toEqual({
-        bg: 'hsl(0, 0%, 100%)',
-        border: 'hsl(0, 0%, 95%)',
-        fg: 'hsl(0, 0%, 0%)',
-        focusRing: 'hsl(240, 100%, 50%)',
-        shadow: {
-          ambient: 'hsl(0, 0%, 0%)',
-          outline: 'hsl(0, 0%, 0%)',
-          penumbra: 'hsl(0, 0%, 0%)',
-          umbra: 'hsl(0, 0%, 0%)',
-        },
-        skeleton: {
-          from: 'hsl(0, 0%, 0%)',
-          to: 'hsl(0, 0%, 0%)',
-        },
-      })
-    })
-
-    it('should generate muted states (scheme=light, name=default)', () => {
-      const theme = createColorTheme()
-      const scheme = 'light'
-      const name = 'default'
-      const color = theme[scheme][name]
-
-      expect(color.muted.default.enabled).toEqual({
-        bg: 'hsl(0, 0%, 95%)',
-        bg2: 'hsl(0, 0%, 95%)',
-        border: 'hsl(0, 0%, 70%)',
-        fg: 'hsl(0, 0%, 20%)',
-        muted: {
-          fg: 'hsl(0, 0%, 0%)',
-        },
-        link: {
-          fg: 'hsl(0, 0%, 0%)',
-        },
-        accent: {
-          fg: 'hsl(0, 0%, 0%)',
-        },
-        code: {
-          bg: 'hsl(0, 0%, 0%)',
-          fg: 'hsl(0, 0%, 0%)',
-        },
-        skeleton: {
-          from: 'hsl(0, 0%, 0%)',
-          to: 'hsl(0, 0%, 0%)',
-        },
-      })
-    })
-  })
-})

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

@@ -1,382 +0,0 @@
-import {ThemeColorBuilderOpts} from './factory'
-
-const black = 'hsl(0, 0%, 0%)'
-const white = 'hsl(0, 0%, 100%)'
-
-const colors = {
-  default: {
-    lightest: 'hsl(0, 0%, 95%)',
-    lighter: 'hsl(0, 0%, 70%)',
-    light: 'hsl(0, 0%, 65%)',
-    base: 'hsl(0, 0%, 50%)',
-    dark: 'hsl(0, 0%, 35%)',
-    darker: 'hsl(0, 0%, 20%)',
-    darkest: 'hsl(0, 0%, 5%)',
-  },
-  transparent: {
-    lightest: 'hsl(240, 100%, 95%)',
-    lighter: 'hsl(240, 100%, 70%)',
-    light: 'hsl(240, 100%, 65%)',
-    base: 'hsl(240, 100%, 50%)',
-    dark: 'hsl(240, 100%, 35%)',
-    darker: 'hsl(240, 100%, 20%)',
-    darkest: 'hsl(240, 100%, 5%)',
-  },
-  primary: {
-    lightest: 'hsl(240, 100%, 95%)',
-    lighter: 'hsl(240, 100%, 70%)',
-    light: 'hsl(240, 100%, 65%)',
-    base: 'hsl(240, 100%, 50%)',
-    dark: 'hsl(240, 100%, 35%)',
-    darker: 'hsl(240, 100%, 20%)',
-    darkest: 'hsl(240, 100%, 5%)',
-  },
-  positive: {
-    lightest: 'hsl(120, 100%, 95%)',
-    lighter: 'hsl(120, 100%, 70%)',
-    light: 'hsl(120, 100%, 65%)',
-    base: 'hsl(120, 100%, 50%)',
-    dark: 'hsl(120, 100%, 35%)',
-    darker: 'hsl(120, 100%, 20%)',
-    darkest: 'hsl(120, 100%, 5%)',
-  },
-  caution: {
-    lightest: 'hsl(60, 100%, 95%)',
-    lighter: 'hsl(60, 100%, 70%)',
-    light: 'hsl(60, 100%, 65%)',
-    base: 'hsl(60, 100%, 50%)',
-    dark: 'hsl(60, 100%, 35%)',
-    darker: 'hsl(60, 100%, 20%)',
-    darkest: 'hsl(60, 100%, 5%)',
-  },
-  critical: {
-    lightest: 'hsl(0, 100%, 95%)',
-    lighter: 'hsl(0, 100%, 70%)',
-    light: 'hsl(0, 100%, 65%)',
-    base: 'hsl(0, 100%, 50%)',
-    dark: 'hsl(0, 100%, 35%)',
-    darker: 'hsl(0, 100%, 20%)',
-    darkest: 'hsl(0, 100%, 5%)',
-  },
-}
-
-const spots = {
-  gray: 'hsl(0, 0%, 50%)',
-  red: 'hsl(0, 100%, 50%)',
-  orange: 'hsl(30, 100%, 50%)',
-  yellow: 'hsl(60, 100%, 50%)',
-  green: 'hsl(120, 100%, 50%)',
-  cyan: 'hsl(180, 100%, 50%)',
-  blue: 'hsl(240, 100%, 50%)',
-  purple: 'hsl(270, 100%, 50%)',
-  magenta: 'hsl(300, 100%, 50%)',
-}
-
-const tones = {
-  transparent: {
-    bg: [colors.transparent.darkest, colors.transparent.lightest],
-    fg: [colors.transparent.lightest, colors.transparent.darkest],
-    border: [colors.transparent.darker, colors.transparent.lighter],
-    focusRing: [colors.transparent.base, colors.transparent.base],
-  },
-  primary: {
-    bg: [colors.primary.darkest, colors.primary.lightest],
-    fg: [colors.primary.lightest, colors.primary.darkest],
-    border: [colors.primary.darker, colors.primary.lighter],
-    focusRing: [colors.primary.base, colors.primary.base],
-  },
-  positive: {
-    bg: [colors.positive.darkest, colors.positive.lightest],
-    fg: [colors.positive.lightest, colors.positive.darkest],
-    border: [colors.positive.darker, colors.positive.lighter],
-    focusRing: [colors.positive.base, colors.positive.base],
-  },
-  caution: {
-    bg: [colors.caution.darkest, colors.caution.lightest],
-    fg: [colors.caution.lightest, colors.caution.darkest],
-    border: [colors.caution.darker, colors.caution.lighter],
-    focusRing: [colors.caution.base, colors.caution.base],
-  },
-  critical: {
-    bg: [colors.critical.darkest, colors.critical.lightest],
-    fg: [colors.critical.lightest, colors.critical.darkest],
-    border: [colors.critical.darker, colors.critical.lighter],
-    focusRing: [colors.critical.base, colors.critical.base],
-  },
-}
-
-export const defaultOpts: ThemeColorBuilderOpts = {
-  base: ({dark, name}) => {
-    if (name === 'default') {
-      return {
-        bg: dark ? black : white,
-        fg: dark ? white : black,
-        border: dark ? colors.default.darkest : colors.default.lightest,
-        focusRing: colors.primary.base,
-        shadow: {
-          outline: black,
-          umbra: black,
-          penumbra: black,
-          ambient: black,
-        },
-        skeleton: {
-          from: dark ? white : black,
-          to: dark ? white : black,
-        },
-      }
-    }
-
-    // Variants:
-    // - primary
-    // - positive
-    // - caution
-    // - critical
-    return {
-      bg: tones[name].bg[dark ? 0 : 1],
-      fg: tones[name].fg[dark ? 0 : 1],
-      border: tones[name].border[dark ? 0 : 1],
-      focusRing: tones[name].focusRing[dark ? 0 : 1],
-      shadow: {
-        outline: black,
-        umbra: black,
-        penumbra: black,
-        ambient: black,
-      },
-      skeleton: {
-        from: dark ? white : black,
-        to: dark ? white : black,
-      },
-    }
-  },
-
-  solid: ({base, dark, state, tone}) => {
-    const color = colors[tone]
-
-    if (state === 'hovered') {
-      return {
-        bg: dark ? color.light : color.dark,
-        bg2: dark ? color.light : color.dark,
-        border: dark ? color.lighter : color.darker,
-        fg: dark ? color.darkest : color.lightest,
-        muted: {
-          fg: black,
-        },
-        accent: {
-          fg: black,
-        },
-        link: {
-          fg: black,
-        },
-        code: {
-          bg: black,
-          fg: black,
-        },
-        skeleton: base.skeleton,
-      }
-    }
-
-    return {
-      bg: color.base,
-      bg2: color.base,
-      border: dark ? color.light : color.dark,
-      fg: dark ? color.darkest : color.lightest,
-      muted: {
-        fg: black,
-      },
-      accent: {
-        fg: black,
-      },
-      link: {
-        fg: black,
-      },
-      code: {
-        bg: black,
-        fg: black,
-      },
-      skeleton: base.skeleton,
-    }
-  },
-
-  muted: ({base, dark, state, tone}) => {
-    const color = colors[tone]
-
-    if (state === 'hovered') {
-      return {
-        bg: dark ? color.darker : color.lighter,
-        bg2: dark ? color.darker : color.lighter,
-        border: dark ? color.lighter : color.darker,
-        fg: dark ? color.lightest : color.darkest,
-        muted: {
-          fg: black,
-        },
-        accent: {
-          fg: black,
-        },
-        link: {
-          fg: black,
-        },
-        code: {
-          bg: black,
-          fg: black,
-        },
-        skeleton: base.skeleton,
-      }
-    }
-
-    return {
-      bg: dark ? color.darkest : color.lightest,
-      bg2: dark ? color.darkest : color.lightest,
-      border: dark ? color.darker : color.lighter,
-      fg: dark ? color.lighter : color.darker,
-      muted: {
-        fg: black,
-      },
-      accent: {
-        fg: black,
-      },
-      link: {
-        fg: black,
-      },
-      code: {
-        bg: black,
-        fg: black,
-      },
-      skeleton: base.skeleton,
-    }
-  },
-
-  button: ({base, mode, muted, solid}) => {
-    if (mode === 'bleed') {
-      return {
-        ...muted,
-        enabled: {
-          bg: 'transparent',
-          bg2: 'transparent',
-          fg: muted.enabled.fg,
-          border: 'transparent',
-          muted: {
-            fg: black,
-          },
-          accent: {
-            fg: black,
-          },
-          link: {
-            fg: black,
-          },
-          code: {
-            bg: black,
-            fg: black,
-          },
-          skeleton: base.skeleton,
-        },
-        hovered: {
-          bg: muted.enabled.bg,
-          bg2: muted.enabled.bg,
-          fg: muted.hovered.fg,
-          border: 'transparent',
-          muted: {
-            fg: black,
-          },
-          accent: {
-            fg: black,
-          },
-          link: {
-            fg: black,
-          },
-          code: {
-            bg: black,
-            fg: black,
-          },
-          skeleton: base.skeleton,
-        },
-      }
-    }
-
-    if (mode === 'ghost')
-      return {
-        ...solid,
-        enabled: muted.enabled,
-      }
-
-    return solid
-  },
-
-  card: ({base}) => {
-    return {
-      bg: black,
-      bg2: black,
-      fg: black,
-      border: black,
-      muted: {
-        fg: black,
-      },
-      accent: {
-        fg: black,
-      },
-      link: {
-        fg: black,
-      },
-      code: {
-        bg: black,
-        fg: black,
-      },
-      skeleton: base.skeleton,
-    }
-  },
-
-  input: () => {
-    return {
-      bg: black,
-      fg: black,
-      border: black,
-      placeholder: black,
-    }
-  },
-
-  selectable: ({muted, state, tone}) => {
-    return muted[tone][state]
-  },
-
-  spot: ({key}) => {
-    return spots[key]
-  },
-
-  syntax: () => ({
-    atrule: black,
-    attrName: black,
-    attrValue: black,
-    attribute: black,
-    boolean: black,
-    builtin: black,
-    cdata: black,
-    char: black,
-    class: black,
-    className: black,
-    comment: black,
-    constant: black,
-    deleted: black,
-    doctype: black,
-    entity: black,
-    function: black,
-    hexcode: black,
-    id: black,
-    important: black,
-    inserted: black,
-    keyword: black,
-    number: black,
-    operator: black,
-    prolog: black,
-    property: black,
-    pseudoClass: black,
-    pseudoElement: black,
-    punctuation: black,
-    regex: black,
-    selector: black,
-    string: black,
-    symbol: black,
-    tag: black,
-    unit: black,
-    url: black,
-    variable: black,
-  }),
-}

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,27 +0,0 @@
-/**
- * @public
- */
-export interface ThemeColorInputState {
-  bg: 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
-}