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

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

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
surtic86
2026-10-01 06:05:29 +02:00
co-authored by Claude Opus 5.5
commit 06cd1db99c
47 changed files with 4302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/tokens.css
+74
View File
@@ -0,0 +1,74 @@
/*
* Material Design 3 system tokens (type, shape, state, motion, elevation).
* Color roles live in palettes.css, generated by tools/palettes/build_palettes.mjs.
*/
:root {
/* Typeface */
--md-ref-typeface-plain: Roboto, system-ui, sans-serif;
/* Type scale, as `font` shorthand values: weight size/line-height family */
--md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-plain);
--md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-plain);
--md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-plain);
--md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-plain);
--md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain);
--md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain);
/* Tracking (letter-spacing) per type role */
--md-sys-typescale-display-large-tracking: -0.25px;
--md-sys-typescale-title-medium-tracking: 0.15px;
--md-sys-typescale-title-small-tracking: 0.1px;
--md-sys-typescale-body-large-tracking: 0.5px;
--md-sys-typescale-body-medium-tracking: 0.25px;
--md-sys-typescale-body-small-tracking: 0.4px;
--md-sys-typescale-label-large-tracking: 0.1px;
--md-sys-typescale-label-medium-tracking: 0.5px;
--md-sys-typescale-label-small-tracking: 0.5px;
/* Shape */
--md-sys-shape-corner-none: 0;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-full: 9999px;
/* State layer opacities */
--md-sys-state-hover-state-layer-opacity: 8%;
--md-sys-state-focus-state-layer-opacity: 10%;
--md-sys-state-pressed-state-layer-opacity: 10%;
--md-sys-state-dragged-state-layer-opacity: 16%;
--md-sys-state-disabled-content-opacity: 38%;
--md-sys-state-disabled-container-opacity: 12%;
/* Motion */
--md-sys-motion-duration-short2: 100ms;
--md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium2: 300ms;
--md-sys-motion-duration-medium4: 400ms;
--md-sys-motion-duration-long2: 500ms;
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
/* Elevation (shadow part; M3 prefers surface-container roles for depth) */
--md-sys-elevation-level0: none;
--md-sys-elevation-level1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
--md-sys-elevation-level2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
--md-sys-elevation-level3: 0 1px 3px rgb(0 0 0 / 30%), 0 4px 8px 3px rgb(0 0 0 / 15%);
--md-sys-elevation-level4: 0 2px 3px rgb(0 0 0 / 30%), 0 6px 10px 4px rgb(0 0 0 / 15%);
--md-sys-elevation-level5: 0 4px 4px rgb(0 0 0 / 30%), 0 8px 12px 6px rgb(0 0 0 / 15%);
}