From a2b76539da1c1f529007a799a83a6ecb7681134f Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Thu, 5 Mar 2026 19:26:23 -0700
Subject: [PATCH] Replace hardcoded slate-* classes with theme-aware sb-*
 utilities

WaveformViewer, SchematicViewer, and SimulationLog now use CSS
variable-backed utility classes (bg-sb-surface, text-sb-muted,
border-sb-border, etc.) instead of hardcoded Tailwind slate colors.
Light mode embed theme now works through the variable system rather
than brute-force class overrides in embed-theme.css.
---
 .../notebook/output/SchematicViewer.tsx       | 16 ++++-----
 .../notebook/output/SimulationLog.tsx         |  6 ++--
 .../notebook/output/WaveformViewer.tsx        | 10 +++---
 frontend/src/styles/embed-theme.css           | 34 ++-----------------
 4 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/notebook/output/SchematicViewer.tsx b/frontend/src/components/notebook/output/SchematicViewer.tsx
index 3b60ece..0ce3711 100644
--- a/frontend/src/components/notebook/output/SchematicViewer.tsx
+++ b/frontend/src/components/notebook/output/SchematicViewer.tsx
@@ -192,20 +192,20 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
   );
 
   return (
-    <div className={cn('relative', isFullscreen && 'fixed inset-0 z-50 bg-slate-950 flex flex-col')}>
+    <div className={cn('relative', isFullscreen && 'fixed inset-0 z-50 bg-sb-bg flex flex-col')}>
       {/* Toolbar */}
-      <div className="flex items-center gap-1 px-3 py-1.5 border-b border-slate-700/50 bg-slate-800/50">
+      <div className="flex items-center gap-1 px-3 py-1.5 border-b border-sb-border/50 bg-sb-cell/50">
         <button
           onClick={zoomOut}
           disabled={zoomIndex === 0}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           title="Zoom out"
         >
           <ZoomOut className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={fitToWidth}
-          className="text-xs text-slate-500 hover:text-slate-300 tabular-nums w-10 text-center transition-colors"
+          className="text-xs text-sb-muted hover:text-sb-text tabular-nums w-10 text-center transition-colors"
           title="Reset to 100%"
         >
           {Math.round(zoom * 100)}%
@@ -213,14 +213,14 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
         <button
           onClick={zoomIn}
           disabled={zoomIndex === ZOOM_STEPS.length - 1}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           title="Zoom in"
         >
           <ZoomIn className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={toggleFullscreen}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
           title={isFullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}
         >
           {isFullscreen ? (
@@ -231,13 +231,13 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
         </button>
         <div className="flex-1" />
         {componentMap && Object.keys(componentMap).length > 0 && (
-          <span className="text-[10px] text-slate-600 mr-2">
+          <span className="text-[10px] text-sb-muted mr-2">
             click values to edit
           </span>
         )}
         <button
           onClick={downloadSvg}
-          className="flex items-center gap-1 px-2 py-1 rounded text-xs text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+          className="flex items-center gap-1 px-2 py-1 rounded text-xs text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
           title="Download SVG"
         >
           <Download className="w-3.5 h-3.5" />
diff --git a/frontend/src/components/notebook/output/SimulationLog.tsx b/frontend/src/components/notebook/output/SimulationLog.tsx
index 1e3d1ab..a0f7282 100644
--- a/frontend/src/components/notebook/output/SimulationLog.tsx
+++ b/frontend/src/components/notebook/output/SimulationLog.tsx
@@ -16,7 +16,7 @@ function highlightLine(line: string): { text: string; className: string } {
   if (lower.includes('warning') || lower.includes('warn')) {
     return { text: line, className: 'text-amber-400' };
   }
-  return { text: line, className: 'text-slate-400' };
+  return { text: line, className: 'text-sb-muted' };
 }
 
 export function SimulationLog({
@@ -33,9 +33,9 @@ export function SimulationLog({
   const lines = log.split('\n').filter((l) => l.trim().length > 0);
 
   return (
-    <div className="border-t border-slate-700/50">
+    <div className="border-t border-sb-border/50">
       <button
-        className="flex items-center gap-2 w-full px-3 py-2 text-xs text-slate-500 hover:text-slate-400 transition-colors"
+        className="flex items-center gap-2 w-full px-3 py-2 text-xs text-sb-muted hover:text-sb-text transition-colors"
         onClick={() => setOpen(!open)}
       >
         {open ? (
diff --git a/frontend/src/components/notebook/output/WaveformViewer.tsx b/frontend/src/components/notebook/output/WaveformViewer.tsx
index 07d4588..ae96e44 100644
--- a/frontend/src/components/notebook/output/WaveformViewer.tsx
+++ b/frontend/src/components/notebook/output/WaveformViewer.tsx
@@ -290,7 +290,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
       className={cn(
         'relative',
         className,
-        isFullscreen && 'fixed inset-0 z-50 bg-slate-900 flex flex-col',
+        isFullscreen && 'fixed inset-0 z-50 bg-sb-surface flex flex-col',
       )}
     >
       {/* Control buttons */}
@@ -299,14 +299,14 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
           className={cn(
             'flex items-center gap-1 z-10',
             isFullscreen
-              ? 'px-4 py-2 justify-end border-b border-slate-700/50'
+              ? 'px-4 py-2 justify-end border-b border-sb-border/50'
               : 'absolute top-1 right-1',
           )}
         >
           <button
             type="button"
             onClick={toggleFullscreen}
-            className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+            className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
             title={isFullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}
           >
             {isFullscreen ? (
@@ -318,7 +318,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
           <button
             type="button"
             onClick={toggleScope}
-            className="p-1 rounded hover:bg-slate-700/50 transition-colors"
+            className="p-1 rounded hover:bg-sb-border/50 transition-colors"
             aria-label={scopeMode ? 'Exit oscilloscope view' : 'Switch to oscilloscope view'}
             title={scopeMode ? 'Standard view' : 'Oscilloscope view'}
           >
@@ -330,7 +330,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
       {/* Plot area */}
       <div className={cn(isFullscreen && 'flex-1 min-h-0 px-4 pb-4')}>
         {isEmpty ? (
-          <div className="text-slate-500 text-sm py-4 text-center">
+          <div className="text-sb-muted text-sm py-4 text-center">
             No waveform data to display.
           </div>
         ) : scopeMode ? (
diff --git a/frontend/src/styles/embed-theme.css b/frontend/src/styles/embed-theme.css
index 313244b..6c91fbf 100644
--- a/frontend/src/styles/embed-theme.css
+++ b/frontend/src/styles/embed-theme.css
@@ -116,34 +116,6 @@ html.light ::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
 
-/* Shared component overrides for light embed mode.
-   Targets hardcoded Tailwind slate utilities in SchematicViewer
-   and SimulationLog without modifying the shared components. */
-
-html.light .border-slate-700\/50 {
-  border-color: #e2e8f0;
-}
-
-html.light .bg-slate-800\/50 {
-  background-color: rgba(241, 245, 249, 0.8);
-}
-
-html.light .text-slate-400 {
-  color: #64748b;
-}
-
-html.light .text-slate-500 {
-  color: #64748b;
-}
-
-html.light .text-slate-600 {
-  color: #475569;
-}
-
-html.light .hover\:text-slate-200:hover {
-  color: #1e293b;
-}
-
-html.light .hover\:bg-slate-700\/50:hover {
-  background-color: rgba(226, 232, 240, 0.5);
-}
+/* Previous workaround overrides for hardcoded slate utilities removed —
+   WaveformViewer, SchematicViewer, and SimulationLog now use
+   theme-aware sb-* utility classes directly. */