x-next 1.16.1 → 1.18.0

package/dist/es/_styles/palette-aliases.js

@@ -1,5 +1,16 @@
 const r = {
+  primary: "rgb(28 97 255 / 100%)",
+  success: "rgb(0 168 9 / 100%)",
+  danger: "rgb(224 34 37 / 100%)",
+  strong: "rgb(255 130 0 / 100%)",
+  warning: "rgb(255 184 0 / 100%)"
+}, o = {
   primary: {
+    "--x-alert-color-focus-ring": "var(--x-color-primary-text)",
+    "--x-alert-info-color-bg": "var(--x-color-primary-light-1)",
+    "--x-alert-info-color-icon": "var(--x-color-primary-text)",
+    "--x-button-color-bg-primary-outline-active": "color-mix(in srgb, var(--x-button-color-text-primary) 5%, var(--x-color-transparent))",
+    "--x-button-color-bg-primary-outline-hover": "color-mix(in srgb, var(--x-button-color-text-primary) 3%, var(--x-color-transparent))",
     "--x-button-color-bg-primary-solid": "var(--x-color-primary-solid)",
     "--x-button-color-bg-primary-solid-active": "var(--x-color-primary-solid-active)",
     "--x-button-color-bg-primary-solid-hover": "var(--x-color-primary-solid-hover)",
@@ -8,12 +19,16 @@ const r = {
     "--x-button-color-bg-primary-subtle-hover": "var(--x-color-primary-subtle-hover)",
     "--x-button-color-border-primary": "var(--x-color-primary-solid)",
     "--x-button-color-text-primary": "var(--x-color-primary-button-text)",
+    "--x-button-color-text-primary-active": "color-mix(in srgb, var(--x-button-color-text-primary) 84%, var(--x-color-black))",
+    "--x-button-color-text-primary-hover": "color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-black))",
+    "--x-button-color-wave-primary": "var(--x-button-color-bg-primary-solid)",
     "--x-chart-color-series-1": "var(--x-color-primary-solid)",
     "--x-checkbox-mask-color-bg_checked": "var(--x-color-primary-6)",
     "--x-checkbox-mask-color-bg_checked_disabled": "var(--x-color-primary-light-3)",
     "--x-color-border-focus": "var(--x-color-primary-6)",
     "--x-color-menu-dark-hover": "var(--x-color-primary)",
     "--x-color-menu-dark-submenu-selected-bg": "color-mix(in srgb, var(--x-color-primary) 45%, transparent)",
+    "--x-color-picker-color-mode-bg_active": "var(--x-color-primary-subtle)",
     "--x-color-picker-color-swatch_active": "var(--x-color-primary-text)",
     "--x-color-picker-color-text_active": "var(--x-color-primary-text)",
     "--x-color-primary-button-text": "var(--x-color-primary-text)",
@@ -54,7 +69,7 @@ const r = {
     "--x-input-feedback-icon-color_validating": "var(--x-field-status-validating-icon)",
     "--x-input-tag-color-border_default_focus": "var(--x-field-color-border-focus)",
     "--x-input-tag-color-shadow_default_focus": "var(--x-field-color-shadow-focus)",
-    "--x-link-background-color": "var(--x-color-primary-1)",
+    "--x-link-background-color": "var(--x-color-primary-subtle)",
     "--x-link-color-focus": "var(--x-color-primary-text)",
     "--x-link-color-text": "var(--x-color-primary-text)",
     "--x-menu-color-label-item-selected": "var(--x-color-primary-6)",
@@ -110,6 +125,9 @@ const r = {
     "--x-upload-color-border-hover": "var(--x-color-primary)"
   },
   success: {
+    "--x-alert-success-color-bg": "var(--x-color-success-light-1)",
+    "--x-button-color-bg-success-outline-active": "color-mix(in srgb, var(--x-button-color-text-success) 5%, var(--x-color-transparent))",
+    "--x-button-color-bg-success-outline-hover": "color-mix(in srgb, var(--x-button-color-text-success) 3%, var(--x-color-transparent))",
     "--x-button-color-bg-success-solid": "var(--x-color-success-solid)",
     "--x-button-color-bg-success-solid-active": "var(--x-color-success-solid-active)",
     "--x-button-color-bg-success-solid-hover": "var(--x-color-success-solid-hover)",
@@ -118,6 +136,9 @@ const r = {
     "--x-button-color-bg-success-subtle-hover": "var(--x-color-success-subtle-hover)",
     "--x-button-color-border-success": "var(--x-color-success-solid)",
     "--x-button-color-text-success": "var(--x-color-success-button-text)",
+    "--x-button-color-text-success-active": "color-mix(in srgb, var(--x-button-color-text-success) 84%, var(--x-color-black))",
+    "--x-button-color-text-success-hover": "color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-black))",
+    "--x-button-color-wave-success": "var(--x-button-color-bg-success-solid)",
     "--x-chart-color-series-2": "var(--x-color-success-solid)",
     "--x-color-success-button-text": "var(--x-color-success-text)",
     "--x-color-success-light-1": "var(--x-color-success-1)",
@@ -136,13 +157,16 @@ const r = {
     "--x-field-status-success-text": "var(--x-color-success-text)",
     "--x-input-feedback-icon-color_success": "var(--x-field-status-success-icon)",
     "--x-link-color-text-success": "var(--x-color-success-text)",
-    "--x-link-success-background-color": "var(--x-color-success-1)",
+    "--x-link-success-background-color": "var(--x-color-success-subtle)",
     "--x-message-color-accent-success": "var(--x-color-success-solid)",
     "--x-message-color-icon-bg-success": "var(--x-color-success-subtle)",
     "--x-notification-color-accent-success": "var(--x-color-success-solid)",
     "--x-notification-color-icon-bg-success": "var(--x-color-success-subtle)"
   },
   danger: {
+    "--x-alert-error-color-bg": "var(--x-color-danger-light-1)",
+    "--x-button-color-bg-danger-outline-active": "color-mix(in srgb, var(--x-button-color-text-danger) 5%, var(--x-color-transparent))",
+    "--x-button-color-bg-danger-outline-hover": "color-mix(in srgb, var(--x-button-color-text-danger) 3%, var(--x-color-transparent))",
     "--x-button-color-bg-danger-solid": "var(--x-color-danger-solid)",
     "--x-button-color-bg-danger-solid-active": "var(--x-color-danger-solid-active)",
     "--x-button-color-bg-danger-solid-hover": "var(--x-color-danger-solid-hover)",
@@ -151,6 +175,9 @@ const r = {
     "--x-button-color-bg-danger-subtle-hover": "var(--x-color-danger-subtle-hover)",
     "--x-button-color-border-danger": "var(--x-color-danger-solid)",
     "--x-button-color-text-danger": "var(--x-color-danger-button-text)",
+    "--x-button-color-text-danger-active": "color-mix(in srgb, var(--x-button-color-text-danger) 84%, var(--x-color-black))",
+    "--x-button-color-text-danger-hover": "color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-black))",
+    "--x-button-color-wave-danger": "var(--x-button-color-bg-danger-solid)",
     "--x-chart-color-series-4": "var(--x-color-danger-solid)",
     "--x-color-danger-button-text": "var(--x-color-danger-text)",
     "--x-color-danger-light-1": "var(--x-color-danger-1)",
@@ -183,7 +210,7 @@ const r = {
     "--x-input-tag-color-border_error_focus": "var(--x-field-color-border-error)",
     "--x-input-tag-color-shadow_error_focus": "var(--x-field-status-error-shadow-color-focus)",
     "--x-link-color-text-danger": "var(--x-color-danger-text)",
-    "--x-link-danger-background-color": "var(--x-color-danger-1)",
+    "--x-link-danger-background-color": "var(--x-color-danger-subtle)",
     "--x-message-color-accent-error": "var(--x-color-danger-solid)",
     "--x-message-color-icon-bg-error": "var(--x-color-danger-subtle)",
     "--x-notification-color-accent-error": "var(--x-color-danger-solid)",
@@ -194,6 +221,9 @@ const r = {
     "--x-picker-color-shadow_error_focus": "var(--x-field-status-error-shadow-color-focus)"
   },
   strong: {
+    "--x-alert-strong-color-bg": "var(--x-color-strong-subtle)",
+    "--x-button-color-bg-strong-outline-active": "color-mix(in srgb, var(--x-button-color-text-strong) 5%, var(--x-color-transparent))",
+    "--x-button-color-bg-strong-outline-hover": "color-mix(in srgb, var(--x-button-color-text-strong) 3%, var(--x-color-transparent))",
     "--x-button-color-bg-strong-solid": "var(--x-color-strong-solid)",
     "--x-button-color-bg-strong-solid-active": "var(--x-color-strong-solid-active)",
     "--x-button-color-bg-strong-solid-hover": "var(--x-color-strong-solid-hover)",
@@ -202,6 +232,9 @@ const r = {
     "--x-button-color-bg-strong-subtle-hover": "var(--x-color-strong-subtle-hover)",
     "--x-button-color-border-strong": "var(--x-color-strong-solid)",
     "--x-button-color-text-strong": "var(--x-color-strong-button-text)",
+    "--x-button-color-text-strong-active": "color-mix(in srgb, var(--x-button-color-text-strong) 84%, var(--x-color-black))",
+    "--x-button-color-text-strong-hover": "color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-black))",
+    "--x-button-color-wave-strong": "var(--x-button-color-bg-strong-solid)",
     "--x-chart-color-series-3": "var(--x-color-strong-solid)",
     "--x-color-strong-button-text": "var(--x-color-strong-text)",
     "--x-color-strong-solid": "var(--x-color-strong-6)",
@@ -212,13 +245,16 @@ const r = {
     "--x-color-strong-subtle-hover": "color-mix(in srgb, var(--x-color-strong-subtle) 90%, var(--x-color-strong-button-text))",
     "--x-color-strong-text": "var(--x-color-strong)",
     "--x-link-color-text-strong": "var(--x-color-strong-text)",
-    "--x-link-strong-background-color": "var(--x-color-strong-1)",
+    "--x-link-strong-background-color": "var(--x-color-strong-subtle)",
     "--x-message-color-accent-strong": "var(--x-color-strong-solid)",
     "--x-message-color-icon-bg-strong": "var(--x-color-strong-subtle)",
     "--x-notification-color-accent-strong": "var(--x-color-strong-solid)",
     "--x-notification-color-icon-bg-strong": "var(--x-color-strong-subtle)"
   },
   warning: {
+    "--x-alert-warning-color-bg": "var(--x-color-warning-light-1)",
+    "--x-button-color-bg-warning-outline-active": "color-mix(in srgb, var(--x-button-color-text-warning) 5%, var(--x-color-transparent))",
+    "--x-button-color-bg-warning-outline-hover": "color-mix(in srgb, var(--x-button-color-text-warning) 3%, var(--x-color-transparent))",
     "--x-button-color-bg-warning-solid": "var(--x-color-warning-solid)",
     "--x-button-color-bg-warning-solid-active": "var(--x-color-warning-solid-active)",
     "--x-button-color-bg-warning-solid-hover": "var(--x-color-warning-solid-hover)",
@@ -227,6 +263,9 @@ const r = {
     "--x-button-color-bg-warning-subtle-hover": "var(--x-color-warning-subtle-hover)",
     "--x-button-color-border-warning": "var(--x-color-warning-solid)",
     "--x-button-color-text-warning": "var(--x-color-warning-button-text)",
+    "--x-button-color-text-warning-active": "color-mix(in srgb, var(--x-button-color-text-warning) 84%, var(--x-color-black))",
+    "--x-button-color-text-warning-hover": "color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-black))",
+    "--x-button-color-wave-warning": "var(--x-button-color-bg-warning-solid)",
     "--x-chart-color-series-5": "var(--x-color-warning-solid)",
     "--x-color-warning-button-text": "var(--x-color-warning-text)",
     "--x-color-warning-light-1": "var(--x-color-warning-1)",
@@ -245,42 +284,88 @@ const r = {
     "--x-field-status-warning-text": "var(--x-color-warning-text)",
     "--x-input-feedback-icon-color_warning": "var(--x-field-status-warning-icon)",
     "--x-link-color-text-warning": "var(--x-color-warning-text)",
-    "--x-link-warning-background-color": "var(--x-color-warning-1)",
+    "--x-link-warning-background-color": "var(--x-color-warning-subtle)",
     "--x-message-color-accent-warning": "var(--x-color-warning-solid)",
     "--x-message-color-icon-bg-warning": "var(--x-color-warning-subtle)",
     "--x-notification-color-accent-warning": "var(--x-color-warning-solid)",
     "--x-notification-color-icon-bg-warning": "var(--x-color-warning-subtle)"
   }
-}, o = {
+}, c = {
   primary: {
-    "--x-color-primary-button-text": "var(--x-color-primary-7)",
-    "--x-color-primary-text": "var(--x-color-primary-7)",
+    "--x-alert-color-focus-ring": "var(--x-color-text-1)",
+    "--x-alert-info-color-bg": "var(--x-color-primary-subtle)",
+    "--x-alert-info-color-icon": "var(--x-color-primary-8)",
+    "--x-button-color-text-primary-active": "color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-black))",
+    "--x-button-color-text-primary-hover": "color-mix(in srgb, var(--x-button-color-text-primary) 92%, var(--x-color-white))",
+    "--x-color-picker-color-mode-bg_active": "color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface))",
+    "--x-color-primary-button-text": "var(--x-color-primary-8)",
+    "--x-color-primary-subtle": "#39479f",
+    "--x-color-primary-text": "var(--x-color-primary-8)",
+    "--x-field-status-validating-bg": "color-mix(in srgb, var(--x-color-primary-subtle) 12%, var(--x-color-bg-surface))",
+    "--x-field-status-validating-bg-hover": "color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface))",
     "--x-heatmap-color-level-1": "var(--x-color-primary-3)",
     "--x-heatmap-color-level-2": "var(--x-color-primary-4)",
     "--x-heatmap-color-level-3": "var(--x-color-primary-5)",
     "--x-heatmap-color-level-4": "var(--x-color-primary-6)",
     "--x-heatmap-color-level-5": "var(--x-color-primary-7)",
-    "--x-tag-color-better-blue-bg": "rgb(28 47 89)",
-    "--x-tag-color-better-blue-border-hover": "rgb(37 59 109)"
+    "--x-message-color-accent-info": "var(--x-color-primary-text)",
+    "--x-message-color-accent-loading": "var(--x-color-primary-text)",
+    "--x-notification-color-accent-info": "var(--x-color-primary-text)",
+    "--x-table-color-bg-body-row_active": "color-mix(in srgb, var(--x-color-primary-subtle) 20%, var(--x-color-bg-surface))",
+    "--x-tag-color-better-blue-border-hover": "color-mix(in srgb, var(--x-color-primary-subtle) 88%, var(--x-color-primary-text))"
   },
   success: {
-    "--x-color-success-button-text": "var(--x-color-success-7)",
-    "--x-color-success-text": "var(--x-color-success-7)"
+    "--x-alert-success-color-bg": "var(--x-color-success-subtle)",
+    "--x-button-color-text-success-active": "color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-black))",
+    "--x-button-color-text-success-hover": "color-mix(in srgb, var(--x-button-color-text-success) 92%, var(--x-color-white))",
+    "--x-color-success-button-text": "var(--x-color-success-8)",
+    "--x-color-success-subtle": "#2d733d",
+    "--x-color-success-text": "var(--x-color-success-8)",
+    "--x-field-status-success-bg": "color-mix(in srgb, var(--x-color-success-subtle) 12%, var(--x-color-bg-surface))",
+    "--x-field-status-success-bg-hover": "color-mix(in srgb, var(--x-color-success-subtle) 20%, var(--x-color-bg-surface))",
+    "--x-message-color-accent-success": "var(--x-color-success-text)",
+    "--x-notification-color-accent-success": "var(--x-color-success-text)"
   },
   danger: {
+    "--x-alert-error-color-bg": "var(--x-color-danger-subtle)",
+    "--x-button-color-text-danger-active": "color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-black))",
+    "--x-button-color-text-danger-hover": "color-mix(in srgb, var(--x-button-color-text-danger) 92%, var(--x-color-white))",
     "--x-color-danger-button-text": "var(--x-color-danger-8)",
-    "--x-color-danger-text": "var(--x-color-danger-8)"
+    "--x-color-danger-subtle": "#4d212a",
+    "--x-color-danger-text": "var(--x-color-danger-8)",
+    "--x-field-color-bg-error": "var(--x-field-status-error-bg)",
+    "--x-field-color-bg-error-hover": "var(--x-field-status-error-bg-hover)",
+    "--x-field-status-error-bg": "color-mix(in srgb, var(--x-color-danger-subtle) 12%, var(--x-color-bg-surface))",
+    "--x-field-status-error-bg-hover": "color-mix(in srgb, var(--x-color-danger-subtle) 20%, var(--x-color-bg-surface))",
+    "--x-message-color-accent-error": "var(--x-color-danger-text)",
+    "--x-notification-color-accent-error": "var(--x-color-danger-text)"
   },
   strong: {
+    "--x-button-color-text-strong-active": "color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-black))",
+    "--x-button-color-text-strong-hover": "color-mix(in srgb, var(--x-button-color-text-strong) 92%, var(--x-color-white))",
     "--x-color-strong-button-text": "var(--x-color-strong-7)",
-    "--x-color-strong-text": "var(--x-color-strong-7)"
+    "--x-color-strong-subtle": "#70432b",
+    "--x-color-strong-text": "var(--x-color-strong-7)",
+    "--x-message-color-accent-strong": "var(--x-color-strong-text)",
+    "--x-notification-color-accent-strong": "var(--x-color-strong-text)"
   },
   warning: {
+    "--x-alert-warning-color-bg": "var(--x-color-warning-subtle)",
+    "--x-button-color-text-warning-active": "color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-black))",
+    "--x-button-color-text-warning-hover": "color-mix(in srgb, var(--x-button-color-text-warning) 92%, var(--x-color-white))",
     "--x-color-warning-button-text": "var(--x-color-warning-7)",
-    "--x-color-warning-text": "var(--x-color-warning-7)"
+    "--x-color-warning-subtle": "#7b582d",
+    "--x-color-warning-subtle-active": "color-mix(in srgb, var(--x-color-warning-subtle) 84%, var(--x-color-warning-button-text))",
+    "--x-color-warning-subtle-hover": "color-mix(in srgb, var(--x-color-warning-subtle) 90%, var(--x-color-warning-button-text))",
+    "--x-color-warning-text": "var(--x-color-warning-7)",
+    "--x-field-status-warning-bg": "color-mix(in srgb, var(--x-color-warning-subtle) 12%, var(--x-color-bg-surface))",
+    "--x-field-status-warning-bg-hover": "color-mix(in srgb, var(--x-color-warning-subtle) 20%, var(--x-color-bg-surface))",
+    "--x-message-color-accent-warning": "var(--x-color-warning-text)",
+    "--x-notification-color-accent-warning": "var(--x-color-warning-text)"
   }
 };
 export {
-  r as PALETTE_ALIASES,
-  o as PALETTE_ALIASES_DARK
+  r as DEFAULT_PALETTE_SEEDS,
+  o as PALETTE_ALIASES,
+  c as PALETTE_ALIASES_DARK
 };

package/dist/es/_utils/palette.js

@@ -1,70 +1,70 @@
-import { PALETTE_ALIASES as x, PALETTE_ALIASES_DARK as b } from "../_styles/palette-aliases.js";
-const y = 2.05, p = 95.5, d = 22, A = [1, 0.8, 0.6, 0.4, 0.2], _ = [1 / 3, 2 / 3, 1], S = 90, H = 300, u = (r, c, i) => Math.min(i, Math.max(c, r)), P = (r) => {
-  if (typeof r != "string") return null;
-  const c = r.trim();
-  if (c.startsWith("#")) {
-    const t = c.slice(1);
-    if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)) return null;
-    const m = t.length === 3 ? [...t].map((a) => a + a).join("") : t.length === 6 || t.length === 8 ? t.slice(0, 6) : null;
-    return m ? [0, 2, 4].map((a) => parseInt(m.slice(a, a + 2), 16)) : null;
+import { PALETTE_ALIASES as y, PALETTE_ALIASES_DARK as A, DEFAULT_PALETTE_SEEDS as d } from "../_styles/palette-aliases.js";
+const _ = 2.05, g = 95.5, E = 22, S = [1, 0.8, 0.6, 0.4, 0.2], $ = [1 / 3, 2 / 3, 1], H = 90, L = 300, m = (s, i, c) => Math.min(c, Math.max(i, s)), p = (s) => {
+  if (typeof s != "string") return null;
+  const i = s.trim();
+  if (i.startsWith("#")) {
+    const e = i.slice(1);
+    if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)) return null;
+    const u = e.length === 3 ? [...e].map((a) => a + a).join("") : e.length === 6 || e.length === 8 ? e.slice(0, 6) : null;
+    return u ? [0, 2, 4].map((a) => parseInt(u.slice(a, a + 2), 16)) : null;
   }
-  const i = c.match(/^rgba?\(([^)]+)\)$/i);
-  if (!i) return null;
-  const n = i[1].trim(), s = n.includes(",") ? n.split(",").map((t) => t.trim()) : n.split(/\s*\/\s*/)[0].split(/\s+/), e = n.includes(",") ? s[3] : n.includes("/") ? n.split("/")[1].trim() : void 0;
-  if (n.split("/").length > 2 || s.length < 3 || s.length > (n.includes(",") ? 4 : 3)) return null;
-  const o = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
-  if (s.slice(0, 3).some((t) => !o.test(t)) || e !== void 0 && !o.test(e)) return null;
-  const l = s.slice(0, 3).map((t) => t.endsWith("%") ? Math.round(parseFloat(t) / 100 * 255) : Number(t));
-  return l.some((t) => !Number.isFinite(t)) ? null : l.map((t) => u(Math.round(t), 0, 255));
-}, $ = ([r, c, i]) => {
-  const n = r / 255, s = c / 255, e = i / 255, o = Math.max(n, s, e), l = Math.min(n, s, e), t = o - l, m = (o + l) / 2;
+  const c = i.match(/^rgba?\(([^)]+)\)$/i);
+  if (!c) return null;
+  const r = c[1].trim(), o = r.includes(",") ? r.split(",").map((e) => e.trim()) : r.split(/\s*\/\s*/)[0].split(/\s+/), t = r.includes(",") ? o[3] : r.includes("/") ? r.split("/")[1].trim() : void 0;
+  if (r.split("/").length > 2 || o.length < 3 || o.length > (r.includes(",") ? 4 : 3)) return null;
+  const n = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
+  if (o.slice(0, 3).some((e) => !n.test(e)) || t !== void 0 && !n.test(t)) return null;
+  const l = o.slice(0, 3).map((e) => e.endsWith("%") ? Math.round(parseFloat(e) / 100 * 255) : Number(e));
+  return l.some((e) => !Number.isFinite(e)) ? null : l.map((e) => m(Math.round(e), 0, 255));
+}, P = ([s, i, c]) => {
+  const r = s / 255, o = i / 255, t = c / 255, n = Math.max(r, o, t), l = Math.min(r, o, t), e = n - l, u = (n + l) / 2;
   let a = 0, h = 0;
-  return t !== 0 && (h = m > 0.5 ? t / (2 - o - l) : t / (o + l), o === n ? a = (s - e) / t + (s < e ? 6 : 0) : o === s ? a = (e - n) / t + 2 : a = (n - s) / t + 4, a *= 60), { h: a, s: h * 100, l: m * 100 };
-}, I = ({ h: r, s: c, l: i }) => {
-  const n = u(c, 0, 100) / 100, s = u(i, 0, 100) / 100, e = (r % 360 + 360) % 360, o = (1 - Math.abs(2 * s - 1)) * n, l = o * (1 - Math.abs(e / 60 % 2 - 1)), t = s - o / 2;
-  let m;
-  return e < 60 ? m = [o, l, 0] : e < 120 ? m = [l, o, 0] : e < 180 ? m = [0, o, l] : e < 240 ? m = [0, l, o] : e < 300 ? m = [l, 0, o] : m = [o, 0, l], m.map((a) => u(Math.round((a + t) * 255), 0, 255));
-}, L = (r) => `#${r.map((c) => u(Math.round(c), 0, 255).toString(16).padStart(2, "0")).join("")}`, R = (r) => r <= S || r >= H ? 1 : -1, g = (r, c = {}) => {
-  const i = P(r);
-  if (!i)
-    throw new Error(`[x-next] generatePalette: 无法解析种子色 "${r}"`);
-  const { h: n, s, l: e } = $(i), o = R(n), { dark: l = !1 } = c, t = l ? Math.min(d, e) : Math.max(p, e), m = l ? Math.max(p, e) : Math.min(d, e), a = [];
+  return e !== 0 && (h = u > 0.5 ? e / (2 - n - l) : e / (n + l), n === r ? a = (o - t) / e + (o < t ? 6 : 0) : n === o ? a = (t - r) / e + 2 : a = (r - o) / e + 4, a *= 60), { h: a, s: h * 100, l: u * 100 };
+}, I = ({ h: s, s: i, l: c }) => {
+  const r = m(i, 0, 100) / 100, o = m(c, 0, 100) / 100, t = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * o - 1)) * r, l = n * (1 - Math.abs(t / 60 % 2 - 1)), e = o - n / 2;
+  let u;
+  return t < 60 ? u = [n, l, 0] : t < 120 ? u = [l, n, 0] : t < 180 ? u = [0, n, l] : t < 240 ? u = [0, l, n] : t < 300 ? u = [l, 0, n] : u = [n, 0, l], u.map((a) => m(Math.round((a + e) * 255), 0, 255));
+}, R = (s) => `#${s.map((i) => m(Math.round(i), 0, 255).toString(16).padStart(2, "0")).join("")}`, v = (s) => s <= H || s >= L ? 1 : -1, T = (s, i = {}) => {
+  const c = p(s);
+  if (!c)
+    throw new Error(`[x-next] generatePalette: 无法解析种子色 "${s}"`);
+  const { h: r, s: o, l: t } = P(c), n = v(r), { dark: l = !1 } = i, e = l ? Math.min(E, t) : Math.max(g, t), u = l ? Math.max(g, t) : Math.min(E, t), a = [];
   for (let h = 0; h < 9; h += 1) {
     let f;
-    h < 5 ? f = e + (t - e) * A[h] : h === 5 ? f = e : f = e + (m - e) * _[h - 6];
-    const E = 5 - h, M = o * y * E * (l ? -1 : 1);
-    a.push(L(I({ h: n + M, s, l: u(f, 0, 100) })));
+    h < 5 ? f = t + (e - t) * S[h] : h === 5 ? f = t : f = t + (u - t) * $[h - 6];
+    const M = 5 - h, b = n * _ * M * (l ? -1 : 1);
+    a.push(R(I({ h: r + b, s: o, l: m(f, 0, 100) })));
   }
   return a;
-}, G = (r, c = {}) => {
-  const { name: i = "primary", target: n, dark: s } = c, e = g(r, { dark: s }), o = n ?? (typeof document < "u" ? document.documentElement : null);
-  if (o) {
-    o.style.setProperty(`--x-color-${i}`, e[5]), e.forEach((l, t) => {
-      o.style.setProperty(`--x-color-${i}-${t + 1}`, l);
+}, G = (s, i = {}) => {
+  const { name: c = "primary", target: r, dark: o } = i, t = T(s, { dark: o }), n = r ?? (typeof document < "u" ? document.documentElement : null);
+  if (n) {
+    n.style.setProperty(`--x-color-${c}`, t[5]), t.forEach((l, e) => {
+      n.style.setProperty(`--x-color-${c}-${e + 1}`, l);
     });
-    for (const [l, t] of Object.entries(T(i, s)))
-      o.style.setProperty(l, t);
+    for (const [l, e] of Object.entries(x(c, o, t[5])))
+      n.style.setProperty(l, e);
   }
-  return e;
-}, T = (r, c) => {
-  const i = x[r] ?? {}, n = c ? b[r] : void 0;
-  return Object.fromEntries(
-    Object.entries(i).map(([s, e]) => [s, (n == null ? void 0 : n[s]) ?? e])
+  return t;
+}, x = (s, i, c) => {
+  const r = y[s] ?? {}, o = i ? A[s] : void 0, t = Object.fromEntries(
+    Object.entries(r).map(([n, l]) => [n, (o == null ? void 0 : o[n]) ?? l])
   );
-}, W = (r, c = !1) => {
-  const i = g(r, { dark: c });
+  return i && c && d[s] && JSON.stringify(p(c)) !== JSON.stringify(p(d[s])) && (t[`--x-color-${s}-subtle`] = `color-mix(in srgb, var(--x-color-${s}-1) 72%, var(--x-color-${s}-8))`), t;
+}, O = (s, i = !1) => {
+  const c = T(s, { dark: i });
   return {
-    "--x-color-primary": i[5],
-    ...Object.fromEntries(i.map((n, s) => [`--x-color-primary-${s + 1}`, n])),
-    ...T("primary", c)
+    "--x-color-primary": c[5],
+    ...Object.fromEntries(c.map((r, o) => [`--x-color-primary-${o + 1}`, r])),
+    ...x("primary", i, c[5])
   };
 };
 export {
   G as applyThemeColor,
-  g as generatePalette,
-  W as getThemeColorStyles,
+  T as generatePalette,
+  O as getThemeColorStyles,
   I as hslToRgb,
-  P as parseColor,
-  $ as rgbToHsl,
-  L as toHex
+  p as parseColor,
+  P as rgbToHsl,
+  R as toHex
 };

package/dist/es/components/button/Button.js

@@ -1,84 +1,112 @@
-import { defineComponent as C, getCurrentInstance as E, inject as M, reactive as R, computed as r, withDirectives as Z, createVNode as d, resolveDirective as $, isVNode as q, Comment as H, Fragment as J, Text as Q } from "vue";
-import { getClassNameMixin as U } from "../../_utils/config.js";
-import { buttonProps as W } from "./props.js";
-import X from "../../icons/animation/animation-loading.js";
-import Y from "../../directives/wave.js";
-import { buttonGroupInjectionKey as _ } from "./context.js";
-import { useSize as G } from "../../_hooks/use-size.js";
-const o = (e) => {
-  if (Array.isArray(e)) return e.some(o);
+import { defineComponent as M, getCurrentInstance as R, inject as U, reactive as Z, computed as c, onBeforeUnmount as q, withDirectives as H, createVNode as u, resolveDirective as J, isVNode as Q, Comment as W, Fragment as X, Text as Y } from "vue";
+import { getClassNameMixin as _ } from "../../_utils/config.js";
+import { buttonProps as G } from "./props.js";
+import ee from "../../icons/animation/animation-loading.js";
+import ie from "../../directives/wave.js";
+import { buttonGroupInjectionKey as ae } from "./context.js";
+import { useSize as te } from "../../_hooks/use-size.js";
+import { resolveButtonAppearance as ne } from "./appearance.js";
+const d = (e) => {
+  if (Array.isArray(e)) return e.some(d);
   if (e == null || typeof e == "boolean") return !1;
   if (typeof e == "string") return e.trim().length > 0;
-  if (q(e)) {
-    if (e.type === H) return !1;
-    if (e.type === J || e.type === Q)
-      return o(e.children);
+  if (Q(e)) {
+    if (e.type === W) return !1;
+    if (e.type === X || e.type === Y)
+      return d(e.children);
   }
   return !0;
-}, re = /* @__PURE__ */ C({
+}, se = /* @__PURE__ */ M({
   name: "Button",
-  props: W,
+  props: G,
   // 显式导入插槽
   slots: Object,
   directives: {
-    wave: Y
+    wave: ie
   },
   emits: ["click"],
   setup(e, {
-    slots: n,
-    emit: T
+    slots: t,
+    emit: F
   }) {
-    const v = E(), a = M(_, void 0), {
-      mergedSize: F
-    } = G(void 0, {
+    const b = R(), a = U(ae, void 0), {
+      mergedSize: L
+    } = te(void 0, {
       defaultValue: "medium"
-    }), u = R({
-      clicked: !1,
-      isDebounce: !1
-    }), i = U("button"), A = (t) => t.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`), f = (t) => {
-      const c = (v == null ? void 0 : v.vnode.props) ?? {};
-      return Object.prototype.hasOwnProperty.call(c, t) || Object.prototype.hasOwnProperty.call(c, A(t));
-    }, s = r(() => f("type") ? e.type : (a == null ? void 0 : a.type) ?? e.type), w = r(() => f("size") ? e.size : (a == null ? void 0 : a.size) ?? F.value), D = r(() => f("status") ? e.status : (a == null ? void 0 : a.status) ?? e.status), y = r(() => f("shape") ? e.shape : (a == null ? void 0 : a.shape) ?? e.shape), m = r(() => f("disabled") ? e.disabled : (a == null ? void 0 : a.disabled) ?? e.disabled), L = r(() => [i.block, s.value && s.value !== "default" && i.modifier(s.value), w.value && i.modifier(w.value), D.value && i.modifier(D.value), m.value && i.is("disabled"), e.block && i.modifier("block"), e.plain && i.modifier("plain"), y.value && i.modifier(y.value), e.link && i.modifier("link"), !e.border && i.modifier("hide-border"), l.value && i.modifier("loading"), e.narrow && i.modifier("narrow")]), N = () => {
-      e.debounce > 0 && !u.isDebounce && (u.isDebounce = !0, setTimeout(() => {
-        u.isDebounce = !1;
+    }), o = Z({
+      isDebounce: !1,
+      nativeActivation: !1
+    }), i = _("button"), N = (n) => n.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`), f = (n) => {
+      const r = (b == null ? void 0 : b.vnode.props) ?? {};
+      return Object.prototype.hasOwnProperty.call(r, n) || Object.prototype.hasOwnProperty.call(r, N(n));
+    }, m = c(() => f("type") ? e.type : (a == null ? void 0 : a.type) ?? e.type), S = c(() => f("size") ? e.size : (a == null ? void 0 : a.size) ?? L.value), y = c(() => f("status") ? e.status : (a == null ? void 0 : a.status) ?? e.status), h = c(() => f("shape") ? e.shape : (a == null ? void 0 : a.shape) ?? e.shape), s = c(() => f("disabled") ? e.disabled : (a == null ? void 0 : a.disabled) ?? e.disabled), v = c(() => ne(m.value, y.value, e.plain)), V = c(() => [
+      i.block,
+      m.value && m.value !== "default" && i.modifier(m.value),
+      S.value && i.modifier(S.value),
+      // Keep legacy semantic classes, but use separate namespaces for style decisions.
+      y.value !== "primary" && i.modifier(y.value),
+      i.modifier(`appearance-${v.value.appearance}`),
+      i.modifier(`color-${v.value.color}`),
+      s.value && i.is("disabled"),
+      e.block && i.modifier("block"),
+      e.plain && i.modifier("plain"),
+      h.value && i.modifier(h.value),
+      e.border && ["default", "solid", "outline", "dashed"].includes(v.value.appearance) && i.modifier("has-border"),
+      !e.border && i.modifier("hide-border"),
+      l.value && i.modifier("loading"),
+      e.narrow && i.modifier("narrow")
+    ]);
+    let k, p;
+    q(() => {
+      clearTimeout(k), clearTimeout(p);
+    });
+    const $ = () => {
+      e.debounce > 0 && !o.isDebounce && (o.isDebounce = !0, k = setTimeout(() => {
+        o.isDebounce = !1;
       }, e.debounce));
-    }, l = r(() => e.loading || u.clicked || u.isDebounce), V = r(() => m.value || l.value || e.link || s.value === "text"), B = (t) => {
-      var c;
-      t.detail > 0 && ((c = t.currentTarget) == null || c.blur()), !(m.value || l.value) && (N(), T("click", t));
+    }, l = c(() => e.loading || o.isDebounce), K = c(() => s.value || l.value || v.value.appearance === "text"), C = (n) => {
+      var r;
+      if (n.detail > 0 && ((r = n.currentTarget) == null || r.blur()), s.value || l.value) {
+        n.preventDefault();
+        return;
+      }
+      e.htmlType !== "button" && (o.nativeActivation = !0, clearTimeout(p), p = setTimeout(() => {
+        o.nativeActivation = !1;
+      }, 0)), $(), F("click", n);
     };
     return () => {
-      var P, j, I, O;
-      const t = (P = n.default) == null ? void 0 : P.call(n), c = (j = n.prefix) == null ? void 0 : j.call(n), S = (I = n.icon) == null ? void 0 : I.call(n), x = (O = n.suffix) == null ? void 0 : O.call(n), b = o(t), g = o(c), h = o(S), p = o(x), z = !b && !g && h && !p, k = e.loadingFill || l.value && (y.value === "circle" || z), K = l.value && !k && (b || g || h || p);
-      return Z(d("button", {
-        class: [L.value, !b && i.modifier("empty-content"), z && i.modifier("only-icon"), k && i.modifier("loading-fill")],
+      var j, I, O, B;
+      const n = (j = t.default) == null ? void 0 : j.call(t), r = (I = t.prefix) == null ? void 0 : I.call(t), x = (O = t.icon) == null ? void 0 : O.call(t), z = (B = t.suffix) == null ? void 0 : B.call(t), g = d(n), w = d(r), T = d(x), D = d(z), P = !g && !w && T && !D, A = e.loadingFill || l.value && (h.value === "circle" || P), E = l.value && !A && (g || w || T || D);
+      return H(u("button", {
+        class: [V.value, !g && i.modifier("empty-content"), P && i.modifier("only-icon"), A && i.modifier("loading-fill")],
         type: e.htmlType,
-        disabled: m.value || l.value,
+        disabled: s.value || l.value && !o.nativeActivation,
         "aria-busy": l.value || void 0,
-        onClick: B
-      }, [d("span", {
+        onClick: C
+      }, [u("span", {
         class: i.element("loading"),
         "aria-hidden": "true",
         style: {
           display: "flex",
           opacity: l.value ? 1 : 0,
-          width: k ? void 0 : l.value ? "1em" : 0,
-          marginRight: K ? "4px" : "0",
+          width: A ? void 0 : l.value ? "1em" : 0,
+          marginRight: E ? "4px" : "0",
           overflow: "hidden"
         }
-      }, [l.value && d(X, null, null)]), g && d("span", {
+      }, [l.value && u(ee, null, null)]), w && u("span", {
         class: i.element("prefix")
-      }, [c]), h && d("span", {
+      }, [r]), T && u("span", {
         class: i.element("prefix")
-      }, [S]), d("span", {
+      }, [x]), u("span", {
         class: i.element("content")
-      }, [t]), p && d("span", {
+      }, [n]), D && u("span", {
         class: i.element("suffix")
-      }, [x])]), [[$("wave"), {
-        disabled: V.value
+      }, [z])]), [[J("wave"), {
+        disabled: K.value
       }]]);
     };
   }
 });
 export {
-  re as default
+  se as default
 };

package/dist/es/components/button/appearance.js

@@ -0,0 +1,7 @@
+function c(r, e, o) {
+  const a = r === "primary" && e === "default" ? "primary" : e, n = r === "primary" ? "solid" : r;
+  return o && ["default", "solid"].includes(n) ? { appearance: "subtle", color: a } : { appearance: n, color: a };
+}
+export {
+  c as resolveButtonAppearance
+};

package/dist/es/components/button/props.js

@@ -21,10 +21,6 @@ const e = {
     type: String,
     default: void 0
   },
-  link: {
-    type: Boolean,
-    default: !1
-  },
   type: {
     type: String,
     default: "default"