Closes the depth channel. Atmosphere as the channel's materials layer:
- Per-plane `blur` cue (overlay 10px, modal 16px) + an opt-in frost rule
`[data-depth=`{plane}`][data-frost]` -> translucent surface (color-mix 80%) +
backdrop-filter blur. Gated on data-frost so it never turns an opaque overlay
translucent by default; specificity 0,2,0 reliably overrides the component bg.
- buildDepth(planes) (pure) + ActiveEidos.applyDepth/clearDepth — retune any
plane cue (surface/shadow/halo/blur/scrim/z) at runtime, the depth sibling of
applyColorScheme / applyTypeScale. Exported from $uix/eidos.
Showcase: /temas/profundidad section Materiales — a frosted-glass panel over a
vivid color mesh (frost blur + shadow + halo).
The `scrim` cue stays an available token without a wired rule — modal backdrops
are component-managed.
Verified: npm run check 0 errors; eidos 185/188 (3 pre-existing `words` failures,
unrelated). New tests: frost emission + applyDepth. Regenerated generated/base.css.
Docs: DEPTH_ENGINE_RFC Fase 4 + token contract, THEMING 29.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
parent
271a2f8ff0
commit
6998c5bde2
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Runtime depth retune — the depth analogue of `build-scheme.ts` (color) and
|
||||
* `build-type-scale.ts` (typography). Pure + isomorphic, DOM-free. Given per-plane cue
|
||||
* overrides it emits the `--depth-{plane}-{cue}` declarations for a managed `:root` block,
|
||||
* so an app can retune any plane's surface / shadow / halo / blur / scrim / z at runtime —
|
||||
* the jaula-abierta runtime of the depth channel.
|
||||
*
|
||||
* Unlike the color / type builders there is no seed math here: depth shadows reference the
|
||||
* mode-aware `--shadow-*` scale, so scaling them from a scalar would freeze mode-awareness.
|
||||
* The honest runtime knob is therefore explicit per-plane overrides — full control, no magic.
|
||||
*
|
||||
* `ActiveEidos.applyDepth(planes)` writes the result as a managed block that wins over the
|
||||
* static foundation at equal specificity. The composition is here; the DOM application lives
|
||||
* on ActiveEidos, matching `applyColorScheme` / `applyTypeScale`.
|
||||
*/
|
||||
import type { DepthPlane } from './config-types';
|
||||
|
||||
/** Cue keys a plane can override, mirroring the foundation emission order. */
|
||||
const DEPTH_CUES = ['surface', 'shadow', 'halo', 'z', 'blur', 'scrim'] as const;
|
||||
|
||||
/** Per-plane cue overrides — `{ overlay: { shadow, halo }, modal: { blur } }`. */
|
||||
export type DepthOverrides = Record<string, Partial<DepthPlane>>;
|
||||
|
||||
export interface BuildDepthResult {
|
||||
/** `--depth-{plane}-{cue}: value;` declarations, in plane / cue order. */
|
||||
readonly variables: readonly string[];
|
||||
}
|
||||
|
||||
/** Build `--depth-{plane}-{cue}` override declarations from per-plane cue overrides. */
|
||||
export function buildDepth(planes: DepthOverrides): BuildDepthResult {
|
||||
const variables: string[] = [];
|
||||
for (const [plane, cues] of Object.entries(planes)) {
|
||||
for (const cue of DEPTH_CUES) {
|
||||
const value = cues[cue];
|
||||
if (value !== undefined) variables.push(`--depth-${plane}-${cue}: ${value};`);
|
||||
}
|
||||
}
|
||||
return { variables };
|
||||
}
|
||||
|
||||
/** Flatten a built depth retune to CSS declaration lines (for a managed `:root` block). */
|
||||
export function depthDeclarations(result: BuildDepthResult): readonly string[] {
|
||||
return result.variables;
|
||||
}
|
||||
Loading…
Reference in new issue