D-BG.1 firmó la absorción y el borrado el 2026-08-17, pero el borrado exigía orden explícita del autor y no la tenía; llegó hoy. Se van cinco ficheros: `eidos/components/backdrop/` entero —`backdrop.css`, `backdrop.svelte`, `index.ts`, `types.ts`— y su morfo `morfo/components/backdrop.ts`. Con `git rm`, no con `rm`, para que el índice lo registre. El censo se repitió justo antes de tocar nada, no se dio por bueno el de ayer: ningún import del componente ni del morfo fuera de su propia carpeta, no lo exporta el índice de eidos, no aparece en ningún índice de morfos, sin langs, sin demo, y ningún `import.meta.glob` que lo cargara por convención. Los gates lo confirman por aritmética, que es mejor que por ausencia de ruido: `morfo:check` pasa de 168 morfos a 167 y de 8 saltados sin demo a 7 — exactamente uno, el que se fue. `check` conserva sus 72 errores preexistentes y no menciona backdrop en ninguno (el recuento de ficheros baja de 6985 a 6981). vitest de `eidos` + `morfo` 653/654, con el rojo de siempre (`skin-media-player`). `docs:check` 0/635. `smoke` 320/320. Lo que NO se borra son las citas. La §Baseline del README de `Background` sigue nombrando a `Backdrop` —ahora fechada, con la nota de que sus cuatro tramas (`glow · mesh · grid · dots`), su máscara de desvanecido y su caída bajo `prefers-contrast` se migraron valor por valor, y de que la historia guarda el original— porque esa fila explica algo que el código ya no puede: por qué este componente se llama `Background` y no `Backdrop`. El nombre colisionaba con el velo modal (MUI, Vuetify, y el propio archetype `overlay`), y esa colisión es la razón del nombre que hoy llevan `data-background`, `--background-*` y `Background.Video`. Con esto el eje queda cerrado: las cuatro firmas del autor ejecutadas, la verificación en navegador completa —travel, 60 fps, reflow y la rama `@supports not`— y el paseo A–H registrado. Vivo sólo queda lo que pertenece a otros ejes: `Ambient` honrando la pausa (del pack) y el puerto de estado para `<video>`. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>alpha-0.1-background
parent
4a9315d977
commit
f7be59cdcf
@ -1,100 +0,0 @@
|
|||||||
/*
|
|
||||||
* Backdrop recipe — paints the decoration in a `::before` behind the content.
|
|
||||||
*
|
|
||||||
* Everything derives from tokens: the accent from the `data-color` palette
|
|
||||||
* forward (`--palette-solid`), the rules from `--color-border-*`, the mesh from
|
|
||||||
* the canonical `--gradient-aurora`. No hand-picked colour, so a theme / palette
|
|
||||||
* swap carries the decoration with it.
|
|
||||||
*
|
|
||||||
* Public tokens: `--backdrop-*`. Internal: `--_backdrop-*`.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[data-box][data-backdrop] {
|
|
||||||
--_backdrop-tint: var(--backdrop-tint, var(--palette-solid, var(--color-primary-solid)));
|
|
||||||
--_backdrop-rule: var(--backdrop-rule, var(--color-border-subtle));
|
|
||||||
--_backdrop-cell: var(--backdrop-cell, 2.5rem);
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
/* Own stacking context, so the `z-index: -1` layer can never slip behind an
|
|
||||||
ancestor's background. */
|
|
||||||
isolation: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-box][data-backdrop]::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
background-repeat: repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── glow — the hero halo ────────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-pattern='glow']::before {
|
|
||||||
background-image: radial-gradient(
|
|
||||||
var(--backdrop-glow-size, 60% 55%) at var(--backdrop-glow-at, 50% 0%),
|
|
||||||
color-mix(in oklch, var(--_backdrop-tint) var(--backdrop-glow-strength, 28%), transparent),
|
|
||||||
transparent 70%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── mesh — the canonical aurora, derived from the theme's own roles ─────── */
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-pattern='mesh']::before {
|
|
||||||
background-image: var(--gradient-aurora);
|
|
||||||
opacity: var(--backdrop-mesh-opacity, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── grid — ruled hairlines ──────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-pattern='grid']::before {
|
|
||||||
background-image:
|
|
||||||
linear-gradient(to right, var(--_backdrop-rule) 1px, transparent 1px),
|
|
||||||
linear-gradient(to bottom, var(--_backdrop-rule) 1px, transparent 1px);
|
|
||||||
background-size: var(--_backdrop-cell) var(--_backdrop-cell);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── dots — a dot matrix ─────────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-pattern='dots']::before {
|
|
||||||
background-image: radial-gradient(
|
|
||||||
circle at 1px 1px,
|
|
||||||
var(--_backdrop-rule) var(--backdrop-dot-size, 1.5px),
|
|
||||||
transparent 0
|
|
||||||
);
|
|
||||||
background-size: var(--_backdrop-cell) var(--_backdrop-cell);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-pattern='none']::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── fade — so a pattern never hard-cuts into the next section ───────────────
|
|
||||||
* The mask reads only the ALPHA channel, so its stops are a stencil, not a
|
|
||||||
* colour choice: `currentColor` is the opaque end and `transparent` the clear
|
|
||||||
* one. (A hardcoded `#000` here would be a raw colour literal for no reason —
|
|
||||||
* the recipe contract is right to reject it.)
|
|
||||||
*/
|
|
||||||
|
|
||||||
[data-box][data-backdrop][data-fade]::before {
|
|
||||||
-webkit-mask-image: radial-gradient(
|
|
||||||
var(--backdrop-fade-size, 75% 75%) at var(--backdrop-fade-at, 50% 35%),
|
|
||||||
currentColor 40%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
mask-image: radial-gradient(
|
|
||||||
var(--backdrop-fade-size, 75% 75%) at var(--backdrop-fade-at, 50% 35%),
|
|
||||||
currentColor 40%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Decoration is the first thing to drop when the user asks for less: keep the
|
|
||||||
* structural patterns, lose the saturated bloom that can hurt contrast. */
|
|
||||||
@media (prefers-contrast: more) {
|
|
||||||
[data-box][data-backdrop][data-pattern='glow']::before,
|
|
||||||
[data-box][data-backdrop][data-pattern='mesh']::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
/**
|
|
||||||
* Eidos `<Backdrop>` — a decorative layer behind a section's content. The
|
|
||||||
* depth the layout primitives alone cannot give.
|
|
||||||
*
|
|
||||||
* <Backdrop pattern="glow">
|
|
||||||
* <Section>…</Section>
|
|
||||||
* </Backdrop>
|
|
||||||
*
|
|
||||||
* <Backdrop pattern="grid" fade>…</Backdrop>
|
|
||||||
*
|
|
||||||
* It WRAPS its content (rather than asking the consumer to position a sibling
|
|
||||||
* layer) so a block can compose it without owning any CSS: the recipe paints a
|
|
||||||
* `::before` behind, `pointer-events: none`, from tokens only — the accent via
|
|
||||||
* the `data-color` palette forward, the mesh from `--gradient-aurora`.
|
|
||||||
*/
|
|
||||||
import './backdrop.css';
|
|
||||||
import Box from '../box/box.svelte';
|
|
||||||
import { resolveComponentColor } from '$uix/eidos/lib/component-color';
|
|
||||||
import { composeInlineStyle } from '$uix/eidos/lib/style';
|
|
||||||
import type { BackdropProps } from './types';
|
|
||||||
|
|
||||||
let {
|
|
||||||
pattern = 'glow',
|
|
||||||
color = 'primary',
|
|
||||||
fade = true,
|
|
||||||
style,
|
|
||||||
class: className,
|
|
||||||
children,
|
|
||||||
...restProps
|
|
||||||
}: BackdropProps = $props();
|
|
||||||
|
|
||||||
// A canonical role / scale goes to `data-color` (the palette forward resolves
|
|
||||||
// it); a raw CSS value is seeded as `--color-custom` — the shared treatment
|
|
||||||
// every coloured recipe uses.
|
|
||||||
const colorAttrs = $derived(resolveComponentColor(color));
|
|
||||||
const mergedStyle = $derived(composeInlineStyle(style, colorAttrs.customStyle));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
{...restProps}
|
|
||||||
class={className}
|
|
||||||
style={mergedStyle}
|
|
||||||
data-backdrop=""
|
|
||||||
data-pattern={pattern}
|
|
||||||
data-fade={fade ? '' : undefined}
|
|
||||||
data-color={colorAttrs.dataColor}
|
|
||||||
data-color-custom={colorAttrs.isCustom ? '' : undefined}
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</Box>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
// Backdrop — a decorative layer (glow · mesh · grid · dots) behind content.
|
|
||||||
//
|
|
||||||
// import { Backdrop } from '$uix/eidos/components/backdrop';
|
|
||||||
//
|
|
||||||
// <Backdrop pattern="glow"><Section>…</Section></Backdrop>
|
|
||||||
// <Backdrop pattern="grid" fade>…</Backdrop>
|
|
||||||
// <Backdrop pattern="mesh" color="teal">…</Backdrop>
|
|
||||||
//
|
|
||||||
// Wraps its content and paints behind it from tokens only (accent via the
|
|
||||||
// `data-color` palette forward, mesh from `--gradient-aurora`), so a theme or
|
|
||||||
// palette swap carries the decoration along. Every Box prop still applies.
|
|
||||||
import Backdrop from './backdrop.svelte';
|
|
||||||
|
|
||||||
export { Backdrop };
|
|
||||||
export default Backdrop;
|
|
||||||
export type { BackdropProps, BackdropPattern } from './types';
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import type { Snippet } from 'svelte';
|
|
||||||
import type { BoxProps } from '../box/types';
|
|
||||||
import type { ComponentColorProp } from '$uix/eidos/lib/types';
|
|
||||||
|
|
||||||
/** The decorative treatment painted behind the content. */
|
|
||||||
export type BackdropPattern = 'none' | 'glow' | 'mesh' | 'grid' | 'dots';
|
|
||||||
|
|
||||||
export type BackdropProps = BoxProps & {
|
|
||||||
/**
|
|
||||||
* Which decoration to paint:
|
|
||||||
* - `glow` — a soft radial bloom of the accent, top-centred (the hero halo)
|
|
||||||
* - `mesh` — the canonical `--gradient-aurora` mesh, derived from the theme roles
|
|
||||||
* - `grid` — a ruled grid of hairlines
|
|
||||||
* - `dots` — a dot matrix
|
|
||||||
* @default 'glow'
|
|
||||||
*/
|
|
||||||
pattern?: BackdropPattern;
|
|
||||||
/** Accent the `glow` tints with — full colour system. @default 'primary' */
|
|
||||||
color?: ComponentColorProp;
|
|
||||||
/**
|
|
||||||
* Fade the decoration out towards the edges so it never hard-cuts against the
|
|
||||||
* next section. @default true
|
|
||||||
*/
|
|
||||||
fade?: boolean;
|
|
||||||
children?: Snippet;
|
|
||||||
};
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import type { Morfo } from '../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Backdrop — a decorative background layer behind a section's content (glow,
|
|
||||||
* mesh, grid, dots). A visual primitive, like `aspect-ratio`, `mockup` and
|
|
||||||
* `reveal`.
|
|
||||||
*
|
|
||||||
* Eidos-native: the recipe paints the layer in a `::before` pseudo (no extra
|
|
||||||
* node, nothing focusable, `pointer-events: none`) derived from tokens — the
|
|
||||||
* accent from the `data-color` palette forward, the rules from
|
|
||||||
* `--color-border-*`, the mesh from the canonical `--gradient-aurora`. The
|
|
||||||
* `pattern` axis is an eidos wrapper attr (`data-pattern`): it selects a
|
|
||||||
* treatment and crosses into no runtime (Backdrop has no soma).
|
|
||||||
*
|
|
||||||
* Justification for the 0-event surface: a Backdrop is decoration — it does not
|
|
||||||
* commit, emerge or react. Adding events would manufacture semantics it doesn't
|
|
||||||
* carry. Same justification as `mockup.ts` / `reveal.ts`.
|
|
||||||
*/
|
|
||||||
export const backdropMorfo = {
|
|
||||||
name: 'Backdrop',
|
|
||||||
kebab: 'backdrop',
|
|
||||||
scope: ['eidos'],
|
|
||||||
parts: [
|
|
||||||
{
|
|
||||||
name: 'Provider',
|
|
||||||
kebab: 'provider',
|
|
||||||
archetype: 'provider',
|
|
||||||
kind: 'public',
|
|
||||||
defaultElement: 'div',
|
|
||||||
optional: false,
|
|
||||||
data: [],
|
|
||||||
aria: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
} as const satisfies Morfo;
|
|
||||||
Loading…
Reference in new issue