Synching colors in user interface and server side code

I brought up this topic in the last user interface meeting (see recording). Basically I am wondering how we would best synchronize colors in UI views and in sever side code? And additionally, should we define some kind of semantic model for colors in Jenkins? This post is a little bit lengthy, but I thought it makes sense to write down all of my questions around this topic.

Client and Server Synchronization

Currently we have several new colors used in the user interface (UI refresh project): these colors are all available as CSS variables. How can we use these colors on the server side? We need a way to reuse these CSS variables in server code (which should automatically use the redefined colors of a local theme). Has someone an idea on how to do this in general?

Coloring of SVG icons

We are now using SVG icons in several places. Most of these icons are monochrome. Depending on the theme it would make sense to restyle those icons automatically by a predefined foreground color. Should we introduce such a concept? And how can we technically achieve that?

Semantic modeling of colors

Several of our colors already have a semantic meaning: foreground and background colors are an example, or success, failure or warning. On the other hand, a lot of additional colors do not have a semantic model yet, e.g., we have color constants for grey, black and green. In my plugin I would like to use more colors with a semantic model, so I wonder where do we define these colors (and how do we sync them with the server)? What I need I is something like a color palette. But not a color palette with nice looking colors (as we discussed in the UX meeting last year), I need a color palette with semantic colors:

E.g., the following plugins would benefit from such a color palette:

  • test: colors for success, failure, and skipped
  • code coverage: different shades of green for covered and different shades of red for uncovered
  • mutation coverage: see coverage
  • static analysis: different shades of yellow/orange for warnings by severity and an failure color for errors
  • commit statistics: colors for different sizes of commits (large, medium, small)

Changing colors with a theme (or for color blind users)

All colors should somehow be customizable using a theme. How can we achieve that?

Color customization per user

Would it also make sense to provide a per user configuration of those colors? Currently, some trend charts already can do this (with the settings dialog) but would it make sense to create such a color configuration view in general, e.g. in the user settings section?

2 Likes