@sanity/ui 2.0.0-alpha.14 → 2.0.0-alpha.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.16",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/dialog/dialog.tsx

@@ -309,10 +309,9 @@ const DialogCard = forwardRef(function DialogCard(
             <DialogHeader
               $isContentScrollable={isContentScrollable}
               $hasScrolledFromTop={hasScrolledFromTop}
-              padding={3}
             >
               <Flex align="center">
-                <Box flex={1} padding={3}>
+                <Box flex={1} margin={1} padding={4}>
                   {header && (
                     <Text id={labelId} size={1} weight="medium">
                       {header}
@@ -320,14 +319,15 @@ const DialogCard = forwardRef(function DialogCard(
                   )}
                 </Box>
                 {showCloseButton && (
-                  <Button
-                    aria-label="Close dialog"
-                    disabled={!onClose}
-                    icon={CloseIcon}
-                    mode="bleed"
-                    onClick={onClose}
-                    padding={3}
-                  />
+                  <Box padding={3}>
+                    <Button
+                      aria-label="Close dialog"
+                      disabled={!onClose}
+                      icon={CloseIcon}
+                      mode="bleed"
+                      onClick={onClose}
+                    />
+                  </Box>
                 )}
               </Flex>
             </DialogHeader>

package/src/theme/_internal/__workshop__/build/story.tsx

@@ -34,45 +34,71 @@ const Root = styled.div`
   }
 
   .button {
-    background-color: var(--button-enabled-bg);
-    color: var(--button-enabled-fg);
+    background-color: var(--bg);
+    color: var(--fg);
     box-shadow:
-      inset 0 0 0 1px var(--border-color),
-      0 1px 0 0 color-mix(in srgb, var(--border-color), transparent 75%);
+      inset 0 0 0 1px var(--border),
+      0 1px 0 0 color-mix(in srgb, var(--border), transparent 75%);
     text-align: center;
     border-radius: 3px;
     font-weight: 500;
     cursor: default;
-    transition: box-shadow 80ms ease-in-out;
+    transition: box-shadow 50ms ease-in-out;
 
-    --border-color: var(--button-enabled-border);
+    --bg: var(--button-enabled-bg);
+    --fg: var(--button-enabled-fg);
+    --border: var(--button-enabled-border);
+    --bg2: var(--button-enabled-bg2);
+    --muted-fg: var(--button-enabled-muted-fg);
   }
 
   .button:hover {
-    background-color: var(--button-hovered-bg);
-    color: var(--button-hovered-fg);
-    --border-color: var(--button-hovered-border);
+    --bg: var(--button-hovered-bg);
+    --fg: var(--button-hovered-fg);
+    --border: var(--button-hovered-border);
+    --bg2: var(--button-hovered-bg2);
+    --muted-fg: var(--button-hovered-muted-fg);
+  }
+
+  .button:focus {
+    outline: none;
+    box-shadow:
+      inset 0 0 0 1px var(--border),
+      0 0 0 1px var(--base-bg),
+      0 0 0 3px var(--focus-ring);
+
+    --bg: var(--button-hovered-bg);
+    --fg: var(--button-hovered-fg);
+    --border: var(--button-hovered-border);
+    --bg2: var(--button-hovered-bg2);
+    --muted-fg: var(--button-hovered-muted-fg);
   }
 
   .button:active {
     background-color: var(--button-pressed-bg);
     color: var(--button-pressed-fg);
-    --border-color: var(--button-pressed-border);
-    box-shadow: inset 0 0 0 1px var(--border-color);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-pressed-border);
+    --bg2: var(--button-pressed-bg2);
+    --muted-fg: var(--button-pressed-muted-fg);
   }
 
   .button.selected {
     background-color: var(--button-selected-bg);
     color: var(--button-selected-fg);
-    --border-color: var(--button-selected-border);
-    box-shadow: inset 0 0 0 1px var(--border-color);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-selected-border);
+    --bg2: var(--button-selected-bg2);
+    --muted-fg: var(--button-selected-muted-fg);
   }
 
   .button.disabled {
     background-color: var(--button-disabled-bg);
     color: var(--button-disabled-fg);
-    --border-color: var(--button-disabled-border);
-    box-shadow: inset 0 0 0 1px var(--border-color);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-disabled-border);
+    --bg2: var(--button-disabled-bg2);
+    --muted-fg: var(--button-disabled-muted-fg);
   }
 `
 
@@ -107,17 +133,44 @@ function BaseTonePreview(props: {
     <div
       style={
         {
-          backgroundColor: color[baseTone].base.bg,
-          color: color[baseTone].base.fg,
-          '--border-color': color[baseTone].base.border,
+          backgroundColor: 'var(--bg)',
+          color: 'var(--fg)',
+
+          '--base-bg': color[baseTone].base.bg,
+          '--bg': 'var(--base-bg)',
+          '--fg': color[baseTone].base.fg,
+          '--border': color[baseTone].base.border,
+          '--focus-ring': color[baseTone].base.focusRing,
+          '--shadow-outline': color[baseTone].base.shadow.outline,
+          '--shadow-umbra': color[baseTone].base.shadow.umbra,
+          '--shadow-penumbra': color[baseTone].base.shadow.penumbra,
+          '--shadow-ambient': color[baseTone].base.shadow.ambient,
+          '--skeleton-from': color[baseTone].base.skeleton.from,
+          '--skeleton-to': color[baseTone].base.skeleton.to,
         } as any
       }
     >
-      <div style={{maxWidth: 540, margin: 'auto', padding: '20px 0'}}>
+      <div style={{maxWidth: 320, margin: 'auto', padding: '20px 0'}}>
         <pre style={{padding: 12}}>
           color/{scheme}/{baseTone}
         </pre>
-        <div style={{padding: '1px 12px 12px 12px'}}>
+        <div style={{padding: 12}}>
+          <div
+            style={{
+              boxShadow: [
+                `0 0 0 1px var(--shadow-outline)`,
+                `0 6px 8px -4px var(--shadow-umbra)`,
+                `0 12px 17px 2px var(--shadow-penumbra)`,
+                `0 5px 22px 4px var(--shadow-ambient)`,
+              ].join(', '),
+              padding: 12,
+              borderRadius: 3,
+            }}
+          >
+            Shadow
+          </div>
+        </div>
+        <div style={{marginTop: 20, padding: '1px 12px 12px 12px'}}>
           {COLOR_BUTTON_MODES.map((mode) => (
             <div key={mode} style={{display: 'flex', flexDirection: 'column'}}>
               {COLOR_STATE_TONES.map((tone) => {
@@ -128,43 +181,100 @@ function BaseTonePreview(props: {
                     key={tone}
                     style={
                       {
-                        border: '1px solid var(--border-color)',
+                        border: '1px solid var(--border)',
                         padding: 4,
                         display: 'flex',
+                        flexDirection: 'column',
                         marginTop: -1,
-                        gap: 4,
 
                         '--button-enabled-bg': button.enabled.bg,
+                        '--button-enabled-bg2': button.enabled.bg2,
                         '--button-enabled-fg': button.enabled.fg,
                         '--button-enabled-border': button.enabled.border,
+                        '--button-enabled-muted-fg': button.enabled.muted.fg,
 
                         '--button-hovered-bg': button.hovered.bg,
+                        '--button-hovered-bg2': button.hovered.bg2,
                         '--button-hovered-fg': button.hovered.fg,
                         '--button-hovered-border': button.hovered.border,
+                        '--button-hovered-muted-fg': button.hovered.muted.fg,
 
                         '--button-pressed-bg': button.pressed.bg,
+                        '--button-pressed-bg2': button.pressed.bg2,
                         '--button-pressed-fg': button.pressed.fg,
                         '--button-pressed-border': button.pressed.border,
+                        '--button-pressed-muted-fg': button.pressed.muted.fg,
 
                         '--button-selected-bg': button.selected.bg,
+                        '--button-selected-bg2': button.selected.bg2,
                         '--button-selected-fg': button.selected.fg,
                         '--button-selected-border': button.selected.border,
+                        '--button-selected-muted-fg': button.selected.muted.fg,
 
                         '--button-disabled-bg': button.disabled.bg,
+                        '--button-disabled-bg2': button.disabled.bg2,
                         '--button-disabled-fg': button.disabled.fg,
                         '--button-disabled-border': button.disabled.border,
+                        '--button-disabled-muted-fg': button.disabled.muted.fg,
                       } as any
                     }
                   >
-                    <pre style={{flex: 2, padding: 8}}>{`mode="${mode}" tone="${tone}"`}</pre>
-                    <div className="button" style={{flex: 'none', padding: 8}}>
-                      Button
-                    </div>
-                    <div className="button selected" style={{flex: 'none', padding: 8}}>
-                      Button
-                    </div>
-                    <div className="button disabled" style={{flex: 'none', padding: 8}}>
-                      Button
+                    <pre style={{padding: 8}}>{`mode="${mode}" tone="${tone}"`}</pre>
+                    <div
+                      style={{
+                        display: 'flex',
+                        gap: 4,
+                      }}
+                    >
+                      <div
+                        className="button"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                        tabIndex={0}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--button-enabled-bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="button selected"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="button disabled"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
                     </div>
                   </div>
                 )

package/src/theme/_internal/build/buildTheme.ts

@@ -2,14 +2,15 @@ import {ThemeConfig} from '../config'
 import {TMP_Theme} from '../types'
 import {buildColorTheme} from './colorTheme/buildColorTheme'
 import {renderColorTheme} from './colorTheme/renderColorTheme'
-import {defaultColorPalette} from './defaults/colorPalette'
 
 /** @internal */
 export function buildTheme(config?: ThemeConfig): TMP_Theme {
+  const color: TMP_Theme['color'] = {
+    light: buildColorTheme({scheme: 'light'}, config),
+    dark: buildColorTheme({scheme: 'dark'}, config),
+  }
+
   return {
-    color: renderColorTheme(config?.color?.palette ?? defaultColorPalette, {
-      light: buildColorTheme({scheme: 'light'}, config),
-      dark: buildColorTheme({scheme: 'dark'}, config),
-    }),
+    color: renderColorTheme(color, config),
   }
 }

package/src/theme/_internal/build/colorTheme/buildColorTheme.ts

@@ -13,7 +13,8 @@ import {
   TMP_StateColorTheme,
 } from '../../types'
 import {defaultColorTokens} from '../defaults/colorTokens'
-import {resolveColorTokenValue} from '../helpers'
+import {ColorTokenContext, resolveColorTokenValue as _color} from '../helpers'
+import {resolveColorTokens} from './resolveColorTokens'
 
 export function buildColorTheme(
   options: {scheme: 'light' | 'dark'},
@@ -21,13 +22,21 @@ export function buildColorTheme(
 ): TMP_ColorTheme {
   const {scheme} = options
 
+  const resolvedConfig = {
+    ...config,
+    color: {
+      ...config?.color,
+      tokens: resolveColorTokens(config?.color?.tokens ?? defaultColorTokens),
+    },
+  }
+
   return {
-    transparent: buildBaseColorTheme({scheme, tone: 'transparent'}, config),
-    default: buildBaseColorTheme({scheme, tone: 'default'}, config),
-    primary: buildBaseColorTheme({scheme, tone: 'primary'}, config),
-    positive: buildBaseColorTheme({scheme, tone: 'positive'}, config),
-    caution: buildBaseColorTheme({scheme, tone: 'caution'}, config),
-    critical: buildBaseColorTheme({scheme, tone: 'critical'}, config),
+    transparent: buildBaseColorTheme({scheme, tone: 'transparent'}, resolvedConfig),
+    default: buildBaseColorTheme({scheme, tone: 'default'}, resolvedConfig),
+    primary: buildBaseColorTheme({scheme, tone: 'primary'}, resolvedConfig),
+    positive: buildBaseColorTheme({scheme, tone: 'positive'}, resolvedConfig),
+    caution: buildBaseColorTheme({scheme, tone: 'caution'}, resolvedConfig),
+    critical: buildBaseColorTheme({scheme, tone: 'critical'}, resolvedConfig),
   }
 }
 
@@ -36,34 +45,30 @@ export function buildBaseColorTheme(
   config?: ThemeConfig,
 ): TMP_BaseColorTheme {
   const {scheme, tone} = options
-  const tokens = config?.color?.tokens ?? defaultColorTokens
-  const any = tokens?.['*']
-  const toneTokens = tokens?.[tone]
-  const hue = toneTokens?._hue || any?._hue || 'gray'
-
-  const bg = resolveColorTokenValue({
-    hue,
-    scheme,
-    value: toneTokens?.bg || any?.bg || ['gray/50', 'black'],
-  })
-
-  const _blend = toneTokens?._blend || any?._blend || ['screen', 'multiply']
+  const tokens = config?.color?.tokens?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+  const bg = _color(context, tokens?.bg || ['gray/50', 'black'])
+  const blendMode = tokens?._blend || ['screen', 'multiply']
 
   return {
-    _blend: _blend[scheme === 'light' ? 0 : 1],
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
     dark: scheme === 'dark',
     base: {
       bg,
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: toneTokens?.fg || any?.fg || ['black', 'white'],
-      }),
-      border: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: toneTokens?.border || any?.border || ['black', 'white'],
-      }),
+      fg: _color(context, tokens?.fg || ['black', 'white']),
+      border: _color(context, tokens?.border || ['black', 'white']),
+      focusRing: _color(context, tokens?.focusRing || ['black', 'white']),
+      shadow: {
+        outline: _color(context, tokens?.shadow?.outline || ['500/0.2', '500/0.2']),
+        umbra: _color(context, tokens?.shadow?.umbra || ['500/0.2', '500/0.2']),
+        penumbra: _color(context, tokens?.shadow?.penumbra || ['500/0.2', '500/0.2']),
+        ambient: _color(context, tokens?.shadow?.ambient || ['500/0.2', '500/0.2']),
+      },
+      skeleton: {
+        from: _color(context, tokens?.skeleton?.from || ['500/0.2', '500/0.2']),
+        to: _color(context, tokens?.skeleton?.to || ['500/0.2', '500/0.2']),
+      },
     },
     button: buildButtonColorTheme({scheme}, config),
   }
@@ -131,92 +136,29 @@ function buildButtonStateColorTheme(
   config?: ThemeConfig,
 ): TMP_StateColorTheme {
   const {mode, tone, scheme, state} = options
-  const tokens = config?.color?.tokens ?? defaultColorTokens
-  const hue =
-    tokens?.button?.[tone]?.[mode]?.[state]?._hue ||
-    tokens?.button?.['*']?.[mode]?.[state]?._hue ||
-    tokens?.button?.[tone]?._hue ||
-    tokens?.[tone]?._hue ||
-    'gray'
-  const spec3 = tokens?.button?.['*']?.[mode]?.['*']
-  const spec2 = tokens?.button?.['*']?.[mode]?.[state]
-  const spec1 = tokens?.button?.[tone]?.[mode]?.['*']
-  const spec0 = tokens?.button?.[tone]?.[mode]?.[state]
-
-  const _blend = spec0?._blend ||
-    spec1?._blend ||
-    spec2?._blend ||
-    spec3?._blend || ['screen', 'multiply']
+  const tokens = config?.color?.tokens?.button?.[tone]?.[mode]?.[state]
+  const hue = tokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
 
   return {
-    _blend: _blend[scheme === 'light' ? 0 : 1],
-    bg: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: spec0?.bg || spec1?.bg || spec2?.bg || spec3?.bg || ['500', '400'],
-    }),
-    bg2: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: spec0?.bg2 || spec1?.bg2 || spec2?.bg2 || spec3?.bg2 || ['500', '400'],
-    }),
-    fg: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: spec0?.fg || spec1?.fg || spec2?.fg || spec3?.fg || ['white', 'black'],
-    }),
-    border: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: spec0?.border || spec1?.border || spec2?.border || spec3?.border || ['500', '400'],
-    }),
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    bg: _color(context, tokens?.bg || ['500', '400']),
+    bg2: _color(context, tokens?.bg2 || ['500', '400']),
+    fg: _color(context, tokens?.fg || ['white', 'black']),
+    border: _color(context, tokens?.border || ['500', '400']),
     muted: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: spec0?.muted?.fg ||
-          spec1?.muted?.fg ||
-          spec2?.muted?.fg ||
-          spec3?.muted?.fg || ['500', '400'],
-      }),
+      fg: _color(context, tokens?.fg || ['500', '400']),
     },
     accent: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: spec0?.accent?.fg ||
-          spec1?.accent?.fg ||
-          spec2?.accent?.fg ||
-          spec3?.accent?.fg || ['500', '400'],
-      }),
+      fg: _color(context, tokens?.fg || ['500', '400']),
     },
     link: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: spec0?.link?.fg ||
-          spec1?.link?.fg ||
-          spec2?.link?.fg ||
-          spec3?.link?.fg || ['500', '400'],
-      }),
+      fg: _color(context, tokens?.fg || ['500', '400']),
     },
     code: {
-      bg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: spec0?.code?.bg ||
-          spec1?.code?.bg ||
-          spec2?.code?.bg ||
-          spec3?.code?.bg || ['500', '400'],
-      }),
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: spec0?.code?.fg ||
-          spec1?.code?.fg ||
-          spec2?.code?.fg ||
-          spec3?.code?.fg || ['500', '400'],
-      }),
+      bg: _color(context, tokens?.bg || ['500', '400']),
+      fg: _color(context, tokens?.fg || ['500', '400']),
     },
   }
 }

package/src/theme/_internal/build/colorTheme/renderColorTheme.ts

@@ -1,6 +1,6 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
 import {rgba} from '../../../lib/color-fns'
-import {ColorBlendModeValue, parseTokenValue, TMP_ColorPalette} from '../../config'
+import {ColorBlendModeValue, parseTokenValue, ThemeConfig, TMP_ColorPalette} from '../../config'
 import {
   TMP_BaseColorTheme,
   TMP_ButtonColorTheme,
@@ -8,19 +8,17 @@ import {
   TMP_ButtonStatesColorTheme,
   TMP_ColorTheme,
   TMP_StateColorTheme,
+  TMP_Theme,
 } from '../../types'
+import {defaultColorPalette} from '../defaults/colorPalette'
 import {multiply, screen} from '../helpers'
 
 export function renderColorTheme(
-  colorPalette: TMP_ColorPalette,
-  value: {
-    light: TMP_ColorTheme
-    dark: TMP_ColorTheme
-  },
-): {
-  light: TMP_ColorTheme
-  dark: TMP_ColorTheme
-} {
+  value: TMP_Theme['color'],
+  config?: ThemeConfig,
+): TMP_Theme['color'] {
+  const colorPalette = config?.color?.palette ?? defaultColorPalette
+
   return {
     light: renderColorScheme(colorPalette, value.light),
     dark: renderColorScheme(colorPalette, value.dark),
@@ -67,6 +65,22 @@ function renderColorBase(
       bg: nestedBg,
       fg: renderColorValue(colorPalette, nestedBg, value._blend, value.base.fg),
       border: renderColorValue(colorPalette, nestedBg, value._blend, value.base.border),
+      focusRing: renderColorValue(colorPalette, nestedBg, value._blend, value.base.focusRing),
+      shadow: {
+        outline: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.outline),
+        umbra: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.umbra),
+        penumbra: renderColorValue(
+          colorPalette,
+          nestedBg,
+          value._blend,
+          value.base.shadow.penumbra,
+        ),
+        ambient: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.ambient),
+      },
+      skeleton: {
+        from: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.from),
+        to: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.to),
+      },
     },
     button: renderButtonColorTheme(colorPalette, nestedBg, value._blend, value.button),
   }
@@ -135,43 +149,45 @@ function renderStateColorTheme(
           value.bg,
         )
 
-  const bg2 = renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg)
-  const fg = renderColorValue(colorPalette, bg, blendMode, value.fg)
-  const border = renderColorValue(colorPalette, bg, blendMode, value.border)
-  const muted = {
-    fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg),
-  }
-  const accent = {
-    fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg),
-  }
-  const link = {
-    fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg),
-  }
-  const code = {
-    bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
-    fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg),
-  }
-
   const blend = rootBlendMode === 'multiply' ? multiply : screen
 
+  const unmixed = {
+    bg2: renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg),
+    fg: renderColorValue(colorPalette, bg, blendMode, value.fg),
+    border: renderColorValue(colorPalette, bg, blendMode, value.border),
+    muted: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg),
+    },
+    accent: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg),
+    },
+    link: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg),
+    },
+    code: {
+      bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
+      fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg),
+    },
+  }
+
   return {
     _blend: blendMode,
     bg: blend(baseBg, bg),
-    bg2: blend(baseBg, bg2),
-    fg: blend(baseBg, fg),
-    border: blend(baseBg, border),
+    bg2: blend(baseBg, unmixed.bg2),
+    fg: blend(baseBg, unmixed.fg),
+    border: blend(baseBg, unmixed.border),
     muted: {
-      fg: blend(baseBg, muted.fg),
+      fg: blend(baseBg, unmixed.muted.fg),
     },
     accent: {
-      fg: blend(baseBg, accent.fg),
+      fg: blend(baseBg, unmixed.accent.fg),
     },
     link: {
-      fg: blend(baseBg, link.fg),
+      fg: blend(baseBg, unmixed.link.fg),
     },
     code: {
-      bg: blend(baseBg, code.bg),
-      fg: blend(baseBg, code.fg),
+      bg: blend(baseBg, unmixed.code.bg),
+      fg: blend(baseBg, unmixed.code.fg),
     },
   }
 }