@fest-lib/veela
Design tokens, --c2-* color functions, Agate.UX. Values live in SCSS — this file is the map.

npm MIT stars

Do not emit a second :root palette in apps. Consume tokens and override context (var(--token, fallback)). Token SoT: src/scss (core/misc/_tokens.scss).

core · dom · object · lure
 └── fest/veela ← you are here
 └── fl-ui · shells · apps

npm install @fest-lib/core @fest-lib/dom @fest-lib/object @fest-lib/lure @fest-lib/veela

Peers: core, dom, object, lure (>=0.1.0). The published tarball includes dist/ and src/scss/.

import initialize from "@fest-lib/veela";
initialize(); // loads bundled SCSS via @fest-lib/dom

Variants (from src/scss/index.ts):

import { loadVeelaVariant } from "@fest-lib/veela/scss/index.ts";
// "core" | "basic" | "advanced" | "beercss"
await loadVeelaVariant("advanced");

In the workspace, FL.UI usually loads Veela for you (configureFlUI({ styleVariant: "veela-advanced" })).

@use "@fest-lib/veela/scss/core" as *;
.card {
 background: var(--c2-surface, var(--color-surface));
 padding: var(--space-md);
 border-radius: var(--radius-md);
}

Exports: @fest-lib/veela/scss/* → src/scss/*.

Native CSS custom functions (plus runtime fallbacks):

• scheme-id: 0 light · 1 dark · 2 default (follow host).
• tone: 0 black/white end · 50% chroma · 100% opposite end.
• base-color: var(--current) (default), --primary, --secondary, --accent, --success, --warning, --error.

.panel {
 background: var(--c2-surface);
 color: var(--c2-on-surface);
}

Alpha via relative color: oklch(from var(--c2-surface) l c h / 0.5).

@include solid-colorize("&", (
 "shade": 0,
 "tint": 0,
 "scheme-id": 2,
 "role": null,
 "scope": "component" // or "selector"
));

scope: "component" paints descendants / form helpers; "selector" stays on the node.

Live numbers are in SCSS. Typical names:

Atomic utility classes (.p-md, .gap-md, .d-flex, .text-sm, .shadow-sm, .color-primary, .surface-subtle) ship with the stylesheet. Prefer tokens on components over class soup.

Oriented-space vs client-space vs implementation-space:

Use inset for semi-static layout, translate for drag / animation. Orientation: calc(var(--orient, 0) * 90deg). Measure in @fest-lib/dom Agate helpers.

cd modules/projects/veela.css
npm run demo # Vite
npm test # puppeteer
npm run build
npm run publish

Guide: guide/. License: MIT.