Skip to content

v0.128.0 — New Retro: Retro's colours in the dark, a New Retro sign-in, and an account menu

The miscellaneous TODOs in planning/TODO.md.

  • [x] New Retro dark mode: change colors to match the old Retro skin. Non-color properties remain unchanged.
    • Note: every colour token in new-retro-dark.css is now retro.css's value; the corners, faces, hard-offset shadows and cardstock grain stay New Retro's. On the Mantine side each colour name (primary, danger, success, accent, info, warning and the re-pointed stock accents) is a virtual colour: parchment's tuple in the light scheme, Retro's (imported from mantineTheme.ts, not copied) in the dark, with Retro's dark ramp and primary shade, so filled, light, outline and subtle-text variants come out exactly as Retro's. The light half is unchanged. The dark chat bubbles from others drop their own neutrals for Retro's; the dark die inks stay, because New Retro draws dice as tiles of the input colour and Retro's inks are for pastel tiles. newRetroTheme.test.ts compares every dark variant with Retro's and every dark token with retro.css.
  • [x] Develop a custom Clerk login page style matching New Retro. (research question: can this page have multiple styles matching the user's preference?)
    • Research answer: yes, but not on Clerk's hosted Account Portal. The app used to redirect a signed-out visitor there (RedirectToSignIn). That page is on Clerk's domain and takes one style from the Clerk dashboard. It can't see the visitor's skin, which lives in this origin's localStorage. Clerk's <SignIn /> component rendered inside the app can: Clerk themes from --clerk-* CSS variables and accepts var() values (deriving its shades with color-mix()), so pointing them at the --vtt-* tokens gives the page whichever skin <html data-skin> names. That is the visitor's stored family and colour mode, set before anyone signs in; System follows the OS. A visitor with no stored preference sees the default, Retro TTRPG.
    • Note: SignedInGate's fallback is now SignInPage (in PlatformAuthProvider.tsx, keeping the Clerk seam at three files): the cat and "Purple Cat Games" over Clerk's card, on the page colour and grain. Hash routing keeps Clerk's steps (second factor, SSO callback, sign-up via withSignUp) in the URL's hash, so the page appears at the path the visitor opened, and signing in lands back there (a share or invite link survives). auth/clerkSkin.css maps every Clerk variable to a token, so the account button's menu and the profile modal wear the skin too. The card's corners, hard shadow, grain and Cinzel title come from tokens in appearance. Clerk colours links with the primary, so links get the primary mixed 45% toward the text colour; Retro's saddle brown alone does not read on a dark card. Every skin styles the page; none is special-cased. auth/signInPage.test.ts.
    • Owner, in the Clerk dashboard (each instance: dev, alpha, prod): under Paths, set the sign-in and sign-up URLs to the application's domain (/) instead of the Account Portal, so links in Clerk's own emails and any other redirect Clerk makes land on this page. Until then those still open the Account Portal, which keeps working.
  • [x] Account menu: clicking the Clerk icon in the upper right opens the Clerk Profile dialog, but there's no way to log out. Instead, it should open a menu with Edit Profile and Log Out.
    • Note: ProfileButton (AccountCorner.tsx) is the avatar top right off the map and at the play bar's right end on it, so both now open the menu. Edit Profile opens Clerk's dialog, as the avatar used to; Log Out is the same as Settings → Account's: useLogOut() in ProfileMenu.tsx is now the only sign-out path, so this device's push subscription is still removed before the session ends. The menu uses the theme's Menu defaults, so it is portalled at the context-menu layer (1000), above the top bar and the sidebars (600). On a phone, the drawer's account row still opens the dialog, with Settings (and its Log Out) directly above it. ProfileButton.dom.test.tsx renders the button and clicks through both entries.