[web] Adding dark mode project list on Dashboard for Mobile screen (#30786)

* adding border color for mobile screen

* adding bg color with variable

* adding bg icon variable for background color of the icons

GitOrigin-RevId: 3020d40b2b9182c68cc7c23c1f2f18cd7851d7d4

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

@@ -9,6 +9,7 @@
   --bs-table-hover-bg: var(--bg-light-secondary);
   --bs-border-divider: var(--border-divider);
   --table-bg-tertiary: var(--bg-light-tertiary);
+  --table-btn-bg-hover: 27 34 44;
 }
 
 @mixin dark-table {
@@ -22,6 +23,7 @@
   --bs-table-hover-bg: var(--bg-dark-secondary);
   --bs-border-divider: var(--border-divider-dark);
   --table-bg-tertiary: var(--bg-dark-tertiary);
+  --table-btn-bg-hover: 255 255 255;
 }
 
 :root {
@@ -84,6 +86,14 @@
     .dropdown-table-button-toggle {
       @include action-button;
 
+      color: var(--bs-table-color);
+
+      &:hover,
+      &:active,
+      &[aria-expanded='true'] {
+        background-color: rgb(var(--table-btn-bg-hover) / 8%);
+      }
+
       padding: var(--spacing-04);
     }
   }

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

@@ -3,12 +3,14 @@
   --ds-nav-active-color: var(--green-60);
   --theme-toggle-selected-background: var(--green-20);
   --ds-nav-content-bg-secondary: var(--bg-light-secondary);
+  --table-icon-bg-hover: 27 34 44;
 
   @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);
+    --table-icon-bg-hover: 255 255 255;
   }
 }
 
@@ -273,7 +275,7 @@ body {
 
         &:hover,
         &:focus {
-          background-color: #d9d9d9 !important;
+          background-color: rgb(var(--table-icon-bg-hover) / 8%) !important;
         }
       }
 

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

@@ -335,7 +335,7 @@ ul.project-list-filters {
 
   @include media-breakpoint-down(md) {
     tr:not(:last-child) {
-      border-bottom: 1px solid $table-border-color;
+      border-bottom: 1px solid var(--border-divider-themed);
     }
 
     td {