/** * Design-Tokens — Saargastronomie * * Herkunft: Claude-Design-Projekt "Saar Gastronomie UI Mockups", * Datei "Saargastronomie Redesign.dc.html". Näheres in design/README.md. * Die Werte sind unverändert aus dem Entwurf übernommen. * * Wird im Frontend als erste Stilvorlage geladen, vor style.css. Die * Reihenfolge steht in includes/header.php. * * Ein Unterschied zum Entwurf: dort hängen die Tokens an einem Container * (.sg[data-theme="dark"]), weil auf der Zeichenfläche mehrere Screens * nebeneinander liegen und jeder seinen eigenen Modus zeigen soll. Hier * hängen sie an :root, und Dunkel gilt zusätzlich von selbst bei * prefers-color-scheme: dark — solange der Besucher nichts anderes wählt. * * Schalter am -Element: * data-theme="light" | "dark" ausdrückliche Wahl, schlägt die Systemvorgabe * data-hc="on" hoher Kontrast * data-fs="l" | "xl" größere Schrift; alle Textgrößen skalieren mit */ /* ------------------------------------------------------------------ * * Hell (Grundlage) * ------------------------------------------------------------------ */ :root { /* Muss dem wirklich geltenden Modus folgen und darf nicht beide ankuendigen. Sonst zeichnet der Browser die Dinge, die er selbst malt — das aufgeklappte select, Bildlaufleisten, Datumsfelder — nach der Einstellung des Betriebssystems, waehrend die Seite dem Schalter folgt. Ergebnis war dunkle Schrift auf dunklem Grund im Auswahlmenue, sobald jemand im dunklen System auf Hell stellte. */ color-scheme: light; /* Skalierungsfaktor für sämtliche Textgrößen */ --fs: 1; /* Gründe */ --bg: #F5F1EA; --bg-2: #EDE7DD; --surface: #FFFFFF; --surface-2: #FAF7F2; /* Schrift */ --ink: #1B1917; --ink-2: #57514A; --ink-3: #7D766D; /* Linien */ --line: rgba(27, 25, 23, .13); --line-2: rgba(27, 25, 23, .07); /* Akzent (Kupfer) */ --accent: #9C3F1C; --accent-hover: #7E3113; --accent-soft: #F4E6DE; --accent-ink: #FFFFFF; /* Zweitfarbe (Olive), für Kacheln und Karten-Marker */ --olive: #3F4A35; /* Fokusring — bewusst blau, damit er sich vom Kupfer abhebt */ --focus: #1B5FD9; --shadow: 0 1px 2px rgba(27, 25, 23, .05), 0 8px 28px -12px rgba(27, 25, 23, .16); /* Schriftfamilien */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; /* Typo-Stufen. Jede hängt an --fs, damit die Schriftgrößen-Umschaltung den ganzen Auftritt mitnimmt und nicht nur den Fließtext. */ --t-display: calc(3.5rem * var(--fs)); --t-h1: calc(2.5rem * var(--fs)); --t-h2: calc(1.6rem * var(--fs)); --t-h3: calc(1.18rem * var(--fs)); --t-body: calc(1rem * var(--fs)); --t-sm: calc(.875rem * var(--fs)); --t-xs: calc(.78rem * var(--fs)); --t-num: calc(2.1rem * var(--fs)); /* Radien, wie im Entwurf verwendet */ --radius-xs: 7px; --radius-sm: 9px; --radius: 11px; --radius-lg: 14px; --radius-xl: 16px; --radius-pill: 999px; /* Kleinste Trefferfläche für Bedienelemente */ --tap: 44px; } /* ------------------------------------------------------------------ * * Dunkel * * Zweimal aufgeführt: einmal als Systemvorgabe (greift nur, solange * niemand ausdrücklich "hell" gewählt hat), einmal als ausdrückliche Wahl. * ------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #141311; --bg-2: #1B1A17; --surface: #1F1E1A; --surface-2: #262420; --ink: #F4F1EA; --ink-2: #B8B1A6; --ink-3: #928B80; --line: rgba(244, 241, 234, .15); --line-2: rgba(244, 241, 234, .08); --accent: #EE9468; --accent-hover: #F6B08C; --accent-soft: #332821; --accent-ink: #1B1917; --olive: #A9BE97; --focus: #8CB4FF; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #141311; --bg-2: #1B1A17; --surface: #1F1E1A; --surface-2: #262420; --ink: #F4F1EA; --ink-2: #B8B1A6; --ink-3: #928B80; --line: rgba(244, 241, 234, .15); --line-2: rgba(244, 241, 234, .08); --accent: #EE9468; --accent-hover: #F6B08C; --accent-soft: #332821; --accent-ink: #1B1917; --olive: #A9BE97; --focus: #8CB4FF; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6); } /* ------------------------------------------------------------------ * * Hoher Kontrast * * Setzt bewusst auch die Gründe neu und erbt sie nicht: im ersten * Entwurf stand sonst heller Text auf hellen Flächen. * ------------------------------------------------------------------ */ :root[data-hc="on"] { --ink: #000; --ink-2: #1B1917; --ink-3: #2E2A26; --line: rgba(0, 0, 0, .55); --line-2: rgba(0, 0, 0, .3); --accent: #7A2E11; --accent-hover: #5C2109; --surface: #fff; --bg: #F2EFE9; } :root[data-theme="dark"][data-hc="on"] { --ink: #fff; --ink-2: #F0ECE4; --ink-3: #D8D2C8; --line: rgba(255, 255, 255, .62); --line-2: rgba(255, 255, 255, .34); --accent: #FFB187; --accent-hover: #FFC9AB; --accent-soft: #2E2017; --bg: #000; --bg-2: #141312; --surface: #0D0D0C; --surface-2: #1A1917; --olive: #BBD1A6; --focus: #A8C8FF; } @media (prefers-color-scheme: dark) { :root[data-hc="on"]:not([data-theme="light"]) { --ink: #fff; --ink-2: #F0ECE4; --ink-3: #D8D2C8; --line: rgba(255, 255, 255, .62); --line-2: rgba(255, 255, 255, .34); --accent: #FFB187; --accent-hover: #FFC9AB; --accent-soft: #2E2017; --bg: #000; --bg-2: #141312; --surface: #0D0D0C; --surface-2: #1A1917; --olive: #BBD1A6; --focus: #A8C8FF; } } /* Wer im Betriebssystem mehr Kontrast eingestellt hat, bekommt ihn auch ohne den Schalter zu finden. Über den Schalter bleibt er abwählbar. */ @media (prefers-contrast: more) { :root:not([data-hc="off"]) { --line: rgba(27, 25, 23, .55); --line-2: rgba(27, 25, 23, .3); --ink-2: #1B1917; --ink-3: #2E2A26; } } /* ------------------------------------------------------------------ * * Schriftgrößen * ------------------------------------------------------------------ */ :root[data-fs="l"] { --fs: 1.13; } :root[data-fs="xl"] { --fs: 1.28; } /* ------------------------------------------------------------------ * * Kleine Geräte * * Im Entwurf trägt die Mobilansicht die Klasse .mob, weil Desktop und * Mobil dort nebeneinander liegen. In der Umsetzung entscheidet die * Breite. --fs bleibt unberührt, die Umschaltung wirkt also weiter. * ------------------------------------------------------------------ */ @media (max-width: 640px) { :root { --t-display: calc(2.05rem * var(--fs)); --t-h1: calc(1.6rem * var(--fs)); --t-h2: calc(1.3rem * var(--fs)); --t-h3: calc(1.02rem * var(--fs)); --t-body: calc(.94rem * var(--fs)); --t-num: calc(1.5rem * var(--fs)); } } /* ------------------------------------------------------------------ * * Zwei Regeln, die zum Token-Satz gehören * ------------------------------------------------------------------ */ /* Der Fokusring ist Teil des Entwurfs, nicht Beiwerk des Browsers. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. Steht im Entwurf und gehört zum Fundament, nicht zu einem Baustein. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Platzhalterflaeche aus dem Entwurf. Dort steht sie fuer "hier kommt ein Foto hin", weil die Zeichenflaeche keine echten Bilder hatte. Eintraege ohne Foto bekommen nicht diese Flaeche, sondern die Buchstabenkachel aus bausteine.css — so zeigt es der Entwurf in den Ergebniszeilen. */ .ph { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, var(--surface)) 0%, color-mix(in oklab, var(--olive) 14%, var(--surface)) 100%); display: flex; align-items: flex-end; justify-content: flex-start; }