Currently our navigation themes are implemented with hard-to-maintain overrides (e.g., [`theme_helper.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/8276df318037472b1ba55930440ee61ae77487e0/app/assets/stylesheets/themes/theme_helper.scss), [`theme_light.scss`](https://gitlab.com/gitlab-org/gitlab/-/blob/8276df318037472b1ba55930440ee61ae77487e0/app/assets/stylesheets/themes/theme_light.scss)). They're hard to maintain because: - there's a lot of selector nesting - the overrides are nowhere near the markup/components that they affect - it's not clear if they're still actually applying to anything Probably _all_ of this can be replaced with CSS custom properties. ## Goal The end goal of this issue is to have the definitions of the navigation theme classes _only_ set some CSS custom properties. So instead of this: ```css body.ui-light .navbar-gitlab .nav>li>a:hover.header-help-dropdown-toggle .notification-dot, body.ui-light .navbar-gitlab .nav>li>a:focus.header-help-dropdown-toggle .notification-dot { background-color:#fff } body.ui-light .navbar-gitlab .nav>li.active>a.header-help-dropdown-toggle .notification-dot, body.ui-light .navbar-gitlab .nav>li.dropdown.show>a.header-help-dropdown-toggle .notification-dot { background-color:#f0f0f0 } body.ui-light .header-search input { background-color:transparent; color:rgba(102,102,102,0.8); box-shadow:inset 0 0 0 1px rgba(102,102,102,0.4) } body.ui-light .header-search input::placeholder { color:rgba(102,102,102,0.8) } body.ui-light .header-search input:focus::placeholder, body.ui-light .header-search input:active::placeholder { color:#868686 } /* ... etc ... */ ``` We want this: ```css body.ui-light { /* Note: these names are provisional/examples only! */ --gl-theme-primary: #525252; --gl-theme-secondary: #123456; --gl-theme-accent: #987654; /* ... etc ... */ } ```