Initial commit: Tonalmine, a Material Design 3 theme for Redmine 7

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 06:05:29 +02:00
commit 06cd1db99c
47 changed files with 4302 additions and 0 deletions
@@ -0,0 +1,70 @@
+# Tonalmine
+
+Material Design 3 theme for Redmine 7.0.
+
+## Install
+
+1. Copy the `tonalmine/` folder into `<redmine>/themes/`.
+2. Restart Redmine (theme assets are compiled at boot).
+3. Select **Tonalmine** in Administration → Settings → Display → Theme.
+
+## Development
+
+Requires Docker.
+
+```sh
+cd dev
+docker compose up -d                                         # Redmine 7.0.1 on http://localhost:3070
+docker compose exec redmine bin/rails runner /seed/seed.rb   # once: demo data, selects the theme
+docker compose restart redmine                               # after every CSS change
+```
+
+Login: `admin` / `admin`.
+
+The theme folder is bind-mounted into the container, so edits are picked up on restart.
+
+### Screenshots
+
+```sh
+cd e2e
+npm install && npx playwright install chromium   # once
+node screenshots.mjs            # all pages, light/dark × desktop/mobile → screenshots/
+node screenshots.mjs issue      # only pages whose name contains "issue"
+node check-form-alignment.mjs   # fails if a form label is not level with its field
+node check-font-sizes.mjs       # fails if any text is off the type scale (e.g. core 0.9em leftovers)
+```
+
+### Icons
+
+`tonalmine/images/icons.svg` replaces Redmine's icon sprite with Material Symbols Outlined.
+It is generated from `tools/icon_map.yml`:
+
+```sh
+ruby tools/build_icons.rb
+```
+
+The script fails when Redmine's `config/icon_source.yml` (7.0-stable) has icon names that are missing from
+the map, so run it after every Redmine update.
+
+### Colors
+
+Each user picks a mode (Auto / Light / Dark) and a color (Purple, Blue, Teal, Green, Orange) in the
+**Appearance** section of the profile menu (top right; in the mobile menu at the bottom). The choice is
+stored per browser (`localStorage`); Auto follows the operating system.
+
+The color roles are generated from one seed color per palette with `@material/material-color-utilities`
+(scheme TonalSpot) into `tonalmine/stylesheets/palettes.css`:
+
+```sh
+cd tools/palettes
+npm install      # once
+npm run build    # writes palettes.css
+```
+
+To add or change a palette, edit `PALETTES` in `tools/palettes/build_palettes.mjs` and in
+`tonalmine/javascripts/theme.js` (the build fails if they differ), then rebuild. The only other
+hard-coded colors are the select chevrons `images/arrow-drop-down*.svg` (one per mode).
+
+## License
+
+MIT, see `LICENSE`. Roboto (OFL 1.1) and Material Symbols (Apache 2.0) keep their own licenses.