Improve styling for the list and grid button

Created on 4 June 2024, 25 days ago

This issue is follow up from 🐛 Improve accessibility for the list and grid button Needs review , which was split into the accessibility part (#3446591) and the design part (this issue).
The list and grid buttons are missing styles for the hover and active state see https://www.figma.com/design/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=553-0&t=5FeaMAKDIvj5t196-0

Currently, the background color of the selected display button (either Link or Grid) in any state is the same as the design system's button active state background color. (In other words, the background of a selected Link or Grid display button is always #ADAEB3)
When hovering over a selected display button, should it get 15% darker than #ADAEB3, and 30% darker if the user clicks it again?
Technically there doesn't exist an actual toggle state for the drupal design system unfortunately yet. :( the following comment and the comments in the following in this thread are about introducing a toggle state to claro
It was suggested that changing the styling from the regular button grey to the primary button blue would be confusing.
Is this an issue for core in general? Project browser would be the exception having two toggle buttons next to each other which are slightly different contstraints (See this comment 🐛 Improve accessibility for the list and grid button Needs review )

Follow the drupal design system

📌 Task

Status

Active

Version

1.0

Component

User experience

Created by

🇺🇸United States kwiseman

Live updates comments and jobs are added and updated live.

Comments & Activities

Production build 0.69.0 2024