docs(make-it-yours): add reset button

Author: maiieul

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -509,7 +509,13 @@ export default component$(() => {
           </div>
         </ModalContent>
 
-        <ModalFooter class=" flex w-full justify-end gap-4">
+        <ModalFooter class=" flex w-full justify-between gap-4">
+          <Button
+            look="ghost"
+            onClick$={() => setTheme(theme?.includes('dark') ? 'dark' : 'light')}
+          >
+            Reset
+          </Button>
           <CopyCssConfig />
         </ModalFooter>
         <button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">

packages/kit-styled/src/components/button/button.tsx

@@ -10,11 +10,11 @@ const buttonVariants = cva(
     variants: {
       look: {
         primary:
-          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm transition-all duration-100 active:press active:shadow-base',
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-sm transition-all duration-100 active:press active:shadow-base',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
         alert:
-          'bg-alert text-alert-foreground hover:bg-alert/90 shadow-sm transition-all duration-100 active:press active:shadow-base',
+          'bg-alert text-alert-foreground hover:bg-alert/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
         outline:
           'shadow-sm transition-all duration-100 active:press active:shadow-base bg-background text-foreground border hover:bg-accent',
         ghost: 'text-accent-foreground hover:bg-accent',