State icons

Pairs with the .is-* colour combinations to satisfy WCAG 1.4.1 (Use of Colour). A glyph is prepended via ::before on any element carrying [data-state="success" | "warning" | "danger"], so the state isn't conveyed by colour alone.

How it works

• The plugin emits one rule per non-empty entry in $icons:

  [data-state='success']::before { content: var(--kc-state-icon-success, '✓ '); }
  [data-state='warning']::before { content: var(--kc-state-icon-warning, '⚠ '); }
  [data-state='danger']::before  { content: var(--kc-state-icon-danger,  '✕ '); }

• The default glyph is the var() fallback, so any consumer can override per-label by setting --kc-state-icon-<label> at any scope (root, theme class, component instance). Set it to '' to drop the glyph.
• The trailing space (U+0020) keeps the glyph visually separate from the label without requiring a wrapping element.
• default, light, and primary carry no inherent state semantics, so they don't get a default glyph: adding an empty ::before for them would be dead weight. Add them via $icons if you have a use case.

Live

<p style="display: flex; gap: 1rem; flex-wrap: wrap;">
<span data-state="success">Saved</span>
<span data-state="warning">Needs review</span>
<span data-state="danger">Failed</span>
</p>

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

Markup

<span data-state="success">Saved</span>
<span data-state="warning">Needs review</span>
<span data-state="danger">Failed</span>

Where it kicks in automatically

• module/field: when the wrapper carries .is-invalid or its inner control matches :user-invalid / [aria-invalid="true"], the field's label gets the danger glyph via the --kc-state-icon-danger token.
• Consumers can opt any element in by adding data-state="<label>".

Variables

Override example

@use '@adnap/krysalicss/helper/state' with (
  $selector-attr: 'data-status',
  $icons: (
    success: '✅ ',
    warning: '⚠️ ',
    danger: '❌ ',
    info:    'ℹ ',  // add a custom label
  ),
);

Tokens consumed