From 9403726d1e37e198d1f6d9ea3bcdebc4abf88691 Mon Sep 17 00:00:00 2001
From: Nexerate <erl1ls@outlook.com>
Date: Mon, 5 Feb 2024 18:11:14 +0100
Subject: [PATCH] Theme

---
 assets/css/main.css                |  14 ++++
 assets/css/tailwind.css            | 116 +++++++++++++++--------------
 components/flashy/FlashyButton.vue |  29 ++++++++
 nuxt.config.ts                     |   1 +
 pages/index.vue                    |  26 +++++--
 5 files changed, 124 insertions(+), 62 deletions(-)
 create mode 100644 assets/css/main.css
 create mode 100644 components/flashy/FlashyButton.vue

diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..08d8259
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+body {
+    /* --background: #2f3542;
+    --white: #ffffff;
+    --border: #57606f;
+    --primary-background: #ff4757;
+    --primary-foreground: #f8f8f8;
+    --secondary: #ff6b81; */
+
+    /* background-color: var(--background); */
+
+    font-family: 'Poppins';
+}
\ No newline at end of file
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 10b7e9c..00bf8f3 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,70 +1,70 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
+    --foreground: 240 10% 3.9%;
+  
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
+    --card-foreground: 240 10% 3.9%;
+  
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+  
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+  
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+  
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+  
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+  
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 222.2 84% 4.9%;
- 
+    --destructive-foreground: 0 0% 98%;
+  
+    --border:240 5.9% 90%;
+    --input:240 5.9% 90%;
+    --ring:346.8 77.2% 49.8%;
     --radius: 0.5rem;
   }
- 
+   
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 212.7 26.8% 83.9%;
+    --background:20 14.3% 4.1%;
+    --foreground:0 0% 95%;
+  
+    --card:24 9.8% 10%;
+    --card-foreground:0 0% 95%;
+  
+    --popover:0 0% 9%;
+    --popover-foreground:0 0% 95%;
+  
+    --primary:346.8 77.2% 49.8%;
+    --primary-foreground:355.7 100% 97.3%;
+  
+    --secondary:240 3.7% 15.9%;
+    --secondary-foreground:0 0% 98%;
+  
+    --muted:0 0% 15%;
+    --muted-foreground:240 5% 64.9%;
+  
+    --accent:12 6.5% 15.1%;
+    --accent-foreground:0 0% 98%;
+  
+    --destructive:0 62.8% 30.6%;
+    --destructive-foreground:0 85.7% 97.3%;
+  
+    --border:240 3.7% 15.9%;
+    --input:240 3.7% 15.9%;
+    --ring:346.8 77.2% 49.8%;
   }
 }
  
@@ -73,6 +73,8 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply dark bg-background text-foreground;
+
+    font-family: 'Poppins';
   }
 }
\ No newline at end of file
diff --git a/components/flashy/FlashyButton.vue b/components/flashy/FlashyButton.vue
new file mode 100644
index 0000000..c63c8d4
--- /dev/null
+++ b/components/flashy/FlashyButton.vue
@@ -0,0 +1,29 @@
+<template>
+    <Button> Flashy Knapp
+    </Button>
+</template>
+<!-- 
+<style lang="scss">
+@import '../../assets/css/main.css';
+
+.button {
+    background-color: var(--primary-background);
+    color: var(--primary-foreground);
+
+    font-size: 15px;
+    line-height: 1;
+
+    padding: 5px 15px;
+
+    border-radius: 5px;
+
+    border: 2px solid transparent;
+
+    transition-duration: 0.2s;
+}
+
+.button:hover {
+    border: 2px solid var(--secondary);
+}
+
+</style> -->
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6dcb2ff..db18ca5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
+  css: ['~/assets/css/main.css', '~/assets/css/tailwind.css'],
   shadcn: {
     /**
      * Prefix for all the imported component
diff --git a/pages/index.vue b/pages/index.vue
index a130155..88df8b6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,17 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const clickCount = ref(0);
+
+function onClick() {
+    clickCount.value++;
+}
+</script>
+
 <template>
     <div>
-        <p>Velkommen til Flashy!</p>
+        <!-- <p>Velkommen til Flashy!</p> -->
+        <FlashyButton @click="onClick">
+            <!-- <p>Denne knappen har blitt klikket {{ clickCount }} ganger</p> -->
+        </FlashyButton>
     </div>
 </template>
 
 <style lang="scss">
-p {
+button {
     position: absolute;
     left: 50%;
-    top: 50%;
-
-    font-weight: bold;
+    top: 60%;
 
     transform: translate(-50%, -50%);
+
+    // border: 2px solid gray;
+    // border-radius: 5px;
+    // padding: 5px 15px;
+
 }
 </style>
\ No newline at end of file
-- 
GitLab