Reference

Everything EVA emits, in one place. Version 2.4.0.

Configuration#

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 12, 16, 24, 32, 48, 64, 96, 128),
  $font-sizes: (12, 14, 16, 18, 20, 24, 32),
  $build-class: true,
  $px-rem-suffix: false,
  $name-by-size: true,
  $custom-class: false,
  $class-config: (),
  $debug: false,
  $unit-fluid: 1vw,
  $reference-width: 1440,
  $fluid-runtime: true,
  $min-font-size: 0
);

Entry points#

Size tokens#

For each N in $sizes:

For each N in $font-sizes:

Runtime unit: --eva-fluid-unit, default 1vw, override to 1cqi per subtree. Classes .eva-cqi and .eva-root.

Color tokens#

Roles: brand, accent, extra, dark, light.

Theme inputs, per role: --<role>-lightness, --<role>-chroma, --<role>-hue.

Mode pivots: --current-lightness (96.4% light / 5% dark), --current-darkness (6.4% / 95%).

Brightness formula:

lightness = base + absolute offset + (bound − base) × ratio

Per-role overrides, with <token> in darker, brighter, darker_, brighter_:

Body classes: current-theme (required), theme-<name>, toggle-theme (dark), all-grads (gradients).

Utility classes#

Sizing — w mw h p px py pt pb pr mt mb ml mr g gap br, each × every size × __ _ (none) -.

Font size — fs-N, fs-N_, fs-N__.

Color — _c- _bg- _bc- _f- _s- × 5 roles × 8 variants. Plus _shadow, _shadow_.

Flex — flex, x, y, reverse, wrap, nowrap, wrap-reverse; start center end space around evenly; compound justify-align forms; justify-*, items-*, content-*; flex-1 flex-2 flex-3 flex-auto flex-initial flex-none stretch; self-*; order-1…order-12, order-first, order-last, order-none; flex-card, flex-sidebar.

Grid — grid, auto-fit-<size><variant> (sizes ≥ 100 only), flex-grid, container:flex-grid, col-1…col-12, col-1/1…col-1/12, max-col-1…max-col-12, xs:max-col-N…xxl:max-col-N.

Gradients — grad-linear, grad-radial, grad-linear-text, grad-radial-text, grad-linear-border, grad-radial-border; from-*, to-*, from-transparent, to-transparent; d-t d-b d-l d-r d-tl d-tr d-bl d-br; a-0…a-360 in 5° steps; bg-size, bg-size_, bg-size__; bg-center bg-top bg-bottom bg-left bg-right; animated, animated-slow, animated-fast.

Typography — fwg-1…fwg-8, fwd-1…fwd-13, f-scale, f-scale offset, bold, ttu, tac, lh-0, lh-1.

Layout — por poa pof pos, poa center, w-full, h-full, oh, ar-1, circle, border, border thin, blur blur_ blur__, pointer, hide, lt, mt-auto mb-auto ml-auto mr-auto.

CLI#

npx eva-color convert "#ff0000"
npx eva-color to-hex 62.8 0.258 29.23
npx eva-color palette "#ff0000" 7
npx eva-color theme theme.json
npx eva-color contrast "#ffffff" "#000000"

npx eva-purge --css styles/main.css --content "**/*.html" \
  --output styles/main-compressed.css --safelist "current-theme,toggle-theme,all-grads"

Rules#

1. No fixed values. var(--64), not 64px. var(--brand), not #ff5733.
2. Only list the sizes the design actually uses.
3. 16 is mandatory in $sizes.
4. Font tokens are --fs-N. $sizes and $font-sizes are independent namespaces.
5. Pick one build mode per project and hold it.
6. current-theme on the root element, always.
7. all-grads on the container if you use gradients.
8. Media queries for layout topology only — never for spacing or type.

Known limits#

• The two color axes do not cross. No opacity variant of a brightness step; no --brand-d__.
• Fades are inlined at build time. $fade-values (65 / 35 / 15%) is a SCSS variable, not a runtime one — no per-theme control.
• dark and light inherit --brand-hue with a non-zero chroma, so neutrals are brand-tinted unless you pin them.
• Dark mode overrides configured lightness. .toggle-theme sets --dark-lightness and --light-lightness with !important; only hue and chroma survive the switch.
• auto-fit-* exists only for sizes ≥ 100.

Links#

• GitHub
• eva-css-fluid on npm
• eva-colors on npm
• eva-css-purge on npm