chore(docs): enhance api reference with styles for providers

docs/pages/global.css

@@ -247,3 +247,17 @@ div.nextra-search kbd {
     opacity: 0;
   }
 }
+
+:is(html[class~="dark"])
+  > head:has(meta[content*="reference/core/providers"])
+  + body
+  .provider {
+  color: #e2e8f0 !important;
+  background-color: transparent !important;
+}
+
+html > head:has(meta[content*="reference/core/providers"]) + body .provider {
+  padding: 1rem;
+  font-size: 1rem;
+  color: #000 !important;
+}

packages/core/src/providers/42-school.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#fff", display: "flex", justifyContent: "space-between", color: "#000", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#fff", display: "flex", justifyContent: "space-between", color: "#000", padding: 16}}>
  * <span>Built-in <b>42School</b> integration.</span>
  * <a href="https://api.intra.42.fr//">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/42-school.svg" height="48" width="48"/>

packages/core/src/providers/apple.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>Apple</b> integration.
  * </span>

packages/core/src/providers/asgardeo.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>Asgardeo</b> integration.
  * </span>

packages/core/src/providers/auth0.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>Auth0</b> integration.
  * </span>

packages/core/src/providers/authentik.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#fd4b2d", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#fd4b2d", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Authentik</b> integration.</span>
  * <a href="https://goauthentik.io/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/authentik.svg" height="48" width="48"/>

packages/core/src/providers/azure-ad-b2c.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#0072c6", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#0072c6", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Azure AD B2C</b> integration.</span>
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>

packages/core/src/providers/azure-ad.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#0072c6", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#0072c6", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Azure AD</b> integration.</span>
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-ad.svg" height="48" width="48"/>

packages/core/src/providers/bankid-no.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>BankID Norway</b> integration.
  * </span>

packages/core/src/providers/battlenet.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Battle.net</b> integration.</span>
  * <a href="https://Battle.net/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/battlenet.svg" height="48" width="48"/>

packages/core/src/providers/beyondidentity.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#5077c5", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#5077c5", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Beyond Identity</b> integration.</span>
  * <a href="https://www.beyondidentity.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity.svg" height="48" width="48"/>

packages/core/src/providers/box.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Box</b> integration.</span>
  * <a href="https://box.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/box.svg" height="48" width="48"/>

packages/core/src/providers/boxyhq-saml.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>BoxyHQ SAML</b> integration.</span>
  * <a href="https://boxyhq.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/boxyhq-saml.svg" height="48" width="48"/>

packages/core/src/providers/bungie.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Bungie</b> integration.</span>
  * <a href="https://bungie.net/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/bungie.svg" height="48" width="48"/>

packages/core/src/providers/click-up.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#24292f", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#24292f", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>ClickUp</b> integration.</span>
  * <a href="https://clickup.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/click-up.svg" height="48" width="48"/>

packages/core/src/providers/cognito.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Cognito</b> integration.</span>
  * <a href="https://docs.aws.amazon.com/cognito">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/cognito.svg" height="48" width="48"/>

packages/core/src/providers/coinbase.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Coinbase</b> integration.</span>
  * <a href="https://coinbase.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/coinbase.svg" height="48" width="48"/>

packages/core/src/providers/concept2.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Concept2</b> integration.</span>
  * <a href="https://concept2.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/concept2.svg" height="48" width="48"/>

packages/core/src/providers/descope.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>Descope</b> integration.
  * </span>

packages/core/src/providers/discord.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Discord</b> integration.</span>
  * <a href="https://discord.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/discord.svg" height="48" width="48"/>

packages/core/src/providers/dribbble.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Dribbble</b> integration.</span>
  * <a href="https://dribbble.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/dribbble.svg" height="48" width="48"/>

packages/core/src/providers/dropbox.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Dropbox</b> integration.</span>
  * <a href="https://dropbox.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/dropbox.svg" height="48" width="48"/>

packages/core/src/providers/duende-identity-server6.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>DuendeIdentityServer6</b> integration.</span>
  * <a href="https://docs.duendesoftware.com/identityserver/v6">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/duende-identity-server6.svg" height="48" width="48"/>

packages/core/src/providers/eventbrite.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#f05537", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#f05537", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Eventbrite</b> integration.</span>
  * <a href="https://www.eventbrite.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/eventbrite.svg" height="48" width="48"/>

packages/core/src/providers/eveonline.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>EVEOnline</b> integration.</span>
  * <a href="https://eveonline.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/eveonline.svg" height="48" width="48"/>

packages/core/src/providers/facebook.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Facebook</b> integration.</span>
  * <a href="https://facebook.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/facebook.svg" height="48" width="48"/>

packages/core/src/providers/faceit.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>FACEIT</b> integration.</span>
  * <a href="https://faceit.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/faceit.svg" height="48" width="48"/>

packages/core/src/providers/foursquare.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>FourSquare</b> integration.</span>
  * <a href="https://foursquare.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/foursquare.svg" height="48" width="48"/>

packages/core/src/providers/freshbooks.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>FreshBooks</b> integration.</span>
  * <a href="https://freshbooks.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/freshbooks.svg" height="48" width="48"/>

packages/core/src/providers/fusionauth.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>FusionAuth</b> integration.</span>
  * <a href="https://fusionauth.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/fushionauth.svg" height="48" width="48"/>

packages/core/src/providers/github.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#24292f", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#24292f", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>GitHub</b> integration.</span>
  * <a href="https://github.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github.svg" height="48" width="48"/>

packages/core/src/providers/gitlab.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>GitLab</b> integration.</span>
  * <a href="https://gitlab.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/gitlab.svg" height="48" width="48"/>

packages/core/src/providers/google.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Google</b> integration.</span>
  * <a href="https://google.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/google.svg" height="48" width="48"/>

packages/core/src/providers/hubspot.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>HubSpot</b> integration.</span>
  * <a href="https://hubspot.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/hubspot.svg" height="48" width="48"/>

packages/core/src/providers/identity-server4.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>IdentityServer4</b> integration.</span>
  * <a href="https://identityserver4.readthedocs.io">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/identity-server4.svg" height="48" width="48"/>

packages/core/src/providers/instagram.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Instagram</b> integration.</span>
  * <a href="https://www.instagram.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/instagram.svg" height="48" width="48"/>

packages/core/src/providers/kakao.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Kakao</b> integration.</span>
  * <a href="https://www.kakaocorp.com/page/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/kakao.svg" height="48" width="48"/>

packages/core/src/providers/keycloak.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Keycloak</b> integration.</span>
  * <a href="https://keycloak.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/keycloak.svg" height="48" width="48"/>

packages/core/src/providers/kinde.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <div class="provider" style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
  * <span style={{fontSize: "1.35rem" }}>
  *  Built-in sign in with <b>Kinde</b> integration.
  * </span>

packages/core/src/providers/line.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>LINE</b> integration.</span>
  * <a href="https://LINE.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/line.svg" height="48" width="48"/>

packages/core/src/providers/linkedin.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>LinkedIn</b> integration.</span>
  * <a href="https://linkedin.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/linkedin.svg" height="48" width="48"/>

packages/core/src/providers/mailchimp.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Mailchimp</b> integration.</span>
  * <a href="https://mailchimp.com">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/mailchimp.svg" height="48" width="48"/>

packages/core/src/providers/mailgun.ts

@@ -1,5 +1,5 @@
 /**
- * <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
  * <span>Built-in <b>Mailgun</b> integration.</span>
  * <a href="https://www.mailgun.com/">
  *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/mailgun.svg" height="48" width="48"/>