@coderabbitai/carrot-ui 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coderabbitai/carrot-ui",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "CodeRabbit design system. React components built on Base UI, styled with Tailwind CSS v4.",
   "keywords": [
     "coderabbit",
@@ -40,10 +40,12 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
+    "@fontsource-variable/geist": "^5.2.8",
     "@heroicons/react": "^2.2.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "hack-font": "^3.3.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0"
   },

package/src/scales.css

@@ -163,6 +163,76 @@
 	--color-cui-amber-12: #ffe7b3;
 }
 
+/* ── Secondary ──
+ * Mint / aquamarine scale anchored at step 9 = #25E2A8.
+ * OKLCH-based for smooth perceptual interpolation.
+ * Hue 163, anchor lightness 0.815, chroma 0.155.
+ */
+:root {
+	--color-cui-secondary-1: oklch(0.992 0.005 163);
+	--color-cui-secondary-2: oklch(0.975 0.015 163);
+	--color-cui-secondary-3: oklch(0.95 0.035 163);
+	--color-cui-secondary-4: oklch(0.92 0.055 163);
+	--color-cui-secondary-5: oklch(0.89 0.075 163);
+	--color-cui-secondary-6: oklch(0.87 0.095 163);
+	--color-cui-secondary-7: oklch(0.85 0.115 163);
+	--color-cui-secondary-8: oklch(0.84 0.135 163);
+	--color-cui-secondary-9: oklch(0.815 0.155 163); /* #25E2A8 */
+	--color-cui-secondary-10: oklch(0.78 0.155 163);
+	--color-cui-secondary-11: oklch(0.55 0.13 163);
+	--color-cui-secondary-12: oklch(0.28 0.06 163);
+}
+
+[data-theme="dark"] {
+	--color-cui-secondary-1: oklch(0.17 0.015 163);
+	--color-cui-secondary-2: oklch(0.2 0.025 163);
+	--color-cui-secondary-3: oklch(0.24 0.045 163);
+	--color-cui-secondary-4: oklch(0.28 0.06 163);
+	--color-cui-secondary-5: oklch(0.32 0.075 163);
+	--color-cui-secondary-6: oklch(0.38 0.09 163);
+	--color-cui-secondary-7: oklch(0.46 0.105 163);
+	--color-cui-secondary-8: oklch(0.58 0.125 163);
+	--color-cui-secondary-9: oklch(0.815 0.155 163); /* #25E2A8 */
+	--color-cui-secondary-10: oklch(0.85 0.145 163);
+	--color-cui-secondary-11: oklch(0.9 0.13 163);
+	--color-cui-secondary-12: oklch(0.95 0.04 163);
+}
+
+/* ── Tertiary ──
+ * Periwinkle / indigo scale anchored at step 9 = #838BFF.
+ * OKLCH-based for smooth perceptual interpolation.
+ * Hue 272, anchor lightness 0.638, chroma 0.177.
+ */
+:root {
+	--color-cui-tertiary-1: oklch(0.992 0.005 272);
+	--color-cui-tertiary-2: oklch(0.978 0.015 272);
+	--color-cui-tertiary-3: oklch(0.955 0.035 272);
+	--color-cui-tertiary-4: oklch(0.93 0.055 272);
+	--color-cui-tertiary-5: oklch(0.9 0.085 272);
+	--color-cui-tertiary-6: oklch(0.86 0.115 272);
+	--color-cui-tertiary-7: oklch(0.81 0.145 272);
+	--color-cui-tertiary-8: oklch(0.74 0.17 272);
+	--color-cui-tertiary-9: oklch(0.638 0.177 272); /* #838BFF */
+	--color-cui-tertiary-10: oklch(0.6 0.18 272);
+	--color-cui-tertiary-11: oklch(0.5 0.18 272);
+	--color-cui-tertiary-12: oklch(0.26 0.08 272);
+}
+
+[data-theme="dark"] {
+	--color-cui-tertiary-1: oklch(0.17 0.015 272);
+	--color-cui-tertiary-2: oklch(0.2 0.025 272);
+	--color-cui-tertiary-3: oklch(0.24 0.05 272);
+	--color-cui-tertiary-4: oklch(0.28 0.075 272);
+	--color-cui-tertiary-5: oklch(0.32 0.09 272);
+	--color-cui-tertiary-6: oklch(0.37 0.11 272);
+	--color-cui-tertiary-7: oklch(0.44 0.135 272);
+	--color-cui-tertiary-8: oklch(0.53 0.16 272);
+	--color-cui-tertiary-9: oklch(0.638 0.177 272); /* #838BFF */
+	--color-cui-tertiary-10: oklch(0.685 0.175 272);
+	--color-cui-tertiary-11: oklch(0.78 0.155 272);
+	--color-cui-tertiary-12: oklch(0.93 0.045 272);
+}
+
 /* ── Green ──
  * Based on Radix Colors green scale.
  * Used for success and positive states.

package/src/styles.css

@@ -1,3 +1,5 @@
+@import "@fontsource-variable/geist";
+@import "hack-font/build/web/hack-subset.css";
 @import "./theme.css";
 @import "./scales.css";
 

package/src/theme.css

@@ -32,6 +32,48 @@
 }
 
 @theme {
+	/*
+	 * ═══════════════════════════════════════
+	 * TYPOGRAPHY — Geist (sans) + Hack (mono)
+	 *
+	 * Font families resolve through Tailwind's
+	 * font-cui-sans / font-cui-mono utilities.
+	 *
+	 * Size scale starts at 11px micro and 14px
+	 * body, then ramps in roughly 1.2-step
+	 * increments. Each size pairs with a fixed
+	 * line-height via the --text-{name}--line-height
+	 * convention Tailwind v4 reads automatically.
+	 *
+	 * All tokens are prefixed with `cui-` to avoid
+	 * colliding with Tailwind's built-in font-sans,
+	 * font-mono, text-sm, text-base, etc. when
+	 * imported alongside other design systems.
+	 * ═══════════════════════════════════════
+	 */
+	--font-cui-sans:
+		"Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-cui-mono:
+		"Hack", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+		"Liberation Mono", "Courier New", monospace;
+
+	/* Size scale — 11 (xs) / 12 / 14 (base / body) / 16 / 18 / 20 / 24 (max) */
+	--text-cui-xs: 0.6875rem; /* 11px */
+	--text-cui-xs--line-height: 1rem; /* 16px */
+	--text-cui-sm: 0.75rem; /* 12px */
+	--text-cui-sm--line-height: 1rem; /* 16px */
+	--text-cui-base: 0.875rem; /* 14px — body default */
+	--text-cui-base--line-height: 1.25rem; /* 20px */
+	--text-cui-lg: 1rem; /* 16px */
+	--text-cui-lg--line-height: 1.5rem; /* 24px */
+	--text-cui-xl: 1.125rem; /* 18px */
+	--text-cui-xl--line-height: 1.75rem; /* 28px */
+	--text-cui-2xl: 1.25rem; /* 20px */
+	--text-cui-2xl--line-height: 1.75rem; /* 28px */
+	--text-cui-3xl: 1.5rem; /* 24px */
+	--text-cui-3xl--line-height: 2rem; /* 32px */
+
 	/*
 	 * ═══════════════════════════════════════
 	 * BACKGROUNDS — 3 spatial layers
@@ -64,6 +106,15 @@
 	--text-color-cui-secondary: var(--color-cui-taupe-11);
 	--text-color-cui-tertiary: var(--color-cui-taupe-9);
 
+	/*
+	 * ═══════════════════════════════════════
+	 * FILL — matching bg tokens for use with
+	 * SVG fill/stroke and divider backgrounds
+	 * ═══════════════════════════════════════
+	 */
+	--background-color-cui-neutral: var(--color-cui-taupe-5);
+	--background-color-cui-tertiary: var(--color-cui-taupe-9);
+
 	/*
 	 * ═══════════════════════════════════════
 	 * BORDERS — 2 levels
@@ -116,16 +167,16 @@
 
 	/*
 	 * ═══════════════════════════════════════
-	 * SUCCESS — Radix green scale
+	 * SUCCESS — secondary (mint) scale
 	 * ═══════════════════════════════════════
 	 */
-	--background-color-cui-success: var(--color-cui-green-9);
-	--background-color-cui-success-subtle: var(--color-cui-green-3);
-	--background-color-cui-success-strong: var(--color-cui-green-10);
+	--background-color-cui-success: var(--color-cui-secondary-9);
+	--background-color-cui-success-subtle: var(--color-cui-secondary-3);
+	--background-color-cui-success-strong: var(--color-cui-secondary-10);
 	--background-color-cui-success-on: oklch(0.99 0 0);
-	--text-color-cui-success: var(--color-cui-green-11);
+	--text-color-cui-success: var(--color-cui-secondary-11);
 	--text-color-cui-success-on: oklch(0.99 0 0);
-	--border-color-cui-success: var(--color-cui-green-8);
+	--border-color-cui-success: var(--color-cui-secondary-8);
 
 	/*
 	 * ═══════════════════════════════════════
@@ -226,8 +277,8 @@
 	--background-color-cui-inverse: oklch(0.9 0.005 55);
 
 	/* Success */
-	--background-color-cui-success: var(--color-cui-green-9);
-	--background-color-cui-success-strong: var(--color-cui-green-10);
+	--background-color-cui-success: var(--color-cui-secondary-9);
+	--background-color-cui-success-strong: var(--color-cui-secondary-10);
 }
 
 /*