@kolkrabbi/kol-theme 0.1.1 → 0.2.0

package/kol-components-atoms.css

@@ -707,3 +707,33 @@ a:hover .icon-hover,
   transform: translate(0, 0) scale(1);
   opacity: 1;
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * 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.
+ * ───────────────────────────────────────────────────────────────────── */
+.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);
+  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;
+}
+
+.kol-copy-btn:hover {
+  color: var(--kol-surface-on-primary);
+  border-color: var(--kol-fg-48);
+}

package/kol-components-molecules.css

@@ -253,3 +253,53 @@
   padding: 0 12px;
   font-size: 14px;
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * SegmentedToggle — molecules/SegmentedToggle.jsx
+ *   Bordered strip of joined cells sharing one outer stroke, thin
+ *   dividers between cells, filled active cell.
+ *
+ *   Chrome lives HERE, not in Tailwind utilities: Tailwind never scans
+ *   package sources, so utility-class chrome inside a published
+ *   component silently vanishes for every consumer. Any component whose
+ *   look depends on flex/border/rounded utilities needs a kol-* class
+ *   in this package instead.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-seg {
+  display: flex;
+  height: 26px;
+  border: 1px solid var(--kol-fg-04);
+  border-radius: var(--kol-radius-sm);
+  overflow: hidden;
+}
+
+.kol-seg--sm { height: 16px; }
+
+.kol-seg-cell {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--kol-fg-meta);
+  transition: color var(--kol-transition-base),
+              background-color var(--kol-transition-base);
+}
+
+.kol-seg-cell + .kol-seg-cell { border-left: 1px solid var(--kol-fg-04); }
+
+.kol-seg-cell:hover { color: var(--kol-fg-emphasis); }
+
+.kol-seg-cell.is-active {
+  background: var(--kol-surface-secondary);
+  color: var(--kol-fg-emphasis);
+}
+
+.kol-seg-cell:focus-visible {
+  outline: 1px solid var(--kol-fg-emphasis);
+  outline-offset: -2px;
+}

package/package.json

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