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