themed minirepl

+ add strudelTheme
+ add lineBackground with opacity
+ add some missing light flags
+ add fallback css variables for non js context

packages/react/src/components/MiniRepl.jsx

@@ -13,7 +13,15 @@ import { logger } from '@strudel.cycles/core';
 
 const getTime = () => getAudioContext().currentTime;
 
-export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, punchcard, canvasHeight = 200 }) {
+export function MiniRepl({
+  tune,
+  hideOutsideView = false,
+  enableKeyboard,
+  drawTime,
+  punchcard,
+  canvasHeight = 200,
+  theme,
+}) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
   const drawContext = useCallback(
@@ -111,7 +119,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
         {error && <div className={styles.error}>{error.message}</div>}
       </div>
       <div className={styles.body}>
-        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
+        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
       </div>
       {drawTime && (
         <canvas

packages/react/src/components/MiniRepl.module.css

@@ -1,9 +1,9 @@
 .container {
-  @apply rounded-md overflow-hidden bg-[#222222];
+  @apply overflow-hidden;
 }
 
 .header {
-  @apply flex justify-between bg-slate-700 border-t border-slate-500;
+  @apply flex justify-between bg-lineHighlight border-t border-l border-r border-lineHighlight rounded-t-md overflow-hidden;
 }
 
 .buttons {
@@ -11,11 +11,11 @@
 }
 
 .button {
-  @apply cursor-pointer w-16 flex items-center justify-center p-1 bg-slate-700 border-r border-slate-500  text-white hover:bg-slate-600;
+  @apply cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground hover:bg-background;
 }
 
 .buttonDisabled {
-  @apply w-16 flex items-center justify-center p-1 bg-slate-600 text-slate-400 cursor-not-allowed;
+  @apply w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight;
 }
 
 .error {

packages/react/src/components/style.css

@@ -12,7 +12,3 @@
 .cm-theme-light {
   width: 100%;
 }
-
-.cm-line > * {
-  background: var(--background);
-}