diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss
index e8a385cbcf61..6c04c9f40767 100644
--- a/src/main/scss/abstracts/_theme.scss
+++ b/src/main/scss/abstracts/_theme.scss
@@ -94,6 +94,13 @@ $semantics: (
     from var(--text-color) 96.8% 0.005 h / 0.8
   );
 
+  // App bar
+  --bottom-app-bar-shadow: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 7.5%,
+    transparent
+  );
+
   // Alert call outs
   --alert-success-text-color: var(--success-color);
   --alert-success-bg-color: color-mix(
@@ -171,11 +178,10 @@ $semantics: (
   --btn-link-bg--hover: var(--very-light-grey);
   --btn-link-color--active: var(--primary-active);
   --btn-link-bg--active: var(--light-grey);
-
-
   --jenkins-border-color: color-mix(in sRGB, currentColor 1.5%, transparent);
   --jenkins-border-width: 1.5px;
-  --jenkins-border: var(--jenkins-border-width) solid var(--jenkins-border-color);
+  --jenkins-border: var(--jenkins-border-width) solid
+    var(--jenkins-border-color);
   //--jenkins-border: var(--jenkins-border-width) solid var(--red);
   // hsla(240, 25%, 75%, 0.25)
 
@@ -287,7 +293,11 @@ $semantics: (
   // Tab bar
   --tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
   --tabs-item-background: transparent;
-  --tabs-item-foreground: color-mix(in srgb, var(--text-color-secondary), var(--text-color));
+  --tabs-item-foreground: color-mix(
+    in sRGB,
+    var(--text-color-secondary),
+    var(--text-color)
+  );
   --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
   --tabs-item-background--active: rgb(0 0 0 / 0.1);
diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss
index 86dc2ae7a5df..cd96ab9d8196 100644
--- a/src/main/scss/components/_app-bar.scss
+++ b/src/main/scss/components/_app-bar.scss
@@ -132,7 +132,7 @@
     top: -30px;
     left: 0;
     right: 0;
-    background: linear-gradient(transparent, rgba(#556, 0.075) 110%);
+    background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%);
     max-width: 100%;
     height: 30px;
     opacity: 0;
diff --git a/src/main/scss/components/_tabs.scss b/src/main/scss/components/_tabs.scss
index e2af1a3eb8ce..4a931eaea741 100644
--- a/src/main/scss/components/_tabs.scss
+++ b/src/main/scss/components/_tabs.scss
@@ -44,7 +44,8 @@ $border-radius: 100px;
   font-weight: 400;
   min-width: 3.75rem;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     inset: 2px;
   }
 }
@@ -74,7 +75,8 @@ $border-radius: 100px;
     display: none;
   }
 
-  &::before, &::after {
+  &::before,
+  &::after {
     inset: 0;
   }
 }
diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss
index 6173b461c634..36775ac3d59e 100644
--- a/src/main/scss/form/_search-bar.scss
+++ b/src/main/scss/form/_search-bar.scss
@@ -158,7 +158,7 @@
     .jenkins-search__input {
       padding: 0 0.5rem 0 45px;
     }
-    
+
     /* stylelint-disable-next-line media-query-no-invalid */
     @media (min-width: breakpoints.$tablet-breakpoint) {
       max-width: 50vw;