color scheme tuning

src/app/global.css

@@ -7,7 +7,7 @@
     @apply bg-ui-background font-sans text-black;
   }
   .pegboard {
-    background-image: radial-gradient(#8188b0 1px, transparent 0);
+    background-image: radial-gradient(#3f3f46 1px, transparent 0);
     background-size: 36px 36px;
     @apply bg-center;
   }

src/components/features/KonasContainer.tsx

@@ -5,6 +5,6 @@ export const KonaContainer = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const classes = twMerge("pegboard", className);
+  const classes = twMerge("pegboard -z-10", className);
   return <div ref={ref} className={classes} {...props} />;
 });

src/components/features/ToolbarMain.tsx

@@ -1,4 +1,7 @@
 import { useSignals } from "@preact/signals-react/runtime";
+import { faPlusLarge } from "@fortawesome/pro-thin-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { layout } from "~/signals";
 export const ToolbarMain = () => {
   useSignals();
@@ -6,12 +9,16 @@ export const ToolbarMain = () => {
     signals: { isMobile, windowWidth, windowHeight },
   } = layout;
   return (
-    <div className="flex h-full flex-col items-center justify-center">
-      <p>If you need to put buttons somewhere, this could be the spot.</p>
-      <p>
-        Layout is {windowWidth.value} x {windowHeight.value},{" "}
-        <b>{isMobile.value ? "Mobile" : "Not Mobile"}</b>
-      </p>
+    <div className="col-span-10 col-start-2 row-span-1 row-start-12">
+      <div className="flex items-center justify-center gap-2 rounded-lg border border-ui-border bg-ui-panel p-2">
+        <p>
+          Layout is {windowWidth.value} x {windowHeight.value},{" "}
+          <b>{isMobile.value ? "Mobile" : "Not Mobile"}</b>
+        </p>
+        <button className="size-10 rounded-lg p-2 hover:bg-secondary-500 hover:text-white">
+          <FontAwesomeIcon icon={faPlusLarge} />
+        </button>
+      </div>
     </div>
   );
 };

tailwind.config.js

@@ -18,7 +18,7 @@ export default {
 
       // common colors
       white: colors.white,
-      gray: storytellerColors.gunpowder,
+      gray: colors.zinc,
       black: colors.black,
       red: colors.red,
       oragne: colors.orange,
@@ -40,11 +40,9 @@ export default {
       tertiary: storytellerColors.aquamarineBlue,
 
       ui: {
-        background: storytellerColors.gunpowder[100],
-        panel: storytellerColors.gunpowder[100],
-        border: storytellerColors.gunpowder[300],
-        divider: storytellerColors.gunpowder[300],
-        button: storytellerColors.gunpowder[500],
+        background: colors.zinc[100],
+        panel: colors.white,
+        border: colors.zinc[200],
       },
     },
   },