go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uix(demos): la pestaña Tokens en cinco demos — y `chart` no tenía escenario

Browse Source 
Paso 11 del protocolo (PLAN-theming.md §7) sobre cinco componentes que
cerraron su tokenización ANTES de que el paso existiera: su superficie de
tema no se veía en ninguna parte. La demo es el producto; un componente
temable cuya demo esconde sus tokens está a medio entregar.

Nada escrito a mano — el panel se deriva del contrato vivo vía
`ActiveEidos.getRecipeTokens(name)`. Mismo molde que collapsible.

Filas que lista cada panel, verificadas EN CHROME sobre localhost:5180
(pulsada la pestaña, contadas las filas, las tres columnas resueltas al
100 %: ni un solo «—» en la columna que COMPUTA sobre el escenario):

  accordion      76
  color-picker   71
  drawer         54
  popover        46
  chart          45

Cuadran una a una con las claves públicas del bloque de cada componente
en `src/uix/eidos/lib/recipes/base.ts`.

`chart` era el raro: no tenía `stageRef`, así que nace aquí — `bind:this`
en el `[data-uix-stage-area]` del escenario principal, NO en el de la
galería de presets, que lleva el mismo atributo. Los otros cuatro ya lo
tenían y conservan su nombre.

Guards. `npm run check`: 72 errores, todos preexistentes y ajenos —
ningún diagnóstico cita los cinco ficheros ni TokensPanel. Prettier: los
cinco ya fallaban `--check` en HEAD con el contenido normalizado a LF, y
el diff entre prettier(HEAD) y prettier(árbol) es EXACTAMENTE lo añadido,
o sea que las líneas nuevas ya son canónicas y no arrastro deuda ajena.
Cero errores de consola en las cinco páginas.

Queda fuera, dicho para que no se pierda: el texto de la pestaña Recipe
de `chart` sigue afirmando «No --chart-* tokens — the chart styles from
global theme tokens directly». La tokenización posterior lo dejó
obsoleto, y ahora contradice al panel de la pestaña de al lado, que
lista 45. No lo toco: es copy ajeno a este paso.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 5f00609abe
commit e423b90c5b
5 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File

10
web/routes/uix/components/accordion/+page.svelte
Unescape View File

@ -5,6 +5,7 @@
type AccordionVariant,
type AccordionType
} from '$uix/eidos/components/accordion';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { accordionMorfo } from '@/uix/morfo/components/accordion';
import { getActiveUix } from '$active-uix';
@ -13,7 +14,7 @@
const uix = getActiveUix();
const params = page.url.searchParams;
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
type Orientation = 'horizontal' | 'vertical';
@ -241,6 +242,9 @@
<span data-uix-tab-count>{events.length}</span>
</button>
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>76</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -596,6 +600,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="accordion" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

14
web/routes/uix/components/chart/+page.svelte
Unescape View File

@ -9,13 +9,16 @@
PieChart,
type PieDatum
} from '$uix/eidos/components/chart';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { chartMorfo } from '@/uix/morfo/components/chart';
import type { CurveName } from '$libs/plots';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
let stageRef = $state<HTMLElement | null>(null);
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const revenue = months.map((month, i) => ({
month,
@ -108,7 +111,7 @@
</header>
<div data-uix-stage>
<div data-uix-stage-area>
<div data-uix-stage-area bind:this={stageRef}>
<Chart data={revenue} x="month" xScale="point" y={multi ? ['revenue', 'expenses'] : 'revenue'} height={260} ariaLabel="Revenue overview">
<Chart.Grid />
<Chart.YAxis format={money} />
@ -139,6 +142,9 @@
<span data-uix-tab-count>0</span>
</button>
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>45</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -235,6 +241,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="chart" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

10
web/routes/uix/components/color-picker/+page.svelte
Unescape View File

@ -11,6 +11,7 @@
import { ColorSwatch } from '$uix/eidos/components/color-swatch';
import { PALETTE_SCALES } from '$uix/eidos/lib/types';
import { INTENTS } from '$uix/intent';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { colorPickerMorfo } from '@/uix/morfo/components/color-picker';
import { colorFieldMorfo } from '@/uix/morfo/components/color-field';
@ -22,7 +23,7 @@
const uix = getActiveUix();
const eidos = ActiveEidos.require();
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
const brand: ColorValue = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });
@ -552,6 +553,9 @@
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>71</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -1208,6 +1212,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="color-picker" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

10
web/routes/uix/components/drawer/+page.svelte
Unescape View File

@ -5,6 +5,7 @@
type DrawerDirection,
type DrawerSize
} from '$uix/eidos/components/drawer';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { drawerMorfo } from '@/uix/morfo/components/drawer';
import { resolveSignature } from '$uix/sema';
@ -12,7 +13,7 @@
const uix = getActiveUix();
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
// ── Live state ────────────────────────────────────────────────────────
@ -255,6 +256,9 @@
<span data-uix-tab-count>{events.length}</span>
</button>
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>54</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -663,6 +667,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="drawer" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

10
web/routes/uix/components/popover/+page.svelte
Unescape View File

@ -4,13 +4,14 @@
type PopoverSize
} from '$uix/eidos/components/popover';
import type { MotionPresetName } from '$uix/eidos/lib/motion/registry';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { popoverMorfo } from '@/uix/morfo/components/popover';
import { getActiveUix } from '$active-uix';
const uix = getActiveUix();
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
type Side = 'top' | 'right' | 'bottom' | 'left';
@ -225,6 +226,9 @@
<span data-uix-tab-count>{events.length}</span>
</button>
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>46</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -620,6 +624,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="popover" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.