@pokela/components 2.11.0 → 2.12.0

package/README.md

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

package/guidelines/styles.md

@@ -32,3 +32,23 @@ things in columns, never in pixels. `Col` takes the span per breakpoint.
 
 **No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 9 marks<!-- /generated --> on
 a 16×16 grid with the same hairline as every border.
+
+## Buttons
+
+A button is a class, not a component: `btn` plus `btn--primary`, `btn--ghost`
+or `btn--text`, on a `<button>` or an `<a>`. Use one primary per view. The
+default size needs no class. Use `btn--s` in dense places such as a toolbar
+above a table, and `btn--l` only for the one main action on a page. Text
+buttons have one size. Keep at least `--space-12` between small buttons: each
+one still has a 44 px touch area.
+
+An icon-only button is `btn--icon` with `btn--primary` or `btn--ghost`, never
+`btn--text`. Always give it an `aria-label`, because nothing on screen names it.
+
+```jsx
+<button type="button" className="btn btn--ghost btn--s">Filter</button>
+<button type="button" className="btn btn--primary btn--icon btn--s" aria-label="New project">
+  <Icon name="plus" />
+</button>
+<a href="/contact" className="btn btn--primary btn--l">Get in touch <Icon name="arrow-right" /></a>
+```

package/package.json

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

package/styles/base.css

@@ -168,6 +168,39 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
 .btn--block { width: 100%; }
 @media (min-width: 600px) { .btn--block { width: auto; } }
 
+/* Koot (päätös 26). Oletus on m: 44 px, sama kuin --tap-min. s on
+   tiiviisiin näkymiin (työkalurivi), l sivun ainoaan päätoimintoon.
+   Kieli ei muutu koon mukana: viiva, paino ja käännös ovat samat.
+   Tekstinapilla ei ole kokoja, koska sillä ei ole pintaa. */
+.btn--s {
+  position: relative;
+  min-height: var(--space-32);
+  padding: var(--space-8) var(--space-16);
+}
+/* Näkyvä 32 px, osuma-alue silti --tap-min: näkymätön laajennus ylös
+   ja alas. Siksi s-nappien väli on vähintään --space-12, muuten
+   alueet menevät päällekkäin. Laajennus lasketaan reunaviivan
+   sisäpuolelta (absoluuttinen asemointi alkaa padding-laatikosta),
+   joten viiva vähennetään. */
+.btn--s::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2 - var(--hairline)) calc(var(--hairline) * -1);
+}
+.btn--l {
+  min-height: var(--space-56);
+  padding: var(--space-16) var(--space-32);
+  font-size: var(--text-body);
+}
+
+/* Pelkkä ikoni: neliö, jonka sivu on napin korkeus. Nimi tulee aina
+   aria-labelilla, koska tekstiä ei ole. Vain primary ja ghost. */
+.btn--icon { flex: none; width: var(--tap-min); padding: 0; }
+.btn--icon.btn--s { width: var(--space-32); }
+.btn--icon.btn--s::after { inset: calc((var(--space-32) - var(--tap-min)) / 2 - var(--hairline)); }
+.btn--icon.btn--l { width: var(--space-56); }
+.btn--icon.btn--l .icon { width: var(--icon-l); height: var(--icon-l); }
+
 /* Hover = käännös. Reunaviiva tulee border-colorista, ei varjosta. */
 .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
 .btn--primary:hover { background: var(--paper); color: var(--ink); }