[Docs] Feature overview with GEMMA/TEC standards

docs/features/README.md

@@ -0,0 +1,49 @@
+# NL Design — Features
+
+NL Design is a Nextcloud theming app that applies Dutch government design standards (Rijkshuisstijl and other NL Design System token sets) to every part of the Nextcloud interface. It functions as a Nextcloud Theme Editor: administrators select a pre-built organization token set or fine-tune individual CSS variables, and the result is propagated to both the NL Design CSS layer and Nextcloud's built-in theming system.
+
+NL Design has no direct GEMMA component mapping — it is a cross-cutting infrastructure concern that ensures WCAG AA accessibility and Dutch government branding across all Conduction apps.
+
+## Standards Compliance
+
+| Standard | Status | Description |
+|----------|--------|-------------|
+| NL Design System | Beschikbaar | `--nldesign-*` token namespace; 39+ organization token sets |
+| Rijkshuisstijl | Beschikbaar | National government visual identity token set |
+| WCAG 2.1 AA | Beschikbaar | Contrast, font size, and spacing tokens enforced per token set |
+| Digitoegankelijk (EN 301 549) | Beschikbaar | Accessible colour and typography via design tokens |
+| DCAT-AP NL | N.v.t. | Not applicable — theming layer only |
+
+## Features
+
+| Feature | Description | Docs |
+|---------|-------------|------|
+| [Token Sets](./token-sets.md) | 39+ organization-specific CSS token sets; searchable dropdown; auto-generated from upstream NL Design System | [token-sets.md](./token-sets.md) |
+| [Token Editor UI](./token-editor.md) | Tabbed admin panel for editing all Nextcloud `--color-*` CSS variables with live preview and per-token reset | [token-editor.md](./token-editor.md) |
+| [CSS Architecture](./css-architecture.md) | 7-layer CSS load order: design system → token set → custom overrides; `design-systems.json` controls bundles | [css-architecture.md](./css-architecture.md) |
+| [Custom CSS Overrides](./css-architecture.md) | `custom-overrides.css` — single write target for all edits; loaded last; token set files are read-only | [css-architecture.md](./css-architecture.md) |
+| [Token Set Apply Dialog](./apply-dialog.md) | Before applying a token set, shows old → new value diff per token; admin checks/unchecks individual changes | [apply-dialog.md](./apply-dialog.md) |
+| [Theming Sync](./theming-sync.md) | After token set selection, syncs Nextcloud's primary color and background color via the theming API | [theming-sync.md](./theming-sync.md) |
+| [Token Import/Export](./import-export.md) | Download `custom-overrides.css`; upload a saved file to restore or share a token configuration | [import-export.md](./import-export.md) |
+| [Admin Settings](./admin-settings.md) | Admin panel under Theming: token set selector, toggles (hide slogan, show menu labels), token editor | [admin-settings.md](./admin-settings.md) |
+| [Hide Slogan](./toggles.md) | Removes Nextcloud's default login-page slogan for a clean government-branded login | [toggles.md](./toggles.md) |
+| [Show Menu Labels](./toggles.md) | Replaces header app icons with text labels; improves discoverability per Dutch government UX guidelines | [toggles.md](./toggles.md) |
+| [Component Tokens](./token-sets.md) | `--nldesign-component-*` prefix bridging `--utrecht-*` component tokens to the nldesign namespace | [token-sets.md](./token-sets.md) |
+| [App Compatibility](./app-compatibility.md) | Integration guide for other Nextcloud apps to ensure CSS-variable compatibility with nldesign | [app-compatibility.md](./app-compatibility.md) |
+| [Prometheus Metrics](./css-architecture.md) | Active token set, custom override count, theming sync operations — in Prometheus text format | — |
+
+## Architecture
+
+NL Design operates as a pure CSS layer — no database tables. Configuration is stored in `IAppConfig`. The CSS stack loads in a defined order:
+
+1. Design system base CSS (`design-systems.json` bundle)
+2. Organization token set (`css/tokens/{id}.css`)
+3. Custom overrides (`custom-overrides.css`) — always loaded last
+
+The token sync workflow (nightly GitHub Actions) pulls updates from the upstream `nl-design-system/themes` repository and opens PRs when token changes are detected.
+
+## GEMMA Mapping
+
+| GEMMA Component | NL Design Role |
+|-----------------|----------------|
+| N.v.t. | Cross-cutting theming infrastructure for all Conduction Nextcloud apps |

openspec/changes/archive/2026-02-15-add-vng-token-set/specs/vng-token-set/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Define requirements for adding VNG (Vereniging Nederlandse Gemeenten) as a selectable design token set in the nldesign Nextcloud app. VNG tokens are manually converted from the tilburg-woo-ui project since they are not available in the upstream nl-design-system/themes repository.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: VNG Token CSS File
 The system MUST provide a `css/tokens/vng.css` file containing VNG design tokens in `:root` scope with `--nldesign-*` semantic tokens and `--vng-*` organization palette tokens.

openspec/changes/archive/2026-03-02-enhance-docs-website/specs/docs-content/spec.md

@@ -1,4 +1,4 @@
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Documentation landing page
 The documentation site SHALL have an `intro.md` file at `docs/intro.md` that serves as the entry point for all documentation. It SHALL provide a high-level overview of what nldesign is, link to key sections (getting started, features, reference), and use the Docusaurus `slug: /` frontmatter to become the docs root.

openspec/changes/archive/2026-03-03-nextcloud-theme-editor/specs/custom-css-overrides/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Defines the CSS file persistence layer for user-defined token customizations. `custom-overrides.css` is the single write target for all theme editor output. It is loaded last in the CSS stack so user intent always wins. NL Design token set CSS files are read-only presets and are never modified.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Custom Overrides File
 The system MUST maintain a `custom-overrides.css` file in the nldesign app's CSS directory. This file MUST be written exclusively by the theme editor backend — no other write path exists.

openspec/changes/archive/2026-03-03-nextcloud-theme-editor/specs/nl-design/spec.md

@@ -29,7 +29,7 @@ The nldesign app MUST support all organization token sets available in the confi
 - AND `custom-overrides.css` MUST remain unchanged
 - AND no visual change MUST persist
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: App Identity
 The app MUST be positioned as a **Nextcloud Theme Editor with NL Design System support** in its user-facing name, description, and admin settings heading. The scope is broader than NL Design loading: it encompasses editing any Nextcloud CSS custom property.

openspec/changes/archive/2026-03-03-nextcloud-theme-editor/specs/token-editor-ui/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Provides a tabbed admin settings panel for browsing and editing all editable Nextcloud CSS custom properties (`--color-*`) with live preview and per-token reset controls. Changes are previewed in the browser before being committed to `custom-overrides.css`.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Token Editor Panel
 The admin settings page MUST include a token editor panel below the existing NL Design token-set selector. The panel MUST be rendered as a Vue component within the existing nldesign admin settings template.

openspec/changes/archive/2026-03-03-nextcloud-theme-editor/specs/token-import-export/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Allows admins to download the current `custom-overrides.css` as a portable file and upload a previously saved file to restore or share a token configuration. Only known, editable Nextcloud `--color-*` tokens are accepted on import — unknown variables are silently rejected and their count is reported.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Export Current Overrides
 The admin settings panel MUST provide a **Download** button that exports the current `custom-overrides.css` as a file download.

openspec/changes/archive/2026-03-03-nextcloud-theme-editor/specs/token-set-apply-dialog/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Defines the modal dialog shown when an admin selects a new NL Design token set. The dialog shows which Nextcloud CSS variable values would change (resolved current value vs the value from the new token set), lets the admin check or uncheck individual changes, and writes only the checked values to `custom-overrides.css`. The NL Design token set CSS file itself is never applied directly.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Dialog Trigger
 Selecting a different NL Design token set from the selector MUST open the apply dialog instead of immediately switching themes.

openspec/changes/archive/2026-03-06-full-nextcloud-token-support-from-nldesign/specs/component-tokens/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Introduces component-level NL Design System tokens using the `--nldesign-component-*` prefix, with a temporary bridge file that maps the current `--utrecht-*` component tokens to the nldesign namespace.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: NLDesign Component Token Prefix
 All component-level tokens MUST use the `--nldesign-component-*` prefix for consistency with the rest of the nldesign token system.

openspec/changes/archive/2026-03-06-full-nextcloud-token-support-from-nldesign/specs/extended-token-sets/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Expands the nldesign app from 5 manually maintained token sets to all available NL Design System organization token sets (48+), using auto-generation from official upstream JSON token files.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Support All Available Token Sets
 The system MUST support all organization token sets available in the `nl-design-system/themes` repository.

openspec/changes/archive/2026-03-06-full-nextcloud-token-support-from-nldesign/specs/nextcloud-variable-mapping/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Provides a complete, audited mapping between all Nextcloud CSS custom properties and `--nldesign-*` design tokens, with comprehensive documentation and a defaults layer that ensures all tokens always have a value.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Complete Nextcloud Variable Audit
 The system MUST include a mapping for every CSS custom property defined by Nextcloud's theming system (DefaultTheme.php, CommonThemeTrait.php, and core SCSS files).

openspec/changes/archive/2026-03-06-full-nextcloud-token-support-from-nldesign/specs/token-sync-workflow/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Automates the synchronization of NL Design System token sets from the upstream `nl-design-system/themes` repository via a nightly GitHub Actions workflow that generates CSS token files and opens PRs when changes are detected.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Nightly Schedule
 The sync workflow MUST run automatically every night to check for upstream token changes.

openspec/changes/archive/2026-03-06-sync-theming-on-token-change/specs/theming-sync-dialog/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 After an admin selects a different token set in nldesign, offer to automatically update Nextcloud's built-in theming values (primary color, background color, logo, background image) to match the selected token set, preventing a split-brain theming state where CSS tokens and Nextcloud theming are out of sync.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Theming Metadata in Token Sets
 Each token set entry in `token-sets.json` MAY include a `theming` object with optional fields: `primary_color`, `background_color`, `logo`, and `background`.

openspec/changes/archive/2026-03-06-sync-theming-on-token-change/specs/token-set-dropdown/spec.md

@@ -3,7 +3,7 @@
 ## Purpose
 Replace the radio button list for token set selection with a searchable dropdown (`<select>`) that scales to 400+ entries, improving usability as the number of available token sets grows.
 
-## ADDED Requirements
+## Requirements
 
 ### Requirement: Dropdown Token Set Selector
 The admin settings page MUST use a `<select>` dropdown instead of radio buttons for token set selection.

openspec/changes/archive/2026-03-21-admin-settings/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-20

openspec/changes/archive/2026-03-21-admin-settings/design.md

@@ -0,0 +1,20 @@
+# Design: admin-settings
+
+## Context
+Admin settings panel in Nextcloud's Theming section. Vanilla PHP template + vanilla JS (no Vue/webpack). Provides token set dropdown, hide slogan toggle, menu labels toggle, live preview, token editor mount point, and theming sync trigger.
+
+## Goals / Non-Goals
+**Goals:** Settings panel registration, template with all parameters, token set dropdown, feature toggles, live preview, XSS prevention
+**Non-Goals:** Vue-based UI, per-user settings, real-time multi-admin sync
+
+## Decisions
+1. Vanilla PHP template with script/style injection via Nextcloud helpers
+2. All endpoints gated with `@AuthorizedAdminSetting`
+3. Data attributes on root div for JS initialization
+4. `p(json_encode(...))` for XSS prevention
+
+## File Changes
+- `lib/Settings/Admin.php` — Panel registration and template response
+- `templates/settings/admin.php` — PHP template with all controls
+- `js/admin.js` — Vanilla JS event handlers
+- `css/admin.css` — Admin panel styling

openspec/changes/archive/2026-03-21-admin-settings/proposal.md

@@ -0,0 +1,18 @@
+# Admin Settings Specification
+
+## Problem
+Defines the admin settings panel for the NL Design app. The settings panel is located in Nextcloud's administration area under the Theming section. It provides controls for selecting the active token set, toggling the hide slogan feature, toggling show menu labels, and previewing the selected theme. The UI is built with vanilla PHP templates and vanilla JavaScript (no Vue or webpack). Additionally, the panel hosts the token editor for customizing individual Nextcloud CSS tokens, and triggers the theming sync dialog when a token set with theming metadata is selected.
+
+## Proposed Solution
+Implement Admin Settings Specification following the detailed specification. Key requirements include:
+- See full spec for detailed requirements
+
+## Scope
+This change covers all requirements defined in the admin-settings specification.
+
+## Success Criteria
+- Settings panel appears in admin area
+- Settings panel position relative to Nextcloud theming
+- Settings panel is absent when app is disabled
+- Settings panel loads template with all parameters
+- Token sets include design system metadata