feat: added new default styles (#231)

* added new default styles * Add changeset --------- Co-authored-by: Andrew Smith <[email protected]>
supabase-community · Nov 5, 2023 · ae22ff2 · ae22ff2
1 parent 2ff64af
commit ae22ff2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/.changeset/mighty-meals-flow.md b/.changeset/mighty-meals-flow.md
@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-svelte': patch
+'@supabase/auth-ui-solid': patch
+---
+
+Message styling change
diff --git a/packages/solid/src/components/UI/Message.tsx b/packages/solid/src/components/UI/Message.tsx
@@ -5,17 +5,24 @@ import { Appearance } from '../../types'
 
 const messageDefaultStyles = css({
   fontFamily: '$bodyFontFamily',
-  fontSize: '$baseBodySize',
+  fontSize: '$baseInputSize',
   marginBottom: '$labelBottomMargin',
   display: 'block',
   textAlign: 'center',
+  borderRadius: '0.375rem',
+  padding: '1.5rem 1rem',
+  lineHeight: '1rem',
   variants: {
     color: {
       default: {
         color: '$messageText',
+        backgroundColor: '$messageBackground',
+        border: '1px solid $messageBorder',
       },
       danger: {
         color: '$messageTextDanger',
+        backgroundColor: '$messageBackgroundDanger',
+        border: '1px solid $messageBorderDanger',
       },
     },
   },

diff --git a/packages/svelte/src/lib/UI/Message.svelte b/packages/svelte/src/lib/UI/Message.svelte
@@ -5,17 +5,24 @@
 
 	const messageDefaultStyles = css({
 		fontFamily: '$bodyFontFamily',
-		fontSize: '$baseBodySize',
+		fontSize: '$baseInputSize',
 		marginBottom: '$labelBottomMargin',
 		display: 'block',
 		textAlign: 'center',
+		borderRadius: '0.375rem',
+		padding: '1.5rem 1rem',
+		lineHeight: '1rem',
 		variants: {
 			color: {
 				default: {
-					color: '$messageText'
+					color: '$messageText',
+					backgroundColor: '$messageBackground',
+					border: '1px solid $messageBorder'
 				},
 				danger: {
-					color: '$messageTextDanger'
+					color: '$messageTextDanger',
+					backgroundColor: '$messageBackgroundDanger',
+					border: '1px solid $messageBorderDanger'
 				}
 			}
 		}