{#snippet plusIcon()} {/snippet} {#snippet arrowIcon()} {/snippet}

Grafito

Tema para activeUIX sobre el sistema de theming de Eidos. Primario carbón monocromo, tipografía Inter, paleta derivada de Untitled UI (31 escalas), radios de 8px, sombras en capas. Los 3 roles de jerarquía aliasan la paleta; los 6 intents auto-derivan por la convención del libro — sin inventar variants ni roles nuevos.

Carbon · #1F2024 Inter 9 roles · 5 variants Light · Dark · Density · Scaling

Fundamentos

Color

Tres capas: la Paleta (escalas, directamente usables) → los Roles de jerarquía la aliasan → los Intents auto-derivan de la paleta por la convención del libro (identidad = step 9). Los componentes pueden override su color a cualquier escala. Los 9 roles son canon fijo; el tema solo trae la paleta y mapea la jerarquía.

Paleta · escalas de 12 pasos

Cada paso es directamente usable — p. ej. var(--scale-teal-10).

{#each THEME_SCALES as sc}
{sc.label} {hex[`${sc.name}-9`] ?? `--scale-${sc.name}-9`}
{#each COLOR_STEPS as step}
{step}
{/each}
{/each}
1–2 fondos 3–5 componente 6–8 bordes 9–10 sólido 11–12 texto

Roles de jerarquía · alias explícito a una escala

{#each [{ role: 'primary', label: 'Primary', scale: 'carbon' }, { role: 'secondary', label: 'Secondary', scale: 'violet' }, { role: 'tertiary', label: 'Tertiary', scale: 'blue' }] as h}
{h.label} alias → {h.scale}
{/each}

Intents · auto-derivados de la paleta (convención del libro)

{#each THEME_INTENTS as it}
{it.label} auto → {it.scale}
{/each}

Superficies, contenido y bordes

surfacedefault
surfaceraised
surfacemuted
contentprimary
contentsecondary
borderstrong

Tipografía

Inter para display y texto. Named styles del sistema (hero → caption + code).

{#each TYPE_STYLES as t}
{t.label} --style-{t.key}
{t.sample}
{/each}

Espaciado, radio, sombra y tamaño

Primitivas estables del tema. La escala base es de 4px; controles a 8px de radio.

Spacing

{#each SPACE as k}
--space-{k}
{/each}

Radius

{#each RADII as k}
{k}
{/each}

Sizes · control-height

{#each SIZES as k}
{k}
var(--size-{k}-control-height)
{/each}

Shadows

{#each SHADOWS as k}
shadow-{k}
{/each}

Densidad & Scaling

Dos ejes ortogonales que se multiplican. Cámbialos en la barra superior y mira cómo reaccionan estas métricas y el specimen en vivo.

Densidad · {axis.density}

Ritmo de layout (espacio) + altura de control. La tipografía NO cambia con la densidad.

--space-4{axis.space4 || '—'}
--control-height-md{axis.ctrlMd || '—'}

Scaling · {axis.scaling}%

Zoom global (paridad Radix) — escala TODO proporcionalmente, incluida la tipografía. No toca radio, borde ni sombra.

--font-size-md{axis.fontMd || '—'}
--space-4 × scaling{axis.space4 || '—'}

Specimen en vivo

v2.4

Texto de cuerpo: escala con scaling, estable bajo densidad.

Componentes

Botones

6 variants · 9 roles · 5 tamaños · estados. El primario es carbón; el texto sobre sólidos claros resuelve a oscuro por luminancia.

Variants

{#each BTN_VARIANTS as v} {/each}

Roles e intents

Tamaños

{#each BTN_SIZES as sz} {/each}

Con icono y estados

Badges

Pills de estado en los 4 chip-variants y la paleta completa de roles.

Colores (soft)

{#each BADGE_COLORS as c} {c} {/each}

Variants

{#each CHIP_VARIANTS as v} {v} {/each} Activo {}}>Filtro

Controles de formulario

Field, Select, Checkbox, Radio, Switch y Slider con el aspecto del tema.

Email Usaremos esto para iniciar sesión. Fruta favorita

Selección

Plan

Switch & Slider

Volumen · {volume[0]}%

Feedback y estado

Banners por intent, progreso, avatares y tarjetas.

Tu prueba gratuita termina en 7 días. Mejora tu plan cuando quieras. Cambios guardados correctamente. Tu método de pago caduca pronto. No se pudo procesar el pago. Revisa tus datos.

Progress

Subiendo archivo

Avatares

OV AM JV SK
Plan Pro Todo lo del Starter, más colaboración ilimitada. $29 / mes

Tabs

Variantes line y pills. Indicador animado, foco con anillo carbón, activo en color primario.

Line

Overview Activity Settings Resumen de la cuenta y métricas clave del mes. Registro de actividad reciente del equipo. Preferencias de notificación y seguridad.

Pills

Account Team Billing Datos de perfil y sesión. Miembros e invitaciones. Plan, método de pago y facturas.

Disclosure

Accordion (outline) — apertura única, chevron y foco coherentes con el tema.

¿Qué es activeUIX? Un sistema de UI en cuatro capas — morfo, soma, sema y eidos — donde el theming vive en eidos y retinta los roles canónicos. ¿Cómo se crea un tema? Con ActiveEidos.create({ config }): se remapean los 9 roles a paletas y se ajustan primitivas estables (tipografía, radio, sombra). ¿Y el modo oscuro? El tema declara escalas light y dark; el primario carbón se invierte solo gracias al slot contrast.

Toggles

Toggle suelto y toggle-group (segmentado, single + multiple). Activo en color primario.

Toggle

Bold Outline Ghost Disabled

Toggle group · segmentado

B I U Izq. Centro Der.

Toolbar

Barra de herramientas con botones, separador y grupo segmentado.

Deshacer Rehacer B I U Compartir

Overlays

Popover y dialog — paneles portaleados con la superficie, borde y sombra del tema.

Abrir popover Dimensiones Ajusta el ancho del panel lateral.
Cerrar
Abrir dialog ¿Eliminar proyecto? Esta acción es permanente y no se puede deshacer. Cancelar

Sistema

Semántica (sema)

La capa perceptual está activa: cada interacción emite una señal con familia + intent que se materializa en sonido (earcon), haptic (Vibration API) y una reacción visual data-event-* teñida por el intent del tema. Pulsa los botones — en un navegador con gesto de usuario sonarán.

Intents perceptuales

El motor (EngineSemantic) se cablea en el layout vía createActiveUix({ events: { sound, haptic, components } }) con los packs sema por componente. Sonido y haptic son opt-in; aquí están encendidos.