@kolkrabbi/kol-theme 0.33.0 → 0.35.0

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;
@@ -402,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 {
@@ -415,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/kol-typography.css

@@ -912,7 +912,9 @@
 .kol-sans-heading-04 {
   font-family: var(--kol-font-family-sans-compact);
   font-size: var(--kol-text-heading-04);
-  line-height: 100%;
+  /* 120% — was 100%, the one dip in the 110/110/120/x/125 ramp; 24px H4
+   * set solid, tighter than the 64px H1 (user ruling 2026-08-12). */
+  line-height: 120%;
   font-weight: 500;
 }
 

package/kol-utilities.css

@@ -90,3 +90,36 @@
 .hide-number-spinners {
   -moz-appearance: textfield;
 }
+
+/* Link underline — the animated hover affordance: draws in left→right on
+ * hover/focus, retracts right→left on leave (transform-origin swap, not a
+ * fade). Line is currentColor so it rides the text at any scale. Minted from
+ * kol-website's animations.css (NavLinkUnderline, 2026-08-12); DS version
+ * adds :focus-visible parity and reduced-motion handling.
+ * Thickness knob: --kol-link-underline-size (2px default — fine at mono-14,
+ * a heading-01 link may want 3px). */
+.kol-link-underline {
+  position: relative;
+}
+.kol-link-underline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: var(--kol-link-underline-size, 2px);
+  background-color: currentColor;
+  transform-origin: bottom right;
+  transform: scaleX(0);
+  transition: transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.kol-link-underline:hover::after,
+.kol-link-underline:focus-visible::after {
+  transform-origin: bottom left;
+  transform: scaleX(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-link-underline::after {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.33.0",
+  "version": "0.35.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",