Color

Per-combination text and background utilities that route through the framework's var-aware textColor / backgroundColor mixins, so a single class switches with the active theme.

How it works

• Two prefixes: .has-text-<label> and .has-background-<label>.
• One pair of classes per entry in variables.$color-combinations — by default that's five labels: default, primary, warning, danger, success.
• Each rule resolves at runtime via var(--kc-<label>-fg, …) for text and var(--kc-<label>-bg, …) for background, with the SCSS literal from the combination tuple as the var() fallback. Override the custom property at any scope (root, theme class, component instance) to retint without recompiling.
• The mixins emit a self-balancing pair when applicable: a background rule paired with a foreground rule keeps the WCAG contrast ratio of the chosen combination intact.

Pairing with .is-inverted

Each combination is a (background, foreground) tuple — the foreground is the readable text colour for that surface (typically white on a dark brand bg). So .has-text-primary alone paints text with the foreground (often white), which is invisible on a white page.

Two pairing patterns make the helpers usable:

1. Default: pair with the matching background, so the (bg, fg) tuple renders intact on its own surface: <span class="has-background-primary has-text-primary">…</span>.
2. Inverted: add .is-inverted to flip the helper's role and paint the brand-toned colour as text (i.e. read the combination's bg value into the colour property): <span class="has-text-primary is-inverted">brand-tone text</span>. This is the Bulma-style "text-primary" everyone expects on a neutral page surface.

See the Color combinations page for the full palette and the contrast guarantees that ship with each label.

Live

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<span class="has-text-default is-inverted">.has-text-default</span>
<span class="has-text-primary is-inverted">.has-text-primary</span>
<span class="has-text-success is-inverted">.has-text-success</span>
<span class="has-text-warning is-inverted">.has-text-warning</span>
<span class="has-text-danger is-inverted">.has-text-danger</span>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-color')
);

<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="has-background-default has-text-default" style="padding: 0.4rem 0.8rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent);">default</span>
<span class="has-background-primary has-text-primary" style="padding: 0.4rem 0.8rem;">primary</span>
<span class="has-background-success has-text-success" style="padding: 0.4rem 0.8rem;">success</span>
<span class="has-background-warning has-text-warning" style="padding: 0.4rem 0.8rem;">warning</span>
<span class="has-background-danger has-text-danger" style="padding: 0.4rem 0.8rem;">danger</span>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-color')
);

<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="has-background-default" style="padding: 0.4rem 0.8rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent);">default</span>
<span class="has-background-primary is-inverted" style="padding: 0.4rem 0.8rem;">primary inverted</span>
<span class="has-background-success is-inverted" style="padding: 0.4rem 0.8rem;">success inverted</span>
<span class="has-background-warning is-inverted" style="padding: 0.4rem 0.8rem;">warning inverted</span>
<span class="has-background-danger is-inverted" style="padding: 0.4rem 0.8rem;">danger inverted</span>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-color')
);

Markup

<span class="has-text-primary">Primary text</span>
<span class="has-background-primary">Primary fill</span>

<span class="has-text-success">Saved</span>
<span class="has-text-warning">Heads up</span>
<span class="has-text-danger">Failed</span>

<div class="has-background-default">
  <span class="has-text-default">Default-on-default surface</span>
</div>

Emitted classes

Variables

The set of labels is governed by variables.$color-combinations — the helper iterates whatever combinations exist at compile time. To add or rename a label, override that map upstream (see Color combinations).

Override example

@use '@adnap/krysalicss/helper/color' with (
  // Alias under your own prefix:
  $selector-prefix-text:       '.text-',
  $selector-prefix-background: '.bg-',
);

// Add or rename combinations upstream via $color-combinations:
@use '@adnap/krysalicss/variables/color' with (
  $color-combinations: (
    default: (#fff, #111),
    primary: (#1a73e8, #fff),
    success: (#157f3c, #fff),
    warning: (#d4a000, #111),
    danger:  (#c2381d, #fff),
    brand:   (#7c3aed, #fff),  // new label gets .has-text-brand / .has-background-brand
  ),
);

Tokens consumed

Note: unlike most other helpers in this category, colour utilities do not emit with !important — they route through the framework's var-aware mixins so they participate in theme switching cleanly. If you need a colour override that beats component rules, use a more specific selector or hand-write a !important rule.