dschlueter/jamulix-homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Design Variante A: Magenta → Violet (fly.io-Farbpalette)

Browse source 
- Akzent/Ring Dark Mode: hue 330 → 280 (violet)
- Gradient Mesh: Magenta-Töne → Purple/Violet/Cyan
- Glow + Selection: gleiche Verschiebung
- Button default: from-pink→violet → from-violet→cyan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-04-26 02:01:08 +02:00
commit 4cbb2988fe
2 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/globals.css
View file

@ -41,13 +41,13 @@
--secondary-foreground: oklch(0.90 0.01 100); --secondary-foreground: oklch(0.90 0.01 100);
--muted: oklch(0.18 0.02 260); --muted: oklch(0.18 0.02 260);
--muted-foreground: oklch(0.65 0.01 100); --muted-foreground: oklch(0.65 0.01 100);
--accent: oklch(0.72 0.18 330); --accent: oklch(0.65 0.22 280);
--accent-foreground: oklch(0.98 0.01 100); --accent-foreground: oklch(0.98 0.01 100);
--destructive: oklch(0.396 0.141 25.723); --destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.95 0.01 100); --destructive-foreground: oklch(0.95 0.01 100);
--border: oklch(0.28 0.02 260); --border: oklch(0.28 0.02 260);
--input: oklch(0.20 0.02 260); --input: oklch(0.20 0.02 260);
--ring: oklch(0.72 0.18 330); --ring: oklch(0.65 0.22 280);
} }
@theme inline { @theme inline {
@ -107,15 +107,15 @@
/* Fly.io-style gradient backgrounds */ /* Fly.io-style gradient backgrounds */
.bg-gradient-mesh { .bg-gradient-mesh {
background: background:
radial-gradient(at 0% 0%, oklch(0.4 0.2 320 / 0.15) 0px, transparent 50%), radial-gradient(at 0% 0%, oklch(0.4 0.22 280 / 0.18) 0px, transparent 50%),
radial-gradient(at 100% 0%, oklch(0.5 0.2 260 / 0.15) 0px, transparent 50%), radial-gradient(at 100% 0%, oklch(0.5 0.20 220 / 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, oklch(0.4 0.15 180 / 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, oklch(0.4 0.15 190 / 0.15) 0px, transparent 50%),
radial-gradient(at 0% 100%, oklch(0.5 0.2 320 / 0.15) 0px, transparent 50%); radial-gradient(at 0% 100%, oklch(0.5 0.22 280 / 0.15) 0px, transparent 50%);
} }
/* Subtle glow effects */ /* Subtle glow effects */
.glow-accent { .glow-accent {
box-shadow: 0 0 40px oklch(0.70 0.18 320 / 0.3); box-shadow: 0 0 40px oklch(0.70 0.22 280 / 0.3);
} }
.glow-cyan { .glow-cyan {
@ -124,9 +124,9 @@
/* Selection colors */ /* Selection colors */
::selection { ::selection {
background: oklch(0.70 0.18 320 / 0.4); background: oklch(0.70 0.22 280 / 0.4);
} }
.dark ::selection { .dark ::selection {
background: oklch(0.70 0.18 320 / 0.5); background: oklch(0.70 0.22 280 / 0.5);
} }

2
components/ui/button.tsx
View file

@ -9,7 +9,7 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-gradient-to-r from-pink-500 to-violet-500 text-white hover:from-pink-600 hover:to-violet-600 shadow-lg shadow-pink-500/25', default: 'bg-gradient-to-r from-violet-500 to-cyan-400 text-white hover:from-violet-600 hover:to-cyan-500 shadow-lg shadow-violet-500/25',
destructive: destructive:
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline: outline: