Address harcoded color values

Author: paulb777

ai/ai-react-app/src/components/Layout/LeftSidebar.module.css

@@ -1,8 +1,8 @@
 .sidebar {
-  background-color: #f8f9fa;
+  background-color: var(--color-surface-secondary);
   padding: 1rem;
   height: 100%;
-  border-right: 1px solid #dee2e6;
+  border-right: 1px solid var(--color-border-primary);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -16,39 +16,39 @@
 
 .navButton {
   background-color: transparent;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--color-border-primary);
   border-radius: 0.375rem;
   padding: 0.75rem 1rem;
   width: 100%;
   text-align: left;
   cursor: pointer;
   font-size: 1rem;
-  color: #212529;
+  color: var(--color-text-primary);
   transition:
     background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out;
 }
 
 .navButton:hover {
-  background-color: #e9ecef;
+  background-color: var(--color-surface-tertiary);
 }
 
 .navButton.active {
-  background-color: #0d6efd;
-  color: white;
-  border-color: #0d6efd;
+  background-color: var(--color-surface-interactive);
+  color: var(--color-text-on-interactive);
+  border-color: var(--color-surface-interactive);
 }
 
 .backendSelector,
 .personaSelector {
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--color-border-primary);
   padding-top: 1rem;
 }
 
 .selectorTitle {
   font-size: 0.875rem;
   font-weight: 600;
-  color: #6c757d;
+  color: var(--color-text-secondary);
   text-transform: uppercase;
   margin-bottom: 0.75rem;
 }
@@ -69,17 +69,19 @@
   width: 100%;
   padding: 0.5rem;
   border-radius: 0.25rem;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--color-border-secondary);
   font-size: 0.9rem;
-  background-color: #fff;
+  background-color: var(--color-surface-primary);
 }
 
 .customPersonaTextarea {
   width: 100%;
   margin-top: 0.5rem;
   padding: 0.5rem;
   border-radius: 0.25rem;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--color-border-secondary);
   font-size: 0.9rem;
   resize: vertical;
+  background-color: var(--color-surface-primary);
+  color: var(--color-text-primary);
 }