@pokela/components 1.2.0 → 2.1.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.2.0.
+React-komponentit: **Pokela Design System**, versio 2.1.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": "1.2.0",
+  "version": "2.1.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.2.0"
+    "@pokela/tokens": "^2.1.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); }

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 ------------------------------------------------------
@@ -146,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) {