Bipolar Semantic Tints & WCAG 4.5:1

In multi-theme design systems, semantic tokens (Danger Red, Success Green, Warning Amber, Info Blue) require adaptive mathematical blending across light and dark modes.

The Inversion Trap of Light Tints in Dark Mode

Traditional component libraries pair soft tints (-light-9, like #fef0f0) with saturated text in light mode. When transitioning to dark mode:

• Tints copied from light palettes paint as blinding white blocks over dark canvases.
• Simply inverting the text colour does not help: the raw hue on such a pale tint often misses the WCAG 2.1 AA 4.5:1 minimum (measured at just 2.08:1), leaving the text illegible.

The color-mix Ink Fusion Formula

TuffEx solves this mathematically: Semantic text inks never use raw hues directly; they blend with primary ink (--tx-text-color-primary) in sRGB space:

// TxModeChip's ink: the hue mixed into the primary text colour
--tx-mode-chip-ink: color-mix(
  in srgb,
  var(--tx-color-danger, #f56c6c) 55%, // is-danger
  var(--tx-text-color-primary, #303133)
);
// is-success: var(--tx-color-success, #67c23a) 45%
// is-warning: var(--tx-color-warning, #e6a23c) 45%
// is-info:    var(--tx-color-primary, #409eff) 50%

Each hue has its own share: 55% for danger, 45% for success and warning, 50% for info. Info takes the primary hue, --tx-color-primary, because --tx-color-info is a grey that would read as muted.

• In light mode, primary ink is near-black, pulling semantic text darker for crisp contrast against soft tints.
• In dark mode, primary ink is near-white, pulling semantic text brighter for luminous readability against deep carbon.

Verified WCAG 2.1 4.5:1 Contrast Table

Empirical measurements conducted on 13px text:

Why Color Alone Must Never Convey State

Over 8% of male users experience color vision deficiencies (protanopia, deuteranopia). Iron Rule: Never use hue as the sole conveyor of status. Always accompany colored badges with distinct glyphs and accessible text labels (e.g. red cross icon plus explicit "Failed" text).