Merge pull request #30567 from overleaf/ds-mj-dark-mode-project-list

[web] Adding dark mode project list on Dashboard

GitOrigin-RevId: ed678b1ffa8abb776eed46fb3b4b88deedd3b62c

services/web/frontend/stylesheets/components/table.scss

@@ -1,8 +1,48 @@
+@mixin light-table {
+  --bs-table-color: var(--content-primary);
+  --bs-table-bg: var(--bg-light-primary);
+  --bs-table-striped-color: var(--content-secondary);
+  --bs-table-striped-bg: var(--bg-light-secondary);
+  --bs-table-active-color: var(--content-secondary);
+  --bs-table-active-bg: var(--link-web-hover);
+  --bs-table-hover-color: var(--content-secondary);
+  --bs-table-hover-bg: var(--bg-light-secondary);
+  --bs-border-divider: var(--border-divider);
+  --table-bg-tertiary: var(--bg-light-tertiary);
+}
+
+@mixin dark-table {
+  --bs-table-color: var(--content-primary-dark);
+  --bs-table-bg: var(--bg-dark-primary);
+  --bs-table-striped-color: var(--content-secondary-dark);
+  --bs-table-striped-bg: var(--bg-dark-secondary);
+  --bs-table-active-color: var(--content-secondary-dark);
+  --bs-table-active-bg: var(--link-web-hover);
+  --bs-table-hover-color: var(--content-secondary-dark);
+  --bs-table-hover-bg: var(--bg-dark-secondary);
+  --bs-border-divider: var(--border-divider-dark);
+  --table-bg-tertiary: var(--bg-dark-tertiary);
+}
+
+:root {
+  @include light-table;
+
+  @include theme('default') {
+    .project-ds-nav-page {
+      .table,
+      .table-container {
+        @include dark-table;
+      }
+    }
+  }
+}
+
 .table-container {
   flex: 1;
   margin-bottom: var(--spacing-06);
-  background-color: var(--white);
+  background-color: var(--bs-table-bg);
   padding: var(--spacing-04);
+  border-color: var(--bs-border-divider);
 
   .table {
     margin-bottom: initial;
@@ -10,6 +50,8 @@
 }
 
 .table {
+  border-color: var(--bs-border-divider);
+
   th,
   td {
     a {
@@ -49,7 +91,7 @@
 
 .table-container-bordered {
   padding: var(--spacing-04);
-  border-color: $table-border-color;
+  border-color: var(--bs-border-divider);
   border-radius: var(--border-radius-base);
   border-width: var(--bs-border-width);
   border-style: solid;
@@ -65,7 +107,7 @@
 
   > tbody > tr:nth-of-type(#{$table-striped-order}) {
     &:hover > * {
-      --#{$prefix}table-hover-bg: var(--bg-light-tertiary);
+      --#{$prefix}table-hover-bg: var(--table-bg-tertiary);
     }
   }
 }

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -2,11 +2,13 @@
   --ds-nav-active-bg: var(--bg-accent-03);
   --ds-nav-active-color: var(--green-60);
   --theme-toggle-selected-background: var(--green-20);
+  --ds-nav-content-bg-secondary: var(--bg-light-secondary);
 
   @include theme('default') {
     --ds-nav-active-bg: var(--green-70);
     --ds-nav-active-color: var(--green-10);
     --theme-toggle-selected-background: var(--green-70);
+    --ds-nav-content-bg-secondary: var(--bg-dark-secondary);
   }
 }
 
@@ -19,7 +21,7 @@ body {
 .project-ds-nav-page {
   @include full-height-stacked-page;
 
-  color: var(--content-secondary);
+  color: var(--content-secondary-themed);
 
   // NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update
   --navbar-btn-padding-h: var(--spacing-06);
@@ -61,7 +63,7 @@ body {
       .nav-item-help::before {
         content: '';
         display: block;
-        border-top: 1px solid var(--border-divider);
+        border-top: 1px solid var(--border-divider-themed);
         margin: var(--spacing-07) var(--spacing-06);
       }
 
@@ -111,7 +113,7 @@ body {
         border-bottom: solid 1px transparent;
 
         &.show-shadow {
-          border-bottom-color: var(--border-divider);
+          border-bottom-color: var(--border-divider-themed);
         }
 
         > .dropdown-menu {
@@ -144,7 +146,7 @@ body {
         border-top: solid 1px transparent;
 
         &.show-shadow {
-          border-top-color: var(--border-divider);
+          border-top-color: var(--border-divider-themed);
         }
       }
 
@@ -262,7 +264,7 @@ body {
 
     .project-dash-table {
       .btn-link {
-        color: var(--content-secondary);
+        color: var(--content-secondary-themed);
         height: var(--spacing-08);
         width: var(--spacing-08);
         border-radius: 100%;
@@ -276,7 +278,7 @@ body {
       }
 
       .dash-cell-name a {
-        color: var(--content-secondary) !important;
+        color: var(--content-primary-themed) !important;
       }
     }
 
@@ -295,11 +297,11 @@ body {
         flex-grow: 1;
         overflow-y: auto;
         position: relative;
-        background-color: var(--bg-light-secondary);
+        background-color: var(--ds-nav-content-bg-secondary);
 
         @include media-breakpoint-up(md) {
           border-top-left-radius: var(--border-radius-large);
-          border-top: 1px solid var(--border-divider);
+          border-top: 1px solid var(--border-divider-themed);
         }
       }
 

services/web/frontend/stylesheets/pages/project-list.scss

@@ -144,7 +144,7 @@
   .project-list-title {
     @include heading-sm;
 
-    color: $content-secondary;
+    color: var(--content-secondary-themed);
     font-weight: bold;
     min-width: 0;
   }
@@ -354,7 +354,7 @@ ul.project-list-filters {
   .table-header-sort-btn {
     border: 0;
     text-align: left;
-    color: var(--content-secondary);
+    color: var(--content-secondary-themed);
     background-color: transparent;
     padding: 0;
     font-weight: bold;
@@ -365,7 +365,7 @@ ul.project-list-filters {
 
     &:hover,
     &:focus {
-      color: var(--content-secondary);
+      color: var(--content-secondary-themed);
       text-decoration: none;
     }
 
@@ -576,7 +576,7 @@ ul.project-list-filters {
 .current-plan {
   a.current-plan-label {
     text-decoration: none;
-    color: $content-secondary;
+    color: var(--content-secondary-themed);
   }
 
   .current-plan-label-icon {