-
Notifications
You must be signed in to change notification settings - Fork 444
Description
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:
- Security-first approach: Only whitelisted CSS tokens can be modified
- Preset-based: Offer predefined style presets (Security ++ again)
- Token validation: All custom values are validated against allowed ranges/values
- 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
Type
Projects
Status