noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: contrast levels and custom color picker in appearance menu

Browse Source 
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>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 12:40:34 +02:00
co-authored by Claude Opus 5.5
parent b4eba7ae63
commit 6c271ffffe
8 changed files with 289 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/components.css
+7 -1
View File
@@ -537,7 +537,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
.nm-segmented button:hover { background-image: var(--nm-state-hover); }
.nm-segmented button[aria-pressed="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* Color swatches: the selected one gets a ring */
.nm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-swatches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.nm-swatch {
flex-shrink: 0;
inline-size: 28px;
@@ -548,6 +548,12 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
background: var(--nm-swatch);
cursor: pointer;
}
/* Custom color: a native color input stretched invisibly over a rainbow (or the picked color) swatch */
.nm-swatch--custom { position: relative; background: var(--nm-swatch, conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935)); }
.nm-swatch--custom input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.nm-swatch--custom:focus-within { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
/* theme.js lazy-loads the scheme generator from here; Redmine rewrites url() to the digested path */
:root { --nm-scheme-js: url(./scheme.js); }
.nm-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--md-sys-color-surface-container), 0 0 0 4px var(--md-sys-color-on-surface); }
html .flyout-menu .nm-appearance { padding-inline: 16px; }
html .flyout-menu .nm-appearance__title { color: var(--md-sys-color-on-surface-variant); }