feat: add shape variant

xiaoluoboding · xiaoluoboding · commit 8088f5e0136d · 2025-01-12T16:51:32.000+08:00
diff --git a/packages/auth/AnonymousAuth.vue b/packages/auth/AnonymousAuth.vue
@@ -13,6 +13,7 @@
         variant="brand"
         :loading="isLoading"
         :appearance="appearance"
+        :shape="appearance?.shape"
       >
         {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
       </Button>
diff --git a/packages/auth/Auth.vue b/packages/auth/Auth.vue
@@ -147,13 +147,12 @@ const theme = computed(() => {
     appearanceVariables?.[props?.theme] ?? {}
   )
 })
-createStitches({ theme: theme.value })
 watch(
   () => [props.appearance, props.theme],
   () => {
     createStitches({ theme: theme.value })
   },
-  { deep: true }
+  { deep: true, immediate: true }
 )
 
 watch(
@@ -162,11 +161,11 @@ watch(
     const currentColor = colors[props.appearance?.brand ?? 'emerald']['500']
     const hlsColor = colord(currentColor).toHsl()
     document.documentElement.style.setProperty(
-      '--brand',
+      '--auth-ui-brand',
       `${hlsColor.h} ${hlsColor.s}% ${hlsColor.l}%`
     )
   },
-  { deep: true }
+  { deep: true, immediate: true }
 )
 
 watch(
diff --git a/packages/auth/EmailAuth.vue b/packages/auth/EmailAuth.vue
@@ -18,6 +18,7 @@
             type="email"
             name="email"
             v-model="email"
+            :shape="appearance?.shape"
             :placeholder="labels?.email_input_placeholder"
             autoComplete="email"
             :appearance="appearance"
@@ -32,6 +33,7 @@
             type="password"
             name="password"
             v-model="password"
+            :shape="appearance?.shape"
             :placeholder="labels?.password_input_placeholder"
             :autoComplete="
               authView === 'sign_in' ? 'current-password' : 'new-password'
@@ -44,6 +46,7 @@
       <Button
         type="submit"
         variant="brand"
+        :shape="appearance?.shape"
         :loading="isLoading"
         :appearance="appearance"
       >
diff --git a/packages/auth/ForgottenPassword.vue b/packages/auth/ForgottenPassword.vue
@@ -18,6 +18,7 @@
           name="email"
           autoComplete="email"
           autofocus
+          :shape="appearance?.shape"
           :placeholder="labels?.email_input_placeholder"
           :appearance="appearance"
           v-model="email"
@@ -28,6 +29,7 @@
         type="submit"
         variant="brand"
         :loading="isLoading"
+        :shape="appearance?.shape"
         :appearance="appearance"
       >
         {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
diff --git a/packages/auth/MagicLink.vue b/packages/auth/MagicLink.vue
@@ -19,6 +19,7 @@
             name="email"
             autoComplete="email"
             autofocus
+            :shape="appearance?.shape"
             :placeholder="labels?.email_input_placeholder"
             :appearance="appearance"
             v-model="email"
@@ -30,6 +31,7 @@
         type="submit"
         variant="brand"
         :loading="isLoading"
+        :shape="appearance?.shape"
         :appearance="appearance"
       >
         {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
diff --git a/packages/auth/SocialAuth.vue b/packages/auth/SocialAuth.vue
@@ -9,6 +9,7 @@
         <template v-for="provider in providers" :key="provider">
           <Button
             variant="outline"
+            :shape="appearance?.shape"
             :loading="isLoading"
             :appearance="appearance"
             @click.prevent="() => handleProviderSignIn(provider)"
diff --git a/packages/auth/UpdatePassword.vue b/packages/auth/UpdatePassword.vue
@@ -17,6 +17,7 @@
           type="password"
           name="password"
           autofocus
+          :shape="appearance?.shape"
           :placeholder="labels?.password_input_placeholder"
           :appearance="appearance"
           v-model="password"
@@ -28,6 +29,7 @@
         variant="brand"
         :loading="isLoading"
         :appearance="appearance"
+        :shape="appearance?.shape"
       >
         {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
       </Button>
diff --git a/packages/auth/VerifyOtp.vue b/packages/auth/VerifyOtp.vue
@@ -17,6 +17,7 @@
           name="phone"
           type="text"
           autofocus
+          :shape="appearance?.shape"
           :placeholder="labels?.phone_input_placeholder"
           :appearance="appearance"
           v-model="phone"
@@ -32,6 +33,7 @@
           type="email"
           autoComplete="email"
           autofocus
+          :shape="appearance?.shape"
           :placeholder="labels?.email_input_placeholder"
           :appearance="appearance"
           v-model="email"
@@ -46,6 +48,7 @@
           name="token"
           type="text"
           autofocus
+          :shape="appearance?.shape"
           :placeholder="labels?.token_input_placeholder"
           :appearance="appearance"
           v-model="token"
@@ -57,6 +60,7 @@
         variant="brand"
         :loading="isLoading"
         :appearance="appearance"
+        :shape="appearance?.shape"
       >
         {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
       </Button>
diff --git a/packages/types.ts b/packages/types.ts
@@ -19,6 +19,8 @@ import type {
 
 export interface Appearance extends BaseAppearance {
   brand: keyof typeof colors
+  size?: 'default' | 'sm' | 'md' | 'lg'
+  shape: 'square' | 'rounded' | 'pill'
   style?: {
     anchor?: CSSProperties
     button?: CSSProperties
diff --git a/src/App.vue b/src/App.vue
@@ -32,14 +32,15 @@
                   </div>
                   <h1 class="text-foreground text-2xl">Acme Industries</h1>
                 </div>
-                <p class="text-neutral-400 text-auth-widget-test">
+                <p class="text-muted-foreground">
                   Sign in today for Supa stuff
                 </p>
               </div>
               <Auth
                 :appearance="{
                   theme: ThemeSupa,
-                  brand: brandColor
+                  brand: brandColor,
+                  shape: shape
                 }"
                 :supabaseClient="supabaseClient"
                 v-model:view="view"
@@ -171,18 +172,18 @@
                   </div>
                   <div class="flex items-center gap-3">
                     <ToggleButton
-                      v-model:selected="borderRadius"
-                      :defaultValue="radii[0]"
-                      class="rounded-xl border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
+                      v-model:selected="shape"
+                      :defaultValue="shapeList[0]"
+                      class="rounded-none border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
                     />
                     <ToggleButton
-                      v-model:selected="borderRadius"
-                      :defaultValue="radii[1]"
+                      v-model:selected="shape"
+                      :defaultValue="shapeList[1]"
                       class="rounded-xl border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
                     />
                     <ToggleButton
-                      v-model:selected="borderRadius"
-                      :defaultValue="radii[2]"
+                      v-model:selected="shape"
+                      :defaultValue="shapeList[2]"
                       class="rounded-2xl border-b-0 border-l-0 bg-neutral-100 dark:bg-neutral-800"
                     />
                   </div>
@@ -284,13 +285,12 @@ const { locale } = useI18n()
 const { en, zh } = useLanguage()
 
 const classes: { [key: string]: string } = {
-  emerald: 'container-greenshadow',
-  violet: 'container-purpleshadow',
-  fuchsia: 'container-pinkshadow',
-  sky: 'container-blueshadow',
-  amber: 'container-orangeshadow'
+  emerald: 'container-emeraldshadow',
+  violet: 'container-violetshadow',
+  fuchsia: 'container-fuchsiashadow',
+  sky: 'container-skyshadow',
+  amber: 'container-ambershadow'
 }
-const radii = ['5px', '10px', '20px'] as const
 
 const brandList: (keyof typeof colors)[] = [
   'emerald',
@@ -299,6 +299,7 @@ const brandList: (keyof typeof colors)[] = [
   'sky',
   'amber'
 ]
+const shapeList = ['square', 'rounded', 'pill'] as const
 
 const socialAlignments = ['horizontal', 'vertical'] as const
 
@@ -313,7 +314,7 @@ const views: { id: AuthViewType; title: string }[] = [
 ]
 
 const brandColor = ref(brandList[0])
-const borderRadius = ref(radii[0])
+const shape = ref(shapeList[1])
 const socialLayout = ref(socialAlignments[0])
 const view = ref(views[0].id)
 
@@ -351,43 +352,43 @@ watch(
 </script>
 
 <style scoped>
-.container-purpleshadow {
+.container-violetshadow {
   box-shadow: 0px 0px 256px rgb(139, 92, 246, 0.3);
 }
 
-.container-pinkshadow {
+.container-fuchsiashadow {
   box-shadow: 0px 0px 256px rgb(217, 70, 239, 0.3);
 }
 
-.container-greenshadow {
+.container-emeraldshadow {
   box-shadow: 0px 0px 256px rgb(16, 185, 129, 0.3);
 }
 
-.container-blueshadow {
+.container-skyshadow {
   box-shadow: 0px 0px 256px rgb(14, 165, 233, 0.3);
 }
 
-.container-orangeshadow {
+.container-ambershadow {
   box-shadow: 0px 0px 256px rgb(245, 158, 11, 0.3);
 }
 
-.dark .container-purpleshadow {
+.dark .container-violetshadow {
   box-shadow: 0px 0px 256px rgb(139, 92, 246, 0.6);
 }
 
-.dark .container-pinkshadow {
+.dark .container-fuchsiashadow {
   box-shadow: 0px 0px 256px rgb(217, 70, 239, 0.6);
 }
 
-.dark .container-greenshadow {
+.dark .container-emeraldshadow {
   box-shadow: 0px 0px 256px rgb(16, 185, 129, 0.6);
 }
 
-.dark .container-blueshadow {
+.dark .container-skyshadow {
   box-shadow: 0px 0px 256px rgb(14, 165, 233, 0.6);
 }
 
-.dark .container-orangeshadow {
+.dark .container-ambershadow {
   box-shadow: 0px 0px 256px rgb(245, 158, 11, 0.6);
 }
 </style>
diff --git a/src/components/ui/anchor/Anchor.vue b/src/components/ui/anchor/Anchor.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { cn } from '~/lib'
-import { Label, type LabelProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
@@ -3,12 +3,14 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
+import { Appearance } from '@/types'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   class?: HTMLAttributes['class']
   appearance?: Appearance
+  shape?: Appearance['shape']
   loading?: boolean
 }
 
@@ -21,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :class="cn(buttonVariants({ variant, size, shape }), props.class)"
     :style="props.appearance?.style?.button"
     :disabled="loading"
   >
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
@@ -17,19 +17,26 @@ export const buttonVariants = cva(
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        brand: 'bg-brand text-brand-foreground shadow hover:bg-brand/90'
+        brand:
+          'bg-auth-ui-brand text-auth-ui-brand-foreground shadow hover:bg-auth-ui-brand/90'
       },
       size: {
         default: 'h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9'
+      },
+      shape: {
+        square: 'rounded-none',
+        rounded: 'rounded-md',
+        pill: 'rounded-full'
       }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
+      size: 'default',
+      shape: 'rounded'
     }
   }
 )
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
@@ -2,10 +2,12 @@
 import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib'
 import { useVModel } from '@vueuse/core'
+import { Appearance } from '@/types'
 
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
+  shape?: Appearance['shape']
   class?: HTMLAttributes['class']
   appearance?: Appearance
 }>()
@@ -18,6 +20,12 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue
 })
+
+const shapeVariant = {
+  rounded: 'rounded-md',
+  square: 'rounded-none',
+  pill: 'rounded-full'
+}
 </script>
 
 <template>
@@ -26,8 +34,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :style="props.appearance?.style?.input"
     :class="
       cn(
-        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
+        'flex h-9 w-full border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+        shapeVariant[props.shape ?? 'rounded']
       )
     "
   />
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`variant="brand"`
`14`	`14`	`:loading="isLoading"`
`15`	`15`	`:appearance="appearance"`
	`16`	`+ :shape="appearance?.shape"`
`16`	`17`	`>`
`17`	`18`	`{{ isLoading ? labels?.loading_button_label : labels?.button_label }}`
`18`	`19`	`</Button>`