@kungal/ui-vue 1.6.2 → 1.7.0

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.2",
+  "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.2"
+    "@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.2"
+    "@kungal/ui-tokens": "1.7.0"
   },
   "scripts": {
     "build": "vite build && cp src/prose.css dist/prose.css && vue-tsc -p tsconfig.build.json",