71 lines
2.4 KiB
Markdown
71 lines
2.4 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) 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.
|