Merge branch 'feat-pink-v2' of github.com:appwrite/console into feat-pink-v2

src/lib/stores/stripe.ts

@@ -1,4 +1,4 @@
-import type { Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
+import type { Appearance, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
 import { sdk } from './sdk';
 import { app } from './app';
 import { get, writable } from 'svelte/store';
@@ -61,7 +61,7 @@ export async function submitStripeCard(name: string, organizationId?: string) {
             clientSecret = paymentMethod.clientSecret;
         }
 
-        // // Element needs to be submitted before confirming the setup intent
+        // Element needs to be submitted before confirming the setup intent
         elements.submit();
 
         const baseUrl = 'https://cloud.appwrite.io/console';
@@ -185,17 +185,27 @@ export async function confirmSetup(
     }
 }
 
-const appearanceLight = {
+const appearanceLight: Appearance = {
     variables: {
-        colorPrimary: ThemeLightCloud['fgcolor-neutral-primary'],
-        colorText: ThemeLightCloud['fgcolor-neutral-primary'],
-        colorBackground: ThemeLightCloud['bgcolor-neutral-primary'],
-        color: ThemeLightCloud['fgcolor-neutral-primary'],
+        fontSizeBase: ThemeLightCloud['font-size-s'],
+        fontSizeSm: ThemeLightCloud['font-size-s'],
+        colorPrimary: ThemeLightCloud['neutral-700'],
+        colorText: ThemeLightCloud['neutral-700'],
+        colorBackground: 'rgb(250, 250, 251)',
         colorDanger: ThemeLightCloud['fgcolor-error'],
         fontFamily: ThemeLightCloud['font-family-sansserif'],
-        borderRadius: ThemeLightCloud['border-radius-s']
+        borderRadius: ThemeLightCloud['base-8']
     },
     rules: {
+        '.Label': {
+            color: ThemeLightCloud['neutral-700'],
+            marginBottom: ThemeLightCloud['base-8'],
+            fontWeight: '500'
+        },
+        '.Input': {
+            padding: ThemeLightCloud['base-6'],
+            paddingLeft: ThemeLightCloud['base-12']
+        },
         '.Input:hover': {
             border: 'solid 1px rgb(195, 195, 198)',
             boxShadow: 'none'