Removed the FF in frontend

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64324
EE: true

Cleaned up the resulting styles for the sidebar

Move color-dependent styles that should be themeable to the themes
and theme_helper

app/assets/javascripts/fly_out_nav.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
 
-const isRefactoring = document.body.classList.contains('sidebar-refactoring');
 const HIDE_INTERVAL_TIMEOUT = 300;
-const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
+const COLLAPSED_PANEL_WIDTH = 48;
 const IS_OVER_CLASS = 'is-over';
 const IS_ABOVE_CLASS = 'is-above';
 const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
@@ -89,12 +88,12 @@ export const moveSubItemsToPosition = (el, subItems) => {
   const boundingRect = el.getBoundingClientRect();
   const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
   let top = calculateTop(boundingRect, subItems.offsetHeight);
-  if (isRefactoring && hasSubItems) {
+  if (hasSubItems) {
     top -= header.offsetHeight;
-  } else if (isRefactoring) {
+  } else {
     top = boundingRect.top;
   }
-  const isAbove = top < boundingRect.top;
+  const isAbove = top <= boundingRect.top;
 
   subItems.classList.add('fly-out-list');
   subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign

app/assets/stylesheets/framework.scss

@@ -39,7 +39,7 @@
 @import 'framework/selects';
 @import 'framework/sidebar';
 @import 'framework/contextual_sidebar_header';
-@import 'framework/contextual_sidebar_refactoring/contextual_sidebar';
+@import 'framework/contextual_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss → app/assets/stylesheets/framework/contextual_sidebar.scss

-//
-// VARIABLES
-//
-
-$top-level-item-color: $purple-900;
-
-//
-// TEMPORARY OVERRIDES
-// Needed while we serve both *_base and *_variant stylesheets
-// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
-//
-&.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid $border-color;
-}
-
-&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
-  color: $white;
-}
-
-&.gl-dark .nav-sidebar li a,
-&.gl-dark .toggle-sidebar-button .collapse-text,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
-&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  color: $gray-darkest;
-}
-
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  @include gl-mt-0;
-}
-
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  background: $white;
-  color: $gray-darkest;
-
-  &::before {
-    border-right-color: $white;
-  }
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: $white;
-}
-
-&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
-  color: $top-level-item-color;
-}
-
-&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
-  fill: $top-level-item-color;
-}
-
-.nav-sidebar {
-  box-shadow: none;
-
-  li.active {
-    background-color: transparent;
-    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
-  }
-}
-
 //
 // MIXINS
 //
@@ -112,7 +35,6 @@ $top-level-item-color: $purple-900;
 
     .icon-chevron-double-lg-left {
       @include gl-rotate-180;
-      @include gl-display-block; // TODO: shouldn't be needed after the flag roll out
       @include gl-m-0;
     }
   }
@@ -219,15 +141,10 @@ $top-level-item-color: $purple-900;
 
       .avatar.s32 {
         @extend .rect-avatar.s32;
-        //color: $gray-900;
         box-shadow: $avatar-box-shadow;
       }
     }
   }
-
-  .sidebar-context-title {
-    color: $top-level-item-color;
-  }
 }
 
 @mixin top-level-item {
@@ -258,8 +175,6 @@ $top-level-item-color: $purple-900;
     @include gl-cursor-default;
     @include gl-pointer-events-none;
     @include gl-font-sm;
-    background-color: $purple-900;
-    color: $white;
 
     @if $has-sub-items {
       @include gl-mt-0;
@@ -269,7 +184,8 @@ $top-level-item-color: $purple-900;
       @include gl-my-n2;
       @include gl-mt-0;
       @include gl-relative;
-      background-color: $black;
+      @include gl-text-white;
+      background: var(--black, $black);
 
       strong {
         @include gl-font-weight-normal;
@@ -287,6 +203,7 @@ $top-level-item-color: $purple-900;
         border-top: $gl-spacing-scale-2 solid transparent;
         border-bottom: $gl-spacing-scale-2 solid transparent;
         border-right: $gl-spacing-scale-2 solid $black;
+        border-right-color: var(--black, $black);
       }
     }
   }
@@ -343,7 +260,7 @@ $top-level-item-color: $purple-900;
 
   a {
     @include gl-text-decoration-none;
-    color: $top-level-item-color;
+    color: $gray-900;
   }
 
   li {
@@ -392,13 +309,15 @@ $top-level-item-color: $purple-900;
   }
 
   a.has-sub-items + .sidebar-sub-level-items {
-    @include gl-mt-n2;
-
     .fly-out-top-item {
       @include fly-out-top-item($has-sub-items: true);
     }
   }
 
+  a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
+    @include gl-mt-n2;
+  }
+
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
     &:not(.sidebar-expanded-mobile) {
       @include collapse-contextual-sidebar;
@@ -445,8 +364,8 @@ $top-level-item-color: $purple-900;
       }
 
       .badge.badge-pill {
-        @include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
-        color: $blue-700; // TODO: update in `theme_helper.scss`
+        @include gl-font-weight-normal;
+        color: $blue-700;
       }
     }
   }
@@ -484,7 +403,6 @@ $top-level-item-color: $purple-900;
   @include side-panel-toggle;
   background-color: $gray-50;
   border-top: 1px solid $border-color;
-  color: $top-level-item-color;
   position: fixed;
   bottom: 0;
   width: $contextual-sidebar-width;
@@ -538,14 +456,10 @@ $top-level-item-color: $purple-900;
 
 //
 // PANELS-SPECIFIC
-// TODO: Check whether we can remove these in favor of the utility-classes
 //
 
 .settings-avatar {
-  background-color: $white;
-
   svg {
-    fill: $gl-text-color-secondary;
     margin: auto;
   }
 }

app/assets/stylesheets/framework/contextual_sidebar_header.scss

@@ -32,6 +32,7 @@
   .sidebar-context-title {
     overflow: hidden;
     text-overflow: ellipsis;
+    color: $gray-900;
 
     &.text-secondary {
       font-weight: normal;

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss

-body:not(.sidebar-refactoring) {
-  @import 'contextual_sidebar_base';
-}
-
-body.sidebar-refactoring {
-  @import 'contextual_sidebar_variant';
-}

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss

-@mixin collapse-contextual-sidebar-content {
-
-  @include context-header-collapsed;
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
-
-    .collapse-text,
-    .icon-chevron-double-lg-left {
-      display: none;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
-    }
-  }
-}
-
-@mixin collapse-contextual-sidebar {
-  width: $contextual-sidebar-collapsed-width;
-
-  .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-
-  .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name {
-    @include gl-sr-only;
-  }
-
-  .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-
-  .fly-out-top-item {
-    display: block;
-  }
-
-  .avatar-container {
-    margin: 0 auto;
-  }
-}
-
-@at-root {
-  .page-with-contextual-sidebar {
-    transition: padding-left $sidebar-transition-duration;
-
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-
-    @include media-breakpoint-up(xl) {
-      padding-left: $contextual-sidebar-width;
-    }
-
-    .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-      padding: 10px 0 15px;
-    }
-  }
-
-  .page-with-icon-sidebar {
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-  }
-
-  .settings-avatar {
-    background-color: $white;
-
-    svg {
-      fill: $gl-text-color-secondary;
-      margin: auto;
-    }
-  }
-
-  .nav-sidebar {
-    transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-    position: fixed;
-    z-index: 600;
-    width: $contextual-sidebar-width;
-    top: $header-height;
-    bottom: 0;
-    left: 0;
-    background-color: $gray-light;
-    box-shadow: inset -1px 0 0 $border-color;
-    transform: translate3d(0, 0, 0);
-
-    &:not(.sidebar-collapsed-desktop) {
-      @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-        box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-      }
-    }
-
-    &.sidebar-collapsed-desktop {
-      @include collapse-contextual-sidebar;
-    }
-
-    &.sidebar-expanded-mobile {
-      left: 0;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    ul {
-      padding-left: 0;
-      list-style: none;
-    }
-
-    li {
-      white-space: nowrap;
-
-      a {
-        transition: padding $sidebar-transition-duration;
-        display: flex;
-        align-items: center;
-        padding: 12px $gl-padding;
-        color: $gl-text-color-secondary;
-      }
-
-      .nav-item-name {
-        flex: 1;
-      }
-
-      &.active {
-        > a {
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      left: (-$contextual-sidebar-width);
-    }
-
-    .nav-icon-container {
-      display: flex;
-      margin-right: 8px;
-    }
-
-    .fly-out-top-item {
-      display: none;
-    }
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-
-    @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
-      &:not(.sidebar-expanded-mobile) {
-        @include collapse-contextual-sidebar;
-        @include collapse-contextual-sidebar-content;
-      }
-    }
-  }
-
-  .nav-sidebar-inner-scroll {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .sidebar-sub-level-items {
-    display: none;
-    padding-bottom: 8px;
-
-    > li {
-      a {
-        padding: 8px 16px 8px 40px;
-
-        &:hover,
-        &:focus {
-          background: $link-active-background;
-          color: $gl-text-color;
-        }
-      }
-
-      &.active {
-        a {
-          &,
-          &:hover,
-          &:focus {
-            background: $link-active-background;
-          }
-        }
-      }
-    }
-  }
-
-  .sidebar-top-level-items {
-    margin-bottom: 60px;
-
-    > li {
-      > a {
-        @include media-breakpoint-up(sm) {
-          margin-right: 1px;
-        }
-
-        &:hover {
-          color: $gl-text-color;
-        }
-      }
-
-      &.is-showing-fly-out {
-        > a {
-          margin-right: 1px;
-        }
-
-        .sidebar-sub-level-items {
-          @include media-breakpoint-up(sm) {
-            position: fixed;
-            top: 0;
-            left: 0;
-            min-width: 150px;
-            margin-top: -1px;
-            padding: 4px 1px;
-            background-color: $white;
-            box-shadow: 2px 1px 3px $dropdown-shadow-color;
-            border: 1px solid $gray-darker;
-            border-left: 0;
-            border-radius: 0 3px 3px 0;
-
-            &::before {
-              content: '';
-              position: absolute;
-              top: -30px;
-              bottom: -30px;
-              left: -10px;
-              right: -30px;
-              z-index: -1;
-            }
-
-            &.is-above {
-              margin-top: 1px;
-            }
-
-            .divider {
-              height: 1px;
-              margin: 4px -1px;
-              padding: 0;
-              background-color: $dropdown-divider-bg;
-            }
-
-            > .active {
-              box-shadow: none;
-
-              > a {
-                background-color: transparent;
-              }
-            }
-
-            a {
-              padding: 8px 16px;
-              color: $gl-text-color;
-
-              &:hover,
-              &:focus {
-                background-color: $gray-darker;
-              }
-            }
-          }
-        }
-      }
-
-      .badge.badge-pill {
-        background-color: $inactive-badge-background;
-        color: $gl-text-color-secondary;
-      }
-
-      &.active {
-        background: $link-active-background;
-
-        > a {
-          margin-left: 4px;
-          // Subtract width of left border on active element
-          padding-left: $gl-padding-12;
-        }
-
-        .badge.badge-pill {
-          font-weight: $gl-font-weight-bold;
-        }
-
-        .sidebar-sub-level-items:not(.is-fly-out-only) {
-          display: block;
-        }
-      }
-
-      &.active > a:hover,
-      &.is-over > a {
-        background-color: $link-hover-background;
-      }
-    }
-  }
-
-  // Collapsed nav
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    @include side-panel-toggle;
-  }
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    position: fixed;
-    bottom: 0;
-    width: $contextual-sidebar-width - 1px;
-    border-top: 1px solid $border-color;
-
-    svg {
-      margin-right: 8px;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: none;
-    }
-  }
-
-  .collapse-text {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .sidebar-collapsed-desktop {
-    @include collapse-contextual-sidebar-content;
-  }
-
-  .fly-out-top-item {
-    > a {
-      display: flex;
-    }
-
-    .fly-out-badge {
-      margin-left: 8px;
-    }
-  }
-
-  .fly-out-top-item-name {
-    flex: 1;
-  }
-
-  // Mobile nav
-
-  .close-nav-button {
-    display: none;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .close-nav-button {
-      display: flex;
-    }
-
-    .toggle-sidebar-button {
-      display: none;
-    }
-
-    .mobile-overlay {
-      display: none;
-
-      &.mobile-nav-open {
-        display: block;
-        position: fixed;
-        background-color: $black-transparent;
-        height: 100%;
-        width: 100%;
-        z-index: $zindex-dropdown-menu;
-      }
-    }
-  }
-}
-

app/assets/stylesheets/themes/_dark.scss

@@ -253,3 +253,14 @@ $well-inner-border: $gray-200;
   color: $gray-900;
   border-color: $gray-800;
 }
+
+.nav-sidebar {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}

app/assets/stylesheets/themes/theme_helper.scss

@@ -174,20 +174,20 @@
   }
 
   // Sidebar
-  .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $border-and-box-shadow;
-
-    > a {
-      color: $sidebar-text;
-    }
-
-    .nav-icon-container svg {
-      fill: $sidebar-text;
-    }
+  .nav-sidebar li.active > a {
+    color: $sidebar-text;
   }
 
-  .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $sidebar-text;
+  .nav-sidebar {
+    .fly-out-top-item {
+      a,
+      a:hover,
+      &.active a,
+      .fly-out-top-item-container {
+        background-color: $purple-900;
+        color: $white;
+      }
+    }
   }
 
   .nav-links li {
@@ -213,7 +213,6 @@
   .ide-sidebar-link {
     &.active {
       color: $border-and-box-shadow;
-      box-shadow: inset 3px 0 $border-and-box-shadow;
 
       &.is-right {
         box-shadow: inset -3px 0 $border-and-box-shadow;

app/assets/stylesheets/themes/theme_indigo.scss

@@ -6,7 +6,7 @@ body {
       $indigo-200,
       $indigo-500,
       $indigo-700,
-      $indigo-800,
+      $purple-900,
       $indigo-900,
       $white
     );

app/views/layouts/application.html.haml

 - page_classes = page_class << @html_class
 - page_classes = page_classes.flatten.compact
 - body_classes = [user_application_theme, user_tab_width, @body_class, client_class_list]
-- body_classes << 'sidebar-refactoring' if sidebar_refactor_enabled?
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }