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

package/src/theme/studioTheme/color.ts

@@ -1,650 +0,0 @@
-import {ColorTints, black, hues, white} from '@sanity/color'
-import {rgba} from '../lib/color-fns'
-import {ThemeColorName, createColorTheme} from '../lib/theme'
-import {multiply, screen} from './helpers'
-import {getColorHex} from './tints'
-
-export const tones: Record<ThemeColorName, ColorTints> = {
-  default: hues.gray,
-  transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
-  caution: hues.yellow,
-  critical: hues.red,
-} as const
-
-const NEUTRAL_TONES = ['default', 'transparent']
-
-export const color = createColorTheme({
-  base: ({dark, name}) => {
-    if (name === 'default') {
-      const tints = hues.gray
-      const skeletonFrom = dark ? tints[900].hex : tints[100].hex
-
-      return {
-        fg: dark ? white.hex : black.hex,
-        bg: getColorHex(tones['default'], dark, 'default', 'bg_base'),
-        border: getColorHex(tones['default'], dark, 'default', 'border_base'),
-        focusRing: getColorHex(tones['positive'], dark, 'positive', 'border_accent'),
-        shadow: {
-          outline: rgba(tints[500].hex, 0.4),
-          umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2),
-          penumbra: dark ? rgba(tints[950].hex, 0.28) : rgba(tints[500].hex, 0.14),
-          ambient: dark ? rgba(tints[950].hex, 0.24) : rgba(tints[500].hex, 0.12),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (name === 'transparent') {
-      const tints = tones.default
-      const skeletonFrom = tints[dark ? 800 : 200].hex
-
-      return {
-        fg: tints[dark ? 100 : 900].hex,
-        bg: tints[dark ? 950 : 50].hex,
-        border: tints[dark ? 800 : 300].hex,
-        focusRing: hues.blue[500].hex,
-        shadow: {
-          outline: rgba(tints[500].hex, 0.4),
-          umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-          penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-          ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    const tints = tones[name] || tones.default
-    const skeletonFrom = tints[dark ? 800 : 200].hex
-
-    return {
-      fg: tints[dark ? 100 : 900].hex,
-      bg: getColorHex(tints, dark, name, 'bg_base'),
-      border: getColorHex(tints, dark, name, 'border_base'),
-      focusRing: getColorHex(tints, dark, name, 'border_accent'),
-      shadow: {
-        outline: rgba(tints[500].hex, 0.4),
-        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5),
-      },
-    }
-  },
-
-  solid: ({base, dark, name, state, tone}) => {
-    const mix = dark ? screen : multiply
-    const mix2 = dark ? multiply : screen
-    const defaultTints = tones[name] || tones.default
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone)
-
-    let tints = tones[tone === 'default' ? name : tone] || defaultTints
-
-    if (state === 'disabled') {
-      tints = defaultTints
-
-      const bg = getColorHex(tones.default, dark, 'default', 'bg_tint')
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
-
-      return {
-        bg,
-        bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: getColorHex(tones.default, dark, 'default', 'bg_base'),
-        fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
-        iconColor: getColorHex(tones.default, dark, 'default', 'border_base'),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        },
-        accent: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        },
-        link: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        },
-        code: {
-          bg,
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (state === 'hovered') {
-      const bg = getColorHex(tints, dark, tone, 'bg_accent_hover')
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
-
-      return {
-        bg,
-        bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        accent: {
-          fg: mix2(bg, hues.red[dark ? 800 : 200].hex),
-        },
-        link: {
-          fg: mix2(bg, hues.blue[dark ? 800 : 200].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (state === 'pressed') {
-      const bg = getColorHex(tints, dark, tone, 'bg_accent_active')
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 600].hex)
-
-      return {
-        bg: bg,
-        bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        accent: {
-          fg: mix2(bg, hues.red[dark ? 800 : 200].hex),
-        },
-        link: {
-          fg: mix2(bg, hues.blue[dark ? 800 : 200].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (state === 'selected') {
-      if (isNeutral) {
-        tints = tones.primary
-      }
-
-      const bg = mix(base.bg, tints[dark ? 200 : 800].hex)
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
-
-      return {
-        bg,
-        bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        accent: {
-          fg: mix2(bg, hues.red[dark ? 800 : 200].hex),
-        },
-        link: {
-          fg: mix2(bg, hues.blue[dark ? 800 : 200].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    // state: "enabled" | unknown
-    const bg = getColorHex(tints, dark, tone, 'bg_accent')
-    const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
-
-    return {
-      bg,
-      bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: bg,
-      fg: getColorHex(tints, dark, 'default', 'bg_base'),
-      iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
-      muted: {
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex),
-      },
-      accent: {
-        fg: mix2(bg, hues.red[dark ? 900 : 100].hex),
-      },
-      link: {
-        fg: mix2(bg, hues.blue[dark ? 900 : 100].hex),
-      },
-      code: {
-        bg: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex),
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5),
-      },
-    }
-  },
-
-  muted: ({base, dark, name, state, tone}) => {
-    const mix = dark ? screen : multiply
-    const defaultTints = tones[name] || tones.default
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone)
-
-    let tints = tones[tone === 'default' ? name : tone] || defaultTints
-
-    if (state === 'disabled') {
-      tints = defaultTints
-
-      const bg = base.bg
-      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
-
-      return {
-        bg,
-        bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tones.default, dark, 'default', 'border_base'),
-        fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
-        iconColor: getColorHex(tones.default, dark, 'default', 'border_base'),
-        muted: {
-          fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
-        },
-        accent: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        link: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        code: {
-          bg,
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        skeleton: {
-          from: rgba(skeletonFrom, 0.5),
-          to: rgba(skeletonFrom, 0.25),
-        },
-      }
-    }
-
-    if (state === 'hovered') {
-      const bg = getColorHex(tints, dark, name, 'bg_base_hover')
-      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
-
-      return {
-        bg,
-        bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
-        muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        accent: {
-          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
-        },
-        link: {
-          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (state === 'pressed') {
-      if (isNeutral) {
-        tints = tones.primary
-      }
-
-      const bg = getColorHex(tints, dark, name, 'bg_base_active')
-      const skeletonFrom = mix(bg, getColorHex(tints, dark, name, 'bg_base_active'))
-
-      return {
-        bg,
-        bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, 'border_base'),
-        fg: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
-        muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        accent: {
-          fg: mix(bg, hues.red[dark ? 400 : 500].hex),
-        },
-        link: {
-          fg: mix(bg, hues.blue[dark ? 400 : 600].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    if (state === 'selected') {
-      if (isNeutral) {
-        tints = tones.primary
-      }
-
-      const bg = mix(base.bg, tints[dark ? 900 : 100].hex)
-      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
-
-      return {
-        bg,
-        bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, 'border_base'),
-        fg: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
-        muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        accent: {
-          fg: mix(bg, hues.red[dark ? 400 : 500].hex),
-        },
-        link: {
-          fg: mix(bg, hues.blue[dark ? 400 : 600].hex),
-        },
-        code: {
-          bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
-        },
-        skeleton: {
-          from: skeletonFrom,
-          to: rgba(skeletonFrom, 0.5),
-        },
-      }
-    }
-
-    const bg = base.bg
-    const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
-
-    return {
-      bg,
-      bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, getColorHex(tints, dark, name, 'bg_base')),
-      fg: getColorHex(tints, dark, tone, 'text_primary'),
-      iconColor: getColorHex(tints, dark, name, 'icon_default'),
-      muted: {
-        fg: getColorHex(tints, dark, tone, 'text_secondary'),
-      },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
-      },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex),
-      },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: getColorHex(tints, dark, tone, 'text_secondary'),
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5),
-      },
-    }
-  },
-
-  button: ({base, mode, muted, solid}) => {
-    if (mode === 'bleed') {
-      return {
-        enabled: {
-          ...muted.enabled,
-          border: muted.enabled.bg,
-        },
-        hovered: {
-          ...muted.hovered,
-          border: muted.hovered.bg,
-        },
-        pressed: {
-          ...muted.pressed,
-          border: muted.pressed.bg,
-        },
-        selected: {
-          ...muted.selected,
-          border: muted.selected.bg,
-        },
-        disabled: {
-          ...muted.disabled,
-          border: muted.disabled.bg,
-        },
-      }
-    }
-
-    if (mode === 'ghost') {
-      return {
-        ...muted,
-        enabled: {
-          ...muted.enabled,
-          border: base.border,
-        },
-      }
-    }
-
-    return solid
-  },
-
-  card: ({base, dark, muted, name, solid, state}) => {
-    if (state === 'hovered') {
-      return muted[name].hovered
-    }
-
-    if (state === 'disabled') {
-      return muted[name].disabled
-    }
-
-    const isNeutral = NEUTRAL_TONES.includes(name)
-    const tints = tones[name] || tones.default
-    const mix = dark ? screen : multiply
-
-    if (state === 'pressed') {
-      if (isNeutral) {
-        return muted.primary.pressed
-      }
-
-      return muted[name].pressed
-    }
-
-    if (state === 'selected') {
-      if (isNeutral) {
-        return solid.primary.enabled
-      }
-
-      return solid[name].enabled
-    }
-
-    const bg = base.bg
-    const skeletonFrom = mix(base.bg, tints[dark ? 900 : 100].hex)
-
-    return {
-      bg,
-      bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      fg: base.fg,
-      iconColor: getColorHex(tints, dark, name, 'icon_default'),
-      border: base.border,
-      muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-      },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
-      },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex),
-      },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: tints[dark ? 400 : 600].hex,
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5),
-      },
-    }
-  },
-
-  input: ({base, dark, mode, state}) => {
-    const mix = dark ? screen : multiply
-
-    if (mode === 'invalid') {
-      const tints = tones.critical
-
-      return {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        bg2: getColorHex(tints, dark, 'critical', 'text_secondary'),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: getColorHex(tints, dark, 'critical', 'border_base'),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
-      }
-    }
-
-    if (state === 'hovered') {
-      return {
-        bg: base.bg,
-        bg2: getColorHex(tones.default, dark, 'default', 'text_secondary'),
-        fg: base.fg,
-        border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
-      }
-    }
-
-    if (state === 'disabled') {
-      return {
-        bg: getColorHex(tones.default, dark, 'default', 'bg_tint'),
-        bg2: getColorHex(tones.default, dark, 'default', 'border_base'),
-        fg: getColorHex(tones.default, dark, 'default', 'text_secondary'),
-        border: getColorHex(tones.default, dark, 'default', 'border_base'),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
-      }
-    }
-
-    if (state === 'readOnly') {
-      return {
-        bg: getColorHex(tones.default, dark, 'default', 'bg_tint'),
-        bg2: getColorHex(tones.default, dark, 'default', 'border_base'),
-        fg: getColorHex(tones.default, dark, 'default', 'text_secondary'),
-        border: getColorHex(tones.default, dark, 'default', 'border_base'),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
-      }
-    }
-
-    return {
-      bg: base.bg,
-      bg2: getColorHex(tones.default, dark, 'default', 'text_secondary'),
-      fg: base.fg,
-      border: base.border,
-      placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
-    }
-  },
-
-  selectable: ({base, muted, tone, solid, state}) => {
-    if (state === 'enabled') {
-      return {
-        ...muted[tone].enabled,
-        bg: base.bg,
-      }
-    }
-
-    if (state === 'pressed') {
-      if (tone === 'default') {
-        return muted.primary.pressed
-      }
-
-      return muted[tone].pressed
-    }
-
-    if (state === 'selected') {
-      if (tone === 'default') {
-        return solid.primary.enabled
-      }
-
-      return solid[tone].enabled
-    }
-
-    if (state === 'disabled') {
-      return {
-        ...muted[tone].disabled,
-        bg: base.bg,
-      }
-    }
-
-    return muted[tone][state]
-  },
-
-  spot: ({base, dark, key}) => {
-    const mix = dark ? screen : multiply
-
-    return mix(base.bg, hues[key][dark ? 400 : 500].hex)
-  },
-
-  syntax: ({base, dark}) => {
-    const mix = dark ? screen : multiply
-    const mainShade = dark ? 400 : 600
-    const secondaryShade = dark ? 600 : 400
-
-    return {
-      atrule: mix(base.bg, hues.purple[mainShade].hex),
-      attrName: mix(base.bg, hues.green[mainShade].hex),
-      attrValue: mix(base.bg, hues.yellow[mainShade].hex),
-      attribute: mix(base.bg, hues.yellow[mainShade].hex),
-      boolean: mix(base.bg, hues.purple[mainShade].hex),
-      builtin: mix(base.bg, hues.purple[mainShade].hex),
-      cdata: mix(base.bg, hues.yellow[mainShade].hex),
-      char: mix(base.bg, hues.yellow[mainShade].hex),
-      class: mix(base.bg, hues.orange[mainShade].hex),
-      className: mix(base.bg, hues.cyan[mainShade].hex),
-      comment: mix(base.bg, hues.gray[secondaryShade].hex),
-      constant: mix(base.bg, hues.purple[mainShade].hex),
-      deleted: mix(base.bg, hues.red[mainShade].hex),
-      doctype: mix(base.bg, hues.gray[secondaryShade].hex),
-      entity: mix(base.bg, hues.red[mainShade].hex),
-      function: mix(base.bg, hues.green[mainShade].hex),
-      hexcode: mix(base.bg, hues.blue[mainShade].hex),
-      id: mix(base.bg, hues.purple[mainShade].hex),
-      important: mix(base.bg, hues.purple[mainShade].hex),
-      inserted: mix(base.bg, hues.yellow[mainShade].hex),
-      keyword: mix(base.bg, hues.magenta[mainShade].hex),
-      number: mix(base.bg, hues.purple[mainShade].hex),
-      operator: mix(base.bg, hues.magenta[mainShade].hex),
-      prolog: mix(base.bg, hues.gray[secondaryShade].hex),
-      property: mix(base.bg, hues.blue[mainShade].hex),
-      pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
-      pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
-      punctuation: mix(base.bg, hues.gray[mainShade].hex),
-      regex: mix(base.bg, hues.blue[mainShade].hex),
-      selector: mix(base.bg, hues.red[mainShade].hex),
-      string: mix(base.bg, hues.yellow[mainShade].hex),
-      symbol: mix(base.bg, hues.purple[mainShade].hex),
-      tag: mix(base.bg, hues.red[mainShade].hex),
-      unit: mix(base.bg, hues.orange[mainShade].hex),
-      url: mix(base.bg, hues.red[mainShade].hex),
-      variable: mix(base.bg, hues.red[mainShade].hex),
-    }
-  },
-})

package/src/theme/studioTheme/helpers.ts

@@ -1,17 +0,0 @@
-import {parseColor, rgbToHex, screen as _screen, multiply as _multiply} from '../lib/color-fns'
-
-export function multiply(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_multiply(b, s))
-
-  return hex
-}
-
-export function screen(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_screen(b, s))
-
-  return hex
-}

package/src/theme/studioTheme/index.ts

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