[Remove Vuetify from Studio] Sign-in page

[LightCreator1007]

Summary

Removes Vuetify from the sign-in page.

• VCard → StudioRaisedBox, Banner → StudioBanner, EmailField / PasswordField → StudioEmailField / StudioPasswordField
• VForm → native <form> with generateFormMixin; VApp / VLayout / VDivider → plain elements + scoped styles
• Vuetify spacing/colour helpers → scoped CSS and $themePalette / $themeTokens
• Errors show on blur or after a failed submit, not on every keystroke (the mixin validates on every input)
• Password sent untrimmed the mixin's clean() would otherwise strip leading/trailing spaces
• Heading is now <h1>, styled the same, so the page doesn't start at level 2

References

Fixes #5930

Reviewer guidance

Screen.Recording.2026-07-31.at.12.56.04.AM.mov

Note

theme--light on the page root is retained. Vuetify generates a .link class that collides with KDS's basic-link class, main.scss only neutralises it under .theme--light, which VApp used to supply. Without it, links render as blue blocks after any VApp page mounts.
Alternative is un-nesting that rule in main.scss, fixes it centrally for all of the pages/components, happy to switch.

AI usage

Used Claude Code in a review-and-iterate loop.

• Wrote a first pass myself, had Claude research the issue/KDS docs and propose replacements before any code
• made it justify each scoped style, removed a dead class and a needless rename.
• Found the blue-block bug myself during manual testing, had Claude diagnose it, rejected its shared/styles/main.scss fix (because it lies outside the scope of this issue), and applied the in-scope one.
• Reviewed every diff, ran tests and linter, verified manually in the browser

[learning-equality-bot]

👋 Hi @LightCreator1007, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.