Change History

I now tested how your already defined colors look like with a "table-bordered-black".
While they are nice colors in general, I think they are too dark and therefore provide too little contrast for black text. Also I did not find a nice secondary color pair for failed/success.

Here would be my proposal:
[img]https://s3.amazonaws.com/gs-geo-images/390a8061-bb4d-4973-9074-52833bb406fc.png[/img]

For the light gray header cells on top and left I used your "bg-light", t. That's is maybe OK.
, but I find it hard to distinguish from a pure white background. A slightly darker #f2f3f5 would look better in my opinion.
For the disabled cells (D1.5/T1.5) I tried "bg-secondary" as the next darker available gray, but I think this is already too dark. A lighter gray #cfd2d6 (in T2) looks better to me.

For the other colors I would suggest:
failed1 = '#f1aeb5',
progress1 = '#ffe69c',
passed1 = '#a9dfbf',
selected1 = '#81c784',

failed2 = '#f8d7da',
progress2 = '#fff3cd',
passed2 = '#d4edda'

The stronger color set 1 would be used most of the time.
The lighter color set 2 would be used only when 2 conditions shall be visualized at the same time, which shouldn't happen too often.
My example is an extreme to demonstrate how all these colors work together. In typical use cases grids will use a smaller subset of the available colors.

"align-center" and "valign-middle" now also seem to work correctly, thanks for the fix!

I now tested how your already defined colors look like with a "table-bordered-black".
While they are nice colors in general, I think they are too dark and therefore provide too little contrast for black text. Also I did not find a nice secondary color pair for failed/success.

Here would be my proposal:
[img]https://s3.amazonaws.com/gs-geo-images/390a8061-bb4d-4973-9074-52833bb406fc.png[/img]

For the light gray header cells on top and left I used your "bg-light", that's OK.
For the disabled cells (D1.5/T1.5) I tried "bg-secondary" as the next darker available gray, but I think this is already too dark. A lighter gray #cfd2d6 (in T2) looks better to me.

For the other colors I would suggest:
failed1 = '#f1aeb5',
progress1 = '#ffe69c',
passed1 = '#a9dfbf',
selected1 = '#81c784',

failed2 = '#f8d7da',
progress2 = '#fff3cd',
passed2 = '#d4edda'

The stronger color set 1 would be used most of the time.
The lighter color set 2 would be used only when 2 conditions shall be visualized at the same time, which shouldn't happen too often.
My example is an extreme to demonstrate how all these colors work together. In typical use cases grids will use a smaller subset of the available colors.

"align-center" and "valign-middle" now also seem to work correctly, thanks for the fix!