From 0873340ec93bcc9c26d9e8b4ccebc9b05d394380 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Fri, 15 Dec 2023 14:18:12 +0100
Subject: [PATCH] broken as always

---
 index.html         |  9 +++------
 src/style.css      | 40 +++++++++++++++++++++++++++-------------
 tailwind.config.js | 24 +++++++++++++-----------
 3 files changed, 43 insertions(+), 30 deletions(-)
diff --git a/index.html b/index.html
index fbacdd4..afe0868 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,9 @@
     <script src="https://unpkg.com/hydra-synth"></script>
   </head>
   <style>
-
     body {
       font-family: "Arial";
-      background-color: #111827;
+      background-color: "red";
 			overflow: hidden;
 			position: fixed;
 			width: 100vw;
@@ -32,7 +31,6 @@
       transition: background-color 0.05s ease-in-out;
     }
 
-
     .fullscreencanvas {
       position: fixed; /* ignore margins */
       top: 0px;
@@ -67,8 +65,7 @@
     }
 
   </style>
-  <body id="all" class="z-0 bg-neutral-800 overflow-y-hidden">
-    <h1 class="text-gutterBackground bg-red-800">Dada</h1>
+  <body id="all" class="z-0 bg-color13 overflow-y-hidden">
 		<!-- The header is hidden on smaller devices -->
     <header class="py-0 block text-white bg-neutral-900">
       <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
@@ -129,7 +126,7 @@
 
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row bg-transparent">
-        <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
+        <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-lineHighlight text-white">
           <nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
             <details class="" open>
               <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
diff --git a/src/style.css b/src/style.css
index a6f9834..728e1d0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,23 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: "#262626",
-  --lineBackground: "#3B4252",
-  --foreground: "#BBBBBB" ,
-  --caret: "#4C566A",
-  --selection: "#D8DEE9" ,
-  --selectionMatch: "#E5E9F0" ,
-  --gutterBackground: "#8FBCBB",
-  --gutterForeground: "#BF616A",
-  --gutterBorder: "#D08770",
-  --lineHighlight: "#B48EAD",
+@layer base {
+  :root {
+    --color0: "#252525",
+    --color1: "#832e31",
+    --color2: "#a63c40",
+    --color3: "#d3494e",
+    --color4: "#fc595f",
+    --color5: "#df9395",
+    --color6: "#ba8586",
+    --color7: "#f5f5f5",
+    --color8: "#5d6f71",
+    --color9: "#832e31",
+    --color10: "#a63c40",
+    --color11: "#d2494e",
+    --color12: "#fc595f",
+    --color13: "#df9395",
+    --color14: "#ba8586",
+    --color15: "#f5f5f5",
+    --background: "#151515",
+    --selection_foreground: "#151515",
+    --cursor: "#ff443e",
+    --foreground: "#a1b0b8",
+    --selection_background: "#a1b0b8"
+  }
 }
 
-
+/*
 @layer utilities {
   .striped .col-span-3,
   .striped .col-span-2 {
-    @apply bg-background;
+    @apply bg-cursor;
   }
 }
+*/
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 53a2485..62aec62 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,17 +7,19 @@ export default {
     },
   ],
   theme: {
-    colors: {
-      background: "var(--background)",
-      lineBackground: "var(--lineBackground)",
-      foreground: "var(--foreground)",
-      caret: "var(--caret)",
-      selection: "var(--selection)",
-      selectionMatch: "var(--selectionMatch)",
-      gutterBackground: "var(--gutterBackground)",
-      gutterForeground: "var(--gutterForeground)",
-      gutterBorder: "var(--gutterBorder)",
-      lineHighlight : "var(--lineHighlight)",
+    extend: {
+      colors: {
+        background: "var(--color0)",
+        lineBackground: "var(--color1)",
+        foreground: "var(--color2)",
+        caret: "var(--color3)",
+        selection: "var(--color4)",
+        selectionMatch: "var(--color5)",
+        gutterBackground: "var(--color6)",
+        gutterForeground: "var(--color7)",
+        gutterBorder: "var(--color8)",
+        lineHighlight : "var(--color9)",
+      },
     },
     extend: {},
     hljs: {
