@pokela/components 2.0.0 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.0.0.
+React-komponentit: **Pokela Design System**, versio 2.2.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pokela/components",
-  "version": "2.0.0",
+  "version": "2.2.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.0.0"
+    "@pokela/tokens": "^2.2.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/base.css

@@ -275,6 +275,59 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
 
 .media-fill { width: 100%; height: 100%; object-fit: cover; }
 
+/* Levy: kuva kokonaisena hillityn taustalevyn keskellä.
+   Kuvakaappauksen oma tausta osui ennen suoraan sivun taustaa vasten,
+   ja raja näytti sattumanvaraiselta. Levy antaa jokaiselle kuvalle
+   saman rajan, oli kuva vaalea, tumma tai kapea puhelinkaappaus.
+   Kulmat terävinä ja hiusviiva kuten muuallakin sivulla. */
+.media--levy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-24);
+  background: var(--badge-surface);
+  box-shadow: inset 0 0 0 var(--hairline) var(--line);
+}
+@media (min-width: 900px) { .media--levy { padding: var(--space-40); } }
+.media__levy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  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. */
+.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);
+}
+
+/* Hero: tausta jatkuu ruudun reunoihin, kuva pysyy sivun levyisenä.
+   border-image piirtää nauhan laatikon ulkopuolelle (outset) ilman
+   lisäelementtiä, joten jokainen hero saa sen samasta paikasta. Ulos
+   piirretty kuuluu näkyvään eikä vieritettävään ylivuotoon, joten
+   100vw ei tuo vaakavierityspalkkia. margin-block varaa nauhalle
+   tilan, ettei se peitä viereisiä osioita. */
+.media-hero {
+  border-image: linear-gradient(var(--badge-surface) 0 0) fill 0 / / var(--space-40) 100vw;
+  margin-block: var(--space-40);
+}
+@media (min-width: 900px) {
+  .media-hero {
+    border-image-outset: var(--space-72) 100vw;
+    margin-block: var(--space-72);
+  }
+}
+
 /* Paikanvaraajan merkintä: järjestysnumero ja tunniste. Vain
    kehityksessä (Media.tsx päättää), ja tarkoitus on että pudotettavan
    tiedoston nimen voi lukea suoraan sivulta ilman terminaalia.

package/styles/list-row.css

@@ -130,59 +130,54 @@
      pystykeskelle. Koko tulee .icon--l:stä. */
 }
 
-/* ---- käännös ------------------------------------------------------- */
+/* ---- hover ja käännös ---------------------------------------------
+
+   Hover on hiljainen pinta (--badge-surface), ei käännös. Täysi
+   musta/valkoinen-käännös jokaisella hiirenliikkeellä oli liian raju
+   molemmissa teemoissa. Käännös jää tilalle joka on oikeasti päällä:
+   avattu rivi (`aria-expanded`) ja staattinen `.invert`. */
+.list-row:hover,
+.list-row:focus-visible {
+  background: var(--badge-surface);
+  text-decoration: none;
+}
+/* Meta tummuu pinnalla: --ink-faint jäisi vaaleassa teemassa
+   --badge-surfacen päällä alle AA:n (4,49:1). */
+.list-row:hover .meta,
+.list-row:focus-visible .meta { color: var(--ink-muted); }
 
 /* `.invert` on mukana, jotta tila voidaan näyttää myös staattisena
    (esim. dokumentaatiossa) ilman omaa sääntöä — muuten .list-row:n
    oma `color` voittaisi utilityn samalla spesifisyydellä ja teksti
    jäisi näkymättömiin. `aria-expanded` on avatun rivin sama tila. */
-.list-row:hover,
-.list-row:focus-visible,
 .list-row.invert,
 .list-row[aria-expanded='true'] {
   background: var(--invert-surface);
   color: var(--invert-ink);
   text-decoration: none;
 }
-.list-row:hover .list-row__description,
-.list-row:focus-visible .list-row__description,
 .list-row.invert .list-row__description,
 .list-row[aria-expanded='true'] .list-row__description,
-.list-row:hover .meta,
-.list-row:focus-visible .meta,
 .list-row.invert .meta,
 .list-row[aria-expanded='true'] .meta { color: var(--invert-faint); }
 
-/* Focus-renkaan pitää näkyä käännetyllä pinnalla. */
-.list-row:focus-visible {
-  outline-color: var(--invert-ink);
-  outline-offset: calc(var(--focus-offset) * -2);
-}
+/* Focus-renkaan pitää näkyä myös käännetyllä pinnalla. */
+.list-row:focus-visible { outline-offset: calc(var(--focus-offset) * -2); }
+.list-row[aria-expanded='true']:focus-visible { outline-color: var(--invert-ink); }
 
 /* Sisarrivit vaimennetaan hoverin aikana. */
 .list-rows:hover .list-row:not(:hover) { color: var(--ink-faint); }
 .list-rows:hover .list-row:not(:hover) .list-row__description { color: var(--ink-faint); }
 
-/* Kosketus: ei hoveria, käännös :active-tilassa. Viimeisenä = voittaa. */
+/* Kosketus: ei hoveria, hiljainen pinta :active-tilassa. Viimeisenä = voittaa. */
 @media (hover: none) {
-  .list-row:hover {
-    background: transparent;
-    color: var(--ink);
-  }
-  .list-row:hover .list-row__description { color: var(--ink-muted); }
+  .list-row:hover { background: transparent; }
   .list-row:hover .meta { color: var(--ink-faint); }
   .list-rows:hover .list-row:not(:hover) { color: var(--ink); }
   .list-rows:hover .list-row:not(:hover) .list-row__description { color: var(--ink-muted); }
 
-  .list-row:active,
-  .list-row[aria-expanded='true'] {
-    background: var(--invert-surface);
-    color: var(--invert-ink);
-  }
-  .list-row:active .list-row__description,
-  .list-row[aria-expanded='true'] .list-row__description,
-  .list-row:active .meta,
-  .list-row[aria-expanded='true'] .meta { color: var(--invert-faint); }
+  .list-row:active { background: var(--badge-surface); }
+  .list-row:active .meta { color: var(--ink-muted); }
 }
 
 @media (prefers-reduced-motion: reduce) {