@sanity/ui 3.0.0-static.3 → 3.0.0-static.4

package/dist/css.mjs

@@ -1,4 +1,5 @@
 import { v3_v2 } from "./_chunks-es/v3_v2.mjs";
+import { color } from "@sanity/color";
 import { HUES, TINTS, SPACE, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
 const PREFIX = "s-";
 function compileRule(selector, props, context) {
@@ -32,44 +33,22 @@ function compileNestedRules(selector, props, context) {
 function toSnakeCase$1(value) {
   return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
 }
-function compilePalette(config) {
+function compilePalette() {
   const props = {
-    "--l-min": `${config.luminosity.min * 100}%`,
-    "--l-max": `${config.luminosity.max * 100}%`,
-    "--l-range": "calc(var(--l-max) - var(--l-min))",
-    "--c-min": `${config.chroma.min}`,
-    "--c-max": `${config.chroma.max}`,
-    "--c-range": "calc(var(--c-max) - var(--c-min))",
-    ...compileHues(config.hues),
-    "--black": `oklch(
-      calc(var(--l-min) + 0.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-    "--white": `oklch(
-      calc(var(--l-min) + 1.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`
+    ...compileHues(),
+    "--black": color.black.hex,
+    "--white": color.white.hex
   };
   return compileRule(":root", props, {
     keyframes: {},
     media: {}
   });
 }
-function compileHues(hues) {
+function compileHues() {
   const rules2 = {};
-  for (const hue of HUES) {
-    const {
-      c,
-      h
-    } = hues[hue];
-    rules2[`--${hue}-h`] = `${h}`, rules2[`--${hue}-c`] = `${c}`, rules2[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`, rules2[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`;
-    for (const tint of TINTS) {
-      const l_offset = parseFloat((1 - tint / 1e3).toFixed(2)), c_offset_tmp = tint / 500, c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1));
-      rules2[`--${hue}-${tint}`] = ["oklch(", `calc(var(--l-min) + ${l_offset} * var(--l-range)) `, `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `, `var(--${hue}-h)`, ")"].join("");
-    }
-  }
+  for (const hue of HUES)
+    for (const tint of TINTS)
+      rules2[`--${hue}-${tint}`] = color[hue][tint].hex;
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -838,11 +817,11 @@ function buildColorCardVars(props) {
       fg: `var(${prefix.accent.fg})`
     },
     avatar: {
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [color]: {
-          bg: `var(${prefix.avatar[color].bg})`,
-          fg: `var(${prefix.avatar[color].fg})`
+        [color2]: {
+          bg: `var(${prefix.avatar[color2].bg})`,
+          fg: `var(${prefix.avatar[color2].fg})`
         }
       }), {})
     },
@@ -2317,7 +2296,7 @@ const _inputStyle = {
     primitive: primitive$n
   }
 }, toneMap$2 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2468,11 +2447,11 @@ const primitive$l = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [`&.${color}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
+        [`&.${color2}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
         }
       }), {})
     }
@@ -2612,7 +2591,7 @@ const badgeStyle = {
     primitive: primitive$j
   }
 }, toneMap$1 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2703,31 +2682,31 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       }
     }
   }, primitive$i[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[0],
+    [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
-    "--button-box-shadow": ["inset 0 0 0 var(--button-border-width) var(--color-border)", "inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)"].join(","),
+    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
     "@nest": {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[1],
+        [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1]
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
+        [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2]
       }
@@ -2772,8 +2751,8 @@ const buttonStyle = {
     primitive: primitive$i
   }
 }, toneMap = {
-  transparent: "canvas",
-  default: "surface",
+  transparent: "transparent",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -4086,7 +4065,6 @@ function compileThemeProperties(theme) {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
-    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme)
   };
 }
@@ -4378,7 +4356,7 @@ function scopeClassName(className) {
     return `${PREFIX}${className.trim()}`;
 }
 function _comp(...classNames) {
-  return getClassNames(...classNames).map(scopeClassName).join(" ") || void 0;
+  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
 }
 function breadcrumbs() {
   return _comp("breadcrumbs");
@@ -4446,7 +4424,7 @@ function shadow(props) {
   return composeClassNames(_resp("shadow", props.shadow));
 }
 function textOverflow(props) {
-  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
+  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
 }
 function width(props) {
   return _resp("w", props.width) ?? "";
@@ -4592,7 +4570,7 @@ function buttonLoadingBox() {
   return "button-loading-box";
 }
 function card(props) {
-  return _comp(props.scheme, toneMap[props.tone ?? "inherit"], "card", props.checkered && "card-checkered", shadow(props));
+  return _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
   return _comp("checkbox");