@pokela/components 2.6.0 → 2.7.0

package/ExplodedView.d.ts

@@ -10,6 +10,12 @@ import { type ReactNode } from 'react';
  * - Osoitin kääntää pinoa ja erkanee kerroksia.
  * - Elementit, joilla on sama `data-kohde`, syttyvät yhdessä: osoitin
  *   komponentin päällä näyttää sen jokaisessa kerroksessa.
+ * - `data-token="ink"` (väri `--ink`) tai `data-token="display-l"`
+ *   (tyyppi `--text-display-l`) merkitsee tokenin. Osoitin tokenin päällä
+ *   sytyttää muiden kerrosten elementit, joiden laskettu tyyli käyttää
+ *   sen arvoa, ja osoitin elementin päällä sytyttää sen tokenit. Käyttöä
+ *   ei merkitä käsin: se luetaan selaimen lasketusta tyylistä, joten se
+ *   pysyy totena kun tyylit muuttuvat.
  * - Klikkaus nostaa kerroksen kerrallaan esiin ja lopuksi palauttaa
  *   koko pinon.
  * - Tilassa `auki` vieritys kokoaa kerrokset yhdeksi suoraksi

package/ExplodedView.js

@@ -118,14 +118,57 @@ export default function ExplodedView({ layers, label, tila = 'auki', className,
             }
             liiku();
         };
+        /* Tokenin arvo selaimen laskemana: väri rgb-muodossa, tyyppi pikseleinä. */
+        function tokeninArvo(nimi) {
+            const apu = document.createElement('i');
+            apu.style.color = `var(--${nimi})`;
+            apu.style.fontSize = `var(--text-${nimi})`;
+            hero.append(apu);
+            const s = getComputedStyle(apu);
+            const tyyppi = getComputedStyle(hero).getPropertyValue(`--text-${nimi}`).trim() !== '';
+            const arvo = tyyppi ? { tyyppi: s.fontSize } : { vari: s.color };
+            apu.remove();
+            return arvo;
+        }
+        /* Käyttääkö elementti arvoa itse: teksti omana tekstinään, väri
+           myös taustana tai viivana. */
+        function kayttaa(x, arvo) {
+            const s = getComputedStyle(x);
+            const teksti = [...x.childNodes].some((c) => c.nodeType === 3 && c.textContent?.trim());
+            if (arvo.tyyppi)
+                return teksti && s.fontSize === arvo.tyyppi;
+            return ((teksti && s.color === arvo.vari) ||
+                s.backgroundColor === arvo.vari ||
+                (parseFloat(s.borderTopWidth) > 0 && s.borderTopColor === arvo.vari) ||
+                (parseFloat(s.borderBottomWidth) > 0 && s.borderBottomColor === arvo.vari));
+        }
+        const sammuta = () => el.querySelectorAll('.exploded--valaistu').forEach((x) => x.classList.remove('exploded--valaistu'));
         const valaise = (e) => {
-            el.querySelectorAll('.exploded--valaistu').forEach((x) => x.classList.remove('exploded--valaistu'));
-            const k = e.target.closest('[data-kohde]');
-            if (!k)
+            sammuta();
+            const kohde = e.target;
+            const token = kohde.closest('[data-token]');
+            const tokenit = [...el.querySelectorAll('[data-token]')];
+            if (token) {
+                /* Token: sen käyttäjät muissa kerroksissa. */
+                const arvo = tokeninArvo(token.dataset.token);
+                const oma = token.closest('.exploded__layer');
+                token.classList.add('exploded--valaistu');
+                el.querySelectorAll('.exploded__plate, .exploded__plate *').forEach((x) => {
+                    if (x.closest('.exploded__layer') !== oma && !x.closest('[data-token]') && kayttaa(x, arvo))
+                        x.classList.add('exploded--valaistu');
+                });
                 return;
-            el.querySelectorAll(`[data-kohde="${k.dataset.kohde}"]`).forEach((x) => x.classList.add('exploded--valaistu'));
+            }
+            /* Komponentti kaikissa kerroksissa ja elementin omat tokenit. */
+            const k = kohde.closest('[data-kohde]');
+            if (k)
+                el.querySelectorAll(`[data-kohde="${k.dataset.kohde}"]`).forEach((x) => x.classList.add('exploded--valaistu'));
+            if (kohde.closest('.exploded__plate'))
+                tokenit.forEach((t) => {
+                    if (kayttaa(kohde, tokeninArvo(t.dataset.token)))
+                        t.classList.add('exploded--valaistu');
+                });
         };
-        const sammuta = () => el.querySelectorAll('.exploded--valaistu').forEach((x) => x.classList.remove('exploded--valaistu'));
         /* Vieritys kokoaa, kun kuva poistuu yläreunasta. */
         const vieritys = () => {
             const r = hero.getBoundingClientRect();

package/README.md

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

package/guidelines/components.md

@@ -50,6 +50,10 @@ the total duration.
 `ExplodedView` shows layers as plates in 3D space: how a finished surface is
 built from its parts. Each layer is real markup, not an image. Give elements
 the same `data-kohde` in several layers and they light up together on hover.
+Mark a token with `data-token` (`"ink"` for `--ink`, `"display-l"` for
+`--text-display-l`): hovering it lights every element in the other layers
+whose computed style uses that value, and hovering an element lights its
+tokens. Usage is read from computed styles, never marked by hand.
 `tila="koottu"` starts with the layers collapsed into one surface. Put no
 links or buttons inside the layers; the whole view is one image to a screen
 reader, described by `label`.

package/package.json

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

package/styles/exploded-view.css

@@ -62,13 +62,22 @@
   transition: opacity var(--dur-slow) var(--ease-standard);
 }
 
+/* Lähde on taustapinnalla, ei paperilla: ink-faint jää siinä alle 4.5:1. */
+.exploded__name .meta--s { color: var(--ink-muted); }
+
 .exploded__stack--kohdistus .exploded__layer:not(.exploded__layer--aktiivinen) .exploded__plate,
 .exploded__stack--kohdistus .exploded__layer:not(.exploded__layer--aktiivinen) .exploded__name { opacity: 0.35; }
+/* Himmennetty levy ei ota osoitinta: nostetun levyn peitetyt osat,
+   kuten viuhkassa piiloon jäävät tokenit, saa osoitettua. */
+.exploded__stack--kohdistus .exploded__layer:not(.exploded__layer--aktiivinen) { pointer-events: none; }
 
-/* Sama kohde kaikissa kerroksissa: katkoviiva muuttuu yhtenäiseksi. */
-.exploded [data-kohde] {
-  outline: var(--hairline) dashed transparent;
+/* Sama kohde tai token kaikissa kerroksissa saa yhtenäisen viivan.
+   Korostuksen on oltava pohjaa spesifisempi: kun se ei ollut,
+   luokka vaihtui mutta viiva jäi läpinäkyväksi. */
+.exploded__plate,
+.exploded__plate * {
+  outline: var(--hairline) solid transparent;
   outline-offset: var(--space-4);
-  transition: outline-color var(--dur-fast) var(--ease-standard);
 }
-.exploded--valaistu { outline: var(--hairline-strong) solid var(--ink); }
+.exploded__plate * { transition: outline-color var(--dur-fast) var(--ease-standard); }
+.exploded .exploded--valaistu { outline: var(--hairline-strong) solid var(--ink); }