Add latest changes from gitlab-org/gitlab@16-8-stable-eev16.8.0-rc42

14 files changed, 368 insertions, 171 deletions

diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 3f1d742ca14..7c3684f7c2e 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -12,3 +12,56 @@
     color: $green;
   }
 }
+
+// FF :simplified_badges
+//
+// Temporarily override badge styles
+// globally
+//
+// Once verified we will update the
+// badge component in GitLab UI
+// refactor GitLab and remove this
+// custom code
+//
+// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
+.ff-simplified-badges-enabled {
+  // These changes will be moved to
+  // GitLab UI's badge component
+  .gl-badge,
+  .gl-badge.sm,
+  .gl-badge.md,
+  .gl-badge.lg {
+    @include gl-font-sm;
+    padding-block: $gl-spacing-scale-1;
+    padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
+
+    > .gl-icon {
+      @include gl-ml-0;
+    }
+  }
+
+  // These changes will be moved to
+  // GitLab UI's button component
+  .gl-button .gl-badge {
+    @include gl-py-0;
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/super_sidebar.scss
+  .super-sidebar-nav-item .gl-badge {
+    vertical-align: 2px;
+  }
+
+  // These changes will be moved to
+  // GitLab UI's tab component
+  .gl-tab-nav-item .gl-badge {
+    margin-block: -2px;
+  }
+
+  // Temporarily needed because of the
+  // speciality this FF adds
+  // the utility class gets overriden
+  .gl-badge.ci-icon {
+    @include gl-p-2;
+  }
+}
diff --git a/app/assets/stylesheets/framework/breadcrumbs.scss b/app/assets/stylesheets/framework/breadcrumbs.scss
new file mode 100644
index 00000000000..b71382f5570
--- /dev/null
+++ b/app/assets/stylesheets/framework/breadcrumbs.scss
@@ -0,0 +1,13 @@
+.breadcrumbs {
+  flex: 1;
+  min-width: 0;
+  align-self: center;
+  color: $gl-text-color-secondary;
+
+  .avatar-tile {
+    margin-right: 4px;
+    border: 1px solid $border-color;
+    border-radius: 50%;
+    vertical-align: sub;
+  }
+}
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index b948a57ea33..497a8a08a6f 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -225,7 +225,7 @@ $diff-file-header: 41px;
           width: 15px;
           position: absolute;
           top: 0;
-          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
+          background: url('swipemode_sprites.gif') 0 3px no-repeat;
         }
 
         .bottom-handle {
@@ -234,7 +234,7 @@ $diff-file-header: 41px;
           width: 15px;
           position: absolute;
           bottom: 0;
-          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
+          background: url('swipemode_sprites.gif') 0 -11px no-repeat;
         }
       }
     }
@@ -272,7 +272,7 @@ $diff-file-header: 41px;
           left: 12px;
           height: 10px;
           width: 276px;
-          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
+          background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
         }
 
         .dragger {
@@ -282,7 +282,7 @@ $diff-file-header: 41px;
           top: 0;
           height: 14px;
           width: 14px;
-          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
+          background: url('onion_skin_sprites.gif') 0 -34px repeat-x;
           cursor: pointer;
         }
 
@@ -293,7 +293,7 @@ $diff-file-header: 41px;
           right: 0;
           height: 10px;
           width: 10px;
-          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
+          background: url('onion_skin_sprites.gif') -2px 0 no-repeat;
         }
 
         .opaque {
@@ -303,7 +303,7 @@ $diff-file-header: 41px;
           left: 0;
           height: 10px;
           width: 10px;
-          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
+          background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
         }
       }
     }
@@ -770,12 +770,12 @@ table.code {
 .frame.click-to-comment,
 .btn-transparent.image-diff-overlay-add-comment {
   position: relative;
-  cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  cursor: url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   // Retina cursor
-  cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
-  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  cursor: image-set(url('illustrations/image_comment_light_cursor.svg') 1x,
+  url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   .comment-indicator {
@@ -944,3 +944,12 @@ table.code {
     left: -2px !important;
   }
 }
+
+.diff-file.pinned-file .file-title {
+  background-color: $blue-50;
+  border-color: $blue-200;
+}
+
+.diff-file.pinned-file .diff-content {
+  border-color: $blue-200;
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index e791a0dbbbd..2558ddec9b9 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -575,7 +575,7 @@
           left: 1rem;
           width: 1rem;
           height: 1rem;
-          mask-image: asset_url('icons-stacked.svg#check');
+          mask-image: url('icons-stacked.svg#check');
           mask-repeat: no-repeat;
           mask-size: cover;
           mask-position: center center;
@@ -806,28 +806,6 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .navbar-gitlab {
-    li.dropdown {
-      position: static;
-    }
-  }
-
-  header.navbar-gitlab .dropdown {
-    .dropdown-menu {
-      width: 100%;
-      min-width: 100%;
-    }
-  }
-
-  header.navbar-gitlab-new .header-content .dropdown {
-    .dropdown-menu {
-      left: 0;
-      min-width: 100%;
-    }
-  }
-}
-
 .dropdown-content-faded-mask {
   position: relative;
 
@@ -959,3 +937,17 @@
     width: 100%;
   }
 }
+
+.group-namespace-dropdown .gl-new-dropdown-custom-toggle {
+  display: flex;
+  flex: auto;
+
+  .gl-button-text {
+    display: flex;
+    @include gl-w-full;
+  }
+}
+
+.group-namespace-dropdown .gl-new-dropdown-item-text-wrapper {
+  word-break: break-word;
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 9cb264c992b..7dcde5f0b3c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -420,7 +420,7 @@ span.idiff {
   @include gl-h-5;
   @include gl-float-left;
   background-color: $gray-400;
-  mask-image: asset_url('icons-stacked.svg#doc-versions');
+  mask-image: url('icons-stacked.svg#doc-versions');
   mask-repeat: no-repeat;
   mask-size: cover;
   mask-position: center;
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 6b4f1478978..56667c10752 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -96,14 +96,6 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   }
 }
 
-@include media-breakpoint-down(sm) {
-  ul.notes {
-    .flash-container.timeline-content {
-      margin-left: 0;
-    }
-  }
-}
-
 .gl-browser-ie .flash-container {
   position: fixed;
   max-width: $limited-layout-width;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 23f40dfe4bf..84e69e40bc2 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -9,119 +9,6 @@
   left: 0;
   right: 0;
   border-radius: 0;
-
-  .close-icon {
-    display: none;
-  }
-
-  .header-content {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    min-height: var(--header-height);
-    padding-left: 0;
-
-    .title {
-      padding-right: 0;
-      color: currentColor;
-      display: flex;
-      position: relative;
-      margin: 0;
-      font-size: 18px;
-      vertical-align: top;
-      white-space: nowrap;
-
-      img {
-        height: 24px;
-
-        + .logo-text {
-          margin-left: 8px;
-        }
-      }
-
-      &.wrap {
-        white-space: normal;
-      }
-
-      &.initializing {
-        opacity: 0;
-      }
-
-      a:not(.canary-badge) {
-        display: flex;
-        align-items: center;
-        padding: 2px 8px;
-        margin: 4px 2px 4px -8px;
-        border-radius: $border-radius-default;
-
-        &:active,
-        &:focus {
-          @include gl-focus($focus-ring: $focus-ring-dark);
-        }
-      }
-    }
-
-    .dropdown.open {
-      > a {
-        border-bottom-color: $white;
-      }
-    }
-  }
-
-  .container-fluid {
-    padding: 0;
-
-    .nav > li {
-      > a {
-        will-change: color;
-        margin: 4px 0;
-        padding: 6px 8px;
-        height: 32px;
-      }
-    }
-  }
-}
-
-.top-bar-container {
-  min-height: $top-bar-height;
-}
-
-.top-bar-fixed {
-  @include gl-inset-border-b-1-gray-100;
-  background-color: $body-bg;
-  left: var(--application-bar-left);
-  position: fixed;
-  right: var(--application-bar-right);
-  top: $calc-application-bars-height;
-  width: auto;
-  z-index: $top-bar-z-index;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: left $gl-transition-duration-medium, right $gl-transition-duration-medium;
-  }
-}
-
-.breadcrumbs {
-  flex: 1;
-  min-width: 0;
-  align-self: center;
-  color: $gl-text-color-secondary;
-
-  .avatar-tile {
-    margin-right: 4px;
-    border: 1px solid $border-color;
-    border-radius: 50%;
-    vertical-align: sub;
-  }
-}
-
-.breadcrumb-item-text {
-  text-decoration: inherit;
-
-  @include media-breakpoint-down(xs) {
-    @include str-truncated(128px);
-  }
 }
 
 .navbar-empty {
@@ -173,17 +60,6 @@
   @include media-breakpoint-down(xs) { margin-right: 3px; }
 }
 
-.top-nav-menu-item {
-  &.active,
-  &:hover {
-    background-color: $nav-active-bg !important;
-  }
-
-  .gl-icon {
-    color: inherit !important;
-  }
-}
-
 .header-logged-out {
   z-index: $header-zindex;
   min-height: var(--header-height);
diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss
new file mode 100644
index 00000000000..1933af5151c
--- /dev/null
+++ b/app/assets/stylesheets/framework/labels.scss
@@ -0,0 +1,56 @@
+// FF :simplified_labels
+//
+// Temporarily override label styles
+// globally
+//
+// Once verified we will update the
+// label component in GitLab UI
+// refactor GitLab and remove this
+// custom code
+//
+// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
+.ff-simplified-labels-enabled {
+  // These changes will be moved to
+  // GitLab UI's label component
+  .gl-label,
+  .gl-label-sm {
+    @include gl-vertical-align-bottom;
+
+    &:focus:active {
+      @include gl-reset-color;
+      @include gl-shadow-none;
+      @include gl-outline-none;
+    }
+
+    .gl-label-text,
+    .gl-label-text-scoped {
+      @include gl-font-sm;
+      padding-block: $gl-spacing-scale-1;
+      padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
+    }
+
+    > .gl-label-close.gl-button {
+      width: px-to-rem(14px);
+      height: px-to-rem(14px);
+      margin-left: calc(#{-$gl-spacing-scale-2} - 1px);
+      margin-right: calc(#{$gl-spacing-scale-2} - 1px);
+    }
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/sidebar.scss
+  .issuable-show-labels .gl-label {
+    margin-bottom: $gl-spacing-scale-2;
+    margin-right: $gl-spacing-scale-2;
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/typography.scss
+  .md p > code {
+    font-size: px-to-rem(13px);
+  }
+
+  .md code {
+    @include gl-vertical-align-bottom;
+  }
+}
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 7ec13c3d54c..4ef53c673f6 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -1,6 +1,4 @@
 html {
-  overflow-y: scroll;
-
   &.touch .tooltip {
     display: none !important;
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 0eecf7bddc1..04799a6b8f8 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -601,6 +601,7 @@
     .gutter-toggle {
       width: 100%;
       height: $sidebar-toggle-height;
+      margin-top: 0;
       margin-left: 0;
       border-bottom: 1px solid $border-color;
       border-radius: 0;
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index a09ab7ed64c..2b597634519 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -78,7 +78,7 @@
         @include gl-mr-2;
         @include gl-w-4;
         @include gl-h-4;
-        mask-image: asset_url('icons-stacked.svg#link');
+        mask-image: url('icons-stacked.svg#link');
         mask-repeat: no-repeat;
         mask-size: cover;
         mask-position: center;
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 84f0612a7b4..5a9a739fb13 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -22,7 +22,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 .super-sidebar {
   --super-sidebar-bg: #{$gray-10};
   --super-sidebar-border-color: #{$t-gray-a-08};
-  --super-sidebar-primary: #{$blue-500};
+  --super-sidebar-context-header-color: inherit;
+  --super-sidebar-active-indicator-color: #{$blue-500};
   --super-sidebar-notification-dot: #{$blue-500};
   --super-sidebar-user-bar-bg: #{$t-gray-a-04};
 
@@ -42,6 +43,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   --super-sidebar-nav-item-current-bg: #{$t-gray-a-08};
   --super-sidebar-nav-item-icon-color: #{$gray-500};
 
+  --super-sidebar-hr-mix-blend-mode: normal;
+
   .gl-dark & {
     --super-sidebar-border-color: #{$t-white-a-08};
     --super-sidebar-user-bar-bg: #{$t-white-a-04};
@@ -58,7 +61,148 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     --super-sidebar-nav-item-current-bg: #{$t-white-a-08};
     --super-sidebar-nav-item-icon-color: #{$gray-600};
   }
+}
+
+@mixin super-sidebar-theme(
+  $background,
+  $user-bar-background,
+  $user-bar-button-color,
+  $user-bar-button-icon-color,
+  $context-header,
+  $active-indicator,
+  $notification-dot,
+) {
+  .super-sidebar {
+    --super-sidebar-bg: #{$background};
+    --super-sidebar-user-bar-bg: #{$user-bar-background};
+    --super-sidebar-context-header-color: #{$context-header};
+    --super-sidebar-active-indicator-color: #{$active-indicator};
+    --super-sidebar-notification-dot: #{$notification-dot};
+
+    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-color: #{$user-bar-button-color};
+    --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: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-hover-color: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
+
+    --super-sidebar-hr-mix-blend-mode: multiply;
+  }
+}
+
+.ui-blue {
+  @include super-sidebar-theme(
+    $background: $theme-blue-10,
+    $user-bar-background: $theme-blue-900,
+    $user-bar-button-color: $theme-blue-50,
+    $user-bar-button-icon-color: $theme-blue-100,
+    $context-header: $theme-blue-900,
+    $active-indicator: $theme-blue-900,
+    $notification-dot: $theme-blue-900,
+  );
+}
+
+.ui-gray {
+  @include super-sidebar-theme(
+    $background: $gray-10,
+    $user-bar-background: $gray-900,
+    $user-bar-button-color: $gray-50,
+    $user-bar-button-icon-color: $gray-100,
+    $context-header: $gray-900,
+    $active-indicator: $gray-900,
+    $notification-dot: $gray-900,
+  );
+}
+
+.ui-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-900,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-900,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-blue {
+  @include super-sidebar-theme(
+    $background: $theme-light-blue-10,
+    $user-bar-background: $theme-light-blue-700,
+    $user-bar-button-color: $theme-light-blue-50,
+    $user-bar-button-icon-color: $theme-light-blue-100,
+    $context-header: $theme-light-blue-900,
+    $active-indicator: $theme-light-blue-900,
+    $notification-dot: $theme-light-blue-900,
+  );
+}
+
+.ui-light-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-700,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-light-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-700,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-red {
+  @include super-sidebar-theme(
+    $background: $theme-light-red-10,
+    $user-bar-background: $theme-light-red-700,
+    $user-bar-button-color: $theme-light-red-50,
+    $user-bar-button-icon-color: $theme-light-red-100,
+    $context-header: $theme-light-red-900,
+    $active-indicator: $theme-light-red-900,
+    $notification-dot: $theme-light-red-900,
+  );
+}
 
+.ui-red {
+  @include super-sidebar-theme(
+    $background: $theme-red-10,
+    $user-bar-background: $theme-red-900,
+    $user-bar-button-color: $theme-red-50,
+    $user-bar-button-icon-color: $theme-red-100,
+    $context-header: $theme-red-900,
+    $active-indicator: $theme-red-900,
+    $notification-dot: $theme-red-900,
+  );
+}
+
+.super-sidebar {
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -167,8 +311,12 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     color: var(--super-sidebar-nav-item-icon-color);
   }
 
+  hr {
+    mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode);
+  }
+
   .active-indicator {
-    background-color: var(--super-sidebar-primary);
+    background-color: var(--super-sidebar-active-indicator-color);
   }
 
   .btn-with-notification {
@@ -200,6 +348,10 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 }
 
+.super-sidebar-context-header {
+  color: var(--super-sidebar-context-header-color);
+}
+
 .super-sidebar-overlay {
   display: none;
 }
@@ -408,6 +560,13 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 }
 
+.super-sidebar-empty-pinned-text {
+  mix-blend-mode: multiply;
+
+  .gl-dark & {
+    mix-blend-mode: screen;
+  }
+}
 
 // Styles for the ScrollScrim component.
 // Should eventually be moved to gitlab-ui.
@@ -461,3 +620,17 @@ $scroll-scrim-height: 2.25rem;
     opacity: 1;
   }
 }
+
+// Tweaks to the styles for the ScrollScrim component above (line 418)
+// are leaking into the collapsible list box dropdowns
+// https://gitlab.com/gitlab-org/gitlab/-/issues/435538
+
+.gl-new-dropdown {
+  .top-scrim-wrapper {
+    margin-bottom: 0;
+  }
+
+  .bottom-scrim-wrapper {
+    margin-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/top_bar.scss b/app/assets/stylesheets/framework/top_bar.scss
new file mode 100644
index 00000000000..d4b36b82584
--- /dev/null
+++ b/app/assets/stylesheets/framework/top_bar.scss
@@ -0,0 +1,20 @@
+.top-bar-container {
+  min-height: $top-bar-height;
+}
+
+.top-bar-fixed {
+  @include gl-inset-border-b-1-gray-100;
+  background-color: $body-bg;
+  position: fixed;
+  left: var(--application-bar-left);
+  right: var(--application-bar-right);
+  top: $calc-application-bars-height;
+  width: calc(100% - var(--application-bar-left));
+  z-index: $top-bar-z-index;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: left $gl-transition-duration-medium,
+                right $gl-transition-duration-medium,
+                width $gl-transition-duration-medium;
+  }
+}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index eefdbda8f4f..15e794fc347 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -495,7 +495,7 @@
 
       &::after {
         @include gl-dark-invert-keep-hue;
-        content: image-url('icon_anchor.svg');
+        content: url('icon_anchor.svg');
         visibility: hidden;
       }
     }
@@ -602,6 +602,20 @@
   }
 
   @include email-code-block;
+
+  &.gl-text-secondary {
+    color: $gl-text-color-secondary;
+
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    table:not(.code) {
+      color: $gl-text-color-secondary;
+    }
+  }
 }
 
 /**