finished adding dark mode to everything except bar graph and react drop downs

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -98,7 +98,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       return changedState;
     }
 
-    if (index === 0) return 'Initial State';
+    if (index === 0) return '<span class="initial-state">Initial State</span>';
 
     // Add null checks for snapshots
     if (!snapshots || !snapshots[index] || !snapshots[index - 1]) {
@@ -111,7 +111,7 @@ function History(props: Record<string, unknown>): JSX.Element {
         statelessCleaning(snapshots[index]),
       );
 
-      if (!delta) return 'No state changes';
+      if (!delta) return '<span class="no-changes">No State Changes</span>';
 
       const changedState = findStateChangeObj(delta);
       return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';

src/app/styles/components/_actionComponent.scss

@@ -117,7 +117,7 @@
 }
 
 .current-snap {
-  font-weight: 800;
+  font-weight: 700;
   border: none;
   background: transparent;
   font-size: 1rem;

src/app/styles/components/_ax.scss

@@ -20,16 +20,16 @@
   padding: 6px 12px;
   font-size: 14px;
   font-weight: 500;
-  color: white;
-  background-color: #14b8a6;
+  color: var(--button-primary-text);
+  background-color: var(--color-primary);
   border-radius: 6px;
   cursor: pointer;
   transition: all 200ms ease;
   user-select: none;
 }
 
 .accessibility-controls label:hover {
-  background-color: #0d9488;
+  background-color: var(--color-primary-dark);
 }
 
 .accessibility-disable input[type='radio'] {
@@ -44,18 +44,18 @@
   padding: 6px 12px;
   font-size: 14px;
   font-weight: 500;
-  background-color: #f9fafb;
-  border: 1px solid #e5e7eb;
-  color: #374151;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
   border-radius: 6px;
   cursor: pointer;
   transition: all 200ms ease;
   user-select: none;
 }
 
 .accessibility-disable label:hover {
-  border-color: #d1d5db;
-  background-color: #f3f4f6;
+  border-color: var(--border-color-dark);
+  background-color: var(--bg-tertiary);
 }
 
 .accessibility-text {
@@ -66,7 +66,7 @@
 
 .accessibility-text p {
   margin: 0;
-  color: #374151;
+  color: var(--text-primary);
   font-size: 16px;
 }
 
@@ -75,6 +75,6 @@
   margin: 0;
   padding: 0;
   padding: 8px 12px;
-  border-bottom: 1px solid #e5e7eb;
-  transition: background-color 150ms ease;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-primary);
 }

src/app/styles/components/_buttons.scss

@@ -124,24 +124,24 @@
   width: 64px;
   height: 32px;
   border-radius: 16px;
-  border: 2px solid #e5e7eb;
-  background-color: #f3f4f6;
+  border: 2px solid var(--border-color);
+  background-color: var(--bg-tertiary);
   cursor: pointer;
   transition: all 300ms ease;
   padding: 2px;
 }
 
 .theme-toggle.dark {
-  background-color: #1f2937;
-  border-color: #374151;
+  background-color: var(--bg-primary);
+  border-color: var(--border-color-dark);
 }
 
 .theme-toggle-slider {
   position: relative;
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: white;
+  background-color: var(--bg-primary);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -151,7 +151,7 @@
 
 .theme-toggle.dark .theme-toggle-slider {
   transform: translateX(32px);
-  background-color: #14b8a6;
+  background-color: var(--color-primary);
 }
 
 .theme-toggle-icons {
@@ -170,14 +170,14 @@
 .theme-toggle-icon {
   width: 16px;
   height: 16px;
-  color: #6b7280;
+  color: var(--text-secondary);
   transition: color 300ms ease;
 }
 
 .theme-toggle.dark .theme-toggle-icon.moon {
-  color: #14b8a6;
+  color: var(--color-primary);
 }
 
 .theme-toggle.dark .theme-toggle-icon.sun {
-  color: #6b7280;
+  color: var(--text-secondary);
 }

src/app/styles/components/_rc-slider.scss

@@ -3,16 +3,8 @@
   width: 100%;
   margin: 12px;
   border-radius: 6px;
-  -ms-touch-action: none;
-  touch-action: none;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.rc-slider * {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
 .rc-slider-rail {
   position: absolute;
   width: 100%;
@@ -28,6 +20,7 @@
   border-radius: 6px;
   background-color: #284b63;
 }
+
 .rc-slider-handle {
   position: absolute;
   margin-left: -8px;
@@ -43,189 +36,19 @@
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease;
-  -ms-touch-action: pan-x;
-  touch-action: pan-x;
-}
-.rc-slider-handle:focus {
-  outline: none;
 }
 
-.rc-slider-handle:hover {
-  transform: scale(1.1);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-}
-.rc-slider-handle:active {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-  transform: scale(1.1);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-}
-.rc-slider-mark {
-  position: absolute;
-  top: 18px;
-  left: 0;
-  width: 100%;
-  font-size: 16px;
-}
-.rc-slider-mark-text {
-  position: absolute;
-  display: inline-block;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  color: #999;
-}
-.rc-slider-mark-text-active {
-  color: #666;
-}
-.rc-slider-step {
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  background: transparent;
-}
-
-.rc-slider-disabled .rc-slider-track {
-  background-color: #ccc;
-}
-.rc-slider-disabled .rc-slider-handle,
-.rc-slider-disabled .rc-slider-dot {
-  border-color: #ccc;
-  box-shadow: none;
-  background-color: #fff;
-  cursor: not-allowed;
-}
-.rc-slider-disabled .rc-slider-mark-text,
-.rc-slider-disabled .rc-slider-dot {
-  cursor: not-allowed !important;
-}
 .rc-slider-vertical {
-  width: 14px;
   height: 100%;
   padding: 0 5px;
 }
+
 .rc-slider-vertical .rc-slider-rail {
   height: 100%;
   width: 4px;
 }
+
 .rc-slider-vertical .rc-slider-track {
   left: 5px;
-  bottom: 0;
-  width: 4px;
-}
-.rc-slider-vertical .rc-slider-handle {
-  -ms-touch-action: pan-y;
-  touch-action: pan-y;
-}
-.rc-slider-vertical .rc-slider-mark {
-  top: 0;
-  left: 18px;
-  height: 100%;
-}
-.rc-slider-vertical .rc-slider-step {
-  height: 100%;
   width: 4px;
 }
-
-.rc-slider-vertical .rc-slider-dot:first-child {
-  margin-bottom: -4px;
-}
-.rc-slider-vertical .rc-slider-dot:last-child {
-  margin-bottom: -4px;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  display: block !important;
-  animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-leave {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  display: block !important;
-  animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
-.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
-  animation-name: rcSliderTooltipZoomDownIn;
-  animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
-  animation-name: rcSliderTooltipZoomDownOut;
-  animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
-  transform: scale(0, 0);
-  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.rc-slider-tooltip-zoom-down-leave {
-  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-@keyframes rcSliderTooltipZoomDownIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-}
-@keyframes rcSliderTooltipZoomDownOut {
-  0% {
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-}
-.rc-slider-tooltip {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-  visibility: visible;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip * {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip-hidden {
-  display: none;
-}
-.rc-slider-tooltip-placement-top {
-  padding: 4px 0 8px 0;
-}
-.rc-slider-tooltip-inner {
-  padding: 6px 2px;
-  min-width: 24px;
-  height: 24px;
-  font-size: 16px;
-  line-height: 1;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #6c6c6c;
-  border-radius: 6px;
-}
-.rc-slider-tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-  bottom: 4px;
-  left: 50%;
-  margin-left: -4px;
-  border-width: 4px 4px 0;
-  border-top-color: #6c6c6c;
-}