@kungal/ui-vue 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @kungal/ui-vue
 
+## 1.7.0
+
+### Minor Changes
+
+- 82de3b5: feat(tokens): regenerate the semantic palette in OKLCH with contrast-guaranteed on-colors
+
+  The whole semantic color system is now **generated** (scripts/gen-tokens.mjs,
+  OKLCH via culori) instead of hand-authored HSL. Each hue is defined once by its
+  OKLCH hue + a vivid `solidL`; every shade is laid on a perceptual lightness ramp
+  (so `-500` means the same perceived lightness for every color), and each color
+  ships a paired **`--color-{c}-foreground`** on-color DERIVED by measured WCAG
+  contrast. The generator asserts AA on every solid (fill, text) pair in BOTH light
+  and dark and fails the build on any regression — illegible solids can't ship
+  again. Adds the previously-missing `-950` shade.
+
+  What changes visually: solids keep HeroUI-style vivid fills (bright amber warning,
+  bright green success — no more muddy darkened `-600` fills), with white text on
+  the medium hues (primary/danger/default) and a refined dark tint on the bright
+  ones (secondary/success/warning/info). Solids are now mode-independent, so the
+  per-variant `dark:bg-{c}-{n}` pins are gone. **This is a visual change** to every
+  colored surface; the component API (color/variant names) is unchanged.
+
+  `@kungal/ui-core`: `kunSolidClasses` / `kunSolidFgClasses` / `kunSolidBgClasses`
+  and the Button solid/shadow rows now use `bg-{c} text-{c}-foreground`. CheckBox,
+  DatePicker, Switch, Carousel drop their hardcoded white/black + dark pins.
+
+### Patch Changes
+
+- Updated dependencies [82de3b5]
+  - @kungal/ui-core@1.7.0
+
 ## 1.6.3
 
 ### Patch Changes

package/dist/components/CheckBox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CheckBox.vue"],"names":[],"mappings":"AAwLA,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,iBAAiB,CAAA;AAIxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI/C,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAyFpC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoIxD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CheckBox.vue.d.ts","sourceRoot":"","sources":["../../src/components/CheckBox.vue"],"names":[],"mappings":"AAgLA,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,iBAAiB,CAAA;AAIxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI/C,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAiFpC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoIxD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/index.js

@@ -1261,7 +1261,7 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 				type: "button",
 				"aria-label": `跳到第 ${e} 张`,
 				"aria-current": a.value === e - 1 ? "true" : void 0,
-				class: y(P(q)("h-2 rounded-full transition-all", a.value === e - 1 ? "bg-primary dark:bg-primary-400 w-5" : "bg-default-300 hover:bg-default-400 w-2")),
+				class: y(P(q)("h-2 rounded-full transition-all", a.value === e - 1 ? "bg-primary w-5" : "bg-default-300 hover:bg-default-400 w-2")),
 				onClick: (t) => _(e - 1)
 			}, null, 10, Rn))), 128))])) : c("", !0)
 		], 42, Pn));
@@ -1340,22 +1340,22 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 			let t = e.target.checked;
 			a.value = t, s("change", t);
 		}, h = {
-			default: "border-default-300 checked:bg-default dark:checked:bg-default-400 checked:border-default hover:border-default",
-			primary: "border-primary-300 checked:bg-primary dark:checked:bg-primary-400 checked:border-primary hover:border-primary",
-			secondary: "border-secondary-300 checked:bg-secondary dark:checked:bg-secondary-300 checked:border-secondary hover:border-secondary",
-			success: "border-success-300 checked:bg-success-600 dark:checked:bg-success-400 checked:border-success hover:border-success",
-			warning: "border-warning-300 checked:bg-warning dark:checked:bg-warning-400 checked:border-warning hover:border-warning",
-			danger: "border-danger-300 checked:bg-danger dark:checked:bg-danger-400 checked:border-danger hover:border-danger",
-			info: "border-info-300 checked:bg-info-600 dark:checked:bg-info-300 checked:border-info hover:border-info"
+			default: "border-default-300 checked:bg-default checked:border-default hover:border-default",
+			primary: "border-primary-300 checked:bg-primary checked:border-primary hover:border-primary",
+			secondary: "border-secondary-300 checked:bg-secondary checked:border-secondary hover:border-secondary",
+			success: "border-success-300 checked:bg-success checked:border-success hover:border-success",
+			warning: "border-warning-300 checked:bg-warning checked:border-warning hover:border-warning",
+			danger: "border-danger-300 checked:bg-danger checked:border-danger hover:border-danger",
+			info: "border-info-300 checked:bg-info checked:border-info hover:border-info"
 		}, g = {
-			default: "bg-default dark:bg-default-400 border-default",
-			primary: "bg-primary dark:bg-primary-400 border-primary",
-			secondary: "bg-secondary dark:bg-secondary-300 border-secondary",
-			success: "bg-success-600 dark:bg-success-400 border-success",
-			warning: "bg-warning dark:bg-warning-400 border-warning",
-			danger: "bg-danger dark:bg-danger-400 border-danger",
-			info: "bg-info-600 dark:bg-info-300 border-info"
-		}, _ = o(() => he[n.color]), v = o(() => _.value === "text-black" ? "bg-black" : "bg-white");
+			default: "bg-default border-default",
+			primary: "bg-primary border-primary",
+			secondary: "bg-secondary border-secondary",
+			success: "bg-success border-success",
+			warning: "bg-warning border-warning",
+			danger: "bg-danger border-danger",
+			info: "bg-info border-info"
+		}, _ = o(() => he[n.color]);
 		return (t, o) => (w(), l("div", null, [u("div", { class: y(P(q)("flex cursor-pointer items-center", r.value.gap, e.className)) }, [
 			u("div", Vn, [
 				u("input", {
@@ -1375,7 +1375,7 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 					name: "lucide:check",
 					class: y(r.value.check)
 				}, null, 8, ["class"])], 2), [[B, !e.indeterminate]]),
-				W(u("div", Un, [u("span", { class: y(["h-0.5 rounded-full", [i[n.size], v.value]]) }, null, 2)], 512), [[B, e.indeterminate]])
+				W(u("div", Un, [u("span", { class: y(["h-0.5 rounded-full bg-current", [i[n.size], _.value]]) }, null, 2)], 512), [[B, e.indeterminate]])
 			]),
 			k(t.$slots, "default"),
 			e.label ? (w(), l("label", {
@@ -1546,9 +1546,9 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 			height: "1.85rem",
 			padding: "0",
 			cursor: "pointer",
-			color: "hsl(var(--foreground))",
-			background: "hsl(var(--content1))",
-			border: "1px solid var(--color-kun-border, hsla(var(--foreground), 0.14))",
+			color: "oklch(var(--foreground))",
+			background: "oklch(var(--content1))",
+			border: "1px solid var(--color-kun-border, oklch(var(--foreground) / 0.14))",
 			borderRadius: "0.5rem",
 			opacity: "0.75",
 			transition: "opacity 0.15s, color 0.15s"
@@ -1567,8 +1567,8 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 		if (!t) return;
 		let n = (t.querySelector("code") ?? t).textContent ?? "";
 		navigator.clipboard.writeText(n).then(() => {
-			e.classList.add("copied"), e.classList.contains("kun-prose-copy") ? (e.replaceChildren(Er(Tr)), e.style.color = "hsl(var(--success-500))", setTimeout(() => {
-				e.replaceChildren(Er(wr)), e.style.color = "hsl(var(--foreground))", e.classList.remove("copied");
+			e.classList.add("copied"), e.classList.contains("kun-prose-copy") ? (e.replaceChildren(Er(Tr)), e.style.color = "oklch(var(--success-500))", setTimeout(() => {
+				e.replaceChildren(Er(wr)), e.style.color = "oklch(var(--foreground))", e.classList.remove("copied");
 			}, 2e3)) : setTimeout(() => e.classList.remove("copied"), 3e3);
 		}).catch((e) => {
 			console.error("复制失败:", e);
@@ -2500,7 +2500,7 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 						role: "gridcell"
 					}, [u("button", {
 						disabled: t.isDisabled,
-						class: y(P(q)(P(q)("flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors", P(Y)[e.color]), !t.isCurrentMonth && "text-default-400", t.isToday && "border-primary bg-primary/20 border", !t.isSelected && !t.isDisabled && "hover:bg-default/20", t.isDisabled && "cursor-not-allowed opacity-50", t.isSelected && "bg-primary dark:bg-primary-400 hover:bg-primary/90 text-white", (t.isInRange || fe(t.date)) && !t.isSelected && "bg-primary/10 rounded-none", t.isRangeStart && "rounded-r-none", t.isRangeEnd && "rounded-l-none")),
+						class: y(P(q)(P(q)("flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors", P(Y)[e.color]), !t.isCurrentMonth && "text-default-400", t.isToday && "border-primary bg-primary/20 border", !t.isSelected && !t.isDisabled && "hover:bg-default/20", t.isDisabled && "cursor-not-allowed opacity-50", t.isSelected && "bg-primary text-primary-foreground hover:bg-primary/90", (t.isInRange || fe(t.date)) && !t.isSelected && "bg-primary/10 rounded-none", t.isRangeStart && "rounded-r-none", t.isRangeEnd && "rounded-l-none")),
 						"aria-label": t.date.toDateString(),
 						"aria-selected": t.isSelected,
 						tabindex: t.date.toDateString() === ie.value.toDateString() ? 0 : -1,
@@ -5570,7 +5570,7 @@ var tt = Symbol("kun-accordion"), nt = /* @__PURE__ */ p({
 			}, null, 40, Ms),
 			u("div", Ns, [u("div", { class: y(["rounded-full transition-colors duration-kun-fast ease-kun-standard peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50", [
 				a.value.track,
-				n.value ? "bg-primary-500 dark:bg-primary-400" : "bg-default-500",
+				n.value ? "bg-primary" : "bg-default-500",
 				e.disabled ? "opacity-50" : "",
 				n.value && e.disabled ? "bg-primary-300" : ""
 			]]) }, null, 2), u("div", { class: y(P(q)("absolute top-0.5 left-0.5 transform rounded-full bg-white transition-transform duration-kun-fast ease-kun-emphasized", a.value.thumb, n.value ? a.value.translate : "translate-x-0")) }, null, 2)]),

package/dist/prose.css

@@ -11,9 +11,9 @@
  * want beautiful defaults opt in here.
  *
  * Token-driven, so it adapts to light/dark automatically. The theme stores
- * colours as comma HSL *channels* (`--foreground: 202, 24%, 9%`), so alpha uses
- * legacy `hsla(var(--x), a)` — NOT `hsl(var(--x) / a)`. `--color-kun-border` is
- * already a full neutral `hsl()` colour. Neutral foreground/content tokens drive
+ * colours as OKLCH *channels* (`--foreground: 0.2057 0.0132 233.66`), so wrap in
+ * `oklch(var(--x))` and alpha uses `oklch(var(--x) / a)`. `--color-kun-border`
+ * is already a full neutral colour. Neutral foreground/content tokens drive
  * body + chrome; `--primary-*` only links and the blockquote rule.
  *
  * Pass `compact` to KunContent (or add `.kun-prose-compact`) for a tighter
@@ -25,7 +25,7 @@
   margin-inline: auto;
   font-size: 1.0625rem; /* 17px — editorial body */
   line-height: 1.8; /* generous leading, kind to CJK */
-  color: hsl(var(--foreground));
+  color: oklch(var(--foreground));
   text-wrap: pretty;
   overflow-wrap: break-word;
 }
@@ -48,7 +48,7 @@
 .kun-prose h4,
 .kun-prose h5,
 .kun-prose h6 {
-  color: hsl(var(--foreground));
+  color: oklch(var(--foreground));
   line-height: 1.3;
   text-wrap: balance;
   scroll-margin-top: 5rem;
@@ -85,7 +85,7 @@
 .kun-prose h6 {
   font-size: 0.9em;
   font-weight: 600;
-  color: hsla(var(--foreground), 0.65);
+  color: oklch(var(--foreground) / 0.65);
   margin: 1.5em 0 0.4em;
 }
 
@@ -93,14 +93,14 @@
 .kun-prose strong,
 .kun-prose b {
   font-weight: 650;
-  color: hsl(var(--foreground));
+  color: oklch(var(--foreground));
 }
 .kun-prose em,
 .kun-prose i {
   font-style: italic;
 }
 .kun-prose a {
-  color: hsl(var(--primary-600));
+  color: oklch(var(--primary-600));
   font-weight: 500;
   text-decoration: underline;
   text-decoration-thickness: 1px;
@@ -108,11 +108,11 @@
   transition: color 0.15s var(--ease-kun-standard, ease);
 }
 .kun-prose a:hover {
-  color: hsl(var(--primary-500));
+  color: oklch(var(--primary-500));
 }
 .kun-prose mark {
-  background: hsla(var(--warning-300, 45, 93%, 64%), 0.55);
-  color: hsl(var(--foreground));
+  background: oklch(var(--warning-300) / 0.55);
+  color: oklch(var(--foreground));
   padding: 0.05em 0.25em;
   border-radius: 0.25em;
 }
@@ -134,7 +134,7 @@
   padding-left: 0.25em;
 }
 .kun-prose li::marker {
-  color: hsla(var(--foreground), 0.45);
+  color: oklch(var(--foreground) / 0.45);
 }
 .kun-prose ul ul,
 .kun-prose ul ol,
@@ -150,8 +150,8 @@
 .kun-prose blockquote {
   margin: 1.6em 0;
   padding: 0.2em 0 0.2em 1.1em;
-  border-left: 3px solid hsl(var(--primary-400));
-  color: hsla(var(--foreground), 0.72);
+  border-left: 3px solid oklch(var(--primary-400));
+  color: oklch(var(--foreground) / 0.72);
   font-style: normal;
 }
 .kun-prose blockquote p {
@@ -163,8 +163,8 @@
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
   font-size: 0.875em;
-  background: hsl(var(--content2));
-  border: 1px solid var(--color-kun-border, hsla(var(--foreground), 0.12));
+  background: oklch(var(--content2));
+  border: 1px solid var(--color-kun-border, oklch(var(--foreground) / 0.12));
   border-radius: 0.375em;
   padding: 0.12em 0.4em;
 }
@@ -172,8 +172,8 @@
   position: relative; /* anchors the injected copy button */
   margin: 1.5em 0;
   padding: 1em 1.15em;
-  background: hsl(var(--content2));
-  border: 1px solid var(--color-kun-border, hsla(var(--foreground), 0.12));
+  background: oklch(var(--content2));
+  border: 1px solid var(--color-kun-border, oklch(var(--foreground) / 0.12));
   border-radius: 0.75rem;
   overflow-x: auto;
   font-size: 0.9em;
@@ -199,11 +199,11 @@
   text-align: left;
   font-weight: 650;
   padding: 0.6em 0.85em;
-  border-bottom: 2px solid var(--color-kun-border, hsla(var(--foreground), 0.16));
+  border-bottom: 2px solid var(--color-kun-border, oklch(var(--foreground) / 0.16));
 }
 .kun-prose tbody td {
   padding: 0.6em 0.85em;
-  border-bottom: 1px solid var(--color-kun-border, hsla(var(--foreground), 0.1));
+  border-bottom: 1px solid var(--color-kun-border, oklch(var(--foreground) / 0.1));
 }
 .kun-prose tbody tr:last-child td {
   border-bottom: 0;
@@ -212,7 +212,7 @@
 /* Rule + media */
 .kun-prose hr {
   border: 0;
-  border-top: 1px solid var(--color-kun-border, hsla(var(--foreground), 0.12));
+  border-top: 1px solid var(--color-kun-border, oklch(var(--foreground) / 0.12));
   margin: 3em 0;
 }
 .kun-prose img,
@@ -229,9 +229,9 @@
   font-size: 0.8em;
   padding: 0.15em 0.45em;
   border-radius: 0.375em;
-  background: hsl(var(--content2));
-  border: 1px solid var(--color-kun-border, hsla(var(--foreground), 0.14));
-  box-shadow: 0 1px 0 hsla(var(--foreground), 0.12);
+  background: oklch(var(--content2));
+  border: 1px solid var(--color-kun-border, oklch(var(--foreground) / 0.14));
+  box-shadow: 0 1px 0 oklch(var(--foreground) / 0.12);
 }
 
 /* ── Compact density (comment / reply streams) ───────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/ui-vue",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "KunUI Vue 3 component layer — Nuxt-decoupled. Works in any Vue app; pairs with @kungal/ui-nuxt for Nuxt sugar.",
   "type": "module",
   "keywords": [
@@ -50,7 +50,7 @@
     "date-fns": "^4.1.0",
     "focus-trap": "^8.2.1",
     "vue-advanced-cropper": "^2.8.9",
-    "@kungal/ui-core": "1.6.3"
+    "@kungal/ui-core": "1.7.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -62,7 +62,7 @@
     "vite": "^8.0.16",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.3",
-    "@kungal/ui-tokens": "1.6.3"
+    "@kungal/ui-tokens": "1.7.0"
   },
   "scripts": {
     "build": "vite build && cp src/prose.css dist/prose.css && vue-tsc -p tsconfig.build.json",