feat(token-sets): four demo schools in Zuiddrecht (wilgenboom, vaartveld, esdoornveen, warmtepompacademie)

CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 ### Added
+- **Four demo schools in Zuiddrecht.** `wilgenboom` (Basisschool De Wilgenboom, willow green
+  `#2F6B4A` and sun yellow, Lexend), `vaartveld` (Vaartveld College, cobalt `#1F4FD8` and aqua,
+  Red Hat Display over Red Hat Text), `esdoornveen` (Esdoornveen, mbo college, plum `#5B2E91`
+  and maple rose, IBM Plex Sans with IBM Plex Mono for codes) and `warmtepompacademie`
+  (Warmtepompacademie, petrol `#0B6E7A` and ember, Barlow Semi Condensed over Barlow). Each is
+  built the way `zuiddrecht` is: a light workplace on Nextcloud's radius scale, a generated
+  dark variant, four logos and a login watermark. Every text pair reaches AA in the light and
+  in both dark scopes, computed by `tests/vitest/schoolTokenSets.spec.js`.
+- **Lexend, Red Hat Display, Red Hat Text, Barlow, Barlow Semi Condensed, IBM Plex Sans 500 and
+  IBM Plex Mono 400 and 500** join the bundled typefaces, all SIL OFL 1.1, from Fontsource 5.3.0.
+- **A brand stripe may draw a motif of its own.** A set names any background image in
+  `--nldesign-brand-stripe-image` and the stripe draws it instead of the three bands. The four
+  schools draw their motifs this way: the hanging twigs, the canal, the slanted cut and the
+  temperature line.
+- **Website corners and heading faces on a portal.** A set may name the website's own radii in
+  `--nldesign-website-border-radius` and `--nldesign-website-border-radius-large`; only the
+  public bridge reads them, so the workplace keeps 8px and 12px. The bridge also hands
+  `--nldesign-component-heading-font-family` to the website's headings.
 - **Gemeente Zuiddrecht, a demo municipality.** The `zuiddrecht` token set is a light
   workplace: blue `#3669A5` for actions, red `#CC0000` as the accent, a white top bar and
   navigation, a grey workspace with white cards, Nextcloud's own radius scale and a

README.md

@@ -8,7 +8,7 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan
 
 ## Features
 
-- **59 token sets**: Choose from Dutch government design systems, including:
+- **63 token sets**: Choose from Dutch government design systems, including:
   - Rijkshuisstijl (Dutch national government)
   - Gemeente Utrecht
   - Gemeente Amsterdam
@@ -27,13 +27,13 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan
 
 - **No Build Required**: Tokens are pre-compiled CSS and fonts are bundled and self-hosted (no external CDN)
 
-- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 41 organization and example logos, for use across all Nextcloud apps
+- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 57 organization and example logos, for use across all Nextcloud apps
 
 - **Theme-switchable iconography**: The icon pack an app resolves through nldesign travels with the active design system — a French-government (`lasuite`) theme serves the DSFR pack, a Dutch-government theme serves the RVO/OpenGemeenten/Den Haag packs — resolved via `DesignSystemService` and advertised on the public capability (`iconPacks`). See `img/ICONS.md`.
 
 ## Icons
 
-The app includes **2526 icons** across four government icon sets and **41 logos**:
+The app includes **2526 icons** across four government icon sets and **57 logos**:
 
 - RVO, OpenGemeenten, Gemeente Den Haag — **1488 icons** (CC0-1.0 / CC0-1.0 / EUPL-1.2), materialized from `@conduction/nextcloud-vue`
 - DSFR (Système de Design de l'État) — **1038 icons** (**Etalab-2.0**), materialized from `@gouvfr/dsfr`

REUSE.toml

@@ -83,7 +83,10 @@ SPDX-FileCopyrightText = "2022 The Figtree Project Authors (https://github.com/e
 SPDX-License-Identifier = "OFL-1.1"
 
 [[annotations]]
-path = "css/fonts/ibm-plex-mono-*"
+path = [
+    "css/fonts/ibm-plex-mono-*",
+    "css/systems/nldesign/fonts/ibm-plex-mono-*",
+]
 precedence = "override"
 SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)"
 SPDX-License-Identifier = "OFL-1.1"
@@ -134,6 +137,36 @@ precedence = "override"
 SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)"
 SPDX-License-Identifier = "OFL-1.1"
 
+# The typefaces of the four school sets (openspec/changes/school-token-sets).
+[[annotations]]
+path = [
+    "css/fonts/lexend-*",
+    "css/systems/nldesign/fonts/lexend-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)"
+SPDX-License-Identifier = "OFL-1.1"
+
+[[annotations]]
+path = [
+    "css/fonts/red-hat-display-*",
+    "css/systems/nldesign/fonts/red-hat-display-*",
+    "css/fonts/red-hat-text-*",
+    "css/systems/nldesign/fonts/red-hat-text-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)"
+SPDX-License-Identifier = "OFL-1.1"
+
+[[annotations]]
+path = [
+    "css/fonts/barlow-*",
+    "css/systems/nldesign/fonts/barlow-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2017 The Barlow Project Authors (https://github.com/jpt/barlow)"
+SPDX-License-Identifier = "OFL-1.1"
+
 # Intel Clear Sans is Apache-2.0, not OFL, so it travels with
 # LICENSES/Apache-2.0.txt and its own APACHE-2.0.txt beside the binaries.
 [[annotations]]
@@ -163,6 +196,9 @@ SPDX-FileCopyrightText = [
     "2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)",
     "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)",
     "2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)",
+    "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)",
+    "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)",
+    "2017 The Barlow Project Authors (https://github.com/jpt/barlow)",
 ]
 SPDX-License-Identifier = "OFL-1.1"
 

css/brand-stripe.css

@@ -19,6 +19,18 @@
  * A set that declares none gets three equal bands in its primary colour, the
  * primary hover and the primary again, 4px high.
  *
+ * A MOTIF THAT IS NOT THREE BANDS. A set may name an image of its own in
+ *
+ *   --nldesign-brand-stripe-image               any background-image value
+ *
+ * and the stripe draws that instead of the three bands, in the same box and at
+ * the same height: the hanging twigs of wilgenboom, the canal and its bank of
+ * vaartveld, the slanted cut of esdoornveen, the five steps of the
+ * warmtepompacademie (openspec/changes/school-token-sets). The three colours
+ * stay declared, because the component library's stripe below reads only
+ * those. An image named by url() must be a data: URI: a relative path would
+ * resolve against this stylesheet, not against the token file that names it.
+ *
  * IT SITS INSIDE THE BAR, NOT UNDER IT. Nextcloud places the content exactly
  * one header height from the top, so a stripe hanging below the bar would lie
  * over the first pixels of every app, and raising `--header-height` moves
@@ -78,12 +90,15 @@
 	z-index: 1;
 	height: var(--nldesign-brand-stripe-height, 4px);
 	pointer-events: none;
-	background-image: linear-gradient(
-		to right,
-		var(--thematiq-stripe-color-1) 0 var(--thematiq-stripe-stop-1),
-		var(--thematiq-stripe-color-2) var(--thematiq-stripe-stop-1)
-			var(--thematiq-stripe-stop-2),
-		var(--thematiq-stripe-color-3) var(--thematiq-stripe-stop-2) 100%
+	background-image: var(
+		--nldesign-brand-stripe-image,
+		linear-gradient(
+			to right,
+			var(--thematiq-stripe-color-1) 0 var(--thematiq-stripe-stop-1),
+			var(--thematiq-stripe-color-2) var(--thematiq-stripe-stop-1)
+				var(--thematiq-stripe-stop-2),
+			var(--thematiq-stripe-color-3) var(--thematiq-stripe-stop-2) 100%
+		)
 	);
 }