@kolkrabbi/kol-theme 0.7.4 → 0.7.5

package/kol-base-tokens.css

@@ -49,6 +49,9 @@
 
 /* Dark Mode — surface overrides */
 :is([data-theme="dark"], .dark) {
+  --kol-link:       #60A5FA;
+  --kol-link-hover: #93C5FD;
+
   --kol-surface-primary: #121215;
   --kol-surface-on-primary: #fafafa;
 

package/kol-color.css

@@ -34,6 +34,16 @@
   --kol-accent-on-primary:     var(--kol-surface-primary);
   --kol-accent-primary-strong: color-mix(in srgb, var(--kol-accent-primary) 80%, var(--kol-surface-primary));
 
+  /* ---------------------------------------------------------------------------
+   * HYPERLINKS — the one text role with its own color (2026-07-15, chess
+   * consumer audit finding 3: no link token, no a{} rule → links rendered as
+   * body ink). Theme-owned hex defaults in the --ui-info blue family; the
+   * brand layer overrides the tokens, consumers override per element.
+   * --------------------------------------------------------------------------- */
+
+  --kol-link:       #2563EB;
+  --kol-link-hover: #1D4ED8;
+
   /* ---------------------------------------------------------------------------
    * UI STATE — error / warning / info / success.
    * Direct hex (not ramp-dependent). Intentionally not part of the brand layer
@@ -74,6 +84,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
+    --kol-link:       #60A5FA;
+    --kol-link-hover: #93C5FD;
+
     --kol-surface-primary: #121215;
     --kol-surface-on-primary: #FAFAFA;
 
@@ -88,6 +101,15 @@
   }
 }
 
+/* =============================================================================
+ * BASE ANCHOR RULE — unstyled links get the link color. Sits in the
+ * components layer, so any utility class or later-loading chrome sheet
+ * (kol-framework, brand) still wins per the cascade contract (§5).
+ * ============================================================================= */
+
+a { color: var(--kol-link); }
+a:hover { color: var(--kol-link-hover); }
+
 /* =============================================================================
  * CONTEXT-AWARE SURFACE INVERSE
  * ============================================================================= */

package/kol-components-atoms.css

@@ -140,6 +140,51 @@
 }
 
 
+/* ═══════════════════════════════════════════════════════════════
+ * FullscreenOverlay — atoms/FullscreenOverlay.jsx
+ * The classes existed in JSX with NO rules anywhere (found 2026-07-15 via
+ * the chess archive overlay — close button floated in dead space).
+ * Anatomy: fixed dim backdrop → full-bleed sheet → absolute corner close.
+ * ═══════════════════════════════════════════════════════════════ */
+
+.kol-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: color-mix(in srgb, var(--kol-color-absolute-black) 55%, transparent);
+  display: grid;
+  place-items: center;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* the sheet HUGS its content (the consumer's panel) — backdrop clicks land
+ * on .kol-overlay itself, so outside-dismiss works; the close button rides
+ * the panel's corner instead of floating at the viewport edge */
+.kol-overlay-sheet {
+  position: relative;
+  max-width: 100%;
+}
+
+.kol-overlay-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--kol-radius-sm);
+  border: 1px solid var(--kol-oq-16);
+  background: var(--kol-surface-primary);
+  color: var(--kol-surface-on-primary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
 /* ═══════════════════════════════════════════════════════════════
  * Button — atoms/Button.jsx
  *
@@ -244,6 +289,38 @@
   }
 }
 
+/* Grey (2026-07-15, user-ordered) — pill-subtle's visual weight as a real
+ * Button variant on the opaque tier: rest oq-12, hover/active one stop past
+ * each, same state math as the rest of the family. */
+.kol-btn-grey {
+  background: var(--kol-oq-12);
+  color: var(--kol-surface-on-primary);
+  border: 1px solid transparent;
+}
+@media (hover: hover) {
+  .kol-btn-grey:not(.kol-btn-animate):hover {
+    background-color: var(--kol-oq-16);
+    color: var(--kol-surface-on-primary);
+  }
+}
+
+/* Destructive actions (2026-07-15, chess consumer audit finding 1: red was
+ * being hacked onto normal buttons via className). Accent's shape on the
+ * --ui-error state token — filled, opaque interaction stops, white label
+ * (error red carries it in both themes). */
+.kol-btn-danger {
+  background: var(--ui-error);
+  color: var(--kol-color-absolute-white);
+  border: 1px solid transparent;
+  font-weight: 500;
+}
+@media (hover: hover) {
+  .kol-btn-danger:not(.kol-btn-animate):hover {
+    background-color: color-mix(in srgb, var(--ui-error) 80%, var(--kol-surface-primary));
+    color: var(--kol-color-absolute-white);
+  }
+}
+
 .kol-btn-sm { padding: 4px 12px; }
 .kol-btn-md { padding: 6px 16px; }
 .kol-btn-lg { padding: 8px 20px; }
@@ -255,6 +332,8 @@
 .kol-btn-accent:not(.kol-btn-animate):not(:disabled):active { background-color: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-primary)); }
 .kol-btn-outline:not(.kol-btn-animate):not(:disabled):active,
 .kol-btn-ghost:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-08); }
+.kol-btn-danger:not(.kol-btn-animate):not(:disabled):active { background-color: color-mix(in srgb, var(--ui-error) 70%, var(--kol-surface-primary)); }
+.kol-btn-grey:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-24); }
 
 .kol-btn:disabled,
 .kol-btn[disabled] {

package/kol-components-chess.css

@@ -41,14 +41,23 @@
   border-radius: 4px;
 }
 
+/* fluid sizes by width AND height (2026-07-15 100dvh stage): the square is
+ * the largest that fits both the column width and the viewport minus the
+ * stage chrome. Mobile budget is bigger (strip + transport + notation min). */
 .chess-board--fluid {
-  width: 100%;
+  width: min(100%, calc(100dvh - 200px));
   height: auto;
   aspect-ratio: 1;
   max-width: 760px;
   min-width: 280px;
 }
 
+@media (max-width: 1023px) {
+  .chess-board--fluid {
+    width: min(100%, calc(100dvh - 380px));
+  }
+}
+
 
 .chess-board__grid {
   display: grid;
@@ -535,6 +544,8 @@
   color: var(--kol-status-danger);
 }
 
+/* no text-transform (casing law) — the JSX authors 'CHESS.COM' in-case;
+ * color rides the theme link tokens instead of accent (= ink) */
 .analysis-table__link {
   display: inline-flex;
   align-items: center;
@@ -542,11 +553,11 @@
   font-family: var(--kol-font-family-mono);
   font-size: 0.7rem;
   letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--kol-accent-primary);
+  color: var(--kol-link);
 }
 
 .analysis-table__link:hover {
+  color: var(--kol-link-hover);
   text-decoration: underline;
 }
 

package/kol-components-molecules.css

@@ -147,6 +147,21 @@
   justify-content: space-between;
 }
 
+/* Dropdowns have NO hover and NO clicked state (2026-07-15 ruling) — the
+ * trigger borrows Button chrome for geometry/fill but its only states are
+ * rest and open. Scoped here so Button's own rules stay untouched. */
+.kol-dd-trigger.kol-btn-primary:not(.kol-btn-animate):hover,
+.kol-dd-trigger.kol-btn-primary:not(.kol-btn-animate):not(:disabled):active {
+  background: var(--kol-surface-secondary);
+  color: var(--kol-surface-on-primary);
+}
+.kol-dd-trigger.kol-btn-outline:not(.kol-btn-animate):hover,
+.kol-dd-trigger.kol-btn-outline:not(.kol-btn-animate):not(:disabled):active {
+  background: transparent;
+  border-color: var(--kol-oq-16);
+  color: var(--kol-surface-on-primary);
+}
+
 .kol-dd-trigger--open {
   border-radius: var(--kol-radius-sm) var(--kol-radius-sm) 0 0;
 }
@@ -165,6 +180,18 @@
   border-top: none;
 }
 
+/* grey — the opaque grey chrome (oq-12, fill law:
+ * interactive surfaces never translucent). Dropdown-only chrome; rest = hover
+ * = active per the no-states dropdown ruling (no kol-btn-* class emitted, so
+ * no button state rules ever apply). */
+.kol-dd-trigger--grey {
+  background-color: var(--kol-oq-12);
+  color: var(--kol-surface-on-primary);
+  border: 1px solid transparent;
+}
+
+.kol-dd-panel--grey { background-color: var(--kol-oq-12); }
+
 .kol-dd-div {
   height: 1px;
   background-color: var(--kol-border-default);

package/kol-components-organisms.css

@@ -43,7 +43,10 @@
 .kol-table-wrapper {
   overflow-x: auto;
   scrollbar-width: none;
-  border: 1px solid var(--kol-fg-08);
+  /* opaque border stop — translucent fg-08 stacked with the collapsed table's
+   * own borders composited into darker seams over gradients (2026-07-15 chess
+   * audit finding 4); oq-* mirrors the same visual weight without alpha */
+  border: 1px solid var(--kol-oq-08);
   border-radius: 4px;
   /* Scroll affordance: with the scrollbar hidden, a clipped table reads as
    * cut-off data on narrow viewports. Edge shadows appear only on the
@@ -72,23 +75,24 @@
 
 .kol-table-thead {
   background: var(--kol-fg-04);
-  border-bottom: 1px solid var(--kol-fg-08);
+  border-bottom: 1px solid var(--kol-oq-08);
 }
 
 .kol-table-row {
-  border-bottom: 1px solid var(--kol-fg-08);
+  border-bottom: 1px solid var(--kol-oq-08);
   vertical-align: top;
 }
 
 .kol-table-row:last-child { border-bottom: none; }
 
+/* no text-transform (casing law 2026-07-15): headers render as authored —
+ * consumers wanting caps author "DATE", not lowercase + CSS shouting */
 .kol-table-cell-title {
   padding: 12px 16px;
   font-family: var(--kol-font-family-mono);
   font-size: 0.75rem;
   font-weight: 400;
   line-height: 1.3;
-  text-transform: uppercase;
   color: var(--kol-surface-on-primary);
   white-space: nowrap;
 }
@@ -205,13 +209,13 @@
 }
 
 .kol-table a {
-  color: var(--kol-fg-88);
+  color: var(--kol-link);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
 }
 
-.kol-table a:hover { color: var(--kol-accent-primary); }
+.kol-table a:hover { color: var(--kol-link-hover); }
 
 @media (max-width: 768px) {
   .kol-table-cell-title,

package/package.json

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