Override component variables

Use this when a component's defaults don't fit your design and you need to change padding, radius, selectors, or any other !default knob without editing source.

Per-component override

Use @use ... with () at the consume site. Every variable in the codebase is declared !default, so the override wins.

// app.scss: override one component's knobs
@use '@adnap/krysalicss/element/button' with (
  $padding-x: 1.5rem,
  $padding-y: 0.65rem,
  $border-radius: 999px,    // pill buttons everywhere
);

Root-level override

Pass overrides to the framework's batteries-included entry to change values that propagate across components: typically $global-border-radius, $global-gap, and the color palette/combinations.

// app.scss: override at the root entry
@use '@adnap/krysalicss' with (
  $global-border-radius: 12px,
  $global-gap: 1.25rem,
);

Replace the color combinations

Components consume (background, foreground) tuples by name (default, primary, warning, etc.). Replace the whole map or individual tuples:

// app.scss: replace combination tuples
@use '@adnap/krysalicss' with (
  $color-combinations: (
    default: (#ffffff, #1a1a1a),
    primary: (#5b21b6, #ffffff),
    success: (#16a34a, #ffffff),
    warning: (#f59e0b, #1a1a1a),
    danger:  (#dc2626, #ffffff),
    light:   (#f3f4f6, #1a1a1a),
  ),
);

Change a component's selector

Selectors are configurable too. Re-target a component to a class prefix or namespaced selector without editing source:

// app.scss: change the selector a component uses
@use '@adnap/krysalicss/element/button' with (
  $selector: '.toolbar .btn',
);