/* ========================================================================== Trainus — designvariabler, riktning B "Taktiktavlan", ljust läge -------------------------------------------------------------------------- Ljus sidomeny med hårfin kant istället för mörkt block, sval nästan-vit botten, taktikblå accent och IBM Plex Mono på mikroetiketter så siffror och kolumner linjerar. Samma tokennamn och samma antal som trainus.light.css (riktning D). De två filerna är utbytbara: get_css() i framework/trainus.header.php laddar en av dem. Ändra inget annat än värdena. Avviker från artefaktens B på tre punkter, alla uträknade och motiverade där de står: --tu-side-muted, --tu-side-line och hela --tu-info-trion. ========================================================================== */ :root { /* ── Ytor och bläck ───────────────────────────────────────────────────── */ --tu-bg: #f6f7f9; /* sidans botten */ --tu-surface: #ffffff; /* kort, paneler, tabellytor */ --tu-surface-2: #fafbfc; /* tabellhuvud, sekundära ytor */ --tu-ink: #101828; /* brödtext och rubriker */ --tu-muted: #5a6478; /* sekundär text, etiketter */ --tu-faint: #868fa3; /* placeholder, inaktivt */ /* ── Linjer ───────────────────────────────────────────────────────────── */ --tu-line: #e6e9ef; /* vanlig avgränsare */ --tu-line-strong: #d2d8e2; /* fältkanter, outline-knappar */ /* ── Accent ───────────────────────────────────────────────────────────── */ --tu-accent: #2f6bd8; /* fylld yta: primärknapp, aktiv meny */ --tu-accent-ink: #2456ad; /* accent som TEXT (klarar kontrast) */ --tu-accent-soft: #eaf0fc; /* svag tonplatta */ --tu-on-accent: #ffffff; /* text ovanpå --tu-accent */ /* ── Sidomeny ─────────────────────────────────────────────────────────── */ --tu-side-bg: #ffffff; --tu-side-fg: #3d4759; --tu-side-muted: #6b7789; /* gruppetiketter i menyn */ --tu-side-brand: #101828; --tu-side-chip: #f2f4f8; /* lagväljaren */ --tu-side-hover: #f2f4f8; --tu-side-line: #d2d8e2; /* vit meny mot sval botten behöver kant */ /* --tu-side-muted och --tu-side-line avviker från artefakten med flit. Artefaktens #8d97a8 ger 2,95:1 mot en vit meny — gruppetiketterna är 10 px versaler, alltså under AA. #6b7789 ger 4,54:1. Och kanten står i #d2d8e2 istället för #e6e9ef: mellan vit meny och #f6f7f9-botten är linjen hela avgränsningen, och artefaktens värde låg på 1,22:1. */ /* ── Status ───────────────────────────────────────────────────────────── */ --tu-ok: #2a8a5e; --tu-ok-soft: #e4f0ea; --tu-ok-ink: #1d6b48; --tu-warn: #c98211; /* artefakten ger ingen fylld varning */ --tu-warn-soft: #fdf0dc; --tu-warn-ink: #8a5a10; --tu-danger: #c23b34; --tu-danger-soft: #fae9e8; --tu-danger-ink: #a02b26; --tu-danger-line: #f2cdc9; /* kant på svag dangeryta */ --tu-on-danger: #ffffff; /* text ovanpå --tu-danger */ --tu-info: #2e7d8f; /* se noten nedan */ --tu-info-soft: #dcedf0; --tu-info-ink: #1f6475; /* Info kan inte vara blå här. Accenten är #2f6bd8, och D:s info #3d6b9e ligger 7° ifrån den — i ett blått tema blir "information" och "primär åtgärd" samma färg. Värst syns det på säsongsplanens dagtyper, där .tu-dt--recovery (info) och .tu-dt--prep (accent) ligger i samma rutnät och bara skiljs på botten och textfärg. Tealen ligger 28° från accenten och 38° från grönt. */ /* ── Datafärger ─────────────────────────────────────────────────────────── Skalor och kategorier i statistikvyerna. Håll dem skilda från accenten: en graf ska inte byta betydelse när varumärket byter färg. Fyllning och text är samma värde utom för varningsgult, som inte bär kontrast som text — där finns en mörkare -ink. */ --tu-scale-low: #5d6c84; /* ACWR under 0,8 — underbelastad */ --tu-scale-ok: #2a8a5e; /* ACWR 0,8–1,3 — i zonen */ --tu-scale-warn: #d9a13a; /* ACWR 1,3–1,5 — som fylld yta */ --tu-scale-warn-ink: #8a5a10; /* samma zon som text */ --tu-scale-high: var(--tu-accent); /* över 1,5 — fylld yta */ --tu-scale-high-ink: var(--tu-accent-ink); /* över 1,5 — som text */ /* ── Form: två serier och fem zoner ─────────────────────────────────────── Fitness och fatigue ligger i samma figur och måste gå att skilja åt utan att läsa legenden. Blått och rost ligger längst isär även för den som inte skiljer rött från grönt (ΔE 22 vid protanopi), och de är med flit frikopplade från accenten — kurvan ska betyda samma sak i båda temana. */ --tu-chart-fit: #2b5fa8; /* fitness, 42 dagars snitt */ --tu-chart-fat: #c2410c; /* fatigue, 7 dagars snitt */ /* Formzonerna är ingen ramp. De går från tungt till avtränat med det eftersträvade läget i mitten, så rött och gult ligger i ena änden, grönt i mitten och grått i den andra. Egna värden och inte --tu-scale-*, som pekar åt ett håll — och inte accenten, som i ett blått tema målade "tungt" i samma färg som primärknappen. */ --tu-zone-hard: #c0392f; /* under −30 % — tungt */ --tu-zone-hard-ink: #9d2b23; --tu-zone-build: #d9a13a; /* −30 till −10 % — uppbyggnad */ --tu-zone-build-ink: #8a5a10; --tu-zone-neutral: #2a8a5e; /* −10 till +5 % — balans */ --tu-zone-neutral-ink: #1d6b48; --tu-zone-fresh: #35a37a; /* +5 till +25 % — utvilad */ --tu-zone-fresh-ink: #157a5a; --tu-zone-stale: #8b93a3; /* över +25 % — avtränad */ --tu-zone-stale-ink: #646d7d; /* Skalans "låg" är dämpad skiffer, inte blå. Blått är accenten, och det är redan skalans "hög" — samma kulör i båda ändar av en ramp går inte. #5d6c84 ger 4,97:1 mot botten, samma som D:s #2f6f9e gav mot sin. */ --tu-trend-up: #2a8a5e; /* bättre än föregående period */ --tu-trend-down: #c23b34; /* sämre än föregående */ /* Nedgång är röd här, inte accenten. I D var --tu-trend-down korallen, som råkade läsa som "dåligt". Blått gör inte det. */ --tu-us: var(--tu-accent); /* eget lag i matchanalysen */ --tu-them: #c9460f; /* motståndaren */ /* "Oss" ÄR accenten i ett blått tema — D:s #1b56c9 låg så nära #2f6bd8 att de inte gick att skilja. I matchanalysen är vi huvudsaken, så accenten är semantiskt rätt plats. */ --tu-team-1: var(--tu-accent); /* lagindelning på ritbordet */ --tu-team-2: #e8a11a; --tu-team-3: var(--tu-ok); --tu-team-4: var(--tu-danger); /* ── Landningssidans hjälte ─────────────────────────────────────────────── B är taktiktavlan, så hjälten är bokstavligen en whiteboard: vit yta med planritningen i svaga mörka streck i stället för vita. Ytan och strecken måste vändas tillsammans — därför egna tokens och inte sidomenyns. */ --tu-hero-bg: #ffffff; /* whiteboard */ --tu-hero-ink: #101828; /* rubrik och ordmärke */ --tu-hero-fg: #5a6478; /* ingressen */ --tu-hero-line: #101828; /* ritbordets streck */ --tu-hero-edge: var(--tu-line-strong); /* vit hjälte behöver kant */ /* ── Typografi ────────────────────────────────────────────────────────── */ --tu-font-display: "Outfit", Helvetica, sans-serif; --tu-font-body: "Outfit", Helvetica, sans-serif; --tu-font-label: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* Typsnitten laddas inte här. Varje tema anger sina i tu_themes() i framework/trainus.header.php, så en Google Fonts-länk följer temat. */ --tu-display-weight: 600; /* Outfit är geometrisk — 600 räcker */ --tu-display-track: -0.01em; /* rubriker: tight spärr, gemener */ --tu-label-track: 0.13em; /* mikroetiketter: versal, luftig spärr */ --tu-text-2xs: 10px; /* versala mikroetiketter */ --tu-text-xs: 11px; --tu-text-sm: 13px; --tu-text: 14px; --tu-text-lg: 16px; --tu-h3: 18px; --tu-h2: 22px; --tu-h1: 28px; /* ── Form ─────────────────────────────────────────────────────────────── */ --tu-radius-sm: 4px; /* staplar, dagsrutor, smala spår */ --tu-radius: 8px; --tu-radius-lg: 10px; --tu-radius-pill: 999px; --tu-shadow: 0 1px 2px rgba(16, 24, 40, .06); --tu-shadow-lift: 0 8px 24px rgba(16, 24, 40, .14); --tu-shadow-raised: 0 1px 2px rgba(16, 24, 40, .3); /* reglageknopp */ /* ── Rytm ─────────────────────────────────────────────────────────────── */ --tu-space-1: 4px; --tu-space-2: 8px; --tu-space-3: 12px; --tu-space-4: 16px; --tu-space-5: 24px; --tu-space-6: 32px; --tu-cell-pad-y: 11px; /* tabellcellens höjd */ --tu-cell-pad-x: 12px; /* tabellcellens sidor */ --tu-nav-w: 222px; /* sidomenyns bredd på desktop */ --tu-tabbar-h: 54px; /* flikraden i underkant på mobil */ --tu-main-pad: 26px; --tu-card-pad: 20px; --tu-gap: 16px; /* ── Övrigt ───────────────────────────────────────────────────────────── */ --tu-focus: 0 0 0 3px rgba(47, 107, 216, .35); --tu-overlay: rgba(16, 24, 40, .55); /* bakom lightbox/modal */ --tu-toast-bg: #101828; --tu-toast-fg: #eef1f6; }