@kolkrabbi/kol-theme 0.32.5 → 0.34.0

package/kol-base-tokens.css

@@ -75,6 +75,22 @@
   --kol-surface-absolute-split-inverse: #ffffff;
 }
 
+/* UI STATE — dark tier. The base ladder (kol-color.css) is authored for
+ * light surfaces; on dark it read as dull ink (StatusChip frame, user
+ * 2026-08-09 — success sampled off the reference mint). Own block, NOT the
+ * one above: kol-color.css loads AFTER this file, so its bare `:root` beats
+ * an equal-specificity dark selector on the tie — the :root-qualified forms
+ * here outrank it; bare `.dark` stays for subtree-scoped dark wrappers,
+ * where the element's own props beat anything inherited. */
+:root[data-theme="dark"],
+:root.dark,
+.dark {
+  --ui-error:    #F87171;
+  --ui-warning:  #FACC15;
+  --ui-info:     #60A5FA;
+  --ui-success:  #3DD68C;
+}
+
 /* System-follow dark (0.11.6, user law: explicit choice > system > light).
  * Applies ONLY when no explicit theme is stamped — a consumer that sets
  * data-theme (any value) vetoes the OS. MIRROR of the block above — edit both. */
@@ -102,5 +118,11 @@
     --kol-surface-support-split-inverse: #eeeeee;
     --kol-surface-absolute-split: #000000;
     --kol-surface-absolute-split-inverse: #ffffff;
+
+    /* UI STATE — dark tier (mirror of the block above — edit both) */
+    --ui-error:    #F87171;
+    --ui-warning:  #FACC15;
+    --ui-info:     #60A5FA;
+    --ui-success:  #3DD68C;
   }
 }

package/kol-components-atoms.css

@@ -951,7 +951,9 @@ a.kol-icon-frame {
 }
 .kol-icon-frame-nav {
   background: transparent;
-  color: var(--kol-oq-64);
+  /* full ink, not oq-64 (user re-rule 2026-08-09: header glyphs at 100%
+   * opacity — the dimmed row read as disabled beside the ThemeToggle). */
+  color: var(--kol-surface-on-primary);
   border: 1px solid transparent;
 }
 .kol-icon-frame-grey {

package/kol-components-chess.css

@@ -215,7 +215,7 @@
   border: 1px solid color-mix(in srgb, var(--kol-surface-on-secondary) 12%, transparent);
   background: color-mix(in srgb, var(--kol-surface-on-secondary) 6%, transparent);
   color: var(--kol-surface-on-secondary);
-  border-radius: 10px;
+  border-radius: var(--kol-radius-sm);
   padding: 10px 14px;
   font-family: var(--kol-font-family-mono);
   font-size: 0.75rem;
@@ -376,7 +376,7 @@
   flex: 1;
   border: 1px solid color-mix(in srgb, var(--kol-surface-on-secondary) 10%, transparent);
   background: color-mix(in srgb, var(--kol-surface-on-secondary) 4%, transparent);
-  border-radius: 10px;
+  border-radius: var(--kol-radius-sm);
   padding: 10px;
   font-family: var(--kol-font-family-mono);
   font-size: 0.75rem;
@@ -448,7 +448,7 @@
 .board-playback__section {
   background: color-mix(in srgb, var(--kol-surface-on-secondary) 3%, transparent);
   border: 1px solid color-mix(in srgb, var(--kol-surface-on-secondary) 8%, transparent);
-  border-radius: 10px;
+  border-radius: var(--kol-radius-sm);
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
@@ -479,7 +479,7 @@
 
 .board-playback__notes {
   min-height: 110px;
-  border-radius: 10px;
+  border-radius: var(--kol-radius-sm);
   padding: 16px;
   background: color-mix(in srgb, var(--kol-surface-on-secondary) 4%, transparent);
   font-family: var(--kol-font-family-mono);
@@ -557,7 +557,7 @@
 .analysis-table-empty {
   padding: 32px;
   text-align: center;
-  border-radius: 16px;
+  border-radius: var(--kol-radius-sm);
   border: 1px solid var(--kol-border-default);
   background: color-mix(in srgb, var(--kol-surface-secondary) 92%, transparent);
   color: var(--kol-surface-on-secondary);
@@ -749,7 +749,7 @@
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   padding: 4px 10px;
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   align-self: flex-start;
 }
 
@@ -820,7 +820,7 @@
   font-size: 0.85rem;
   letter-spacing: 0.08em;
   padding: 4px 10px;
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   background: color-mix(in srgb, #0a682a 20%, transparent);
   color: #5dd27f;
 }
@@ -970,7 +970,7 @@
 .chess-hero__line-chart {
   height: 60px;
   background: color-mix(in srgb, var(--kol-surface-on-secondary) 4%, transparent);
-  border-radius: 8px;
+  border-radius: var(--kol-radius-sm);
   padding: 12px;
 }
 

package/kol-components-foundry.css

@@ -165,7 +165,7 @@
   background: transparent;
   color: var(--fv-black);
   border: 1px solid var(--fv-border-color);
-  border-radius: 5px;
+  border-radius: var(--kol-radius-sm);
   transition: 0.2s;
   pointer-events: auto !important;
 }
@@ -296,7 +296,7 @@
   position: absolute;
   z-index: 10001;
   padding: 14px;
-  border-radius: 8px;
+  border-radius: var(--kol-radius-sm);
   color: var(--fv-black);
 }
 

package/kol-components-molecules.css

@@ -106,7 +106,7 @@
 .kol-popover {
   background: var(--kol-surface-secondary);
   border: 1px solid var(--kol-fg-08);
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4),
               0 2px 6px -2px rgba(0, 0, 0, 0.3);
   z-index: 1000;
@@ -121,7 +121,7 @@
   align-items: center;
   gap: 6px;
   background: var(--kol-surface-secondary);
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   padding: 4px 4px 4px 8px;
   font-family: var(--kol-font-family-mono);
   font-size: 11px;
@@ -284,6 +284,22 @@
   color: var(--kol-surface-on-primary);
   background-color: color-mix(in srgb, var(--kol-surface-on-primary) 8%, var(--kol-surface-primary));
 }
+/* ── FieldRow — .kol-field-row ────────────────────────────────────────────
+ * Row anatomy: label column LEFT beside the control column (reference,
+ * 2026-08-09). Lives here, not in a Tailwind arbitrary utility — package
+ * chrome rides theme CSS (the SegmentedToggle lesson): an arbitrary class
+ * silently missed generation in a consumer build and the rows stacked. */
+.kol-field-row {
+  display: grid;
+  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
+}
+
+/* Chevron weight (user frames 2026-08-09): at the chip size the set
+ * chevron's 1.5 stroke renders a 0.75px hairline; 4 units read too thick.
+ * 3 units on the 24 viewBox → 1.5px rendered at size 12. Chip-scoped: the
+ * keyline law governs the set's drawings; chrome may weight a glyph in
+ * context. */
+.kol-status-chip svg path { stroke-width: 3px; }
 .kol-status-chip--success {
   color: var(--ui-success);
   background-color: color-mix(in srgb, var(--ui-success) 15%, var(--kol-surface-primary));
@@ -386,10 +402,16 @@
   border: 1px solid transparent;
 }
 
-.kol-badge-destructive {
-  background-color: color-mix(in srgb, #ef4444 20%, transparent);
-  color: #ef4444;
-  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
+/* Tones ride the --ui-* ladder with StatusChip's exact fill formula — Badge
+ * and StatusChip are siblings and speak one language (user ruling
+ * 2026-08-09, "like a button and dropdown"). Canonical tone name is
+ * `error`; destructive/critical are legacy aliases of the same rule. */
+.kol-badge-error,
+.kol-badge-destructive,
+.kol-badge-critical {
+  color: var(--ui-error);
+  background-color: color-mix(in srgb, var(--ui-error) 15%, var(--kol-surface-primary));
+  border: 1px solid transparent;
 }
 
 .kol-badge-outline {
@@ -399,27 +421,21 @@
 }
 
 .kol-badge-success {
-  background-color: color-mix(in srgb, #22c55e 20%, transparent);
-  color: #22c55e;
-  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
+  color: var(--ui-success);
+  background-color: color-mix(in srgb, var(--ui-success) 15%, var(--kol-surface-primary));
+  border: 1px solid transparent;
 }
 
 .kol-badge-warning {
-  background-color: color-mix(in srgb, #eab308 20%, transparent);
-  color: #eab308;
-  border: 1px solid color-mix(in srgb, #eab308 30%, transparent);
-}
-
-.kol-badge-critical {
-  background-color: color-mix(in srgb, #ef4444 20%, transparent);
-  color: #ef4444;
-  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
+  color: var(--ui-warning);
+  background-color: color-mix(in srgb, var(--ui-warning) 15%, var(--kol-surface-primary));
+  border: 1px solid transparent;
 }
 
 .kol-badge-info {
-  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
-  color: #3b82f6;
-  border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
+  color: var(--ui-info);
+  background-color: color-mix(in srgb, var(--ui-info) 15%, var(--kol-surface-primary));
+  border: 1px solid transparent;
 }
 
 .kol-badge-sm {

package/kol-components-workshop.css

@@ -473,7 +473,7 @@
 .docs-card {
   display: block;
   padding: 16px;
-  border-radius: 8px;
+  border-radius: var(--kol-radius-sm);
   border: 1px solid;
   border-color: color-mix(in srgb, var(--kol-surface-on-primary) 4%, transparent);
   background: transparent;
@@ -494,7 +494,7 @@
 /* Compact doc card for sidebar */
 .docs-card--compact {
   padding: 8px 12px;
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
 }
 
 .docs-title-link {
@@ -625,7 +625,7 @@
 .docs-image {
   max-width: 100%;
   height: auto;
-  border-radius: 8px;
+  border-radius: var(--kol-radius-sm);
   margin-block: 1.5rem;
 }
 
@@ -680,7 +680,7 @@
   gap: 6px;
   padding: 6px 12px;
   border: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 16%, transparent);
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   background: transparent;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -733,7 +733,7 @@
   aspect-ratio: 1;
   position: relative;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--kol-radius-sm);
   background: color-mix(in srgb, var(--kol-surface-on-primary) 4%, transparent);
 }
 

package/kol-theme.css

@@ -118,10 +118,14 @@
      ignored rather than followed. A value used six times is a rung. */
   --kol-radius-xs: 2px;
   --kol-radius-sm: 4px;
-  --kol-radius-md: 8px;
-  --kol-radius-lg: 12px;
-  --kol-radius-xl: 16px;
-  --kol-radius-2xl: 20px;
+  /* CONTAINERS ARE 4px (user ruling 2026-08-09, "change 8px radius to 4px in
+     containers. everywhere."). The repo ships 4px or full, nothing between —
+     md/lg/xl/2xl stay resolvable so no consumer's var() breaks, but they all
+     collapse to the 4px value. Do not re-widen a rung without a ruling. */
+  --kol-radius-md: 4px;
+  --kol-radius-lg: 4px;
+  --kol-radius-xl: 4px;
+  --kol-radius-2xl: 4px;
   --kol-radius-full: 9999px;
 
   /* Shadows (subtle elevation) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.32.5",
+  "version": "0.34.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",