Skip to content

Super sidebar use CSS custom properties in theme mixin

Scott de Jonge requested to merge 423416-use-theme-css-custom-properties into master

What does this MR do and why?

Update gitlab-theme-super-sidebar() mixin to override CSS custom properties defined in super_sidebar.scss to reduce style overrides and enable future work for dark w/ theme styles.

  • Create --super-sidebar-* CSS custom properties for color values
  • Update theme mixin to set CSS cuastom properties and mix-blend-mode
  • Remove custom colors from .brand-logo use button background-color with mix-blend-mode in super_sidebar.scss
  • Remove color utility classes from .counter and .active-indicator
  • Add explicit super-sidebar-help-center-toggle class to set background when aria-expanded="true"

Screenshots or screen recordings

CleanShot_2023-11-13_at_15.46.04

How to set up and validate locally

  1. Edit user preferences: http://gdk.test:3000/-/profile/preferences
  2. Toggle themes
  3. Validate styles are correct, noting aria-expanded="true" styles when dropdowns are open are consistent with :hover/:focus

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #423416 (closed)

Edited by Scott de Jonge

Merge request reports