feat: #3626852 Group the theme settings in sections with visual pickers and a sticky Save

Rajab Natshahrequested to merge
issue/uikit_admin-3626852:3626852-feature into 4.0.x

Issue: https://www.drupal.org/project/uikit_admin/issues/3626852

Stacked on the merge request of #3626851: merge that one first.

  • Group the settings in seven panels with a short introduction each: Appearance, Typography, Navigation, Editing, Sign-in screens, Accessibility and Advanced; the settings of core follow them.
  • Draw the color mode, the density, the font and the sign-in layouts as visual pickers: radios with CSS thumbnails, a live font specimen and a short line of help, with no script.
  • Put the colors of the light and the dark mode side by side, and the focus colors in the Accessibility panel.
  • Keep the Save row at the bottom of the screen on this page.
  • Link to every design token in UI Skins from the Advanced panel.
  • Keep 44px targets, a 2px focus ring and 7:1 text in the light and the dark mode.
  • Tests: new 02-10-01-settings-page.feature: sections, pickers, sticky Save, saving with the pictures, AAA in light and dark.

AI-Generated: Yes

Merge request reports