@coderabbitai/carrot-ui 0.1.20 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +21 -1
  2. package/dist/index.d.ts +495 -96
  3. package/dist/index.js +1910 -1301
  4. package/package.json +4 -1
  5. package/src/scales.css +99 -28
  6. package/src/styles.css +2 -0
  7. package/src/theme.css +64 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coderabbitai/carrot-ui",
3
- "version": "0.1.20",
3
+ "version": "0.1.22",
4
4
  "description": "CodeRabbit design system. React components built on Base UI, styled with Tailwind CSS v4.",
5
5
  "keywords": [
6
6
  "coderabbit",
@@ -40,10 +40,13 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@base-ui/react": "^1.3.0",
43
+ "@fontsource-variable/geist": "^5.2.8",
43
44
  "@heroicons/react": "^2.2.0",
44
45
  "@tanstack/react-table": "^8.21.3",
45
46
  "clsx": "^2.1.1",
46
47
  "cmdk": "^1.1.1",
48
+ "hack-font": "^3.3.0",
49
+ "motion": "^12.38.0",
47
50
  "shiki": "^4.0.2",
48
51
  "tailwind-merge": "^3.5.0"
49
52
  },
package/src/scales.css CHANGED
@@ -13,7 +13,7 @@
13
13
  * 11: Low-contrast text
14
14
  * 12: High-contrast text
15
15
  *
16
- * The taupe scale is custom OKLCH and inverts between modes.
16
+ * The mauve scale is custom OKLCH and inverts between modes.
17
17
  * Red, amber, and green are based on Radix Colors.
18
18
  * CR Orange is the CodeRabbit brand palette.
19
19
  *
@@ -21,44 +21,45 @@
21
21
  * when imported alongside other design systems.
22
22
  *
23
23
  * Scales use --color-cui-* namespace so Tailwind v4
24
- * auto-generates utilities (bg-cui-taupe-6, text-cui-red-12,
24
+ * auto-generates utilities (bg-cui-mauve-6, text-cui-red-12,
25
25
  * etc.). Prefer semantic tokens (bg-cui-base-1, text-cui-primary)
26
26
  * in components.
27
27
  * ═══════════════════════════════════════════════════════════════
28
28
  */
29
29
 
30
- /* ── Taupe ──
31
- * Custom neutral in OKLCH (hue 55, chroma 0.005).
30
+ /* ── Mauve ──
31
+ * Purplish-gray neutral in OKLCH (hue 305, chroma 0.015).
32
+ * Matches mono's --cr-color-grey-* palette.
32
33
  * Inverts between modes. Steps cluster tighter near backgrounds.
33
34
  */
34
35
  :root {
35
- --color-cui-taupe-1: oklch(0.994 0.005 55);
36
- --color-cui-taupe-2: oklch(0.982 0.005 55);
37
- --color-cui-taupe-3: oklch(0.956 0.005 55);
38
- --color-cui-taupe-4: oklch(0.931 0.005 55);
39
- --color-cui-taupe-5: oklch(0.91 0.005 55);
40
- --color-cui-taupe-6: oklch(0.885 0.005 55);
41
- --color-cui-taupe-7: oklch(0.851 0.005 55);
42
- --color-cui-taupe-8: oklch(0.791 0.005 55);
43
- --color-cui-taupe-9: oklch(0.641 0.005 55);
44
- --color-cui-taupe-10: oklch(0.605 0.005 55);
45
- --color-cui-taupe-11: oklch(0.498 0.005 55);
46
- --color-cui-taupe-12: oklch(0.243 0.005 55);
36
+ --color-cui-mauve-1: oklch(0.994 0.003 305);
37
+ --color-cui-mauve-2: oklch(0.982 0.005 305);
38
+ --color-cui-mauve-3: oklch(0.956 0.008 305);
39
+ --color-cui-mauve-4: oklch(0.931 0.012 305);
40
+ --color-cui-mauve-5: oklch(0.91 0.014 305);
41
+ --color-cui-mauve-6: oklch(0.885 0.016 305);
42
+ --color-cui-mauve-7: oklch(0.851 0.018 305);
43
+ --color-cui-mauve-8: oklch(0.791 0.02 305);
44
+ --color-cui-mauve-9: oklch(0.641 0.022 305);
45
+ --color-cui-mauve-10: oklch(0.605 0.023 305);
46
+ --color-cui-mauve-11: oklch(0.498 0.022 305);
47
+ --color-cui-mauve-12: oklch(0.243 0.014 305);
47
48
  }
48
49
 
49
50
  [data-theme="dark"] {
50
- --color-cui-taupe-1: oklch(0.177 0.005 55);
51
- --color-cui-taupe-2: oklch(0.213 0.005 55);
52
- --color-cui-taupe-3: oklch(0.252 0.005 55);
53
- --color-cui-taupe-4: oklch(0.284 0.005 55);
54
- --color-cui-taupe-5: oklch(0.312 0.005 55);
55
- --color-cui-taupe-6: oklch(0.348 0.005 55);
56
- --color-cui-taupe-7: oklch(0.401 0.005 55);
57
- --color-cui-taupe-8: oklch(0.489 0.005 55);
58
- --color-cui-taupe-9: oklch(0.534 0.005 55);
59
- --color-cui-taupe-10: oklch(0.582 0.005 55);
60
- --color-cui-taupe-11: oklch(0.767 0.005 55);
61
- --color-cui-taupe-12: oklch(0.949 0.005 55);
51
+ --color-cui-mauve-1: oklch(0.177 0.012 305);
52
+ --color-cui-mauve-2: oklch(0.213 0.014 305);
53
+ --color-cui-mauve-3: oklch(0.252 0.016 305);
54
+ --color-cui-mauve-4: oklch(0.284 0.018 305);
55
+ --color-cui-mauve-5: oklch(0.312 0.02 305);
56
+ --color-cui-mauve-6: oklch(0.348 0.022 305);
57
+ --color-cui-mauve-7: oklch(0.401 0.023 305);
58
+ --color-cui-mauve-8: oklch(0.489 0.024 305);
59
+ --color-cui-mauve-9: oklch(0.534 0.023 305);
60
+ --color-cui-mauve-10: oklch(0.582 0.022 305);
61
+ --color-cui-mauve-11: oklch(0.767 0.015 305);
62
+ --color-cui-mauve-12: oklch(0.949 0.005 305);
62
63
  }
63
64
 
64
65
  /* ── CodeRabbit Orange ──
@@ -163,6 +164,76 @@
163
164
  --color-cui-amber-12: #ffe7b3;
164
165
  }
165
166
 
167
+ /* ── Secondary ──
168
+ * Mint / aquamarine scale anchored at step 9 = #25E2A8.
169
+ * OKLCH-based for smooth perceptual interpolation.
170
+ * Hue 163, anchor lightness 0.815, chroma 0.155.
171
+ */
172
+ :root {
173
+ --color-cui-secondary-1: oklch(0.992 0.005 163);
174
+ --color-cui-secondary-2: oklch(0.975 0.015 163);
175
+ --color-cui-secondary-3: oklch(0.95 0.035 163);
176
+ --color-cui-secondary-4: oklch(0.92 0.055 163);
177
+ --color-cui-secondary-5: oklch(0.89 0.075 163);
178
+ --color-cui-secondary-6: oklch(0.87 0.095 163);
179
+ --color-cui-secondary-7: oklch(0.85 0.115 163);
180
+ --color-cui-secondary-8: oklch(0.84 0.135 163);
181
+ --color-cui-secondary-9: oklch(0.815 0.155 163); /* #25E2A8 */
182
+ --color-cui-secondary-10: oklch(0.78 0.155 163);
183
+ --color-cui-secondary-11: oklch(0.55 0.13 163);
184
+ --color-cui-secondary-12: oklch(0.28 0.06 163);
185
+ }
186
+
187
+ [data-theme="dark"] {
188
+ --color-cui-secondary-1: oklch(0.17 0.015 163);
189
+ --color-cui-secondary-2: oklch(0.2 0.025 163);
190
+ --color-cui-secondary-3: oklch(0.24 0.045 163);
191
+ --color-cui-secondary-4: oklch(0.28 0.06 163);
192
+ --color-cui-secondary-5: oklch(0.32 0.075 163);
193
+ --color-cui-secondary-6: oklch(0.38 0.09 163);
194
+ --color-cui-secondary-7: oklch(0.46 0.105 163);
195
+ --color-cui-secondary-8: oklch(0.58 0.125 163);
196
+ --color-cui-secondary-9: oklch(0.815 0.155 163); /* #25E2A8 */
197
+ --color-cui-secondary-10: oklch(0.85 0.145 163);
198
+ --color-cui-secondary-11: oklch(0.9 0.13 163);
199
+ --color-cui-secondary-12: oklch(0.95 0.04 163);
200
+ }
201
+
202
+ /* ── Tertiary ──
203
+ * Periwinkle / indigo scale anchored at step 9 = #838BFF.
204
+ * OKLCH-based for smooth perceptual interpolation.
205
+ * Hue 272, anchor lightness 0.638, chroma 0.177.
206
+ */
207
+ :root {
208
+ --color-cui-tertiary-1: oklch(0.992 0.005 272);
209
+ --color-cui-tertiary-2: oklch(0.978 0.015 272);
210
+ --color-cui-tertiary-3: oklch(0.955 0.035 272);
211
+ --color-cui-tertiary-4: oklch(0.93 0.055 272);
212
+ --color-cui-tertiary-5: oklch(0.9 0.085 272);
213
+ --color-cui-tertiary-6: oklch(0.86 0.115 272);
214
+ --color-cui-tertiary-7: oklch(0.81 0.145 272);
215
+ --color-cui-tertiary-8: oklch(0.74 0.17 272);
216
+ --color-cui-tertiary-9: oklch(0.638 0.177 272); /* #838BFF */
217
+ --color-cui-tertiary-10: oklch(0.6 0.18 272);
218
+ --color-cui-tertiary-11: oklch(0.5 0.18 272);
219
+ --color-cui-tertiary-12: oklch(0.26 0.08 272);
220
+ }
221
+
222
+ [data-theme="dark"] {
223
+ --color-cui-tertiary-1: oklch(0.17 0.015 272);
224
+ --color-cui-tertiary-2: oklch(0.2 0.025 272);
225
+ --color-cui-tertiary-3: oklch(0.24 0.05 272);
226
+ --color-cui-tertiary-4: oklch(0.28 0.075 272);
227
+ --color-cui-tertiary-5: oklch(0.32 0.09 272);
228
+ --color-cui-tertiary-6: oklch(0.37 0.11 272);
229
+ --color-cui-tertiary-7: oklch(0.44 0.135 272);
230
+ --color-cui-tertiary-8: oklch(0.53 0.16 272);
231
+ --color-cui-tertiary-9: oklch(0.638 0.177 272); /* #838BFF */
232
+ --color-cui-tertiary-10: oklch(0.685 0.175 272);
233
+ --color-cui-tertiary-11: oklch(0.78 0.155 272);
234
+ --color-cui-tertiary-12: oklch(0.93 0.045 272);
235
+ }
236
+
166
237
  /* ── Green ──
167
238
  * Based on Radix Colors green scale.
168
239
  * Used for success and positive states.
package/src/styles.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import "@fontsource-variable/geist";
2
+ @import "hack-font/build/web/hack-subset.css";
1
3
  @import "./theme.css";
2
4
  @import "./scales.css";
3
5
 
package/src/theme.css CHANGED
@@ -9,7 +9,7 @@
9
9
  * --border-color-* → generates border-* only
10
10
  * --ring-color-* → generates ring-* only
11
11
  *
12
- * Raw scales (--color-cui-taupe-*, --color-cui-red-*, etc.)
12
+ * Raw scales (--color-cui-mauve-*, --color-cui-red-*, etc.)
13
13
  * remain in the --color-* namespace for direct use in gradients
14
14
  * and other edge cases at the component level.
15
15
  *
@@ -32,6 +32,38 @@
32
32
  }
33
33
 
34
34
  @theme {
35
+ /*
36
+ * ═══════════════════════════════════════
37
+ * TYPOGRAPHY — Geist (sans) + Hack (mono)
38
+ *
39
+ * Font families resolve through Tailwind's
40
+ * font-cui-sans / font-cui-mono utilities.
41
+ *
42
+ * 4 sizes: sm (12px), base (14px default),
43
+ * lg (18px headings), xl (24px page titles).
44
+ * 2 weights: font-medium (default), font-semibold.
45
+ *
46
+ * All tokens prefixed with `cui-` to avoid
47
+ * collisions with Tailwind built-ins.
48
+ * ═══════════════════════════════════════
49
+ */
50
+ --font-cui-sans:
51
+ "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
52
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
53
+ --font-cui-mono:
54
+ "Hack", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas",
55
+ "Liberation Mono", "Courier New", monospace;
56
+
57
+ /* Size scale — 12 (sm) / 14 (base / body) / 18 (lg) / 24 (xl) */
58
+ --text-cui-sm: 0.75rem; /* 12px */
59
+ --text-cui-sm--line-height: 1rem; /* 16px */
60
+ --text-cui-base: 0.875rem; /* 14px — body default */
61
+ --text-cui-base--line-height: 1.25rem; /* 20px */
62
+ --text-cui-lg: 1.125rem; /* 18px */
63
+ --text-cui-lg--line-height: 1.75rem; /* 28px */
64
+ --text-cui-xl: 1.5rem; /* 24px */
65
+ --text-cui-xl--line-height: 2rem; /* 32px */
66
+
35
67
  /*
36
68
  * ═══════════════════════════════════════
37
69
  * BACKGROUNDS — 3 spatial layers
@@ -41,9 +73,9 @@
41
73
  * cui-base-2: elevated cards, panels, popovers
42
74
  * ═══════════════════════════════════════
43
75
  */
44
- --background-color-cui-base-0: var(--color-cui-taupe-4);
45
- --background-color-cui-base-1: var(--color-cui-taupe-2);
46
- --background-color-cui-base-2: var(--color-cui-taupe-1);
76
+ --background-color-cui-base-0: var(--color-cui-mauve-4);
77
+ --background-color-cui-base-1: var(--color-cui-mauve-2);
78
+ --background-color-cui-base-2: var(--color-cui-mauve-1);
47
79
 
48
80
  /*
49
81
  * ═══════════════════════════════════════
@@ -60,19 +92,28 @@
60
92
  * TEXT — 3 hierarchy levels
61
93
  * ═══════════════════════════════════════
62
94
  */
63
- --text-color-cui-primary: var(--color-cui-taupe-12);
64
- --text-color-cui-secondary: var(--color-cui-taupe-11);
65
- --text-color-cui-tertiary: var(--color-cui-taupe-9);
95
+ --text-color-cui-primary: var(--color-cui-mauve-12);
96
+ --text-color-cui-secondary: var(--color-cui-mauve-11);
97
+ --text-color-cui-tertiary: var(--color-cui-mauve-9);
98
+
99
+ /*
100
+ * ═══════════════════════════════════════
101
+ * FILL — matching bg tokens for use with
102
+ * SVG fill/stroke and divider backgrounds
103
+ * ═══════════════════════════════════════
104
+ */
105
+ --background-color-cui-neutral: var(--color-cui-mauve-5);
106
+ --background-color-cui-tertiary: var(--color-cui-mauve-9);
66
107
 
67
108
  /*
68
109
  * ═══════════════════════════════════════
69
110
  * BORDERS — 2 levels
70
111
  * ═══════════════════════════════════════
71
112
  */
72
- --border-color-cui-neutral: var(--color-cui-taupe-5);
73
- --border-color-cui-neutral-strong: var(--color-cui-taupe-7);
113
+ --border-color-cui-neutral: var(--color-cui-mauve-5);
114
+ --border-color-cui-neutral-strong: var(--color-cui-mauve-7);
74
115
 
75
- --ring-color-cui-neutral: var(--color-cui-taupe-5);
116
+ --ring-color-cui-neutral: var(--color-cui-mauve-5);
76
117
  --ring-color-cui-focus: var(--color-cui-cr-orange-9);
77
118
 
78
119
  /*
@@ -116,16 +157,16 @@
116
157
 
117
158
  /*
118
159
  * ═══════════════════════════════════════
119
- * SUCCESS — Radix green scale
160
+ * SUCCESS — secondary (mint) scale
120
161
  * ═══════════════════════════════════════
121
162
  */
122
- --background-color-cui-success: var(--color-cui-green-9);
123
- --background-color-cui-success-subtle: var(--color-cui-green-3);
124
- --background-color-cui-success-strong: var(--color-cui-green-10);
163
+ --background-color-cui-success: var(--color-cui-secondary-9);
164
+ --background-color-cui-success-subtle: var(--color-cui-secondary-3);
165
+ --background-color-cui-success-strong: var(--color-cui-secondary-10);
125
166
  --background-color-cui-success-on: oklch(0.99 0 0);
126
- --text-color-cui-success: var(--color-cui-green-11);
167
+ --text-color-cui-success: var(--color-cui-secondary-11);
127
168
  --text-color-cui-success-on: oklch(0.99 0 0);
128
- --border-color-cui-success: var(--color-cui-green-8);
169
+ --border-color-cui-success: var(--color-cui-secondary-8);
129
170
 
130
171
  /*
131
172
  * ═══════════════════════════════════════
@@ -151,7 +192,7 @@
151
192
  * ═══════════════════════════════════════
152
193
  */
153
194
  --background-color-cui-inverse: oklch(0.28 0.005 55);
154
- --text-color-cui-inverse: var(--color-cui-taupe-1);
195
+ --text-color-cui-inverse: var(--color-cui-mauve-1);
155
196
 
156
197
  /*
157
198
  * ═══════════════════════════════════════
@@ -201,12 +242,12 @@
201
242
  */
202
243
  [data-theme="dark"] {
203
244
  /* Backgrounds: lighter = more elevated in dark mode too */
204
- --background-color-cui-base-0: var(--color-cui-taupe-1);
205
- --background-color-cui-base-1: var(--color-cui-taupe-2);
206
- --background-color-cui-base-2: var(--color-cui-taupe-3);
245
+ --background-color-cui-base-0: var(--color-cui-mauve-1);
246
+ --background-color-cui-base-1: var(--color-cui-mauve-2);
247
+ --background-color-cui-base-2: var(--color-cui-mauve-3);
207
248
 
208
249
  /* Neutral strong: darker than button fill in dark mode */
209
- --border-color-cui-neutral-strong: var(--color-cui-taupe-1);
250
+ --border-color-cui-neutral-strong: var(--color-cui-mauve-1);
210
251
 
211
252
  /* Accent */
212
253
  --background-color-cui-accent: var(--color-cui-cr-orange-9);
@@ -226,8 +267,8 @@
226
267
  --background-color-cui-inverse: oklch(0.9 0.005 55);
227
268
 
228
269
  /* Success */
229
- --background-color-cui-success: var(--color-cui-green-9);
230
- --background-color-cui-success-strong: var(--color-cui-green-10);
270
+ --background-color-cui-success: var(--color-cui-secondary-9);
271
+ --background-color-cui-success-strong: var(--color-cui-secondary-10);
231
272
  }
232
273
 
233
274
  /*