continued styling dark mode

Author: garrettlchow

src/app/styles/components/_actionComponent.scss

@@ -3,8 +3,8 @@
 }
 
 .route-header {
-  background-color: #1f2937;
-  color: #ffffff;
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-text);
   padding: 10px;
   font-size: 14px;
 }
@@ -24,17 +24,17 @@
 .action-component {
   display: flex;
   padding: 6px 16px;
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
   transition: background-color 200ms ease;
 }
 
 .action-component:hover {
-  background-color: #f9fafb;
+  background-color: var(--hover-bg);
 }
 
 .action-component.selected {
-  background-color: #f3f4f6;
+  background-color: var(--selected-bg);
 }
 
 .action-component-trigger {
@@ -53,13 +53,13 @@
   border: none;
   background: transparent;
   font-size: 1rem;
-  color: #374151;
+  color: var(--text-primary);
   width: 100%;
   padding: 2px 0;
 }
 
 .actionname::placeholder {
-  color: #6b7280;
+  color: var(--text-secondary);
 }
 
 .actionname:focus {
@@ -85,21 +85,21 @@
 }
 
 .time-button {
-  color: #6b7280;
+  color: var(--text-secondary);
   background: transparent;
 }
 
 .jump-button {
-  color: white;
-  background: #111827;
+  color: var(--button-primary-text);
+  background: var(--button-primary-bg);
 }
 
 .jump-button:hover {
-  background: #374151;
+  background: var(--text-primary);
 }
 
 .current-location {
-  color: #14b8a6;
+  color: var(--color-primary);
   background: #f0fdfa;
 }
 
@@ -121,7 +121,7 @@
   border: none;
   background: transparent;
   font-size: 1rem;
-  color: #374151;
+  color: var(--text-primary);
   width: 100%;
   padding: 2px 0px;
 }

src/app/styles/components/_buttons.scss

@@ -8,8 +8,8 @@
   padding: 8px 12x;
   border-radius: 8px;
   border: none;
-  background-color: #1f2937;
-  color: white;
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-text);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -19,7 +19,7 @@
   overflow: hidden;
 
   &:hover {
-    background-color: #374151;
+    background-color: var(--text-primary);
   }
 
   &:focus {
@@ -73,7 +73,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #374151;
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 500;
 }
@@ -104,8 +104,8 @@
 
 .clear-button-modern {
   width: 100% !important;
-  background-color: #f3f4f6 !important;
-  color: #374151 !important;
+  background-color: var(--bg-tertiary) !important;
+  color: var(--text-primary) !important;
   font-size: 0.875rem !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
@@ -115,7 +115,7 @@
 }
 
 .clear-button-modern:hover {
-  background-color: #e5e7eb !important;
+  background-color: var(--border-color) !important;
 }
 
 /* Theme toggle button styling */

src/app/styles/components/_componentMap.scss

@@ -1,11 +1,11 @@
 /* Component Map Container */
 .componentMapContainer {
-  fill: #f9fafb;
+  fill: var(--bg-secondary);
   transition: all 0.3s ease;
   overflow: auto;
 }
 .componentMapContainer svg {
-  background-color: #f9fafb;
+  background-color: var(--bg-secondary);
 }
 
 #root {
@@ -15,24 +15,24 @@
 /* Node Styling */
 .compMapParent,
 .compMapChild {
-  fill: #ffffff;
-  stroke: #e5e7eb;
+  fill: var(--bg-primary);
+  stroke: var(--border-color);
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
   transition: all 0.2s ease;
 }
 
 .compMapParent:hover,
 .compMapChild:hover {
-  stroke: #14b8a6;
+  stroke: var(--color-primary);
   stroke-width: 2px;
   cursor: pointer;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
 /* Root Node Styling */
 .compMapRoot {
-  fill: #14b8a6;
-  stroke: #0d9488;
+  fill: var(--color-primary);
+  stroke: var(--color-primary-dark);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   transition: all 0.2s ease;
 }
@@ -45,15 +45,15 @@
 
 /* Text Styling */
 .compMapRootText {
-  fill: #ffffff;
+  fill: var(--bg-primary);
   font-family: 'Outfit', sans-serif;
   font-weight: 500;
   user-select: none;
 }
 
 .compMapParentText,
 .compMapChildText {
-  fill: #374151;
+  fill: var(--text-primary);
   font-family: 'Outfit', sans-serif;
   font-weight: 500;
   user-select: none;

src/app/styles/components/_performanceVisx.scss

@@ -26,9 +26,9 @@
 #routes-select,
 #snapshot-select,
 .control-select {
-  background-color: #f9fafb;
-  border: 1px solid #e5e7eb;
-  color: #374151;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
   font-size: 14px;
   padding: 6px 12px;
   border-radius: 6px;
@@ -46,16 +46,16 @@
 #routes-select:hover,
 #snapshot-select:hover,
 .control-select:hover {
-  border-color: #d1d5db;
-  background-color: #f3f4f6;
+  border-color: var(--border-color-dark);
+  background-color: var(--bg-tertiary);
 }
 
 .performance-dropdown:focus,
 #routes-select:focus,
 #snapshot-select:focus,
 .control-select:focus {
   outline: none;
-  border-color: #14b8a6;
+  border-color: var(--color-primary);
   box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
 }
 

src/app/styles/components/d3graph.css

@@ -7,14 +7,14 @@
 
 /* Node rectangle styling */
 .node rect {
-  fill: #ffffff;
-  stroke: #e5e7eb;
+  fill: var(--bg-primary);
+  stroke: var(--border-color);
   stroke-width: 1px;
   transition: all 200ms ease;
 }
 
 .node:hover rect {
-  stroke: #14b8a6;
+  stroke: var(--color-primary);
   stroke-width: 2px;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
@@ -24,47 +24,47 @@
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
   font-weight: 500;
-  fill: #374151;
+  fill: var(--text-primary);
 }
 
 /* Parent node specific styling */
 .node--internal rect {
-  fill: #ffffff;
-  stroke: #e5e7eb;
+  fill: var(--bg-primary);
+  stroke: var(--border-color);
 }
 
 .node--internal:hover rect {
-  stroke: #14b8a6;
+  stroke: var(--color-primary);
   stroke-width: 2px;
 }
 
 .node--internal text {
   font-size: 14px;
   font-weight: 500;
-  fill: #374151;
+  fill: var(--text-primary);
 }
 
 /* Current/active node styling */
 .node.active rect {
-  stroke: #14b8a6;
+  stroke: var(--color-primary);
   stroke-width: 2px;
 }
 
 /* Link styling */
 .link {
   fill: none;
-  stroke: #e5e7eb;
+  stroke: var(--border-color);
   stroke-width: 2px;
   transition: stroke 200ms ease;
 }
 
 .link:hover {
-  stroke: #d1d5db;
+  stroke: var(--border-color-dark);
 }
 
 /* Current path highlight */
 .link.current-link {
-  stroke: #14b8a6;
+  stroke: var(--color-primary);
   stroke-opacity: 0.6;
 }
 

src/app/styles/layout/_actionContainer.scss

@@ -1,6 +1,6 @@
 .action-container {
   background: var(--bg-primary);
-  border-right: 1px solid #e5e7eb;
+  border-right: 1px solid var(--border-color);
   transition: width 0.3s ease;
   overflow-x: hidden;
   overflow-y: auto;

src/app/styles/layout/_bodyContainer.scss

@@ -14,6 +14,5 @@
   grid-area: bottom;
   display: flex;
   width: 100%;
-  border-top: 1px solid #e5e7eb;
-  background: white;
+  border-top: 1px solid var(--border-color);
 }

src/app/styles/layout/_buttonsContainer.scss

@@ -1,8 +1,8 @@
 .buttons-container {
   display: flex;
   align-items: center;
-  background: white;
-  border-top: 1px solid #e5e7eb;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-color);
   width: 100%;
 }
 
@@ -80,12 +80,12 @@
 }
 
 .status-dot.active {
-  background-color: #14b8a6;
+  background-color: var(--color-primary);
   animation: pulse 2s infinite;
 }
 
 .status-dot.inactive {
-  background-color: #9ca3af;
+  background-color: var(--text-tertiary);
 }
 
 @keyframes pulse {