|
4 | 4 | @source '../app'; |
5 | 5 | @source '../components'; |
6 | 6 |
|
7 | | -/* ──────────────────────────────────────────────────────────────────────── |
8 | | - RepoLens brand tokens. |
9 | | - Two themes drive everything: latte (:root, light) and midnight (.dark). |
10 | | - next-themes (wired by fumadocs RootProvider, `class` strategy) flips .dark, |
11 | | - so both the marketing pages and the docs re-skin from a single toggle. |
12 | | - Accent palettes layer on top via [data-palette] — accent ramp only. |
| 7 | +/* ════════════════════════════════════════════════════════════════════════ |
| 8 | + "The Case File" — a detective/inspector identity for RepoLens. |
| 9 | + Leads LIGHT (warm manila + ink), with an amber/brass lens-glint accent and a |
| 10 | + detective red for risk. Dark survives as a warm "night stakeout" (.dark), not |
| 11 | + a cold terminal. next-themes flips .dark; tokens drive marketing + docs. |
13 | 12 | ──────────────────────────────────────────────────────────────────────── */ |
14 | 13 |
|
15 | 14 | :root { |
16 | | - /* type + motion (theme-independent) */ |
17 | | - --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; |
18 | | - --sans: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| 15 | + /* type + motion */ |
| 16 | + --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; |
| 17 | + --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| 18 | + /* --font-display is supplied by next/font (Fraunces); falls back to a serif. */ |
| 19 | + --serif-fallback: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; |
19 | 20 | --dur-fast: 120ms; |
20 | 21 | --dur: 200ms; |
21 | 22 | --dur-slow: 320ms; |
22 | 23 | --ease-out: cubic-bezier(0.16, 1, 0.3, 1); |
23 | 24 | --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); |
| 25 | + /* the stamp's heavy "slam" */ |
| 26 | + --ease-stamp: cubic-bezier(0.5, 1.8, 0.4, 0.95); |
24 | 27 |
|
25 | | - /* Inspector accent ramp — royal blue → cyan, tied to the mascot. |
26 | | - [data-palette] overrides these; nothing else should redefine them. */ |
27 | | - --accent: #3b82f6; |
28 | | - --accent-2: #2563eb; |
29 | | - --accent-3: #38bdf8; |
30 | | - --grad: linear-gradient(120deg, #60a5fa 0%, #3b82f6 55%, #22d3ee 120%); |
31 | | - --grad-soft: linear-gradient(120deg, #3b82f6, #22d3ee); |
32 | | - --accent-glow: rgba(59, 130, 246, 0.4); |
33 | | - --accent-weak: rgba(59, 130, 246, 0.12); |
34 | | - --accent-line: rgba(59, 130, 246, 0.3); |
| 28 | + /* Amber/brass lens-glint accent + detective red. One ramp tuned for paper; |
| 29 | + .dark brightens it for the night-stakeout surfaces. */ |
| 30 | + --accent: #9e530e; |
| 31 | + --accent-2: #934a0c; |
| 32 | + --accent-3: #d9822b; |
| 33 | + --grad: linear-gradient(120deg, #d9822b 0%, #9e530e 60%, #934a0c 120%); |
| 34 | + --grad-soft: linear-gradient(120deg, #d9822b, #9e530e); |
| 35 | + --accent-glow: rgba(179, 94, 16, 0.35); |
| 36 | + --accent-weak: rgba(179, 94, 16, 0.1); |
| 37 | + --accent-line: rgba(179, 94, 16, 0.28); |
35 | 38 |
|
36 | | - /* Warm signature — the lens rim. Complementary to the blue; used sparingly |
37 | | - (the primary CTA, select highlights, the verdict tab underline). */ |
38 | | - --warm: #f59e0b; |
39 | | - --warm-2: #fb923c; |
| 39 | + /* warm = the amber CTA; red = the RISKY stamp / red flags */ |
| 40 | + --warm: #c2691c; |
| 41 | + --warm-2: #d9822b; |
40 | 42 | --warm-ink: #2a1605; |
41 | | - --warm-glow: rgba(245, 158, 11, 0.5); |
42 | | - --warm-weak: rgba(245, 158, 11, 0.14); |
43 | | - --warm-line: rgba(245, 158, 11, 0.36); |
| 43 | + --warm-glow: rgba(194, 105, 28, 0.4); |
| 44 | + --warm-weak: rgba(194, 105, 28, 0.12); |
| 45 | + --warm-line: rgba(194, 105, 28, 0.34); |
| 46 | + --red: #c0392b; |
| 47 | + --red-weak: rgba(192, 57, 43, 0.12); |
44 | 48 |
|
45 | | - /* latte — warm paper, light */ |
46 | | - --bg: #f3f1ec; |
47 | | - --bg-2: #eae6dd; |
48 | | - --surface: #ffffff; |
49 | | - --surface-2: #faf8f3; |
50 | | - --border: #e4ded1; |
51 | | - --border-2: #d3ccba; |
52 | | - --text: #34322c; |
53 | | - --text-strong: #1a1813; |
54 | | - --sub: #5f5a4d; |
55 | | - --muted: #857f6d; |
56 | | - --faint: #aaa392; |
57 | | - --ok: #0f9d6a; |
58 | | - --info: #0284c7; |
59 | | - --warn: #b45309; |
60 | | - --bad: #dc2647; |
61 | | - --shadow-lg: 0 30px 80px -40px rgba(40, 34, 20, 0.28); |
62 | | - --shadow-md: 0 18px 40px -24px rgba(40, 34, 20, 0.22); |
63 | | - --starfield-opacity: 0; |
| 49 | + /* Case File — warm manila paper, sepia ink */ |
| 50 | + --bg: #f4ead4; |
| 51 | + --bg-2: #ecdfc2; |
| 52 | + --surface: #fbf5e7; |
| 53 | + --surface-2: #f5ecd6; |
| 54 | + --border: #ddccab; |
| 55 | + --border-2: #c8b285; |
| 56 | + --text: #2a2114; |
| 57 | + --text-strong: #17110a; |
| 58 | + --sub: #5d5034; |
| 59 | + --muted: #756544; |
| 60 | + --faint: #a89571; |
| 61 | + --ok: #2c7631; |
| 62 | + --info: #1d6fa3; |
| 63 | + --warn: #b4690a; |
| 64 | + --bad: #c0392b; |
| 65 | + --shadow-lg: 0 26px 70px -34px rgba(60, 42, 16, 0.38); |
| 66 | + --shadow-md: 0 16px 38px -22px rgba(60, 42, 16, 0.3); |
| 67 | + --paper-grain: 0.5; |
64 | 68 |
|
65 | | - /* fumadocs remap → latte */ |
66 | | - --color-fd-background: #f3f1ec; |
67 | | - --color-fd-foreground: #34322c; |
68 | | - --color-fd-muted: #eae6dd; |
69 | | - --color-fd-muted-foreground: #6f6a5b; |
70 | | - --color-fd-popover: #ffffff; |
71 | | - --color-fd-popover-foreground: #1a1813; |
72 | | - --color-fd-card: #faf8f3; |
73 | | - --color-fd-card-foreground: #1a1813; |
74 | | - --color-fd-border: #e2ddd1; |
75 | | - --color-fd-primary: #2563eb; |
76 | | - --color-fd-primary-foreground: #ffffff; |
77 | | - --color-fd-secondary: #eee9df; |
78 | | - --color-fd-secondary-foreground: #34322c; |
79 | | - --color-fd-accent: #ece7dc; |
80 | | - --color-fd-accent-foreground: #1a1813; |
81 | | - --color-fd-ring: #3b82f6; |
| 69 | + /* fumadocs remap → Case File light */ |
| 70 | + --color-fd-background: #f4ead4; |
| 71 | + --color-fd-foreground: #2a2114; |
| 72 | + --color-fd-muted: #ecdfc2; |
| 73 | + --color-fd-muted-foreground: #6a5c3d; |
| 74 | + --color-fd-popover: #fbf5e7; |
| 75 | + --color-fd-popover-foreground: #17110a; |
| 76 | + --color-fd-card: #fbf5e7; |
| 77 | + --color-fd-card-foreground: #17110a; |
| 78 | + --color-fd-border: #ddccab; |
| 79 | + --color-fd-primary: #9e530e; |
| 80 | + --color-fd-primary-foreground: #fbf5e7; |
| 81 | + --color-fd-secondary: #efe3ca; |
| 82 | + --color-fd-secondary-foreground: #2a2114; |
| 83 | + --color-fd-accent: #ecdfc2; |
| 84 | + --color-fd-accent-foreground: #17110a; |
| 85 | + --color-fd-ring: #9e530e; |
82 | 86 | } |
83 | 87 |
|
84 | 88 | .dark { |
85 | | - /* midnight — blue-black observatory, dark */ |
86 | | - --bg: #0a0e1a; |
87 | | - --bg-2: #0c1220; |
88 | | - --surface: #111a2e; |
89 | | - --surface-2: #16203a; |
90 | | - --border: #223149; |
91 | | - --border-2: #32486e; |
92 | | - --text: #eaeefb; |
93 | | - --text-strong: #ffffff; |
94 | | - --sub: #9aa6c2; |
95 | | - --muted: #6b7794; |
96 | | - --faint: #4b5570; |
97 | | - --ok: #34d399; |
98 | | - --info: #38bdf8; |
99 | | - --warn: #fbbf24; |
100 | | - --bad: #fb7185; |
101 | | - --shadow-lg: 0 30px 80px -40px rgba(0, 0, 0, 0.8); |
102 | | - --shadow-md: 0 20px 50px -28px rgba(0, 0, 0, 0.7); |
103 | | - --starfield-opacity: 0.5; |
| 89 | + /* Night Stakeout — warm noir, not a cold terminal */ |
| 90 | + --bg: #1b1610; |
| 91 | + --bg-2: #221b12; |
| 92 | + --surface: #2a2116; |
| 93 | + --surface-2: #32281a; |
| 94 | + --border: #43361f; |
| 95 | + --border-2: #5e4b2c; |
| 96 | + --text: #ece1cd; |
| 97 | + --text-strong: #fff8ec; |
| 98 | + --sub: #c3b094; |
| 99 | + --muted: #9c8a6a; |
| 100 | + --faint: #6f6045; |
104 | 101 |
|
105 | | - /* fumadocs remap → midnight */ |
106 | | - --color-fd-background: #0a0e1a; |
107 | | - --color-fd-foreground: #eaeefb; |
108 | | - --color-fd-muted: #111a2e; |
109 | | - --color-fd-muted-foreground: #9aa6c2; |
110 | | - --color-fd-popover: #0c1220; |
111 | | - --color-fd-popover-foreground: #eaeefb; |
112 | | - --color-fd-card: #111a2e; |
113 | | - --color-fd-card-foreground: #eaeefb; |
114 | | - --color-fd-border: #223149; |
115 | | - --color-fd-primary: #60a5fa; |
116 | | - --color-fd-primary-foreground: #0a0e1a; |
117 | | - --color-fd-secondary: #16203a; |
118 | | - --color-fd-secondary-foreground: #eaeefb; |
119 | | - --color-fd-accent: #18233c; |
120 | | - --color-fd-accent-foreground: #ffffff; |
121 | | - --color-fd-ring: #3b82f6; |
122 | | -} |
| 102 | + /* brighter amber + red read better on the warm-dark surfaces */ |
| 103 | + --accent: #e0934a; |
| 104 | + --accent-2: #cf7a2a; |
| 105 | + --accent-3: #f0aa63; |
| 106 | + --grad: linear-gradient(120deg, #f0aa63 0%, #e0934a 60%, #cf7a2a 120%); |
| 107 | + --grad-soft: linear-gradient(120deg, #f0aa63, #e0934a); |
| 108 | + --accent-glow: rgba(224, 147, 74, 0.45); |
| 109 | + --accent-weak: rgba(224, 147, 74, 0.14); |
| 110 | + --accent-line: rgba(224, 147, 74, 0.32); |
| 111 | + --warm: #e0934a; |
| 112 | + --warm-2: #f0aa63; |
| 113 | + --warm-ink: #2a1605; |
| 114 | + --warm-glow: rgba(224, 147, 74, 0.45); |
| 115 | + --warm-weak: rgba(224, 147, 74, 0.16); |
| 116 | + --warm-line: rgba(224, 147, 74, 0.36); |
| 117 | + --red: #e06a5c; |
| 118 | + --red-weak: rgba(224, 106, 92, 0.16); |
| 119 | + --ok: #5cc05f; |
| 120 | + --info: #56b6e8; |
| 121 | + --warn: #e0a341; |
| 122 | + --bad: #e06a5c; |
| 123 | + --shadow-lg: 0 26px 70px -34px rgba(0, 0, 0, 0.72); |
| 124 | + --shadow-md: 0 16px 44px -26px rgba(0, 0, 0, 0.66); |
| 125 | + --paper-grain: 0.7; |
123 | 126 |
|
124 | | -/* ── Accent palettes (showcase the theme engine) — accent ramp only ─────── */ |
125 | | -:root[data-palette="terminal"] { |
126 | | - --accent: #34d399; |
127 | | - --accent-2: #10b981; |
128 | | - --accent-3: #6ee7b7; |
129 | | - --grad: linear-gradient(120deg, #6ee7b7 0%, #10b981 55%, #059669 120%); |
130 | | - --grad-soft: linear-gradient(120deg, #34d399, #10b981); |
131 | | - --accent-glow: rgba(16, 185, 129, 0.5); |
132 | | - --accent-weak: rgba(16, 185, 129, 0.12); |
133 | | - --accent-line: rgba(16, 185, 129, 0.3); |
134 | | -} |
135 | | -:root[data-palette="nord"] { |
136 | | - --accent: #88c0d0; |
137 | | - --accent-2: #5e81ac; |
138 | | - --accent-3: #8fbcbb; |
139 | | - --grad: linear-gradient(120deg, #8fbcbb 0%, #88c0d0 50%, #5e81ac 120%); |
140 | | - --grad-soft: linear-gradient(120deg, #88c0d0, #5e81ac); |
141 | | - --accent-glow: rgba(94, 129, 172, 0.5); |
142 | | - --accent-weak: rgba(136, 192, 208, 0.14); |
143 | | - --accent-line: rgba(136, 192, 208, 0.32); |
144 | | -} |
145 | | -:root[data-palette="claude"] { |
146 | | - --accent: #d97757; |
147 | | - --accent-2: #cc785c; |
148 | | - --accent-3: #e8a87c; |
149 | | - --grad: linear-gradient(120deg, #e8a87c 0%, #d97757 55%, #c15f3c 120%); |
150 | | - --grad-soft: linear-gradient(120deg, #d97757, #c15f3c); |
151 | | - --accent-glow: rgba(217, 119, 87, 0.5); |
152 | | - --accent-weak: rgba(217, 119, 87, 0.13); |
153 | | - --accent-line: rgba(217, 119, 87, 0.3); |
| 127 | + /* fumadocs remap → night stakeout */ |
| 128 | + --color-fd-background: #1b1610; |
| 129 | + --color-fd-foreground: #ece1cd; |
| 130 | + --color-fd-muted: #2a2116; |
| 131 | + --color-fd-muted-foreground: #c3b094; |
| 132 | + --color-fd-popover: #221b12; |
| 133 | + --color-fd-popover-foreground: #ece1cd; |
| 134 | + --color-fd-card: #2a2116; |
| 135 | + --color-fd-card-foreground: #ece1cd; |
| 136 | + --color-fd-border: #43361f; |
| 137 | + --color-fd-primary: #e0934a; |
| 138 | + --color-fd-primary-foreground: #1b1610; |
| 139 | + --color-fd-secondary: #32281a; |
| 140 | + --color-fd-secondary-foreground: #ece1cd; |
| 141 | + --color-fd-accent: #322619; |
| 142 | + --color-fd-accent-foreground: #fff8ec; |
| 143 | + --color-fd-ring: #e0934a; |
154 | 144 | } |
0 commit comments