CngxContrast
projects/core/theming/cngx-contrast.directive.ts
Import#
import { CngxContrast } from '@cngx/core'
Description#
Scopes the contrast preference to a subtree by reflecting
[cngxContrast] onto the host [data-contrast] attribute - the escape
hatch, not a per-component input.
<section cngxContrast="more"> ... </section>The override block (contrast-tokens.css) is unanchored, so a subtree
more strengthens borders and muted text for just that section. A
subtree normal does not un-boost against a root
data-contrast='more' or an OS prefers-contrast: more context (a
documented limit - a pure-CSS ancestor selector cannot restore the
scheme-correct default token on a descendant without re-hardcoding a
colour, and subtree scoping is for the accessibility-critical raising
direction). Root data-contrast='normal' is what opts the document out,
via the :root:not([data-contrast='normal']) escape on the OS rule.
The input accepts only 'normal' / 'more' (mirroring
CngxTouchTarget): 'auto' is a root-only concept - it means "defer
to the OS prefers-contrast media query", which a stamped subtree
attribute cannot express (no CSS matches [data-contrast='auto']) -
and lives on provideContrast instead.
The input is optional (a bare cngxContrast attribute binds the empty
string, coerced to undefined), so it never asserts a required binding;
an unset value leaves [data-contrast] off the host.