@pokela/components 2.5.0 → 2.5.2

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.5.0.
+React-komponentit: **Pokela Design System**, versio 2.5.2.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -10,11 +10,11 @@ React-komponentit: **Pokela Design System**, versio 2.5.0.
 
 ```js
 import { ListRow, Icon, Accordion, Grid, Col, Reveal } from '@pokela/components';
-import '@pokela/components/styles.css';
 ```
 
-`styles.css` tuo myös `@pokela/tokens`:n muuttujat, joten erillistä tuontia ei
-tarvita.
+Tyylit, `@pokela/tokens`:n muuttujat ja fontit (Google Fonts) latautuvat
+komponenttien mukana. Erillistä tuontia ei tarvita. Ilman bundleria
+tyylit saa myös suoraan: `@pokela/components/styles.css`.
 
 ## Komponentit
 

package/guidelines/components.md

@@ -0,0 +1,49 @@
+# Components
+
+Use these instead of building an equivalent.
+
+<!-- generated:make-komponentit -->
+- `Icon`, `ICON_NAMES`
+- `ListRow`
+- `Accordion`, `useAccordionGroup`
+- `Timeline`, `TimelineItem`
+- `Grid`, `Col`
+- `Reveal`
+- `ThemeScript`, `THEME_STORAGE_KEY`
+- `ThemeToggle`
+<!-- /generated -->
+
+`ListRow` is the signature component. Use it for any list of items — a work
+list, an index, a menu. Its three visual variants are modifiers on one row,
+not separate components.
+
+`ListRow` renders a plain `<a>`. In a router-based app, pass the router's link
+component instead:
+
+```jsx
+<ListRow as={Link} title="Work title" href="/work/example" />
+```
+
+To show a row as selected, use `className="invert"` — not a new colour.
+
+`ListRow` already applies `bleed` itself. Do not pass it again in `className`.
+
+`Accordion` is the same row as a `<button>`. Use it when the row expands
+rather than navigates. Only one may be open at a time; `useAccordionGroup`
+handles that.
+
+`Timeline` is a vertical list of dated or timed items. Put `TimelineItem`s
+inside it; the labels line up because they share the list's grid. Use
+`variant="emphasis"` for the one item that matters most and `variant="end"`
+for the last. `weight` (0–1) stretches an item's rail, e.g. by its share of
+the total duration.
+
+```jsx
+<Timeline>
+  <TimelineItem label="0.00" title="Tokens" meta="under a second" />
+  <TimelineItem label="0.03" title="Images" meta="5 min 32 s" variant="emphasis" weight={0.9} />
+  <TimelineItem label="5.35" title="Site built" variant="end" />
+</Timeline>
+```
+
+`Reveal` fades its children in on scroll. Wrap sections, not single elements.

package/guidelines/setup.md

@@ -0,0 +1,10 @@
+# Setup
+
+Install **both** packages as direct dependencies, at the same, latest
+version. `@pokela/components` uses the tokens of the same release.
+
+Styles, tokens and typefaces load with the components. Do not import any stylesheet or add font
+links yourself.
+
+Component props are typed. Read them from the package — they are not repeated
+in these guidelines, because a copy would go stale.

package/guidelines/styles.md

@@ -0,0 +1,34 @@
+# Styles
+
+**Do not use Tailwind utility classes for design system values.** This system
+is plain CSS: global classes that come with the components, and CSS variables
+for values. Writing `bg-blue-500` or `rounded-lg` bypasses the system and
+produces the wrong result.
+
+## Headings
+
+Typography classes set the look, not the meaning. A page heading is an `<h1>`,
+a section heading an `<h2>`, and so on — never a `<p>` carrying a display
+class. The class and the element are two separate decisions, and a screen
+reader only hears the element.
+
+```jsx
+<h1 className="display-xl">Selected work</h1>
+```
+
+## Typography
+
+Two families. `--font-display` (Bodoni Moda, a serif) is for display sizes
+only — headings and the wordmark. `--font-ui` (Archivo) is for everything
+else. Never set body text in the display face.
+
+<!-- generated:make-painot -->**No font weight other than 400, 500 or 600.**<!-- /generated --> Only those are loaded, and
+`font-synthesis-weight` is `none`, so any other weight silently renders wrong.
+
+## Layout
+
+<!-- generated:make-sarakkeet -->`Grid` is 12 columns: 4 on mobile, 8 from 600px, 12 from 900px.<!-- /generated --> Place
+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 6 marks<!-- /generated --> on
+a 16×16 grid with the same hairline as every border.

package/guidelines/tokens.md

@@ -0,0 +1,18 @@
+# Tokens
+
+Use CSS variables for every value: `var(--ink)`, `var(--space-24)`,
+`var(--hairline)`. Never write a raw colour, length or font weight.
+
+**No accent colour.** This system has none. Emphasis is a black and white
+inversion — `--invert-surface` with `--invert-ink` — or the quiet
+`--badge-surface`. Do not introduce a brand blue, a primary green, or any
+coloured button. Colour on the page comes only from photographs.
+
+**No shadows.** There are no shadow tokens. Separation is a 1px line
+(`--hairline`), never elevation.
+
+**No rounded corners.** `--radius` is `0`. Everything is square.
+
+<!-- generated:make-valit -->**No spacing outside the scale.** 16 steps, each named by its value:<!-- /generated -->
+`--space-24` is 24px. If a value is missing, use the nearest step rather than
+inventing one.

package/index.d.ts

@@ -1,3 +1,4 @@
+import './styles.css';
 export { default as Icon, ICON_NAMES } from './Icon.js';
 export type { IconName, IconSize, IconProps } from './Icon.js';
 export { default as ListRow } from './ListRow.js';

package/index.js

@@ -1,4 +1,5 @@
 /* @pokela/components — kokooma. Generoitu, ks. scripts/paketti-komponentit.mjs. */
+import './styles.css';
 export { default as Icon, ICON_NAMES } from './Icon.js';
 export { default as ListRow } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@pokela/components",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./index.js"
   ],
   "exports": {
     ".": {
@@ -21,11 +22,12 @@
     "*.d.ts",
     "styles.css",
     "styles/",
+    "guidelines/",
     "README.md",
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.5.0"
+    "@pokela/tokens": "^2.5.2"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles.css

@@ -1,4 +1,5 @@
 /* @pokela/components — kaikki tyylit. Järjestys on merkitsevä. */
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Bodoni+Moda:wght@400;500&display=swap');
 @import '@pokela/tokens/tokens.css';
 @import './styles/base.css';
 @import './styles/icon.css';