feat: change color with the brand props

Author: xiaoluoboding

.gitignore

@@ -10,9 +10,11 @@ lerna-debug.log*
 node_modules
 dist
 lib
+!src/lib
 dist-ssr
 *.local
 
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -76,6 +76,7 @@
     "@radix-icons/vue": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "colord": "^2.9.3",
     "radix-vue": "^1.9.7",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"

packages/auth/Auth.vue

@@ -76,6 +76,8 @@ import { provide, ref, watch, computed } from 'vue'
 import { I18nVariables, en, merge } from '@supabase/auth-ui-shared'
 import { createStitches } from '@stitches/core'
 import cloneDeep from 'lodash.clonedeep'
+import { colord } from 'colord'
+import colors from 'tailwindcss/colors'
 
 import '../ui/index.css'
 
@@ -154,6 +156,19 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.appearance,
+  () => {
+    const currentColor = colors[props.appearance?.brand ?? 'emerald']['500']
+    const hlsColor = colord(currentColor).toHsl()
+    document.documentElement.style.setProperty(
+      '--brand',
+      `${hlsColor.h} ${hlsColor.s}% ${hlsColor.l}%`
+    )
+  },
+  { deep: true }
+)
+
 watch(
   () => props.view,
   (newView) => {

packages/types.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, InjectionKey, Ref } from 'vue'
+import colors from 'tailwindcss/colors'
 import type {
   BaseAppearance,
   I18nVariables,
@@ -17,6 +18,7 @@ import type {
 } from '@supabase/supabase-js'
 
 export interface Appearance extends BaseAppearance {
+  brand: keyof typeof colors
   style?: {
     anchor?: CSSProperties
     button?: CSSProperties