feat: added new default styles (#231)

* added new default styles

* Add changeset

---------

Co-authored-by: Andrew Smith <a.smith@silentworks.co.uk>

Author: Hallidayo

.changeset/mighty-meals-flow.md

@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-svelte': patch
+'@supabase/auth-ui-solid': patch
+---
+
+Message styling change

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',
       },
     },
   },

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'
 				}
 			}
 		}