Theme

assets/css/main.css

+@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

assets/css/tailwind.css

+@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%;
+    --foreground: 240 10% 3.9%;
   
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
   
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 240 10% 3.9%;
   
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
   
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
   
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
   
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --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%;
+    --background:20 14.3% 4.1%;
+    --foreground:0 0% 95%;
   
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --card:24 9.8% 10%;
+    --card-foreground:0 0% 95%;
   
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover:0 0% 9%;
+    --popover-foreground:0 0% 95%;
   
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --primary:346.8 77.2% 49.8%;
+    --primary-foreground:355.7 100% 97.3%;
   
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --secondary:240 3.7% 15.9%;
+    --secondary-foreground:0 0% 98%;
   
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --muted:0 0% 15%;
+    --muted-foreground:240 5% 64.9%;
   
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent:12 6.5% 15.1%;
+    --accent-foreground:0 0% 98%;
   
     --destructive:0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground:0 85.7% 97.3%;
   
-    --ring: 212.7 26.8% 83.9%;
+    --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

components/flashy/FlashyButton.vue

+<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

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

pages/index.vue

+<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