Feature #43256
openIntroduce Open Color to unify and standardize CSS colors
0%
Description
The attached patches update Redmine's CSS to replace hexadecimal color codes with CSS variables defined by Open Color, an MIT-licensed color scheme for UI design.
By introducing Open Color, it consolidates very similar colors that were scattered across the existing CSS (for example, three similar light grays: #f5f5f5
, #f8f8f8
, #f9fafb
) and improves overall visual consistency in the UI. For future development, using Open Color's structured palette makes it easier to choose harmonious colors. It also replaces hex values like #f5f5f5
with clearer variable names such as --oc-gray-0
, which contributes to more efficient development. In fact, colors from Open Color are already being used in Redmine 6.1.0 for the background colors of the built-in Initials Avatar (see #43227#note-4).
In this patch, the number of distinct colors used in the CSS has been reduced from over 100 to about 50. Because the replacement colors were chosen to be close to the originals, the overall look and feel remains largely unchanged while improving color consistency. However, some colors, such as the header color and the responsive flyout menu color, have intentionally been left as hexadecimal values. These distinctive colors are not part of Open Color, and forcing them into the Open Color palette would significantly change the current design's look and feel.
Files
Related issues
Updated by Go MAEDA 2 days ago
- File 0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch 0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch added
- File deleted (
0001-Add-Open-Color-CSS-for-consistent-UI-color-scheme.patch)
Fixed a wrong link in doc/README_FOR_APP.
Updated by Go MAEDA 2 days ago
This patch also fixes:
After applying the patch, the border color of the following UI elements will be oc-gray-4 (#ced4da
).
- Table lists (list.table), Boxes (.box) and fieldsets (fieldset) border color is #e4e4e4
- Gantt (table.gantt-table) border color is #c0c0c0
- Calendar (table.cal) border color is #d7d7d7
- Separrator after tabs (#content .tabs ul), Footer (#footer) border color is #bbbbbb
- Sidebar (#sidebar), My page box (.mypage-box) border color is #dddddd
- Buttons, input fields, text areas current border color is #cccccc
Updated by Go MAEDA 2 days ago
- Related to Defect #32167: Inconsistent border coloring of UI elements? added
Updated by Go MAEDA 1 day ago
- File 0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch 0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch added
- File deleted (
0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch)
Replaced "lavendar" (used for div.fileover
) with oc-violet-0.
Updated by Marius BĂLTEANU 1 day ago
I like the ideea to standardize the color pallet and to switch to CSS variables.
Updated by Go MAEDA about 22 hours ago
- Target version changed from Candidate for next major release to 7.0.0
Setting the target version to 7.0.0.