Initial commit: Tonalmine, a Material Design 3 theme for Redmine 7
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
surtic86
@@ -0,0 +1,139 @@
|
||||
/*
|
||||
* Maps Redmine 7 core variables (open-color --oc-*, --fonts-main, --color-*) to M3 roles.
|
||||
* Core CSS uses these ~330 times, so this file recolors most of Redmine, and because
|
||||
* the roles switch per palette and mode (palettes.css), all of Redmine follows.
|
||||
*
|
||||
* Ramp per color family (index 0-9): 0-2 light containers, 3-5 mid tones for
|
||||
* borders, 6-9 the strong role color used for text and icons.
|
||||
* --oc-white is used both as background and as text on strong colors; both work with
|
||||
* surface-container-lowest because strong colors are light in dark mode.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--fonts-main: var(--md-ref-typeface-plain);
|
||||
--color-current-marker: var(--md-sys-color-primary);
|
||||
|
||||
--oc-white: var(--md-sys-color-surface-container-lowest);
|
||||
--oc-black: var(--md-sys-color-inverse-surface);
|
||||
|
||||
--oc-gray-0: var(--md-sys-color-surface-container-low);
|
||||
--oc-gray-1: var(--md-sys-color-surface-container);
|
||||
--oc-gray-2: var(--md-sys-color-surface-container-high);
|
||||
--oc-gray-3: var(--md-sys-color-surface-container-highest);
|
||||
--oc-gray-4: var(--md-sys-color-outline-variant);
|
||||
--oc-gray-5: var(--md-sys-color-outline);
|
||||
--oc-gray-6: var(--md-sys-color-on-surface-variant);
|
||||
--oc-gray-7: var(--md-sys-color-on-surface-variant);
|
||||
--oc-gray-8: var(--md-sys-color-on-surface);
|
||||
--oc-gray-9: var(--md-sys-color-on-surface);
|
||||
|
||||
--oc-blue-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-blue-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-blue-2: var(--md-sys-color-primary-container);
|
||||
--oc-blue-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
|
||||
--oc-blue-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
|
||||
--oc-blue-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
|
||||
--oc-blue-6: var(--md-sys-color-primary);
|
||||
--oc-blue-7: var(--md-sys-color-primary);
|
||||
--oc-blue-8: var(--md-sys-color-primary);
|
||||
--oc-blue-9: var(--md-sys-color-primary);
|
||||
|
||||
--oc-indigo-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-indigo-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-indigo-2: var(--md-sys-color-primary-container);
|
||||
--oc-indigo-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
|
||||
--oc-indigo-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
|
||||
--oc-indigo-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
|
||||
--oc-indigo-6: var(--md-sys-color-primary);
|
||||
--oc-indigo-7: var(--md-sys-color-primary);
|
||||
--oc-indigo-8: var(--md-sys-color-primary);
|
||||
--oc-indigo-9: var(--md-sys-color-primary);
|
||||
|
||||
--oc-cyan-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-cyan-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-cyan-2: var(--md-sys-color-primary-container);
|
||||
--oc-cyan-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
|
||||
--oc-cyan-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
|
||||
--oc-cyan-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
|
||||
--oc-cyan-6: var(--md-sys-color-primary);
|
||||
--oc-cyan-7: var(--md-sys-color-primary);
|
||||
--oc-cyan-8: var(--md-sys-color-primary);
|
||||
--oc-cyan-9: var(--md-sys-color-primary);
|
||||
|
||||
--oc-violet-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-violet-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-violet-2: var(--md-sys-color-primary-container);
|
||||
--oc-violet-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
|
||||
--oc-violet-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
|
||||
--oc-violet-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
|
||||
--oc-violet-6: var(--md-sys-color-primary);
|
||||
--oc-violet-7: var(--md-sys-color-primary);
|
||||
--oc-violet-8: var(--md-sys-color-primary);
|
||||
--oc-violet-9: var(--md-sys-color-primary);
|
||||
|
||||
--oc-grape-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-grape-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-grape-2: var(--md-sys-color-primary-container);
|
||||
--oc-grape-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
|
||||
--oc-grape-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
|
||||
--oc-grape-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
|
||||
--oc-grape-6: var(--md-sys-color-primary);
|
||||
--oc-grape-7: var(--md-sys-color-primary);
|
||||
--oc-grape-8: var(--md-sys-color-primary);
|
||||
--oc-grape-9: var(--md-sys-color-primary);
|
||||
|
||||
--oc-pink-0: color-mix(in srgb, var(--md-sys-color-tertiary-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-pink-1: color-mix(in srgb, var(--md-sys-color-tertiary-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-pink-2: var(--md-sys-color-tertiary-container);
|
||||
--oc-pink-3: color-mix(in srgb, var(--md-sys-color-tertiary) 35%, var(--md-sys-color-tertiary-container));
|
||||
--oc-pink-4: color-mix(in srgb, var(--md-sys-color-tertiary) 60%, var(--md-sys-color-tertiary-container));
|
||||
--oc-pink-5: color-mix(in srgb, var(--md-sys-color-tertiary) 80%, var(--md-sys-color-tertiary-container));
|
||||
--oc-pink-6: var(--md-sys-color-tertiary);
|
||||
--oc-pink-7: var(--md-sys-color-tertiary);
|
||||
--oc-pink-8: var(--md-sys-color-tertiary);
|
||||
--oc-pink-9: var(--md-sys-color-tertiary);
|
||||
|
||||
--oc-red-0: color-mix(in srgb, var(--md-sys-color-error-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-red-1: color-mix(in srgb, var(--md-sys-color-error-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-red-2: var(--md-sys-color-error-container);
|
||||
--oc-red-3: color-mix(in srgb, var(--md-sys-color-error) 35%, var(--md-sys-color-error-container));
|
||||
--oc-red-4: color-mix(in srgb, var(--md-sys-color-error) 60%, var(--md-sys-color-error-container));
|
||||
--oc-red-5: color-mix(in srgb, var(--md-sys-color-error) 80%, var(--md-sys-color-error-container));
|
||||
--oc-red-6: var(--md-sys-color-error);
|
||||
--oc-red-7: var(--md-sys-color-error);
|
||||
--oc-red-8: var(--md-sys-color-error);
|
||||
--oc-red-9: var(--md-sys-color-error);
|
||||
|
||||
--oc-green-0: color-mix(in srgb, var(--md-sys-color-success-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-green-1: color-mix(in srgb, var(--md-sys-color-success-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-green-2: var(--md-sys-color-success-container);
|
||||
--oc-green-3: color-mix(in srgb, var(--md-sys-color-success) 35%, var(--md-sys-color-success-container));
|
||||
--oc-green-4: color-mix(in srgb, var(--md-sys-color-success) 60%, var(--md-sys-color-success-container));
|
||||
--oc-green-5: color-mix(in srgb, var(--md-sys-color-success) 80%, var(--md-sys-color-success-container));
|
||||
--oc-green-6: var(--md-sys-color-success);
|
||||
--oc-green-7: var(--md-sys-color-success);
|
||||
--oc-green-8: var(--md-sys-color-success);
|
||||
--oc-green-9: var(--md-sys-color-success);
|
||||
|
||||
--oc-yellow-0: color-mix(in srgb, var(--md-sys-color-warning-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-yellow-1: color-mix(in srgb, var(--md-sys-color-warning-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-yellow-2: var(--md-sys-color-warning-container);
|
||||
--oc-yellow-3: color-mix(in srgb, var(--md-sys-color-warning) 35%, var(--md-sys-color-warning-container));
|
||||
--oc-yellow-4: color-mix(in srgb, var(--md-sys-color-warning) 60%, var(--md-sys-color-warning-container));
|
||||
--oc-yellow-5: color-mix(in srgb, var(--md-sys-color-warning) 80%, var(--md-sys-color-warning-container));
|
||||
--oc-yellow-6: var(--md-sys-color-warning);
|
||||
--oc-yellow-7: var(--md-sys-color-warning);
|
||||
--oc-yellow-8: var(--md-sys-color-warning);
|
||||
--oc-yellow-9: var(--md-sys-color-warning);
|
||||
|
||||
--oc-orange-0: color-mix(in srgb, var(--md-sys-color-warning-container) 35%, var(--md-sys-color-surface));
|
||||
--oc-orange-1: color-mix(in srgb, var(--md-sys-color-warning-container) 65%, var(--md-sys-color-surface));
|
||||
--oc-orange-2: var(--md-sys-color-warning-container);
|
||||
--oc-orange-3: color-mix(in srgb, var(--md-sys-color-warning) 35%, var(--md-sys-color-warning-container));
|
||||
--oc-orange-4: color-mix(in srgb, var(--md-sys-color-warning) 60%, var(--md-sys-color-warning-container));
|
||||
--oc-orange-5: color-mix(in srgb, var(--md-sys-color-warning) 80%, var(--md-sys-color-warning-container));
|
||||
--oc-orange-6: var(--md-sys-color-warning);
|
||||
--oc-orange-7: var(--md-sys-color-warning);
|
||||
--oc-orange-8: var(--md-sys-color-warning);
|
||||
--oc-orange-9: var(--md-sys-color-warning);
|
||||
}
|
||||
Reference in New Issue
Block a user