Add latest changes from gitlab-org/gitlab@master

19 files changed, 140 insertions, 128 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 4c49aabcf93..267f9d4321b 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -48,7 +48,7 @@ export default {
     :is="component"
     :aria-label="ariaLabel"
     :href="href"
-    class="counter gl-display-block gl-flex-grow-1 gl-text-center gl-py-3 gl-rounded-base gl-border-none gl-inset-border-1-gray-a-08 gl-line-height-1 gl-font-sm gl-hover-text-decoration-none gl-focus--focus"
+    class="user-bar-button gl-display-block gl-flex-grow-1 gl-text-center gl-py-3 gl-rounded-base gl-border-none gl-line-height-1 gl-font-sm gl-hover-text-decoration-none"
   >
     <gl-icon aria-hidden="true" :name="icon" />
     <span v-if="count" aria-hidden="true" class="gl-ml-1">{{ formattedCount }}</span>
diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index f93a0256bd4..292373df9f4 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -1,6 +1,7 @@
 <script>
 import { kebabCase } from 'lodash';
 import { GlCollapse, GlIcon } from '@gitlab/ui';
+import { NAV_ITEM_LINK_ACTIVE_CLASS } from '../constants';
 import NavItem from './nav_item.vue';
 import FlyoutMenu from './flyout_menu.vue';
 
@@ -61,9 +62,7 @@ export default {
       return this.isExpanded ? 'chevron-up' : 'chevron-down';
     },
     computedLinkClasses() {
-      return {
-        'gl-bg-t-gray-a-08': this.isActive,
-      };
+      return this.isActive ? NAV_ITEM_LINK_ACTIVE_CLASS : null;
     },
     isActive() {
       return !this.isExpanded && this.item.is_active;
@@ -109,7 +108,7 @@ export default {
     <hr v-if="separated" aria-hidden="true" class="gl-mx-4 gl-my-2" />
     <button
       :id="`menu-section-button-${itemId}`"
-      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-2 gl-py-2 gl-px-3 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-appearance-none gl-border-0 gl-bg-transparent gl-text-left gl-w-full gl-focus--focus"
+      class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-2 gl-py-2 gl-px-3 gl-text-black-normal! gl-text-decoration-none! gl-appearance-none gl-border-0 gl-bg-transparent gl-text-left gl-w-full gl-focus--focus"
       :class="computedLinkClasses"
       data-testid="menu-section-button"
       :data-qa-section-name="item.title"
@@ -126,7 +125,11 @@ export default {
       ></span>
       <span class="gl-flex-shrink-0 gl-w-6 gl-display-flex">
         <slot name="icon">
-          <gl-icon v-if="item.icon" :name="item.icon" class="gl-m-auto item-icon" />
+          <gl-icon
+            v-if="item.icon"
+            :name="item.icon"
+            class="super-sidebar-nav-item-icon gl-m-auto"
+          />
         </slot>
       </span>
 
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index f08cf7e5de3..14dd704c24c 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -223,7 +223,7 @@ export default {
       :is="navItemLinkComponent"
       #default="{ isActive }"
       v-bind="linkProps"
-      class="gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-focus--focus show-on-focus-or-hover--control hide-on-focus-or-hover--control"
+      class="super-sidebar-nav-item gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-text-decoration-none! gl-focus--focus show-on-focus-or-hover--control hide-on-focus-or-hover--control"
       :class="computedLinkClasses"
       data-testid="nav-item-link"
     >
@@ -236,7 +236,11 @@ export default {
       ></div>
       <div v-if="!isFlyout" class="gl-flex-shrink-0 gl-w-6 gl-display-flex">
         <slot name="icon">
-          <gl-icon v-if="item.icon" :name="item.icon" class="gl-m-auto item-icon" />
+          <gl-icon
+            v-if="item.icon"
+            :name="item.icon"
+            class="super-sidebar-nav-item-icon gl-m-auto"
+          />
           <gl-icon
             v-else-if="isInPinnedSection"
             name="grip"
@@ -264,7 +268,6 @@ export default {
           v-if="hasPill"
           size="sm"
           variant="neutral"
-          class="gl-bg-t-gray-a-08!"
           :class="{
             'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable,
           }"
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index f2970f05ebc..57ba00ee0a6 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -204,7 +204,7 @@ export default {
       <user-bar ref="userBar" :has-collapse-button="!showOverlay" :sidebar-data="sidebarData" />
       <div v-if="showTrialStatusWidget" class="gl-px-2 gl-py-2">
         <trial-status-widget
-          class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-py-3"
+          class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-text-decoration-none! gl-py-3"
         />
         <trial-status-popover />
       </div>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 3c47245a1a6..3c8bf62ff5c 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -200,7 +200,7 @@ export default {
       id="super-sidebar-search"
       v-gl-tooltip.bottom.html="searchTooltip"
       v-gl-modal="$options.SEARCH_MODAL_ID"
-      class="counter gl-display-block gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border-none gl-inset-border-1-gray-a-08 gl-line-height-1 gl-focus--focus gl-w-full"
+      class="user-bar-button gl-display-block gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border-none gl-line-height-1 gl-w-full"
       data-testid="super-sidebar-search-button"
     >
       <gl-icon name="search" />
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index 1e8f0a81088..f129d067cdc 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -248,7 +248,7 @@ export default {
       @shown="onShow"
     >
       <template #toggle>
-        <gl-button category="tertiary" class="user-bar-item btn-with-notification">
+        <gl-button category="tertiary" class="user-bar-dropdown-toggle btn-with-notification">
           <span class="gl-sr-only">{{ toggleText }}</span>
           <gl-avatar
             :size="24"
diff --git a/app/assets/javascripts/super_sidebar/constants.js b/app/assets/javascripts/super_sidebar/constants.js
index 061c0c855fe..815c2ec8e8e 100644
--- a/app/assets/javascripts/super_sidebar/constants.js
+++ b/app/assets/javascripts/super_sidebar/constants.js
@@ -54,7 +54,7 @@ export const SIDEBAR_COOKIE_EXPIRATION = 365 * 10;
 
 export const DROPDOWN_Y_OFFSET = 4;
 
-export const NAV_ITEM_LINK_ACTIVE_CLASS = 'gl-bg-t-gray-a-08';
+export const NAV_ITEM_LINK_ACTIVE_CLASS = 'super-sidebar-nav-item-current';
 
 export const IMPERSONATING_OFFSET = 34;
 
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index d1c93a3b498..84f0612a7b4 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -1,12 +1,3 @@
-@mixin active-toggle($background-color: var(--super-sidebar-user-bar-button-hover-bg)) {
-  background-color: $background-color !important;
-  mix-blend-mode: multiply;
-
-  .gl-dark & {
-    mix-blend-mode: screen;
-  }
-}
-
 $super-sidebar-transition-duration: $gl-transition-duration-medium;
 $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 
@@ -29,17 +20,44 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 }
 
 .super-sidebar {
-  --super-sidebar-bg: var(--gray-10, #{$gray-10});
-  --super-sidebar-primary: var(--blue-500, #{$blue-500});
-  --super-sidebar-notification-dot: var(--blue-500, #{$blue-500});
+  --super-sidebar-bg: #{$gray-10};
+  --super-sidebar-border-color: #{$t-gray-a-08};
+  --super-sidebar-primary: #{$blue-500};
+  --super-sidebar-notification-dot: #{$blue-500};
   --super-sidebar-user-bar-bg: #{$t-gray-a-04};
-  --super-sidebar-user-bar-button-bg: var(--gray-10, #{$gray-10});
-  --super-sidebar-user-bar-button-hover-bg: var(--gray-50, #{$gray-50});
-  --super-sidebar-user-bar-button-color: var(--gray-900, #{$gray-900});
-  --super-sidebar-user-bar-button-hover-color: var(--gray-900, #{$gray-900});
-  // Separate values provided to use `---gray-600` in dark  mode
-  --super-sidebar-user-bar-button-icon-color: var(--gray-600, #{$gray-500});
-  --super-sidebar-user-bar-button-icon-hover-color:  var(--gray-700, #{$gray-700});
+
+  --super-sidebar-user-bar-button-bg: #{$gray-10};
+  --super-sidebar-user-bar-button-color: #{$gray-900};
+  --super-sidebar-user-bar-button-border-color: #{$t-gray-a-08};
+  --super-sidebar-user-bar-button-hover-bg: #{$t-gray-a-08};
+  --super-sidebar-user-bar-button-hover-color: #{$gray-900};
+  --super-sidebar-user-bar-button-active-bg: #{$t-gray-a-16};
+
+  --super-sidebar-user-bar-button-icon-color: #{$gray-500};
+  --super-sidebar-user-bar-button-icon-hover-color: #{$gray-700};
+  --super-sidebar-user-bar-button-icon-mix-blend-mode: normal;
+
+  --super-sidebar-nav-item-hover-bg: #{$t-gray-a-08};
+  --super-sidebar-nav-item-active-bg: #{$t-gray-a-16};
+  --super-sidebar-nav-item-current-bg: #{$t-gray-a-08};
+  --super-sidebar-nav-item-icon-color: #{$gray-500};
+
+  .gl-dark & {
+    --super-sidebar-border-color: #{$t-white-a-08};
+    --super-sidebar-user-bar-bg: #{$t-white-a-04};
+
+    --super-sidebar-user-bar-button-bg: #{$gray-10};
+    --super-sidebar-user-bar-button-border-color: #{$t-white-a-08};
+    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-24};
+
+    --super-sidebar-user-bar-button-icon-color: #{$gray-600};
+
+    --super-sidebar-nav-item-hover-bg: #{$t-white-a-08};
+    --super-sidebar-nav-item-active-bg: #{$t-white-a-16};
+    --super-sidebar-nav-item-current-bg: #{$t-white-a-08};
+    --super-sidebar-nav-item-icon-color: #{$gray-600};
+  }
 
   display: flex;
   flex-direction: column;
@@ -48,7 +66,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   bottom: $calc-application-footer-height;
   left: 0;
   background-color: var(--super-sidebar-bg);
-  border-right: 1px solid $t-gray-a-08;
+  border-right: 1px solid var(--super-sidebar-border-color);
   transform: translate3d(0, 0, 0);
   width: $super-sidebar-width;
   z-index: $super-sidebar-z-index;
@@ -69,87 +87,86 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   .user-bar {
     background-color: var(--super-sidebar-user-bar-bg);
 
-    .user-bar-item {
-      @include gl-rounded-base;
+    .user-bar-dropdown-toggle {
       @include gl-p-2;
-      @include gl-bg-transparent;
       @include gl-border-none;
 
-      &:focus,
-      &:active {
-        @include gl-focus;
-      }
-    }
-
-    .user-bar-item {
-      &:hover,
-      &:focus,
-      &:active {
-        @include active-toggle;
-      }
-    }
-
-    .brand-logo {
-      &:hover,
-      &:focus {
+      &[aria-expanded='true'] {
         background-color: var(--super-sidebar-user-bar-button-hover-bg);
-        mix-blend-mode: multiply;
-
-        .gl-dark & {
-          mix-blend-mode: screen;
-        }
       }
     }
 
+    .brand-logo,
     .btn-default-tertiary,
-    .counter {
+    .user-bar-button {
       color: var(--super-sidebar-user-bar-button-color);
 
       .gl-icon {
         color: var(--super-sidebar-user-bar-button-icon-color) !important;
+        mix-blend-mode: var(--super-sidebar-user-bar-button-icon-mix-blend-mode);
       }
 
+      &:active,
       &:hover,
       &:focus {
-        background-color: var(--super-sidebar-user-bar-button-hover-bg) !important;
-        color: var(--super-sidebar-user-bar-button-hover-color);
-      }
-    }
-
-    .counter {
-      background-color: var(--super-sidebar-user-bar-button-bg);
-
-      &:hover,
-      &:focus,
-      &[aria-expanded='true'] {
         background-color: var(--super-sidebar-user-bar-button-hover-bg);
-        border-color: transparent;
-        mix-blend-mode: multiply;
+        color: var(--super-sidebar-user-bar-button-hover-color);
 
         .gl-icon {
           color: var(--super-sidebar-user-bar-button-icon-hover-color);
         }
+      }
 
-        .gl-dark & {
-          mix-blend-mode: screen;
-        }
+      &:active {
+        background-color: var(--super-sidebar-user-bar-button-active-bg) !important;
       }
 
-      &:hover,
+      &:focus,
+      &:active {
+        @include gl-focus;
+      }
+    }
+
+    .btn-default-tertiary {
+      mix-blend-mode: normal;
+    }
+
+    .user-bar-button {
+      background-color: var(--super-sidebar-user-bar-button-bg);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--super-sidebar-user-bar-button-border-color);
+
       &[aria-expanded='true'] {
-        box-shadow: none;
+        background-color: var(--super-sidebar-user-bar-button-hover-bg);
+        color: var(--super-sidebar-user-bar-button-hover-color);
       }
     }
+
+    .gl-new-dropdown-toggle[aria-expanded='true'] {
+      background-color: var(--super-sidebar-user-bar-button-hover-bg);
+      color: var(--super-sidebar-user-bar-button-hover-color);
+    }
   }
 
-  .item-icon {
-    color: $gray-500;
+  .super-sidebar-nav-item {
+    &:hover,
+    &:focus {
+      background-color: var(--super-sidebar-nav-item-hover-bg);
+    }
+
+    &.super-sidebar-nav-item-current {
+      background-color: var(--super-sidebar-nav-item-current-bg);
+    }
 
-    .gl-dark & {
-      color: $gray-600;
+    &:active,
+    &:focus:active {
+      background-color: var(--super-sidebar-nav-item-active-bg);
     }
   }
 
+  .super-sidebar-nav-item-icon {
+    color: var(--super-sidebar-nav-item-icon-color);
+  }
+
   .active-indicator {
     background-color: var(--super-sidebar-primary);
   }
@@ -173,22 +190,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     }
   }
 
-  .gl-new-dropdown-toggle[aria-expanded='true'] {
-    @include active-toggle;
-  }
-
-  .gl-new-dropdown-custom-toggle {
-    .btn-with-notification {
-      mix-blend-mode: unset; // Our tertiary buttons otherwise use another mix-blend mode, making border-color semi-transparent.
-    }
-
-    [aria-expanded='true'] {
-      @include active-toggle;
-    }
-  }
-
   .super-sidebar-help-center-toggle[aria-expanded='true'] {
-    @include active-toggle($gray-50);
+    background-color: $gray-50 !important;
   }
 
   #trial-status-sidebar-widget:hover {
@@ -365,7 +368,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   &:hover,
   &:focus-within {
     .show-on-focus-or-hover--control {
-      @include gl-bg-t-gray-a-08;
+      background-color: var(--super-sidebar-nav-item-hover-bg);
     }
 
     .show-on-focus-or-hover--target {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 2ba720f8083..0df00532fe9 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -101,12 +101,20 @@ $gray-dark: darken($gray-light, $darken-dark-factor) !default;
 $gray-darker: $gray-50 !default;
 $gray-darkest: $gray-200 !default;
 
-$t-gray-a-02: rgba($gray-950, 0.02) !default;
-$t-gray-a-04: rgba($gray-950, 0.04) !default;
-$t-gray-a-06: rgba($gray-950, 0.06) !default;
-$t-gray-a-08: rgba($gray-950, 0.08) !default;
-$t-gray-a-16: rgba($gray-950, 0.16) !default;
-$t-gray-a-24: rgba($gray-950, 0.24) !default;
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
+
+$t-gray-a-02: rgba(31, 30, 36, 0.02) !default;
+$t-gray-a-04: rgba(31, 30, 36, 0.04) !default;
+$t-gray-a-06: rgba(31, 30, 36, 0.06) !default;
+$t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
+$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
+$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
 
 $white-dark: darken($gray-50, 2) !default;
 
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index e61308e3d81..5a9f3dd096e 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -8,11 +8,9 @@ $gray-dark: darken($gray-100, 2);
 $gray-darker: darken($gray-200, 2);
 $gray-darkest: $gray-700;
 
-// Some of the other $t-gray-a variables are used
-// for borders and some other places, so we cannot override
-// them. These are used only for box shadows so we can
-$t-gray-a-16: rgba($gray-10, 0.16);
-$t-gray-a-24: rgba($gray-10, 0.24);
+// Used for border and background in a couple instances where inverting between modes is desirable
+// once migrated to suitable color values this can be removed
+$t-gray-a-08: rgba($gray-950, 0.08);
 
 $black-normal: $gray-900;
 $white-dark: $gray-100;
diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss
index adf097ddcd7..1a373fbfeda 100644
--- a/app/assets/stylesheets/themes/theme_blue.scss
+++ b/app/assets/stylesheets/themes/theme_blue.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-blue-50,
-        $theme-blue-200,
+        $theme-blue-100,
         $theme-blue-900,
         $theme-blue-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss
index e6ce699a701..a766fdddc78 100644
--- a/app/assets/stylesheets/themes/theme_green.scss
+++ b/app/assets/stylesheets/themes/theme_green.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-green-50,
-        $theme-green-200,
+        $theme-green-100,
         $theme-green-900,
         $theme-green-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 58c78c73fda..c94a32891f6 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -11,22 +11,19 @@
   .super-sidebar {
     --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)};
     --super-sidebar-user-bar-bg: #{$theme-color};
-    --super-sidebar-user-bar-button-bg: rgba(255, 255, 255, 0.16);
-    --super-sidebar-user-bar-button-hover-bg: rgba(255, 255, 255, 0.24);
+    --super-sidebar-primary: #{$theme-color};
+    --super-sidebar-notification-dot: #{$theme-color-darkest};
+
+    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
     --super-sidebar-user-bar-button-color: #{$theme-color-lightest};
+    --super-sidebar-user-bar-button-border-color: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24};
     --super-sidebar-user-bar-button-hover-color: #{$white};
+    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36};
+
     --super-sidebar-user-bar-button-icon-color: #{$theme-color-light};
     --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light};
-    --super-sidebar-primary: #{$theme-color};
-    --super-sidebar-notification-dot: #{$theme-color-darkest};
-
-    .user-bar {
-      .brand-logo,
-      .btn-default-tertiary,
-      .counter {
-        mix-blend-mode: normal;
-      }
-    }
+    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
 
     hr {
       mix-blend-mode: multiply;
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
index b9e4404b573..d0a8d597b59 100644
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_indigo.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-indigo-50,
-        $theme-indigo-200,
+        $theme-indigo-100,
         $theme-indigo-900,
         $theme-indigo-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss
index 9c3c16df217..e712b6ae859 100644
--- a/app/assets/stylesheets/themes/theme_light_blue.scss
+++ b/app/assets/stylesheets/themes/theme_light_blue.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-light-blue-50,
-        $theme-light-blue-200,
+        $theme-light-blue-100,
         $theme-light-blue-700,
         $theme-light-blue-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss
index 5865d6ad498..44e19b02e36 100644
--- a/app/assets/stylesheets/themes/theme_light_green.scss
+++ b/app/assets/stylesheets/themes/theme_light_green.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-green-50,
-        $theme-green-200,
+        $theme-green-100,
         $theme-green-700,
         $theme-green-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
index cfe1368980a..ab299ca9d84 100644
--- a/app/assets/stylesheets/themes/theme_light_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_light_indigo.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-indigo-50,
-        $theme-indigo-200,
+        $theme-indigo-100,
         $theme-indigo-700,
         $theme-indigo-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss
index a0b13e9832e..499cdace772 100644
--- a/app/assets/stylesheets/themes/theme_light_red.scss
+++ b/app/assets/stylesheets/themes/theme_light_red.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-light-red-50,
-        $theme-light-red-200,
+        $theme-light-red-100,
         $theme-light-red-700,
         $theme-light-red-900,
       );
diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss
index 75d26ed84e5..9a17f98aa80 100644
--- a/app/assets/stylesheets/themes/theme_red.scss
+++ b/app/assets/stylesheets/themes/theme_red.scss
@@ -5,7 +5,7 @@
     .page-with-super-sidebar {
       @include gitlab-theme-super-sidebar(
         $theme-red-50,
-        $theme-red-200,
+        $theme-red-100,
         $theme-red-900,
         $theme-red-900,
       );