/* ========================================================================== Elektronické portfolio praxí — návrhové tokeny 2. lékařská fakulta Univerzity Karlovy Dvě vrstvy: 1. ZNAČKOVÉ PRIMITIVY — hodnoty z logomanuálu. Nemění se nikdy, ani v tmavém režimu. Neupravujte je bez souhlasu fakulty. 2. SÉMANTICKÉ TOKENY — to, co používáte v komponentách. Mění se podle režimu. V CSS komponent se sahá POUZE na tyto. Kontrasty uvedené v komentářích platí proti příslušnému podkladu a jsou změřené skriptem, ne odhadnuté. Před změnou barvy ho spusťte znovu: node design-system/tools/check-contrast.mjs ========================================================================== */ /* -------------------------------------------------------------------------- 1. ZNAČKOVÉ PRIMITIVY — logomanuál 2. LF UK (Opatření děkana 6/2017) -------------------------------------------------------------------------- */ :root { /* Základní barvy vizuálního stylu */ --ep-brand-red: #ed1c29; /* Pantone 185 C · C0 M100 Y95 K0 · RGB 237 28 41 */ --ep-brand-grey: #7c7674; /* Pantone 445 C */ --ep-brand-black: #000000; /* Pantone Black 6 C */ /* Doporučené stupně šedé */ --ep-grey-656: #f6f6f6; /* Pantone 656 C · K6 */ --ep-grey-427: #e6e6e6; /* Pantone 427 C · K20 */ --ep-grey-877: #767676; /* Pantone 877 C · K66 */ /* Odvozené odstíny červené — logo se jimi NIKDY nepřebarvuje. Slouží jen textu a ovládacím prvkům, kde základní červená neprojde AA. */ --ep-red-700: #c01a23; /* 6,15:1 na bílé — zároveň --primary-dark-color webu fakulty */ --ep-red-800: #8e1319; /* stav :hover / :active */ --ep-red-050: #fdecee; /* podklad upozornění */ --ep-red-200: #f2b8bd; /* linka upozornění */ /* Neutrály pro obrazovku. 100% černá je pro tisk; na monitoru je příjemnější #1f1f1f, jak logomanuál sám doporučuje. */ --ep-ink: #1f1f1f; /* 16,48:1 na bílé */ --ep-ink-700: #3a3a3a; --ep-grey-600: #616161; /* 6,19:1 na bílé — RGB varianta Pantone 445 C */ --ep-grey-400: #949494; --ep-grey-300: #c8c8c8; --ep-grey-250: #d4d4d4; --ep-grey-150: #f0f0f0; --ep-white: #ffffff; /* Provozní stavy — mimo logomanuál, pro klinický provoz nutné. Nikdy nenesou informaci samy: vždy je u nich ikona i slovní popis. */ --ep-green-700: #166534; /* 7,13:1 na bílé */ --ep-green-050: #eaf4ec; --ep-green-200: #b9dcc3; --ep-amber-700: #7c4a02; /* 7,40:1 na bílé */ --ep-amber-050: #fbf1df; --ep-amber-200: #e3c890; --ep-blue-700: #004c93; /* 8,55:1 na bílé — modrá fakultního webu */ --ep-blue-050: #e8f0f8; --ep-blue-200: #b6cfe6; /* Tmavý režim — vlastní odstíny, ne převrácené světlé. Všechny měřené proti podkladu #16181c. */ --ep-dk-bg: #16181c; --ep-dk-surface: #1f2229; --ep-dk-surface-2: #23262c; --ep-dk-border: #2c3038; --ep-dk-border-strong: #3a3f48; --ep-dk-text: #ededed; /* 15,18:1 */ --ep-dk-muted: #a8a8a8; /* 7,47:1 */ --ep-dk-red: #ff7a80; /* 7,06:1 */ --ep-dk-red-hover: #ffa0a5; --ep-dk-green: #6fd08c; /* 9,38:1 */ --ep-dk-amber: #e8b24c; /* 9,23:1 */ --ep-dk-blue: #7fb3e8; /* 8,05:1 */ --ep-dk-green-bg: #15291c; --ep-dk-green-border: #2c5538; --ep-dk-amber-bg: #2a2109; --ep-dk-amber-border: #5a4718; --ep-dk-red-bg: #2c1316; --ep-dk-red-border: #5c272c; --ep-dk-blue-bg: #121f2c; --ep-dk-blue-border: #24405c; } /* -------------------------------------------------------------------------- 2. NEBAREVNÉ TOKENY — stejné v obou režimech -------------------------------------------------------------------------- */ :root { /* Písmo. Noto Sans je písmo fakultního webu; logomanuál povoluje bezpatkové nezdobné fonty a patkové zakazuje. Hrot je licencovaný a manuál ho vyhrazuje pro oficiální propagaci — proto tu není. */ --ep-font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Arial CE", sans-serif; --ep-font-display: "Noto Sans Display", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --ep-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Velikosti v rem, aby respektovaly nastavení velikosti písma uživatele. */ --ep-text-2xs: 0.6875rem; /* 11 px — jen velká písmena s prostrkáním */ --ep-text-xs: 0.75rem; /* 12 px */ --ep-text-sm: 0.8125rem; /* 13 px */ --ep-text-md: 0.875rem; /* 14 px */ --ep-text-base: 1rem; /* 16 px — základní text */ --ep-text-lg: 1.0625rem; /* 17 px */ --ep-text-xl: 1.125rem; /* 18 px */ --ep-text-2xl: 1.3125rem; /* 21 px */ --ep-text-3xl: 1.5625rem; /* 25 px */ --ep-text-4xl: 1.875rem; /* 30 px */ --ep-text-5xl: 2.125rem; /* 34 px — velká čísla na dlaždicích */ --ep-text-6xl: 2.5rem; /* 40 px — displejový nadpis */ --ep-leading-tight: 1.2; --ep-leading-snug: 1.35; --ep-leading-normal: 1.55; --ep-leading-relaxed: 1.65; --ep-weight-normal: 400; --ep-weight-medium: 500; --ep-weight-semibold: 600; --ep-weight-bold: 700; --ep-tracking-tight: -0.015em; --ep-tracking-wide: 0.06em; --ep-tracking-wider: 0.08em; /* Rozestupy, základ 4 px */ --ep-space-1: 0.125rem; /* 2 px */ --ep-space-2: 0.25rem; /* 4 px */ --ep-space-3: 0.5rem; /* 8 px */ --ep-space-4: 0.6875rem; /* 11 px */ --ep-space-5: 0.875rem; /* 14 px */ --ep-space-6: 1rem; /* 16 px */ --ep-space-7: 1.25rem; /* 20 px */ --ep-space-8: 1.5rem; /* 24 px */ --ep-space-9: 1.75rem; /* 28 px */ --ep-space-10: 2.25rem; /* 36 px */ --ep-space-11: 3rem; /* 48 px */ --ep-radius-xs: 3px; --ep-radius-sm: 4px; --ep-radius-md: 6px; --ep-radius-lg: 8px; --ep-radius-xl: 10px; --ep-radius-pill: 999px; /* Dotykové cíle. 44 px je minimum podle WCAG 2.5.5 i pokynů Apple; mentor klepe na tlačítka na chodbě, v rukavicích a ve spěchu. */ --ep-tap-min: 44px; --ep-control-h: 46px; /* běžné pole a tlačítko */ --ep-control-h-lg: 52px; /* hlavní akce na mobilu */ --ep-control-h-sm: 44px; /* kompaktní tlačítko v tabulce */ --ep-border-width: 1px; --ep-border-width-strong: 1.5px; --ep-accent-width: 4px; /* levá linka u karet a upozornění */ --ep-focus-width: 3px; --ep-focus-offset: 2px; --ep-ring: 0 0 0 1px rgb(0 0 0 / 0.04); --ep-shadow-overlay: 0 10px 28px -6px rgb(0 0 0 / 0.22), 0 2px 6px -2px rgb(0 0 0 / 0.12); --ep-duration: 140ms; --ep-ease: cubic-bezier(0.2, 0, 0.3, 1); --ep-z-sticky: 10; --ep-z-nav: 20; --ep-z-overlay: 40; --ep-z-toast: 60; /* Šířky rozvržení */ --ep-sidebar-w: 232px; --ep-content-min: 560px; --ep-prose-max: 68ch; } /* -------------------------------------------------------------------------- 3. SÉMANTICKÉ TOKENY — světlý režim (výchozí) -------------------------------------------------------------------------- */ :root { color-scheme: light; --ep-bg: var(--ep-grey-656); --ep-surface: var(--ep-white); --ep-surface-alt: var(--ep-grey-656); --ep-surface-sunken: var(--ep-grey-427); --ep-border: var(--ep-grey-427); --ep-border-subtle: var(--ep-grey-150); --ep-border-strong: var(--ep-grey-250); --ep-text: var(--ep-ink); --ep-text-secondary: var(--ep-ink-700); --ep-text-muted: var(--ep-grey-600); --ep-text-faint: var(--ep-grey-877); --ep-text-disabled: var(--ep-grey-400); --ep-text-on-accent: var(--ep-white); /* Identita vs. akce — to je ten podstatný rozdíl. --ep-identity = #ed1c29, kontrast 4,38:1. Projde AA jen pro velký text (18,66 px a víc, nebo 14 px tučně) a pro ovládací prvky a grafiku (3:1). Používá se na plochy, pruhy a logo. --ep-action = #c01a23, kontrast 6,15:1. Odkazy, drobný text, výplně tlačítek s bílým popisem. Záměna těchto dvou je nejčastější chyba, kterou tu lze udělat. */ --ep-identity: var(--ep-brand-red); --ep-action: var(--ep-red-700); --ep-action-hover: var(--ep-red-800); --ep-action-soft: var(--ep-red-050); --ep-action-soft-border: var(--ep-red-200); --ep-ok: var(--ep-green-700); --ep-ok-bg: var(--ep-green-050); --ep-ok-border: var(--ep-green-200); --ep-wait: var(--ep-amber-700); --ep-wait-bg: var(--ep-amber-050); --ep-wait-border: var(--ep-amber-200); --ep-alert: var(--ep-red-700); --ep-alert-bg: var(--ep-red-050); --ep-alert-border: var(--ep-red-200); --ep-info: var(--ep-blue-700); --ep-info-bg: var(--ep-blue-050); --ep-info-border: var(--ep-blue-200); --ep-neutral: var(--ep-ink-700); --ep-neutral-bg: var(--ep-grey-656); --ep-neutral-border: var(--ep-grey-427); --ep-focus: var(--ep-blue-700); /* Zatemnění pod modálním dialogem. */ --ep-backdrop: rgb(31 31 31 / 0.55); /* Sekvenční škála pro kapacitní matici. Jeden odstín, světlá → tmavá, monotónně klesající světlost. Číslo je v buňce vždy — barva jen pomáhá hledat, informaci nenese. */ --ep-ramp-0: #fff5f6; --ep-ramp-1: #fbdee1; --ep-ramp-2: #f5b6bb; --ep-ramp-3: #ec7f88; --ep-ramp-4: var(--ep-red-700); --ep-ramp-over: var(--ep-red-800); --ep-ramp-text: var(--ep-ink); /* na krocích 0–3 */ --ep-ramp-text-deep: var(--ep-white); /* na krocích 4 a over */ --ep-logo-url: url("../assets/logo/logo-2lfuk.svg"); --ep-mark-url: url("../assets/logo/znak-2lfuk.svg"); } /* -------------------------------------------------------------------------- 4. SÉMANTICKÉ TOKENY — tmavý režim Pro noční směny na oddělení. Je to vlastní paleta, ne převrácená světlá. POZOR: následující seznam je záměrně dvakrát — jednou pro systémové nastavení, jednou pro ruční přepnutí přes [data-theme="dark"]. CSS to bez duplikace neumí (jeden selektor je v @media). Měníte-li jeden, změňte i druhý. Skript check-contrast.mjs ověří oba. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ep-bg: var(--ep-dk-bg); --ep-surface: var(--ep-dk-surface); --ep-surface-alt: var(--ep-dk-surface-2); --ep-surface-sunken: var(--ep-dk-bg); --ep-border: var(--ep-dk-border); --ep-border-subtle: #22252b; --ep-border-strong: var(--ep-dk-border-strong); --ep-text: var(--ep-dk-text); --ep-text-secondary: #c8c8c8; --ep-text-muted: var(--ep-dk-muted); --ep-text-faint: #949494; --ep-text-disabled: #6b7079; --ep-text-on-accent: var(--ep-dk-bg); /* V tmavém režimu se role obrací: výplň je světlá, popis tmavý. Základní červená #ed1c29 má na #16181c jen 3,77:1, takže na text v tmavém režimu nesmí vůbec. */ --ep-identity: var(--ep-dk-red); --ep-action: var(--ep-dk-red); --ep-action-hover: var(--ep-dk-red-hover); --ep-action-soft: var(--ep-dk-red-bg); --ep-action-soft-border: var(--ep-dk-red-border); --ep-ok: var(--ep-dk-green); --ep-ok-bg: var(--ep-dk-green-bg); --ep-ok-border: var(--ep-dk-green-border); --ep-wait: var(--ep-dk-amber); --ep-wait-bg: var(--ep-dk-amber-bg); --ep-wait-border: var(--ep-dk-amber-border); --ep-alert: var(--ep-dk-red); --ep-alert-bg: var(--ep-dk-red-bg); --ep-alert-border: var(--ep-dk-red-border); --ep-info: var(--ep-dk-blue); --ep-info-bg: var(--ep-dk-blue-bg); --ep-info-border: var(--ep-dk-blue-border); --ep-neutral: var(--ep-dk-muted); --ep-neutral-bg: var(--ep-dk-surface-2); --ep-neutral-border: var(--ep-dk-border); --ep-focus: var(--ep-dk-blue); /* Zatemnění pod modálním dialogem. */ --ep-backdrop: rgb(0 0 0 / 0.7); --ep-ramp-0: #23262c; --ep-ramp-1: #46232a; --ep-ramp-2: #6e2b34; --ep-ramp-3: #9c333e; --ep-ramp-4: var(--ep-dk-red); --ep-ramp-over: #ffb3b7; --ep-ramp-text: var(--ep-dk-text); --ep-ramp-text-deep: var(--ep-dk-bg); --ep-ring: 0 0 0 1px rgb(255 255 255 / 0.05); --ep-shadow-overlay: 0 10px 28px -6px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4); /* Na podkladu tmavším než 40 % černé předepisuje logomanuál bílou variantu loga. */ --ep-logo-url: url("../assets/logo/logo-2lfuk-white.svg"); --ep-mark-url: url("../assets/logo/znak-2lfuk-white.svg"); } } :root[data-theme="dark"] { color-scheme: dark; --ep-bg: var(--ep-dk-bg); --ep-surface: var(--ep-dk-surface); --ep-surface-alt: var(--ep-dk-surface-2); --ep-surface-sunken: var(--ep-dk-bg); --ep-border: var(--ep-dk-border); --ep-border-subtle: #22252b; --ep-border-strong: var(--ep-dk-border-strong); --ep-text: var(--ep-dk-text); --ep-text-secondary: #c8c8c8; --ep-text-muted: var(--ep-dk-muted); --ep-text-faint: #949494; --ep-text-disabled: #6b7079; --ep-text-on-accent: var(--ep-dk-bg); --ep-identity: var(--ep-dk-red); --ep-action: var(--ep-dk-red); --ep-action-hover: var(--ep-dk-red-hover); --ep-action-soft: var(--ep-dk-red-bg); --ep-action-soft-border: var(--ep-dk-red-border); --ep-ok: var(--ep-dk-green); --ep-ok-bg: var(--ep-dk-green-bg); --ep-ok-border: var(--ep-dk-green-border); --ep-wait: var(--ep-dk-amber); --ep-wait-bg: var(--ep-dk-amber-bg); --ep-wait-border: var(--ep-dk-amber-border); --ep-alert: var(--ep-dk-red); --ep-alert-bg: var(--ep-dk-red-bg); --ep-alert-border: var(--ep-dk-red-border); --ep-info: var(--ep-dk-blue); --ep-info-bg: var(--ep-dk-blue-bg); --ep-info-border: var(--ep-dk-blue-border); --ep-neutral: var(--ep-dk-muted); --ep-neutral-bg: var(--ep-dk-surface-2); --ep-neutral-border: var(--ep-dk-border); --ep-focus: var(--ep-dk-blue); /* Zatemnění pod modálním dialogem. */ --ep-backdrop: rgb(0 0 0 / 0.7); --ep-ramp-0: #23262c; --ep-ramp-1: #46232a; --ep-ramp-2: #6e2b34; --ep-ramp-3: #9c333e; --ep-ramp-4: var(--ep-dk-red); --ep-ramp-over: #ffb3b7; --ep-ramp-text: var(--ep-dk-text); --ep-ramp-text-deep: var(--ep-dk-bg); --ep-ring: 0 0 0 1px rgb(255 255 255 / 0.05); --ep-shadow-overlay: 0 10px 28px -6px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4); --ep-logo-url: url("../assets/logo/logo-2lfuk-white.svg"); --ep-mark-url: url("../assets/logo/znak-2lfuk-white.svg"); }