@pokela/components 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 1.1.0.
+React-komponentit: **Pokela Design System**, versio 1.2.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -23,6 +23,8 @@ tarvita.
 - `Accordion`
 - `Grid`
 - `Reveal`
+- `ThemeScript`
+- `ThemeToggle`
 
 ### Linkit
 
@@ -41,7 +43,6 @@ import Link from 'next/link';
 - **Nav, Footer** — tarvitsevat sivuston sanakirjan ja reitityksen
 - **BeforeAfter** — rakentuu 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
-- **ThemeToggle, ThemeScript** — teemanvaihto käyttää luokkaa `.nav__toggle`, joka on määritelty Navin tyyleissä. Kytkentä on lähteessä eikä paketoinnissa, joten se korjataan CSS:ää siistimällä eikä tätä listaa muuttamalla
 
 ## Tyylit
 

package/ThemeScript.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Teeman palautus ennen ensimmäistä maalausta.
+ *
+ * Ilman tätä sivu välähtäisi vaaleana ennen kuin tallennettu tumma
+ * teema ehtii päälle. Skripti on tarkoituksella pieni ja synkroninen,
+ * ja se ajetaan <head>issä ennen tyylejä.
+ *
+ * Ilman tallennettua valintaa data-themeä ei aseteta lainkaan, jolloin
+ * tokens.css:n `color-scheme: light dark` seuraa käyttöjärjestelmää.
+ */
+export declare const THEME_STORAGE_KEY = "pokela-theme";
+export default function ThemeScript(): import("react/jsx-runtime").JSX.Element;

package/ThemeScript.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Teeman palautus ennen ensimmäistä maalausta.
+ *
+ * Ilman tätä sivu välähtäisi vaaleana ennen kuin tallennettu tumma
+ * teema ehtii päälle. Skripti on tarkoituksella pieni ja synkroninen,
+ * ja se ajetaan <head>issä ennen tyylejä.
+ *
+ * Ilman tallennettua valintaa data-themeä ei aseteta lainkaan, jolloin
+ * tokens.css:n `color-scheme: light dark` seuraa käyttöjärjestelmää.
+ */
+export const THEME_STORAGE_KEY = 'pokela-theme';
+const script = `(function(){try{var t=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});if(t==='light'||t==='dark'){document.documentElement.setAttribute('data-theme',t)}}catch(e){}})()`;
+export default function ThemeScript() {
+    return _jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}

package/ThemeToggle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Teemanvaihto tekstinappina — ei ikonia, ei väriä.
+ * Kierto: järjestelmä → vaalea → tumma → järjestelmä.
+ *
+ * `data-theme` puuttuu kun valinta on "järjestelmä", jolloin
+ * tokens.css:n light-dark() seuraa prefers-color-schemeä.
+ */
+export default function ThemeToggle({ labels, }: {
+    labels: {
+        theme: string;
+        light: string;
+        dark: string;
+        system: string;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/ThemeToggle.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { THEME_STORAGE_KEY } from './ThemeScript';
+/**
+ * Teemanvaihto tekstinappina — ei ikonia, ei väriä.
+ * Kierto: järjestelmä → vaalea → tumma → järjestelmä.
+ *
+ * `data-theme` puuttuu kun valinta on "järjestelmä", jolloin
+ * tokens.css:n light-dark() seuraa prefers-color-schemeä.
+ */
+export default function ThemeToggle({ labels, }) {
+    const [theme, setTheme] = useState('system');
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+        try {
+            const stored = localStorage.getItem(THEME_STORAGE_KEY);
+            if (stored === 'light' || stored === 'dark')
+                setTheme(stored);
+        }
+        catch {
+            /* private mode — pidetään järjestelmän teema */
+        }
+    }, []);
+    function apply(next) {
+        setTheme(next);
+        const root = document.documentElement;
+        if (next === 'system')
+            root.removeAttribute('data-theme');
+        else
+            root.setAttribute('data-theme', next);
+        try {
+            if (next === 'system')
+                localStorage.removeItem(THEME_STORAGE_KEY);
+            else
+                localStorage.setItem(THEME_STORAGE_KEY, next);
+        }
+        catch {
+            /* valinta jää tälle sivulataukselle */
+        }
+    }
+    const order = ['system', 'light', 'dark'];
+    const label = { system: labels.system, light: labels.light, dark: labels.dark }[theme];
+    return (_jsx("button", { type: "button", className: "meta meta--s toggle", onClick: () => apply(order[(order.indexOf(theme) + 1) % order.length]), "aria-label": `${labels.theme}: ${label}`, 
+        /* Ennen hydraatiota näytetään neutraali merkintä, jottei
+           palvelimen ja selaimen tila eroa toisistaan. */
+        suppressHydrationWarning: true, children: mounted ? label : labels.theme }));
+}

package/index.d.ts

@@ -6,3 +6,5 @@ export { Accordion, useAccordionGroup } from './Accordion.js';
 export type { AccordionProps } from './Accordion.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
+export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';
+export { default as ThemeToggle } from './ThemeToggle.js';

package/index.js

@@ -4,3 +4,5 @@ export { default as ListRow } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
+export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';
+export { default as ThemeToggle } from './ThemeToggle.js';

package/package.json

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

package/styles/base.css

@@ -165,6 +165,27 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
   border-bottom: var(--hairline) solid currentColor;
 }
 
+/* Hiljainen kytkin: teemanvaihto ja vastaavat. Ei .btn-perheen jäsen —
+   typografia tulee .meta:sta ja nappimaisuus riisutaan kokonaan, joten
+   se ei kilpaile sivun oikeiden toimintojen kanssa. Kosketusalue on
+   silti täysi: padding kasvattaa sen ja yhtä suuri negatiivinen margin
+   kumoaa vaikutuksen taittoon.
+
+   Ei ollut navigaatiokohtainen, vaikka asui aiemmin nav.css:ssä nimellä
+   .nav__toggle. Nimi esti ThemeTogglen viennin komponenttipakettiin,
+   koska komponentti olisi tarvinnut Navin tyylit. */
+.toggle {
+  background: none;
+  border: 0;
+  padding: var(--space-12);
+  margin: calc(var(--space-12) * -1);
+  min-width: var(--tap-min);
+  min-height: var(--tap-min);
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--ease-standard);
+}
+.toggle:hover { color: var(--ink); }
+
 /* Tekstinapilla ei ole pintaa jota kääntää, joten hover on sama liike
    kuin .case-linkillä: viiva paksunee. Padding kevenee saman verran
    kuin viiva kasvaa, jotta napin korkeus ei muutu eikä ympärillä oleva