@coderabbitai/carrot-ui 0.1.21 → 0.1.23

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 (5) hide show
  1. package/dist/index.d.ts +253 -91
  2. package/dist/index.js +1720 -1422
  3. package/package.json +2 -1
  4. package/src/scales.css +29 -28
  5. package/src/theme.css +27 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coderabbitai/carrot-ui",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
4
4
  "description": "CodeRabbit design system. React components built on Base UI, styled with Tailwind CSS v4.",
5
5
  "keywords": [
6
6
  "coderabbit",
@@ -46,6 +46,7 @@
46
46
  "clsx": "^2.1.1",
47
47
  "cmdk": "^1.1.1",
48
48
  "hack-font": "^3.3.0",
49
+ "motion": "^12.38.0",
49
50
  "shiki": "^4.0.2",
50
51
  "tailwind-merge": "^3.5.0"
51
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 ──
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
  *
@@ -39,16 +39,12 @@
39
39
  * Font families resolve through Tailwind's
40
40
  * font-cui-sans / font-cui-mono utilities.
41
41
  *
42
- * Size scale starts at 11px micro and 14px
43
- * body, then ramps in roughly 1.2-step
44
- * increments. Each size pairs with a fixed
45
- * line-height via the --text-{name}--line-height
46
- * convention Tailwind v4 reads automatically.
42
+ * 4 sizes: sm (12px), base (14px default),
43
+ * lg (18px headings), xl (24px page titles).
44
+ * 2 weights: font-medium (default), font-semibold.
47
45
  *
48
- * All tokens are prefixed with `cui-` to avoid
49
- * colliding with Tailwind's built-in font-sans,
50
- * font-mono, text-sm, text-base, etc. when
51
- * imported alongside other design systems.
46
+ * All tokens prefixed with `cui-` to avoid
47
+ * collisions with Tailwind built-ins.
52
48
  * ═══════════════════════════════════════
53
49
  */
54
50
  --font-cui-sans:
@@ -58,21 +54,15 @@
58
54
  "Hack", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas",
59
55
  "Liberation Mono", "Courier New", monospace;
60
56
 
61
- /* Size scale — 11 (xs) / 12 / 14 (base / body) / 16 / 18 / 20 / 24 (max) */
62
- --text-cui-xs: 0.6875rem; /* 11px */
63
- --text-cui-xs--line-height: 1rem; /* 16px */
57
+ /* Size scale — 12 (sm) / 14 (base / body) / 18 (lg) / 24 (xl) */
64
58
  --text-cui-sm: 0.75rem; /* 12px */
65
59
  --text-cui-sm--line-height: 1rem; /* 16px */
66
60
  --text-cui-base: 0.875rem; /* 14px — body default */
67
61
  --text-cui-base--line-height: 1.25rem; /* 20px */
68
- --text-cui-lg: 1rem; /* 16px */
69
- --text-cui-lg--line-height: 1.5rem; /* 24px */
70
- --text-cui-xl: 1.125rem; /* 18px */
71
- --text-cui-xl--line-height: 1.75rem; /* 28px */
72
- --text-cui-2xl: 1.25rem; /* 20px */
73
- --text-cui-2xl--line-height: 1.75rem; /* 28px */
74
- --text-cui-3xl: 1.5rem; /* 24px */
75
- --text-cui-3xl--line-height: 2rem; /* 32px */
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 */
76
66
 
77
67
  /*
78
68
  * ═══════════════════════════════════════
@@ -83,9 +73,9 @@
83
73
  * cui-base-2: elevated cards, panels, popovers
84
74
  * ═══════════════════════════════════════
85
75
  */
86
- --background-color-cui-base-0: var(--color-cui-taupe-4);
87
- --background-color-cui-base-1: var(--color-cui-taupe-2);
88
- --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);
89
79
 
90
80
  /*
91
81
  * ═══════════════════════════════════════
@@ -102,9 +92,9 @@
102
92
  * TEXT — 3 hierarchy levels
103
93
  * ═══════════════════════════════════════
104
94
  */
105
- --text-color-cui-primary: var(--color-cui-taupe-12);
106
- --text-color-cui-secondary: var(--color-cui-taupe-11);
107
- --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);
108
98
 
109
99
  /*
110
100
  * ═══════════════════════════════════════
@@ -112,18 +102,18 @@
112
102
  * SVG fill/stroke and divider backgrounds
113
103
  * ═══════════════════════════════════════
114
104
  */
115
- --background-color-cui-neutral: var(--color-cui-taupe-5);
116
- --background-color-cui-tertiary: var(--color-cui-taupe-9);
105
+ --background-color-cui-neutral: var(--color-cui-mauve-5);
106
+ --background-color-cui-tertiary: var(--color-cui-mauve-9);
117
107
 
118
108
  /*
119
109
  * ═══════════════════════════════════════
120
110
  * BORDERS — 2 levels
121
111
  * ═══════════════════════════════════════
122
112
  */
123
- --border-color-cui-neutral: var(--color-cui-taupe-5);
124
- --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);
125
115
 
126
- --ring-color-cui-neutral: var(--color-cui-taupe-5);
116
+ --ring-color-cui-neutral: var(--color-cui-mauve-5);
127
117
  --ring-color-cui-focus: var(--color-cui-cr-orange-9);
128
118
 
129
119
  /*
@@ -202,7 +192,7 @@
202
192
  * ═══════════════════════════════════════
203
193
  */
204
194
  --background-color-cui-inverse: oklch(0.28 0.005 55);
205
- --text-color-cui-inverse: var(--color-cui-taupe-1);
195
+ --text-color-cui-inverse: var(--color-cui-mauve-1);
206
196
 
207
197
  /*
208
198
  * ═══════════════════════════════════════
@@ -252,12 +242,12 @@
252
242
  */
253
243
  [data-theme="dark"] {
254
244
  /* Backgrounds: lighter = more elevated in dark mode too */
255
- --background-color-cui-base-0: var(--color-cui-taupe-1);
256
- --background-color-cui-base-1: var(--color-cui-taupe-2);
257
- --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);
258
248
 
259
249
  /* Neutral strong: darker than button fill in dark mode */
260
- --border-color-cui-neutral-strong: var(--color-cui-taupe-1);
250
+ --border-color-cui-neutral-strong: var(--color-cui-mauve-1);
261
251
 
262
252
  /* Accent */
263
253
  --background-color-cui-accent: var(--color-cui-cr-orange-9);