mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-30 21:01:54 +08:00
3c89bb8c19
## Summary Redesigns the hosted components app (`apps/hosted-components`) with a new Tailwind-based UI: rebuilt auth pages (sign-in, sign-up, magic link, forgot/reset password, MFA, email verification, team invitation, CLI auth confirm) and a full hosted Account Settings suite (profile, emails & auth, notifications, active sessions, API keys, payments, teams), with dark mode support. Also fixes found along the way: form error clearing in forgot-password/password-reset, `runAsynchronouslyWithAlert` for the notifications switch, a `CopyButton` DOM prop leak, a bogus mobile-session icon check, and imports the app stylesheet in the root route so the app's Tailwind styles actually apply. ## Before / after screenshots Captured on the local dev setup (`internal` project). Onboarding is not shown since it redirects without standalone UI in this setup. <details> <summary><b>Sign in</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Sign up</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Forgot password</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Password reset</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Email verification</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>MFA</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Error</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Team invitation</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>CLI auth confirm</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — Profile</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — Notifications</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — Active sessions</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — API keys</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — Payments</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> <details> <summary><b>Account settings — Emails & auth</b></summary> | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | </details> Link to Devin session: https://app.devin.ai/sessions/1d2380aa55694f2fb12ed96e200a32ad Requested by: @Developing-Gamer --------- Co-authored-by: Cursor <[email protected]> Co-authored-by: armaan <[email protected]> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
177 lines
4.5 KiB
CSS
177 lines
4.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@keyframes hosted-shimmer {
|
|
0% {
|
|
background-position: 180% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -80% 0;
|
|
}
|
|
}
|
|
|
|
.hosted-skeleton {
|
|
background-color: rgb(228 228 231 / 0.46);
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgb(255 255 255 / 0.38) 42%,
|
|
rgb(255 255 255 / 0.62) 50%,
|
|
rgb(255 255 255 / 0.38) 58%,
|
|
transparent 100%
|
|
);
|
|
background-repeat: no-repeat;
|
|
background-size: 220% 100%;
|
|
animation: hosted-shimmer 1.45s ease-in-out infinite;
|
|
}
|
|
|
|
html:has(head > [data-stack-theme="dark"]) .hosted-skeleton {
|
|
background-color: rgb(39 39 42 / 0.55);
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgb(255 255 255 / 0.035) 42%,
|
|
rgb(255 255 255 / 0.075) 50%,
|
|
rgb(255 255 255 / 0.035) 58%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
@layer base {
|
|
/* The SDK's theme-detection script resolves the theme in this order: computed `color-scheme`,
|
|
theme attributes on <html>, then the luma of `--background`. Since we define a light
|
|
`--background` on :root, the luma check would always answer "light" and dark mode would never
|
|
activate. Setting `color-scheme` from the system preference makes the script's *first* check
|
|
succeed, so it follows the OS theme and sets data-stack-theme accordingly.
|
|
Important: do NOT set `color-scheme` inside the data-stack-theme dark block below — that would
|
|
make the script read back its own output and get stuck in dark mode. */
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-in-card: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-in-card: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-in-card: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 240 5.9% 90%;
|
|
--border-in-card: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--input-in-card: 240 5.9% 90%;
|
|
--ring: 240 10% 3.9%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
html:has(head > [data-stack-theme="dark"]) {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 240 10% 9.4%;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-in-card: 240 3.7% 23.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-in-card: 240 3.7% 23.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-in-card: 240 3.7% 23.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 62.8% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 240 3.7% 35.9%;
|
|
--border-in-card: 240 3.7% 43.9%;
|
|
--input: 240 3.7% 25.9%;
|
|
--input-in-card: 240 3.7% 43.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.stack-scope {
|
|
--background: inherit !important;
|
|
--foreground: inherit !important;
|
|
--card: inherit !important;
|
|
--card-foreground: inherit !important;
|
|
--popover: inherit !important;
|
|
--popover-foreground: inherit !important;
|
|
--primary: inherit !important;
|
|
--primary-foreground: inherit !important;
|
|
--secondary: inherit !important;
|
|
--secondary-in-card: inherit !important;
|
|
--secondary-foreground: inherit !important;
|
|
--muted: inherit !important;
|
|
--muted-in-card: inherit !important;
|
|
--muted-foreground: inherit !important;
|
|
--accent: inherit !important;
|
|
--accent-in-card: inherit !important;
|
|
--accent-foreground: inherit !important;
|
|
--destructive: inherit !important;
|
|
--destructive-foreground: inherit !important;
|
|
--success: inherit !important;
|
|
--success-foreground: inherit !important;
|
|
--border: inherit !important;
|
|
--border-in-card: inherit !important;
|
|
--input: inherit !important;
|
|
--input-in-card: inherit !important;
|
|
--ring: inherit !important;
|
|
--radius: inherit !important;
|
|
}
|