Add Solarized light theme for the Web IDE

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -151,7 +151,7 @@
     border-color: var(--ide-border-color-alt, $gray-100);
 
     code {
-      background-color: var(--ide-border-color, inherit);
+      background-color: var(--ide-empty-state-background, inherit);
     }
   }
 
@@ -427,7 +427,7 @@
   }
 
   .md table:not(.code) tbody {
-    background-color: var(--ide-border-color, $white);
+    background-color: var(--ide-empty-state-background, $white);
   }
 
   .animation-container {

app/assets/stylesheets/page_bundles/ide.scss

@@ -5,6 +5,7 @@
 @import './ide_theme_overrides';
 
 @import './ide_themes/dark';
+@import './ide_themes/solarized-light';
 @import './ide_themes/solarized-dark';
 
 $search-list-icon-width: 18px;
@@ -176,11 +177,11 @@ $ide-commit-header-height: 48px;
     height: 100%;
     overflow: auto;
     padding: $gl-padding;
-    background-color: var(--ide-border-color, transparent);
+    background-color: var(--ide-empty-state-background, transparent);
   }
 
   .file-container {
-    background-color: var(--ide-border-color, $gray-darker);
+    background-color: var(--ide-empty-state-background, $gray-darker);
     display: flex;
     height: 100%;
     align-items: center;
@@ -491,7 +492,7 @@ $ide-commit-header-height: 48px;
   height: 100vh;
   align-items: center;
   justify-content: center;
-  background-color: var(--ide-border-color, transparent);
+  background-color: var(--ide-empty-state-background, transparent);
 }
 
 .ide {

app/assets/stylesheets/page_bundles/ide_themes/_dark.scss

@@ -12,6 +12,7 @@
   --ide-highlight-background: #252526;
   --ide-link-color: #428fdc;
   --ide-footer-background: #060606;
+  --ide-empty-state-background: var(--ide-border-color);
 
   --ide-input-border: #868686;
   --ide-input-background: transparent;

app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss

@@ -12,6 +12,7 @@
   --ide-highlight-background: #003240;
   --ide-link-color: #73b9ff;
   --ide-footer-background: var(--ide-highlight-background);
+  --ide-empty-state-background: var(--ide-border-color);
 
   --ide-input-border: #d8d8d8;
   --ide-input-background: transparent;

app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss

+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-solarized-light {
+  --ide-border-color: #dfd7bf;
+  --ide-border-color-alt: #dfd7bf;
+  --ide-highlight-accent: #5c4e21;
+  --ide-text-color: #616161;
+  --ide-text-color-secondary: #526f76;
+  --ide-background: #efe8d3;
+  --ide-background-hover: #ded6be;
+  --ide-highlight-background: #fef6e1;
+  --ide-link-color: #955800;
+  --ide-footer-background: #efe8d3;
+  --ide-empty-state-background: #fef6e1;
+
+  --ide-input-border: #c0b9a4;
+  --ide-input-background: transparent;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: #c0b9a4;
+  --ide-btn-default-hover-border: #c0b9a4;
+
+  --ide-btn-primary-background: #b16802;
+  --ide-btn-primary-border: #a35f00;
+  --ide-btn-primary-hover-border: #955800;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #dd8101;
+
+  --ide-btn-danger-secondary-background: transparent;
+
+  --ide-btn-disabled-background: transparent;
+  --ide-btn-disabled-border: rgba(192, 185, 64, 0.48);
+  --ide-btn-disabled-hover-border: rgba(192, 185, 64, 0.48);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: transparent;
+  --ide-btn-disabled-color: rgba(82, 82, 82, 0.48);
+
+  --ide-dropdown-background: #fef6e1;
+  --ide-dropdown-hover-background: #efe8d3;
+
+  --ide-dropdown-btn-hover-border: #dfd7bf;
+  --ide-dropdown-btn-hover-background: #efe8d3;
+
+  --ide-file-row-btn-hover-background: #ded6be;
+
+  --ide-animation-gradient-1: #d3cbb3;
+  --ide-animation-gradient-2: #efe8d3;
+
+  .ide-empty-state,
+  .ide-sidebar,
+  .ide-commit-empty-state {
+    img {
+      filter: sepia(1) brightness(0.7);
+    }
+  }
+}

changelogs/unreleased/221035-ide-solarized-light.yml

+---
+title: Add Web IDE Solarized Light theme support
+merge_request: 46999
+author:
+type: added