coreui / coreui-pro / 32917809898

93%

main: 94%

push

github

refactor(Alert, Badge, Avatar)!: make a component's own colour tokens reachable (#910)

* refactor(Alert)!: let the alert token win over the theme slot

`.alert` read the theme slot first and its own token only as a fallback:

    color: var(--cui-theme-fg-emphasis, var(--cui-alert-color));

So `--cui-alert-color` — a token the docs present as the way to recolour an
alert — did nothing whenever the element also carried a theme class, which is
the common case. The theme fallback now lives in the token's own default value
and the property reads the token plainly, so the specific name beats the
generic one instead of losing to it.

That also removes the workaround the variant needed. `.alert-solid` set the
tokens and then re-declared `color`, `background-color` and `border-color` to
overpower the base rule; setting the tokens is now enough, and every future
variant is three lines shorter.

Measured in Chromium against the built stylesheet, before and after: `.alert`,
`.alert-primary`, `.alert-success`, `.alert-primary.alert-solid` and
`.alert-solid` compute identical colour, background and border. The only
difference is the one this fixes — `--cui-alert-color` set on a themed alert
now applies.

Marked breaking because a project that set `--cui-alert-*` on a themed alert
saw it ignored and will now see it take effect.

* refactor(Alert)!: give the border one token and a real default

Two follow-ons to the fallback order, both about reaching a value the component
already renders.

`border` was composed at the point of use, with the style written into the
rule: `var(--alert-border-width) solid var(--alert-border-color)`. Nothing in
the library declares a border-style token — `solid` is hardcoded in forty such
rules — so a project wanting a dashed alert had to override the whole `border`
property and lose the token-driven width and colour with it. The shorthand is
now `--cui-alert-border`, composed from the parts, so either level is reachable:
set the whole... (continued)

4617 of 5199 branches covered (88.81%)

Branch coverage included in aggregate %.

8829 of 9242 relevant lines covered (95.53%)

393.1 hits per line