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 — la superficie de tema se VE

Browse Source 
El paso 11 del protocolo (`PLAN-theming.md` §7) llegó DESPUÉS de que estos
cinco cerraran su tokenización, así que 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.

Las cinco piezas del molde de `collapsible`, sin una sola lista escrita a
mano: el panel pregunta a `ActiveEidos.getRecipeTokens(name)`, de modo que
un token que se añada, se renombre o se caiga aparece aquí sin que nadie se
acuerde de tocar la demo. El `stage` que recibe cada panel es el nodo del
escenario que ya existía en cada fichero (`stageRef`), no uno nuevo.

Filas que lista cada panel — el número es el de claves públicas de su
bloque en `lib/recipes/base.ts`, no una cifra copiada:

  radio-cards       40
  password-field    30
  aura              37
  gradient-builder  72   (6 de ellas estructuradas: «por talla / ámbito»)
  nav-tree          18

Verificado en Chrome de verdad, abriendo la pestaña en las cinco páginas:
las tres columnas resuelven sobre el escenario vivo, cero filas sin resolver
(«—») y cero errores de consola. `npm run check`: 72 errores preexistentes,
ninguno en estos ficheros.

De paso: `gradient-builder` declaraba su `type Tab` en una línea de 101
columnas que prettier ya quería partir antes de esta sesión; al tocar esa
misma línea queda en su forma canónica y el fichero pasa a estar limpio.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 43360ad0ae
commit 99a9011dd9
5 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File

9
web/routes/uix/components/aura/+page.svelte
Unescape View File

@ -19,6 +19,7 @@
import SystemAxes from '../../lib/SystemAxes.svelte';
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
type Tab =
@ -30,6 +31,7 @@
| 'api'
| 'morfo'
| 'recipe'
| 'tokens'
| 'a11y';
let tab = $state<Tab>('live');
@ -333,6 +335,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</button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -671,6 +676,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="aura" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

20
web/routes/uix/components/gradient-builder/+page.svelte
Unescape View File

@ -20,11 +20,22 @@
import SystemAxes from '../../lib/SystemAxes.svelte';
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
type Tab =
| 'live'
| 'system'
| 'motion'
| 'sema'
| 'services'
| 'api'
| 'morfo'
| 'recipe'
| 'tokens'
| 'a11y';
let tab = $state<Tab>('live');
const sizes: GradientBuilderSize[] = ['sm', 'md', 'lg'];
@ -220,6 +231,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</button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -524,6 +538,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="gradient-builder" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

10
web/routes/uix/components/nav-tree/+page.svelte
Unescape View File

@ -7,12 +7,13 @@
import SystemAxes from '../../lib/SystemAxes.svelte';
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
// prettier-ignore
type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
const trace = new DemoTrace();
@ -391,6 +392,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
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -756,6 +760,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="nav-tree" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

10
web/routes/uix/components/password-field/+page.svelte
Unescape View File

@ -11,6 +11,7 @@
import { getActiveUix } from '$active-uix';
import { passwordStrength, SECS_PASSWORD_STRENGTH_MAX } from '$libs/secs';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
// Number of visual segments — one per canonical strength step above zero.
const STRENGTH_SEGMENTS = Array.from(
@ -18,7 +19,7 @@
(_, i) => i
);
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 uix = getActiveUix();
@ -269,6 +270,9 @@
</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</button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -718,6 +722,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="password-field" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

10
web/routes/uix/components/radio-cards/+page.svelte
Unescape View File

@ -9,10 +9,11 @@
import { compileMorfo } from '$uix/morfo';
import { radioCardsMorfo } from '@/uix/morfo/components/radio-cards';
import { page } from '$app/state';
import TokensPanel from '../../lib/TokensPanel.svelte';
const params = page.url.searchParams;
type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'a11y';
type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
let value = $state('pro');
@ -178,6 +179,9 @@
<span data-uix-tab-count>{partsList.length}p</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</button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -390,6 +394,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="radio-cards" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.