feat(theme): upstream the Bootstrap .btn sizing block into the kit (0.4.0)

Bootstrap hard-codes --bs-btn-font-size: 1rem, oversized against the kit's
0.9rem body. All five consuming apps had independently written the identical
block into their own stylesheets (ignitionoee app.css, OtOpcUa site.css, mxgw
site.css, HistorianGateway site.css, ScadaBridge site.css), each carrying a
'delete this when the kit ships a .btn rule' comment. This is that release.

Sized by CSS-variable override only, never by redeclaring box properties:
Bootstrap's .btn-group seam/radius machinery reads the same variables, so a
literal font-size at equal specificity flattens .btn-sm into a padding-only
difference. That was a real defect in mxgw's local copy, so the rationale is
recorded in the CSS to stop it being 'simplified' back.

Lands in layout.css, which ThemeHead emits after theme.css and both after
Bootstrap, so the override wins on source order at equal specificity.

Ships in the same 0.4.0 release as rail-btn-block. Consumers get the sizing on
bump (not opt-in, unlike rail-btn-block) and should delete their local copies
in the same change. Build 0 errors, 48/48 tests, packed asset verified to carry
.btn, .btn-sm/.btn-group-sm and rail-btn-block with no literal font-size.
This commit is contained in:
Joseph Doherty
2026-08-11 02:17:16 -04:00
parent 5fc75d93fd
commit e7a126a9fc
2 changed files with 37 additions and 1 deletions
+9 -1
View File
@@ -80,7 +80,15 @@ Served at `_content/ZB.MOM.WW.Theme/…` by the ASP.NET static-web-asset pipelin
| Path | Contents |
|---|---|
| `css/theme.css` | Design tokens (`--accent`, `--ok`, `--warn`, …), typography, utility helpers |
| `css/layout.css` | Side-rail shell layout, collapsible nav, `StatusPill` variants, card/field helpers |
| `css/layout.css` | Side-rail shell layout, collapsible nav, `StatusPill` variants, card/field helpers, Bootstrap `.btn` sizing |
**Bootstrap button sizing (new in 0.4.0).** The kit now normalizes `.btn` / `.btn-sm` against its
0.9rem body via `--bs-btn-*` variable overrides, because Bootstrap hard-codes
`--bs-btn-font-size: 1rem`. All five consuming apps had written this same block into their own
stylesheets; **delete the local copy when you bump to 0.4.0** (each carries a comment saying so).
Size buttons by overriding the `--bs-btn-*` variables, never by redeclaring box properties — the
`.btn-group` seam and radius machinery reads those variables, so a literal `font-size` at equal
specificity silently reduces `.btn-sm` to a padding-only difference.
Rail-footer actions: `class="rail-btn"` is the inline default; add `rail-btn-block`
(`class="rail-btn rail-btn-block"`) for a full-width footer button. Use the modifier rather than