Skip to content

@hanzo/ui 8.33.0: the sign-in card and its rules, shared with hanzo.ai's own sign-in - #320

Merged
Darkhorse7stars merged 1 commit into
mainfrom
shared-signin-look
Nov 12, 2026
Merged

Darkhorse7stars merged 1 commit into
mainfrom
shared-signin-look

Conversation

@Darkhorse7stars

Copy link
Copy Markdown
Member

hanzo.ai/login and /signup (hanzo-inc/app) are where every Hanzo site's sign-in hands off to. They still draw the old stacked 56px pills, so they look different from the SignInPanel that sends people there and from hanzo.app's front page.

This moves the panel's card and stylesheet into SignInCard (src/auth/look.tsx), exported from @hanzo/ui/auth/panel and @hanzo/ui/auth with SIGNIN_STYLE. hanzo-inc/app's own sign-in can then be drawn by the same rules instead of keeping a copy.

  • SignInPanel is drawn on SignInCard. What it renders is unchanged except the rules' scope: they now sit under [data-signin] instead of [data-slot="signin-panel"], and the card keeps data-slot="signin-panel".
  • SignInCard takes background, borderColor and bare as before. It also takes slot (the data-slot a host finds it by) and any stack prop, such as render="section", aria-label, ref and gap.
  • The rules also draw this library's own controls when they are set inside the card. An Input or InputGroup becomes the 46px field with 14px corners. An Action becomes the 46px control, and a filled one becomes the solid control. A host's later steps (code, password, phone) follow without marking each control.
    • An Input keeps its own padding, so a password's eye keeps its well.
    • An invalid field keeps its red edge.
    • An Input inside a group is left to the group.
  • These library-control rules carry :not(#_) weight so they outrank gui's per-theme atomic classes (a filled Action's light-theme shadow). The Action's corners are !important because hanzo-inc/app holds every Action round with an !important rule of its own.
  • An odd last provider spans the row (IAM may list Apple, Google and GitHub).

Checks

  • vitest run src/auth/: 24 passed. New cases check that the card is a host's region (its slot, section, aria-label), that every rule stays under [data-signin], and, in jsdom, that the selectors reach a lone Input, a password Input, an InputGroup's box (not the Input inside it) and a filled Action.
  • tsc --noEmit: no errors in src/auth/.
  • Rules injected into the live hanzo.ai/login measured 46px controls and field at 14px with 14px corners, Google and GitHub side by side in a 464px card, and the filled button's shadow from the card's rule.

…i's own sign-in

SignInCard (src/auth/look.tsx) carries the card and the stylesheet the
panel drew, exported from @hanzo/ui/auth/panel and @hanzo/ui/auth with
SIGNIN_STYLE. SignInPanel is drawn on it, and hanzo-inc/app's sign-in can
be too. Inside the card the library's Input, InputGroup and Action take
the 46px look without being marked.
@Darkhorse7stars
Darkhorse7stars merged commit 62138fa into main Nov 12, 2026
19 of 21 checks passed
@Darkhorse7stars
Darkhorse7stars deleted the shared-signin-look branch November 12, 2026 03:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant