lslezak / agama / 29989252825

push

github

feat(web): enhance the product theming role system with corner-radius and logo controls (#3748)

Extends the `--agm-t--*` product-override role system with two roles
that weren't exposed yet, and adds a script plus a doc to support the
rest of the theming workflow.

- **Corner radius** now has its own roles: `--agm-t--border-radius` sets
all three PatternFly radius tiers at once
(buttons/controls/tables/tooltips/menus, cards/popovers/expandable
sections, modal dialogs), and `--agm-t--control--border-radius` layers a
narrower override on top for just buttons/inputs/selects. Previously a
product wanting a different radius had no role to hook into and would
have had to touch PatternFly's own tokens directly, outside the
semantic-role layer the rest of the override API goes through.
- **The product logo** gets `--agm-t--logo--size--header` and
`--agm-t--logo--size--inline` for its two usages,
`--agm-t--logo--max-size` as a shared cap on top of either, and
`--agm-t--logo--align`. Sizing previously came only from a hardcoded
literal per usage; a duplicate `width=` HTML attribute on the `<img>`
also came out, since it can't hold a CSS variable and was just carrying
a stale value once the sizing moved to `var(...)`.
- **`check-contrast.js`**, a standalone script (not wired into `npm
run`) that computes the WCAG contrast ratio between a color pair and
checks it against the 3:1 / 4.5:1 / 7:1 thresholds, suggesting a
same-hue shade when a pair falls short. Meant to be reached for while
choosing role values for a new product skin, not part of the regular
test/lint loop.
- **`doc/product_theming.md`**, walking through skinning a product end
to end and extending the role API when a brand needs something not yet
covered.

Every new role keeps the current literal as its CSS fallback, so leaving
it unset changes nothing.

4896 of 6832 branches covered (71.66%)

Branch coverage included in aggregate %.

25555 of 29807 relevant lines covered (85.73%)

123.77 hits per line