Andreas Reinhold / reiniandClaude Opus 5.5
6c271ffffe
Generate medium/high contrast schemes, add a custom swatch that builds a scheme in the browser via lazy-loaded scheme.js, allow Theme Builder exports as palettes. Drop the teal palette and spread the swatches across the menu width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
80 lines
3.1 KiB
Markdown
80 lines
3.1 KiB
Markdown
# 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), a contrast level (Standard / Medium / High) and a color (Purple, Blue, 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 last (rainbow) swatch
|
||
lets users pick any color: `javascripts/scheme.js` is loaded on demand, generates the scheme in the
|
||
browser, and the generated CSS is stored with the choice, so later page loads don't need it.
|
||
|
||
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 and javascripts/scheme.js
|
||
```
|
||
|
||
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.
|
||
|
||
To use a scheme from [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/)
|
||
as-is: export it as Web (CSS), copy its `light.css` and `dark.css` into `tools/palettes/themes/<name>/`,
|
||
and also its `light-mc.css`, `light-hc.css`, `dark-mc.css` and `dark-hc.css` contrast files. Then add
|
||
`['<name>', '<seed>', 'themes/<name>']` to `PALETTES`. The roles are copied from the export; the seed
|
||
only tints the success/warning colors.
|
||
|
||
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.
|