@kolkrabbi/kol-theme 0.7.6 → 0.9.0

package/kol-color.css

@@ -80,6 +80,14 @@
 
 /* =============================================================================
  * SYSTEM PREFERENCE (Automatic Dark Mode)
+ *
+ * KEPT deliberately (ruling applied 2026-07-15, ledger-2.0 #2.4): KOL policy
+ * is light-first + FOLLOW-SYSTEM — an undecided page respects the visitor's
+ * OS preference; an explicit choice (app-set data-theme or a saved toggle)
+ * always wins because [data-theme="light"] opts out of this block and
+ * [data-theme="dark"] doesn't need it. A repo wanting hard light-always
+ * stamps data-theme="light" at boot — that's the per-repo seam, not a theme
+ * edit. ThemeToggle + useTheme implement the same policy JS-side.
  * ============================================================================= */
 
 @media (prefers-color-scheme: dark) {

package/kol-components-atoms.css

@@ -225,6 +225,14 @@
   outline-offset: 2px;
 }
 
+/* Icon-only buttons — was an inline style in Button.jsx, which beat every
+ * consumer display utility (`lg:hidden` could never hide an iconOnly button).
+ * Chrome belongs here, layered, so utilities stay sovereign. The flex
+ * centering comes from .kol-btn; the icon-only extra is only line-height. */
+.kol-btn-icon {
+  line-height: 0;
+}
+
 .kol-btn-primary {
   background: var(--kol-surface-secondary);
   color: var(--kol-surface-on-primary);
@@ -703,84 +711,6 @@
 }
 
 
-/* ═══════════════════════════════════════════════════════════════
- * Section label typography — promoted from residual kol-components.css.
- * Used by molecules/SectionLabel.jsx. Mono variants + compact variants.
- * Typography-adjacent; lives here because consumed by atom-tier
- * components (SectionLabel etc.).
- * ═══════════════════════════════════════════════════════════════ */
-
-.kol-label-mono-sm {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 470;
-  font-size: clamp(14px, 1.5vw, 24px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label-mono-md {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 470;
-  font-size: clamp(12px, 1vw, 16px);
-  line-height: 125%;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label-mono-xs {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 470;
-  font-size: clamp(10px, 0.8vw, 14px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label-compact-lg {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 500;
-  font-size: clamp(24px, 2vw, 28px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label-compact-md {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 500;
-  font-size: clamp(12px, 1vw, 16px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 470;
-  font-size: clamp(14px, 1.5vw, 24px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--kol-surface-on-primary);
-}
-
-.kol-label-compact {
-  font-family: var(--kol-font-family-mono);
-  font-weight: 500;
-  font-size: clamp(12px, 1vw, 16px);
-  line-height: 100%;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--kol-surface-on-primary);
-}
-
-
 /* ═══════════════════════════════════════════════════════════════
  * Icon-swap utility — promoted from residual kol-components.css.
  * Used by molecules/SectionLabel.jsx and any <button>/<a> with

package/kol-components-chess.css

@@ -97,6 +97,45 @@
   z-index: 1;
 }
 
+/* board input (brief 3.0) — selection wash + legal-target marks; amber
+ * rides the same highlight language as --highlighted so it reads on all
+ * six board themes */
+.chess-square--interactive {
+  cursor: pointer;
+}
+
+.chess-square--selected::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: rgba(251, 191, 36, 0.55);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.chess-square--target::before {
+  content: '';
+  position: absolute;
+  left: 36%;
+  top: 36%;
+  width: 28%;
+  height: 28%;
+  border-radius: 999px;
+  background-color: rgba(251, 191, 36, 0.7);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.chess-square--target-capture::before {
+  content: '';
+  position: absolute;
+  inset: 6%;
+  border: 3px solid rgba(251, 191, 36, 0.7);
+  border-radius: 999px;
+  pointer-events: none;
+  z-index: 11; /* over the piece (its wrapper is z-10) */
+}
+
 .chess-board__coordinate-label {
   display: inline-flex;
   align-items: center;

package/kol-components-molecules.css

@@ -14,6 +14,14 @@
  * ─────────────────────────────────────────────────────────────────────
  */
 
+/* Every floating node (PopoverPanel root, with or without panel chrome).
+ * Floats must top overlay chrome (.kol-overlay is z-100) — without this a
+ * dropdown/menu/tooltip opened INSIDE a FullscreenOverlay stacks under the
+ * sheet and its options intercept nothing. */
+.kol-popover-float {
+  z-index: 110;
+}
+
 /* Popover — default chrome for floating-ui-positioned panels.
  * Used by molecules/Popover.jsx PopoverPanel. */
 .kol-popover {
@@ -198,6 +206,27 @@
   margin: 0 12px;
 }
 
+/* The option list — chrome, not consumer utilities (brief-2.0 defect 2: a
+ * consumer without @source got an uncapped, unscrollable panel). */
+.kol-dd-list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* The trigger chevron — pushed to the trailing edge, flips on open state.
+ * Replaces the ml-auto utility + inline rotate style in Dropdown.jsx. */
+.kol-dd-caret {
+  margin-left: auto;
+  transition: transform 300ms;
+}
+
+.kol-dd-trigger[data-state="open"] .kol-dd-caret {
+  transform: rotate(180deg);
+}
+
 .tag-control:hover {
   background-color: var(--kol-oq-12);
   color: var(--kol-surface-on-primary);

package/kol-components-workshop.css

@@ -88,6 +88,10 @@
 
 /* Sidebar toggle buttons (collapsible section headers) — layout only.
  * Type/color carried in JSX (kol-helper-10 text-meta). */
+/* Vertical rhythm matches .shell-nav-group-header (6px rows) — ledger-2.0
+ * #2.6 ruling (final, user-reviewed 2026-07-15): the rail keeps its quieter
+ * 10px label scale (deliberate hierarchy vs the nav's 14px), row rhythm is
+ * shared. */
 .shell-sidebar-toggle {
   display: flex;
   align-items: center;
@@ -96,7 +100,7 @@
   width: 100%;
   border: none;
   background: transparent;
-  padding: 0;
+  padding: 6px 0;
   transition: color 0.15s ease;
 }
 

package/kol-typography-mono.css

@@ -14,7 +14,7 @@
  */
 
 /* =============================================================================
- * FONT-FACE — JetBrains Mono (4 weights: 400, 500, 500i, 600)
+ * FONT-FACE — JetBrains Mono (6 faces: 400, 400i, 500, 500i, 600, 600i)
  * ============================================================================= */
 
 @font-face {
@@ -25,6 +25,14 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
 @font-face {
   font-family: 'JetBrains Mono';
   src: url('/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
@@ -49,6 +57,14 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* =============================================================================
  * FAMILY TOKEN + TAILWIND CONTRACT
  *

package/package.json

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