@kolkrabbi/kol-theme 0.31.2 → 0.32.0

package/kol-components-atoms.css

@@ -777,32 +777,28 @@ a:hover .icon-hover,
 
 /* ─────────────────────────────────────────────────────────────────────
  * CopyButton — atoms/CopyButton.jsx
- *   Copy-to-clipboard chip: clipboard icon + Copy/Copied label.
- *   Look extracted from CodeBlock's inline copy button; CodeBlock's
- *   .kol-codeblock-copy (kol-framework) now only positions it.
+ *   THE copy-to-clipboard control (2026-08-09 user ruling): the 32×32
+ *   icon button CodeBlock carried privately since the 2026-07-28 elder
+ *   replication — 16px icon + 0.5rem padding. The old Copy/Copied label
+ *   chip (one-off SVGs, auto-uppercase) is retired; CodeBlock composes
+ *   this atom and .kol-codeblock-copy only positions it in-frame.
  * ───────────────────────────────────────────────────────────────────── */
 .kol-copy-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  background: color-mix(in srgb, var(--kol-surface-primary) 80%, transparent);
-  border: 1px solid var(--kol-fg-16);
-  border-radius: 3px;
-  color: var(--kol-fg-64);
+  justify-content: center;
+  padding: 0.5rem;
+  background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
+  border: none;
+  border-radius: var(--kol-radius-sm);
+  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
   cursor: pointer;
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  line-height: 1;
-  text-transform: uppercase;
-  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+  transition: background-color var(--kol-transition-base), color var(--kol-transition-base);
 }
 
 .kol-copy-btn:hover {
+  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
   color: var(--kol-surface-on-primary);
-  border-color: var(--kol-fg-48);
 }
 
 /* ─────────────────────────────────────────────────────────────────────

package/kol-components-molecules.css

@@ -257,6 +257,32 @@
   border-color: currentColor;
 }
 
+/* StatusChip tones — the record-surface status control (reference: Framer
+ * CMS, 2026-08-09). Tint + ink ride the --ui-* ladder; the chip stays a Tag
+ * underneath, so these only override color/fill. .kol-tag doubled for source-
+ * order safety against the tag variants above. */
+.kol-tag.kol-status-chip { gap: var(--kol-spacing-1); }
+.kol-tag.kol-status-chip--success {
+  color: var(--ui-success);
+  background-color: color-mix(in srgb, var(--ui-success) 12%, transparent);
+  border-color: transparent;
+}
+.kol-tag.kol-status-chip--warning {
+  color: var(--ui-warning);
+  background-color: color-mix(in srgb, var(--ui-warning) 12%, transparent);
+  border-color: transparent;
+}
+.kol-tag.kol-status-chip--error {
+  color: var(--ui-error);
+  background-color: color-mix(in srgb, var(--ui-error) 12%, transparent);
+  border-color: transparent;
+}
+.kol-tag.kol-status-chip--info {
+  color: var(--ui-info);
+  background-color: color-mix(in srgb, var(--ui-info) 12%, transparent);
+  border-color: transparent;
+}
+
 /* inverse — the flipped chip. Mirrors .pill-inverse. */
 .kol-tag--inverse {
   background-color: var(--kol-surface-on-primary);
@@ -561,27 +587,13 @@
   margin-block-end: 0.75rem;
 }
 
-/* icon copy button — VERBATIM from the live reference build: 16px icon +
- * 0.5rem padding = the 32×32 box, offset 0.75rem into the 1rem pad. */
+/* in-frame position only — the button IS the CopyButton atom (.kol-copy-btn
+ * carries the 32×32 look, promoted there 2026-08-09); offset 0.75rem into
+ * the 1rem pad. */
 .kol-codeblock-copy {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
-  border: none;
-  border-radius: 4px;
-  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.kol-codeblock-copy:hover {
-  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
-  color: var(--kol-surface-on-primary);
 }
 
 /* ─────────────────────────────────────────────────────────────────────

package/package.json

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