demo(blocks): la sección tiene cromo de verdad — tema, idioma, dirección, densidad y catálogo
La crítica era exacta: no se podía cambiar a oscuro, ni de idioma, ni había
forma de moverse entre blocks. La sección arrancaba UIX y renderizaba la
página desnuda, con un comentario que decía que el modo seguía al sistema
operativo «para verificar oscuro emulando prefers-color-scheme» — cómodo para
mí, inútil para quien mira la página.
Ahora hay shell: topbar pegajosa con los ejes que de verdad mueven el
framework (idioma ES/EN/FR/DE y dirección como INTENTS de prefs, así que
llegan a langs, formatos y al AGENTS.md debug.log routes tsconfig.json
CLAUDE.md docs scripts tsconfig.tsbuildinfo
README.md node_modules src vite.config.ts
STUMBLES.md package-lock.json static web
audit package.json svelte.config.js worker.js
build plans tmp workers del documento por el camino del sistema;
densidad proyectada en :root para que la hereden también los overlays
porteados; y el conmutador de tema, que alimenta el del
ActiveEidos) y un raíl con el catálogo entero de los 27 blocks planificados,
marcando el actual y atenuando los que aún no existen. Todo persiste en
localStorage, así que una recarga te deja donde estabas.
El catálogo pasa a : raíl y galería leen la MISMA fuente, y
un block que aterriza no hay que recordarlo en dos sitios.
Las tres regiones las coloca — cromo de app-land, el papel que
hace en las docs de componentes; la regla de «sin CSS» del contrato
B es para el tier (), no para el sitio que lo enseña. Dentro
de esas regiones todo son componentes del canon.
Verificado en navegador: el botón conmuta a oscuro de verdad (fondo
oklch(0.1776 0 0)), el idioma llega a , el raíl lista los 27 y
desaparece por debajo de 64rem sin desbordes, cero errores de consola.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
/*
|
|
|
|
|
* Chrome of the /blocks section — the shell only: topbar, rail and content
|
|
|
|
|
* column. The CONTROLS inside it are canon components (ToggleGroup, Button,
|
|
|
|
|
* Link…), like the rest of the site; this file just places the three regions
|
|
|
|
|
* and paints their edges with foundation tokens.
|
|
|
|
|
*
|
|
|
|
|
* (The B contract's «no CSS» rule is about `src/uix/blocks/`, the tier itself.
|
|
|
|
|
* This is app-land chrome for the demo site, the same role `uix.css` plays for
|
|
|
|
|
* the component docs.)
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
[data-blocks-shell] {
|
|
|
|
|
min-block-size: 100dvh;
|
|
|
|
|
background: var(--color-surface-default);
|
|
|
|
|
color: var(--color-content-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-blocks-topbar] {
|
|
|
|
|
position: sticky;
|
|
|
|
|
inset-block-start: 0;
|
|
|
|
|
z-index: var(--z-index-raised);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
padding-inline: var(--space-4);
|
|
|
|
|
padding-block: var(--space-2);
|
|
|
|
|
background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
|
|
|
|
|
backdrop-filter: blur(8px);
|
|
|
|
|
border-block-end: var(--border-width) solid var(--color-border-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-blocks-body] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
min-block-size: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-blocks-rail] {
|
|
|
|
|
flex: none;
|
|
|
|
|
inline-size: 15rem;
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
border-inline-end: var(--border-width) solid var(--color-border-subtle);
|
|
|
|
|
position: sticky;
|
|
|
|
|
inset-block-start: var(--space-12);
|
|
|
|
|
align-self: start;
|
|
|
|
|
max-block-size: calc(100dvh - var(--space-12));
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overscroll-behavior: contain;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Below `lg` the rail folds away: the topbar keeps the axes, and the gallery
|
|
|
|
|
is one tap away. A demo section does not need a drawer of its own. */
|
|
|
|
|
@media (width < 64rem) {
|
|
|
|
|
[data-blocks-rail] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-blocks-content] {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* The stage — a page in miniature with its own scroll host, so a block that
|
|
|
|
|
* pins (site-header) pins against THIS box and not the viewport.
|
|
|
|
|
*
|
|
|
|
|
* It is a bare frame on purpose: a `Card` would bring its own padding (its
|
|
|
|
|
* recipe paints with `--card-padding-*`, which a `padding={0}` on the Box
|
|
|
|
|
* layer does not override), and that padding pushed a header with
|
|
|
|
|
* `offset: 0` twenty-one pixels away from the edge it was supposed to touch.
|
|
|
|
|
* A stage has to be flush.
|
|
|
|
|
*/
|
|
|
|
|
[data-blocks-stage] {
|
|
|
|
|
block-size: var(--blocks-stage-height, 460px);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
border: var(--border-width) solid var(--color-border-subtle);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
background: var(--color-surface-default);
|
|
|
|
|
}
|
