# 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.