OOS Digital Library — design system

Theme Lab

Jedna aplikace, jedny komponenty — a celý vzhled řízený jen tokeny. Přepínejte presety a laďte skupiny tokenů v panelu vpravo; komponenty se nemění, mění se jen hodnoty proměnných. One app, one set of components — the entire look driven by tokens alone. Switch presets and tune token groups in the panel on the right; the components never change, only variable values do.

Zpět na rozcestníkBack to the hub
Vše níže je živý prototyp ze sdílených komponent.Everything below is a live prototype built from the shared components.
DK Digitální knihovna OOS
JN npor. Nováková
Nalezeno Found 8 dokumentůdocuments
Seřadit:Sort:
Označení
Název
Aktualizace

Jak motivy fungujíHow themes work

Každý preset výše je jen sada hodnot CSS proměnných. Komponenty čtou tokeny (--gov-color-primary-500, --radius-md, --font-sans, --shadow-2, --btn-anim…), takže nový vzhled = nový soubor hodnot — žádné kopírování komponent, žádná ztráta funkčnosti, tmavý režim zůstává zachován. Vedle základní škály existují i rolové háčky — --radius-btn / -control / -panel / -overlay / -chip a --bw-panel / -control / -line — ve výchozím stavu nedefinované (komponenty mají vlastní záložní hodnoty); motiv jimi cílí zaoblení a sílu linek po skupinách prvků. Every preset above is just a set of CSS variable values. Components read tokens (--gov-color-primary-500, --radius-md, --font-sans, --shadow-2, --btn-anim…), so a new look = a new set of values — no component copies, no lost functionality, dark mode keeps working. Beyond the base scale there are role hooks — --radius-btn / -control / -panel / -overlay / -chip and --bw-panel / -control / -line — undefined by default (components carry their own fallbacks); a theme uses them to target corner rounding and line weight per element group.

Minimální vlastní motiv — příkladA minimal custom theme — example

„Motiv" ve smyslu brandingu tenanta = barvy + písmo + logotyp, cca 20 řádků. Vložte za styles.css: A tenant-branding “theme” = colors + type + wordmark, ~20 lines. Load it after styles.css: 

/* motiv „Knihovna Ostrava“ — theme.css */
@layer tweaks {
  /* Světlý režim — tokeny přepisujeme na <body>,
     nikdy na :root (tmavé hodnoty žijí na body a
     přebily by je). */
  body:not([data-theme="dark"]) {
    --gov-color-primary-500: #0F766E;  /* akce */
    --gov-color-primary-600: #0B5F58;  /* hover */
    --gov-color-primary-700: #094E48;  /* stisk */
    --gov-color-primary-100: #CCEAE7;
    --gov-color-primary-50:  #EAF7F5;
    --color-fg-link: #0F766E;
    --shadow-focus: 0 0 0 2px var(--color-bg-surface),
                    0 0 0 5px rgba(15,118,110,.45);
    --btn-primary-bg: #0F766E;
    --btn-primary-bg-hover: #0B5F58;
    --btn-primary-bg-pressed: #094E48;
  }
  /* Tmavý režim — světlejší akcenty, průsvitné tinty. */
  body[data-theme="dark"] {
    --gov-color-primary-500: #4CC4B8;
    --gov-color-primary-600: #6ED4C9;
    --gov-color-primary-100: rgba(76,196,184,.20);
    --gov-color-primary-50:  rgba(76,196,184,.12);
    --color-fg-link: #6ED4C9;
  }
  /* Písmo a tvar — jedna řádka na skupinu. */
  body { --font-sans: 'Public Sans', system-ui, sans-serif; }
}

Pravidla, která se vyplatí dodržetRules worth keeping

  • Tokeny na body, ne na :root. Tmavý režim je přemapování tokenů na body[data-theme="dark"] — přepis na :root by v tmavém režimu „zamrzl".Tokens on body, not :root. Dark mode re-maps tokens on body[data-theme="dark"] — a :root override would “freeze” in dark mode.
  • Pište do @layer tweaks. Vrstva je poslední v pořadí, takže vyhraje nad světlými i tmavými hodnotami bez !important.Write into @layer tweaks. It is the last layer, so it wins over both light and dark values without !important.
  • Vždy dodejte tmavou variantu. Minimálně světlejší akcent (500/600) a průsvitné tinty (50/100).Always ship a dark variant. At minimum a lighter accent (500/600) and translucent tints (50/100).
  • Focus ring následuje paletu. Přegenerujte --shadow-focus (a --btn-ring-halo), jinak zůstane modrý.The focus ring follows the palette. Re-emit --shadow-focus (and --btn-ring-halo) or it stays blue.
  • Kontrast ≥ 4,5:1 pro text na akcentní barvě — proto generátor drží 500 kolem L 0,55 (OKLCH).Contrast ≥ 4.5:1 for text on the accent — that is why the generator keeps 500 near L 0.55 (OKLCH).
  • Animace jsou také tokeny. --btn-anim, --btn-ease… „Bez animací" = 1 ms, ne 0 ms (eventy musí doběhnout).Motion is tokens too. --btn-anim, --btn-ease… “No animation” = 1 ms, not 0 ms (events must still fire).

CSS aktuálního nastaveníCSS of the current settings

Živě generovaný přepis přesně toho, co vidíte vlevo. Tlačítkem jej zkopírujete jako hotový motiv.A live transcript of exactly what you see on the left. Copy it as a ready-made theme.

/* … */