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
No data to display