@kolkrabbi/kol-theme 0.13.2 → 0.13.4

package/kol-components-atoms.css

@@ -867,3 +867,75 @@ a:hover .icon-hover,
   border-top: 1px solid var(--kol-fg-08);
   border-bottom: 1px solid var(--kol-fg-08);
 }
+
+/* ───── IconFrame — a static square frame holding one icon ─────
+ * Promoted 2026-07-30 from kol-website's SectionTitle, where the pattern was an
+ * anonymous <span> wearing `kol-btn kol-btn-secondary kol-btn-md kol-btn-icon`.
+ *
+ * These classes exist INSTEAD of reusing kol-btn-*, and that is the whole point
+ * of the component. On a <span>, the button's hover/active/focus/disabled rules
+ * are suppressed by the ELEMENT — "no states" was an accident of the tag, one
+ * element change away from leaking back. Here there are simply no state rules
+ * to inherit: no :hover, no :active, no :focus-visible, no :disabled, no
+ * transition, no cursor.
+ *
+ * Background/foreground/geometry are byte-identical to the kol-btn equivalents
+ * (declarations mirrored from .kol-btn-{variant} above and the pinned squares
+ * at .kol-btn-icon.kol-btn-{size}), so surfaces that migrate don't shift a
+ * pixel. `primary` and `secondary` are inverse pairs — they flip with the theme
+ * from the tokens alone, no per-theme props. */
+.kol-icon-frame {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  border-radius: var(--kol-radius-sm);
+  padding: 0;
+}
+
+/* pinned squares — the box never moves with glyph size (user law 2026-07-28) */
+.kol-icon-frame-sm { width: 28px; height: 28px; }
+.kol-icon-frame-md { width: 32px; height: 32px; }
+.kol-icon-frame-lg { width: 36px; height: 36px; }
+
+.kol-icon-frame-primary {
+  background: var(--kol-surface-secondary);
+  color: var(--kol-surface-on-primary);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-secondary {
+  background: var(--kol-surface-on-primary);
+  color: var(--kol-surface-primary);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-accent {
+  background: var(--kol-accent-primary);
+  color: var(--kol-accent-on-primary);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-outline {
+  background: transparent;
+  color: var(--kol-surface-on-primary);
+  border: 1px solid var(--kol-oq-16);
+}
+.kol-icon-frame-ghost {
+  background: transparent;
+  color: var(--kol-oq-48);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-nav {
+  background: transparent;
+  color: var(--kol-oq-64);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-grey {
+  background: var(--kol-oq-12);
+  color: var(--kol-surface-on-primary);
+  border: 1px solid transparent;
+}
+.kol-icon-frame-danger {
+  background: var(--ui-error);
+  color: var(--kol-color-absolute-white);
+  border: 1px solid transparent;
+}

package/kol-components-molecules.css

@@ -243,6 +243,91 @@
 .tag-md { font-size: 12px; font-weight: 470; padding: 5px 12px; }
 .tag-lg { font-size: 14px; font-weight: 470; padding: 6px 14px; }
 
+/* ─────────────────────────────────────────────────────────────────────
+ * Tag color family — molecules/Tag.jsx `color` prop (wave-4 vault parity,
+ * 2026-07-30). Tag emits `tag tag--{color}` (chip) / `tag-naked
+ * tag--{color}` (text-only); the classes shipped in the JSX but the RULES
+ * never migrated out of the monorepo workshop — the same dangling trap as
+ * the palette tokens themselves (kol-color.css, 2026-07-16) — so every
+ * colored tag rendered dead. Re-authored from the monorepo colors spec
+ * (02-design-system/01-colors.md § Tag Color Classes): light mode =
+ * palette-*-light fill + dark ink; dark mode = saturated palette-* fill +
+ * light ink (yellow keeps dark ink); `dark` = the on-primary/surface flip.
+ * Inks are LITERALS (the surface poles): on a fixed palette fill a
+ * theme-flipping token is wrong by definition.
+ * ───────────────────────────────────────────────────────────────────── */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: var(--kol-radius-full);
+  font-family: var(--kol-font-family-mono);
+  border: 1px solid transparent;
+  transition: background-color var(--kol-transition-base),
+              color var(--kol-transition-base);
+}
+
+/* naked — text-only: no fill, no chip padding (the reader-sidebar voice).
+ * Sits AFTER .tag-{size} so its padding reset wins at equal specificity. */
+.tag-naked {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  font-family: var(--kol-font-family-mono);
+}
+
+/* Light mode (default): light fill + dark ink */
+.tag--blue   { background-color: var(--kol-palette-blue-light);   color: #121215; }
+.tag--teal   { background-color: var(--kol-palette-teal-light);   color: #121215; }
+.tag--green  { background-color: var(--kol-palette-green-light);  color: #121215; }
+.tag--yellow { background-color: var(--kol-palette-yellow-light); color: #121215; }
+.tag--red    { background-color: var(--kol-palette-red-light);    color: #121215; }
+.tag--orange { background-color: var(--kol-palette-orange-light); color: #121215; }
+.tag--purple { background-color: var(--kol-palette-purple-light); color: #121215; }
+.tag--dark   { background-color: var(--kol-surface-on-primary);   color: var(--kol-surface-primary); }
+
+/* naked + color = saturated text, both modes (no fill to carry the pair) */
+.tag-naked.tag--blue   { background: transparent; color: var(--kol-palette-blue); }
+.tag-naked.tag--teal   { background: transparent; color: var(--kol-palette-teal); }
+.tag-naked.tag--green  { background: transparent; color: var(--kol-palette-green); }
+.tag-naked.tag--yellow { background: transparent; color: var(--kol-palette-yellow); }
+.tag-naked.tag--red    { background: transparent; color: var(--kol-palette-red); }
+.tag-naked.tag--orange { background: transparent; color: var(--kol-palette-orange); }
+.tag-naked.tag--purple { background: transparent; color: var(--kol-palette-purple); }
+.tag-naked.tag--dark   { background: transparent; color: var(--kol-surface-on-primary); }
+
+/* active (Tag.jsx emits .tag--active when active + colored) */
+.tag--active { border-color: currentColor; }
+
+/* Dark mode: saturated fill + light ink (yellow keeps dark ink). Scoped to
+ * .tag.tag--{color} so the chip flips while .tag-naked (equal specificity,
+ * earlier in the sheet) keeps its saturated TEXT — a bare .tag--{color}
+ * override here would out-order the naked rules and give text tags a fill.
+ * MIRROR of the system-follow block below — edit both. */
+:is([data-theme="dark"], .dark) .tag.tag--blue   { background-color: var(--kol-palette-blue);   color: #fafafa; }
+:is([data-theme="dark"], .dark) .tag.tag--teal   { background-color: var(--kol-palette-teal);   color: #fafafa; }
+:is([data-theme="dark"], .dark) .tag.tag--green  { background-color: var(--kol-palette-green);  color: #fafafa; }
+:is([data-theme="dark"], .dark) .tag.tag--yellow { background-color: var(--kol-palette-yellow); color: #121215; }
+:is([data-theme="dark"], .dark) .tag.tag--red    { background-color: var(--kol-palette-red);    color: #fafafa; }
+:is([data-theme="dark"], .dark) .tag.tag--orange { background-color: var(--kol-palette-orange); color: #fafafa; }
+:is([data-theme="dark"], .dark) .tag.tag--purple { background-color: var(--kol-palette-purple); color: #fafafa; }
+
+/* System-follow dark — only when no explicit theme is stamped (explicit >
+ * system > light, USER law). MIRROR of the block above — edit both. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .tag.tag--blue   { background-color: var(--kol-palette-blue);   color: #fafafa; }
+  :root:not([data-theme]) .tag.tag--teal   { background-color: var(--kol-palette-teal);   color: #fafafa; }
+  :root:not([data-theme]) .tag.tag--green  { background-color: var(--kol-palette-green);  color: #fafafa; }
+  :root:not([data-theme]) .tag.tag--yellow { background-color: var(--kol-palette-yellow); color: #121215; }
+  :root:not([data-theme]) .tag.tag--red    { background-color: var(--kol-palette-red);    color: #fafafa; }
+  :root:not([data-theme]) .tag.tag--orange { background-color: var(--kol-palette-orange); color: #fafafa; }
+  :root:not([data-theme]) .tag.tag--purple { background-color: var(--kol-palette-purple); color: #fafafa; }
+}
+
 .control-unified-inverse {
   display: inline-flex;
   align-items: center;

package/kol-components-workshop.css

@@ -264,11 +264,12 @@
 /* =============================================================================
  * DOCS CONTENT CLASSES
  * =============================================================================
- * Content-rendering styles for documentation pages. The rendered markdown body
- * is wrapped in `.kol-prose` (headings / p / code / lists / blockquote / links),
- * so the per-element `.docs-article *` type rules that used to live here are
- * gone. Only structural doc chrome (cards, frontmatter layout, callout rule,
- * media, tag graph) remains.
+ * Content-rendering styles for documentation pages. The reader types every
+ * element explicitly through the kol-doc-* roles (workshop 0.3.4 retype —
+ * prose is the blog/CMS voice, never docs surfaces), so the per-element
+ * `.docs-article *` type rules that used to live here are gone. Only
+ * structural doc chrome (cards, frontmatter layout, callout rule, media,
+ * tag graph) remains.
  */
 
 /* Documentation Card (used in inventory listing) */

package/package.json

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