@kolkrabbi/kol-theme 0.11.12 → 0.11.14

package/kol-color.css

@@ -306,32 +306,3 @@
   --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-molecules.css

@@ -447,3 +447,62 @@
   );
   box-shadow: 0 0 0 1px var(--kol-fg-32);
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * CodeBlock — molecules/CodeBlock.jsx (chrome REPLICATED from the elder
+ * reference build, 2026-07-28; moved here from kol-framework.css — theme
+ * is chrome's home). Text metrics/colors come from the component's oneDark
+ * overrides (14px/1.6); this is frame + chip + copy button only.
+ * ──────────────────────────────────────────────────────────────────── */
+.kol-codeblock-wrapper {
+  margin-block: 1.5rem;
+}
+
+.kol-codeblock {
+  /* verbatim from the reference build's rule (user DevTools, 2026-07-28) */
+  background: var(--kol-surface-tertiary);
+  border: 1px solid var(--kol-border-default);
+  font-family: var(--kol-font-family-mono);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  border-radius: 4px;
+  padding: 1rem;
+  font-size: 14px;
+  line-height: 1.6;
+  position: relative;
+  overflow-x: auto;
+}
+
+/* the ONE chip — filename if present, else the language. In-flow above the code. */
+.kol-codeblock-filename {
+  font-family: var(--kol-font-family-mono, monospace);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--kol-fg-40);
+  margin-bottom: 8px;
+}
+
+/* 32×32 icon button, tinted square, copy → check */
+.kol-codeblock-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--kol-fg-08);
+  border: none;
+  border-radius: var(--kol-radius-sm);
+  color: var(--kol-fg-64);
+  cursor: pointer;
+  transition: color 150ms ease, background 150ms ease;
+}
+
+.kol-codeblock-copy:hover {
+  color: var(--kol-surface-on-primary);
+  background: var(--kol-fg-16);
+}

package/kol-type-roles.css

@@ -78,9 +78,9 @@
 .kol-prose pre,
 .kol-doc-code {
   font-family: var(--kol-font-family-mono);
-  font-size: 13px;             /* the elder code voice (13/1.55), user-ruled */
+  font-size: 14px;             /* matches CodeBlock's reference voice (14/1.6) */
   font-weight: 400;
-  line-height: 1.55;
+  line-height: 1.6;
   padding: 16px 20px;
   background: var(--kol-fg-04);
   border-radius: var(--kol-radius-sm);
@@ -247,15 +247,3 @@
   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.12",
+  "version": "0.11.14",
   "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",