[Material] Accessibility / Contrast Issue fixes

[yradoeva]

Continuing our accessibility improvements initiative, we refined color contrasts in several components to ensure better legibility and alignment with WCAG guidelines. The following changes are made in Material theme:

1) Button (Link to Button Handoff)

[light]

• Flat buttons - hover, focused, focused&hover and active states - text and icon color changed to secondary.800
• Flat buttons - focused&active state - text and icon color changed to secondary.900
• Outlined buttons - hover, focused, focused&hover and active states - text, icon and border color changed to secondary.800
• Outlined buttons - focused&active state - text, icon and border color changed to secondary.900

[dark]

• Flat buttons - hover, focused, focused&hover and active states - text and icon color changed to secondary.300
• Flat buttons - focused&active state - text and icon color changed to secondary.200
• Outlined buttons - hover, focused, focused&hover and active states - text, icon and border color changed to secondary.300
• Outlined buttons - focused&active state - text, icon and border color changed to secondary.200

2) Button group (Link to Button Group Handoff)

[light]

• Selected: on - hover and focused states: background changed to light grays.500 40% and text & icon to light.grays.900
• Selected: on - active, focused&hover, focused&active states: text & icon color changed to light.grays.900

[dark]

• Selected: on - idle, hover, active, focused, focused&hover, focused&active states - fill color changed to dark grays.100
• Selected: on - hover and focused states: background changed to dark grays.300 40% and text & icon to dark grays.900
• Selected: on - active, focused&active states: background changed to dark grays.700 30% and text & icon color changed to white
• Selected: on - focused&hover state: background changed to dark grays.400 50% and text & icon color changed to dark.grays.900

3) Calendar (Link to Calendar Handoff)

[light] weekdays and week numbers color changed to light grays.700 [dark] week numbers color changed to dark grays.600

For the rest of the Components, please check the Material Design Kit

4) Checkbox [light] error state - label, checkbox and action background color changed to error.800

5) Date Picker [light] weekdays and week numbers color changed to light grays.700 [dark] week numbers color changed to dark grays.600

6) Grids Grid Features/Group Area [light] connector icon color changed to light grays.600

Grid Features/GroupBy Row [light]

• GroupBy icon and columnName text color changed to primary.800
• text color of the badge changed to light grays.700

Grid Features/Toolbar [light] toolbar title color changed to light grays.700

.Data Grid Item/Cell-Header [light] text color changed to light grays.800 80%

.Data Grid Item/Cell-Summary [light] text color changed to primary.900

.Data Grid Item/Data Grid-Column [light] clear icon color changed to light grays.600

7) Navigation Bottom Navigation [light] icon and label color changed to primary.800

Nav Drawer [light] active item - icon and label color changed to primary.800

8) Radio group [light] error state - label, dot, border and action background color changed to error.800

9) Stepper [light]

• Invalid step - idle, hover and focused states - indicator background color changed to error.700
• Invalid step - idle, hover states - title and subtitle color changed to error.700, focused state - title and subtitle color changed to error.800
• Active step - idle, hover and focused states - indicator background color changed to primary.800
• Hover and Focused step background colors are swapped in the implementation: hover background color should be light grays.100, focused background color - light grays.200

[dark]

• Invalid step - idle and hover states - indicator background color changed to error.700
• Invalid step - focused state - indicator background color changed to error.300, indicator text and icon color changed to black; title and subtitle color changed to error.300
• Active step - idle, hover and focused states - indicator background color changed to primary.800

10) Tabs [light]

• Active Tab - idle state - text, icon and stroke (indicator) color changed to primary.800
• Active Tab - hover state - text, icon and stroke (indicator) color changed to primary.900

[dark] Active Tab - hover state - text, icon and stroke (indicator) color changed to primary.200