[DO NOT MERGE] DS-744 refine theme colors for table

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-744

Summary

Colors were updated for the table body and headers.

Details

• This was merged with table ticket (Table component rework)
• Updated CSS color shadows
• Updated CSS table with new table headers colors

How to test

• Pull the branch
• Review the code
• Check if table colors have good contrast
• Compare previous table colors with the local branch and see which visuall and accessibility contrast aspects are better.
• check the Test page in the test folder (/pattern-lab/?p=viewall-tests-table) where are tables created for every theme color and their headers are sticky.

[MarcinMr]

@mikemai2awesome

I updated the table colors so you can check what it looks like. I think for the table better work with shadow colors rather created one gray color for dark mode and one gray color for light mode. BTW I had to create examples of shadow colors for some colors like Pink, Berry, Wine, Violet, Yellow, and Orange. I wonder why we didn't have these shadows before?

First I tried with the tertiary color for table headers but first of all, this didn't pass the contrast test for some of the colors and secondly, we can't use transparent colors since we have sticky headers in the table and when headers are moving they are transparent causing that body content was visible thru sticky headers during scrolling.

When it comes to table borders I believe these should be more visible and have good contrast color as these are for separating tabular data and not for decorative purposes. So I used var(--m-bolt-neutral) color for borders. Previously, the gray border color wasn't well contrasted with some of the dark color themes.

Moreover, FYI I'm not sure if using var(--m-bolt-tertiary) for some colors like for example teal or orange on the tertiary buttons are good. You can check here https://boltdesignsystem.com/pattern-lab/?p=visual-styles-theming-system scroll down to the buttons section and see that the text on teal color and orange color, tertiary butons are not well contrasted (below 3) in relation to color contrast a11y test for both large and small text.