feat(ui): vierte Farbwelt "Cyberpunk" in hell und dunkel
Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes Leuchten, Blaustahl statt Neutralgrau und Kanten von 2 px - scharf genug fuer HUD-Elemente, aber nicht eckig, das ist schon Pixel Art. Schatten sind hier kein Schatten, sondern ein Schein: farbige Kontur plus weicher Halo in der Markenfarbe. Schrift ist Chakra Petch, die Feldbeschriftungen laufen gesperrt. Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu lesen. Cyan sitzt deshalb nur in --color-brand-accent und in den Statusfarben, wo dunkler Text darauf steht. Der helle Modus ist der Konzern bei Tageslicht: kuehles Blaugrau, dasselbe Violett nur dunkler, und aus dem Leuchten wird ein knapper kalter Schatten - ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon. Es waren vier Zeilen ausserhalb von index.css: die Whitelist in userFields.js, die Liste in src/types.ts mit ihrer Beschriftung, die Whitelist im Inline-Skript und die Schrift im Google-Fonts-Aufruf. Keine Komponente wurde angefasst. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
co-authored by
Claude Opus 5
Claude Opus 5
parent
87759a8a24
commit
8403f1c39d
+145
-7
@@ -10,9 +10,9 @@
|
||||
*/
|
||||
|
||||
/*
|
||||
* Drei Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor); ohne Klasse gilt perinco. Der Modus
|
||||
* bleibt die vorhandene Klasse "dark".
|
||||
* Vier Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor, theme-cyberpunk); ohne Klasse gilt
|
||||
* perinco. Der Modus bleibt die vorhandene Klasse "dark".
|
||||
*
|
||||
* Warum das ohne Aenderung an den Komponenten geht: im Markup steht nirgends
|
||||
* eine feste Farbe, sondern durchgaengig ink-*, brand-*, canvas und surface -
|
||||
@@ -36,10 +36,10 @@
|
||||
--font-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/*
|
||||
* Zweite Schrift fuer Ueberschriften und Feldbeschriftungen. Bei perinco und
|
||||
* Outdoor ist sie mit der Grundschrift identisch, nur "Pixel Art" setzt hier
|
||||
* eine Pixelschrift ein - ohne dass ein Theme dafuer eigene Selektoren
|
||||
* braucht.
|
||||
* Zweite Schrift fuer Ueberschriften und Feldbeschriftungen. Meist ist sie mit
|
||||
* der Grundschrift identisch; nur "Pixel Art" setzt hier eine andere ein - die
|
||||
* Pixelschrift bleibt damit aus dem Fliesstext heraus, ohne dass es dafuer
|
||||
* eigene Selektoren braucht.
|
||||
*/
|
||||
--font-display: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
@@ -358,6 +358,127 @@ html.theme-pixel.dark {
|
||||
--font-display: 'Silkscreen', 'Courier New', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* ===========================================================================
|
||||
* Cyberpunk
|
||||
*
|
||||
* Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes
|
||||
* Leuchten, Kanten so scharf, dass die Karten wie HUD-Elemente wirken (2 px
|
||||
* statt 12 px Radius - nicht ganz eckig, das ist schon Pixel Art).
|
||||
*
|
||||
* Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und
|
||||
* brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu lesen.
|
||||
* Cyan sitzt deshalb nur in --color-brand-accent und in den Statusfarben, wo
|
||||
* dunkler Text drauf steht.
|
||||
*
|
||||
* Schatten sind hier kein Schatten, sondern ein Schein: eine farbige Kontur
|
||||
* plus weicher Halo in der Markenfarbe.
|
||||
* =========================================================================== */
|
||||
html.theme-cyberpunk.dark {
|
||||
--color-canvas: #07080f;
|
||||
--color-surface: #0f1120;
|
||||
|
||||
--color-brand-50: #1a0e2e;
|
||||
--color-brand-100: #24123f;
|
||||
--color-brand-200: #4a1f7a;
|
||||
--color-brand-300: #5f27a0;
|
||||
--color-brand-400: #7a30cc;
|
||||
--color-brand-500: #8b31f0;
|
||||
--color-brand-600: #a24cff;
|
||||
--color-brand-700: #c79bff;
|
||||
--color-brand-800: #ddc4ff;
|
||||
--color-brand-900: #efe3ff;
|
||||
--color-brand-accent: #00e5ff;
|
||||
|
||||
/* Blaustahl statt Neutralgrau - Grau waere hier zu brav. */
|
||||
--color-ink-50: #141728;
|
||||
--color-ink-100: #1c2135;
|
||||
--color-ink-200: #2b4560;
|
||||
--color-ink-300: #6b7899;
|
||||
--color-ink-400: #8e9bbd;
|
||||
--color-ink-500: #a9b5d4;
|
||||
--color-ink-600: #c1cbe4;
|
||||
--color-ink-700: #d6ddf0;
|
||||
--color-ink-800: #e9eefa;
|
||||
--color-ink-900: #f7f9ff;
|
||||
--color-ink-950: #000000;
|
||||
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.125rem;
|
||||
--radius-lg: 0.1875rem;
|
||||
--radius-xl: 0.25rem;
|
||||
--radius-2xl: 0.375rem;
|
||||
|
||||
--shadow-card: 0 0 0 1px rgb(139 49 240 / 0.16), 0 0 22px rgb(139 49 240 / 0.2);
|
||||
--shadow-lift: 0 0 0 1px rgb(139 49 240 / 0.3), 0 0 40px rgb(139 49 240 / 0.35);
|
||||
|
||||
--font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* Die getoenten Pillen aus .dark ins Neon gezogen. */
|
||||
--color-sky-50: #04202e;
|
||||
--color-sky-200: #0b4a63;
|
||||
--color-sky-700: #22d3ee;
|
||||
|
||||
--color-amber-50: #2b1f04;
|
||||
--color-amber-200: #57400a;
|
||||
--color-amber-700: #ffcc4d;
|
||||
|
||||
--color-violet-50: #1d1140;
|
||||
--color-violet-200: #382068;
|
||||
--color-violet-700: #d0a2ff;
|
||||
|
||||
--color-red-50: #2c0e1c;
|
||||
--color-red-200: #5c1c34;
|
||||
--color-red-700: #ff6b8a;
|
||||
}
|
||||
|
||||
/*
|
||||
* Cyberpunk, hell: Konzern bei Tageslicht. Kuehles Blaugrau statt warmem
|
||||
* Weiss, dasselbe Violett - nur dunkler, damit weisse Schrift darauf haelt.
|
||||
* Die scharfen Kanten bleiben, das Leuchten wird zu einem knappen kalten
|
||||
* Schatten: ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.
|
||||
*/
|
||||
html.theme-cyberpunk:not(.dark) {
|
||||
--color-canvas: #eceff7;
|
||||
--color-surface: #ffffff;
|
||||
|
||||
--color-brand-50: #f3ecff;
|
||||
--color-brand-100: #e6d9ff;
|
||||
--color-brand-200: #c9adff;
|
||||
--color-brand-300: #a97bff;
|
||||
--color-brand-400: #8d4df0;
|
||||
--color-brand-500: #7326d6;
|
||||
--color-brand-600: #5d1cb0;
|
||||
--color-brand-700: #4a1590;
|
||||
--color-brand-800: #380f6e;
|
||||
--color-brand-900: #290a52;
|
||||
--color-brand-accent: #7326d6;
|
||||
|
||||
--color-ink-50: #f2f4fb;
|
||||
--color-ink-100: #e4e8f4;
|
||||
--color-ink-200: #c3cbe0;
|
||||
--color-ink-300: #98a2bd;
|
||||
--color-ink-400: #5d6786;
|
||||
--color-ink-500: #4a5473;
|
||||
--color-ink-600: #3a4260;
|
||||
--color-ink-700: #2c334d;
|
||||
--color-ink-800: #1e2438;
|
||||
--color-ink-900: #121728;
|
||||
--color-ink-950: #0a0d18;
|
||||
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.125rem;
|
||||
--radius-lg: 0.1875rem;
|
||||
--radius-xl: 0.25rem;
|
||||
--radius-2xl: 0.375rem;
|
||||
|
||||
--shadow-card: 0 1px 2px rgb(18 23 40 / 0.06), 0 6px 18px rgb(115 38 214 / 0.1);
|
||||
--shadow-lift: 0 12px 30px rgb(115 38 214 / 0.18);
|
||||
|
||||
--font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@@ -414,6 +535,23 @@ html.theme-pixel.dark {
|
||||
font-smooth: never;
|
||||
}
|
||||
|
||||
/*
|
||||
* Cyberpunk laesst die Ueberschriften atmen: die negative Laufweite zieht
|
||||
* Chakra Petch unangenehm zusammen, gesperrt liest es sich nach Anzeigetafel.
|
||||
*/
|
||||
html.theme-cyberpunk h1,
|
||||
html.theme-cyberpunk h2,
|
||||
html.theme-cyberpunk h3,
|
||||
html.theme-cyberpunk h4,
|
||||
html.theme-cyberpunk h5,
|
||||
html.theme-cyberpunk h6 {
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
html.theme-cyberpunk .field-label {
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* Fokus-Ring durchgaengig in CI-Gruen */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-brand-500);
|
||||
|
||||
+5
-1
@@ -88,7 +88,7 @@ export type Role = 'admin' | 'user';
|
||||
* Tippfehler hier nicht still zum Standarddesign fuehrt.
|
||||
* server/test/userFields.test.mjs prueft, dass beide Listen gleich bleiben.
|
||||
*/
|
||||
export const THEME_PALETTES = ['perinco', 'pixel', 'outdoor'] as const;
|
||||
export const THEME_PALETTES = ['perinco', 'pixel', 'outdoor', 'cyberpunk'] as const;
|
||||
|
||||
export type ThemePalette = (typeof THEME_PALETTES)[number];
|
||||
|
||||
@@ -97,6 +97,10 @@ export const THEME_PALETTE_LABELS: Record<ThemePalette, { name: string; hint: st
|
||||
perinco: { name: 'perinco', hint: 'Das Design des Hauses - Blattgrün auf neutralem Grau' },
|
||||
pixel: { name: 'Pixel Art', hint: '8-bit: eckige Kanten, harte Schatten, Pixelschrift' },
|
||||
outdoor: { name: 'Outdoor', hint: 'Wanderkarte: Sandpapier, Bergsee-Türkis, weiche Ecken' },
|
||||
cyberpunk: {
|
||||
name: 'Cyberpunk',
|
||||
hint: 'Neon in der Nacht: scharfe Kanten, violettes Leuchten, Chakra Petch',
|
||||
},
|
||||
};
|
||||
|
||||
export interface AppUser {
|
||||
|
||||
Reference in New Issue
Block a user