/* ============================================================ aivonyx Dashboard · Design Tokens (Plugin-Layer) ============================================================ Geliefert wird das Plugin auf Basis des aivonyx Astra-Child-Themes. Das Child-Theme definiert global auf :root bereits: Farben : --ax-cyan, --ax-cyan-hover, --ax-deep, --ax-deep-700, --ax-deep-900, --ax-black, --ax-white, --ax-gray-subtle, --ax-border, --ax-accent, --ax-accent-hover Fonts : --ax-font-mono, --ax-font-sans, --ax-font-serif, --ax-font-display (self-hosted @font-face im Child-Theme style.css, seit v1.3.0) Motion : --ax-ease, --ax-dur-base, --ax-dur-slow Diese Tokens werden hier NICHT erneut deklariert — sie kaskadieren vom Theme runter. Hier nur die Tokens, die ausschließlich das Dashboard braucht (Neutral-Ramp, Semantik-Paar, Type-Scale, Spacing-Steps, Radii, Borders, Shadows, fast-Motion). Astra-kompatibel · ausschließlich REM (16px Basis). ============================================================ */ .aivonyx-dashboard { /* ---------- Color · Neutral-Ramp (Dashboard-spezifisch) ---------- Plugin-eigene Neutrals (Astra deckt nur die Brand-Slots ab). --ax-gray, --ax-gray-subtle, --ax-border kommen aus dem Child-Theme (:root) — siehe aivonyx/style.css. */ --ax-neutral-50: #FAFAFA; --ax-neutral-100: #F5F5F5; /* Alias zu --ax-gray-subtle, lokal benannt */ --ax-neutral-200: #E5E5E5; /* Alias zu --ax-border */ --ax-neutral-300: #CCCCCC; /* v0.65.0 · Rollentrennung nach Kontrastmessung 2026-08-12: 400 ist die NICHT-TEXT-Stufe (Ränder, Indikator-Punkte, Hover-Kanten) — #A3A3A3 hielt nur 2,42:1 auf der Kachel und wurde trotzdem in 17 Regeln als Textfarbe benutzt. #8A8A8A erfüllt die 3:1-Schwelle für Nicht-Text (WCAG 1.4.11) und bleibt sichtbar heller als die Textstufe. Textfarbe ist ausschließlich --ax-gray / 500. */ --ax-neutral-400: #8A8A8A; --ax-neutral-500: #6B6B6B; /* Alias zu --ax-gray, bleibt synchron */ --ax-neutral-700: #3D3D3D; --ax-neutral-900: #1A1A1A; /* Plugin-Hilfs-Grays (vorher hardcoded im Komponenten-CSS) */ --ax-gray-track: #EFEFEF; /* Segmented-Control Track-BG */ --ax-gray-line: #F0F0F0; /* Divider / Tile-Border */ /* ---------- Color · Semantik (Status-Pärchen) ---------- */ --ax-success: #00C896; --ax-success-fg: #00764F; --ax-warning: #F5A623; --ax-warning-fg: #9B5B00; /* v0.66.0 · EIN Rot. Vorher trugen Plugin (#E5484D) und alles außerhalb des Plugin-Scopes (Fallback #C4373C in Tabbar und Woo) zwei verschiedene Werte, weil --ax-danger nur hier definiert war. Der Fallback war dabei der bessere: Weiß darauf hält 5,30:1, auf #E5484D nur 3,91:1 — das Unread-Badge der Tabbar wäre mit dem Token-Wert durchgefallen. Mitgewonnen: der Lösch-Hover als Text stieg von 3,62:1 auf 4,85:1. */ --ax-danger: #C4373C; --ax-danger-fg: #A01A20; --ax-info-fg: #004F5C; /* zu --ax-cyan, dunkler Text-Kontrast */ /* Modal-Backdrop (deep-900-Tint mit Alpha) */ --ax-modal-backdrop: rgba(7, 40, 58, 0.45); /* Strict on-dark colors — unabhängig von Astra-Customizer (--ast-global-color-6). Dürfen NICHT überschrieben werden; das Plugin nutzt sie, um Texte im dunklen Header garantiert weiß zu rendern, auch wenn Astra-Theme-Settings das mappingbasierte --ax-on-dark mit einer Custom-Farbe befüllen. */ --ax-on-dark-strict: #FFFFFF; --ax-on-dark-strict-strong: rgba(255, 255, 255, 0.92); --ax-on-dark-strict-soft: rgba(255, 255, 255, 0.78); --ax-on-dark-strict-mute: rgba(255, 255, 255, 0.62); --ax-on-dark-strict-hair: rgba(255, 255, 255, 0.16); --ax-on-dark-strict-line: rgba(255, 255, 255, 0.10); /* Status-Tints (für Badges, Bio-Tiles) */ --ax-success-tint: rgba(0, 200, 150, 0.14); --ax-success-tint-soft: rgba(0, 200, 150, 0.06); --ax-success-tint-bord: rgba(0, 200, 150, 0.20); --ax-warning-tint: rgba(245, 166, 35, 0.16); --ax-warning-tint-soft: rgba(245, 166, 35, 0.06); --ax-warning-tint-bord: rgba(245, 166, 35, 0.22); --ax-danger-tint: rgba(196, 55, 60, 0.14); --ax-danger-tint-soft: rgba(196, 55, 60, 0.06); --ax-danger-tint-bord: rgba(196, 55, 60, 0.20); --ax-info-tint: rgba(0, 217, 255, 0.16); /* ---------- Type-Scale (rem, 16px Basis) ---------- clamp(min, fluid, max) skaliert kontinuierlich zwischen Mobile-Werten (Viewport ≤ 320px) und Desktop-Werten (Viewport ≥ 1280px). Werte deutlich größer als die alte Skala (ehem. 9–22px), damit Texte auf Desktop nicht winzig wirken und Mobile gut lesbar bleibt. */ /* v0.46.0: Skala +2px auf Mobile (Display-Stufen mehr). Body lag bei 14px, Labels bei 10px — auf dem iPhone zu klein (iOS-Referenz für Fließtext ist 17px). Untergrenze 13px ist bewusst: darunter wird gesperrter Uppercase-Text unleserlich. */ --ax-text-2xs: clamp(0.8125rem, 0.771rem + 0.21vw, 0.9375rem); /* 13 → 15px */ --ax-text-xs: clamp(0.875rem, 0.833rem + 0.21vw, 1rem); /* 14 → 16px */ --ax-text-sm: clamp(0.9375rem, 0.896rem + 0.21vw, 1.0625rem); /* 15 → 17px */ --ax-text-base: clamp(1rem, 0.958rem + 0.21vw, 1.125rem); /* 16 → 18px */ --ax-text-md: clamp(1.0625rem, 1.021rem + 0.21vw, 1.1875rem); /* 17 → 19px */ --ax-text-lg: clamp(1.125rem, 1.083rem + 0.21vw, 1.25rem); /* 18 → 20px */ --ax-text-xl: clamp(1.25rem, 1.188rem + 0.31vw, 1.4375rem); /* 20 → 23px */ --ax-text-2xl: clamp(1.375rem, 1.292rem + 0.42vw, 1.625rem); /* 22 → 26px */ --ax-text-3xl: clamp(1.625rem, 1.500rem + 0.63vw, 2rem); /* 26 → 32px */ --ax-text-4xl: clamp(1.875rem, 1.708rem + 0.83vw, 2.375rem); /* 30 → 38px */ /* ---------- Typography · semantische Rollen (v0.46.0) ---------- Vorher nutzte das Dashboard --ax-font-mono für ALLES (117 gegen 22 Sans-Deklarationen) — das ließ die Oberfläche nach Terminal aussehen. Jetzt entscheidet die Rolle, nicht die Optik: --ax-font-ui Sprache: Begrüßung, Titel, Fragen, Labels, Buttons. Inter ist im Child-Theme bereits self-hosted, kostet also keinen Extra-Download. --ax-font-num Zahlen, Uhrzeiten, Kalendertage, Versionen, URLs. Feste Zeichenbreite ist hier ein echter Vorteil: Werte springen beim Aktualisieren nicht. Wer den technischen Look zurückwill, setzt --ax-font-ui auf var(--ax-font-mono) — eine Zeile. */ --ax-font-ui: var(--ax-font-sans); --ax-font-num: var(--ax-font-mono); /* ---------- Spacing (Dashboard-Schrittweite, rem) ---------- */ --ax-space-1: 0.25rem; /* 4px */ --ax-space-2: 0.375rem; /* 6px */ --ax-space-3: 0.5rem; /* 8px */ --ax-space-4: 0.625rem; /* 10px */ --ax-space-5: 0.75rem; /* 12px */ --ax-space-6: 0.875rem; /* 14px */ --ax-space-7: 1rem; /* 16px */ --ax-space-8: 1.25rem; /* 20px */ --ax-space-9: 1.375rem; /* 22px */ --ax-space-10: 1.625rem; /* 26px */ --ax-space-11: 2rem; /* 32px */ /* ---------- Radii ---------- */ --ax-radius-sm: 0.25rem; /* 4px */ --ax-radius-md: 0.4375rem; /* 7px */ --ax-radius-lg: 0.5625rem; /* 9px */ --ax-radius-xl: 0.625rem; /* 10px */ --ax-radius-2xl: 0.75rem; /* 12px */ --ax-radius-3xl: 0.875rem; /* 14px */ --ax-radius-4xl: 1rem; /* 16px */ --ax-radius-full: 624.9375rem; /* ---------- Borders ---------- */ --ax-border-thin: 0.0625rem; /* 1px */ --ax-border-thick: 0.125rem; /* 2px */ /* Rand eines BEDIENELEMENTS, nicht einer Karte (v0.68.0). --ax-neutral-200 (#E5E5E5) trug bisher beides: Kartenkante und Feldkante. Für eine Karte ist das richtig — sie ist Dekor. Für ein Eingabefeld ist der Rand das einzige Merkmal, an dem es als Feld erkennbar ist, und WCAG 1.4.11 verlangt dafür 3:1; #E5E5E5 hielt 1,26:1. Kartenränder bleiben deshalb unverändert, Felder bekommen diesen Token: #8A8A8A = 3,45:1 hell, im Dunkel-Remap 5,26:1. */ --ax-field-border: var(--ax-neutral-400); /* ---------- Touch (v0.66.0) ---------- Mindest-Trefferfläche jedes bedienbaren Elements. rem zuerst, px nur als Boden — beides ist nötig: Astra setzt `html { font-size: 91.2% }` (belegt am Live-Markup 2026-08-12), dort sind 2.75rem nur 40px. Umgekehrt soll eine vom Nutzer erhöhte Textgröße die Ziele mitwachsen lassen, was reine px nicht tun. max() liefert genau diese Kombination. 44px ist eine physische Größe (Fingerkuppe); WCAG 2.5.8 und Apple HIG rechnen deshalb in CSS-px, nicht in rem. Die Woo-Zone im Child-Theme pinnt denselben Wert auf body.ax-dashboard-page — sie liegt außerhalb dieses Scopes. */ --ax-touch: max(2.75rem, 44px); /* ---------- Elevation ---------- */ --ax-shadow-xs: 0 0.0625rem 0.125rem rgba(10, 58, 82, 0.04); --ax-shadow-sm: 0 0.0625rem 0.1875rem rgba(10, 58, 82, 0.06), 0 0.0625rem 0.125rem rgba(10, 58, 82, 0.04); --ax-shadow-md: 0 0.25rem 0.75rem rgba(10, 58, 82, 0.08), 0 0.125rem 0.25rem rgba(10, 58, 82, 0.04); --ax-shadow-lg: 0 1.5rem 3.75rem rgba(10, 58, 82, 0.18), 0 0.125rem 0.5rem rgba(10, 58, 82, 0.08); /* v0.69: Fokus-Ring opak — Cyan mit Alpha stand bei 1,25:1 auf Weiß, WCAG 1.4.11 verlangt 3:1. #00738F = 5,46:1 (Dark-Remap unten). */ --ax-shadow-focus: 0 0 0 0.1875rem #00738F; /* ---------- Motion (Dashboard-only fast) ---------- */ --ax-dur-fast: 120ms; } /* ============================================================ Dark-Scheme · Plugin-Token-Remapping (v0.22.0) ------------------------------------------------------------ Aktiv bei html.ax-dark (View-Switch Hell/Dunkel). Remappt ausschließlich PLUGIN-eigene Tokens — Brand-/Surface-Tokens des Themes remappt aivonyx/dashboard.css (Token-Ownership). Status-Tints bleiben (alpha-basiert, funktionieren auf dunkel). ============================================================ */ html.ax-dark .aivonyx-dashboard { /* Neutral-Ramp invertiert: 50 = dunkelste Surface … 900 = hellster Text */ --ax-neutral-50: #18222B; --ax-neutral-100: #1C2731; --ax-neutral-200: #2A3742; --ax-neutral-300: #3A4854; --ax-neutral-400: #7E8F9B; --ax-neutral-500: #93A4B0; --ax-neutral-700: #C7D2DA; --ax-neutral-900: #EDF2F5; --ax-gray-track: #1E2933; --ax-gray-line: #222E38; /* Status-Textfarben aufhellen (waren Dunkel-auf-Hell-Varianten) */ --ax-success-fg: #4ADBAE; --ax-warning-fg: #FFC266; --ax-danger-fg: #FF8A8E; --ax-info-fg: #7FE3F5; --ax-modal-backdrop: rgba(0, 0, 0, 0.6); /* Schatten auf dunklem Grund: dezenter, dafür mehr Kontrastkante */ --ax-shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3); --ax-shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.4); --ax-shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45); --ax-shadow-lg: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.6); /* Fokus-Ring auf dunklem Grund: Marken-Cyan (13,2:1 auf #121A21) */ --ax-shadow-focus: 0 0 0 0.1875rem #00D9FF; } /* ============================================================ @property + Relative Color (v0.31.0) ------------------------------------------------------------ - @property: Status-Basisfarben typisiert (). Vorteil: ein ungültiger Wert kann den Cascade nicht mehr brechen (fällt auf initial-value zurück = Guard); zudem animierbar. - Relative Color: die Status-Tints werden aus den Basisfarben ABGELEITET statt als rgba-Literale doppelt gepflegt. Ergebnis ist farblich IDENTISCH zu den Literalen oben (gleiche Kanäle, gleiches Alpha) — @supports hält die Literale als Fallback für ältere Engines. Neue Basisfarbe ändern → Tints folgen. ============================================================ */ @property --ax-success { syntax: ''; inherits: true; initial-value: #00C896; } @property --ax-warning { syntax: ''; inherits: true; initial-value: #F5A623; } @property --ax-danger { syntax: ''; inherits: true; initial-value: #C4373C; } @supports (color: rgb(from white r g b)) { :root { --ax-success-tint: rgb( from var(--ax-success) r g b / 0.14 ); --ax-success-tint-soft: rgb( from var(--ax-success) r g b / 0.06 ); --ax-success-tint-bord: rgb( from var(--ax-success) r g b / 0.20 ); --ax-warning-tint: rgb( from var(--ax-warning) r g b / 0.16 ); --ax-warning-tint-soft: rgb( from var(--ax-warning) r g b / 0.06 ); --ax-warning-tint-bord: rgb( from var(--ax-warning) r g b / 0.22 ); --ax-danger-tint: rgb( from var(--ax-danger) r g b / 0.14 ); --ax-danger-tint-soft: rgb( from var(--ax-danger) r g b / 0.06 ); --ax-danger-tint-bord: rgb( from var(--ax-danger) r g b / 0.20 ); /* --ax-info-tint NICHT ableiten: Basis --ax-cyan ist kontextabhängig (Astra-Blau auf :root, erst auf der Dashboard-Bühne auf #00D9FF gepinnt) → würde im :root einfrieren. Bleibt Literal (oben). */ } }