From ca5bde8d9ae106170d12ed241c8fa43d12701152 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Mon, 1 Sep 2025 16:30:07 +0200
Subject: [PATCH 1/2] Add gradient to the paneled background

---
 .../stylesheets/framework/super_sidebar.scss  | 86 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index b5818e3d4512ad..f125a7f61c9df1 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -68,6 +68,7 @@ $command-palette-spacing: px-to-rem(14px);
 }
 
 @mixin super-sidebar-theme(
+  $theme-color,
   $background,
   $accent-color-fg,
   $accent-color-bg,
@@ -77,6 +78,7 @@ $command-palette-spacing: px-to-rem(14px);
   .super-topbar,
   .super-sidebar,
   &.page-with-panels {
+    --theme-color: #{$theme-color};
     --super-sidebar-bg: #{$background};
     --super-sidebar-accent-color-fg: #{$accent-color-fg};
     --super-sidebar-accent-color-bg: #{$accent-color-bg};
@@ -87,6 +89,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-indigo {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-purple-500),
     $background: var(--gl-color-purple-50),
     $accent-color-fg: var(--gl-color-purple-800),
     $accent-color-bg: var(--gl-color-purple-100),
@@ -95,6 +98,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-purple-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-purple-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -105,6 +109,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-blue {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-blue-500),
     $background: var(--gl-color-blue-50),
     $accent-color-fg: var(--gl-color-blue-900),
     $accent-color-bg: var(--gl-color-blue-100),
@@ -113,6 +118,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-blue-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-blue-100),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -124,6 +130,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-green {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-green-500),
     $background: var(--gl-color-green-50),
     $accent-color-fg: var(--gl-color-green-900),
     $accent-color-bg: var(--gl-color-green-100),
@@ -132,6 +139,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-green-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-green-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -142,6 +150,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-red {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-red-500),
     $background: var(--gl-color-red-50),
     $accent-color-fg: var(--gl-color-red-800),
     $accent-color-bg: var(--gl-color-red-100),
@@ -150,6 +159,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-red-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-red-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -158,8 +168,9 @@ $command-palette-spacing: px-to-rem(14px);
   }
 }
 
-.ui-gray {
+.ui-gray, .ui-neutral {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-neutral-500),
     $background: var(--gl-background-color-strong),
     $accent-color-fg: var(--gl-color-neutral-800),
     $accent-color-bg: var(--gl-color-neutral-100),
@@ -168,6 +179,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-neutral-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-neutral-100),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -726,8 +738,7 @@ $scroll-scrim-height: 2.25rem;
 
 .super-topbar,
 .super-sidebar,
-.application-chrome body,
-.page-with-panels body {
+.application-chrome body {
   background-color: var(--super-sidebar-bg);
 }
 
@@ -1136,3 +1147,72 @@ html:not(.gl-dark) .super-topbar .organization-switcher-button.gl-button:not(:ho
   --gl-button-confirm-primary-border-color-focus: var(--gl-color-neutral-0);
   --gl-button-confirm-primary-border-color-active: var(--gl-color-neutral-0);
 }
+
+.page-with-panels {
+  // Theming
+  // original idea
+  &.gl-light {
+    // default color to mute the gradient
+    --_shade-0: rgba(from var(--gl-background-color-default) r g b / 85%);
+    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 4%);
+  }
+
+  &.gl-dark {
+    // default color to mute the gradient
+    --_shade-0: rgba(from var(--gl-background-color-default) r g b / 80%);
+    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 8%);
+  }
+
+  body {
+    // lighest shade
+    // --_shade-1: hsl(from var(--theme-color) calc(h - 5) calc(s - 1) calc(l + 30));
+    // --_shade-2: hsl(from var(--theme-color) calc(h - 2) calc(s - 1) calc(l + 20));
+    // --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
+    // darkest shade
+    // --_shade-4: hsl(from var(--theme-color) calc(h + 2) calc(s + 18) calc(l - 21));
+
+    background:
+      radial-gradient(closest-side at -5% 50%, var(--_shade-3), transparent 25vw),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-1), transparent 35vw),
+      linear-gradient(-45deg, var(--_shade-3), transparent 50%),
+      linear-gradient(45deg, var(--_shade-4), var(--_shade-2))
+      ;
+  }
+
+  // variant 2
+  &.gl-light {
+    // default color to mute the gradient
+    --_shade-0: rgba(from var(--gl-color-neutral-0) r g b / 70%);
+    // background
+    --_shade-2: color-mix(in srgb, var(--gl-color-neutral-100), var(--theme-color) 10%);
+    // original color
+    --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 0));
+    // alternative color
+    --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
+    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 4%);
+  }
+
+  &.gl-dark {
+    // default color to mute the gradient
+    --_shade-0: rgba(from var(--gl-color-neutral-950) r g b / 75%);
+    // background
+    --_shade-2: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 60%);
+    // original color
+    --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 20));
+    // alternative color
+    --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l + 20));
+    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 8%);
+  }
+
+  body {
+    --_shade-1: hsl(from var(--theme-color) calc(h - 5) calc(s - 1) calc(l + 30));
+
+    background:
+      linear-gradient(var(--_shade-0)),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-4), transparent 40vw),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-3), transparent 50vw),
+      radial-gradient(farthest-side at 100% 100%, var(--_shade-4), transparent 30vw),
+      var(--_shade-2)
+      ;
+  }
+}
-- 
GitLab


From 7d5fda384a10f618a97ffcc824b32e33561a1f20 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 1 Sep 2025 17:46:06 +0200
Subject: [PATCH 2/2] Update Sascha

---
 .../stylesheets/framework/super_sidebar.scss  | 128 +++++++++---------
 .../javascripts/ai/components/chat_panel.vue  |   1 +
 2 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index f125a7f61c9df1..4bec2a3448372f 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -44,27 +44,28 @@ $command-palette-spacing: px-to-rem(14px);
   --super-sidebar-nav-item-current-bg: var(--super-sidebar-accent-color-bg);
 
   --super-sidebar-hr-mix-blend-mode: multiply;
+}
 
-  .gl-dark & {
-    --super-sidebar-bg: var(--gl-background-color-subtle);
-
-    --super-sidebar-accent-color-fg: var(--gl-color-blue-200);
-    --super-sidebar-accent-color-bg: var(--gl-color-neutral-950);
+.gl-dark .super-topbar,
+.gl-dark .super-sidebar,
+.gl-dark.page-with-panels {
+  --super-sidebar-bg: var(--gl-background-color-subtle);
 
-    --super-sidebar-search-bar-button-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-8);
-    --super-sidebar-user-bar-button-border-color: transparent;
-    --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-24);
-    --super-sidebar-user-bar-notification-dot: var(--gl-color-blue-200);
+  --super-sidebar-accent-color-fg: var(--gl-color-blue-200);
+  --super-sidebar-accent-color-bg: var(--gl-color-neutral-950);
 
-    --super-sidebar-nav-item-hover-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-nav-item-active-bg: var(--gl-color-alpha-light-24);
-    --super-sidebar-nav-item-current-bg: rgb(from var(--super-sidebar-accent-color-fg) r g b / 15%);
+  --super-sidebar-search-bar-button-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-8);
+  --super-sidebar-user-bar-button-border-color: transparent;
+  --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-24);
+  --super-sidebar-user-bar-notification-dot: var(--gl-color-blue-200);
 
-    --super-sidebar-hr-mix-blend-mode: color-dodge;
+  --super-sidebar-nav-item-hover-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-nav-item-active-bg: var(--gl-color-alpha-light-24);
+  --super-sidebar-nav-item-current-bg: rgb(from var(--super-sidebar-accent-color-fg) r g b / 15%);
 
-  }
+  --super-sidebar-hr-mix-blend-mode: color-dodge;
 }
 
 @mixin super-sidebar-theme(
@@ -168,7 +169,7 @@ $command-palette-spacing: px-to-rem(14px);
   }
 }
 
-.ui-gray, .ui-neutral {
+.ui-gray {
   @include super-sidebar-theme(
     $theme-color: var(--gl-color-neutral-500),
     $background: var(--gl-background-color-strong),
@@ -188,6 +189,26 @@ $command-palette-spacing: px-to-rem(14px);
   }
 }
 
+.ui-neutral {
+  @include super-sidebar-theme(
+    $theme-color: var(--gl-color-neutral-500),
+    $background: var(--gl-background-color-strong),
+    $accent-color-fg: var(--gl-color-blue-800),
+    $accent-color-bg: var(--gl-color-blue-100),
+    $accent-notification-dot: var(--gl-color-neutral-500),
+  );
+
+  &.gl-dark {
+    @include super-sidebar-theme(
+      $theme-color: var(--gl-color-neutral-500),
+      $background: var(--gl-background-color-subtle),
+      $accent-color-fg: var(--gl-color-blue-100),
+      $accent-color-bg: var(--gl-background-blue-300),
+      $accent-notification-dot: var(--gl-color-neutral-200),
+    );
+  }
+}
+
 .super-sidebar {
   display: flex;
   flex-direction: column;
@@ -1148,60 +1169,27 @@ html:not(.gl-dark) .super-topbar .organization-switcher-button.gl-button:not(:ho
   --gl-button-confirm-primary-border-color-active: var(--gl-color-neutral-0);
 }
 
-.page-with-panels {
-  // Theming
-  // original idea
-  &.gl-light {
-    // default color to mute the gradient
-    --_shade-0: rgba(from var(--gl-background-color-default) r g b / 85%);
-    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 4%);
-  }
-
-  &.gl-dark {
-    // default color to mute the gradient
-    --_shade-0: rgba(from var(--gl-background-color-default) r g b / 80%);
-    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 8%);
-  }
-
-  body {
-    // lighest shade
-    // --_shade-1: hsl(from var(--theme-color) calc(h - 5) calc(s - 1) calc(l + 30));
-    // --_shade-2: hsl(from var(--theme-color) calc(h - 2) calc(s - 1) calc(l + 20));
-    // --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
-    // darkest shade
-    // --_shade-4: hsl(from var(--theme-color) calc(h + 2) calc(s + 18) calc(l - 21));
-
-    background:
-      radial-gradient(closest-side at -5% 50%, var(--_shade-3), transparent 25vw),
-      radial-gradient(farthest-side at 50% 0%, var(--_shade-1), transparent 35vw),
-      linear-gradient(-45deg, var(--_shade-3), transparent 50%),
-      linear-gradient(45deg, var(--_shade-4), var(--_shade-2))
-      ;
-  }
-
-  // variant 2
-  &.gl-light {
-    // default color to mute the gradient
-    --_shade-0: rgba(from var(--gl-color-neutral-0) r g b / 70%);
-    // background
-    --_shade-2: color-mix(in srgb, var(--gl-color-neutral-100), var(--theme-color) 10%);
-    // original color
-    --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 0));
-    // alternative color
-    --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
-    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 4%);
-  }
+.application-chrome {
+  // default color to mute the gradient
+  --_shade-0: rgba(from var(--gl-color-neutral-0) r g b / 80%);
+  // background
+  --_shade-2: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 36%);
+  // original color
+  --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 0));
+  // alternative color
+  --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
+  --theme-background-color: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 1%);
 
   &.gl-dark {
     // default color to mute the gradient
-    --_shade-0: rgba(from var(--gl-color-neutral-950) r g b / 75%);
+    --_shade-0: rgba(from var(--gl-color-neutral-950) r g b / 90%);
     // background
     --_shade-2: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 60%);
     // original color
     --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 20));
     // alternative color
     --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l + 20));
-    --gl-background-color-default: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 8%);
+    --theme-background-color: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 2%);
   }
 
   body {
@@ -1209,10 +1197,24 @@ html:not(.gl-dark) .super-topbar .organization-switcher-button.gl-button:not(:ho
 
     background:
       linear-gradient(var(--_shade-0)),
-      radial-gradient(farthest-side at 50% 0%, var(--_shade-4), transparent 40vw),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-4), transparent 70vw),
       radial-gradient(farthest-side at 50% 0%, var(--_shade-3), transparent 50vw),
       radial-gradient(farthest-side at 100% 100%, var(--_shade-4), transparent 30vw),
       var(--_shade-2)
       ;
   }
 }
+
+.super-topbar,
+.super-sidebar,
+.super-sidebar .bottom-scrim,
+.super-sidebar .top-scrim {
+  background: transparent;
+}
+
+.application-chrome.page-with-panels .top-bar-fixed,
+.application-chrome.page-with-panels #static-panel-portal,
+.application-chrome.page-with-panels #contextual-panel-portal,
+.application-chrome.page-with-panels #ai-panel-portal {
+  background-color: var(--theme-background-color) !important;
+}
diff --git a/ee/app/assets/javascripts/ai/components/chat_panel.vue b/ee/app/assets/javascripts/ai/components/chat_panel.vue
index 893cddb101d58f..c5a0d9d2483b92 100644
--- a/ee/app/assets/javascripts/ai/components/chat_panel.vue
+++ b/ee/app/assets/javascripts/ai/components/chat_panel.vue
@@ -29,6 +29,7 @@ export default {
 <template>
   <aside
     v-if="isExpanded"
+    id="ai-panel-portal"
     :aria-label="__('AI Chat Panel')"
     :aria-hidden="!isExpanded"
     class="gl-w-[400px] gl-rounded-[1rem] gl-bg-default"
-- 
GitLab