Project

General

Profile

Actions

Feature #43256

open

Introduce Open Color to unify and standardize CSS colors

Added by Go MAEDA 2 days ago. Updated about 19 hours ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:

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.

overview-with-open-color.png

issues-list-with-open-color.png

issue-with-open-color.png

roadmap-with-open-color.png


Files


Related issues

Related to Redmine - Defect #32167: Inconsistent border coloring of UI elements?New

Actions
Actions #1

Updated by Go MAEDA 1 day ago

Fixed a wrong link in doc/README_FOR_APP.

Actions #2

Updated by Go MAEDA 1 day 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

Actions #3

Updated by Go MAEDA 1 day ago

  • Related to Defect #32167: Inconsistent border coloring of UI elements? added
Actions #4

Updated by Go MAEDA 1 day ago

Replaced "lavendar" (used for div.fileover) with oc-violet-0.

Actions #5

Updated by Marius BĂLTEANU about 21 hours ago

I like the ideea to standardize the color pallet and to switch to CSS variables.

Actions #6

Updated by Go MAEDA about 19 hours ago

  • Target version changed from Candidate for next major release to 7.0.0

Setting the target version to 7.0.0.

Actions

Also available in: Atom PDF