Retro Arcade theme

This commit is contained in:
Auto
2026-01-26 18:45:58 +02:00
parent c402736b92
commit 9aae6769c9
4 changed files with 134 additions and 6 deletions

View File

@@ -357,6 +357,122 @@
--color-status-done: oklch(0.4500 0.1500 130);
}
/* ============================================================================
Theme: Retro Arcade
Vibrant pink and teal with pixel-art inspired styling
============================================================================ */
.theme-retro-arcade {
--radius: 0.25rem;
--background: oklch(0.9735 0.0261 90.0953);
--foreground: oklch(0.3092 0.0518 219.6516);
--card: oklch(0.9306 0.0260 92.4020);
--card-foreground: oklch(0.3092 0.0518 219.6516);
--popover: oklch(0.9306 0.0260 92.4020);
--popover-foreground: oklch(0.3092 0.0518 219.6516);
--primary: oklch(0.5924 0.2025 355.8943);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.6437 0.1019 187.3840);
--secondary-foreground: oklch(1.0000 0 0);
--muted: oklch(0.6979 0.0159 196.7940);
--muted-foreground: oklch(0.3092 0.0518 219.6516);
--accent: oklch(0.5808 0.1732 39.5003);
--accent-foreground: oklch(1.0000 0 0);
--destructive: oklch(0.5863 0.2064 27.1172);
--destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.6537 0.0197 205.2618);
--input: oklch(0.6537 0.0197 205.2618);
--ring: oklch(0.5924 0.2025 355.8943);
--chart-1: oklch(0.6149 0.1394 244.9273);
--chart-2: oklch(0.6437 0.1019 187.3840);
--chart-3: oklch(0.5924 0.2025 355.8943);
--chart-4: oklch(0.5808 0.1732 39.5003);
--chart-5: oklch(0.5863 0.2064 27.1172);
--sidebar: oklch(0.9735 0.0261 90.0953);
--sidebar-foreground: oklch(0.3092 0.0518 219.6516);
--sidebar-primary: oklch(0.5924 0.2025 355.8943);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.6437 0.1019 187.3840);
--sidebar-accent-foreground: oklch(1.0000 0 0);
--sidebar-border: oklch(0.6537 0.0197 205.2618);
--sidebar-ring: oklch(0.5924 0.2025 355.8943);
/* Shadow variables - retro arcade style */
--shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
--shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
--shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
--shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
/* Log level colors */
--color-log-error: #e8457c;
--color-log-warning: #d98c4f;
--color-log-info: #4eb8a5;
--color-log-debug: #6b8a8f;
--color-log-success: #6bbd6b;
/* Status colors for Kanban */
--color-status-pending: oklch(0.9306 0.0260 92.4020);
--color-status-progress: oklch(0.6437 0.1019 187.3840);
--color-status-done: oklch(0.5924 0.2025 355.8943);
/* Font stacks - Outfit for Retro Arcade */
--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Space Mono', 'JetBrains Mono', monospace;
}
.theme-retro-arcade.dark {
--background: oklch(0.2673 0.0486 219.8169);
--foreground: oklch(0.6979 0.0159 196.7940);
--card: oklch(0.3092 0.0518 219.6516);
--card-foreground: oklch(0.6979 0.0159 196.7940);
--popover: oklch(0.3092 0.0518 219.6516);
--popover-foreground: oklch(0.6979 0.0159 196.7940);
--primary: oklch(0.5924 0.2025 355.8943);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.6437 0.1019 187.3840);
--secondary-foreground: oklch(1.0000 0 0);
--muted: oklch(0.5230 0.0283 219.1365);
--muted-foreground: oklch(0.6979 0.0159 196.7940);
--accent: oklch(0.5808 0.1732 39.5003);
--accent-foreground: oklch(1.0000 0 0);
--destructive: oklch(0.5863 0.2064 27.1172);
--destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.5230 0.0283 219.1365);
--input: oklch(0.5230 0.0283 219.1365);
--ring: oklch(0.5924 0.2025 355.8943);
--chart-1: oklch(0.6149 0.1394 244.9273);
--chart-2: oklch(0.6437 0.1019 187.3840);
--chart-3: oklch(0.5924 0.2025 355.8943);
--chart-4: oklch(0.5808 0.1732 39.5003);
--chart-5: oklch(0.5863 0.2064 27.1172);
--sidebar: oklch(0.2673 0.0486 219.8169);
--sidebar-foreground: oklch(0.6979 0.0159 196.7940);
--sidebar-primary: oklch(0.5924 0.2025 355.8943);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.6437 0.1019 187.3840);
--sidebar-accent-foreground: oklch(1.0000 0 0);
--sidebar-border: oklch(0.5230 0.0283 219.1365);
--sidebar-ring: oklch(0.5924 0.2025 355.8943);
/* Shadow variables - retro arcade dark mode */
--shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
--shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
--shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
--shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
/* Log level colors for dark mode */
--color-log-error: #f06b99;
--color-log-warning: #e8a870;
--color-log-info: #6ecfbd;
--color-log-debug: #8ba5aa;
--color-log-success: #8bd68b;
/* Status colors for Kanban - dark mode */
--color-status-pending: oklch(0.3092 0.0518 219.6516);
--color-status-progress: oklch(0.5230 0.0800 187);
--color-status-done: oklch(0.5000 0.1500 355);
}
/* ============================================================================
ShadCN Tailwind v4 Theme Integration
============================================================================ */