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

package/src/theme/studioTheme/color.ts

@@ -1,8 +1,5 @@
-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'
+import {ColorTints, hues} from '@sanity/color'
+import {ThemeColorName} from '../lib/theme'
 
 export const tones: Record<ThemeColorName, ColorTints> = {
   default: hues.gray,
@@ -12,639 +9,3 @@ export const tones: Record<ThemeColorName, ColorTints> = {
   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,10 +1,20 @@
-import {parseColor, rgbToHex, screen as _screen, multiply as _multiply} from '../lib/color-fns'
+import {
+  parseColor,
+  rgbToHex,
+  screen as _screen,
+  multiply as _multiply,
+  rgba,
+} 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))
 
+  if (s.a) {
+    return rgba(hex, s.a)
+  }
+
   return hex
 }
 
@@ -13,5 +23,9 @@ export function screen(bg: string, fg: string): string {
   const s = parseColor(fg)
   const hex = rgbToHex(_screen(b, s))
 
+  if (s.a) {
+    return rgba(hex, s.a)
+  }
+
   return hex
 }

package/src/theme/studioTheme/theme.ts

@@ -1,5 +1,5 @@
 import {RootTheme} from '../types'
-import {color} from './color'
+import {tones} from './color'
 import {fonts} from './fonts'
 
 /**
@@ -21,7 +21,13 @@ export const studioTheme: RootTheme = {
   card: {
     focusRing: {offset: -1, width: 1},
   },
-  color,
+  color: {
+    tones: tones,
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This is necessary until workshop is updated.
+    base: {bg: '#fffff'},
+  },
   container: [320, 640, 960, 1280, 1600, 1920],
   focusRing: {
     offset: 1,
@@ -33,7 +39,7 @@ export const studioTheme: RootTheme = {
   shadows: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
     {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
     {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},