@jelinek/ui 0.9.0 → 0.9.2

package/dist/theme/base.css

@@ -253,6 +253,25 @@
 			color var(--dur-slow) var(--ease);
 	}
 
+	/* KURZÍVA SE NEPOUŽÍVÁ NIKDY (brand → Typografie; majitel 14. 8. 2026) —
+	   žádné písmo značky nemá skloněný řez a prohlížeč by si ho syntetizoval.
+	   <em>/<i> se narovnává a zvýrazňuje tučně („ke zvýraznění slouží tučné
+	   řezy“). Mirrors the identical rule in jelinek.css. */
+	em,
+	i {
+		font-style: normal;
+		font-weight: 700;
+	}
+
+	/* <strong> pinned to Bold: the default `bolder` is RELATIVE — one step
+	   up from Light (300) is Regular (400), a face outside the role system.
+	   Contexts with their own rule (.card strong = Medium, Demo's
+	   [&_strong]:font-medium utility) still win on specificity/layer. */
+	b,
+	strong {
+		font-weight: 700;
+	}
+
 	/* jelinek.css:316. The one flex child that should actually grow — header,
 	   chapter-nav and footer keep their natural (content) height; whatever
 	   space is left over goes to <main>, pushing the footer down to the
@@ -372,6 +391,9 @@
 	}
 	.serif {
 		font-family: var(--font-serif);
+		/* Archer only has Book (400) and Bold — a surrounding Light must not
+		   be inherited into serif text. */
+		font-weight: 400;
 	}
 	.small {
 		font-size: var(--step-down1);

package/dist/theme/extras.css

@@ -19,3 +19,65 @@
 [data-division='mattress'] {
 	--color-accent-text: var(--color-accent-text-mattress);
 }
+
+/* Jelen je jen hnědý, nebo bílý (brand → Znak, Užití s produktovými
+   barvami): divizní přetéma přemapovává --JELINEK-BROWN na magentu, ale pro
+   jelena je to zakázaný stav — pod divizí Zdravý spánek přechází KAŽDÉ
+   obsahové logo na bílou, divizní barvu jelena. Zrcadlí stejné pravidlo
+   v jelinek.css u .content-logo. */
+[data-division='mattress'] [data-content-logo],
+[data-theme='mattress'] [data-content-logo] {
+	color: var(--color-fg-inverse);
+}
+
+/* Skeleton shimmer (majitel, 14. 8. 2026): placeholder při načítání nese
+   projíždějící světlý gradient, jak je dnes zvykem — ne jen pulz. Barvy
+   jsou tokeny (klidová --bg-gray, projíždějící světlo --bg-white), takže
+   se v tmavém režimu překlopí samy. Smyčka 1,5 s je vlastní hodnota:
+   pohybové tokeny (--dur-*) popisují přechody stavů, ne nekonečné smyčky.
+   Kdo si v systému vypnul animace, dostane klidnou plochu — první kousek
+   prefers-reduced-motion v kitu (zásobník: Ohled na omezení pohybu). */
+@keyframes skeleton-shimmer {
+	to {
+		transform: translateX(100%);
+	}
+}
+.skeleton-shimmer {
+	position: relative;
+	overflow: hidden;
+	background: var(--color-surface-gray);
+}
+/* Světelný pás jede přes celou plochu jako vrstva nad ní (transform, ne
+   background-position) — na malém řádku i velké fotce je pohyb stejně
+   viditelný a nemá hluchá místa. */
+.skeleton-shimmer::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	transform: translateX(-100%);
+	background: linear-gradient(90deg, transparent, var(--color-surface) 55%, transparent);
+	animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.skeleton-shimmer::after {
+		content: none;
+	}
+}
+
+/* Ikona rozhraní (Google icons jako inline SVG — majitel, 28. 8. 2026,
+   pravidla /ui/ikony): obal, který dává ikoně rozměr a posazení na účaří.
+   V kitu ho vykresluje komponenta Icon.svelte; barva se dědí přes
+   fill="currentColor" v souboru. Zrcadlo v assets/css/jelinek.css —
+   měňte obě místa najednou. */
+.icon {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	vertical-align: -0.2em; /* posadí ikonu na účaří okolního textu */
+	line-height: 1;
+}
+.icon > svg {
+	display: block;
+	width: 100%;
+	height: 100%;
+}

package/dist/theme/fonts.css

@@ -21,13 +21,12 @@
 
    Reconciled against assets/css/jelinek.css's @font-face block (the
    authority for which faces exist): every face declared there is declared
-   here too, with the same family name, weight and filename. That now
-   includes Archer Medium (500) — the file had been in assets/fonts/ and in
-   its README since 03ee9de, but with no @font-face anywhere, so any request
-   for a 500-weight Archer silently fell back to Book. Declaring it makes
-   the README true and gives the designer the option of Medium emphasis in
-   prose; nothing requests it yet (prose <strong> is plain Bold, his
-   7cd378c). */
+   here too, with the same family name, weight and filename. Only the ROLE
+   faces are loaded (majitel, 21. 8. 2026): Walsheim Light/Medium/Bold,
+   Archer Book/Bold, Avenir Demi (logo subtitle). Regular, Black, Avenir
+   Regular/Bold and Archer Medium stay in assets/fonts/ for other projects,
+   but the web never declares them — a stray request falls back and the
+   font-faces e2e catches it. */
 @font-face {
 	font-family: 'GT Walsheim Pro';
 	src: url('/assets/fonts/GT-Walsheim-Pro-Light.woff2') format('woff2');
@@ -35,13 +34,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'GT Walsheim Pro';
-	src: url('/assets/fonts/GT-Walsheim-Pro-Regular.woff2') format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'GT Walsheim Pro';
 	src: url('/assets/fonts/GT-Walsheim-Pro-Medium.woff2') format('woff2');
@@ -56,20 +48,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'GT Walsheim Pro';
-	src: url('/assets/fonts/GT-Walsheim-Pro-Black.woff2') format('woff2');
-	font-weight: 900;
-	font-style: normal;
-	font-display: block;
-}
-@font-face {
-	font-family: 'Avenir Next LT Pro';
-	src: url('/assets/fonts/AvenirNextLTPro-Regular.woff2') format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Avenir Next LT Pro';
 	src: url('/assets/fonts/AvenirNextLTPro-Demi.woff2') format('woff2');
@@ -77,13 +55,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'Avenir Next LT Pro';
-	src: url('/assets/fonts/AvenirNextLTPro-Bold.woff2') format('woff2');
-	font-weight: 700;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Archer';
 	src: url('/assets/fonts/Archer-Book.woff2') format('woff2');
@@ -91,13 +62,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'Archer';
-	src: url('/assets/fonts/Archer-Medium.woff2') format('woff2');
-	font-weight: 500;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Archer';
 	src: url('/assets/fonts/Archer-Bold.woff2') format('woff2');
@@ -105,3 +69,6 @@
 	font-style: normal;
 	font-display: block;
 }
+/* Ikony rozhraní nejsou písmo (majitel, 28. 8. 2026): Google icons se
+   vkládají jako inline SVG z assets/icons/material/ — komponenta Icon.svelte,
+   pravidla /ui/ikony. Do stránky tak jde jen to, co opravdu ukazuje. */

package/dist/theme/tokens.css

@@ -16,8 +16,8 @@
   --ON-JELINEK-BLACK: hsl(0, 0%, 95%);
   --bg-white: hsl(0, 0%, 100%);
   --bg-gray: hsl(0, 0%, 95%);
-  --bg-brown: hsl(29, 44%, 95%);
-  --bg-magenta: hsl(324, 100%, 95%);
+  --bg-brown: hsl(27, 58%, 96.3%);
+  --bg-magenta: hsl(324, 85%, 92%);
   --bg-black: hsl(0, 0%, 0%);
   --border-subtle: hsl(0, 0%, 91%);
   --text-black: hsl(0, 0%, 5%);
@@ -45,13 +45,20 @@
   --glass-fill: hsl(0, 0%, 100%, 0.5);
   --glass-border: hsl(0, 0%, 100%, 0.75);
   --glass-filter: blur(25px) saturate(140%);
-  --focus-color: var(--JELINEK-BROWN);
+  --overlay-scrim: hsl(0, 0%, 0%, 0.5);
+  --overlay-filter: blur(4px);
+  --z-bar: 40;
+  --z-chapter-nav: 49;
+  --z-header: 50;
+  --z-overlay: 1200;
+  --z-toast: 1500;
+  --focus-color: var(--JELINEK-BLACK);
   --focus-width: 2px;
   --focus-offset: 2px;
-  --font-primary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
+  --font-primary: "GT Walsheim Pro", "Arial Black", Arial, Helvetica, sans-serif;
   --font-secondary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
-  --font-serif: "Archer", Georgia, "Times New Roman", serif;
-  --page-max: 1180px;
+  --font-serif: "Archer", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
+  --page-max: 1480px;
   --header-h: 70px;
   --subnav-h: 58px;
   --step0: 1rem;
@@ -72,6 +79,13 @@
   --space-section: clamp(24px, 4vw, 48px);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-base: 0s;
+    --dur-slow: 0s;
+  }
+}
+
 @media (min-width: 640px) {
   :root {
     --header-h: 94px;
@@ -82,8 +96,8 @@
 .dark {
   --bg-white: hsl(0, 0%, 5%);
   --bg-gray: hsl(0, 0%, 15%);
-  --bg-brown: hsl(29, 44%, 10%);
-  --bg-magenta: hsl(324, 100%, 10%);
+  --bg-brown: hsl(27, 58%, 10%);
+  --bg-magenta: hsl(324, 85%, 10%);
   --bg-black: hsl(0, 0%, 0%);
   --text-black: hsl(0, 0%, 92%);
   --text-muted1: hsl(0, 0%, 62%);
@@ -105,7 +119,7 @@
   --sem-error-strong: hsl(5, 100%, 54%);
   --glass-fill: hsl(0, 0%, 0%, 0.6);
   --glass-border: hsl(0, 0%, 100%, 0.25);
-  --focus-color: var(--JELINEK-BROWN-HIGHLIGHT);
+  --focus-color: var(--JELINEK-BLACK);
   --border-subtle: hsl(0, 0%, 20%);
   --border-highlight-white: hsl(0, 0%, 40%);
   --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.063), 0px 12px 12px hsl(0, 0%, 0%, 0.188);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jelinek/ui",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
   "license": "UNLICENSED",
   "type": "module",
@@ -49,9 +49,11 @@
     "test": "vitest run",
     "gen:tokens": "node scripts/gen-tokens.js",
     "check:tokens": "node scripts/gen-tokens.js --check",
+    "gen:icons": "node scripts/gen-icons.js",
+    "check:icons": "node scripts/gen-icons.js --check",
     "check:css-lock": "node scripts/check-css-lock.js",
     "test:e2e": "pnpm run build:showcase && playwright test",
-    "prepublishOnly": "pnpm check:tokens && pnpm check:css-lock && pnpm check && pnpm test && pnpm build"
+    "prepublishOnly": "pnpm check:tokens && pnpm check:icons && pnpm check:css-lock && pnpm check && pnpm test && pnpm build"
   },
   "peerDependencies": {
     "svelte": "^5.56.3",