feat: ✨ Add McDonald's mode

app.vue

@@ -21,6 +21,8 @@ import "iconify-icon";
 import ConfirmationModal from "./components/modals/confirm.vue";
 import { Toaster } from "./components/ui/sonner";
 import { SettingIds } from "./settings";
+// Sin
+//import "~/styles/mcdonalds.css";
 
 const code = useRequestURL().searchParams.get("code");
 const appData = useAppData();

components/ui/button/Button.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
+    data-component="button"
   >
     <slot />
   </Primitive>

components/ui/card/Card.vue

@@ -21,6 +21,7 @@ const props = withDefaults(
         props.class,
       )
     "
+    data-component="card"
   >
     <slot />
   </Primitive>

components/ui/sidebar/Sidebar.vue

@@ -31,6 +31,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     v-if="collapsible === 'none'"
     :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
     v-bind="$attrs"
+    data-component="sidebar"
   >
     <slot />
   </div>
@@ -57,6 +58,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
     :data-side="side"
+    data-component="sidebar"
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div

styles/mcdonalds.css

@@ -0,0 +1,50 @@
+@tailwind base;
+
+@layer base {
+    :root,
+    .dark {
+        --background: 44, 100%, 59%;
+        --foreground: 4, 77%, 48%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 4, 77%, 48%;
+
+        --popover: 44, 100%, 59%;
+        --popover-foreground: 4, 77%, 48%;
+
+        --card: 4, 77%, 48%;
+        --card-foreground: 44, 100%, 59%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+
+        --primary: 44, 100%, 59%;
+        --primary-foreground: 44, 100%, 59%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --accent: 4, 77%, 48%;
+        --accent-foreground: 44, 100%, 59%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+
+        --sidebar-background: 4, 77%, 48%;
+        --sidebar-foreground: 44, 100%, 59%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 44, 100%, 59%;
+        --sidebar-ring: 4, 77%, 48%;
+    }
+
+    .prose * {
+        color: hsl(var(--card-foreground)) !important;
+    }
+}