@pokela/components 1.1.0 → 2.0.0

package/Accordion.js

@@ -4,7 +4,7 @@ import { useId, useState } from 'react';
 import Icon from './Icon';
 export function Accordion({ number, title, description, meta, children, open, onToggle, labels, }) {
     const id = useId();
-    return (_jsxs("div", { className: "accordion", children: [_jsxs("button", { type: "button", className: "list-row list-row--numbered list-row--expandable bleed", "aria-expanded": open, "aria-controls": id, onClick: onToggle, children: [_jsx("span", { className: "meta list-row__number", children: number }), _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: "list-row__title", children: title }), _jsx("span", { className: "list-row__description", children: description })] }), _jsx("span", { className: "meta list-row__meta", children: meta }), _jsx(Icon, { name: open ? 'minus' : 'plus', size: "l", className: "list-row__icon" }), _jsx("span", { className: "visually-hidden", children: open ? labels.close : labels.open })] }), open ? (_jsx("div", { id: id, className: "accordion__panel page", role: "region", "aria-label": title, children: children })) : null] }));
+    return (_jsxs("div", { className: "accordion", children: [_jsxs("button", { type: "button", className: "list-row list-row--numbered list-row--expandable bleed", "aria-expanded": open, "aria-controls": id, onClick: onToggle, children: [_jsx("span", { className: "meta list-row__number", children: number }), _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: "display-s list-row__title", children: title }), _jsx("span", { className: "body-s muted list-row__description", children: description })] }), _jsx("span", { className: "meta list-row__meta", children: meta }), _jsx(Icon, { name: open ? 'minus' : 'plus', size: "l", className: "list-row__icon" }), _jsx("span", { className: "visually-hidden", children: open ? labels.close : labels.open })] }), open ? (_jsx("div", { id: id, className: "accordion__panel page", role: "region", "aria-label": title, children: children })) : null] }));
 }
 /** Pitää huolen että vain yksi rivi on auki kerrallaan. */
 export function useAccordionGroup() {

package/ListRow.js

@@ -30,5 +30,5 @@ export default function ListRow({ title, number, description, meta, size = 's',
             className,
         ]
             .filter(Boolean)
-            .join(' '), children: [number ? _jsx("span", { className: "meta list-row__number", children: number }) : null, _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: "list-row__title", children: title }), description ? _jsx("span", { className: "list-row__description", children: description }) : null] }), meta ? _jsx("span", { className: "meta list-row__meta", children: meta }) : null] }));
+            .join(' '), children: [number ? _jsx("span", { className: "meta list-row__number", children: number }) : null, _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: `list-row__title ${size === 'm' ? 'display-m' : 'display-s'}`, children: title }), description ? _jsx("span", { className: "body-s muted list-row__description", children: description }) : null] }), meta ? _jsx("span", { className: "meta list-row__meta", children: meta }) : null] }));
 }

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 1.1.0.
+React-komponentit: **Pokela Design System**, versio 2.0.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": "2.0.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": "^2.0.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/accordion.css

@@ -20,11 +20,10 @@
 .detail__role { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
 @media (min-width: 900px) { .detail__role { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); } }
 .detail__role-col { display: flex; flex-direction: column; gap: var(--space-12); }
-.detail__role-title { margin: 0; font-size: var(--text-body-l); }
 .detail__role-note { color: var(--ink-faint); margin: 0; }
 
 .detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
-.detail__list li { font-size: var(--text-body-s); line-height: var(--lh-body-s); padding-left: var(--space-16); position: relative; }
+.detail__list li { padding-left: var(--space-16); position: relative; }
 .detail__list li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); }
 .detail__list--muted li { color: var(--ink-muted); }
 
@@ -33,7 +32,7 @@
 .detail__sections-body { display: flex; flex-direction: column; }
 .detail__section { padding-block: var(--space-24); border-top: var(--hairline) solid var(--line); }
 .detail__section:first-child { border-top: 0; padding-top: 0; }
-.detail__section-title { margin: 0 0 var(--space-8); font-size: var(--text-body-l); font-weight: var(--weight-500); }
+.detail__section-title { margin: 0 0 var(--space-8); }
 .detail__section-body { margin: 0; color: var(--ink-muted); }
 
 .detail__media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }

package/styles/base.css

@@ -53,6 +53,14 @@ img, svg, video { display: block; max-width: 100%; }
 .body-l { font-size: var(--text-body-l); line-height: var(--lh-body-l); margin: 0; }
 .body-s { font-size: var(--text-body-s); line-height: var(--lh-body-s); margin: 0; }
 
+/* Pieni otsikko joka ei ole display: UI-fontti painolla 500. Tätä
+   yhdistelmää käytettiin neljässä paikassa ilman nimeä, joten Figmassa
+   ei voinut olla sille tyyliä — nimetön ei ole peilattavissa.
+
+   Fonttiperhe on mukana vaikka body antaa sen perintönä — <h3> ja <h4>
+   eivät peri sitä kaikissa selaimissa. */
+.title { font-family: var(--font-ui); font-size: var(--text-body-l); line-height: var(--lh-body-l); font-weight: var(--weight-500); margin: 0; }
+
 /* Leipätekstin mitta. Ei koskaan yli 62 merkkiä. */
 .measure { max-width: var(--measure); }
 
@@ -70,7 +78,16 @@ img, svg, video { display: block; max-width: 100%; }
   color: var(--ink-faint);
 }
 .meta--s { font-size: var(--text-meta-s); line-height: var(--lh-meta-s); letter-spacing: var(--tr-meta-s); }
-.meta--ink { color: var(--ink); }
+
+/* ---- värit -----------------------------------------------------------
+   Nimetty tokenin mukaan, ei paikan. Seitsemän komponenttiluokkaa teki
+   tämän omalla nimellään — seitsemän nimeä yhdelle tehtävälle.
+
+   Järjestys on merkitsevä: .meta asettaa oman värinsä, ja nämä ovat
+   samaa tarkkuutta, joten niiden on tultava sen jälkeen voittaakseen. */
+.ink { color: var(--ink); }
+.muted { color: var(--ink-muted); }
+.faint { color: var(--ink-faint); }
 
 a { color: inherit; text-decoration: none; }
 a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
@@ -165,6 +182,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

package/styles/list-row.css

@@ -64,18 +64,7 @@
   min-width: 0;
 }
 
-.list-row__title {
-  font-family: var(--font-display);
-  font-size: var(--text-display-s);
-  line-height: var(--lh-display-s);
-  letter-spacing: var(--tr-display-s);
-}
 
-.list-row__description {
-  font-size: var(--text-body-s);
-  line-height: var(--lh-body-s);
-  color: var(--ink-muted);
-}
 
 /* ---- numerollinen -------------------------------------------------- */
 
@@ -103,11 +92,6 @@
   .list-row--m.list-row--numbered { grid-template-columns: var(--space-56) minmax(0, 1fr) 260px; }
 }
 .list-row--m .list-row__main { gap: var(--space-12); }
-.list-row--m .list-row__title {
-  font-size: var(--text-display-m);
-  line-height: var(--lh-display-m);
-  letter-spacing: var(--tr-display-m);
-}
 .list-row--m .list-row__description { max-width: var(--measure); }
 
 /* ---- avautuva ------------------------------------------------------