feat(view-transitions): ✨ Implement view transitions for navigation and logo morphing

apps/web/content/docs/dev/configuration.mdx

@@ -98,6 +98,20 @@ Pass the component itself, not `<Logo />`. Keep it lean: your Vite build
 executes this file too, so a logo that imports half your UI makes every
 regeneration pass slower.
 
+### View transitions
+
+Navigations crossfade and the logo morphs between layouts by default. Set
+`viewTransitions` to `false` to swap pages instantly instead:
+
+```ts title="src/vitnode.config.ts"
+export const vitNodeConfig = buildConfig({
+  // ...
+  viewTransitions: false,
+})
+```
+
+See [View transitions](/docs/ui/view-transitions) for what this changes.
+
 ### Enabled plugins
 
 Register a plugin with its own factory:

apps/web/content/docs/dev/sso/custom-adapter.mdx

@@ -102,7 +102,7 @@ export const vitNodeApiConfig = buildApiConfig({
 })
 ```
 
-A **GitHub** login button automatically renders on `/login` and `/register`, and `/login/sso/github` routes incoming authentication requests. It is text-only until you give the adapter an [icon](/docs/dev/sso/icons).
+A **GitHub** login button automatically renders on `/login` and `/register`, and `/login/sso/github` routes incoming authentication requests. It is a neutral, text-only button until you give the adapter an [icon and a brand color](/docs/dev/sso/icons).
 
 ---
 
@@ -121,7 +121,12 @@ A **GitHub** login button automatically renders on `/login` and `/register`, and
       type: "string",
     },
     icon: {
-      description: "Brand mark for the login button: inline SVG markup or an image URL. See Provider Icons.",
+      description: "Brand mark for the login button: inline SVG markup or an image URL. See Provider Icons and Colors.",
+      required: false,
+      type: "string",
+    },
+    brandColor: {
+      description: "Hex color (#RGB or #RRGGBB) that fills the login button. The label turns white or near-black, whichever reads better. See Provider Icons and Colors.",
       required: false,
       type: "string",
     },
@@ -148,7 +153,7 @@ A **GitHub** login button automatically renders on `/login` and `/register`, and
   }}
 />
 
-See [Provider Icons](/docs/dev/sso/icons) for the accepted `icon` formats, and for registering a React component instead.
+See [Provider Icons and Colors](/docs/dev/sso/icons) for the accepted `icon` and `brandColor` formats, and for registering a React component instead.
 
 ## Profile data
 

apps/web/content/docs/dev/sso/discord.mdx

@@ -177,7 +177,7 @@ Then open `/login` and press **Discord**. You should see Discord's "connect to"
 authorization prompt listing your username and email, get bounced back to
 `/login/sso/discord?code=...&state=...`, and land on the front page signed in.
 
-{/* Image prompt: The VitNode /login page with the email and password fields above a divider reading "Or continue With" and an outline button labelled Discord beneath it, dark theme, 900x850. */}
+{/* Image prompt: The VitNode /login page with the email and password fields below a blurple button labelled "Continue with Discord" and a divider reading "Or continue with email", dark theme, 900x850. */}
 
 </Step>
 

apps/web/content/docs/dev/sso/icons.mdx

@@ -1,15 +1,26 @@
 ---
-title: Provider Icons
-description: Put a brand mark on your SSO login buttons - an inline SVG or image URL from the adapter, or a React component registered in the browser.
+title: Provider Icons and Colors
+description: Put a brand mark and a brand color on your SSO login buttons - an inline SVG or image URL and a hex color from the adapter, or a React component registered in the browser.
 icon: Image
 ---
 
 import { TypeTable } from 'fumadocs-ui/components/type-table'
 
-The built-in Google, Discord and Facebook adapters already carry their brand
-marks, so `/login` and `/register` render them without any configuration. A
-custom adapter starts out as text only - a **GitHub** button with no octocat -
-and there are two ways to give it a mark.
+import { ImgDocs } from '@/components/fumadocs/img'
+
+import loginSsoButtons from './icons/login-sso-buttons.png'
+
+Every SSO provider gets a full-width **Continue with _Provider_** button on
+`/login` and `/register`. The built-in Google, Discord and Facebook adapters
+already carry their brand marks and colors, so those buttons look right without
+any configuration. A custom adapter starts out as a neutral button with
+text only - a **GitHub** button with no octocat - and this page shows how to
+give it a mark and a color.
+
+<ImgDocs
+  alt="The VitNode login page with a blurple Continue with Discord button, a white Continue with Google button with the four-color G, and a blue Continue with Facebook button above the email form"
+  src={loginSsoButtons}
+/>
 
 ## From the adapter (SVG or image)
 
@@ -28,8 +39,10 @@ export const GitHubSSOApiPlugin = (): SSOApiPlugin => ({
 ```
 
 Use `fill="currentColor"` and leave the width and height off: the mark then
-takes the button's text colour in both light and dark mode, and is sized to
-match the label.
+takes the button's text color in both light and dark mode - white on a
+[brand-colored button](#brand-color) - and is sized to match the label. A
+multicolor mark, such as Google's four-color G, keeps its own fills; give its
+adapter no brand color so it sits on the neutral button it was designed for.
 
 An image works the same way:
 
@@ -102,7 +115,33 @@ copy `.svg` files into `dist`, so either copy it as part of your build or keep
 the markup in a `.ts` constant, the way VitNode's own adapters do.
 
 If you would rather have a component than a string, register it in the browser
-instead - that is the next section.
+instead - see [From the browser](#from-the-browser-react-component-or-jsx).
+
+## Brand color
+
+Add a `brandColor` to fill the button with the provider's color, the way the
+built-in Discord (`#5865F2`) and Facebook (`#0866FF`) adapters do:
+
+```ts title="apps/api/src/utils/sso/github.ts"
+export const GitHubSSOApiPlugin = (): SSOApiPlugin => ({
+  id: 'github',
+  name: 'GitHub',
+  icon: githubIcon,
+  // [!code ++]
+  brandColor: '#24292F',
+  // ... getUrl, fetchToken, fetchUser
+})
+```
+
+The value has to be a hex color - `#RGB` or `#RRGGBB`. The button picks its
+own text color: white when white text reaches a 4.5:1 contrast ratio on your
+color, near-black otherwise, so a yellow brand still gets a readable label. A
+`currentColor` icon follows that text color.
+
+Leave `brandColor` out and the button stays neutral, with a border. That is the
+right choice for providers whose guidelines ask for a neutral button, such as
+Google and Microsoft. A value that is not a hex color is ignored the same way,
+and in development the console names the provider.
 
 ## From the browser (React component or JSX)
 
@@ -133,6 +172,12 @@ needs a wrapper element.
 
 <TypeTable
   type={{
+    'SSOApiPlugin.brandColor': {
+      description:
+        "Optional hex color (#RGB or #RRGGBB) that fills the provider's button. The label turns white or near-black, whichever reads better. Leave it out for a neutral button.",
+      required: false,
+      type: 'string',
+    },
     'SSOApiPlugin.icon': {
       description:
         "Optional brand mark for the provider's button: inline SVG markup (an .svg file's contents included), an http(s) URL, a root-relative path, or a data:image URI.",

apps/web/content/docs/dev/sso/index.mdx

@@ -27,9 +27,10 @@ export const vitNodeApiConfig = buildApiConfig({
 })
 ```
 
-A **Google** button automatically renders on your login and registration forms,
-brand mark included - the built-in adapters ship their own icons, and a custom
-one can [add its own](/docs/dev/sso/icons).
+A **Continue with Google** button automatically renders on your login and
+registration forms, four-color G included. The built-in adapters ship their own
+marks and colors - Discord and Facebook buttons are filled with their brand
+color - and a custom adapter can [add its own](/docs/dev/sso/icons).
 
 ---
 
@@ -57,8 +58,8 @@ one can [add its own](/docs/dev/sso/icons).
     href="/docs/dev/sso/custom-adapter"
   />
   <Card
-    title="Provider Icons"
-    description="Put a brand mark on the login buttons"
+    title="Provider Icons and Colors"
+    description="Put a brand mark and color on the login buttons"
     href="/docs/dev/sso/icons"
   />
 </Cards>

apps/web/content/docs/ui/meta.json

@@ -11,6 +11,7 @@
     "spacing",
     "elevation",
     "motion",
+    "view-transitions",
     "icons",
     "accessibility",
     "---Forms---",