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

package/dist/index.d.ts

@@ -342,6 +342,17 @@ export declare interface BaseColorTokens {
   bg?: ColorTokenValue
   fg?: ColorTokenValue
   border?: ColorTokenValue
+  focusRing?: ColorTokenValue
+  shadow?: {
+    outline?: ColorTokenValue
+    umbra?: ColorTokenValue
+    penumbra?: ColorTokenValue
+    ambient?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
 }
 
 /**
@@ -3237,6 +3248,17 @@ export declare interface TMP_BaseColorTheme {
     bg: string
     fg: string
     border: string
+    focusRing: string
+    shadow: {
+      outline: string
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+    skeleton: {
+      from: string
+      to: string
+    }
   }
   button: TMP_ButtonColorTheme
 }

package/dist/index.esm.js

@@ -847,7 +847,18 @@ const defaultColorTokens = {
     _blend: ["multiply", "screen"],
     bg: ["50", "950"],
     fg: ["800", "200"],
-    border: ["200", "800"]
+    border: ["200", "800"],
+    focusRing: ["cyan/500", "cyan/500"],
+    shadow: {
+      outline: ["500/0.25", "400/0.3"],
+      umbra: ["500/0.1", "black/0.4"],
+      penumbra: ["500/0.07", "black/0.28"],
+      ambient: ["500/0.06", "black/0.24"]
+    },
+    skeleton: {
+      from: ["100", "900"],
+      to: ["100/0.5", "900/0.5"]
+    }
   },
   transparent: {
     bg: ["50", "black"],
@@ -875,7 +886,11 @@ const defaultColorTokens = {
         "*": {
           _blend: ["screen", "multiply"],
           bg: ["500", "400"],
-          border: ["500/0", "400/0"]
+          bg2: ["950", "50"],
+          border: ["500/0", "400/0"],
+          muted: {
+            fg: ["200", "700"]
+          }
         },
         hovered: {
           bg: ["600", "300"],
@@ -889,15 +904,19 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
-          bg: ["100", "900"]
+          bg: ["200", "900"]
         }
       },
       ghost: {
         "*": {
           _blend: ["multiply", "screen"],
           bg: ["white", "black"],
+          bg2: ["50", "950"],
           fg: ["600", "400"],
-          border: ["200", "800"]
+          border: ["200", "800"],
+          muted: {
+            fg: ["600/0.6", "400/0.6"]
+          }
         },
         hovered: {
           bg: ["50", "950"],
@@ -913,16 +932,20 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
-          fg: ["100", "900"],
-          border: ["100", "900"]
+          fg: ["200", "900"],
+          border: ["100", "950"]
         }
       },
       bleed: {
         "*": {
           _blend: ["multiply", "screen"],
           bg: ["white", "black"],
+          bg2: ["50", "950"],
           fg: ["600", "400"],
-          border: ["white/0", "black/0"]
+          border: ["white/0", "black/0"],
+          muted: {
+            fg: ["600/0.6", "400/0.6"]
+          }
         },
         hovered: {
           bg: ["50", "950"],
@@ -938,7 +961,7 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
-          fg: ["100", "900"]
+          fg: ["200", "900"]
         }
       }
     },
@@ -958,7 +981,7 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
-          bg: ["100", "900"]
+          bg: ["200", "900"]
         }
       }
     }
@@ -1310,12 +1333,11 @@ function isColorValue(str) {
 function isColorOpacityValue(str) {
   return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
 }
-function resolveColorTokenValue(options) {
+function resolveColorTokenValue(context, value) {
   const {
     hue,
-    scheme,
-    value
-  } = options;
+    scheme
+  } = context;
   const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
   if (!node || node.type !== "color") {
     throw new Error("Invalid color token: ".concat(value[0]));
@@ -1355,68 +1377,179 @@ function screen$1(bg, fg) {
   }
   return hex;
 }
+function resolveColorTokens(sparseTokens) {
+  const denseTokens = {
+    ...sparseTokens
+  };
+  for (const tone of COLOR_BASE_TONES) {
+    denseTokens[tone] = resolveBaseColorTones(sparseTokens, tone);
+  }
+  denseTokens.button = resolveButtonColorTokens(sparseTokens);
+  return denseTokens;
+}
+function resolveBaseColorTones(sparseTokens, tone) {
+  const spec0 = sparseTokens == null ? void 0 : sparseTokens[tone];
+  const spec1 = sparseTokens == null ? void 0 : sparseTokens["*"];
+  return {
+    ...spec1,
+    ...spec0,
+    shadow: {
+      ...(spec1 == null ? void 0 : spec1.shadow),
+      ...(spec0 == null ? void 0 : spec0.shadow)
+    },
+    skeleton: {
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveButtonColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonToneColorTokens(sparseTokens, tone);
+  }
+  return tokens;
+}
+function resolveButtonToneColorTokens(sparseTokens, tone) {
+  var _a, _b;
+  const tokens = {
+    ...((_a = sparseTokens.button) == null ? void 0 : _a[tone]),
+    ...((_b = sparseTokens.button) == null ? void 0 : _b["*"])
+  };
+  for (const mode of COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonModeColorTokens(sparseTokens, tone, mode);
+  }
+  return tokens;
+}
+function resolveButtonModeColorTokens(sparseTokens, tone, mode) {
+  var _a, _b, _c, _d;
+  const spec0 = (_b = (_a = sparseTokens.button) == null ? void 0 : _a[tone]) == null ? void 0 : _b[mode];
+  const spec1 = (_d = (_c = sparseTokens.button) == null ? void 0 : _c["*"]) == null ? void 0 : _d[mode];
+  const tokens = {
+    ...spec1,
+    ...spec0
+  };
+  for (const state of COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state);
+  }
+  return tokens;
+}
+function resolveButtonStateColorTokens(tokens, tone, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const spec0 = (_c = (_b = (_a = tokens == null ? void 0 : tokens.button) == null ? void 0 : _a[tone]) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state];
+  const spec1 = (_f = (_e = (_d = tokens == null ? void 0 : tokens.button) == null ? void 0 : _d[tone]) == null ? void 0 : _e[mode]) == null ? void 0 : _f["*"];
+  const spec2 = (_i = (_h = (_g = tokens == null ? void 0 : tokens.button) == null ? void 0 : _g["*"]) == null ? void 0 : _h[mode]) == null ? void 0 : _i[state];
+  const spec3 = (_l = (_k = (_j = tokens == null ? void 0 : tokens.button) == null ? void 0 : _j["*"]) == null ? void 0 : _k[mode]) == null ? void 0 : _l["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue) || (spec2 == null ? void 0 : spec2._hue) || (spec3 == null ? void 0 : spec3._hue) || ((_n = (_m = tokens == null ? void 0 : tokens.button) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue) || ((_o = tokens == null ? void 0 : tokens[tone]) == null ? void 0 : _o._hue);
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {
+      ...(spec3 == null ? void 0 : spec3.muted),
+      ...(spec2 == null ? void 0 : spec2.muted),
+      ...(spec1 == null ? void 0 : spec1.muted),
+      ...(spec0 == null ? void 0 : spec0.muted)
+    },
+    accent: {
+      ...(spec3 == null ? void 0 : spec3.accent),
+      ...(spec2 == null ? void 0 : spec2.accent),
+      ...(spec1 == null ? void 0 : spec1.accent),
+      ...(spec0 == null ? void 0 : spec0.accent)
+    },
+    link: {
+      ...(spec3 == null ? void 0 : spec3.link),
+      ...(spec2 == null ? void 0 : spec2.link),
+      ...(spec1 == null ? void 0 : spec1.link),
+      ...(spec0 == null ? void 0 : spec0.link)
+    },
+    code: {
+      ...(spec3 == null ? void 0 : spec3.code),
+      ...(spec2 == null ? void 0 : spec2.code),
+      ...(spec1 == null ? void 0 : spec1.code),
+      ...(spec0 == null ? void 0 : spec0.code)
+    },
+    skeleton: {
+      ...(spec3 == null ? void 0 : spec3.skeleton),
+      ...(spec2 == null ? void 0 : spec2.skeleton),
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
 function buildColorTheme(options, config) {
+  var _a, _b;
   const {
     scheme
   } = options;
+  const resolvedConfig = {
+    ...config,
+    color: {
+      ...(config == null ? void 0 : config.color),
+      tokens: resolveColorTokens((_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens)
+    }
+  };
   return {
     transparent: buildBaseColorTheme({
       scheme,
       tone: "transparent"
-    }, config),
+    }, resolvedConfig),
     default: buildBaseColorTheme({
       scheme,
       tone: "default"
-    }, config),
+    }, resolvedConfig),
     primary: buildBaseColorTheme({
       scheme,
       tone: "primary"
-    }, config),
+    }, resolvedConfig),
     positive: buildBaseColorTheme({
       scheme,
       tone: "positive"
-    }, config),
+    }, resolvedConfig),
     caution: buildBaseColorTheme({
       scheme,
       tone: "caution"
-    }, config),
+    }, resolvedConfig),
     critical: buildBaseColorTheme({
       scheme,
       tone: "critical"
-    }, config)
+    }, resolvedConfig)
   };
 }
 function buildBaseColorTheme(options, config) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     scheme,
     tone
   } = options;
-  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens;
-  const any = tokens == null ? void 0 : tokens["*"];
-  const toneTokens = tokens == null ? void 0 : tokens[tone];
-  const hue = (toneTokens == null ? void 0 : toneTokens._hue) || (any == null ? void 0 : any._hue) || "gray";
-  const bg = resolveColorTokenValue({
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) == null ? void 0 : _b[tone];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const context = {
     hue,
-    scheme,
-    value: (toneTokens == null ? void 0 : toneTokens.bg) || (any == null ? void 0 : any.bg) || ["gray/50", "black"]
-  });
-  const _blend = (toneTokens == null ? void 0 : toneTokens._blend) || (any == null ? void 0 : any._blend) || ["screen", "multiply"];
+    scheme
+  };
+  const bg = resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["gray/50", "black"]);
+  const blendMode = (tokens == null ? void 0 : 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 == null ? void 0 : toneTokens.fg) || (any == null ? void 0 : any.fg) || ["black", "white"]
-      }),
-      border: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: (toneTokens == null ? void 0 : toneTokens.border) || (any == null ? void 0 : any.border) || ["black", "white"]
-      })
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["black", "white"]),
+      border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || ["black", "white"]),
+      focusRing: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.focusRing) || ["black", "white"]),
+      shadow: {
+        outline: resolveColorTokenValue(context, ((_c = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _c.outline) || ["500/0.2", "500/0.2"]),
+        umbra: resolveColorTokenValue(context, ((_d = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _d.umbra) || ["500/0.2", "500/0.2"]),
+        penumbra: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _e.penumbra) || ["500/0.2", "500/0.2"]),
+        ambient: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _f.ambient) || ["500/0.2", "500/0.2"])
+      },
+      skeleton: {
+        from: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _g.from) || ["500/0.2", "500/0.2"]),
+        to: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _h.to) || ["500/0.2", "500/0.2"])
+      }
     },
     button: buildButtonColorTheme({
       scheme
@@ -1472,78 +1605,48 @@ function buildButtonModeColorTheme(options, config) {
   return Object.assign({}, ...states);
 }
 function buildButtonStateColorTheme(options, config) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
+  var _a, _b, _c, _d, _e;
   const {
     mode,
     tone,
     scheme,
     state
   } = options;
-  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens;
-  const hue = ((_f = (_e = (_d = (_c = tokens == null ? void 0 : tokens.button) == null ? void 0 : _c[tone]) == null ? void 0 : _d[mode]) == null ? void 0 : _e[state]) == null ? void 0 : _f._hue) || ((_j = (_i = (_h = (_g = tokens == null ? void 0 : tokens.button) == null ? void 0 : _g["*"]) == null ? void 0 : _h[mode]) == null ? void 0 : _i[state]) == null ? void 0 : _j._hue) || ((_l = (_k = tokens == null ? void 0 : tokens.button) == null ? void 0 : _k[tone]) == null ? void 0 : _l._hue) || ((_m = tokens == null ? void 0 : tokens[tone]) == null ? void 0 : _m._hue) || "gray";
-  const spec3 = (_p = (_o = (_n = tokens == null ? void 0 : tokens.button) == null ? void 0 : _n["*"]) == null ? void 0 : _o[mode]) == null ? void 0 : _p["*"];
-  const spec2 = (_s = (_r = (_q = tokens == null ? void 0 : tokens.button) == null ? void 0 : _q["*"]) == null ? void 0 : _r[mode]) == null ? void 0 : _s[state];
-  const spec1 = (_v = (_u = (_t = tokens == null ? void 0 : tokens.button) == null ? void 0 : _t[tone]) == null ? void 0 : _u[mode]) == null ? void 0 : _v["*"];
-  const spec0 = (_y = (_x = (_w = tokens == null ? void 0 : tokens.button) == null ? void 0 : _w[tone]) == null ? void 0 : _x[mode]) == null ? void 0 : _y[state];
-  const _blend = (spec0 == null ? void 0 : spec0._blend) || (spec1 == null ? void 0 : spec1._blend) || (spec2 == null ? void 0 : spec2._blend) || (spec3 == null ? void 0 : spec3._blend) || ["screen", "multiply"];
+  const tokens = (_e = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) == null ? void 0 : _b.button) == null ? void 0 : _c[tone]) == null ? void 0 : _d[mode]) == null ? void 0 : _e[state];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const context = {
+    hue,
+    scheme
+  };
   return {
-    _blend: _blend[scheme === "light" ? 0 : 1],
-    bg: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: (spec0 == null ? void 0 : spec0.bg) || (spec1 == null ? void 0 : spec1.bg) || (spec2 == null ? void 0 : spec2.bg) || (spec3 == null ? void 0 : spec3.bg) || ["500", "400"]
-    }),
-    bg2: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: (spec0 == null ? void 0 : spec0.bg2) || (spec1 == null ? void 0 : spec1.bg2) || (spec2 == null ? void 0 : spec2.bg2) || (spec3 == null ? void 0 : spec3.bg2) || ["500", "400"]
-    }),
-    fg: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: (spec0 == null ? void 0 : spec0.fg) || (spec1 == null ? void 0 : spec1.fg) || (spec2 == null ? void 0 : spec2.fg) || (spec3 == null ? void 0 : spec3.fg) || ["white", "black"]
-    }),
-    border: resolveColorTokenValue({
-      hue,
-      scheme,
-      value: (spec0 == null ? void 0 : spec0.border) || (spec1 == null ? void 0 : spec1.border) || (spec2 == null ? void 0 : spec2.border) || (spec3 == null ? void 0 : spec3.border) || ["500", "400"]
-    }),
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["500", "400"]),
+    bg2: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg2) || ["500", "400"]),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["white", "black"]),
+    border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || ["500", "400"]),
     muted: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: ((_z = spec0 == null ? void 0 : spec0.muted) == null ? void 0 : _z.fg) || ((_A = spec1 == null ? void 0 : spec1.muted) == null ? void 0 : _A.fg) || ((_B = spec2 == null ? void 0 : spec2.muted) == null ? void 0 : _B.fg) || ((_C = spec3 == null ? void 0 : spec3.muted) == null ? void 0 : _C.fg) || ["500", "400"]
-      })
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
     },
     accent: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: ((_D = spec0 == null ? void 0 : spec0.accent) == null ? void 0 : _D.fg) || ((_E = spec1 == null ? void 0 : spec1.accent) == null ? void 0 : _E.fg) || ((_F = spec2 == null ? void 0 : spec2.accent) == null ? void 0 : _F.fg) || ((_G = spec3 == null ? void 0 : spec3.accent) == null ? void 0 : _G.fg) || ["500", "400"]
-      })
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
     },
     link: {
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: ((_H = spec0 == null ? void 0 : spec0.link) == null ? void 0 : _H.fg) || ((_I = spec1 == null ? void 0 : spec1.link) == null ? void 0 : _I.fg) || ((_J = spec2 == null ? void 0 : spec2.link) == null ? void 0 : _J.fg) || ((_K = spec3 == null ? void 0 : spec3.link) == null ? void 0 : _K.fg) || ["500", "400"]
-      })
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
     },
     code: {
-      bg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: ((_L = spec0 == null ? void 0 : spec0.code) == null ? void 0 : _L.bg) || ((_M = spec1 == null ? void 0 : spec1.code) == null ? void 0 : _M.bg) || ((_N = spec2 == null ? void 0 : spec2.code) == null ? void 0 : _N.bg) || ((_O = spec3 == null ? void 0 : spec3.code) == null ? void 0 : _O.bg) || ["500", "400"]
-      }),
-      fg: resolveColorTokenValue({
-        hue,
-        scheme,
-        value: ((_P = spec0 == null ? void 0 : spec0.code) == null ? void 0 : _P.fg) || ((_Q = spec1 == null ? void 0 : spec1.code) == null ? void 0 : _Q.fg) || ((_R = spec2 == null ? void 0 : spec2.code) == null ? void 0 : _R.fg) || ((_S = spec3 == null ? void 0 : spec3.code) == null ? void 0 : _S.fg) || ["500", "400"]
-      })
+      bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["500", "400"]),
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
     }
   };
 }
-function renderColorTheme(colorPalette, value) {
+const defaultColorPalette = {
+  ...color$1,
+  black: "#000000"
+};
+function renderColorTheme(value, config) {
+  var _a, _b;
+  const colorPalette = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.palette) != null ? _b : defaultColorPalette;
   return {
     light: renderColorScheme(colorPalette, value.light),
     dark: renderColorScheme(colorPalette, value.dark)
@@ -1577,7 +1680,18 @@ function renderColorBase(colorPalette, value, bg) {
     base: {
       bg: nestedBg,
       fg: renderColorValue(colorPalette, nestedBg, value._blend, value.base.fg),
-      border: renderColorValue(colorPalette, nestedBg, value._blend, value.base.border)
+      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)
   };
@@ -1610,41 +1724,43 @@ function renderStatesColorTheme(colorPalette, bg, baseBlendMode, value) {
 function renderStateColorTheme(colorPalette, baseBg, rootBlendMode, value) {
   const blendMode = value._blend;
   const bg = rootBlendMode === "multiply" && value.bg === "white" ? "#ffffff" : rootBlendMode === "screen" && value.bg === "black" ? "#000000" : renderColorValue(colorPalette, rootBlendMode === "multiply" ? "#ffffff" : "#000000", rootBlendMode, 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$1 : screen$1;
+  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)
     }
   };
 }
@@ -1679,21 +1795,17 @@ function renderColorValue(colorPalette, bg, blendMode, str) {
 function renderColorHex(color) {
   return typeof color === "string" ? color : color.hex;
 }
-const defaultColorPalette = {
-  ...color$1,
-  black: "#000000"
-};
 function buildTheme(config) {
-  var _a, _b;
+  const color = {
+    light: buildColorTheme({
+      scheme: "light"
+    }, config),
+    dark: buildColorTheme({
+      scheme: "dark"
+    }, config)
+  };
   return {
-    color: renderColorTheme((_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.palette) != null ? _b : defaultColorPalette, {
-      light: buildColorTheme({
-        scheme: "light"
-      }, config),
-      dark: buildColorTheme({
-        scheme: "dark"
-      }, config)
-    })
+    color: renderColorTheme(color, config)
   };
 }
 function createButtonTones(opts, base, dark, solid, muted, mode) {
@@ -8735,25 +8847,27 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
         children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
           $isContentScrollable: isContentScrollable,
           $hasScrolledFromTop: hasScrolledFromTop,
-          padding: 3,
           children: /* @__PURE__ */jsxs(Flex, {
             align: "center",
             children: [/* @__PURE__ */jsx(Box, {
               flex: 1,
-              padding: 3,
+              margin: 1,
+              padding: 4,
               children: header && /* @__PURE__ */jsx(Text, {
                 id: labelId,
                 size: 1,
                 weight: "medium",
                 children: header
               })
-            }), showCloseButton && /* @__PURE__ */jsx(Button, {
-              "aria-label": "Close dialog",
-              disabled: !onClose,
-              icon: CloseIcon,
-              mode: "bleed",
-              onClick: onClose,
-              padding: 3
+            }), showCloseButton && /* @__PURE__ */jsx(Box, {
+              padding: 3,
+              children: /* @__PURE__ */jsx(Button, {
+                "aria-label": "Close dialog",
+                disabled: !onClose,
+                icon: CloseIcon,
+                mode: "bleed",
+                onClick: onClose
+              })
             })]
           })
         }), /* @__PURE__ */jsx(DialogContent, {