Skip to content

feat(GlTabs): Apply theme via CSS custom property

Mark Florian requested to merge 1683-tabs-follow-theme-custom-property into main

What does this MR do?

This applies the current theme styling to GlTabs, based on the --gl-theme-accent CSS custom property.

Prior to this, GlTabs could be made to follow the current theme by passing a theme prop. At the time of writing, there are zero usages of that prop in gitlab-org/gitlab, determined by this crude but effective command:

$ rg "<gl-tabs" -t vue -A10 | rg theme

What that means is, none of the GlTabs instances in gitlab-org/gitlab follow the current navigation theme.

This change makes them adopt the current theme automatically, as GitLab now defines and sets --gl-theme-accent according to the current user navigation theme.

Screenshots

These screenshots are taken with the Light Red theme and in Dark Mode, before and after this version of GitLab UI is used.

Where Before Before
Milestones page, using gl_tabs_nav, e.g. /gitlab-org/gitlab-test/-/milestones milestones_red_before milestones_dark_before milestones_red_after milestones_dark_after
Vulnerability report page, using GlTabs e.g. /groups/gitlab-org/-/security/vulnerabilities vuln_report_red_before vuln_report_dark_before vuln_report_red_after vuln_report_dark_after

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • [-] All actions and functionality can be done with a keyboard.
  • [-] Links, buttons, and controls have a visible focus state.
  • [-] All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • [-] Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • [-] Color combinations have sufficient contrast.

Closes #1683 (closed)

Edited by Mark Florian

Merge request reports