Skip to content

feat(gnoweb): Add lightweight token customization system per realm #5000

@alexiscolin

Description

@alexiscolin

Context

Implement a simple and lightweight customization system where gnoweb maintains control for security and consistency, while allowing realms to lightly customize their styles through preset configurations. This will leverage the recently added TOML file support and the new modular token-based design system introduced during the CSS refactoring this summer.

Background

The frontend refactoring #4618 replaced ad-hoc scripts with a unified controller pattern and robust dynamic loader, standardized bundle naming, and updated the CSS architecture to better suit Go template workflows using CUBE CSS and CSS variables. It also modernized the asset pipeline with variable fonts and preloading.
These changes laid the groundwork for custom themes via ⁠gnoweb.toml and environment overrides, dynamic sidebar, and proper dark mode support etc

Objective

Create a configuration file system that allows realms to customize specific CSS tokens through predefined presets. The system will:

  1. Security-first approach: Only whitelisted CSS tokens can be modified

  2. Preset-based: Offer predefined style presets
(Security ++ again)
  3. Token validation: All custom values are validated against allowed ranges/values

  4. Modular integration: Leverage the new token-based CSS architecture from the summer refactoring

Proposed ⁠gnoweb.toml Structure (Draft - Under Discussion)

[theme]
base_style = "minimal"  # or "default", "rich"
color_scheme = "light"  # or "dark", "auto"

Phase 1: Spacing only (with predefined size limits to prevent hacks/rendering issues and test the system)

[theme.spacing]
density = "compact"  # or "normal", "spacious"
# density acts as a multiplier coefficient for all spacing values
# compact: 0.75x, normal: 1x, spacious: 1.25x

Future phases and other approaches (under discussion):

# [theme.colors]
# primary = "#3498db"
# secondary = "#2ecc71"
# background = "#ffffff"
# text = "#333333"
# [theme.layout]
# border_radius = "small"  # or "none", "medium", "large"
# [theme.emphasis]
# primary = "high"
# secondary = "medium"

Metadata

Metadata

Assignees

Labels

🌍 gnowebIssues & PRs related to gnoweb and render

Projects

Status

Triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions