@kolkrabbi/kol-theme 0.1.0

package/kol-theme.css

@@ -0,0 +1,110 @@
+/**
+ * Kolkrabbi Design System — Unified Theme entry point.
+ *
+ * Cascade order matters — later imports override earlier ones at equal
+ * specificity. Color/opacity primitives load first; typography consumes them;
+ * utilities provide generic helpers; components close the cascade with the
+ * highest-level chrome.
+ *
+ *   1. kol-color       — surface tokens, ramps, brand/accent/status, semantic aliases
+ *   2. kol-opacity     — fg-opacity scale (14 stops × {bg,text,border} × {standard,inverse}
+ *                        × {base,hover}) + 5 text-role tokens/classes
+ *   2b. kol-opaque     — oq solid-neutral scale: the opaque mirror of kol-opacity
+ *                        (color-mix onto surface, not transparent). Same 14 stops.
+ *   3. kol-typography  — @font-face, type scale tokens, .kol-prose
+ *   4. kol-utilities   — flex-center, absolute-center, text-balance,
+ *                        breakpoint-padding, sr-only, fullbleed
+ *   5. kol-components  — DS chrome: buttons, toggles, table, etc.
+ *
+ * Phase 5 rename map (from prior file names):
+ *   theme.css             → kol-theme.css       (this file)
+ *   kol-color-simple.css  → kol-color.css       (post-Phase-4a, hex-opacity family removed)
+ *   kol-typography-mono.css → kol-typography.css (post-Phase-4a, type tokens added)
+ *   components.css        → kol-components.css  (Table CSS absorbed from kol-client)
+ *   (NEW)                 → kol-opacity.css     (ported from kol-client Phase 4a)
+ *   (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";
+
+/* Theme-level design tokens */
+:root {
+  /* Spacing scale (4px base) */
+  --kol-spacing-1: 0.25rem;    /* 4px */
+  --kol-spacing-2: 0.5rem;     /* 8px */
+  --kol-spacing-3: 0.75rem;    /* 12px */
+  --kol-spacing-4: 1rem;       /* 16px */
+  --kol-spacing-5: 1.25rem;    /* 20px */
+  --kol-spacing-6: 1.5rem;     /* 24px */
+  --kol-spacing-8: 2rem;       /* 32px */
+  --kol-spacing-10: 2.5rem;    /* 40px */
+  --kol-spacing-12: 3rem;      /* 48px */
+  --kol-spacing-16: 4rem;      /* 64px */
+  --kol-spacing-20: 5rem;      /* 80px */
+  --kol-spacing-24: 6rem;      /* 96px */
+
+  /* Semantic spacing aliases */
+  --kol-spacing-section: var(--kol-spacing-20);
+  --kol-spacing-container: var(--kol-spacing-10);
+  --kol-spacing-gap-sm: var(--kol-spacing-2);
+  --kol-spacing-gap-md: var(--kol-spacing-4);
+  --kol-spacing-gap-lg: var(--kol-spacing-6);
+
+  /* Border radius (4px increments) */
+  --kol-radius-none: 0;
+  --kol-radius-sm: 4px;
+  --kol-radius-md: 8px;
+  --kol-radius-lg: 12px;
+  --kol-radius-xl: 16px;
+  --kol-radius-2xl: 20px;
+  --kol-radius-full: 9999px;
+
+  /* Shadows (subtle elevation) */
+  --kol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --kol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --kol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --kol-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+  --kol-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+
+  /* Transitions (consistent timing) */
+  --kol-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --kol-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --kol-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --kol-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Z-index scale */
+  --kol-z-base: 1;
+  --kol-z-dropdown: 10;
+  --kol-z-sticky: 20;
+  --kol-z-overlay: 50;
+  --kol-z-modal: 100;
+  --kol-z-toast: 200;
+  --kol-z-tooltip: 300;
+  --kol-z-nav: 1000;
+
+  /* Opacity values */
+  --kol-opacity-hover: 0.8;
+  --kol-opacity-disabled: 0.5;
+  --kol-opacity-subtle: 0.6;
+  --kol-opacity-loading: 0.7;
+}
+
+/* Dark mode shadow adjustments */
+[data-theme="dark"],
+.dark {
+  --kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
+  --kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
+  --kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
+  --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/kol-type-mono-classes.css

@@ -0,0 +1,115 @@
+/**
+ * kol-type-mono-classes.css — Mono typography CLASSES (class-only).
+ *
+ * Split out of kol-typography-mono.css so a consumer can adopt the mono type
+ * SCALE (.kol-mono-N / .kol-helper-N) WITHOUT inheriting the JetBrains Mono
+ * @font-face / :root token / @theme contract. Each consumer's own
+ * --kol-font-family-mono supplies the actual font — fonts are per-app:
+ * apps/brand = JetBrains Mono, apps/web = RightGroteskMono.
+ *
+ * Classes reference --kol-font-family-mono + literal px values only; nothing
+ * else from the canonical typography files.
+ *
+ * Architecture: docs/kol-migration/locked/typography-system.md
+ */
+
+/* =============================================================================
+ * BASE SCALE — multi-line mono body / values. Weight 400 (regular), with leading.
+ * ============================================================================= */
+
+.kol-mono-8 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 8px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
+.kol-mono-10 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
+.kol-mono-12 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+}
+
+.kol-mono-14 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+}
+
+.kol-mono-16 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.kol-mono-20 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 20px;
+  line-height: 26px;
+  font-weight: 400;
+}
+
+/* =============================================================================
+ * LABEL SCALE — single-line labels. Weight 500 (medium), no leading,
+ * letter-spaced. For label/value pairs at the same size where the label needs
+ * visual prominence (heavier weight) without size-jumping. Wider letter-spacing
+ * on the smallest two stops for sub-12px readability.
+ * ============================================================================= */
+
+.kol-helper-8 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 8px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.10em;
+}
+
+.kol-helper-10 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.10em;
+}
+
+.kol-helper-12 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+.kol-helper-14 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+.kol-helper-16 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+.kol-helper-20 {
+  font-family: var(--kol-font-family-mono);
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}

package/kol-typography-mono.css

@@ -0,0 +1,64 @@
+/**
+ * kol-typography-mono.css — Mono typography FONTS + TOKENS (JetBrains Mono).
+ *
+ * @font-face cuts + the --kol-font-family-mono token + the Tailwind font-mono
+ * contract. The .kol-mono-N / .kol-helper-N CLASS rules moved to
+ * kol-type-mono-classes.css (class-only, font-agnostic) so a consumer can adopt
+ * the scale with its own mono font — fonts are per-app (brand = JetBrains Mono,
+ * web = RightGroteskMono). The umbrella kol-theme.css imports both files.
+ *
+ * Italic note: only 500i is bundled (Medium Italic). 400i (Regular Italic)
+ * deferred until a consumer requires it.
+ *
+ * Architecture: docs/kol-migration/locked/typography-system.md
+ */
+
+/* =============================================================================
+ * FONT-FACE — JetBrains Mono (4 weights: 400, 500, 500i, 600)
+ * ============================================================================= */
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* =============================================================================
+ * FAMILY TOKEN + TAILWIND CONTRACT
+ *
+ * .kol-mono-N / .kol-helper-N class rules live in kol-type-mono-classes.css.
+ * ============================================================================= */
+
+:root {
+  --kol-font-family-mono: 'JetBrains Mono', monospace;
+}
+
+@theme {
+  --font-mono: 'JetBrains Mono', monospace;
+}