Merge branch '350557-add-css-custom-property-for-theme' into 'master'

Introduce theme accent custom property

See merge request gitlab-org/gitlab!78488

app/assets/stylesheets/framework/emojis.scss

@@ -43,6 +43,10 @@ gl-emoji {
   border-bottom-color: transparent;
 }
 
+.emoji-picker-category-active {
+  border-bottom-color: var(--gl-theme-accent, $theme-indigo-500);
+}
+
 .emoji-picker .gl-new-dropdown-inner > :last-child {
   padding-bottom: 0;
 }

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -40,9 +40,11 @@
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
+      border-bottom: 2px solid var(--gl-theme-accent, $theme-indigo-500);
 
       .badge.badge-pill {
         color: $black;
+        font-weight: $gl-font-weight-bold;
       }
     }
 
@@ -126,14 +128,6 @@
     input {
       display: inline-block;
       position: relative;
-
-      &:not[type='checkbox'] {
-        /* Medium devices (desktops, 992px and up) */
-        @include media-breakpoint-up(md) { width: 200px; }
-
-        /* Large devices (large desktops, 1200px and up) */
-        @include media-breakpoint-up(lg) { width: 250px; }
-      }
     }
 
     @include media-breakpoint-up(md) {

app/assets/stylesheets/startup/startup-dark.scss

@@ -1795,6 +1795,9 @@ body.gl-dark {
 .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: var(--indigo-900-alpha-008);
 }
+body.gl-dark {
+  --gl-theme-accent: #868686;
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }

app/assets/stylesheets/themes/theme_helper.scss

@@ -4,12 +4,16 @@
  */
 @mixin gitlab-theme(
   $search-and-nav-links,
-  $active-tab-border,
+  $accent,
   $border-and-box-shadow,
   $sidebar-text,
   $nav-svg-color,
   $color-alternate
 ) {
+  // Set custom properties
+
+  --gl-theme-accent: #{$accent};
+
   // Header
 
   .navbar-gitlab {
@@ -219,22 +223,6 @@
     }
   }
 
-  .nav-links li {
-    &.active a,
-    &.md-header-tab.active button,
-    a.active {
-      border-bottom: 2px solid $active-tab-border;
-
-      .badge.badge-pill {
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-  }
-
-  .emoji-picker-category-active {
-    border-bottom-color: $active-tab-border;
-  }
-
   .branch-header-title {
     color: $border-and-box-shadow;
   }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -1795,6 +1795,9 @@ body.gl-dark {
 .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: var(--indigo-900-alpha-008);
 }
+body.gl-dark {
+  --gl-theme-accent: #868686;
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }