From 0f7f17be24cad583e8c77194f1842500381e5dca Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 30 May 2023 18:54:56 -0700
Subject: [PATCH] refactor: custom css for components w/ tailwind

---
 assets/main.css                   | 11 +++++++++++
 components/Auth.ce.vue            |  8 +-------
 components/CallbackHandler.ce.vue |  8 +-------
 components/KeyActions.ce.vue      |  8 +-------
 components/Launchpad.ce.vue       |  8 +-------
 components/PluginPromo.ce.vue     |  8 +-------
 components/UserProfile.ce.vue     |  8 +-------
 components/WanIpCheck.ce.vue      |  8 +-------
 store/theme.ts                    |  0
 9 files changed, 18 insertions(+), 49 deletions(-)
 create mode 100644 assets/main.css
 create mode 100644 store/theme.ts

diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 000000000..e1bab9b2d
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  --color-alpha: #1c1b1b;
+  --color-beta: #f2f2f2;
+  --color-gamma: #999999;
+  --color-customgradient-start: rgba(242, 242, 242, .0);
+  --color-customgradient-end: rgba(242, 242, 242, .85);
+}
diff --git a/components/Auth.ce.vue b/components/Auth.ce.vue
index fbc70670e..04410d360 100644
--- a/components/Auth.ce.vue
+++ b/components/Auth.ce.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 </script>
 
 <template>
@@ -7,9 +7,3 @@ import 'tailwindcss/tailwind.css';
     Auth.ce
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/CallbackHandler.ce.vue b/components/CallbackHandler.ce.vue
index 45b7dc79e..4efe6f4ac 100644
--- a/components/CallbackHandler.ce.vue
+++ b/components/CallbackHandler.ce.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCallbackStore } from '~/store/callback';
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 import { storeToRefs } from 'pinia';
 
 const callbackStore = useCallbackStore();
@@ -18,9 +18,3 @@ onBeforeMount(() => {
     <pre>{{ JSON.stringify(decryptedData, null, 2) }}</pre>
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/KeyActions.ce.vue b/components/KeyActions.ce.vue
index 36ddfb76b..c5c29a59a 100644
--- a/components/KeyActions.ce.vue
+++ b/components/KeyActions.ce.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 </script>
 
 <template>
@@ -7,9 +7,3 @@ import 'tailwindcss/tailwind.css';
     KeyActions.ce
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/Launchpad.ce.vue b/components/Launchpad.ce.vue
index 8508f2284..187246cab 100644
--- a/components/Launchpad.ce.vue
+++ b/components/Launchpad.ce.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 </script>
 
 <template>
@@ -7,9 +7,3 @@ import 'tailwindcss/tailwind.css';
     Launchpad.ce
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/PluginPromo.ce.vue b/components/PluginPromo.ce.vue
index dd8bc69cb..adf935964 100644
--- a/components/PluginPromo.ce.vue
+++ b/components/PluginPromo.ce.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 </script>
 
 <template>
@@ -7,9 +7,3 @@ import 'tailwindcss/tailwind.css';
     PluginPromo.ce
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/UserProfile.ce.vue b/components/UserProfile.ce.vue
index b11d4cea7..1e487ba48 100644
--- a/components/UserProfile.ce.vue
+++ b/components/UserProfile.ce.vue
@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia';
 import { useCallbackStore } from '~/store/callback';
 import { useServerStore } from '~/store/server';
 import type { Server } from '~/types/server';
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 
 export interface Props {
   server?: Server;
@@ -48,9 +48,3 @@ onBeforeMount(() => {
     </div>
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/components/WanIpCheck.ce.vue b/components/WanIpCheck.ce.vue
index 061c383a2..1857d7fcc 100644
--- a/components/WanIpCheck.ce.vue
+++ b/components/WanIpCheck.ce.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
 </script>
 
 <template>
@@ -7,9 +7,3 @@ import 'tailwindcss/tailwind.css';
     WanIpCheck.ce
   </div>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/store/theme.ts b/store/theme.ts
new file mode 100644
index 000000000..e69de29bb