Shadow

Four-step elevation scale aligned with the Bulma / Bootstrap / Tailwind language so the learning curve is zero. Every class uses !important — these are escape hatches that beat any component-level box-shadow.

How it works

Four discrete classes — none, sm, base (no suffix), and lg.
The base step is the unsuffixed .has-shadow class, matching the Bulma convention of "the default elevation is the obvious one".
Each step is a literal box-shadow value pulled from the $shadows map at compile time; consumers override the whole map to shift the elevation language.

Live

Elevation steps

Live

none

base

HTML

<div style="display: flex; gap: 1.5rem; padding: 1.5rem; background: var(--kc-default-bg);">
<div class="has-shadow-none" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 1rem 1.25rem;">none</div>
<div class="has-shadow-sm" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 1rem 1.25rem;">sm</div>
<div class="has-shadow" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 1rem 1.25rem;">base</div>
<div class="has-shadow-lg" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 1rem 1.25rem;">lg</div>
</div>

Minimal sass

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

Playground

Markup

<!-- Default elevation step -->
<div class="has-shadow">…</div>

<!-- Lighter cue (e.g. for inline cards) -->
<div class="has-shadow-sm">…</div>

<!-- Strong elevation (e.g. for floating dialogs) -->
<div class="has-shadow-lg">…</div>

<!-- Remove any inherited shadow -->
<div class="has-shadow-none">…</div>

Class reference

Class	`box-shadow`
`.has-shadow-none`	`none`
`.has-shadow-sm`	`0 1px 2px rgb(0 0 0 / 0.08)`
`.has-shadow`	`0 4px 12px rgb(0 0 0 / 0.12)`
`.has-shadow-lg`	`0 12px 32px rgb(0 0 0 / 0.18)`

Variables

Variable	Default	Notes
`$selector-prefix`	`'.has-shadow'` (derived from `variables.$selector-prefix-has`)	Bare prefix for the base step (emits `.has-shadow`) plus `<prefix>-none`, `<prefix>-sm`, `<prefix>-lg`. Rebrands automatically if you globalise the framework-wide `.has-` convention.
`$shadows`	`(none: none, sm: 0 1px 2px rgb(0 0 0 / 0.08), base: 0 4px 12px rgb(0 0 0 / 0.12), lg: 0 12px 32px rgb(0 0 0 / 0.18))`	Map of step name to `box-shadow` value. The keys are looked up by name in the plugin (`none`, `sm`, `base`, `lg`) — renaming them requires editing the plugin too.

Override example

@use '@adnap/krysalicss/helper/shadow' with (
  $shadows: (
    none: none,
    sm:   0 1px 2px rgb(0 0 0 / 0.06),
    base: 0 4px 16px rgb(0 0 0 / 0.10),
    lg:   0 16px 48px rgb(0 0 0 / 0.20),
  ),
);

Tokens consumed

None — shadow helpers emit literal box-shadow values from $shadows at compile time. Use a wrapping --kc-shadow-* custom property in your own components if you need theme-switchable elevation.