/* ========================================================================== A2 Lumina — Design Tokens Profil v3.0: das Geist-Designsystem von Vercel, Wert für Wert. ──────────────────────────────────────────────────────────────────────────── WOHER DIE WERTE KOMMEN Die Rampen, Schatten, Maße und Schriftgrade in dieser Datei sind nicht nachempfunden, sondern die tatsächlichen Werte des Geist-Designsystems, ausgelesen aus den Custom Properties von vercel.com/design in beiden Schemata. Sie stehen in derselben Schreibweise wie dort (`hsla`), damit ein Abgleich Zeile für Zeile möglich bleibt und keine Umrechnung eine stille Abweichung einführt. Zwei Ebenen, klar getrennt: --ds-* Das Geist-System. Neun Rampen zu je zehn Stufen, zwei Flächenwerte, Schatten, Fokus, Maße. Diese Ebene ist eine Kopie und wird nicht „verbessert". --a2-* Die semantische Schicht von A2 Lumina. Sie benennt Rollen (Fläche, Rand, Text, Fokus, Gefahr) und verweist auf --ds-*. Bauteile referenzieren ausschließlich diese Ebene. Damit ist ein Wertewechsel bei Vercel eine Änderung an einer Stelle, und die Marke behält trotzdem ihre eigene Sprache. ──────────────────────────────────────────────────────────────────────────── DIE STUFEN EINER RAMPE (Geist-Konvention) 100 – 300 Flächen von Bauteilen (ruhend, überfahren, gedrückt) 400 – 600 Ränder (ruhend, überfahren, gedrückt) 700 – 800 kräftige Flächen (gefüllte Zeichen, Signale) 900 – 1000 Schrift und Zeichen (900 sekundär, 1000 primär) Eine Stufe wird nie „weil es hübscher aussieht" quer benutzt: Wer eine Randfarbe braucht, nimmt 400, und wer Text auf Hell braucht, nimmt 900 oder 1000. Das ist der Grund, warum die Rampen in beiden Schemata funktionieren, ohne dass irgendwo eine Ausnahme steht. ──────────────────────────────────────────────────────────────────────────── SCHRIFT Geist Sans die gesamte Oberfläche Geist Mono Code, Kennungen, Zahlen, Zeiten, Befehle A2 Lumina ausschließlich Eigennamen und Wortmarken (.a2-brand-name) Die Hausschrift ist ein Markensignal, keine Textschrift. Sie setzt Namen, nie Absätze, nie Bedienelemente, nie Überschriften aus Fließtext. ========================================================================== */ :root { /* ======================================================================= GEIST — FARBRAMPEN, HELLES SCHEMA ======================================================================= */ --ds-gray-100: hsla(0, 0%, 95%, 1); --ds-gray-200: hsla(0, 0%, 92%, 1); --ds-gray-300: hsla(0, 0%, 90%, 1); --ds-gray-400: hsla(0, 0%, 92%, 1); --ds-gray-500: hsla(0, 0%, 79%, 1); --ds-gray-600: hsla(0, 0%, 66%, 1); --ds-gray-700: hsla(0, 0%, 56%, 1); --ds-gray-800: hsla(0, 0%, 49%, 1); --ds-gray-900: hsla(0, 0%, 30%, 1); --ds-gray-1000: hsla(0, 0%, 9%, 1); /* Durchscheinendes Grau. Für Ränder und Schwebezustände über einer Fläche, deren Farbe man nicht kennt — ein deckendes Grau würde dort einen Fleck hinterlassen. */ --ds-gray-alpha-100: rgba(0, 0, 0, 0.05); --ds-gray-alpha-200: rgba(0, 0, 0, 0.08); --ds-gray-alpha-300: rgba(0, 0, 0, 0.10); --ds-gray-alpha-400: rgba(0, 0, 0, 0.08); --ds-gray-alpha-500: rgba(0, 0, 0, 0.21); --ds-gray-alpha-600: rgba(0, 0, 0, 0.34); --ds-gray-alpha-700: rgba(0, 0, 0, 0.44); --ds-gray-alpha-800: rgba(0, 0, 0, 0.51); --ds-gray-alpha-900: rgba(0, 0, 0, 0.70); --ds-gray-alpha-1000: rgba(0, 0, 0, 0.91); --ds-blue-100: hsla(212, 100%, 97%, 1); --ds-blue-200: hsla(210, 100%, 96%, 1); --ds-blue-300: hsla(210, 100%, 94%, 1); --ds-blue-400: hsla(209, 100%, 90%, 1); --ds-blue-500: hsla(209, 100%, 80%, 1); --ds-blue-600: hsla(208, 100%, 66%, 1); --ds-blue-700: hsla(212, 100%, 48%, 1); --ds-blue-800: hsla(212, 100%, 41%, 1); --ds-blue-900: hsla(211, 100%, 42%, 1); --ds-blue-1000: hsla(211, 100%, 15%, 1); --ds-red-100: hsla( 0, 100%, 97%, 1); --ds-red-200: hsla( 0, 100%, 96%, 1); --ds-red-300: hsla( 0, 100%, 95%, 1); --ds-red-400: hsla( 0, 90%, 92%, 1); --ds-red-500: hsla( 0, 82%, 85%, 1); --ds-red-600: hsla(359, 90%, 71%, 1); --ds-red-700: hsla(358, 75%, 59%, 1); --ds-red-800: hsla(358, 70%, 52%, 1); --ds-red-900: hsla(358, 66%, 48%, 1); --ds-red-1000: hsla(355, 49%, 15%, 1); --ds-amber-100: hsla(39, 100%, 95%, 1); --ds-amber-200: hsla(44, 100%, 92%, 1); --ds-amber-300: hsla(43, 96%, 90%, 1); --ds-amber-400: hsla(42, 100%, 78%, 1); --ds-amber-500: hsla(38, 100%, 71%, 1); --ds-amber-600: hsla(36, 90%, 62%, 1); --ds-amber-700: hsla(39, 100%, 57%, 1); --ds-amber-800: hsla(35, 100%, 52%, 1); --ds-amber-900: hsla(30, 100%, 32%, 1); --ds-amber-1000: hsla(20, 79%, 17%, 1); --ds-green-100: hsla(120, 60%, 96%, 1); --ds-green-200: hsla(120, 60%, 95%, 1); --ds-green-300: hsla(120, 60%, 91%, 1); --ds-green-400: hsla(122, 60%, 86%, 1); --ds-green-500: hsla(124, 60%, 75%, 1); --ds-green-600: hsla(125, 60%, 64%, 1); --ds-green-700: hsla(131, 41%, 46%, 1); --ds-green-800: hsla(132, 43%, 39%, 1); --ds-green-900: hsla(133, 50%, 32%, 1); --ds-green-1000: hsla(128, 29%, 15%, 1); --ds-teal-100: hsla(169, 70%, 96%, 1); --ds-teal-200: hsla(167, 70%, 94%, 1); --ds-teal-300: hsla(168, 70%, 90%, 1); --ds-teal-400: hsla(170, 70%, 85%, 1); --ds-teal-500: hsla(170, 70%, 72%, 1); --ds-teal-600: hsla(170, 70%, 57%, 1); --ds-teal-700: hsla(173, 80%, 36%, 1); --ds-teal-800: hsla(173, 83%, 30%, 1); --ds-teal-900: hsla(174, 91%, 25%, 1); --ds-teal-1000: hsla(171, 80%, 13%, 1); --ds-purple-100: hsla(276, 100%, 97%, 1); --ds-purple-200: hsla(277, 87%, 97%, 1); --ds-purple-300: hsla(274, 78%, 95%, 1); --ds-purple-400: hsla(276, 71%, 92%, 1); --ds-purple-500: hsla(274, 70%, 82%, 1); --ds-purple-600: hsla(273, 72%, 73%, 1); --ds-purple-700: hsla(272, 51%, 54%, 1); --ds-purple-800: hsla(272, 47%, 45%, 1); --ds-purple-900: hsla(274, 71%, 43%, 1); --ds-purple-1000: hsla(276, 100%, 15%, 1); --ds-pink-100: hsla(330, 100%, 96%, 1); --ds-pink-200: hsla(340, 90%, 96%, 1); --ds-pink-300: hsla(340, 82%, 94%, 1); --ds-pink-400: hsla(341, 76%, 91%, 1); --ds-pink-500: hsla(340, 75%, 84%, 1); --ds-pink-600: hsla(341, 75%, 73%, 1); --ds-pink-700: hsla(336, 80%, 58%, 1); --ds-pink-800: hsla(336, 74%, 51%, 1); --ds-pink-900: hsla(336, 65%, 45%, 1); --ds-pink-1000: hsla(333, 74%, 15%, 1); /* Die zwei Flächen. 200 ist die Seite, 100 ist alles, was darauf liegt. Im dunklen Schema drehen sie sich um: Dort ist die Seite Schwarz und die Karte das hellere Grau. Genau deshalb sind es keine Grautöne aus der Rampe, sondern eigene Werte. */ --ds-background-100: hsla(0, 0%, 100%, 1); --ds-background-200: hsla(0, 0%, 98%, 1); --ds-foreground: var(--ds-gray-1000); --ds-focus-color: var(--ds-blue-700); /* ======================================================================= GEIST — SCHATTEN, HELLES SCHEMA Geist trennt Umriss und Wurf: `border` ist ein 1px-Ring aus durchscheinendem Grau, die Staffel small/medium/large legt Streuung darüber. Ein Bauteil nimmt eines von beiden — beides ergibt einen doppelten Rand. ======================================================================= */ --ds-shadow-border: 0 0 0 1px var(--ds-gray-alpha-400); --ds-shadow-small: 0 2px 2px rgba(0, 0, 0, 0.04); --ds-shadow-medium: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 8px -8px rgba(0, 0, 0, 0.04); --ds-shadow-large: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.04); --ds-shadow-tooltip: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04); --ds-shadow-menu: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06); --ds-shadow-modal: 0 1px 1px rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 24px 32px -8px rgba(0, 0, 0, 0.06); /* ======================================================================= GEIST — MASSE, DIE VOM SCHEMA UNABHÄNGIG SIND ======================================================================= */ /* Höhe von Bedienelementen. Drei Werte, mehr gibt es nicht. */ --ds-size-small: 32px; --ds-size-medium: 36px; --ds-size-large: 40px; /* Der Radius von Geist. Sechs Pixel — an Knöpfen, Feldern, Menüzeilen. Größere Flächen (Karten, Tafeln, Dialoge) laufen auf 8 bis 12. */ --ds-radius: 6px; --ds-page-width: 1400px; --ds-page-margin: 24px; /* Menü- und Popover-Maße. Stehen bei Geist ausdrücklich als Tokens da, weil jede Zeile in jedem Menü gleich hoch sein soll. */ --ds-popover-padding: 6px; --ds-popover-row-height: 36px; --ds-popover-row-radius: 6px; --ds-z-drawer: 200; --ds-z-modal: 300; --ds-z-menu: 2001; --ds-z-toast: 5000; --ds-z-tooltip: 99999; /* ====================================================================== A2 LUMINA — SEMANTISCHE SCHICHT Ab hier spricht die Marke. Bauteile lesen nur noch diese Namen. ====================================================================== */ /* ── Flächen ─────────────────────────────────────────────────────────── */ --a2-bg: var(--ds-background-100); /* worauf Bauteile sitzen */ --a2-bg-page: var(--ds-background-200); /* die Seite selbst */ --a2-bg-raised: var(--ds-background-100); /* Karte, Menü, Dialog */ --a2-bg-subtle: var(--ds-gray-100); /* leise Füllung: Code, Marke, Fuß */ --a2-group: var(--ds-gray-100); /* ── Ränder ──────────────────────────────────────────────────────────── */ /* Ein Rand ist bei Geist durchscheinendes Grau, kein Grauton: So bleibt er über Weiß, über der Seitenfläche und über einer eingefärbten Fläche gleich leise. */ --a2-border: var(--ds-gray-alpha-400); --a2-border-strong: var(--ds-gray-alpha-500); --a2-border-width: 1px; /* ── Schrift ───────────────────────────────────────────────────────────── Geist kennt in der Praxis **zwei** Textfarben: 1000 trägt den Satz, 900 alles Nachgeordnete. 700 und 800 sind keine Textfarben, sondern die Farben von Platzhaltern und gesperrten Feldern — sie kommen auf Weiß nur auf 3,2:1 und reißen damit AA. Das ist keine Kleinigkeit: `--a2-text-muted` steht über die Tailwind-Schicht hinter `text-muted-foreground`, und shadcn wie AI Elements setzen damit sehr viel gut lesbaren Text — Beschreibungen, Zeitangaben, Quellenzeilen. Läge dieser Name auf 700, wäre die halbe Oberfläche unter der Grenze. Deshalb: gedämpft heißt 900, nicht 700. ------------------------------------------------------------------- */ --a2-text: var(--ds-gray-1000); --a2-text-secondary: var(--ds-gray-900); --a2-text-muted: var(--ds-gray-900); /* Platzhalter und Gesperrtes. Nie für Text, den jemand lesen soll. */ --a2-text-placeholder: var(--ds-gray-700); --a2-text-inverse: var(--ds-background-100); /* ── Rollen ──────────────────────────────────────────────────────────── */ --a2-focus: var(--ds-focus-color); --a2-link: var(--ds-blue-700); --a2-link-strong: var(--ds-blue-800); --a2-agent: var(--ds-blue-900); --a2-agent-surface: var(--ds-blue-100); --a2-live: var(--ds-teal-900); --a2-live-surface: var(--ds-teal-100); --a2-success: var(--ds-green-900); --a2-success-surface: var(--ds-green-100); --a2-warning: var(--ds-amber-900); --a2-warning-surface: var(--ds-amber-100); --a2-danger: var(--ds-red-900); --a2-danger-surface: var(--ds-red-100); /* Die primäre Aktion ist Tinte, nicht Blau. Das ist bei Geist so und bei A2 Lumina auch: Blau ist Fokus und Verweis, nicht „hier klicken". */ --a2-action-bg: var(--ds-gray-1000); --a2-action-text: var(--ds-background-100); /* ── Zustände ────────────────────────────────────────────────────────── */ --a2-state-hover: var(--ds-gray-alpha-100); --a2-state-active: var(--ds-gray-alpha-200); --a2-state-selected: var(--ds-blue-100); --a2-opacity-hover: 0.90; --a2-opacity-active: 0.80; --a2-opacity-disabled: 0.40; --a2-overlay: rgba(0, 0, 0, 0.60); --a2-selection-bg: var(--ds-gray-1000); --a2-selection-text: var(--ds-gray-100); /* Der Pfeil des Auswahlfeldes. Als Hintergrundbild und nicht als Maske — Begründung bei `.a2-select` in components.css. Ein Hintergrundbild kann keine Custom Property auflösen, deshalb steht die Farbe ausgeschrieben: gray-700, der gedämpfte Text. */ --a2-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* ── Weiß und Schwarz ──────────────────────────────────────────────── Die beiden Werte, die kein Schema haben. `--a2-white` ist die Schrift auf einer gefüllten Warn- oder Gefahrfläche und bleibt dort weiß, auch nachts — die Fläche darunter wechselt ja nicht mit. Was hier bis Fassung 2 stand, waren die eigenen Rampen der Marke: Ink, Genesis Blue, Violet, Signal Cyan. Sie sind ersatzlos entfallen. Eine zweite Palette neben einer übernommenen ergibt zwei Systeme, von denen eines zurückbleibt; wer eine Farbe braucht, nimmt die Geist-Rampe unter ihrem eigenen Namen. */ --a2-white: #ffffff; --a2-black: #000000; /* ======================================================================= TYPOGRAFIE Die Skala von Geist, unverändert: Größe, Zeilenhöhe, Laufweite und Schnitt sind je Rolle festgelegt und werden nicht einzeln gemischt. heading-* Überschriften. 600, negative Laufweite, eng gesetzt. copy-* mehrzeiliger Text. 400, großzügige Zeilenhöhe. label-* einzeilige Beschriftung neben Zeichen. 400, eng. button-* ausschließlich in Bedienelementen. 500. Die Laufweite der Überschriften folgt der Größe, nicht dem Geschmack: bis 20 px −0,02 em, bei 24 und 32 −0,04 em, ab 40 px −0,06 em. ======================================================================= */ --a2-font-sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --a2-font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", monospace; /* Die Hausschrift. Reine Versalschrift — `text-transform: uppercase` ist Bedingung, nicht Stilmittel. Nur für Eigennamen und Wortmarken. */ --a2-font-display: "A2 Lumina Sans", var(--a2-font-sans); --a2-weight-regular: 400; --a2-weight-medium: 500; --a2-weight-semibold: 600; /* alle Überschriften */ --a2-weight-logotype: 600; /* ── Überschriften ───────────────────────────────────────────────────── */ --a2-heading-72: 4.5rem; --a2-heading-72-lh: 4.5rem; --a2-heading-72-ls: -0.06em; --a2-heading-64: 4rem; --a2-heading-64-lh: 4rem; --a2-heading-64-ls: -0.06em; --a2-heading-56: 3.5rem; --a2-heading-56-lh: 3.5rem; --a2-heading-56-ls: -0.06em; --a2-heading-48: 3rem; --a2-heading-48-lh: 3.5rem; --a2-heading-48-ls: -0.06em; --a2-heading-40: 2.5rem; --a2-heading-40-lh: 3rem; --a2-heading-40-ls: -0.06em; --a2-heading-32: 2rem; --a2-heading-32-lh: 2.5rem; --a2-heading-32-ls: -0.04em; --a2-heading-24: 1.5rem; --a2-heading-24-lh: 2rem; --a2-heading-24-ls: -0.04em; --a2-heading-20: 1.25rem; --a2-heading-20-lh: 1.625rem; --a2-heading-20-ls: -0.02em; --a2-heading-16: 1rem; --a2-heading-16-lh: 1.5rem; --a2-heading-16-ls: -0.02em; --a2-heading-14: 0.875rem; --a2-heading-14-lh: 1.25rem; --a2-heading-14-ls: -0.02em; /* ── Fließtext ───────────────────────────────────────────────────────── */ --a2-copy-24: 1.5rem; --a2-copy-24-lh: 2.25rem; --a2-copy-20: 1.25rem; --a2-copy-20-lh: 1.75rem; --a2-copy-18: 1.125rem; --a2-copy-18-lh: 1.75rem; --a2-copy-16: 1rem; --a2-copy-16-lh: 1.5rem; --a2-copy-14: 0.875rem; --a2-copy-14-lh: 1.25rem; --a2-copy-13: 0.8125rem; --a2-copy-13-lh: 1.125rem; /* ── Beschriftung ────────────────────────────────────────────────────── */ --a2-label-20: 1.25rem; --a2-label-20-lh: 2rem; --a2-label-18: 1.125rem; --a2-label-18-lh: 1.25rem; --a2-label-16: 1rem; --a2-label-16-lh: 1.25rem; --a2-label-14: 0.875rem; --a2-label-14-lh: 1.25rem; --a2-label-13: 0.8125rem; --a2-label-13-lh: 1rem; --a2-label-12: 0.75rem; --a2-label-12-lh: 1rem; /* ── Bedienelemente ──────────────────────────────────────────────────── */ --a2-button-16: 1rem; --a2-button-16-lh: 1.25rem; --a2-button-14: 0.875rem; --a2-button-14-lh: 1.25rem; --a2-button-12: 0.75rem; --a2-button-12-lh: 1rem; /* ── Rollen, wie die Bauteile sie nennen ─────────────────────────────── */ /* Fließende Schaugrößen. Zwischen 375 px und 1440 px wächst die Zeile linear; darüber und darunter steht sie. Nur Schaugrößen skalieren — Lesegrößen bleiben fest, sonst wird die Zeile auf großen Schirmen zu lang und auf kleinen zu eng. */ --a2-size-display: clamp(2.5rem, 6.5vw, 4.5rem); --a2-track-display: -0.06em; --a2-lh-display: 1; --a2-size-h1: clamp(2rem, 4.5vw, 3rem); --a2-track-h1: -0.06em; --a2-lh-h1: 1.1; --a2-size-h2: clamp(1.5rem, 2.6vw, 2rem); --a2-track-h2: -0.04em; --a2-lh-h2: 1.25; --a2-size-h3: var(--a2-heading-24); --a2-track-h3: -0.04em; --a2-lh-h3: 1.333; --a2-size-h4: var(--a2-heading-20); --a2-track-h4: -0.02em; --a2-lh-h4: 1.3; --a2-size-lede: var(--a2-copy-18); --a2-track-lede: 0em; --a2-lh-lede: 1.556; --a2-size-body: var(--a2-copy-14); --a2-track-body: 0em; --a2-lh-body: 1.5715; --a2-size-caption: var(--a2-copy-13); --a2-track-caption: 0em; --a2-lh-caption: 1.3846; --a2-size-mono: 0.8125rem; --a2-lh-mono: 1.3846; --a2-size-label: var(--a2-label-12); --a2-track-label: 0.02em; --a2-size-cta: var(--a2-button-14); --a2-track-cta: 0em; --a2-measure: 66ch; /* ======================================================================= LAYOUT Geist rechnet mit 1400 px Inhaltsbreite und 24 px Seitenrand. Die schmale Spalte ist die Lesespalte. ======================================================================= */ --a2-container: var(--ds-page-width); --a2-container-narrow: 45rem; /* 720px — einspaltiger Lesetext */ --a2-container-prose: 75rem; /* 1200px — Marketing, Editorial */ --a2-gutter: clamp(1rem, 3vw, 1.5rem); --a2-bp-sm: 40rem; /* 640px */ --a2-bp-md: 48rem; /* 768px */ --a2-bp-lg: 64rem; /* 1024px */ --a2-bp-xl: 80rem; /* 1280px */ /* ======================================================================= BEDIENELEMENTE Die drei Höhen von Geist. `--a2-control-h` ist die Vorgabe, wenn ein Bauteil nichts anderes sagt. ======================================================================= */ --a2-control-h: var(--ds-size-large); /* 40px */ --a2-control-h-md: var(--ds-size-medium); /* 36px */ --a2-control-h-sm: var(--ds-size-small); /* 32px */ /* ======================================================================= FOKUS — OHNE RING Ein Fokusring ist in diesem System **nicht erlaubt**: kein Halo, kein Versatz, keine zweite Kontur um das Element herum. Auch nicht der von Geist, auch nicht der des Browsers. Der Grund ist nicht Geschmack. Ein abgesetzter Ring liegt außerhalb des Elements und damit über allem, was daneben steht — in einer dichten Zeile über der Nachbarspalte, in einem Menü über der Trennlinie. Er zwingt jede Anordnung dazu, vier Pixel Luft für einen Zustand zu reservieren, den man in neun von zehn Fällen nicht sieht. Und keine Farbe. Ein blauer Rand am Eingabefeld macht aus dem Fokus ein Ereignis; er zieht die Aufmerksamkeit auf das Feld, statt auf das, was man hineinschreibt. Blau bleibt in diesem System dem Verweis und der Auswahl vorbehalten — der Fokus ist kein Zustand des Inhalts. Was bleibt: Der eigene Rand wird **dunkler**, und darunter liegt ein Hauch Tiefe. Nichts wächst, nichts springt, nichts überlagert den Nachbarn, und es kommt keine Farbe dazu, die vorher nicht da war. Sichtbarkeit ist damit nicht aufgegeben: Der Rand springt von 14 % auf 44 % Deckkraft — auf Weiß von 1,1:1 auf 3,3:1. Das erfüllt die 3:1, die WCAG 2.1 (1.4.11) für die Kennzeichnung von Bedienelementen verlangt, und liegt über dem Überfahren (21 %), damit sich Zeiger und Tastatur nicht verwechseln lassen. Hier stand einmal 70 % (8,4:1). Das war korrekt gerechnet und im Betrieb zu laut: Der Sprung von 14 % auf 70 % ist das Fünffache, und ein Feld, in dem man nur tippt, zog damit mehr Aufmerksamkeit auf sich als der Inhalt der Seite. 44 % ist der niedrigste Wert der Staffel, der die Anforderung noch erfüllt — die Grenze, nicht der Komfortabstand. ======================================================================= */ --a2-focus-border: var(--ds-gray-alpha-700); --a2-focus-shadow: var(--ds-shadow-small); /* ======================================================================= TIEFE Entweder Rand oder Schatten, nie beides — sonst entsteht ein doppelter Umriss. Die Namen `elevation-*` bleiben, weil Bauteile sie führen. ======================================================================= */ --a2-shadow-border: var(--ds-shadow-border); --a2-shadow-xs: var(--ds-shadow-small); --a2-shadow-sm: var(--ds-shadow-small); --a2-shadow-md: var(--ds-shadow-medium); --a2-shadow-lg: var(--ds-shadow-large); --a2-shadow-menu: var(--ds-shadow-menu); --a2-shadow-modal: var(--ds-shadow-modal); --a2-shadow-tooltip: var(--ds-shadow-tooltip); --a2-elevation-1: var(--ds-shadow-small); --a2-elevation-2: var(--ds-shadow-menu); --a2-elevation-3: var(--ds-shadow-modal); /* ======================================================================= ZEICHENGRÖSSEN — auf dem Vierer-Raster ======================================================================= */ --a2-icon-sm: 16px; --a2-icon-md: 20px; --a2-icon-lg: 24px; --a2-icon-xl: 48px; /* ======================================================================= EBENEN — die Staffel von Geist ======================================================================= */ --a2-layer-base: 0; --a2-layer-raised: 10; --a2-layer-overlay: 100; --a2-layer-dialog: var(--ds-z-modal); --a2-layer-popover: var(--ds-z-menu); --a2-layer-toast: var(--ds-z-toast); --a2-layer-tooltip: var(--ds-z-tooltip); /* ======================================================================= RAUM — 4px-Basis ======================================================================= */ --a2-space-1: 0.25rem; /* 4px */ --a2-space-2: 0.5rem; /* 8px */ --a2-space-3: 0.75rem; /* 12px */ --a2-space-4: 1rem; /* 16px */ --a2-space-5: 1.25rem; /* 20px */ --a2-space-6: 1.5rem; /* 24px */ --a2-space-8: 2rem; /* 32px */ --a2-space-10: 2.5rem; /* 40px */ --a2-space-12: 3rem; /* 48px */ --a2-space-16: 4rem; /* 64px */ --a2-space-24: 6rem; /* 96px */ --a2-space-32: 8rem; /* 128px */ /* ======================================================================= RADIEN Sechs Pixel an allem, was man anfasst; acht bis zwölf an Flächen, die etwas umschließen. `pill` ist rund, nicht „etwas runder" — dafür gibt es `md`. ======================================================================= */ --a2-radius-sm: 4px; --a2-radius-md: var(--ds-radius); /* 6px — Knopf, Feld, Menüzeile */ --a2-radius-lg: 8px; /* Karte, Tafel */ --a2-radius-xl: 12px; /* Dialog, große Fläche */ --a2-radius-2xl: 16px; --a2-radius-pill: 9999px; /* Avatar, Schalter, Regler */ /* ======================================================================= BEWEGUNG Geist kennt eine kurze Standardkurve und eine schwungvolle für Dinge, die aus dem Nichts kommen. Mehr braucht keine Oberfläche. ======================================================================= */ --a2-duration-fast: 100ms; --a2-duration-base: 150ms; --a2-duration-slow: 200ms; --a2-duration-enter: 300ms; --a2-duration-exit: 200ms; --a2-ease: cubic-bezier(0.4, 0, 0.2, 1); --a2-ease-in: cubic-bezier(0.4, 0, 1, 1); --a2-ease-out: cubic-bezier(0, 0, 0.2, 1); --a2-ease-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1); --a2-ease-enter: var(--a2-ease-swift); /* Welche Eigenschaften bei einem Zustandswechsel überhaupt laufen. Nicht enthalten: width, height, top/left — alles, was Layout neu rechnen lässt, ruckelt, statt zu fließen. */ --a2-transition-state: background-color var(--a2-duration-base) var(--a2-ease), border-color var(--a2-duration-base) var(--a2-ease), color var(--a2-duration-base) var(--a2-ease), box-shadow var(--a2-duration-base) var(--a2-ease), opacity var(--a2-duration-base) var(--a2-ease), transform var(--a2-duration-base) var(--a2-ease); /* ======================================================================= VERLÄUFE — nur als Raum, nie als Inhaltsfläche. Kein Verlauf hinter Fließtext, keiner in Bauteilen. ======================================================================= */ --a2-gradient-hero: linear-gradient(180deg, var(--ds-background-200) 0%, var(--ds-background-100) 68%); --a2-gradient-panel: linear-gradient(180deg, var(--ds-background-200) 0%, var(--ds-background-100) 100%); --a2-gradient-edge: linear-gradient(180deg, var(--ds-background-200) 0%, transparent 140px); } /* ========================================================================== DUNKLES SCHEMA Systemvorgabe als Standardsignal, [data-theme] gewinnt in beide Richtungen — damit ein Umschalter beide Fälle erzwingen kann. Umgestellt werden ausschließlich die --ds-*-Werte. Die semantische Schicht darüber bleibt Zeile für Zeile dieselbe: Es gibt keinen einzigen Ort, an dem ein Bauteil eine dunkle Sonderfarbe bekommt. ========================================================================== */ /* `color-scheme` gehört dazu und wird gern vergessen. Ohne diese Angabe zeichnet der Browser alles, was er selbst zeichnet, weiter im hellen Schema: Kontrollkästchen, Bildlaufleisten, die Innereien von `