@pokela/components 2.2.0 → 2.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.2.0.
+React-komponentit: **Pokela Design System**, versio 2.4.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -41,7 +41,7 @@ import Link from 'next/link';
 
 - **Media, LogoRow, CaseText, CaseBlock, CaseBlocks, CaseBlockDerived, ListRowShowcase** — lukevat sivuston omaa sisältöä (`@/content`, `@/lib`)
 - **Nav, Footer** — tarvitsevat sivuston sanakirjan ja reitityksen
-- **BeforeAfter** — rakentuu Median varaan, ja Media lukee kuvamanifestia
+- **BeforeAfter, Video** — rakentuvat Median varaan, ja Media lukee kuvamanifestia
 - **ComponentView, PrintCv** — ovat riippumattomia mutta sivuston ominaisuuksia — lähdekoodinäkymä ja CV:n tulostusasu — eivät design systemin osia
 
 ## Tyylit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pokela/components",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
@@ -25,7 +25,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.2.0"
+    "@pokela/tokens": "^2.4.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/base.css

@@ -275,6 +275,21 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
 
 .media-fill { width: 100%; height: 100%; object-fit: cover; }
 
+/* Video: toistuu itsestään, joten taukonappi on aina näkyvissä
+   (päätös 11). Nurkassa paperin päällä, samaa metatekstiä kuin muu
+   sivun pieni teksti — ei kuvan päälle piirrettyä ikonia, joka
+   katoaisi vaaleaan kuvaan. */
+.video__toisto {
+  position: absolute;
+  inset-block-end: var(--space-12);
+  inset-inline-end: var(--space-12);
+  padding: var(--space-4) var(--space-8);
+  border: 0;
+  background: var(--paper);
+  color: var(--ink);
+  cursor: pointer;
+}
+
 /* Levy: kuva kokonaisena hillityn taustalevyn keskellä.
    Kuvakaappauksen oma tausta osui ennen suoraan sivun taustaa vasten,
    ja raja näytti sattumanvaraiselta. Levy antaa jokaiselle kuvalle
@@ -297,18 +312,23 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
   height: 100%;
   min-height: 0;
 }
-/* Varjo on aina tumma (--ink-l eikä teemaa seuraava --ink): vaalea
-   varjo tummalla levyllä olisi hehku, ei varjo. Tummassa teemassa se
-   jää lähes näkymättömäksi, ja hiusviiva kantaa rajan. */
+/* Varjo piirretään filterillä eikä box-shadow'lla: drop-shadow seuraa
+   kuvan alfakanavaa. Läpinäkyvä kuva (laitemockup, pyöristetyt
+   kulmat) saa varjon muotonsa mukaan, eikä sen ympärille piirry
+   suorakulmaista laatikkoa. Samasta syystä kuvalla ei ole omaa
+   hiusviivaa: raja olisi aina suorakulmio. Läpinäkymätön kaappaus
+   saa silti saman suorakulmaisen varjon kuin ennen.
+
+   Varjo on aina tumma (--ink-l eikä teemaa seuraava --ink): vaalea
+   varjo tummalla levyllä olisi hehku, ei varjo. */
 .media__levy-kuva {
   display: block;
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
-  outline: var(--hairline) solid var(--line);
-  box-shadow: 0 var(--space-12) var(--space-32) calc(var(--space-8) * -1)
-    color-mix(in srgb, var(--ink-l) 22%, transparent);
+  filter: drop-shadow(0 var(--space-12) var(--space-16)
+    color-mix(in srgb, var(--ink-l) 18%, transparent));
 }
 
 /* Hero: tausta jatkuu ruudun reunoihin, kuva pysyy sivun levyisenä.