diff --git a/examples/react/package.json b/examples/react/package.json index 7c4618a1..a788fbd3 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -4,8 +4,10 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", - "build:example": "tsc && vite build", + "dev": "concurrently \"npm run dev:css\" \"vite\"", + "dev:css": "tailwindcss -w -i ./src/tailwind.css -o src/app.css", + "build:example": "npm run build:css && tsc && vite build", + "build:css": "tailwindcss -m -i ./src/tailwind.css -o src/app.css", "preview": "vite preview" }, "dependencies": { @@ -18,11 +20,13 @@ "devDependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", - "@mui/icons-material": "^5.11.9", - "@mui/material": "^5.11.9", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@vitejs/plugin-react": "^3.1.0", + "autoprefixer": "^10.4.13", + "concurrently": "^7.6.0", + "postcss": "^8.4.21", + "tailwindcss": "^3.2.7", "typescript": "^4.9.3", "vite": "^4.1.0" } diff --git a/examples/react/src/App.module.css b/examples/react/src/App.module.css index 658fb76f..5fadf45e 100644 --- a/examples/react/src/App.module.css +++ b/examples/react/src/App.module.css @@ -1,111 +1,23 @@ -.App { - text-align: center; -} - -.logo { - animation: logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - .container-redshadow { min-width: 300px; box-shadow: -2px 1px 69px 5px rgb(202, 37, 37); - -webkit-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37); - -moz-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37); - padding: 2rem; border-radius: 1rem; } .container-greenshadow { min-width: 300px; box-shadow: -2px 1px 69px 5px rgb(65, 163, 35); - -webkit-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35); - -moz-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35); - padding: 2rem; border-radius: 1rem; } .container-blueshadow { min-width: 300px; box-shadow: -2px 1px 69px 5px rgb(8, 107, 177); - -webkit-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177); - -moz-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177); - padding: 2rem; border-radius: 1rem; } .container-orangeshadow { min-width: 300px; box-shadow: -2px 1px 69px 5px rgb(235, 115, 29); - -webkit-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29); - -moz-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29); - padding: 2rem; border-radius: 1rem; } - -.auth-container { - width: 50%; - display: flex; - align-items: center; - justify-content: center; -} - -.selectors-container { - width: 50%; - padding: 2rem; -} - -.solidrow { - display: flex; - align-items: center; -} - -.toggles-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; -} - -.header { - min-height: 100vh; - max-width: 1200px; - margin-inline: auto; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - font-size: calc(10px + 2vmin); - color: white; -} - -.link { - color: #b318f0; -} - -@media (max-width: 600px) { - .header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - font-size: calc(10px + 2vmin); - color: white; - } - - .container { - min-width: 250px; - } - - .selectors-container { - width: fit-content; - max-width: 80vw; - margin-inline: auto; - } - - .auth-container { - width: fit-content; - } -} diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index badd9c14..d3b85b9a 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,10 +1,10 @@ import styles from './App.module.css' import { createClient } from '@supabase/supabase-js' -import { SocialLayout, ThemeSupa } from '@supabase/auth-ui-shared' +import { SocialLayout, ThemeSupa, ViewType } from '@supabase/auth-ui-shared' import { Auth } from '@supabase/auth-ui-react' -import Selectors from './Selectors' -import { AppState } from './store' -import { useState } from 'react' +import { useEffect, useState } from 'react' +import ToggleButton from './ToggleButton' +import MenuIcon from './MenuIcon' const supabase = createClient( 'https://fmlovqieocwjaghmavax.supabase.co', @@ -18,52 +18,215 @@ const classes: { [key: string]: string } = { 'rgb(235, 115, 29)': styles['container-orangeshadow'], } -function App() { - const buttonColor = useState('rgb(202, 37, 37)') - const borderRadius = useState('5px') - const theme = useState('dark') - const socialLayout = useState('horizontal') +const colors = [ + 'rgb(202, 37, 37)', + 'rgb(65, 163, 35)', + 'rgb(8, 107, 177)', + 'rgb(235, 115, 29)', +] as const + +const socialAlignments = ['horizontal', 'vertical'] as const - const [customButtonColor] = buttonColor - const [customBorderRadius] = borderRadius - const [customTheme] = theme - const [customSocialLayout] = socialLayout +const radii = ['5px', '10px', '20px'] as const - const value = { buttonColor, borderRadius, theme, socialLayout } +const views: { id: ViewType; title: string }[] = [ + { id: 'sign_in', title: 'Sign In' }, + { id: 'sign_up', title: 'Sign Up' }, + { id: 'magic_link', title: 'Magic Link' }, + { id: 'forgotten_password', title: 'Forgotten Password' }, + { id: 'update_password', title: 'Update Password' }, +] + +function App() { + const [brandColor, setBrandColor] = useState(colors[0] as string) + const [borderRadius, setBorderRadius] = useState(radii[0] as string) + const [theme, setTheme] = useState('dark') + const [socialLayout, setSocialLayout] = useState(socialAlignments[1] satisfies SocialLayout) + const [view, setView] = useState(views[0]) return ( - -
-
-
- +
+
+
+
+
+
+
+

+ Acme Industries +

+
+

+ Sign in today for Supa stuff +

+
+ + variables: { + default: { + colors: { + brand: brandColor, + brandAccent: `gray`, + }, + }, + }, + }} + providers={['apple', 'google', 'github']} + socialLayout={socialLayout} + theme={theme} + /> +
+
+
+
+ +
+
+

Auth UI React

+

+ Pre-built auth widgets to get started in minutes. +

+

+ Customizable authentication UI component with custom themes and + extensible styles to match your brand and aesthetic +

+
+ Currently available in Svelte, Solid.js and React +
+
+ +
+
+
Brand color
+
+ { + setBrandColor(radius) + }} + defaultValue={colors[0]} + color={colors[0]} + /> + { + setBrandColor(radius) + }} + defaultValue={colors[1]} + color={colors[1]} + /> + { + setBrandColor(radius) + }} + defaultValue={colors[2]} + color={colors[2]} + /> + { + setBrandColor(radius) + }} + defaultValue={colors[3]} + color={colors[3]} + /> +
+
+ +
+
Rounded corners
+
+ { + setBorderRadius(radius) + }} + defaultValue={radii[0]} + className="rounded-lg border-b-0 border-l-0" + /> + { + setBorderRadius(radius) + }} + defaultValue={radii[1]} + className="rounded-xl border-b-0 border-l-0" + /> + { + setBorderRadius(radius) + }} + defaultValue={radii[2]} + className="rounded-2xl border-b-0 border-l-0" + /> +
+
+ +
+
+ Social Auth Layout +
+
+ { + setSocialLayout(socialLayout as SocialLayout) + }} + defaultValue={socialAlignments[0]} + className="flex items-center justify-center" + > + + + { + setSocialLayout(socialLayout as SocialLayout) + }} + defaultValue={socialAlignments[1]} + className="flex items-center justify-center" + > + + +
+
+ +
+
Component View
+
+
+
+ +
+
+
+
-
- +
) } diff --git a/examples/react/src/MenuIcon.tsx b/examples/react/src/MenuIcon.tsx new file mode 100644 index 00000000..43e7cca9 --- /dev/null +++ b/examples/react/src/MenuIcon.tsx @@ -0,0 +1,23 @@ +interface Props { + className?: string +} + +export default function MenuIcon({ className = '' }: Props) { + return ( + + ) +} diff --git a/examples/react/src/Selectors.tsx b/examples/react/src/Selectors.tsx deleted file mode 100644 index 3bcb3902..00000000 --- a/examples/react/src/Selectors.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import styles from './App.module.css' -import Logo from './assets/react.svg' -import ToggleButton from '@mui/material/ToggleButton' -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' -import Circle from '@mui/icons-material/Circle' -import RoundedCorner from '@mui/icons-material/RoundedCorner' -import RoundedCornerRounded from '@mui/icons-material/RoundedCornerRounded' -import RoundedCornerSharp from '@mui/icons-material/RoundedCornerSharp' -import HorizontalIcon from '@mui/icons-material/AlignHorizontalCenterRounded' -import VerticalIcon from '@mui/icons-material/AlignVerticalCenterRounded' -import { useData } from './store' -import { SocialLayout } from '@supabase/auth-ui-shared' - -function Selectors() { - return ( -
-

Auth UI React

-

- Customizable authentication UI component with custom themes and - extensible styles to match your brand and aesthetic -

-
- React Logo -

- Currently available in Solid.js and{' '} - - React - -

-
-
- - - -
-
- ) -} - -export function AlignmentToggles() { - const { socialLayout } = useData() - const [customSocialLayout, setCustomSocialLayout] = socialLayout - - function handleChange(e: React.MouseEvent, newAlignment: SocialLayout) { - if (newAlignment !== null) { - setCustomSocialLayout(newAlignment) - } - } - - return ( -
-
Social Auth Layout
- - - - - - - - -
- ) -} - -export function RadiusToggles() { - const { borderRadius } = useData() - const [customBorderRadius, setCustomBorderRadius] = borderRadius - - function handleChange(e: React.MouseEvent, newRadius: string) { - if (newRadius !== null) { - setCustomBorderRadius(newRadius) - } - } - - return ( -
-
Rounded Corners
- - - - - - - - - - - -
- ) -} - -export function ColorToggles() { - const { buttonColor } = useData() - const [customButtonColor, setCustomButtonColor] = buttonColor - - function handleChange(e: React.MouseEvent, newColor: string) { - if (newColor !== null) { - setCustomButtonColor(newColor) - } - } - - return ( -
-
Brand Color
- - - - - - - - - - - - - - -
- ) -} - -export default Selectors - -const colors = { - red: 'rgb(202, 37, 37)', - green: 'rgb(65, 163, 35)', - blue: 'rgb(8, 107, 177)', - orange: 'rgb(235, 115, 29)', -} - -const radii = { - small: '5px', - medium: '10px', - large: '20px', -} - -const socialAlignment = { - horizontal: 'horizontal', - vertical: 'vertical', -} - -const theme = { - light: 'light', - dark: 'dark', -} diff --git a/examples/react/src/ToggleButton.tsx b/examples/react/src/ToggleButton.tsx new file mode 100644 index 00000000..7c0121dd --- /dev/null +++ b/examples/react/src/ToggleButton.tsx @@ -0,0 +1,35 @@ +import { ReactNode } from 'react' + +interface Props { + className?: string + children?: ReactNode + color?: string + defaultValue: string + setSelected?: (v: string) => void + selected?: string +} + +export default function ToggleButton({ + children, + color = 'transparent', + defaultValue = '', + className = '', + setSelected = (v) => {}, + selected, +}: Props) { + return ( + + ) +} diff --git a/examples/react/src/app.css b/examples/react/src/app.css new file mode 100644 index 00000000..f99e9573 --- /dev/null +++ b/examples/react/src/app.css @@ -0,0 +1,889 @@ +/* +! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.toggle-button { + height: 2.5rem; + width: 2.5rem; + border-radius: 9999px; + border-width: 1px; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.toggle-button:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.relative { + position: relative; +} + +.col-span-12 { + grid-column: span 12 / span 12; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.\!mb-0 { + margin-bottom: 0px !important; +} + +.mb-16 { + margin-bottom: 4rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mb-8 { + margin-bottom: 2rem; +} + +.mt-0 { + margin-top: 0px; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.grid { + display: grid; +} + +.h-12 { + height: 3rem; +} + +.w-6 { + width: 1.5rem; +} + +.\!max-w-md { + max-width: 28rem !important; +} + +.rotate-90 { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.gap-3 { + gap: 0.75rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.gap-8 { + gap: 2rem; +} + +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.self-center { + align-self: center; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-2xl { + border-radius: 1rem; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.rounded-xl { + border-radius: 0.75rem; +} + +.border-2 { + border-width: 2px; +} + +.border-b-0 { + border-bottom-width: 0px; +} + +.border-l-0 { + border-left-width: 0px; +} + +.border-blue-700 { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-zinc-900 { + --tw-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--tw-bg-opacity)); +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pb-16 { + padding-bottom: 4rem; +} + +.pl-5 { + padding-left: 1.25rem; +} + +.pr-10 { + padding-right: 2.5rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.ring-2 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.drop-shadow-lg { + --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.drop-shadow-sm { + --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +body { + background-color: #1c1c1c; + color: #fff; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + font-size: 16px; + color: rgba(255, 255, 255, 0.75); +} + +.hover\:border-gray-400:hover { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} + +@media (min-width: 768px) { + .md\:col-span-5 { + grid-column: span 5 / span 5; + } + + .md\:col-span-7 { + grid-column: span 7 / span 7; + } + + .md\:mb-0 { + margin-bottom: 0px; + } + + .md\:gap-16 { + gap: 4rem; + } + + .md\:py-24 { + padding-top: 6rem; + padding-bottom: 6rem; + } +} + +@media (min-width: 1024px) { + .lg\:col-span-6 { + grid-column: span 6 / span 6; + } + + .lg\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .lg\:max-w-md { + max-width: 28rem; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:gap-16 { + gap: 4rem; + } + + .lg\:px-16 { + padding-left: 4rem; + padding-right: 4rem; + } + + .lg\:py-24 { + padding-top: 6rem; + padding-bottom: 6rem; + } +} + +@media (min-width: 1280px) { + .xl\:px-20 { + padding-left: 5rem; + padding-right: 5rem; + } +} diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx index 611e848f..ac33e36a 100644 --- a/examples/react/src/main.tsx +++ b/examples/react/src/main.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' -import './index.css' +import './app.css' ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/examples/react/src/store.ts b/examples/react/src/store.ts deleted file mode 100644 index e8f1a98d..00000000 --- a/examples/react/src/store.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { SocialLayout } from '@supabase/auth-ui-shared' -import { createContext, useContext } from 'react' - -interface AppStateContextType { - buttonColor: [string, React.Dispatch>] - borderRadius: [string, React.Dispatch>] - theme: [string, React.Dispatch>] - socialLayout: [ - SocialLayout, - React.Dispatch> - ] -} -export const AppState = createContext(null) - -export const useData = () => { - const context = useContext(AppState) - - if (!context) { - throw new Error('useData must be used within a ') - } - - return context -} diff --git a/examples/react/src/index.css b/examples/react/src/tailwind.css similarity index 66% rename from examples/react/src/index.css rename to examples/react/src/tailwind.css index b5602733..bf3b3468 100644 --- a/examples/react/src/index.css +++ b/examples/react/src/tailwind.css @@ -1,5 +1,16 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .toggle-button { + @apply h-10 w-10 rounded-full border transition hover:scale-105; + } +} + body { background-color: #1c1c1c; + color: #fff; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', @@ -8,21 +19,7 @@ body { -moz-osx-font-smoothing: grayscale; } -a { - text-decoration: none; - color: #8bb7ff; -} - -a:visited { - color: #325998; -} - p { font-size: 16px; color: rgba(255, 255, 255, 0.75); } - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/examples/react/tailwind.config.cjs b/examples/react/tailwind.config.cjs new file mode 100644 index 00000000..50bf470c --- /dev/null +++ b/examples/react/tailwind.config.cjs @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{html,js,jsx,tsx,ts}'], + darkMode: 'media', + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/examples/svelte/src/app.css b/examples/svelte/src/app.css deleted file mode 100644 index f3f3db6d..00000000 --- a/examples/svelte/src/app.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - background-color: #1c1c1c; - color: #fff; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', - 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/examples/svelte/src/routes/+layout.svelte b/examples/svelte/src/routes/+layout.svelte index 011fb3c2..a12262e7 100644 --- a/examples/svelte/src/routes/+layout.svelte +++ b/examples/svelte/src/routes/+layout.svelte @@ -1,5 +1,4 @@