color tweaks

Author: milomg

playground/app.tsx

@@ -101,7 +101,7 @@ export const App = (): JSX.Element => {
   });
 
   return (
-    <div class="relative flex bg-solid-medium h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
+    <div class="relative flex bg-white dark:bg-solid-darkbg dark:text-white text-black h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
       <Show
         when={header}
         children={

playground/components/header.tsx

@@ -63,7 +63,7 @@ export const Header: Component<{
 
   return (
     <header
-      class="p-2 flex text-sm justify-between items-center bg-white dark:bg-solid-darkbg dark:text-white text-black border-slate-200 dark:border-neutral-800 border-b-2px"
+      class="p-2 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px"
       classList={{ 'md:col-span-3': !props.isHorizontal }}
     >
       <h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest pl-1">
@@ -83,7 +83,7 @@ export const Header: Component<{
           show
         >
           <div
-            class="md:items-center md:space-x-2 md:flex md:flex-row text-black dark:text-white"
+            class="md:items-center md:space-x-2 md:flex md:flex-row"
             classList={{
               'shadow-md flex flex-col justify-center bg-white dark:bg-gray-700': showMenu(),
               hidden: !showMenu(),

src/components/gridResizer/index.tsx

@@ -60,7 +60,7 @@ export const GridResizer: Component<GridResizerProps> = (props) => {
   });
 
   const baseClasses =
-    'justify-center group items-center border-slate-200 dark:border-solid-darkbg/30 hover:bg-brand-default dark:hover:bg-solid-medium';
+    'justify-center group items-center border-slate-200 dark:border-neutral-800 hover:bg-brand-default dark:hover:bg-brand-default';
   const resizingClasses = () =>
     `${isDragging() ? 'bg-brand-default dark:bg-brand-default' : 'bg-slate-50 dark:bg-solid-darkbg/70'}`;
   const directionClasses = () =>

src/components/repl.tsx

@@ -249,7 +249,7 @@ export const Repl: typeof ReplProps = (props) => {
           (props.ref as (el: HTMLDivElement) => void)(el);
         }
       }}
-      class="grid h-full text-slate-900 dark:text-slate-50 font-sans overflow-hidden"
+      class="grid h-full bg-white dark:bg-solid-darkbg dark:text-white text-black font-sans overflow-hidden"
       classList={{
         'wrapper--forced': props.isHorizontal,
         wrapper: !props.isHorizontal,
@@ -311,7 +311,7 @@ export const Repl: typeof ReplProps = (props) => {
                 <Show when={index() > 0}>
                   <button
                     type="button"
-                    class="border-0 bg-transparent cursor-pointer focus:outline-none -mb-0.5"
+                    class="border-0 cursor-pointer focus:outline-none -mb-0.5"
                     onClick={() => {
                       actions.removeTab(id(tab));
                     }}
@@ -401,7 +401,7 @@ export const Repl: typeof ReplProps = (props) => {
         <Editor
           url={`file:///${props.id}/${props.current}`}
           onDocChange={handleDocChange}
-          class="flex-1 overflow-auto focus:outline-none bg-slate-50 dark:bg-yellow-400"
+          class="flex-1 overflow-auto focus:outline-none"
           styles={{ backgroundColor: '#F8FAFC' }}
           canFormat
           formatter={formatter}
@@ -446,7 +446,7 @@ export const Repl: typeof ReplProps = (props) => {
         }
       >
         <section
-          class="h-full max-h-screen bg-white dark:bg-solid-darkLighterBg grid focus:outline-none row-start-5 relative divide-y-2 divide-slate-200 dark:divide-slate-500"
+          class="h-full max-h-screen grid focus:outline-none row-start-5 relative divide-y-2 divide-slate-200 dark:divide-neutral-800"
           classList={{ 'md:row-start-2': !props.isHorizontal }}
           style="grid-template-rows: minmax(0, 1fr) auto"
         >
@@ -459,7 +459,7 @@ export const Repl: typeof ReplProps = (props) => {
             withMinimap={false}
           />
 
-          <div class="bg-white dark:bg-solid-darkLighterBg p-5">
+          <div class="p-5">
             <label class="font-semibold text-sm uppercase">Compile mode</label>
 
             <div class="mt-1 space-y-1 text-sm">

src/components/tab/list.tsx

@@ -2,10 +2,7 @@ import type { Component, JSX } from 'solid-js';
 
 export const TabList: Component<JSX.HTMLAttributes<HTMLUListElement>> = (props) => {
   return (
-    <ul
-      ref={props.ref}
-      class={`flex tabs flex-wrap items-center list-none bg-white dark:bg-solid-darkbg m-0 ${props.class || ''}`}
-    >
+    <ul ref={props.ref} class={`flex tabs flex-wrap items-center list-none m-0 ${props.class || ''}`}>
       {props.children}
     </ul>
   );