feat: use shadcn default styles

src/login/KcPage.tsx

@@ -104,10 +104,10 @@ const classes = {
 
     kcHeaderWrapperClass: "max-w-[600px] mx-auto",
     kcHeaderClass:
-        "mb-6 text-center text-[0.93rem] tracking-[0.01em] text-mac-text-secondary",
+        "mb-6 text-center text-[0.93rem] tracking-[0.01em] text-muted-foreground",
 
     kcFormCardClass:
-        "relative w-full sm:w-[460px] rounded-3xl border border-mac-card-stroke bg-transparent px-4 py-5 sm:px-7 sm:py-[30px]",
+        "relative w-full sm:w-[460px] rounded-xl border border-border bg-card px-4 py-5 sm:px-7 sm:py-[30px]",
 
     kcFormHeaderClass: "relative grid grid-cols-[1fr_auto] gap-3 items-baseline mb-1",
     kcLocaleMainClass: "m-0 col-start-2 row-start-1 flex items-center",
@@ -121,12 +121,12 @@ const classes = {
     kcFormGroupErrorClass: "",
     kcFormGroupHeader: "",
     kcLabelWrapperClass: "",
-    kcLabelClass: "block mb-1.5 text-[0.84rem] text-mac-text-secondary font-medium",
+    kcLabelClass: "block mb-1.5 text-[0.84rem] text-foreground font-medium",
 
     kcInputClass: "",
     kcInputLargeClass: "",
     kcTextareaClass: "",
-    kcInputErrorMessageClass: "block mt-1.5 text-[0.82rem] text-mac-error",
+    kcInputErrorMessageClass: "block mt-1.5 text-[0.82rem] text-destructive",
 
     kcButtonClass: "",
     kcButtonBlockClass: "",
@@ -144,7 +144,7 @@ const classes = {
     kcFormOptionsWrapperClass: "flex items-center justify-end min-h-[44px]",
 
     kcAlertClass:
-        "flex items-center gap-2.5 rounded-xl mb-3.5 border border-white/45 backdrop-blur-md px-3 py-2.5",
+        "flex items-center gap-2.5 rounded-md mb-3.5 border border-border px-3 py-2.5",
     kcAlertTitleClass: "",
 
     kcLocaleClass: "",
@@ -153,24 +153,24 @@ const classes = {
     kcLocaleListClass: "block list-none m-0",
     kcLocaleListItemClass: "list-none",
     kcLocaleItemClass:
-        "block px-3.5 py-2 text-[0.88rem] font-medium text-mac-text-primary transition-colors duration-120",
+        "block px-3.5 py-2 text-[0.88rem] font-medium text-foreground transition-colors duration-120",
 
     kcSelectAuthListClass: "grid gap-3",
     kcSelectAuthListItemClass:
-        "flex items-center gap-3 p-3 rounded-xl border border-white/45 bg-white/40 backdrop-blur-md transition-all duration-140 hover:border-white/70 hover:bg-white/50 hover:-translate-y-0.5 hover:shadow-lg",
+        "flex items-center gap-3 p-3 rounded-md border border-border bg-background transition-all duration-140 hover:border-input hover:bg-muted",
     kcSelectAuthListItemIconClass:
-        "shrink-0 w-10 h-10 rounded-full grid place-items-center bg-[rgba(70,98,138,0.12)] text-[#244672]",
+        "shrink-0 w-10 h-10 rounded-full grid place-items-center bg-muted text-foreground",
     kcSelectAuthListItemIconPropertyClass: "",
     kcSelectAuthListItemArrowClass: "",
     kcSelectAuthListItemArrowIconClass: "flex-1 min-w-0 flex flex-col gap-0.5",
     kcSelectAuthListItemBodyClass: "",
     kcSelectAuthListItemHeadingClass:
-        "text-[0.96rem] font-semibold text-mac-text-primary leading-tight",
+        "text-[0.96rem] font-semibold text-foreground leading-tight",
     kcSelectAuthListItemDescriptionClass:
-        "text-[0.82rem] font-medium text-mac-text-secondary leading-snug flex flex-wrap gap-1",
+        "text-[0.82rem] font-medium text-muted-foreground leading-snug flex flex-wrap gap-1",
     kcSelectAuthListItemFillClass: "hidden",
     kcSelectAuthListItemTitle:
-        "m-0 mb-1 text-[0.9rem] font-semibold text-mac-text-secondary",
+        "m-0 mb-1 text-[0.9rem] font-semibold text-muted-foreground",
 
     kcFormSocialAccountSectionClass: "",
     kcFormSocialAccountListClass: "list-none m-0 p-0 grid gap-2",
@@ -178,7 +178,7 @@ const classes = {
     kcFormSocialAccountGridItem: "",
     kcFormSocialAccountLinkClass: "",
     kcFormSocialAccountListButtonClass:
-        "flex items-center gap-2.5 w-full min-h-10 rounded-xl border border-white/45 bg-white/40 backdrop-blur-md px-3 py-2 text-[rgba(35,50,70,0.96)] no-underline transition-all duration-140",
+        "flex items-center gap-2.5 w-full min-h-10 rounded-md border border-border bg-background px-3 py-2 text-foreground no-underline transition-all duration-140 hover:bg-muted",
     kcFormSocialAccountNameClass: "text-[0.95rem] font-semibold leading-tight",
     kcCommonLogoIdP: "",
 
@@ -187,8 +187,7 @@ const classes = {
     kcLoginOTPListItemHeaderClass: "flex items-center w-full",
     kcLoginOTPListItemIconClass: "hidden",
     kcLoginOTPListItemIconBodyClass: "hidden",
-    kcLoginOTPListItemTitleClass:
+    kcLoginOTPListItemTitleClass: "text-[0.98rem] font-semibold text-foreground",
-        "text-[0.98rem] font-semibold text-[rgba(34,51,75,0.95)]",
 
     kcInputWrapperClass: "grid gap-2",
     kcInputGroup: "",

src/login/Template.tsx

@@ -93,12 +93,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                 </div>
             </div>
 
-            <Card
+            <Card className={clsx(kcClsx("kcFormCardClass"), "w-full sm:w-[460px]")}>
-                className={clsx(
-                    kcClsx("kcFormCardClass"),
-                    "relative w-full sm:w-[460px] rounded-3xl border border-mac-card-stroke bg-mac-card-bg/80 backdrop-blur-xl px-4 py-5 sm:px-7 sm:py-[30px] shadow-2xl"
-                )}
-            >
                 <CardHeader className={clsx(kcClsx("kcFormHeaderClass"), "space-y-0 p-0 pb-4")}>
                     {enabledLanguages.length > 1 && (
                         <div className={kcClsx("kcLocaleMainClass")} id="kc-locale">
@@ -145,7 +140,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                     `alert-${message.type}`,
                                     kcClsx("kcAlertClass"),
                                     `pf-m-${message.type === "error" ? "danger" : message.type}`,
-                                    "mb-4 border-white/45 bg-white/40 backdrop-blur-md"
+                                    "mb-4"
                                 )}
                             >
                                 <AlertDescription

src/login/pages/QrLoginCanceled.tsx

@@ -17,7 +17,7 @@ export default function QrLoginCanceled(props: PageProps<Extract<KcContext, { pa
             headerNode={msg("consentDenied")}
         >
             <div id="kc-qr-canceled-message" className={classes?.kcFormClass}>
-                <Alert variant="destructive" className="border-white/45 bg-white/40 backdrop-blur-md">
+                <Alert variant="destructive" className="w-full">
                     <AlertTitle>{msg("consentDenied")}</AlertTitle>
                 </Alert>
             </div>

src/login/pages/QrLoginSuccess.tsx

@@ -17,7 +17,7 @@ export default function QrLoginSuccess(props: PageProps<Extract<KcContext, { pag
             headerNode={msg("successQrCodeLoginTitle")}
         >
             <div id="kc-qr-success-message" className={classes?.kcFormClass}>
-                <Alert className="kcQrSuccessMessageClass border-white/45 bg-white/40 backdrop-blur-md">
+                <Alert className="w-full">
                     <AlertTitle>{msg("successQrCodeLoginMessage")}</AlertTitle>
                 </Alert>
             </div>

src/login/pages/QrLoginVerify.tsx

@@ -20,7 +20,7 @@ export default function QrLoginVerify(props: PageProps<Extract<KcContext, { page
             headerNode={msg("doQrCodeVerify")}
         >
             <div id="kc-qr-verify-form" className={classes?.kcFormClass}>
-                <Alert variant="destructive" className="kcQrWarningClass mb-4">
+                <Alert variant="destructive" className="mb-4 w-full">
                     <AlertTitle>{msg("doQrCodeWarning")}</AlertTitle>
                 </Alert>