get rid of all hard coded colors

website/src/repl/Footer.jsx

@@ -57,8 +57,8 @@ export function Footer({ context }) {
       <div
         onClick={() => setActiveFooter(name)}
         className={cx(
-          'h-8 px-2 text-foreground cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
+          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-foreground hover:border-tertiary' : 'border-transparent',
+          activeFooter === name ? 'border-foreground' : 'border-transparent',
         )}
       >
         {label || name}
@@ -179,10 +179,7 @@ function ConsoleTab({ log }) {
       {log.map((l, i) => {
         const message = linkify(l.message);
         return (
-          <div
+          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
-            key={l.id}
-            className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'text-highlight')}
-          >
             <span dangerouslySetInnerHTML={{ __html: message }} />
             {l.count ? ` (${l.count})` : ''}
           </div>
@@ -197,7 +194,7 @@ function SamplesTab() {
     <div className="break-normal w-full px-4 dark:text-white text-stone-900">
       <span>{loadedSamples.length} banks loaded:</span>
       {loadedSamples.map(([name, samples]) => (
-        <span key={name} className="cursor-pointer hover:text-tertiary" onClick={() => {}}>
+        <span key={name} className="cursor-pointer hover:opacity-50" onClick={() => {}}>
           {' '}
           {name}(
           {Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1}){' '}

website/src/repl/Header.jsx

@@ -69,7 +69,7 @@ export function Header({ context }) {
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
-            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
+            className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:opacity-50', !started && 'animate-pulse')}
           >
             {!pending ? (
               <span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
@@ -86,7 +86,7 @@ export function Header({ context }) {
             className={cx(
               'flex items-center space-x-1',
               !isEmbedded ? 'p-2' : 'px-2',
-              !isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
+              !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
             )}
           >
             {/*             <CommandLineIcon className="w-6 h-6" /> */}
@@ -96,7 +96,7 @@ export function Header({ context }) {
           {!isEmbedded && (
             <button
               title="shuffle"
-              className="hover:text-tertiary p-2 flex items-center space-x-1"
+              className="hover:opacity-50 p-2 flex items-center space-x-1"
               onClick={handleShuffle}
             >
               <SparklesIcon className="w-6 h-6" />
@@ -107,7 +107,7 @@ export function Header({ context }) {
             <button
               title="share"
               className={cx(
-                'cursor-pointer hover:text-tertiary flex items-center space-x-1',
+                'cursor-pointer hover:opacity-50 flex items-center space-x-1',
                 !isEmbedded ? 'p-2' : 'px-2',
               )}
               onClick={handleShare}
@@ -120,21 +120,21 @@ export function Header({ context }) {
             <a
               title="learn"
               href="./learn/getting-started"
-              className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+              className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
             >
               <AcademicCapIcon className="w-6 h-6" />
               <span>learn</span>
             </a>
           )}
           {/* {isEmbedded && (
-            <button className={cx('hover:text-tertiary px-2')}>
+            <button className={cx('hover:opacity-50 px-2')}>
               <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
                 🚀
               </a>
             </button>
           )}
           {isEmbedded && (
-            <button className={cx('hover:text-tertiary px-2')}>
+            <button className={cx('hover:opacity-50 px-2')}>
               <a
                 onClick={() => {
                   window.location.href = initialUrl;

website/tailwind.config.cjs

@@ -11,8 +11,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        tertiary: '#82aaff',
-        highlight: '#bb8800',
         // codemirror-theme settings
         background: 'var(--background)',
         lineBackground: 'var(--lineBackground)',