Skip to content

Commit 3fb6de2

Browse files
BunsDevBunsDev
authored
Retheme Purple Stuff as Deep Purple (#447)
- Rename the theme in the UI and docs - Refresh light and dark palette tokens, shadows, and typography - Update design notes to match the new premium direction
1 parent 964ab10 commit 3fb6de2

4 files changed

Lines changed: 123 additions & 143 deletions

File tree

‎DESIGN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Three premium themes, each with light and dark variants:
9999
| ------------------- | ------------------------------------- |
100100
| **Iridescent Void** | Futuristic, expensive, slightly alien |
101101
| **Carbon** | Stark, modern, performance-focused |
102-
| **Purple Stuff** | Plush lilac, grape-soda, subtly noir |
102+
| **Deep Purple** | Minimal cool, elegant, grape-violet |
103103

104104
All themes define the same set of CSS custom properties. Components must use semantic
105105
tokens (`bg-accent`, `text-muted-foreground`) — never theme-specific values.

‎apps/web/src/hooks/useTheme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const COLOR_THEMES: { id: ColorTheme; label: string }[] = [
1717
{ id: "default", label: "Default" },
1818
{ id: "iridescent-void", label: "Iridescent Void" },
1919
{ id: "carbon", label: "Carbon" },
20-
{ id: "purple-stuff", label: "Purple Stuff" },
20+
{ id: "purple-stuff", label: "Deep Purple" },
2121
{ id: "custom", label: "Custom" },
2222
];
2323

‎apps/web/src/themes.css‎

Lines changed: 112 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -123,148 +123,128 @@
123123
--warning-foreground: #f7b955;
124124
}
125125

126-
/* ─── Purple Stuff ─── plush lilac surfaces with grape-soda contrast ─── */
126+
/* ─── Deep Purple ─── minimal cool elegant dashboard portfolio ─── */
127127

128128
:root.theme-purple-stuff {
129129
color-scheme: light;
130-
--background: oklch(0.9201 0.0109 256.6974);
131-
--foreground: oklch(0.3192 0.0102 216.7919);
132-
--card: oklch(0.9201 0.0109 256.6974);
133-
--card-foreground: oklch(0.3192 0.0102 216.7919);
134-
--popover: oklch(0.9201 0.0109 256.6974);
135-
--popover-foreground: oklch(0.3192 0.0102 216.7919);
136-
--primary: oklch(0.5676 0.2021 283.0838);
137-
--primary-foreground: oklch(1 0 0);
138-
--secondary: oklch(0.8831 0.0199 260.1689);
139-
--secondary-foreground: oklch(0.3192 0.0102 216.7919);
140-
--muted: oklch(0.8765 0.0112 225.9985);
141-
--muted-foreground: oklch(0.5303 0.0148 221.5854);
142-
--accent: oklch(0.5676 0.2021 283.0838);
143-
--accent-foreground: oklch(1 0 0);
144-
--destructive: oklch(0.7281 0.1678 22.5445);
145-
--destructive-foreground: oklch(1 0 0);
146-
--border: oklch(0.8831 0.0199 260.1689);
147-
--input: oklch(0.9201 0.0109 256.6974);
148-
--ring: oklch(0.5676 0.2021 283.0838);
149-
--info: oklch(0.6052 0.1712 250.5691);
150-
--info-foreground: oklch(0.3192 0.0102 216.7919);
151-
--success: oklch(0.6972 0.1351 172.0843);
152-
--success-foreground: oklch(0.3192 0.0102 216.7919);
153-
--warning: oklch(0.7359 0.1411 285.6043);
154-
--warning-foreground: oklch(0.3192 0.0102 216.7919);
155-
--chart-1: oklch(0.5676 0.2021 283.0838);
156-
--chart-2: oklch(0.7359 0.1411 285.6043);
157-
--chart-3: oklch(0.8793 0.0993 195.4973);
158-
--chart-4: oklch(0.7682 0.123 250.0275);
159-
--chart-5: oklch(0.8598 0.1435 170.8155);
160-
--sidebar: oklch(0.9201 0.0109 256.6974);
161-
--sidebar-foreground: oklch(0.3192 0.0102 216.7919);
162-
--sidebar-primary: oklch(0.5676 0.2021 283.0838);
163-
--sidebar-primary-foreground: oklch(1 0 0);
164-
--sidebar-accent: oklch(0.8831 0.0199 260.1689);
165-
--sidebar-accent-foreground: oklch(0.5676 0.2021 283.0838);
166-
--sidebar-border: oklch(0.8831 0.0199 260.1689);
167-
--sidebar-ring: oklch(0.5676 0.2021 283.0838);
168-
--font-sans: "Inter", sans-serif;
130+
--background: oklch(0.9838 0.0035 247.8583);
131+
--foreground: oklch(0.1284 0.0267 261.5937);
132+
--card: oklch(1 0 0);
133+
--card-foreground: oklch(0.1284 0.0267 261.5937);
134+
--popover: oklch(1 0 0);
135+
--popover-foreground: oklch(0.1284 0.0267 261.5937);
136+
--primary: oklch(0.4865 0.2423 291.8661);
137+
--primary-foreground: oklch(0.9838 0.0035 247.8583);
138+
--secondary: oklch(0.9486 0.0085 303.5068);
139+
--secondary-foreground: oklch(0.341 0.1625 292.9477);
140+
--muted: oklch(0.9679 0.0027 264.5424);
141+
--muted-foreground: oklch(0.5503 0.0235 264.362);
142+
--accent: oklch(0.9546 0.0227 303.2883);
143+
--accent-foreground: oklch(0.4865 0.2423 291.8661);
144+
--destructive: oklch(0.6356 0.2082 25.3782);
145+
--destructive-foreground: oklch(0.9838 0.0035 247.8583);
146+
--border: oklch(0.9278 0.0058 264.5314);
147+
--input: oklch(0.9278 0.0058 264.5314);
148+
--ring: oklch(0.4865 0.2423 291.8661);
149+
--info: oklch(0.7216 0.1282 217.8676);
150+
--info-foreground: oklch(0.1284 0.0267 261.5937);
151+
--success: oklch(0.6356 0.1398 156.1492);
152+
--success-foreground: oklch(0.1284 0.0267 261.5937);
153+
--warning: oklch(0.6192 0.2037 312.7283);
154+
--warning-foreground: oklch(0.1284 0.0267 261.5937);
155+
--chart-1: oklch(0.4865 0.2423 291.8661);
156+
--chart-2: oklch(0.7216 0.1282 217.8676);
157+
--chart-3: oklch(0.6356 0.1398 156.1492);
158+
--chart-4: oklch(0.6192 0.2037 312.7283);
159+
--chart-5: oklch(0.6532 0.2114 353.9392);
160+
--sidebar: oklch(1 0 0);
161+
--sidebar-foreground: oklch(0.1284 0.0267 261.5937);
162+
--sidebar-primary: oklch(0.4865 0.2423 291.8661);
163+
--sidebar-primary-foreground: oklch(0.9838 0.0035 247.8583);
164+
--sidebar-accent: oklch(0.9486 0.0085 303.5068);
165+
--sidebar-accent-foreground: oklch(0.4865 0.2423 291.8661);
166+
--sidebar-border: oklch(0.9278 0.0058 264.5314);
167+
--sidebar-ring: oklch(0.4865 0.2423 291.8661);
168+
--font-sans: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
169169
--font-serif: Georgia, serif;
170-
--font-mono: "Fira Code", monospace;
171-
--radius: 1.25rem;
172-
--shadow-x: 9px;
173-
--shadow-y: 9px;
174-
--shadow-blur: 20px;
170+
--font-mono: "JetBrains Mono", monospace;
171+
--radius: 1rem;
172+
--shadow-x: 0px;
173+
--shadow-y: 8px;
174+
--shadow-blur: 30px;
175175
--shadow-spread: 0px;
176-
--shadow-opacity: 0.6;
177-
--shadow-color: #a3b1c6;
178-
--shadow-2xs: 9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.3);
179-
--shadow-xs: 9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.3);
180-
--shadow-sm:
181-
9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.6),
182-
9px 1px 2px -1px hsl(216 23.4899% 70.7843% / 0.6);
183-
--shadow:
184-
9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.6),
185-
9px 1px 2px -1px hsl(216 23.4899% 70.7843% / 0.6);
186-
--shadow-md:
187-
9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.6),
188-
9px 2px 4px -1px hsl(216 23.4899% 70.7843% / 0.6);
189-
--shadow-lg:
190-
9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.6),
191-
9px 4px 6px -1px hsl(216 23.4899% 70.7843% / 0.6);
192-
--shadow-xl:
193-
9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 0.6),
194-
9px 8px 10px -1px hsl(216 23.4899% 70.7843% / 0.6);
195-
--shadow-2xl: 9px 9px 20px 0px hsl(216 23.4899% 70.7843% / 1.5);
196-
--tracking-normal: 0.025em;
176+
--shadow-opacity: 0.08;
177+
--shadow-color: hsl(263, 70%, 50%);
178+
--shadow-2xs: 0px 8px 30px 0px hsl(263 70% 50% / 0.04);
179+
--shadow-xs: 0px 8px 30px 0px hsl(263 70% 50% / 0.04);
180+
--shadow-sm: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 1px 2px -1px hsl(263 70% 50% / 0.08);
181+
--shadow: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 1px 2px -1px hsl(263 70% 50% / 0.08);
182+
--shadow-md: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 2px 4px -1px hsl(263 70% 50% / 0.08);
183+
--shadow-lg: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 4px 6px -1px hsl(263 70% 50% / 0.08);
184+
--shadow-xl: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 8px 10px -1px hsl(263 70% 50% / 0.08);
185+
--shadow-2xl: 0px 8px 30px 0px hsl(263 70% 50% / 0.2);
186+
--tracking-normal: -0.015em;
197187
--spacing: 0.25rem;
198188
}
199189

200190
:root.theme-purple-stuff.dark {
201191
color-scheme: dark;
202-
--background: oklch(0 0 0);
203-
--foreground: oklch(0.9205 0.0086 225.0878);
204-
--card: oklch(0.1291 0.0026 286.0284);
205-
--card-foreground: oklch(0.9205 0.0086 225.0878);
206-
--popover: oklch(0.3192 0.0102 216.7919);
207-
--popover-foreground: oklch(0.9205 0.0086 225.0878);
208-
--primary: oklch(0.7359 0.1411 285.6043);
209-
--primary-foreground: oklch(0 0 0);
210-
--secondary: oklch(0 0 0);
211-
--secondary-foreground: oklch(0.9205 0.0086 225.0878);
212-
--muted: oklch(0.2258 0.0025 247.9355);
213-
--muted-foreground: oklch(0.7937 0.0151 224.5441);
214-
--accent: oklch(0.7359 0.1411 285.6043);
215-
--accent-foreground: oklch(0.9249 0 0);
216-
--destructive: oklch(0.8251 0.0894 33.5775);
217-
--destructive-foreground: oklch(0.3192 0.0102 216.7919);
218-
--border: oklch(0.352 0.0241 265.6321);
219-
--input: oklch(0.3192 0.0102 216.7919);
220-
--ring: oklch(0.7359 0.1411 285.6043);
221-
--info: oklch(0.7692 0.1322 191.6635);
222-
--info-foreground: oklch(0.9205 0.0086 225.0878);
223-
--success: oklch(0.6972 0.1351 172.0843);
224-
--success-foreground: oklch(0.9205 0.0086 225.0878);
225-
--warning: oklch(0.7359 0.1411 285.6043);
226-
--warning-foreground: oklch(0.9249 0 0);
227-
--chart-1: oklch(0.7359 0.1411 285.6043);
228-
--chart-2: oklch(0.5676 0.2021 283.0838);
229-
--chart-3: oklch(0.7692 0.1322 191.6635);
230-
--chart-4: oklch(0.6052 0.1712 250.5691);
231-
--chart-5: oklch(0.6972 0.1351 172.0843);
232-
--sidebar: oklch(0.3192 0.0102 216.7919);
233-
--sidebar-foreground: oklch(0.9205 0.0086 225.0878);
234-
--sidebar-primary: oklch(0.7359 0.1411 285.6043);
235-
--sidebar-primary-foreground: oklch(0.3192 0.0102 216.7919);
236-
--sidebar-accent: oklch(0.5137 0.0082 268.4824);
237-
--sidebar-accent-foreground: oklch(0.7359 0.1411 285.6043);
238-
--sidebar-border: oklch(0.352 0.0241 265.6321);
239-
--sidebar-ring: oklch(0.7359 0.1411 285.6043);
240-
--font-sans: "Inter", sans-serif;
192+
--background: oklch(0.1091 0.0091 301.6956);
193+
--foreground: oklch(0.9838 0.0035 247.8583);
194+
--card: oklch(0.1376 0.0118 301.0607);
195+
--card-foreground: oklch(0.9838 0.0035 247.8583);
196+
--popover: oklch(0.1486 0.014 299.9811);
197+
--popover-foreground: oklch(0.9838 0.0035 247.8583);
198+
--primary: oklch(0.6083 0.2172 297.1153);
199+
--primary-foreground: oklch(0.1091 0.0091 301.6956);
200+
--secondary: oklch(0.2363 0.0582 299.6364);
201+
--secondary-foreground: oklch(0.8266 0.0933 301.9462);
202+
--muted: oklch(0.2217 0.0242 299.7054);
203+
--muted-foreground: oklch(0.7497 0.0224 301.0128);
204+
--accent: oklch(0.2255 0.0836 296.7401);
205+
--accent-foreground: oklch(0.6083 0.2172 297.1153);
206+
--destructive: oklch(0.6356 0.2082 25.3782);
207+
--destructive-foreground: oklch(0.9838 0.0035 247.8583);
208+
--border: oklch(0.2505 0.0293 299.5707);
209+
--input: oklch(0.2505 0.0293 299.5707);
210+
--ring: oklch(0.6083 0.2172 297.1153);
211+
--info: oklch(0.7741 0.1272 215.0981);
212+
--info-foreground: oklch(0.9838 0.0035 247.8583);
213+
--success: oklch(0.7801 0.1859 154.5892);
214+
--success-foreground: oklch(0.9838 0.0035 247.8583);
215+
--warning: oklch(0.7001 0.1882 313.2907);
216+
--warning-foreground: oklch(0.9838 0.0035 247.8583);
217+
--chart-1: oklch(0.6083 0.2172 297.1153);
218+
--chart-2: oklch(0.7741 0.1272 215.0981);
219+
--chart-3: oklch(0.7801 0.1859 154.5892);
220+
--chart-4: oklch(0.7001 0.1882 313.2907);
221+
--chart-5: oklch(0.6888 0.2092 353.1317);
222+
--sidebar: oklch(0.1249 0.0104 301.6956);
223+
--sidebar-foreground: oklch(0.9838 0.0035 247.8583);
224+
--sidebar-primary: oklch(0.6083 0.2172 297.1153);
225+
--sidebar-primary-foreground: oklch(0.1091 0.0091 301.6956);
226+
--sidebar-accent: oklch(0.2096 0.0482 299.9505);
227+
--sidebar-accent-foreground: oklch(0.6083 0.2172 297.1153);
228+
--sidebar-border: oklch(0.2217 0.0242 299.7054);
229+
--sidebar-ring: oklch(0.6083 0.2172 297.1153);
230+
--font-sans: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
241231
--font-serif: Georgia, serif;
242-
--font-mono: "Fira Code", monospace;
243-
--radius: 1.25rem;
244-
--shadow-x: 6px;
245-
--shadow-y: 6px;
246-
--shadow-blur: 15px;
247-
--shadow-spread: 0px;
248-
--shadow-opacity: 0.8;
249-
--shadow-color: #212529;
250-
--shadow-2xs: 6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.4);
251-
--shadow-xs: 6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.4);
252-
--shadow-sm:
253-
6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.8),
254-
6px 1px 2px -1px hsl(210 10.8108% 14.5098% / 0.8);
255-
--shadow:
256-
6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.8),
257-
6px 1px 2px -1px hsl(210 10.8108% 14.5098% / 0.8);
258-
--shadow-md:
259-
6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.8),
260-
6px 2px 4px -1px hsl(210 10.8108% 14.5098% / 0.8);
261-
--shadow-lg:
262-
6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.8),
263-
6px 4px 6px -1px hsl(210 10.8108% 14.5098% / 0.8);
264-
--shadow-xl:
265-
6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 0.8),
266-
6px 8px 10px -1px hsl(210 10.8108% 14.5098% / 0.8);
267-
--shadow-2xl: 6px 6px 15px 0px hsl(210 10.8108% 14.5098% / 2);
268-
--tracking-normal: 0.025em;
232+
--font-mono: "JetBrains Mono", monospace;
233+
--radius: 1rem;
234+
--shadow-x: 0px;
235+
--shadow-y: 20px;
236+
--shadow-blur: 40px;
237+
--shadow-spread: -10px;
238+
--shadow-opacity: 0.6;
239+
--shadow-color: #000000;
240+
--shadow-2xs: 0px 20px 40px -10px hsl(0 0% 0% / 0.3);
241+
--shadow-xs: 0px 20px 40px -10px hsl(0 0% 0% / 0.3);
242+
--shadow-sm: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 1px 2px -11px hsl(0 0% 0% / 0.6);
243+
--shadow: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 1px 2px -11px hsl(0 0% 0% / 0.6);
244+
--shadow-md: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 2px 4px -11px hsl(0 0% 0% / 0.6);
245+
--shadow-lg: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 4px 6px -11px hsl(0 0% 0% / 0.6);
246+
--shadow-xl: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 8px 10px -11px hsl(0 0% 0% / 0.6);
247+
--shadow-2xl: 0px 20px 40px -10px hsl(0 0% 0% / 1.5);
248+
--tracking-normal: -0.015em;
269249
--spacing: 0.25rem;
270250
}

‎docs/themes.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -97,16 +97,16 @@ The goal is to avoid generic editor skins and instead build themes that feel lik
9797

9898
---
9999

100-
### 9. Purple Stuff
100+
### 9. Deep Purple
101101

102-
**Vibe:** plush, nocturnal, grape-soda futuristic
103-
**Palette:** powdered lilac, black plum, electric violet, cool periwinkle, mint
102+
**Vibe:** minimal, cool, elegant
103+
**Palette:** deep violet, cool blue-gray, soft plum, crisp white, midnight black
104104

105-
- Light mode stays soft and airy without drifting into candy pink
106-
- Dark mode goes all the way to black with vivid violet focus accents
107-
- Primary surfaces feel syrupy purple instead of rosy or baby-blue
108-
- Sidebars and panels read cleaner and more premium with frosted lilac neutrals
109-
- Playful, but less twee and more intentional than the old Cotton Candy direction
105+
- Light mode stays bright, restrained, and editorial
106+
- Dark mode leans into near-black surfaces with vivid violet accents
107+
- Primary surfaces feel sharp instead of sugary
108+
- Sidebars and panels stay crisp with low-noise contrast
109+
- Better fit for a premium dashboard without losing personality
110110

111111
---
112112

@@ -153,7 +153,7 @@ If narrowing to a stronger first shortlist, these feel the most distinctive:
153153
### Playful / expressive
154154

155155
- Candy Reactor
156-
- Purple Stuff
156+
- Deep Purple
157157
- Velvet Casino
158158

159159
### Atmospheric / weird

0 commit comments

Comments
 (0)