sync

2023-12-16 11:48:40 +01:00
parent 932c8cb6ca
commit 255b35240e
7 changed files with 843 additions and 129 deletions
--- a/index.html
+++ b/index.html
@ -364,17 +364,17 @@
              <div class="flex flex-col space-y-2 pb-2">
                <button id="download-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                  <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Download universes</span>
+                  <span class="text-selection_foreground">Download universes</span>
                </button>
                <button id="upload-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                  <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Upload universes</span>
+                  <span class="text-selection_foreground">Upload universes</span>
                </button>
-                <button id="destroy-universes" class="bg-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
+                <button id="destroy-universes" class="bg-blue font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                  </svg>
-                  <span class="text-brightred">Destroy universes</span>
+                  <span class="text-selection_foreground">Destroy universes</span>
                </button>
              </div>
            </div>
@ -559,7 +559,7 @@

      <template id="ui-known-universe-item-template">
        <!-- A known universe button in "opening" interface -->
-        <li class="hover:fill-black hover:white py-2 hover:text-black flex justify-between px-4">
+        <li class="py-2 px-4 flex justify-between text-cyan">
          <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
          <button class="delete-universe" title="Delete this universe">🗑</button>
        </li>
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "autoprefixer": "^10.4.14",
    "codemirror": "^6.0.1",
    "fflate": "^0.8.0",
+    "highlight.js": "^11.9.0",
    "jisg": "^0.9.7",
    "lru-cache": "^10.0.1",
    "marked": "^7.0.3",
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@ -36,12 +36,11 @@ import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm"
 import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
 import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
 import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
-
 import { synths } from "./documentation/learning/audio_engine/synths";
-
 // Setting up the Markdown converter with syntax highlighting
 import showdown from "showdown";
 import showdownHighlight from "showdown-highlight";
+import "highlight.js/styles/atom-one-dark-reasonable.min.css";
 import { createDocumentationStyle } from "./DomElements";
 import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
@ -67,9 +66,7 @@ export const makeExampleFactory = (application: Editor): Function => {
    <button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
    <button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
  </summary>
-  \`\`\`javascript
-  ${code}
-  \`\`\`
+  <pre><code class="hljs language-javascript">${code.trim()}</code></pre>
 </details>
 `;
  };
@ -175,7 +172,10 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
    emoji: true,
    moreStyling: true,
    backslashEscapesHTMLTags: true,
-    extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
+    extensions: [showdownHighlight({
+      pre: true, 
+      auto_detection: false
+    }), ...bindings],
  });
  console.log(app.currentDocumentationPane);

--- a/src/InterfaceLogic.ts
+++ b/src/InterfaceLogic.ts
@ -326,7 +326,7 @@ export const installInterfaceLogic = (app: Editor) => {

    // @ts-ignore
    let selected_theme = colors[app.settings.theme as string];
-    let theme_preview = "<div class='pl-4'>";
+    let theme_preview = "<div class='ml-6'>";
    for (const [key, _] of Object.entries(selected_theme)) {
      theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
    }
--- a/src/style.css
+++ b/src/style.css
@ -558,21 +558,6 @@ video {
  --tw-backdrop-sepia:  ;
 }

-.hljs-comment: #FEFEFE;
-
-.css .hljs-built_in {
-  color: #88C0D0;
-}
-
-.css .hljs-keyword {
-  color: #D08770;
-}
-
-.vim .hljs-built_in {
-  color: #88C0D0;
-  font-style: italic;
-}
-
 .sr-only {
  position: absolute;
  width: 1px;
@ -781,10 +766,6 @@ video {
  margin-left: 1.5rem;
 }

-.ml-8 {
-  margin-left: 2rem;
-}
-
 .mr-2 {
  margin-right: 0.5rem;
 }
@ -1141,46 +1122,541 @@ video {
  border-style: none;
 }

+.border-background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--background) / var(--tw-border-opacity));
+}
+
+.border-background\/0 {
+  border-color: rgb(var(--background) / 0);
+}
+
+.border-background\/10 {
+  border-color: rgb(var(--background) / 0.1);
+}
+
+.border-background\/100 {
+  border-color: rgb(var(--background) / 1);
+}
+
+.border-background\/20 {
+  border-color: rgb(var(--background) / 0.2);
+}
+
+.border-background\/25 {
+  border-color: rgb(var(--background) / 0.25);
+}
+
+.border-background\/30 {
+  border-color: rgb(var(--background) / 0.3);
+}
+
+.border-background\/40 {
+  border-color: rgb(var(--background) / 0.4);
+}
+
+.border-background\/5 {
+  border-color: rgb(var(--background) / 0.05);
+}
+
+.border-background\/50 {
+  border-color: rgb(var(--background) / 0.5);
+}
+
+.border-background\/60 {
+  border-color: rgb(var(--background) / 0.6);
+}
+
+.border-background\/70 {
+  border-color: rgb(var(--background) / 0.7);
+}
+
+.border-background\/75 {
+  border-color: rgb(var(--background) / 0.75);
+}
+
+.border-background\/80 {
+  border-color: rgb(var(--background) / 0.8);
+}
+
+.border-background\/90 {
+  border-color: rgb(var(--background) / 0.9);
+}
+
+.border-background\/95 {
+  border-color: rgb(var(--background) / 0.95);
+}
+
+.border-cursor {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--cursor) / var(--tw-border-opacity));
+}
+
+.border-cursor\/0 {
+  border-color: rgb(var(--cursor) / 0);
+}
+
+.border-cursor\/10 {
+  border-color: rgb(var(--cursor) / 0.1);
+}
+
+.border-cursor\/100 {
+  border-color: rgb(var(--cursor) / 1);
+}
+
+.border-cursor\/20 {
+  border-color: rgb(var(--cursor) / 0.2);
+}
+
+.border-cursor\/25 {
+  border-color: rgb(var(--cursor) / 0.25);
+}
+
+.border-cursor\/30 {
+  border-color: rgb(var(--cursor) / 0.3);
+}
+
+.border-cursor\/40 {
+  border-color: rgb(var(--cursor) / 0.4);
+}
+
+.border-cursor\/5 {
+  border-color: rgb(var(--cursor) / 0.05);
+}
+
+.border-cursor\/50 {
+  border-color: rgb(var(--cursor) / 0.5);
+}
+
+.border-cursor\/60 {
+  border-color: rgb(var(--cursor) / 0.6);
+}
+
+.border-cursor\/70 {
+  border-color: rgb(var(--cursor) / 0.7);
+}
+
+.border-cursor\/75 {
+  border-color: rgb(var(--cursor) / 0.75);
+}
+
+.border-cursor\/80 {
+  border-color: rgb(var(--cursor) / 0.8);
+}
+
+.border-cursor\/90 {
+  border-color: rgb(var(--cursor) / 0.9);
+}
+
+.border-cursor\/95 {
+  border-color: rgb(var(--cursor) / 0.95);
+}
+
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--foreground) / var(--tw-border-opacity));
+}
+
+.border-foreground\/0 {
+  border-color: rgb(var(--foreground) / 0);
+}
+
+.border-foreground\/10 {
+  border-color: rgb(var(--foreground) / 0.1);
+}
+
+.border-foreground\/100 {
+  border-color: rgb(var(--foreground) / 1);
+}
+
+.border-foreground\/20 {
+  border-color: rgb(var(--foreground) / 0.2);
+}
+
+.border-foreground\/25 {
+  border-color: rgb(var(--foreground) / 0.25);
+}
+
+.border-foreground\/30 {
+  border-color: rgb(var(--foreground) / 0.3);
+}
+
+.border-foreground\/40 {
+  border-color: rgb(var(--foreground) / 0.4);
+}
+
+.border-foreground\/5 {
+  border-color: rgb(var(--foreground) / 0.05);
+}
+
+.border-foreground\/50 {
+  border-color: rgb(var(--foreground) / 0.5);
+}
+
+.border-foreground\/60 {
+  border-color: rgb(var(--foreground) / 0.6);
+}
+
+.border-foreground\/70 {
+  border-color: rgb(var(--foreground) / 0.7);
+}
+
+.border-foreground\/75 {
+  border-color: rgb(var(--foreground) / 0.75);
+}
+
+.border-foreground\/80 {
+  border-color: rgb(var(--foreground) / 0.8);
+}
+
+.border-foreground\/90 {
+  border-color: rgb(var(--foreground) / 0.9);
+}
+
+.border-foreground\/95 {
+  border-color: rgb(var(--foreground) / 0.95);
+}
+
+.border-selection_background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--selection_background) / var(--tw-border-opacity));
+}
+
+.border-selection_background\/0 {
+  border-color: rgb(var(--selection_background) / 0);
+}
+
+.border-selection_background\/10 {
+  border-color: rgb(var(--selection_background) / 0.1);
+}
+
+.border-selection_background\/100 {
+  border-color: rgb(var(--selection_background) / 1);
+}
+
+.border-selection_background\/20 {
+  border-color: rgb(var(--selection_background) / 0.2);
+}
+
+.border-selection_background\/25 {
+  border-color: rgb(var(--selection_background) / 0.25);
+}
+
+.border-selection_background\/30 {
+  border-color: rgb(var(--selection_background) / 0.3);
+}
+
+.border-selection_background\/40 {
+  border-color: rgb(var(--selection_background) / 0.4);
+}
+
+.border-selection_background\/5 {
+  border-color: rgb(var(--selection_background) / 0.05);
+}
+
+.border-selection_background\/50 {
+  border-color: rgb(var(--selection_background) / 0.5);
+}
+
+.border-selection_background\/60 {
+  border-color: rgb(var(--selection_background) / 0.6);
+}
+
+.border-selection_background\/70 {
+  border-color: rgb(var(--selection_background) / 0.7);
+}
+
+.border-selection_background\/75 {
+  border-color: rgb(var(--selection_background) / 0.75);
+}
+
+.border-selection_background\/80 {
+  border-color: rgb(var(--selection_background) / 0.8);
+}
+
+.border-selection_background\/90 {
+  border-color: rgb(var(--selection_background) / 0.9);
+}
+
+.border-selection_background\/95 {
+  border-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-background {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }

+.bg-background\/0 {
+  background-color: rgb(var(--background) / 0);
+}
+
+.bg-background\/10 {
+  background-color: rgb(var(--background) / 0.1);
+}
+
+.bg-background\/100 {
+  background-color: rgb(var(--background) / 1);
+}
+
+.bg-background\/20 {
+  background-color: rgb(var(--background) / 0.2);
+}
+
+.bg-background\/25 {
+  background-color: rgb(var(--background) / 0.25);
+}
+
+.bg-background\/30 {
+  background-color: rgb(var(--background) / 0.3);
+}
+
+.bg-background\/40 {
+  background-color: rgb(var(--background) / 0.4);
+}
+
+.bg-background\/5 {
+  background-color: rgb(var(--background) / 0.05);
+}
+
+.bg-background\/50 {
+  background-color: rgb(var(--background) / 0.5);
+}
+
+.bg-background\/60 {
+  background-color: rgb(var(--background) / 0.6);
+}
+
+.bg-background\/70 {
+  background-color: rgb(var(--background) / 0.7);
+}
+
+.bg-background\/75 {
+  background-color: rgb(var(--background) / 0.75);
+}
+
+.bg-background\/80 {
+  background-color: rgb(var(--background) / 0.8);
+}
+
+.bg-background\/90 {
+  background-color: rgb(var(--background) / 0.9);
+}
+
+.bg-background\/95 {
+  background-color: rgb(var(--background) / 0.95);
+}
+
 .bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--black) / var(--tw-bg-opacity));
 }

+.bg-blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
+}
+
+.bg-cursor {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--cursor) / var(--tw-bg-opacity));
+}
+
+.bg-cursor\/0 {
+  background-color: rgb(var(--cursor) / 0);
+}
+
+.bg-cursor\/10 {
+  background-color: rgb(var(--cursor) / 0.1);
+}
+
+.bg-cursor\/100 {
+  background-color: rgb(var(--cursor) / 1);
+}
+
+.bg-cursor\/20 {
+  background-color: rgb(var(--cursor) / 0.2);
+}
+
+.bg-cursor\/25 {
+  background-color: rgb(var(--cursor) / 0.25);
+}
+
+.bg-cursor\/30 {
+  background-color: rgb(var(--cursor) / 0.3);
+}
+
+.bg-cursor\/40 {
+  background-color: rgb(var(--cursor) / 0.4);
+}
+
+.bg-cursor\/5 {
+  background-color: rgb(var(--cursor) / 0.05);
+}
+
+.bg-cursor\/50 {
+  background-color: rgb(var(--cursor) / 0.5);
+}
+
+.bg-cursor\/60 {
+  background-color: rgb(var(--cursor) / 0.6);
+}
+
+.bg-cursor\/70 {
+  background-color: rgb(var(--cursor) / 0.7);
+}
+
+.bg-cursor\/75 {
+  background-color: rgb(var(--cursor) / 0.75);
+}
+
+.bg-cursor\/80 {
+  background-color: rgb(var(--cursor) / 0.8);
+}
+
+.bg-cursor\/90 {
+  background-color: rgb(var(--cursor) / 0.9);
+}
+
+.bg-cursor\/95 {
+  background-color: rgb(var(--cursor) / 0.95);
+}
+
 .bg-foreground {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }

+.bg-foreground\/0 {
+  background-color: rgb(var(--foreground) / 0);
+}
+
+.bg-foreground\/10 {
+  background-color: rgb(var(--foreground) / 0.1);
+}
+
+.bg-foreground\/100 {
+  background-color: rgb(var(--foreground) / 1);
+}
+
+.bg-foreground\/20 {
+  background-color: rgb(var(--foreground) / 0.2);
+}
+
+.bg-foreground\/25 {
+  background-color: rgb(var(--foreground) / 0.25);
+}
+
+.bg-foreground\/30 {
+  background-color: rgb(var(--foreground) / 0.3);
+}
+
+.bg-foreground\/40 {
+  background-color: rgb(var(--foreground) / 0.4);
+}
+
+.bg-foreground\/5 {
+  background-color: rgb(var(--foreground) / 0.05);
+}
+
+.bg-foreground\/50 {
+  background-color: rgb(var(--foreground) / 0.5);
+}
+
+.bg-foreground\/60 {
+  background-color: rgb(var(--foreground) / 0.6);
+}
+
+.bg-foreground\/70 {
+  background-color: rgb(var(--foreground) / 0.7);
+}
+
+.bg-foreground\/75 {
+  background-color: rgb(var(--foreground) / 0.75);
+}
+
+.bg-foreground\/80 {
+  background-color: rgb(var(--foreground) / 0.8);
+}
+
+.bg-foreground\/90 {
+  background-color: rgb(var(--foreground) / 0.9);
+}
+
+.bg-foreground\/95 {
+  background-color: rgb(var(--foreground) / 0.95);
+}
+
 .bg-selection_background {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
 }

+.bg-selection_background\/0 {
+  background-color: rgb(var(--selection_background) / 0);
+}
+
+.bg-selection_background\/10 {
+  background-color: rgb(var(--selection_background) / 0.1);
+}
+
+.bg-selection_background\/100 {
+  background-color: rgb(var(--selection_background) / 1);
+}
+
+.bg-selection_background\/20 {
+  background-color: rgb(var(--selection_background) / 0.2);
+}
+
+.bg-selection_background\/25 {
+  background-color: rgb(var(--selection_background) / 0.25);
+}
+
+.bg-selection_background\/30 {
+  background-color: rgb(var(--selection_background) / 0.3);
+}
+
+.bg-selection_background\/40 {
+  background-color: rgb(var(--selection_background) / 0.4);
+}
+
+.bg-selection_background\/5 {
+  background-color: rgb(var(--selection_background) / 0.05);
+}
+
+.bg-selection_background\/50 {
+  background-color: rgb(var(--selection_background) / 0.5);
+}
+
+.bg-selection_background\/60 {
+  background-color: rgb(var(--selection_background) / 0.6);
+}
+
+.bg-selection_background\/70 {
+  background-color: rgb(var(--selection_background) / 0.7);
+}
+
+.bg-selection_background\/75 {
+  background-color: rgb(var(--selection_background) / 0.75);
+}
+
+.bg-selection_background\/80 {
+  background-color: rgb(var(--selection_background) / 0.8);
+}
+
+.bg-selection_background\/90 {
+  background-color: rgb(var(--selection_background) / 0.9);
+}
+
+.bg-selection_background\/95 {
+  background-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-selection_foreground {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
 }

-.bg-blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
-}
-
-.bg-red {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--red) / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--white) / var(--tw-bg-opacity));
-}
-
 .p-1 {
  padding: 0.25rem;
 }
@ -1222,6 +1698,11 @@ video {
  padding-right: 1.5rem;
 }

+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
@ -1247,11 +1728,6 @@ video {
  padding-bottom: 1rem;
 }

-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
 .pb-1 {
  padding-bottom: 0.25rem;
 }
@ -1401,6 +1877,71 @@ video {
  line-height: 1.5;
 }

+.text-background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--background) / var(--tw-text-opacity));
+}
+
+.text-background\/0 {
+  color: rgb(var(--background) / 0);
+}
+
+.text-background\/10 {
+  color: rgb(var(--background) / 0.1);
+}
+
+.text-background\/100 {
+  color: rgb(var(--background) / 1);
+}
+
+.text-background\/20 {
+  color: rgb(var(--background) / 0.2);
+}
+
+.text-background\/25 {
+  color: rgb(var(--background) / 0.25);
+}
+
+.text-background\/30 {
+  color: rgb(var(--background) / 0.3);
+}
+
+.text-background\/40 {
+  color: rgb(var(--background) / 0.4);
+}
+
+.text-background\/5 {
+  color: rgb(var(--background) / 0.05);
+}
+
+.text-background\/50 {
+  color: rgb(var(--background) / 0.5);
+}
+
+.text-background\/60 {
+  color: rgb(var(--background) / 0.6);
+}
+
+.text-background\/70 {
+  color: rgb(var(--background) / 0.7);
+}
+
+.text-background\/75 {
+  color: rgb(var(--background) / 0.75);
+}
+
+.text-background\/80 {
+  color: rgb(var(--background) / 0.8);
+}
+
+.text-background\/90 {
+  color: rgb(var(--background) / 0.9);
+}
+
+.text-background\/95 {
+  color: rgb(var(--background) / 0.95);
+}
+
 .text-black {
  --tw-text-opacity: 1;
  color: rgb(var(--black) / var(--tw-text-opacity));
@ -1411,16 +1952,216 @@ video {
  color: rgb(var(--blue) / var(--tw-text-opacity));
 }

+.text-brightwhite {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
+.text-cursor {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cursor) / var(--tw-text-opacity));
+}
+
+.text-cursor\/0 {
+  color: rgb(var(--cursor) / 0);
+}
+
+.text-cursor\/10 {
+  color: rgb(var(--cursor) / 0.1);
+}
+
+.text-cursor\/100 {
+  color: rgb(var(--cursor) / 1);
+}
+
+.text-cursor\/20 {
+  color: rgb(var(--cursor) / 0.2);
+}
+
+.text-cursor\/25 {
+  color: rgb(var(--cursor) / 0.25);
+}
+
+.text-cursor\/30 {
+  color: rgb(var(--cursor) / 0.3);
+}
+
+.text-cursor\/40 {
+  color: rgb(var(--cursor) / 0.4);
+}
+
+.text-cursor\/5 {
+  color: rgb(var(--cursor) / 0.05);
+}
+
+.text-cursor\/50 {
+  color: rgb(var(--cursor) / 0.5);
+}
+
+.text-cursor\/60 {
+  color: rgb(var(--cursor) / 0.6);
+}
+
+.text-cursor\/70 {
+  color: rgb(var(--cursor) / 0.7);
+}
+
+.text-cursor\/75 {
+  color: rgb(var(--cursor) / 0.75);
+}
+
+.text-cursor\/80 {
+  color: rgb(var(--cursor) / 0.8);
+}
+
+.text-cursor\/90 {
+  color: rgb(var(--cursor) / 0.9);
+}
+
+.text-cursor\/95 {
+  color: rgb(var(--cursor) / 0.95);
+}
+
+.text-cyan {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cyan) / var(--tw-text-opacity));
+}
+
 .text-foreground {
  --tw-text-opacity: 1;
  color: rgb(var(--foreground) / var(--tw-text-opacity));
 }

+.text-foreground\/0 {
+  color: rgb(var(--foreground) / 0);
+}
+
+.text-foreground\/10 {
+  color: rgb(var(--foreground) / 0.1);
+}
+
+.text-foreground\/100 {
+  color: rgb(var(--foreground) / 1);
+}
+
+.text-foreground\/20 {
+  color: rgb(var(--foreground) / 0.2);
+}
+
+.text-foreground\/25 {
+  color: rgb(var(--foreground) / 0.25);
+}
+
+.text-foreground\/30 {
+  color: rgb(var(--foreground) / 0.3);
+}
+
+.text-foreground\/40 {
+  color: rgb(var(--foreground) / 0.4);
+}
+
+.text-foreground\/5 {
+  color: rgb(var(--foreground) / 0.05);
+}
+
+.text-foreground\/50 {
+  color: rgb(var(--foreground) / 0.5);
+}
+
+.text-foreground\/60 {
+  color: rgb(var(--foreground) / 0.6);
+}
+
+.text-foreground\/70 {
+  color: rgb(var(--foreground) / 0.7);
+}
+
+.text-foreground\/75 {
+  color: rgb(var(--foreground) / 0.75);
+}
+
+.text-foreground\/80 {
+  color: rgb(var(--foreground) / 0.8);
+}
+
+.text-foreground\/90 {
+  color: rgb(var(--foreground) / 0.9);
+}
+
+.text-foreground\/95 {
+  color: rgb(var(--foreground) / 0.95);
+}
+
 .text-red {
  --tw-text-opacity: 1;
  color: rgb(var(--red) / var(--tw-text-opacity));
 }

+.text-selection_background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--selection_background) / var(--tw-text-opacity));
+}
+
+.text-selection_background\/0 {
+  color: rgb(var(--selection_background) / 0);
+}
+
+.text-selection_background\/10 {
+  color: rgb(var(--selection_background) / 0.1);
+}
+
+.text-selection_background\/100 {
+  color: rgb(var(--selection_background) / 1);
+}
+
+.text-selection_background\/20 {
+  color: rgb(var(--selection_background) / 0.2);
+}
+
+.text-selection_background\/25 {
+  color: rgb(var(--selection_background) / 0.25);
+}
+
+.text-selection_background\/30 {
+  color: rgb(var(--selection_background) / 0.3);
+}
+
+.text-selection_background\/40 {
+  color: rgb(var(--selection_background) / 0.4);
+}
+
+.text-selection_background\/5 {
+  color: rgb(var(--selection_background) / 0.05);
+}
+
+.text-selection_background\/50 {
+  color: rgb(var(--selection_background) / 0.5);
+}
+
+.text-selection_background\/60 {
+  color: rgb(var(--selection_background) / 0.6);
+}
+
+.text-selection_background\/70 {
+  color: rgb(var(--selection_background) / 0.7);
+}
+
+.text-selection_background\/75 {
+  color: rgb(var(--selection_background) / 0.75);
+}
+
+.text-selection_background\/80 {
+  color: rgb(var(--selection_background) / 0.8);
+}
+
+.text-selection_background\/90 {
+  color: rgb(var(--selection_background) / 0.9);
+}
+
+.text-selection_background\/95 {
+  color: rgb(var(--selection_background) / 0.95);
+}
+
 .text-selection_foreground {
  --tw-text-opacity: 1;
  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
@ -1431,21 +2172,6 @@ video {
  color: rgb(var(--white) / var(--tw-text-opacity));
 }

-.text-selection_background {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_background) / var(--tw-text-opacity));
-}
-
-.text-brightred {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightred) / var(--tw-text-opacity));
-}
-
-.text-brightwhite {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
-}
-
 .underline {
  text-decoration-line: underline;
 }
@ -1458,6 +2184,16 @@ video {
  text-underline-offset: 4px;
 }

+.placeholder-blue::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-blue::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
  opacity: 0.5;
 }
@ -1492,38 +2228,24 @@ video {
  background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }

+.hover\:bg-brightblack:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
 .hover\:bg-foreground:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }

-.hover\:fill-black:hover {
-  fill: rgb(var(--black) / 1);
-}
-
-.hover\:text-xl:hover {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.hover\:text-black:hover {
+.hover\:text-background:hover {
  --tw-text-opacity: 1;
-  color: rgb(var(--black) / var(--tw-text-opacity));
+  color: rgb(var(--background) / var(--tw-text-opacity));
 }

-.hover\:text-foreground:hover {
+.hover\:text-brightwhite:hover {
  --tw-text-opacity: 1;
-  color: rgb(var(--foreground) / var(--tw-text-opacity));
-}
-
-.hover\:text-selection_foreground:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
-}
-
-.hover\:text-red:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--red) / var(--tw-text-opacity));
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
 }

 .focus\:outline-none:focus {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,47 +1,33 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  safelist: [
-    {
-      pattern: /hljs+/,
-    },
-  ],
  theme: {
      colors: {
-        black: "rgb(var(--black) / <alpha-value>)",
-        red: "rgb(var(--red) / <alpha-value>)",
-        green: "rgb(var(--green) / <alpha-value>)",
-        yellow: "rgb(var(--yellow) / <alpha-value>)",
-        blue: "rgb(var(--blue) / <alpha-value>)",
-        magenta: "rgb(var(--magenta) / <alpha-value>)",
-        cyan: "rgb(var(--cyan) / <alpha-value>)",
-        white: "rgb(var(--white) / <alpha-value>)",
-        brightblack: "rgb(var(--brightblack) / <alpha-value>)",
-        brightred: "rgb(var(--brightred) / <alpha-value>)",
-        brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
-        brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
-        brightblue: "rgb(var(--brightblue) / <alpha-value>)",
-        brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
-        brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
-        brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
-        background: "rgb(var(--background) / <alpha-value>)",
-        selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
-        cursor: "rgb(var(--cursor) / <alpha-value>)",
-        foreground: "rgb(var(--foreground) / <alpha-value>)",
-        selection_background: "rgb(var(--selection_background) / <alpha-value>)",
-    },
-    extend: {},
-    hljs: {
-      theme: "nord",
-      custom: {
-        general: {
-          comment: "#FEFEFE",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwind-highlightjs")],
-  safelist: {
+          black: "rgb(var(--black) / <alpha-value>)",
+          red: "rgb(var(--red) / <alpha-value>)",
+          green: "rgb(var(--green) / <alpha-value>)",
+          yellow: "rgb(var(--yellow) / <alpha-value>)",
+          blue: "rgb(var(--blue) / <alpha-value>)",
+          magenta: "rgb(var(--magenta) / <alpha-value>)",
+          cyan: "rgb(var(--cyan) / <alpha-value>)",
+          white: "rgb(var(--white) / <alpha-value>)",
+          brightblack: "rgb(var(--brightblack) / <alpha-value>)",
+          brightred: "rgb(var(--brightred) / <alpha-value>)",
+          brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
+          brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
+          brightblue: "rgb(var(--brightblue) / <alpha-value>)",
+          brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
+          brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
+          brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
+          background: "rgb(var(--background) / <alpha-value>)",
+          selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
+          cursor: "rgb(var(--cursor) / <alpha-value>)",
+          foreground: "rgb(var(--foreground) / <alpha-value>)",
+          selection_background: "rgb(var(--selection_background) / <alpha-value>)",
+      }
+   },
+  extend: {},
+  safelist: [{
    pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
-  }
+  }],
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
  integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==

+highlight.js@^11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 html-encoder-decoder@^1.3.9:
  version "1.3.9"
  resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"