add muted theme color + use it for inputs and tags

website/src/repl/Repl.css

@@ -1,15 +1,3 @@
-:root {
-  --background: #222;
-  --lineBackground: #22222299;
-  --foreground: #fff;
-  --caret: #ffcc00;
-  --selection: rgba(128, 203, 196, 0.5);
-  --selectionMatch: #036dd626;
-  --lineHighlight: #00000050;
-  --gutterBackground: transparent;
-  --gutterForeground: #8a919966;
-}
-
 .darken::before {
   content: ' ';
   position: fixed;

website/src/repl/components/panel/Forms.jsx

@@ -2,18 +2,18 @@ import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
-    <div className="flex max-w-lg">
+    <div className="flex max-w-lg space-x-0">
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b h-8 whitespace-nowrap',
+            'px-2 border-b-2 h-8 whitespace-nowrap bg-background',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
-            value === key ? 'border-foreground' : 'border-background',
+            value === key ? 'border-foreground' : 'border-transparent',
           )}
         >
           {label.toLowerCase()}

website/src/repl/components/panel/Reference.jsx

@@ -128,14 +128,14 @@ export const Reference = memo(function Reference() {
         {selectedTag && (
           <div className="w-72">
             <span
-              className="text-foreground border-2 border-gray-500 px-1 py-0.5 my-2 rounded-md cursor-pointer font-sans"
+              className="text-foreground border border-muted px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
               {selectedTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50 rounded-md">
+        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
@@ -174,8 +174,8 @@ export const Reference = memo(function Reference() {
                 <span key={t}>
                   <a
                     className={[
-                      'select-none text-white border-2 border-gray-500 px-1 py-0.5 my-2 cursor-pointer text-sm/8 rounded-md no-underline font-sans',
-                      `${selectedTag === t ? 'bg-gray-500 text-black' : ''}`,
+                      'select-none text-white border border-muted px-1 py-0.5 my-2 cursor-pointer text-sm/8 no-underline font-sans',
+                      `${selectedTag === t ? 'bg-muted text-foreground' : ''}`,
                     ].join(' ')}
                     onClick={() => toggleTag(t)}
                   >
@@ -191,7 +191,7 @@ export const Reference = memo(function Reference() {
                   {entry.name}
                 </h3>
                 {entry.tags && (
-                  <span className="ml-2 text-xs text-gray-400 border-2 border-gray-500 rounded-md px-1 py-0.5">
+                  <span className="ml-2 text-xs text-foreground border border-muted px-1 py-0.5">
                     {entry.tags.join(', ')}
                   </span>
                 )}

website/src/repl/components/panel/SettingsTab.jsx

@@ -15,7 +15,7 @@ function cx(...classes) {
 }
 
 const inputClass =
-  'bg-background text-sm border rounded-0 text-foreground border-foreground placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
+  'bg-background text-sm border rounded-0 text-foreground border-muted placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
 
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
@@ -28,7 +28,7 @@ function Checkbox({ label, value, onChange, disabled = false }) {
     <label>
       <input
         className={cx(
-          'bg-background text-sm border  border-foreground focus:outline-none focus:ring-0 focus:border-foreground',
+          'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
         )}
         disabled={disabled}
         type="checkbox"

website/tailwind.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
         background: 'var(--background)',
         lineBackground: 'var(--lineBackground)',
         foreground: 'var(--foreground)',
+        muted: 'var(--muted)',
         caret: 'var(--caret)',
         selection: 'var(--selection)',
         selectionMatch: 'var(--selectionMatch)',
@@ -46,28 +47,28 @@ module.exports = {
               'code::after': {
                 content: 'none',
               },
-              color: 'var(--foreground)',
+              color: 'var(--foreground) !important',
               a: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h1: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h2: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h3: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h4: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               pre: {
-                color: 'var(--foreground)',
-                background: 'var(--background)',
+                color: 'var(--foreground) !important',
+                background: 'var(--background) !important',
               },
               code: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
             },
           },