Merge branch '336738-dark-mode-ui-bug' into 'master'

Fix new project page in dark mode

See merge request gitlab-org/gitlab!68102

app/assets/stylesheets/page_bundles/new_namespace.scss

@@ -17,10 +17,10 @@ $new-namespace-panel-height: 240px;
 
 .new-namespace-panel {
   &:hover {
-    background-color: $gray-10;
+    background-color: var(--gray-50, $gray-10);
   }
 
-  color: $purple-700;
+  color: var(--purple-700, $purple-700);
   min-height: $new-namespace-panel-height;
   text-align: center;
   @include media-breakpoint-up(lg) {

app/assets/stylesheets/startup/startup-dark.scss

@@ -11,6 +11,7 @@ body.gl-dark {
   --green-700: #91d4a8;
   --blue-400: #1f75cb;
   --orange-400: #ab6100;
+  --purple-100: #2f2a6b;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1524,7 +1525,7 @@ svg.s16 {
   background-color: #660e00;
 }
 .identicon.bg2 {
-  background-color: #f4f0ff;
+  background-color: #232150;
 }
 .identicon.bg3 {
   background-color: #f1f1ff;
@@ -1651,7 +1652,7 @@ body.gl-dark .nav-sidebar li.active > a {
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: #2f2a6b;
+  background-color: var(--purple-100, #e1d8f9);
   color: var(--black, #333);
 }
 body.gl-dark .logo-text svg {
@@ -1746,6 +1747,17 @@ body.gl-dark {
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
   --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
+  --purple-50: #232150;
+  --purple-100: #2f2a6b;
+  --purple-200: #453894;
+  --purple-300: #5943b6;
+  --purple-400: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-600: #9475db;
+  --purple-700: #ac93e6;
+  --purple-800: #cbbbf2;
+  --purple-900: #e1d8f9;
+  --purple-950: #f4f0ff;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;

app/assets/stylesheets/themes/_dark.scss

@@ -72,6 +72,18 @@ $indigo-900: #ebebfa;
 $indigo-950: #f7f7ff;
 $indigo-900-alpha-008: rgba($indigo-900, 0.08);
 
+$purple-50: #232150;
+$purple-100: #2f2a6b;
+$purple-200: #453894;
+$purple-300: #5943b6;
+$purple-400: #694cc0;
+$purple-500: #7b58cf;
+$purple-600: #9475db;
+$purple-700: #ac93e6;
+$purple-800: #cbbbf2;
+$purple-900: #e1d8f9;
+$purple-950: #f4f0ff;
+
 $gray-lightest: #222;
 $gray-light: $gray-50;
 $gray-lighter: #303030;
@@ -163,6 +175,18 @@ body.gl-dark {
   --indigo-950: #{$indigo-950};
   --indigo-900-alpha-008: #{$indigo-900-alpha-008};
 
+  --purple-50: #{$purple-50};
+  --purple-100: #{$purple-100};
+  --purple-200: #{$purple-200};
+  --purple-300: #{$purple-300};
+  --purple-400: #{$purple-400};
+  --purple-500: #{$purple-500};
+  --purple-600: #{$purple-600};
+  --purple-700: #{$purple-700};
+  --purple-800: #{$purple-800};
+  --purple-900: #{$purple-900};
+  --purple-950: #{$purple-950};
+
   --gl-text-color: #{$gray-900};
   --border-color: #{$border-color};
 

app/assets/stylesheets/themes/theme_helper.scss

@@ -184,7 +184,7 @@
       a:hover,
       &.active a,
       .fly-out-top-item-container {
-        background-color: $purple-900;
+        background-color: var(--purple-100, $purple-900);
         color: var(--black, $white);
       }
     }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -11,6 +11,7 @@ body.gl-dark {
   --green-700: #91d4a8;
   --blue-400: #1f75cb;
   --orange-400: #ab6100;
+  --purple-100: #2f2a6b;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1524,7 +1525,7 @@ svg.s16 {
   background-color: #660e00;
 }
 .identicon.bg2 {
-  background-color: #f4f0ff;
+  background-color: #232150;
 }
 .identicon.bg3 {
   background-color: #f1f1ff;
@@ -1651,7 +1652,7 @@ body.gl-dark .nav-sidebar li.active > a {
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: #2f2a6b;
+  background-color: var(--purple-100, #e1d8f9);
   color: var(--black, #333);
 }
 body.gl-dark .logo-text svg {
@@ -1746,6 +1747,17 @@ body.gl-dark {
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
   --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
+  --purple-50: #232150;
+  --purple-100: #2f2a6b;
+  --purple-200: #453894;
+  --purple-300: #5943b6;
+  --purple-400: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-600: #9475db;
+  --purple-700: #ac93e6;
+  --purple-800: #cbbbf2;
+  --purple-900: #e1d8f9;
+  --purple-950: #f4f0ff;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;