@kolkrabbi/kol-theme 0.3.0 → 0.5.0

package/README.md

@@ -19,6 +19,8 @@ In a Vite + Tailwind v4 app, import the barrel after Tailwind:
 
 Cascade order is load-bearing — `kol-theme` must come after Tailwind so its component classes and tokens resolve correctly. Individual files are also reachable (`@kolkrabbi/kol-theme/kol-color.css`, etc.) if you need finer control.
 
+All KOL rule CSS lives in the `components` cascade layer, so your Tailwind utility classes always win over KOL chrome (`<Input className="hidden sm:block">` behaves as written). Your own unlayered CSS wins over everything KOL ships.
+
 ## Fonts
 
 The typography CSS references the brand fonts at absolute paths (`/fonts/Right-Grotesk/…`, `/fonts/jetbrains-mono/…`). **The package does not ship the font files** — your app must serve them from `/fonts/` (e.g. drop them in your `public/` dir). The showcase in this repo does exactly that. Without them, type falls back to system fonts.

package/kol-components-molecules.css

@@ -267,20 +267,23 @@
  * ───────────────────────────────────────────────────────────────────── */
 .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; }
+/* Sizes mirror .kol-btn-{sm,md,lg} exactly: cell padding per size (below) +
+ * mono type (12/14/16) applied on the cell in JSX. Height is padding-driven,
+ * so a strip matches a Button of the same size. md is the base. */
+.kol-seg--sm .kol-seg-cell { padding: 4px 12px; }
+.kol-seg--lg .kol-seg-cell { padding: 8px 20px; }
 
 .kol-seg-cell {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 6px 16px;  /* md — .kol-btn-md */
   background: transparent;
   border: none;
   cursor: pointer;

package/kol-components-organisms.css

@@ -45,6 +45,17 @@
   scrollbar-width: none;
   border: 1px solid var(--kol-fg-08);
   border-radius: 4px;
+  /* Scroll affordance: with the scrollbar hidden, a clipped table reads as
+   * cut-off data on narrow viewports. Edge shadows appear only on the
+   * scrollable side (surface-colored covers ride the content and mask them
+   * at the extremes). */
+  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%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
 }
 
 .kol-table-wrapper::-webkit-scrollbar { display: none; }

package/kol-theme.css

@@ -25,19 +25,25 @@
  *   (NEW)                 → kol-utilities.css   (curated slice of _new-css/utilities.css)
  */
 
-@import "./kol-base-tokens.css";
-@import "./kol-color.css";
-@import "./kol-opacity.css";
-@import "./kol-opaque.css";
-@import "./kol-typography.css";
-@import "./kol-typography-mono.css";
-@import "./kol-type-mono-classes.css";
-@import "./kol-utilities.css";
-@import "./kol-components-atoms.css";
-@import "./kol-components-molecules.css";
-@import "./kol-components-organisms.css";
+/* Everything KOL ships lives in the `components` cascade layer. Tailwind v4
+ * declares `@layer theme, base, components, utilities` — layering here means
+ * consumer utility classes (a later layer) can always override KOL chrome,
+ * while KOL still beats preflight (`base`). Unlayered consumer CSS wins over
+ * all of it, as it should. */
+@import "./kol-base-tokens.css" layer(components);
+@import "./kol-color.css" layer(components);
+@import "./kol-opacity.css" layer(components);
+@import "./kol-opaque.css" layer(components);
+@import "./kol-typography.css" layer(components);
+@import "./kol-typography-mono.css" layer(components);
+@import "./kol-type-mono-classes.css" layer(components);
+@import "./kol-utilities.css" layer(components);
+@import "./kol-components-atoms.css" layer(components);
+@import "./kol-components-molecules.css" layer(components);
+@import "./kol-components-organisms.css" layer(components);
 
 /* Theme-level design tokens */
+@layer components {
 :root {
   /* Spacing scale (4px base) */
   --kol-spacing-1: 0.25rem;    /* 4px */
@@ -108,3 +114,4 @@
   --kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
   --kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
 }
+}

package/package.json

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