Rework the age-related datetime styling for datagrids.

Review Request #13826 — Created May 6, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

This adds dark mode colors to the datetime/time since columns in
datagrids, making them easier on the eyes at night. It uses a darker
green-to-red set of transition colors for the cells.

There are two things to note here:

  1. We do not use palette colors (nor have we before). While palettes are
    good for many UI elements, they don't always provide the range or
    tone of colors best used to communicate some visual elements. What
    we have in the palette today are not a good fit here.

  2. We no longer have the alternating row variants for these colors.
    We normally distinguish between rows by making every other row just
    a tiny bit darker, and previously did this for these columns. This
    felt more muddy in dark mode, and arguably didn't really help in
    light mode. Especially since we were using shading to communicate
    age. We now just use one color for both even and odd rows.

  3. The borders between these rows have been removed. Originally these
    were there because rows themselves had borders. When we removed row
    borders, we kept the age borders. This change might take some getting
    used to, but it provides a cleaner look overall.

Tested the colors in both light and dark mode, with a range of ages
(simulated in the screenshots on this review request by manually changing
the classes).

Summary ID
Rework the age-related datetime styling for datagrids.
This adds dark mode colors to the datetime/time since columns in datagrids, making them easier on the eyes at night. It uses a darker green-to-red set of transition colors for the cells. There are two things to note here: 1. We do not use palette colors (nor have we before). While palettes are good for many UI elements, they don't always provide the range or tone of colors best used to communicate some visual elements. What we have in the palette today are not a good fit here. 2. We no longer have the alternating row variants for these colors. We normally distinguish between rows by making every other row just a tiny bit darker, and previously did this for these columns. This felt more muddy in dark mode, and arguably didn't really help in light mode. Especially since we were using shading to communicate age. We now just use one color for both even and odd rows. 3. The borders between these rows have been removed. Originally these were there because rows themselves had borders. When we removed row borders, we kept the age borders. This change might take some getting used to, but it provides a cleaner look overall.
bdc8b85c64ea401d31c87d055ecaaea8b821c8ec

chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-7.x (b8386f5)
Loading...