Skip to content

feat: optional baseline stylesheet at @formhaus/core/style.css#34

Merged
ignsm merged 3 commits into
mainfrom
feat/opt-in-baseline-css
May 10, 2026
Merged

feat: optional baseline stylesheet at @formhaus/core/style.css#34
ignsm merged 3 commits into
mainfrom
feat/opt-in-baseline-css

Conversation

@ignsm
Copy link
Copy Markdown
Owner

@ignsm ignsm commented May 10, 2026

Adds an opt-in stylesheet that gives the default React and Vue field components a sensible look without forcing a UI kit. Imported via:

import '@formhaus/core/style.css';

Why

Today pnpm install @formhaus/react + copy-paste from the README produces a vertical stack of bare <input> elements with no spacing, no focus state, no error colour. First impression: "is this alpha?" Devs who plug in a UI kit don't see this, but the README/Quick Start path does.

Two design constraints:

  1. Stay opt-in. Devs using MUI, Tailwind, shadcn, Vuetify shouldn't pay any CSS cost. Nothing imports the stylesheet by default.
  2. Stay themable. Every colour, radius, spacing is a CSS custom property (--fh-color-primary, --fh-radius, --fh-gap, etc.). Override at :root or per-form to retheme without forking.

What's in the CSS (~180 lines)

  • fh-form, fh-form__fields, fh-field: vertical stack with consistent gaps
  • fh-field__input (and all variants): padding, border, focus ring, disabled, aria-invalid red border
  • fh-field__label, fh-field__required (asterisk), fh-field__error, fh-field__helper
  • Checkbox / radio / switch / multiselect: flex-row layouts
  • fh-form-actions + __button variants (primary / secondary / text)
  • fh-step-progress + bar / fill / counter / title / description

Uses :where(.fh-form) to declare custom properties at zero specificity, so apps can override at :root without !important.

Packaging

  • New file packages/core/style.css
  • exports: "./style.css": "./style.css"
  • files: includes style.css
  • sideEffects: ["**/*.css"] (was false) so bundlers preserve the import on tree-shake
  • check:types: added --exclude-entrypoints ./style.css so attw doesn't try to resolve CSS as JS types

Docs

Mention added in docs/guide/index.md, packages/core/README.md, packages/react/README.md, packages/vue/README.md.

Verifying

pnpm install --frozen-lockfile && pnpm -r run build && pnpm -r run test && pnpm lint:packages && pnpm check:types && pnpm docs:build all clean. Tarball contains package/style.css.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
formhaus Ready Ready Preview, Comment May 10, 2026 2:38pm

Request Review

@ignsm ignsm force-pushed the feat/opt-in-baseline-css branch from 2d788e3 to 0ba59be Compare May 10, 2026 14:38
@ignsm ignsm merged commit 01aef6e into main May 10, 2026
8 checks passed
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