/* * Default Ydin theme — the Brand's colours and its typeface. * Typography, radii, spacing, and sizing defaults live in @ydin/themes/base.css * and are loaded before this file. Override any :root variable here to * restyle this tenant without touching component code. * * The values are the hi-fi handover's (docs/plans/m2-core-tracker.md, * "Foundations"), under today's names: * * handover today's tokens * bg background * card card, popover * card2 muted, secondary fills inside cards, empty tracks, chips * text foreground, card-foreground, popover-foreground, secondary-foreground * sub muted-foreground * acc primary, action, ring * on primary-foreground, action-foreground * hi accent (accent-foreground is text) hover, the selected tab * line border, input the phone has no line of its own: card2 * back scrim what shows behind a sheet * glass --material-chrome with base.css's --material-* blur, saturate, shadow, highlight */ /* The typeface: Figtree, self-hosted (a variable font, Latin and Latin * Extended, upright only; a script's file loads only when a page uses it). */ /* figtree-latin-ext-wght-normal */ @font-face { font-family: 'Figtree Variable'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/brand/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* figtree-latin-wght-normal */ @font-face { font-family: 'Figtree Variable'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/brand/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --font-sans: 'Figtree Variable', ui-sans-serif, system-ui, sans-serif; } :root { --background: #F2F2EF; --foreground: #111111; --card: #FFFFFF; --card-foreground: #111111; --popover: #FFFFFF; --popover-foreground: #111111; /* Also the athlete app's action colour (--action, below): retuning it moves Start workout and a ticked set too. */ --primary: #111111; --primary-foreground: #FFFFFF; --secondary: #E7E7E3; --secondary-foreground: #111111; --muted: #E7E7E3; --muted-foreground: #5E5E5A; --accent: rgb(0 0 0 / 7%); --accent-foreground: #111111; --destructive: oklch(0.577 0.245 27.325); --activity: oklch(0.6 0.16 150); /* work done, in the athlete's calendar */ --rest-day: oklch(0.6 0.12 250); /* a rest day the plan gives, in the athlete's calendar */ --destructive-foreground: oklch(0.985 0 0); --border: #E7E7E3; --input: #E7E7E3; --ring: #111111; --scrim: rgb(26 26 26 / var(--scrim-opacity)); --material-chrome: #FFFFFF; /* ── Action ─────────────────────────────────────────────────────────────── * The main thing to do on a screen (Start workout) and what it leaves * behind (a day done, a set ticked). Ydin's brand is monochrome, so it is * the primary; a tenant with a brand colour maps it to that. */ --action: var(--primary); --action-foreground: var(--primary-foreground); /* ── Avatar palette ──────────────────────────────────────────────────────── * Five mutually-distinct hues. Components pick a slot deterministically * (e.g. hash(name) % 5) so the same person keeps the same colour. */ --avatar-1: oklch(0.72 0.15 25); /* warm red */ --avatar-2: oklch(0.74 0.13 80); /* amber */ --avatar-3: oklch(0.72 0.13 150); /* green */ --avatar-4: oklch(0.7 0.13 220); /* cool blue */ --avatar-5: oklch(0.68 0.15 300); /* violet */ --avatar-foreground: oklch(0.985 0 0); } .dark { --background: #121212; --foreground: #FFFFFF; --card: #1E1E1E; --card-foreground: #FFFFFF; --popover: #1E1E1E; --popover-foreground: #FFFFFF; /* Also --action, as above: the accent flips to white, with black on it. */ --primary: #FFFFFF; --primary-foreground: #000000; --secondary: #2C2C2C; --secondary-foreground: #FFFFFF; --muted: #2C2C2C; --muted-foreground: #B3B3B3; --accent: rgb(255 255 255 / 12%); --accent-foreground: #FFFFFF; --destructive: oklch(0.704 0.191 22.216); --activity: oklch(0.72 0.17 150); --rest-day: oklch(0.7 0.12 250); --destructive-foreground: oklch(0.985 0 0); --border: #2C2C2C; --input: #2C2C2C; --ring: #FFFFFF; --scrim: rgb(0 0 0 / var(--scrim-opacity)); --material-chrome: #2C2C2E; --action: var(--primary); --action-foreground: var(--primary-foreground); /* Slightly desaturated for dark mode contrast against the dark surface. */ --avatar-1: oklch(0.62 0.13 25); --avatar-2: oklch(0.64 0.12 80); --avatar-3: oklch(0.62 0.12 150); --avatar-4: oklch(0.6 0.12 220); --avatar-5: oklch(0.6 0.13 300); --avatar-foreground: oklch(0.985 0 0); } /* ── The coach desktop ───────────────────────────────────────────────────── * The same names with the desktop shell's own values: a darker ground * outside the panels, and the panels' own fills and hairlines. Set on the * desktop shell's root (`data-shell="desktop"`); a coach on the phone takes * the values above. */ [data-shell='desktop'] { --background: #EAEAE6; --card: #FFFFFF; --popover: #FFFFFF; --secondary: #F3F3F0; --muted: #F3F3F0; --border: #E2E2DD; --input: #E2E2DD; } .dark [data-shell='desktop'] { --background: #000000; --card: #121212; --popover: #121212; --secondary: #1E1E1E; --muted: #1E1E1E; --border: #2C2C2C; --input: #2C2C2C; }