From e288ecb316b95ea297f17e1b4343fc0081a632d6 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 16 Dec 2023 12:17:06 +0100
Subject: [PATCH] theming code buttons

---
 src/Documentation.ts | 10 +++++-----
 src/style.css        | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/Documentation.ts b/src/Documentation.ts
index 02c3373..28ba470 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -46,7 +46,7 @@ import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
 
 export const key_shortcut = (shortcut: string): string => {
-  return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
+  return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
 };
 
 export const makeExampleFactory = (application: Editor): Function => {
@@ -62,9 +62,9 @@ export const makeExampleFactory = (application: Editor): Function => {
     return `
 <details ${open ? "open" : ""}>
   <summary >${description}
-    <button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
-    <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>
+    <button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-brightwhite" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
+    <button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-brightwhite inline-block" onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
+    <button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-brightwhite inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
   </summary>
   <pre><code class="hljs language-javascript">${code.trim()}</code></pre>
 </details>
@@ -167,7 +167,7 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
    * @param app - The editor application.
    * @param bindings - Additional bindings for the showdown converter.
    */
-  let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-white'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
+  let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
   const converter = new showdown.Converter({
     emoji: true,
     moreStyling: true,
diff --git a/src/style.css b/src/style.css
index 4cedb23..6bde57f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1392,6 +1392,11 @@ video {
   border-color: rgb(var(--white) / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--black) / var(--tw-border-opacity));
+}
+
 .bg-background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
@@ -1682,6 +1687,21 @@ video {
   background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
 }
 
+.bg-green {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--green) / var(--tw-bg-opacity));
+}
+
+.bg-yellow {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--yellow) / var(--tw-bg-opacity));
+}
+
+.bg-magenta {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--magenta) / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2202,6 +2222,11 @@ video {
   color: rgb(var(--brightred) / var(--tw-text-opacity));
 }
 
+.text-brightblack {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightblack) / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2278,6 +2303,21 @@ video {
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--green) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightgreen:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightgreen) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightmagenta:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
+}
+
 .hover\:text-background:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--background) / var(--tw-text-opacity));