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

package/dist/cli.js

@@ -335,7 +335,7 @@ class CAC extends events.EventEmitter {
   }
 }
 const cac = (name = "") => new CAC(name);
-var version = "3.0.0-static.3";
+var version = "3.0.0-static.4";
 const cli = cac("ui");
 cli.command("build").option("--cwd [cwd]", "Working directory").option("--outDir [outDir]", "Output directory").action(async (options) => {
   const {

package/dist/css.d.mts

@@ -8,7 +8,6 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
 import {Hue as Hue_2} from '@sanity/ui/theme'
-import {PaletteConfig as PaletteConfig_2} from '@sanity/ui/theme'
 import {Radius} from '@sanity/ui/theme'
 import {RootTheme} from '@sanity/ui/theme'
 import {Shadow} from '@sanity/ui/theme'
@@ -680,7 +679,7 @@ export declare interface ColorVariantVars
 
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export declare function compilePalette(config: PaletteConfig_2): string
+export declare function compilePalette(): string
 
 /** @public */
 export declare function compileSystem(): string
@@ -1159,24 +1158,6 @@ export declare interface PaddingStyleProps {
   paddingY?: ResponsiveProp<Space>
 }
 
-declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /** @public */
 export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
 
@@ -1471,7 +1452,6 @@ declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'se
  */
 declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -2037,27 +2017,7 @@ export declare type ThemeVarName =
 
 declare type Tint = (typeof TINTS)[number]
 
-declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 export declare function toast(): string | undefined
 

package/dist/css.d.ts

@@ -8,7 +8,6 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
 import {Hue as Hue_2} from '@sanity/ui/theme'
-import {PaletteConfig as PaletteConfig_2} from '@sanity/ui/theme'
 import {Radius} from '@sanity/ui/theme'
 import {RootTheme} from '@sanity/ui/theme'
 import {Shadow} from '@sanity/ui/theme'
@@ -680,7 +679,7 @@ export declare interface ColorVariantVars
 
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export declare function compilePalette(config: PaletteConfig_2): string
+export declare function compilePalette(): string
 
 /** @public */
 export declare function compileSystem(): string
@@ -1159,24 +1158,6 @@ export declare interface PaddingStyleProps {
   paddingY?: ResponsiveProp<Space>
 }
 
-declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /** @public */
 export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
 
@@ -1471,7 +1452,6 @@ declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'se
  */
 declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -2037,27 +2017,7 @@ export declare type ThemeVarName =
 
 declare type Tint = (typeof TINTS)[number]
 
-declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 export declare function toast(): string | undefined
 

package/dist/css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var v3_v2 = require("./_chunks-cjs/v3_v2.js"), theme = require("@sanity/ui/theme");
+var v3_v2 = require("./_chunks-cjs/v3_v2.js"), color = require("@sanity/color"), theme = require("@sanity/ui/theme");
 const PREFIX = "s-";
 function compileRule(selector, props, context) {
   let css = compileProperties$1(selector, props);
@@ -33,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.color.black.hex,
+    "--white": color.color.white.hex
   };
   return compileRule(":root", props, {
     keyframes: {},
     media: {}
   });
 }
-function compileHues(hues) {
+function compileHues() {
   const rules2 = {};
-  for (const hue of theme.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 theme.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 theme.HUES)
+    for (const tint of theme.TINTS)
+      rules2[`--${hue}-${tint}`] = color.color[hue][tint].hex;
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -839,11 +817,11 @@ function buildColorCardVars(props) {
       fg: `var(${prefix.accent.fg})`
     },
     avatar: {
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...theme.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})`
         }
       }), {})
     },
@@ -2318,7 +2296,7 @@ const _inputStyle = {
     primitive: primitive$n
   }
 }, toneMap$2 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2469,11 +2447,11 @@ const primitive$l = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...theme.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
         }
       }), {})
     }
@@ -2613,7 +2591,7 @@ const badgeStyle = {
     primitive: primitive$j
   }
 }, toneMap$1 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2704,31 +2682,31 @@ for (const tone of theme.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]
       }
@@ -2773,8 +2751,8 @@ const buttonStyle = {
     primitive: primitive$i
   }
 }, toneMap = {
-  transparent: "canvas",
-  default: "surface",
+  transparent: "transparent",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -4087,7 +4065,6 @@ function compileThemeProperties(theme2) {
     ...buildRadiusThemeProperties(theme2),
     ...buildShadowThemeProperties(theme2),
     ...buildSpaceThemeProperties(theme2),
-    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme2)
   };
 }
@@ -4379,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");
@@ -4447,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) ?? "";
@@ -4593,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");