From 499c7e176512813ddf2698fad17d814576bb2d1c Mon Sep 17 00:00:00 2001
From: Steve Bauman <steven_bauman@outlook.com>
Date: Sun, 5 May 2024 21:58:44 -0400
Subject: [PATCH] Rework colors

---
 assets/css/app.css                 | 38 +++++++++++++++---------------
 assets/css/content.css             |  2 +-
 assets/loading.html                |  2 +-
 components/Canvas.vue              |  2 +-
 components/FileDropdown.vue        |  2 +-
 components/FormDivider.vue         |  2 +-
 components/Preview.vue             |  8 +++----
 composables/usePreferencesStore.js |  2 +-
 pages/index.vue                    |  6 ++---
 9 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 2598541..61ece69 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -23,15 +23,15 @@
 
 @layer base {
     :root {
-        --color-ui-gray-50: theme('colors.gray.900');
-        --color-ui-gray-100: theme('colors.gray.800');
-        --color-ui-gray-200: theme('colors.gray.700');
-        --color-ui-gray-300: theme('colors.gray.600');
-        --color-ui-gray-400: theme('colors.gray.800');
-        --color-ui-gray-500: theme('colors.gray.400');
-        --color-ui-gray-600: theme('colors.gray.50');
-        --color-ui-gray-700: theme('colors.gray.100');
-        --color-ui-gray-800: theme('colors.gray.200');
+        --color-ui-gray-50: theme('colors.zinc.900');
+        --color-ui-gray-100: theme('colors.zinc.800');
+        --color-ui-gray-200: theme('colors.zinc.700');
+        --color-ui-gray-300: theme('colors.zinc.600');
+        --color-ui-gray-400: theme('colors.zinc.800');
+        --color-ui-gray-500: theme('colors.zinc.400');
+        --color-ui-gray-600: theme('colors.zinc.50');
+        --color-ui-gray-700: theme('colors.zinc.100');
+        --color-ui-gray-800: theme('colors.zinc.200');
         --color-ui-gray-900: theme('colors.white');
 
         --color-ui-violet-500: theme('colors.violet.800');
@@ -40,16 +40,16 @@
     }
 
     [color-scheme="dark"] {
-        --color-ui-gray-50: theme('colors.gray.50');
-        --color-ui-gray-100: theme('colors.gray.100');
-        --color-ui-gray-200: theme('colors.gray.200');
-        --color-ui-gray-300: theme('colors.gray.300');
-        --color-ui-gray-400: theme('colors.gray.400');
-        --color-ui-gray-500: theme('colors.gray.500');
-        --color-ui-gray-600: theme('colors.gray.600');
-        --color-ui-gray-700: theme('colors.gray.700');
-        --color-ui-gray-800: theme('colors.gray.800');
-        --color-ui-gray-900: theme('colors.gray.900');
+        --color-ui-gray-50: theme('colors.zinc.50');
+        --color-ui-gray-100: theme('colors.zinc.100');
+        --color-ui-gray-200: theme('colors.zinc.200');
+        --color-ui-gray-300: theme('colors.zinc.300');
+        --color-ui-gray-400: theme('colors.zinc.400');
+        --color-ui-gray-500: theme('colors.zinc.500');
+        --color-ui-gray-600: theme('colors.zinc.600');
+        --color-ui-gray-700: theme('colors.zinc.900');
+        --color-ui-gray-800: theme('colors.zinc.950');
+        --color-ui-gray-900: theme('colors.black');
 
         --color-ui-violet-500: theme('colors.violet.500');
         --color-ui-violet-600: theme('colors.violet.600');
diff --git a/assets/css/content.css b/assets/css/content.css
index 80ae86c..a2d2b1a 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -51,7 +51,7 @@
     }
 
     hr {
-        @apply my-6;
+        @apply my-6 border-ui-gray-900;
     }
 
     img {
diff --git a/assets/loading.html b/assets/loading.html
index 5a76c3d..c897721 100644
--- a/assets/loading.html
+++ b/assets/loading.html
@@ -36,7 +36,7 @@
     scheme = 'dark';
 }
 
-document.getElementById('loader').style.backgroundColor = scheme === 'dark' ? '#374151' : 'white';
+document.getElementById('loader').style.backgroundColor = scheme === 'dark' ? '#09090B' : 'white';
 </script>
 
 <style>
diff --git a/components/Canvas.vue b/components/Canvas.vue
index f581c2f..5d7dd60 100644
--- a/components/Canvas.vue
+++ b/components/Canvas.vue
@@ -8,7 +8,7 @@
         :resize="resize"
         @resizemove="onResize"
     >
-        <div class="absolute inset-0 z-[2] w-full h-full bg-overlay pointer-events-none"></div>
+        <div class="absolute inset-0 z-[2] w-full h-full pointer-events-none"></div>
 
         <div
             v-bind="backgroundAttributes"
diff --git a/components/FileDropdown.vue b/components/FileDropdown.vue
index 385f1c5..5215c53 100644
--- a/components/FileDropdown.vue
+++ b/components/FileDropdown.vue
@@ -2,7 +2,7 @@
     <TDropdown
         v-bind="$attrs"
         :classes="{
-            button: 'block px-4 py-1.5 text-sm font-semibold active:bg-ui-violet-900 text-white transition duration-100 ease-in-out bg-ui-violet-500 hover:bg-ui-violet-600 focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed',
+            button: 'block px-4 py-1.5 text-sm active:bg-ui-gray-900 text-ui-gray-100 transition duration-100 ease-in-out bg-ui-gray-800 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed',
             wrapper: 'inline-flex flex-col',
             dropdownWrapper: 'relative z-30 bg-ui-gray-700',
             dropdown:
diff --git a/components/FormDivider.vue b/components/FormDivider.vue
index 602bd17..61862d7 100644
--- a/components/FormDivider.vue
+++ b/components/FormDivider.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="overflow-hidden text-xs font-semibold tracking-widest text-center uppercase text-ui-gray-100 bg-ui-gray-600 rounded py-1"
+        class="overflow-hidden text-xs font-semibold tracking-widest text-center uppercase text-ui-gray-100 bg-ui-gray-800 rounded py-1"
     >
         {{ title }}
     </div>
diff --git a/components/Preview.vue b/components/Preview.vue
index 0c30239..d6700af 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relative bg-pattern bg-ui-gray-800">
+    <div class="relative bg-pattern bg-ui-gray-900">
         <Hotkeys :shortcuts="['S']" @triggered="copyToClipboard" />
 
         <ModalCustomBackground
@@ -33,7 +33,7 @@
 
                 <Dropdown
                     size="xs"
-                    variant="primary"
+                    variant="secondary"
                     :items="fileTypes"
                     dusk="button-export"
                     class="inline-flex rounded-lg shadow"
@@ -48,7 +48,7 @@
                     href="/buy"
                     class="shadow"
                     target="_blank"
-                    variant="primary"
+                    variant="secondary"
                 >
                     <ShoppingBagIcon class="w-4 h-4" />
                     <span class="hidden sm:inline"> Desktop App </span>
@@ -59,7 +59,7 @@
                     href="https://api.showcode.app/docs"
                     class="shadow"
                     target="_blank"
-                    variant="primary"
+                    variant="secondary"
                 >
                     <CodeIcon class="w-4 h-4" />
                     <span class="hidden sm:inline"> API </span>
diff --git a/composables/usePreferencesStore.js b/composables/usePreferencesStore.js
index fbe2f2c..fdd16b0 100644
--- a/composables/usePreferencesStore.js
+++ b/composables/usePreferencesStore.js
@@ -12,7 +12,7 @@ export const defaults = {
     editorLanguage: 'php',
     editorOrientation: 'left',
     editorLightTheme: 'vs-light',
-    editorDarkTheme: 'oceanic-next',
+    editorDarkTheme: 'merbivore',
     editorInitialValue: '<?php\n\n',
 
     previewFontSize: 16,
diff --git a/pages/index.vue b/pages/index.vue
index 28c2b22..7c3c6c0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -93,8 +93,8 @@
                     class="p-0.5 mx-2 rounded-lg text-ui-violet-500 focus:outline-none focus:ring-0"
                 >
                     <template #default="{ mode }">
-                        <MoonIcon v-if="mode === 'dark'" />
-                        <SunIcon v-else />
+                        <MoonIcon v-if="mode === 'dark'" class="size-4" />
+                        <SunIcon v-else class="size-4" />
                     </template>
                 </ToggleDarkMode>
             </div>
@@ -368,7 +368,7 @@ body,
 
 .bg-pattern {
     background-position: 0.5% 0;
-    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.25' fill-rule='evenodd'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 .bg-overlay {