@kolkrabbi/kol-theme 0.11.10 → 0.11.12

package/kol-color.css

@@ -306,3 +306,32 @@
   --color-ui-info:              var(--ui-info);
   --color-ui-success:           var(--ui-success);
 }
+
+/* ── Syntax token palette (CodeBlock highlighting, 2026-07-28) ─────────────
+ * Light-mode base; dark values in BOTH dark blocks below (MIRROR law —
+ * edit all three together). Classes live in kol-type-roles.css. */
+:root {
+  --kol-tok-comment:     var(--kol-fg-48);
+  --kol-tok-punctuation: var(--kol-fg-64);
+  --kol-tok-keyword:     #7638c9;
+  --kol-tok-function:    #1e66d0;
+  --kol-tok-string:      #a35200;
+  --kol-tok-number:      #a35200;
+  --kol-tok-property:    #b0303c;
+}
+[data-theme="dark"] {
+  --kol-tok-keyword:     #ba8cf5;
+  --kol-tok-function:    #6ea8fe;
+  --kol-tok-string:      #f0a35e;
+  --kol-tok-number:      #f0a35e;
+  --kol-tok-property:    #ef7c8a;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --kol-tok-keyword:     #ba8cf5;
+    --kol-tok-function:    #6ea8fe;
+    --kol-tok-string:      #f0a35e;
+    --kol-tok-number:      #f0a35e;
+    --kol-tok-property:    #ef7c8a;
+  }
+}

package/kol-components-organisms.css

@@ -55,8 +55,8 @@
   background:
     linear-gradient(to right, var(--kol-surface-primary) 40%, transparent) left / 32px 100%,
     linear-gradient(to left, var(--kol-surface-primary) 40%, transparent) right / 32px 100%,
-    linear-gradient(to right, var(--kol-fg-16), transparent) left / 14px 100%,
-    linear-gradient(to left, var(--kol-fg-16), transparent) right / 14px 100%;
+    linear-gradient(to right, var(--kol-fg-08), transparent) left / 10px 100%,
+    linear-gradient(to left, var(--kol-fg-08), transparent) right / 10px 100%;
   background-repeat: no-repeat;
   background-attachment: local, local, scroll, scroll;
 }

package/kol-type-roles.css

@@ -78,12 +78,12 @@
 .kol-prose pre,
 .kol-doc-code {
   font-family: var(--kol-font-family-mono);
-  font-size: 14px;
+  font-size: 13px;             /* the elder code voice (13/1.55), user-ruled */
   font-weight: 400;
-  line-height: 22px;
+  line-height: 1.55;
   padding: 16px 20px;
   background: var(--kol-fg-04);
-  border-radius: 6px;
+  border-radius: var(--kol-radius-sm);
   overflow-x: auto;
 }
 .kol-doc-code { margin: 0; }
@@ -97,7 +97,7 @@
   font-weight: 400;
   background: var(--kol-fg-04);
   padding: 0.1em 0.35em;
-  border-radius: 3px;
+  border-radius: var(--kol-radius-sm);
 }
 /* code inside pre stays stripped (rule preserved from the prose sheet) */
 .kol-prose pre code,
@@ -150,13 +150,14 @@
   line-height: 16px;
   white-space: nowrap;
 }
+.kol-doc-table td.kol-doc-table-value--wrap { white-space: normal; }
 
 /* figure — the framed content container (preview cards, embedded media). */
 .kol-prose figure,
 .kol-doc-figure {
   margin: 0;
   border: 1px solid var(--kol-fg-12);
-  border-radius: var(--kol-radius-md);
+  border-radius: var(--kol-radius-sm);   /* 4px — THE radius law */
   overflow: hidden;
 }
 
@@ -246,3 +247,15 @@
   text-transform: uppercase;
   color: var(--kol-fg-48);
 }
+
+/* =============================================================================
+ * SYNTAX TOKENS — refractor/Prism token classes emitted by CodeBlock as
+ * .kol-tok-<type>. Colors are the --kol-tok-* vars (kol-color.css, themed).
+ * ============================================================================= */
+.kol-tok-comment, .kol-tok-prolog, .kol-tok-doctype, .kol-tok-cdata { color: var(--kol-tok-comment); font-style: italic; }
+.kol-tok-punctuation, .kol-tok-operator { color: var(--kol-tok-punctuation); }
+.kol-tok-keyword, .kol-tok-atrule, .kol-tok-rule, .kol-tok-important { color: var(--kol-tok-keyword); }
+.kol-tok-function, .kol-tok-class-name, .kol-tok-selector, .kol-tok-tag { color: var(--kol-tok-function); }
+.kol-tok-string, .kol-tok-char, .kol-tok-attr-value, .kol-tok-url { color: var(--kol-tok-string); }
+.kol-tok-number, .kol-tok-boolean, .kol-tok-constant, .kol-tok-symbol, .kol-tok-unit { color: var(--kol-tok-number); }
+.kol-tok-property, .kol-tok-attr-name, .kol-tok-variable, .kol-tok-parameter { color: var(--kol-tok-property); }

package/package.json

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