@pokela/components 2.5.1 → 2.5.2

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.5.1.
+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.1.
 
 ```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/setup.md

@@ -3,26 +3,8 @@
 Install **both** packages as direct dependencies, at the same, latest
 version. `@pokela/components` uses the tokens of the same release.
 
-Import the stylesheet once, in the app entry:
-
-```js
-import '@pokela/components/styles.css';
-```
-
-It pulls in the tokens. Do not import the tokens stylesheet separately.
-
-Load the two typefaces from Google Fonts, once, in the document head. The
-tokens fall back to them by name (`--font-display` → Bodoni Moda,
-`--font-ui` → Archivo); without them the page renders in Georgia and
-Helvetica.
-
-<!-- generated:make-fontit -->
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Bodoni+Moda:wght@400;500&display=swap" rel="stylesheet">
-```
-<!-- /generated -->
+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/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.1",
+  "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": {
     ".": {
@@ -26,7 +27,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.5.1"
+    "@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';