loon-bulma-react 2024.0.0 → 2024.0.1

package/README.md

@@ -13,21 +13,14 @@
 
 ## Installatie <a id="installatie"></a>
 
-### Voor de laatste versie:
-
-Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` moet je dan wel even toevoegen. Als je deze tag niet toevoegd, installeert npm de in de `package.json` opgegeven versie.
+Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` moet je dan wel even toevoegen. Als je deze tag niet toevoegd, installeert npm de in de `package.json` opgegeven versie. Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.
 
 ```bash
 # installeer de meest recente versie van de package. (& update de package.json)
 npm install --save bulma loon-bulma-react@latest
 # installeer de versie die in package.json is gedefinieerd
-```
-
-### Voor een versie die hoort bij een bepaald jaar (Bijvoorbeeld in Loon-2021).
-
-Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.
-
-```bash
+npm install --save bulma loon-bulma-react
+# installeer de versie die hoort bij het jaar 2022
 npm install --save loon-bulma-react@y2022
 ```
 
@@ -53,19 +46,41 @@ Voor het meeste recente Loon-jaar kan je _wel_ `npm install loon-bulma-react@lat
 > - `@y2020` --> Testversie voor **2020**, installeren met `npm install loon-bulma-react@y2021`.
 > - `@y2021` --> Versie voor **2021**, installeren met `npm install loon-bulma-react@y2021`.
 > - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`.
-> - `@y2023` --> Versie voor **2023**, installeren met `npm install loon-bulma-react@y2023`. Zelfde als `latest`
-> - `@latest` --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`
-> - `@experimental` --> Versie om te testen _(TR!)_ van wat dingen`npm install loon-bulma-react@experimental`
+> - `@y2023` --> Versie voor **2023**, installeren met `npm install loon-bulma-react@y2023` of `loon-bulma-react@latest`
+> - `@y2024` --> Versie voor **2024**, installeren met `npm install loon-bulma-react@y2024`.
+> - `@latest` --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`.
+> - `@beta` --> Versie om te testen _(TR!)_ van wat dingen`npm install loon-bulma-react@beta`
 
-## Gebruik <a id="gebruik"></a>
+## Gebruik de styles <a id="gebruik"></a>
 
-in `index.tsx` importeer je de styles. Je kan ze ook allemaal apart importeren in een eigen stylesheet, maar begin dan met de `variables.scss`, die zijn overal nodig.
+in `index.tsx` importeer je de styles.
 
 ```tsx
 import 'loon-bulma-react/styles/_all.scss';
 ```
 
-##### **_LET OP: Hiervoor moet `sass` geinstalleerd zijn!_**
+Of in een eigen stylesheet (_`styles.scss`_). Dan kan je ook nog de kleuren aanpassen, als je die niet mooi vind.
+**_LET OP: Hiervoor moet `sass` geinstalleerd zijn! (`'npm i -D sass'`)_**
+
+```scss
+$primary: #28ff00;
+@import '~loon-bulma-react/styles/_all_.scss';
+```
+
+De meeste kleuren staan wel vast over alle versies heen, alleen de `$primary` en de `$loon` kleuren wijzigen elk jaar.
+
+- Loon 2024: `$primary: #f7b7a5;`, `$loon: #fa700d;`
+- Loon 2023: `$primary: #113670;`, geen `$loon` kleur
+
+Alles **voor** Loon 2023 gebruikt dezelfde kleuren. De primary- en loon-kleuren van het voorgaande jaar zijn nog te vinden met `$primary-yyyy` en `$loon-yyyy`. Mocht je liever deze gebruiken, dan kan dat door _voor_ de import van `_all` deze variabelen te definieren.
+
+```scss
+$primary: $primary-2022;
+$loon: $loon-2022;
+@import '~loon-bulma-react/styles/_all_.scss';
+```
+
+## Gebruik de componenten
 
 in een eigen component, bijvoorbeeld de Columns:
 
@@ -104,10 +119,8 @@ npm publish
 npm dist-tag add loon-bulma-react@<version> y[xxxx]
 ```
 
-Dat kan dus simpeler met het onderstaande command. De `yXXXX`-tag wordt dan automatisch aangepast.
+Dat kan dus simpeler met het onderstaande command. De `yXXXX`-tag wordt dan automatisch aangepast.In dit geval worden EN de `latest` tag EN de `yXXXX`-tag geupdate en gepubliceerd.
 
 ```bash
 npm run release
 ```
-
-In dit geval worden EN de `latest` tag EN de `yXXXX`-tag geupdate en gepubliceerd.