Merge pull request #5 from supabase-community/feat/theme-updates

Feat/theme updates

.changeset/large-games-impress.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': minor
+---
+
+Themes now need to be imported and used as a prop in the `<Auth/>` component

packages/react/common/theming/defaultThemes.ts

@@ -0,0 +1,155 @@
+/**
+ * Create default theme
+ *
+ * createStitches()
+ * https://stitches.dev/docs/api#theme
+ *
+ * to add a new theme use  createTheme({})
+ * https://stitches.dev/docs/api#theme
+ */
+
+import { Theme } from './../../src/types'
+
+// brand: 'hsl(252 62% 55%)',
+// brandAccent: 'hsl(252 62% 45%)',
+
+export const Supa: Theme = {
+  default: {
+    colors: {
+      brand: 'hsl(153 60.0% 53.0%)',
+      brandAccent: 'hsl(154 54.8% 45.1%)',
+      brandButtonText: 'white',
+      defaultButtonBackground: 'white',
+      defaultButtonBackgroundHover: '#eaeaea',
+      defaultButtonBorder: 'lightgray',
+      defaultButtonText: 'gray',
+      dividerBackground: '#eaeaea',
+      inputBackground: 'transparent',
+      inputBorder: 'lightgray',
+      inputBorderHover: 'gray',
+      inputBorderFocus: 'gray',
+      inputText: 'black',
+      inputLabelText: 'gray',
+      inputPlaceholder: 'darkgray',
+      messageText: 'gray',
+      messageTextDanger: 'red',
+      anchorTextColor: 'gray',
+      anchorTextHoverColor: 'darkgray',
+    },
+    space: {
+      spaceSmall: '4px',
+      spaceMedium: '8px',
+      spaceLarge: '16px',
+      labelBottomMargin: '8px',
+      anchorBottomMargin: '4px',
+      emailInputSpacing: '4px',
+      socialAuthSpacing: '4px',
+      buttonPadding: '10px 15px',
+      inputPadding: '10px 15px',
+    },
+    fontSizes: {
+      baseBodySize: '13px',
+      baseInputSize: '14px',
+      baseLabelSize: '14px',
+      baseButtonSize: '14px',
+    },
+    fonts: {
+      bodyFontFamily: `ui-sans-serif, sans-serif`,
+      buttonFontFamily: `ui-sans-serif, sans-serif`,
+      inputFontFamily: `ui-sans-serif, sans-serif`,
+      labelFontFamily: `ui-sans-serif, sans-serif`,
+    },
+    // fontWeights: {},
+    // lineHeights: {},
+    // letterSpacings: {},
+    // sizes: {},
+    borderWidths: {
+      buttonBorderWidth: '1px',
+      inputBorderWidth: '1px',
+    },
+    // borderStyles: {},
+    radii: {
+      borderRadiusButton: '4px',
+      buttonBorderRadius: '4px',
+      inputBorderRadius: '4px',
+    },
+    // shadows: {},
+    // zIndices: {},
+    // transitions: {},
+  },
+  dark: {
+    colors: {
+      brandButtonText: 'white',
+      defaultButtonBackground: '#2e2e2e',
+      defaultButtonBackgroundHover: '#3e3e3e',
+      defaultButtonBorder: '#3e3e3e',
+      defaultButtonText: 'white',
+      dividerBackground: '#2e2e2e',
+      inputBackground: '#1e1e1e',
+      inputBorder: '#3e3e3e',
+      inputBorderHover: 'gray',
+      inputBorderFocus: 'gray',
+      inputText: 'white',
+      inputPlaceholder: 'darkgray',
+    },
+  },
+}
+
+export const Minimal: Theme = {
+  default: {
+    colors: {
+      brand: 'black',
+      brandAccent: '#333333',
+      brandButtonText: 'white',
+      defaultButtonBackground: 'white',
+      defaultButtonBorder: 'lightgray',
+      defaultButtonText: 'gray',
+      dividerBackground: '#eaeaea',
+      inputBackground: 'transparent',
+      inputBorder: 'lightgray',
+      inputText: 'black',
+      inputPlaceholder: 'darkgray',
+    },
+    space: {
+      spaceSmall: '4px',
+      spaceMedium: '8px',
+      spaceLarge: '16px',
+    },
+    fontSizes: {
+      baseInputSize: '14px',
+      baseLabelSize: '12px',
+    },
+    fonts: {
+      bodyFontFamily: '',
+      inputFontFamily: '',
+      buttonFontFamily: '',
+      labelFontFamily: '',
+      // linkFontFamily: '',
+    },
+    // fontWeights: {},
+    // lineHeights: {},
+    // letterSpacings: {},
+    // sizes: {},
+    borderWidths: {},
+    // borderStyles: {},
+    radii: {},
+    // shadows: {},
+    // zIndices: {},
+    // transitions: {},
+  },
+  dark: {
+    colors: {
+      brand: 'white',
+      brandAccent: '#afafaf',
+      brandButtonText: 'black',
+      defaultButtonBackground: '#080808',
+      defaultButtonBorder: 'black',
+      defaultButtonText: 'white',
+      dividerBackground: 'black',
+      inputBackground: 'transparent',
+      inputBorder: 'gray',
+      inputText: 'black',
+      inputPlaceholder: 'darkgray',
+    },
+  },
+}

packages/react/src/components/Auth/Appearance.stories.tsx

@@ -3,6 +3,7 @@ import { createClient } from '@supabase/supabase-js'
 import { useDarkMode } from 'storybook-dark-mode'
 import { Auth } from '.'
 import { Button, Message } from '../UI'
+import { Supa } from './../../../common/theming/defaultThemes'
 
 const supabase = createClient(
   'https://rsnibhkhsbfnncjmwnkj.supabase.co',
@@ -35,14 +36,14 @@ export const Default = (args: any) => {
     <Auth.UserContextProvider supabaseClient={supabase}>
       <Container>
         <Auth
-          dark={useDarkMode() ? true : false}
+          theme={useDarkMode() ? 'dark' : 'default'}
           supabaseClient={supabase}
           providers={['google', 'facebook']}
           appearance={{
-            theme: 'supabase',
+            theme: Supa,
             prependedClassName: 'jonnys-awesome-login',
             variables: {
-              light: {
+              default: {
                 colors: {
                   brand: 'red',
                   brandAccent: 'darkred',

packages/react/src/components/Auth/Auth.tsx

@@ -26,8 +26,6 @@ import { UserContextProvider, useUser } from './UserContext'
 export interface Props {
   supabaseClient: SupabaseClient
   children?: React.ReactNode
-  // className?: string
-  // style?: React.CSSProperties
   socialLayout?: SocialLayout
   providers?: Provider[]
   view?: ViewType
@@ -47,19 +45,19 @@ export interface Props {
     variables?: I18nVariables
   }
   appearance?: Appearance
+  theme?: 'default' | string
 }
 
 function Auth({
   supabaseClient,
-  // style,
   socialLayout = 'vertical',
   providers,
   view = 'sign_in',
   redirectTo,
   onlyThirdPartyProviders = false,
   magicLink = false,
-  appearance = { theme: 'supabase' },
-  dark,
+  appearance,
+  theme = 'default',
   localization = { lang: 'en' },
 }: Props): JSX.Element | null {
   /**
@@ -71,6 +69,21 @@ function Auth({
     localization.variables ?? {}
   )
 
+  // const themes = Object.values(appearance.themeFile ?? {}).map((theme) => {
+  //   // return
+  // })
+
+  const [authView, setAuthView] = useState(view)
+  const [defaultEmail, setDefaultEmail] = useState('')
+  const [defaultPassword, setDefaultPassword] = useState('')
+
+  /**
+   * Simple boolean to detect if authView 'sign_in' or 'sign_up' is used
+   *
+   * @returns boolean
+   */
+  const SignView = authView === 'sign_in' || authView === 'sign_up'
+
   /**
    * Create default theme
    *
@@ -82,32 +95,11 @@ function Auth({
    */
   createStitches({
     theme: merge(
-      themes[appearance.theme ?? 'supabase'],
-      appearance.variables?.light ?? {}
+      appearance?.theme?.default,
+      appearance?.variables?.default ?? {}
     ),
   })
 
-  /**
-   * merge theme variables with for dark theme
-   */
-  const darkTheme = createTheme(
-    merge(
-      themes.darkThemes[appearance.theme ?? 'supabase'],
-      appearance.variables?.dark ?? {}
-    )
-  )
-
-  const [authView, setAuthView] = useState(view)
-  const [defaultEmail, setDefaultEmail] = useState('')
-  const [defaultPassword, setDefaultPassword] = useState('')
-
-  /**
-   * Simple boolean to detect if authView 'sign_in' or 'sign_up' is used
-   *
-   * @returns boolean
-   */
-  const SignView = authView === 'sign_in' || authView === 'sign_up'
-
   /**
    * Wraps around all auth components
    * renders the social auth providers if SignView is true
@@ -118,7 +110,19 @@ function Auth({
    * @returns React.ReactNode
    */
   const Container = ({ children }: { children: React.ReactNode }) => (
-    <div className={dark ? darkTheme : ''}>
+    <div
+      className={
+        theme !== 'default'
+          ? createTheme(
+              merge(
+                // @ts-ignore
+                appearance?.theme[theme],
+                appearance?.variables?.[theme] ?? {}
+              )
+            )
+          : ''
+      }
+    >
       {SignView && (
         <SocialAuth
           appearance={appearance}

packages/react/src/components/Auth/interfaces/MagicLink.tsx

@@ -15,7 +15,7 @@ function MagicLink({
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   i18n: Localization
-  appearance: Appearance
+  appearance?: Appearance
 }) {
   const [email, setEmail] = useState('')
   const [error, setError] = useState('')

packages/react/src/components/Auth/interfaces/UpdatePassword.tsx

@@ -10,7 +10,7 @@ function UpdatePassword({
 }: {
   supabaseClient: SupabaseClient
   i18n: Localization
-  appearance: Appearance
+  appearance?: Appearance
 }) {
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')

packages/react/src/types.ts

@@ -36,15 +36,21 @@ export interface ViewsMap {
   [key: string]: ViewType
 }
 
+export interface Theme {
+  default: ThemeVariables
+  [key: string]: ThemeVariables
+}
+
 export type RedirectTo = undefined | string
 
 export interface Appearance {
-  theme?: 'supabase' | 'minimal' // | 'flat' | 'minimal' | 'bubblegum'
+  // theme?: 'supabase' | 'minimal' // | 'flat' | 'minimal' | 'bubblegum'
+  theme?: Theme
   extendAppearance?: boolean
   prependedClassName?: string
   variables?: {
-    light?: ThemeVariables
-    dark?: ThemeVariables
+    default: ThemeVariables
+    [key: string]: ThemeVariables
   }
   className?: {
     anchor?: string | CssComponent