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

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

Install

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/.

Runtime (adopted / inline)

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" })).

SCSS

@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/*.

Color functions

Native CSS custom functions (plus runtime fallbacks):

Function	Role
--c2-surface(tone, base-color, scheme-id)	surface
--c2-on-surface(...)	ink on surface
--c2-contrast(...)	contrast fill
--c2-on-contrast(...)	ink on contrast

• 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).

solid-colorize mixin

@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.

Tokens (excerpt)

Live numbers are in SCSS. Typical names:

Kind	Examples
Space	--space-xs … --space-2xl, --gap-*, --padding-*
Radius	--radius-xs … --radius-2xl, --radius-full
Type	--text-xs … --text-6xl, --leading-*, --font-weight-*
Motion	--transition-fast / normal / slow
Shadow	--shadow-sm … --shadow-2xl, --shadow-inset
Chrome	--icon-size-*, --avatar-size, --border-width-*

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.

Agate.UX

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

Oriented	Client	Impl
--os-inset-x/y	--cs-inset-x/y	--im-inset-x/y
--os-drag-x/y	--cs-drag-x/y	--im-drag-x/y
--os-size-x/y	--cs-size-x/y	--im-size-x/y

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

Workspace

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

Guide: guide/. License: MIT.