klun-ui 0.1.21 → 0.1.23

package/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.23] — 2026-07-16
+
+### Fixed
+- **Dark theme — soft dividers were invisible.** In dark mode the token
+  `--klun-stroke-soft-200` resolved to `--klun-800`, the **same value as the page
+  background** `--klun-bg-weak-50`, so every "soft" border/divider (table cell
+  gridlines, card/modal/tabs frames, list separators — anything using the default
+  divider token) blended into the background and disappeared. Lifted the dark
+  value to `--klun-600` so soft dividers are clearly visible on both the page
+  background (`--klun-800`) and elevated surfaces (`--klun-bg-white-0` =
+  `--klun-950`), matching the crispness of the light theme's grey divider. Light
+  theme is unchanged. Affects every component that draws a soft divider; no
+  per-component or per-app override is needed anymore.
+
+## [0.1.22] — 2026-07-13
+
+### Changed
+- **`Markdown` — polished GFM tables.** Tables now read with real structure in
+  both themes: a stronger outer frame over lighter inner gridlines, a tinted
+  header with an emphasized bottom rule, and zebra-striped body rows. Row
+  **hover is a primary (accent) tint with a leading accent bar** — a real
+  highlight that no longer blends into the gray zebra striping.
+
 ## [0.1.21] — 2026-07-13
 
 ### Added

package/dist/styles.css

@@ -565,7 +565,7 @@
   --klun-state-white-dark: var(--klun-teal-400);
   --klun-static-static-black: var(--klun-950);
   --klun-static-static-white: var(--klun-0);
-  --klun-stroke-soft-200: var(--klun-800);
+  --klun-stroke-soft-200: var(--klun-600);
   --klun-stroke-strong-950: var(--klun-0);
   --klun-stroke-sub-300: var(--klun-600);
   --klun-stroke-white-0: var(--klun-950);
@@ -3352,29 +3352,46 @@ body {
   color: var(--klun-text-strong-950);
 }
 .klun-md-tablewrap {
-  margin: 0 0 8px;
+  margin: 4px 0 12px;
   overflow-x: auto;
 }
 .klun-md-table {
   border-collapse: collapse;
   width: 100%;
   font: var(--klun-text-paragraph-sm);
+  border: 1px solid var(--klun-stroke-sub-300);
 }
 .klun-md-table th,
 .klun-md-table td {
-  padding: 6px 12px;
+  padding: 8px 14px;
   border: 1px solid var(--klun-stroke-soft-200);
   text-align: left;
   vertical-align: top;
 }
-.klun-md-table th {
+.klun-md-table thead th {
   color: var(--klun-text-strong-950);
   font: var(--klun-text-label-sm);
   background: var(--klun-bg-weak-50);
+  border-bottom: 2px solid var(--klun-stroke-sub-300);
   white-space: nowrap;
 }
+.klun-md-table tbody td {
+  color: var(--klun-text-sub-600);
+}
 .klun-md-table tbody tr:nth-child(even) {
-  background: var(--klun-bg-weak-50);
+  background: var(--klun-bg-weak-25);
+}
+.klun-md-table tbody tr {
+  transition: background 0.12s ease;
+}
+.klun-md-table tbody tr:hover {
+  background: color-mix(in srgb, var(--klun-primary-base) 15%, var(--klun-bg-white-0));
+}
+.klun-md-table tbody tr:hover td {
+  color: var(--klun-text-strong-950);
+}
+.klun-md-table tbody tr:hover td:first-child {
+  box-shadow: inset 3px 0 0 var(--klun-primary-base);
 }
 .klun-md-hr {
   margin: 12px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "klun-ui",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Klun UI — a themeable React + TypeScript component library and design system (light/dark, 6 accent themes, global radius axis).",
   "license": "MIT",
   "type": "module",