/* === Fuente: c0010-j0ui-reset.css === */
/* =============================================================================
c0010-j0ui-reset.css
RESET DE SCOPE — Aislamiento CSS para el componente j0ui.
Scope canónico: .j0
· En la web app: aplicar a o al contenedor raíz de la app.
· En la extensión Chrome: aplicar al contenedor inyectado en el DOM ajeno
(evita herencia del host).
· En el widget embebido: ídem extensión.
El reset está en .j0 (no en body) para que funcione igual en los tres contextos.
Si la web app quiere reset en body, agrega class="j0" al body en el layout PHP.
============================================================================= */
.j0 {
all: initial;
font-family: var(--j0ui-font, system-ui, sans-serif);
}
.j0,
.j0 *,
.j0 *::before,
.j0 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
/* font-family: var(--j0ui-font, system-ui, sans-serif); */
}
.j0 {
/* color: var(--j0ui-text-main); */
/* line-height: 1.5; */
-webkit-font-smoothing: antialiased;
display: block;
}
/* === Fuente: c0101-j0pt-font-sizes.css === */
:root {
/* Sistema Tipográfico J0 (Escala 5 por Octava - K0) */
--j0-pt-6: 0.5rem; /* ~8px */
--j0-pt-7: 0.574rem; /* ~9px */
--j0-pt-8: 0.66rem; /* ~10.5px */
--j0-pt-9: 0.758rem; /* ~12px */
--j0-pt-10: 0.871rem; /* ~14px */
--j0-pt-11: 0.935rem; /* ~15px */
--j0-pt-12: 1rem; /* ~16px */
--j0-pt-14: 1.149rem; /* ~18px */
--j0-pt-16: 1.32rem; /* ~21px */
--j0-pt-18: 1.516rem; /* ~24px */
--j0-pt-21: 1.741rem; /* ~28px */
--j0-pt-24: 2rem; /* ~32px */
--j0-pt-28: 2.297rem; /* ~37px */
--j0-pt-32: 2.639rem; /* ~42px */
--j0-pt-36: 3.031rem; /* ~48px */
--j0-pt-42: 3.482rem; /* ~56px */
--j0-pt-48: 4rem; /* ~64px */
--j0-pt-56: 4.595rem; /* ~74px */
--j0-pt-64: 5.278rem; /* ~84px */
--j0-pt-72: 6.063rem; /* ~97px */
--j0-pt-84: 6.964rem; /* ~111px */
--j0-pt-96: 8rem; /* ~128px */
--j0-pt-112: 9.19rem; /* ~147px */
--j0-pt-128: 10.556rem;/* ~169px */
--j0-pt-144: 12.126rem;/* ~194px */
}
/* ─── ESCALA DUAL — complementa c0026 ───────────────────────────────────────── */
/* Escala WEB — default fuera de j0-window */
:root, .j0, HTML {
--j0ui-size-font-sm: var(--j0-pt-11, 0.935rem); /* ~15px — secundario */
--j0ui-size-font-ui: var(--j0-pt-12, 1rem);
--j0ui-size-font-lg: var(--j0-pt-14, 1.149rem); /* ~18px — subtítulos */
--j0ui-size-font-xl: var(--j0-pt-18, 1.516rem); /* ~24px — h3/h4 */
--j0ui-size-font-2xl: var(--j0-pt-24, 1.896rem); /* ~30px — h2 */
--j0ui-size-font-3xl: var(--j0-pt-30, 2.273rem); /* ~36px — h1 */
--j0ui-size-input: 42px;
--j0ui-size-header: 56px;
--j0ui-space-sm: 12px;
--j0ui-space-md: 20px;
--j0ui-space-lg: 32px;
--j0ui-success: #40c057;
}
/* Escala UI COMPACTA — dentro de j0-window */
j0-window, .j0ui-compact {
--j0ui-size-font-ui: var(--j0-pt-12, 0.935rem);
--j0ui-size-font-sm: var(--j0-pt-10, 0.871rem);
--j0ui-size-font-lg: var(--j0-pt-12, 1rem);
--j0ui-size-font-xl: var(--j0-pt-14, 1.149rem);
--j0ui-size-font-2xl: var(--j0-pt-18, 1.516rem);
--j0ui-size-font-3xl: var(--j0-pt-24, 1.896rem);
--j0ui-size-input: 26px;
--j0ui-size-header: 34px;
--j0ui-space-sm: 6px;
--j0ui-space-md: 10px;
--j0ui-space-lg: 20px;
}
/* === Fuente: c0015-j0-colorgroups.css === */
/* =============================================================================
c0015-j0-colorgroups.css
PALETA + GRUPOS + RELACIONES — EJEMPLO de Layer A / Layer B del modelo IPAX.
Requiere: c0020-j0ui-core-tokens.css (define THIS-* con su default
paper-on-ink; Core lee siempre de THIS-*, nunca de este archivo directo).
Namespace: todo bajo --j0-* (nivel IPAX, agnóstico de UI vs. editorial —
no --j0ui-*, que es namespace específico del framework de componentes).
Clases bajo .j0-* por el mismo motivo: son gramática de color, no
componentes de interfaz — deberían poder usarse igual en un artículo
editorial (.k0c) que en una ventana de j0ui.
Convención de nombrado en custom properties:
__ separa NAMESPACE → PARTE (grupo → rol: --j0-destacados__paper)
-- separa BASE → VARIANTE (entorno: --j0-naranja--fdark)
Un guion simple queda libre para usarse DENTRO de cada segmento
(--j0-naranja-osc, --j0-alto-contraste) sin ambigüedad.
ESTE ARCHIVO ES ADITIVO: si no se carga, c0020 sigue funcionando exacto
como antes (THIS-* default apunta a los relativos del tema activo). Cargar
este archivo solo agrega la posibilidad de más de un grupo y de relaciones
distintas a paper-on-ink — no cambia nada de lo que ya funciona sin él.
============================================================================= */
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL -1 — PALETA (ejemplo)
Lista plana, global, de colores con nombre. Sin rol, sin grupo, sin
validación todavía — es materia prima para los grupos de más abajo.
───────────────────────────────────────────────────────────────────────────── */
:root {
--j0-naranja: #FF6600;
--j0-naranja-osc: #CC5200;
--j0-siena-osc: #4A2C1D;
--j0-blanco-tiza: #FAF4E8;
}
/* Override por entorno — mecanismo de sufijo con variante BEM (--), no una
bandera aparte. Si un grupo no referencia la variante -dark de un color,
sigue leyendo la entrada base sin ninguna acción explícita: ESE es el link
por default entre entornos, no hace falta declararlo aparte. */
html[data-theme="dark"] {
--j0-naranja--dark: #CC5200; /* más apagado en dark, para reducir fatiga cromática */
/* --j0-siena-osc no tiene variante --dark: los grupos que lo usan en dark
siguen leyendo --j0-siena-osc tal cual. */
}
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL 0-6 — GRUPOS (ejemplo: "destacados")
Un grupo referencia entradas de la Paleta y les asigna un rol. Regla dura:
exactamente un Paper y un Ink por grupo — es lo que le permite al motor
IPAX Score saber contra qué validar todo lo demás.
───────────────────────────────────────────────────────────────────────────── */
:root {
--j0-destacados__paper: var(--j0-naranja);
--j0-destacados__ink: var(--j0-ipax-paper-x); /* blanco puro, Nivel 0 ya validado */
--j0-destacados__accent: var(--j0-siena-osc); /* mismo siena, reusado como accent acá */
}
html[data-theme="dark"] {
--j0-destacados__paper: var(--j0-naranja--dark);
/* ink y accent sin variante --dark declarada: se heredan sin cambios */
}
/* ─────────────────────────────────────────────────────────────────────────────
LAYER A — SELECCIÓN DE GRUPO
Reasigna los relativos "crudos" (--j0-ipax-paper/ink/accent) al grupo
elegido. THIS-* (definido en c0020) los vuelve a leer más abajo, siguiendo
el cascade en el punto de uso — no hace falta redeclarar THIS-* acá.
───────────────────────────────────────────────────────────────────────────── */
.j0-colorgroup--destacados {
--j0-ipax-paper: var(--j0-destacados__paper);
--j0-ipax-ink: var(--j0-destacados__ink);
--j0-ipax-accent: var(--j0-destacados__accent);
/* Este grupo no abrió accent-p/accent-i todavía — no hacía falta
(Nivel 2 es opcional hasta que un componente de adentro necesite
accent como texto en ambas direcciones). Mientras no se abran,
THIS-accent-p/i siguen heredando los del grupo "main" — ver nota
de apertura progresiva en la Especificación de Tokens. */
}
/* ─────────────────────────────────────────────────────────────────────────────
LAYER B — RELACIÓN (equivalente de this-ink/this-paper de k0)
Decide qué rol pinta fondo y cuál pinta texto, con los colores que Layer A
dejó disponibles. Nunca reasigna --j0-ipax-paper/ink/accent* directo —
regla dura, ver Implementación CSS §5.2.
───────────────────────────────────────────────────────────────────────────── */
.j0-this-paper-on-ink { /* explícito; es el default ya establecido en c0020 */
--j0-ipax-this-paper: var(--j0-ipax-paper);
--j0-ipax-this-ink: var(--j0-ipax-ink);
}
.j0-this-accent-on-paper {
--j0-ipax-this-paper: var(--j0-ipax-paper);
--j0-ipax-this-ink: var(--j0-ipax-accent-i, var(--j0-ipax-accent));
/* accent-i si el grupo lo abrió; si no, cae al accent plano del grupo —
mejor que romper, aunque no sea la validación más fina posible. */
}
.j0-this-paper-on-accent {
--j0-ipax-this-paper: var(--j0-ipax-accent);
--j0-ipax-this-ink: var(--j0-ipax-paper-x); /* text-on-accent: extremo absoluto, no relativo */
}
/* ─────────────────────────────────────────────────────────────────────────────
EJEMPLO DE USO (referencia, no aplica solo por estar en el archivo):
fondo: naranja (paper de "destacados")
texto: siena-osc (accent del mismo grupo, como texto sobre su paper)
Ambas clases son ortogonales — cero solapamiento de propiedades — así que
el orden en el HTML no importa, y no hace falta anidar dos
salvo que
la relación deba aplicarse a una región más chica que todo el grupo.
───────────────────────────────────────────────────────────────────────────── */
/* === Fuente: c0020-j0ui-core-tokens.css === */
/* =============================================================================
c0020-j0ui-core-tokens.css
LAS VARIABLES SAGRADAS (MODELO IPAX) — Definición de identidad visual.
Mecanismo de theming: SSOT único → html[data-theme]
· :root + html[data-theme="light"] = LIGHT (default)
· html[data-theme="dark"] = DARK
Niveles de Abstracción:
1. Absolutos: Valores Hex duros por paleta.
2. Relativos: Variables agnósticas (paper, ink, accent-p, accent-i).
3. THIS-* (Layer B — relación): qué rol de los relativos pinta fondo y
qué rol pinta texto. Default: paper-on-ink. Ver c0015-j0-colorgroups.css
para relaciones alternativas (accent-on-paper, paper-on-accent) y para
grupos de color adicionales al principal.
4. Core: asignación semántica para el motor j0ui — lee siempre de THIS-*,
nunca de paper/ink/accent directo. Es lo que permite que un grupo o
una relación distintos, aplicados en cualquier subárbol del DOM, se
propaguen solos sin que Core ni nada de lo que consume Core se entere.
NOTA ARQUITECTÓNICA: Los bloques temáticos están deliberadamente separados y
duplicados para permitir la edición manual directa de excepciones por tema.
NOTA DE ESTADO (2026-07): el bloque "dark" de la escala absoluta sigue
siendo, en gran parte, la inversión naive de light (swap de roles) — no
auditada por separado con el motor ergonómico (ver documento "IPAX Score").
Es un stub de bootstrap válido para empezar a trabajar, no una decisión de
diseño final. FlowStyler (c3000) ya pisa varios de estos valores con
colores autorados a mano — ese es el camino correcto para ir saliendo del
stub, tema por tema, campo por campo.
============================================================================= */
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL 1: ESCALAS ABSOLUTAS IPAX
───────────────────────────────────────────────────────────────────────────── */
:root {
/* DEFAULT LIGHT PALETTE*/
/* Tricontrast purple for debugging */
--j0-absolute-light-paper-x: #FFFFFF;
--j0-absolute-light-paper: #FAF4FD;
--j0-absolute-light-accent-p: #E15CFF;
--j0-absolute-light-accent: #C100FA;
--j0-absolute-light-accent-i: #8800B6;
--j0-absolute-light-ink: #310A40;
--j0-absolute-light-ink-x: #000000;
/* Greenish Blue */
/* https://icograma.com/ipax/?p=ffffff-000000-F2F2F2-61DDFF-007C9E-005066-1F1F1F */
/* --j0-absolute-light-paper-x: #FFFFFF;
--j0-absolute-light-paper: #F2F2F2;
--j0-absolute-light-accent-p: #61DDFF;
--j0-absolute-light-accent: #007C9E;
--j0-absolute-light-accent-i: #005066;
--j0-absolute-light-ink: #1F1F1F;
--j0-absolute-light-ink-x: #000000; */
/* DEFAULT DARK PALETTE en base a valores Light */
--j0-absolute-dark-paper-x: var(--j0-absolute-light-ink-x);
--j0-absolute-dark-paper: var(--j0-absolute-light-ink);
--j0-absolute-dark-accent-p: var(--j0-absolute-light-accent-i);
--j0-absolute-dark-accent: var(--j0-absolute-light-accent);
--j0-absolute-dark-accent-i: var(--j0-absolute-light-accent-p);
--j0-absolute-dark-ink: var(--j0-absolute-light-paper);
--j0-absolute-dark-ink-x: var(--j0-absolute-light-paper-x);
}
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL 2: ESCALA RELATIVA (Agnóstica al tema)
───────────────────────────────────────────────────────────────────────────── */
:root, html[data-theme="light"] {
--j0-ipax-paper-x: var(--j0-absolute-light-paper-x);
--j0-ipax-paper: var(--j0-absolute-light-paper);
--j0-ipax-accent-p: var(--j0-absolute-light-accent-p);
--j0-ipax-accent: var(--j0-absolute-light-accent);
--j0-ipax-accent-i: var(--j0-absolute-light-accent-i);
--j0-ipax-ink: var(--j0-absolute-light-ink);
--j0-ipax-ink-x: var(--j0-absolute-light-ink-x);
}
html[data-theme="dark"] {
--j0-ipax-paper-x: var(--j0-absolute-dark-paper-x);
--j0-ipax-paper: var(--j0-absolute-dark-paper);
--j0-ipax-accent-p: var(--j0-absolute-dark-accent-p);
--j0-ipax-accent: var(--j0-absolute-dark-accent);
--j0-ipax-accent-i: var(--j0-absolute-dark-accent-i);
--j0-ipax-ink: var(--j0-absolute-dark-ink);
--j0-ipax-ink-x: var(--j0-absolute-dark-ink-x);
}
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL 3: THIS-* — LAYER B, relación por default (paper-on-ink)
Este es el ÚNICO lugar del sistema que tiene permiso de leer
--j0-ipax-paper/ink/accent* "crudos" fuera de c0021-j0-contexts.css.
Todo lo de abajo (Core) lee de acá, nunca de los relativos directo.
THIS-* son roles de CONSUMO, no alias de nombre — igual que INK/PAPER en
el ZX Spectrum eran registros de hardware (texto/fondo), no nombres de
color. --j0-ipax-this-ink SIEMPRE se consume como `color` (texto),
--j0-ipax-this-paper SIEMPRE como `background-color` (fondo),
--j0-ipax-this-accent SIEMPRE como el acento usable dentro de ese
contexto — sin importar qué valor concreto de paper/ink/accent-i/accent-p
ocupe cada rol en cada uno de los seis contextos de c0021.
Por qué exactamente tres slots, no cinco: accent-p y accent-i son
variantes de VALIDACIÓN (contra qué extremo funciona cada una), no roles
de consumo. Esa elección ya se resuelve en la clase de contexto
(c0021-j0-contexts.css) — THIS-accent recibe el valor YA resuelto para
ese contexto. Nada de lo que consume THIS-* necesita saber que accent-p/
accent-i existen.
Por qué esto no se "congela" al declararse acá: una custom property no
sustituye su var() en el momento en que se declara, lo hace en el momento
en que se consume, siguiendo el cascade de CADA elemento donde finalmente
se usa. Si un descendiente (una clase de contexto, en c0021-j0-contexts.css)
reasigna --j0-ipax-paper/ink/accent* más abajo en el árbol, todo lo que lee
THIS-* —incluido Core— ve automáticamente el valor nuevo.
───────────────────────────────────────────────────────────────────────────── */
/* Default: contexto ink-on-paper (ink es texto, paper es fondo).
El acento usable en este contexto es accent-i (validado contra paper). */
:root {
--j0-ipax-this-paper: var(--j0-ipax-paper);
--j0-ipax-this-ink: var(--j0-ipax-ink);
--j0-ipax-this-accent: var(--j0-ipax-accent-i);
}
/* ─────────────────────────────────────────────────────────────────────────────
NIVEL 4: TOKENS DEL SISTEMA (Derivados puros de THIS-* y de los relativos)
───────────────────────────────────────────────────────────────────────────── */
:root, html[data-theme="light"] {
--j0ui-core-bg-surface: var(--j0-ipax-this-paper);
/* bg-field en light: paper-x directo, sin cambios respecto del original —
no había bug reportado acá. Paper-x/Ink-x son anclas absolutas
GLOBALES del sistema (no por grupo, ver Especificación de Tokens
Nivel 0), por eso no pasan por THIS-* como el resto de esta sección. */
--j0ui-core-bg-field: var(--j0-ipax-paper-x);
--j0ui-core-border: color-mix(in srgb, var(--j0-ipax-this-ink) 18%, transparent);
--j0ui-core-text-main: var(--j0-ipax-this-ink);
--j0ui-core-text-muted: color-mix(in srgb, var(--j0-ipax-this-ink) 60%, var(--j0-ipax-this-paper));
/* accent SÓLIDO (fondo de botón primario, marca): NO depende del
contexto — sigue siendo el mismo acento de marca en cualquier caja,
invertida o no. Por eso lee del relativo directo, no de THIS-*. */
--j0ui-core-accent: var(--j0-ipax-accent);
--j0ui-core-accent-p: var(--j0-ipax-accent-p);
--j0ui-core-accent-i: var(--j0-ipax-accent-i);
/* accent USABLE EN EL CONTEXTO (texto de link, highlight): sí depende
del contexto — es lo que cambia entre accent-i/accent-p/accent-pp
según qué caja de c0021 esté activa. */
--j0ui-core-this-accent: var(--j0-ipax-this-accent);
--j0ui-core-radius: 8px;
}
html[data-theme="dark"] {
--j0ui-core-bg-surface: var(--j0-ipax-this-paper);
/* bg-field en dark: Default 10%, queda expuesto como perilla ajustable por theme, no como fórmula fija,
pero el DEFAULT no se toca sin verificar el resultado antes. */
--j0ui-core-field-lift: 10%;
--j0ui-core-bg-field: color-mix(in srgb, var(--j0-ipax-this-paper) calc(100% - var(--j0ui-core-field-lift)), var(--j0-ipax-this-ink) var(--j0ui-core-field-lift));
--j0ui-core-border: color-mix(in srgb, var(--j0-ipax-this-ink) 10%, transparent);
--j0ui-core-text-main: var(--j0-ipax-this-ink);
--j0ui-core-text-muted: color-mix(in srgb, var(--j0-ipax-this-ink) 60%, var(--j0-ipax-this-paper));
--j0ui-core-accent: var(--j0-ipax-accent);
--j0ui-core-accent-p: var(--j0-ipax-accent-p);
--j0ui-core-accent-i: var(--j0-ipax-accent-i);
--j0ui-core-this-accent: var(--j0-ipax-this-accent);
--j0ui-core-radius: 8px;
}
/* === Fuente: c0021-j0-contexts.css === */
/* =============================================================================
c0021-j0-contexts.css
LOS SEIS CONTEXTOS — combinaciones canónicas de IPAX, heredadas de k0
(ver section-contexts.php). Layer B: qué rol pinta fondo, qué rol pinta
texto, con los colores que estén activos (relativos de tema, o los de un
grupo si c0021 se usa junto con un mecanismo de grupos en userland).
Requiere: c0020-j0ui-core-tokens.css (define THIS-* con su default
ink-on-paper; Core lee siempre de THIS-*, nunca de los relativos directo).
NOMENCLATURA: A-on-B significa A es TEXTO, B es FONDO. "paper-on-ink" es
el NEGATIVO de "ink-on-paper" (texto claro sobre fondo oscuro) — no es
sinónimo ni default de nada.
THIS-ink SIEMPRE se consume como texto, THIS-paper SIEMPRE como fondo,
THIS-accent SIEMPRE como el acento usable dentro de esa caja — el nombre
del slot es el ROL (herencia ZX Spectrum INK/PAPER), no el color que hoy
le toca ocupar. Por eso "paper-on-ink" reasigna el VALOR paper al ROL
this-ink, no al revés.
accent-on-accent (séptimo contexto en el k0 original, texto accent-ii
sobre fondo accent-pp) queda deliberadamente afuera — no se considera un
contexto válido para producción.
accent-pp no está definido todavía como token de primer nivel en c0020
(es una extensión opcional, ver Especificación de Tokens). Mientras no
se autore, cae a accent-p vía fallback de var() — mejor que romper.
───────────────────────────────────────────────────────────────────────────── */
/* ─── 1. ink-on-paper — DEFAULT, ya establecido en c0020, explícito acá por si se necesita reforzar tras otro contexto ─── */
.j0-ink-on-paper {
--j0-ipax-this-ink: var(--j0-ipax-ink);
--j0-ipax-this-paper: var(--j0-ipax-paper);
--j0-ipax-this-accent: var(--j0-ipax-accent-i);
}
/* ─── 2. paper-on-ink — el NEGATIVO. Texto claro sobre fondo oscuro. ─── */
.j0-paper-on-ink {
--j0-ipax-this-ink: var(--j0-ipax-paper);
--j0-ipax-this-paper: var(--j0-ipax-ink);
--j0-ipax-this-accent: var(--j0-ipax-accent-p);
}
/* ─── 3. accent-on-paper — acento como texto/link, sobre fondo claro. ─── */
.j0-accent-on-paper {
--j0-ipax-this-ink: var(--j0-ipax-accent-i);
--j0-ipax-this-paper: var(--j0-ipax-paper);
--j0-ipax-this-accent: var(--j0-ipax-accent-i);
}
/* ─── 4. accent-on-ink — acento como texto/link, sobre fondo oscuro. ─── */
.j0-accent-on-ink {
--j0-ipax-this-ink: var(--j0-ipax-accent-p);
--j0-ipax-this-paper: var(--j0-ipax-ink);
--j0-ipax-this-accent: var(--j0-ipax-accent-p);
}
/* ─── 5. paper-on-accent — bloque de acento sólido, texto claro encima
(botón primario, badge de marca). accent-i como fondo, no accent plano —
así lo define k0; validado como capaz de sostener texto claro encima. ─── */
.j0-paper-on-accent {
--j0-ipax-this-ink: var(--j0-ipax-paper);
--j0-ipax-this-paper: var(--j0-ipax-accent-i);
/* THIS-accent dentro de una caja ya-de-acento queda sin resolver acá —
necesitaría su propio token validado contra accent-i como fondo.
TODO real, no inventado: ver nota de Santiago sobre ".accent" pendiente. */
}
/* ─── 6. ink-on-accent — bloque de acento pálido, texto oscuro encima.
accent-pp (extendido, más claro que accent-p) como fondo — así lo define
k0; con fallback a accent-p si accent-pp no está autorado todavía. ─── */
.j0-ink-on-accent {
--j0-ipax-this-ink: var(--j0-ipax-ink);
--j0-ipax-this-paper: var(--j0-ipax-accent-pp, var(--j0-ipax-accent-p));
/* THIS-accent acá: mismo TODO que el contexto anterior. */
}
/* ─────────────────────────────────────────────────────────────────────────────
CONSUMO — igual que k0c.css, siempre los mismos dos roles:
color: var(--j0ui-text-main); ← lee THIS-ink vía Core
background: var(--j0ui-bg-window); ← lee THIS-paper vía Core
Ningún componente necesita saber qué contexto está activo.
───────────────────────────────────────────────────────────────────────────── */
/* === Fuente: c0022-j0ui-typography.css === */
/* =============================================================================
c0021-j0ui-typography.css
TIPOGRAFÍA BASE — Estilos aplicados a elementos semánticos HTML.
Agnóstico al producto. Scope: .j0 (hereda tokens de c0026).
Escala automática:
Fuera de j0-window → escala web (tamaños generosos, lectura cómoda)
Dentro de j0-window → escala UI (compacta, heredada de c0026)
============================================================================= */
/* ─── HEADINGS ───────────────────────────────────────────────────────────────── */
.j0 h1, .j0 h2, .j0 h3, .j0 h4, .j0 h5, .j0 h6 {
font-family: var(--j0ui-font);
color: var(--j0ui-text-main);
line-height: 1.2;
font-weight: 700;
margin: 0 0 var(--j0ui-space-sm) 0;
}
.j0 h1 { font-size: var(--j0ui-size-font-3xl); }
.j0 h2 { font-size: var(--j0ui-size-font-2xl); }
.j0 h3 { font-size: var(--j0ui-size-font-xl); font-weight: 600; }
.j0 h4 { font-size: var(--j0ui-size-font-lg); font-weight: 600; }
.j0 h5 { font-size: var(--j0ui-size-font-ui); font-weight: 600; }
.j0 h6 { font-size: var(--j0ui-size-font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
/* ─── BODY TEXT ──────────────────────────────────────────────────────────────── */
.j0 p {
font-family: var(--j0ui-font);
font-size: var(--j0ui-size-font-ui);
color: var(--j0ui-text-main);
line-height: 1.6;
margin: 0 0 var(--j0ui-space-sm) 0;
}
.j0 p:last-child { margin-bottom: 0; }
.j0 strong, .j0 b { font-weight: 700; color: var(--j0ui-text-main); }
.j0 em, .j0 i { font-style: italic; }
.j0 small {
font-size: var(--j0ui-size-font-sm);
color: var(--j0ui-text-muted);
}
/* ─── LINKS ──────────────────────────────────────────────────────────────────── */
.j0 a {
color: var(--j0ui-text-accent);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s, opacity 0.15s;
}
.j0 a:hover { opacity: 0.8; }
.j0 a:active { opacity: 0.6; }
/* ─── LISTAS ─────────────────────────────────────────────────────────────────── */
.j0 ul, .j0 ol {
font-size: var(--j0ui-size-font-ui);
color: var(--j0ui-text-main);
line-height: 1.6;
margin: 0 0 var(--j0ui-space-sm) 0;
padding-left: 1.5em;
}
.j0 li { margin-bottom: 4px; }
.j0 li:last-child { margin-bottom: 0; }
/* ─── CODE ───────────────────────────────────────────────────────────────────── */
.j0 code {
font-family: var(--j0ui-font-mono);
font-size: 0.9em;
background: var(--j0ui-bg-input);
border: 1px solid var(--j0ui-border-subtle);
border-radius: var(--j0ui-radius-sm);
padding: 1px 5px;
color: var(--j0ui-text-accent);
}
.j0 pre {
font-family: var(--j0ui-font-mono);
font-size: var(--j0ui-size-font-sm);
background: var(--j0ui-bg-input);
border: 1px solid var(--j0ui-border-subtle);
border-radius: var(--j0ui-radius);
padding: var(--j0ui-space-md);
overflow-x: auto;
margin: 0 0 var(--j0ui-space-sm) 0;
}
.j0 pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
}
/* ─── SEPARADOR ──────────────────────────────────────────────────────────────── */
.j0 hr {
border: none;
border-top: 1px solid var(--j0ui-border-subtle);
margin: var(--j0ui-space-md) 0;
}
/* ─── CLASES UTILITARIAS DE TEXTO ────────────────────────────────────────────── */
.j0ui-text-main { color: var(--j0ui-text-main) !important; }
.j0ui-text-muted { color: var(--j0ui-text-muted) !important; }
.j0ui-text-accent { color: var(--j0ui-text-accent) !important; }
.j0ui-text-danger { color: var(--j0ui-danger) !important; }
.j0ui-text-success { color: var(--j0ui-success) !important; }
.j0ui-text-sm { font-size: var(--j0ui-size-font-sm) !important; }
.j0ui-text-micro { font-size: var(--j0ui-size-font-micro) !important; }
.j0ui-text-mono { font-family: var(--j0ui-font-mono) !important; }
.j0ui-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* === Fuente: c0026-j0ui-derived-tokens.css === */
/* =============================================================================
c0026-j0ui-derived-tokens.css
TOKENS DERIVADOS — Los tokens del framework expandidos desde las variables core.
Requiere: c0020-j0ui-core-tokens.css (define las vars core).
No sabe nada de light/dark — hereda el tema desde las vars sagradas.
No hardcodea colores — todo es color-mix() o referencia a core vars.
ESCALA DUAL:
· :root, .j0 → escala WEB (página, login, formularios, artículos)
· j0-window, .j0ui-compact → escala UI COMPACTA (paleta, inspector, herramientas)
Para ajustes quirúrgicos producto-específicos: en el CSS del producto, nunca aquí.
============================================================================= */
/* ─────────────────────────────────────────────────────────────────────────────
TOKENS DE COLOR Y ESTRUCTURA — Iguales en ambas escalas
───────────────────────────────────────────────────────────────────────────── */
:root, .j0 {
/* ─── BROWSER NATIVE CONTROLS ────────────────────────────────────── */
/* Controla cómo dibuja el motor los elementos irreemplazables (calendarios, dropdowns nativos) */
--j0ui-color-scheme: light;
/* ─── TIPOGRAFÍA ─────────────────────────────────────────────────── */
--j0ui-font: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--j0ui-font-mono: ui-monospace, 'SF Mono', 'Courier New', monospace;
--j0ui-font-serif: Georgia, serif;
/* ─── BACKGROUNDS ────────────────────────────────────────────────── */
--j0ui-bg-app: color-mix(in srgb, var(--j0ui-core-bg-surface) 60%, transparent);
--j0ui-bg-window: var(--j0ui-core-bg-surface);
--j0ui-bg-acrylic: color-mix(in srgb, var(--j0ui-core-bg-surface) 90%, transparent);
--j0ui-bg-header: color-mix(in srgb, var(--j0ui-core-bg-surface) 92%, var(--j0ui-core-text-muted) );
--j0ui-bg-panel: color-mix(in srgb, var(--j0ui-core-bg-surface) 90%, var(--j0ui-core-bg-field) 10%);
--j0ui-bg-input: var(--j0ui-core-bg-field);
--j0ui-bg-input-focus: color-mix(in srgb, var(--j0ui-core-bg-field) 90%, var(--j0ui-core-text-main) 10%);
--j0ui-bg-hover: color-mix(in srgb, var(--j0ui-core-text-main) 7%, transparent);
/* El Active de componentes efímeros usa el Acento SÓLIDO — es fondo con
texto encima, no texto sobre paper. accent-i estaba mal acá: es la
variante validada como TEXTO, no como fondo. */
--j0ui-bg-active: var(--j0ui-core-accent);
/* ─── BORDES ─────────────────────────────────────────────────────── */
--j0ui-border-window: var(--j0ui-core-border);
--j0ui-border-window-active: color-mix(in srgb, var(--j0ui-core-border) 50%, var(--j0ui-core-text-main) 50%);
--j0ui-border-input: color-mix(in srgb, var(--j0ui-core-border) 130%, transparent);
--j0ui-border-input-focus: var(--j0ui-core-this-accent);
--j0ui-border-subtle: color-mix(in srgb, var(--j0ui-core-border) 50%, transparent);
/* ─── TEXTO ──────────────────────────────────────────────────────── */
--j0ui-text-main: var(--j0ui-core-text-main);
--j0ui-text-secondary: color-mix(in srgb, var(--j0ui-core-text-main) 80%, var(--j0ui-core-text-muted) 20%);
--j0ui-text-muted: var(--j0ui-core-text-muted);
/* El texto de acento sigue el contexto activo (c0021) — en ink-on-paper
resuelve a accent-i, en paper-on-ink a accent-p, etc. Ya no es un
valor fijo. */
--j0ui-text-accent: var(--j0ui-core-this-accent);
/* Links (Aislados del texto acentuado base para control semántico) */
--j0ui-text-link: var(--j0ui-core-this-accent);
--j0ui-text-link-hover: color-mix(in srgb, var(--j0ui-core-this-accent) 80%, var(--j0ui-core-text-main) 20%);
/* El texto SOBRE áreas de Acento Sólido requiere extremos IPAX absolutos para contrastar */
--j0ui-text-on-accent: var(--j0-ipax-paper-x);
--j0ui-text-on-danger: var(--j0-ipax-paper-x);
--j0ui-text-on-success: var(--j0-ipax-paper-x);
/* warning es ámbar (#ffaa00) — contra paper-x (blanco) no llega a 4.5:1.
Validado contra el extremo opuesto, no por simetría con los otros dos. */
--j0ui-text-on-warning: var(--j0-ipax-ink-x);
/* ─── SOMBRAS ────────────────────────────────────────────────────── */
--j0ui-shadow-window: 0 10px 30px rgba(0, 0, 0, 0.25);
--j0ui-shadow-window-active: 0 16px 40px rgba(0, 0, 0, 0.5);
--j0ui-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.25);
--j0ui-shadow-item: 0 1px 2px rgba(0, 0, 0, 0.5);
--j0ui-shadow-item-active: 0 1px 1px rgba(0, 0, 0, 0.5);
--j0ui-shadow-track: inset 0px 1px 1px rgba(0, 0, 0, 0.25);
/* ─── ACENTOS SEMÁNTICOS (Sólido vs Relativo) ────────────────────── */
--j0ui-accent: var(--j0ui-core-accent); /* Acento SÓLIDO (Brand) */
--j0ui-accent-hover: color-mix(in srgb, var(--j0ui-core-accent) 85%, #000 15%);
--j0ui-accent-bg: color-mix(in oklch, var(--j0ui-core-accent-p) 15%, transparent);
--j0ui-danger: #ff4444;
--j0ui-danger-hover: color-mix(in srgb, var(--j0ui-danger) 85%, #000 15%);
--j0ui-danger-soft: color-mix(in srgb, var(--j0ui-danger) 12%, transparent);
--j0ui-warning: #ffaa00;
--j0ui-warning-soft: color-mix(in srgb, var(--j0ui-warning) 12%, transparent);
--j0ui-success: #40c057;
--j0ui-success-hover: color-mix(in srgb, var(--j0ui-success) 85%, #000 15%);
--j0ui-success-soft: color-mix(in srgb, var(--j0ui-success) 12%, transparent);
/* ─── TOKENS DE COMPONENTE ───────────────────────────────────────── */
--j0ui-slider-track-bg: var(--j0ui-core-bg-field);
--j0ui-slider-thumb: var(--j0ui-core-text-main);
/* --j0ui-slider-thumb: var(--j0ui-core-text-muted); */
/* --j0ui-slider-thumb: color-mix(in srgb, var(--j0ui-text-muted) 80%, transparent ); */
--j0ui-slider-thumb-border: rgba(0, 0, 0, 0.3);
--j0ui-tab-indicator: var(--j0ui-core-this-accent);
--j0ui-window-inactive-opacity: 0.75;
--j0ui-badge-bg: color-mix(in srgb, var(--j0ui-core-text-main) 12%, transparent);
--j0ui-badge-text: var(--j0ui-core-text-muted);
}
html[data-theme="dark"]{
/* ─── BROWSER NATIVE CONTROLS (DARK THEME) ───────────────────────── */
--j0ui-color-scheme: dark;
/* ─── SOMBRAS más fuertes para modo oscuro ───────────────────────── */
--j0ui-shadow-window: 0 10px 30px rgba(0, 0, 0, 0.5);
--j0ui-shadow-window-active: 0 16px 40px rgba(0, 0, 0, 0.75);
--j0ui-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.5);
--j0ui-shadow-item: 0 1px 2px rgba(0, 0, 0, 0.75);
--j0ui-shadow-item-active: 0 1px 1px rgba(0, 0, 0, 0.75);
--j0ui-shadow-track: inset 0px 1px 1px rgba(0, 0, 0, 0.5);
/* Ajustes físicos para percepción en fondos oscuros */
--j0ui-slider-track-bg: color-mix(in srgb, var(--j0ui-core-bg-field) 95%, var(--j0ui-core-text-main));
}
/* ─────────────────────────────────────────────────────────────────────────────
ESCALA WEB — Página, login, formularios, artículos
Default: fuera de j0-window
───────────────────────────────────────────────────────────────────────────── */
:root, .j0 {
/* Métricas físicas web */
--j0ui-size-input: 42px;
--j0ui-size-header: 56px;
--j0ui-radius: var(--j0ui-core-radius, 8px);
--j0ui-radius-sm: calc(var(--j0ui-core-radius, 8px) / 1.6);
--j0ui-space-sm: 12px;
--j0ui-space-md: 20px;
/* Espaciado semántico web — usado por c1720 y artículos */
--j0-space-xs: 0.5rem; /* 8px */
--j0-space-sm: 0.75rem; /* 12px */
--j0-space-md: 1.25rem; /* 20px */
--j0-space-lg: 2rem; /* 32px */
--j0-space-xl: 3rem; /* 48px */
--j0-space-2xl: 5rem; /* 80px */
}
/* ─────────────────────────────────────────────────────────────────────────────
ESCALA UI COMPACTA — Dentro de j0-window o con .j0ui-compact
Paleta, inspector, herramientas, ventanas flotantes
───────────────────────────────────────────────────────────────────────────── */
j0-window,
.j0ui-compact {
/* Métricas físicas compactas */
--j0ui-size-input: 26px;
--j0ui-size-header: 34px;
--j0ui-radius: calc(var(--j0ui-core-radius, 8px) * 0.75);
--j0ui-radius-sm: calc(var(--j0ui-core-radius, 8px) / 2.5);
--j0ui-space-sm: 6px;
--j0ui-space-md: 10px;
}
/* ─────────────────────────────────────────────────────────────────────────────
VENTANA INACTIVA
───────────────────────────────────────────────────────────────────────────── */
.j0ui-window-inactive {
--j0ui-text-main: var(--j0ui-text-secondary);
--j0ui-text-secondary: var(--j0ui-text-muted);
--j0ui-border-window: var(--j0ui-border-subtle);
--j0ui-bg-header: var(--j0ui-bg-panel);
opacity: var(--j0ui-window-inactive-opacity);
}
/* === Fuente: c0027-j0ui-browser-chrome.css === */
/* =============================================================================
c0027-j0ui-browser-chrome.css
CAPA "OS" — Estandarización de componentes nativos del navegador.
Evita que Chrome/Safari inyecten fondos blancos, barras de sistema
o destellos nativos que rompan la identidad del framework.
============================================================================= */
/*
1. ROOT VIRTUAL Y W3C ESTÁNDAR
Se aplica a :root o al contenedor inyectado (.j0)
*/
:root, .j0 {
/* ─── SCROLLBAR tokens: en base a SLIDERS ────────────────────────────── */
--j0ui-scrollbar-track-bg: var(--j0ui-bg-window);
--j0ui-scrollbar-thumb: color-mix(in srgb, var(--j0ui-text-muted) 25%, transparent);
--j0ui-scrollbar-thumb-hover: color-mix(in srgb, var(--j0ui-text-muted) 60%, var(--j0ui-core-accent));
--j0ui-scrollbar-thumb-active: var(--j0ui-scrollbar-thumb-hover);
/* Fuerza los controles internos (calendarios, dropdowns) al esquema actual */
color-scheme: var(--j0ui-color-scheme, light);
/* Scrollbars estándar (Firefox y navegadores modernos no-Blink) */
scrollbar-color: var(--j0ui-scrollbar-thumb) var(--j0ui-scrollbar-track-bg);
scrollbar-width: thin;
/* Neutraliza el destello nativo al hacer tap en pantallas táctiles (Safari/Chrome Mobile) */
-webkit-tap-highlight-color: transparent;
}
/*
2. MOTOR WEBKIT / BLINK (Chrome, Edge, Safari)
Scopeado estrictamente a .j0 para no romper el DOM hostil si estamos inyectados.
*/
/* .j0 */
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
/* .j0 */
::-webkit-scrollbar-track {
background-color: var(--j0ui-scrollbar-track-bg);
}
/* .j0 */
::-webkit-scrollbar-thumb {
background-color: var(--j0ui-scrollbar-thumb);
/* Borde transparente para separar el thumb de los bordes del track */
border: 3px solid var(--j0ui-scrollbar-track-bg);
border-radius: 8px;
background-clip: padding-box;
}
/* .j0 */
::-webkit-scrollbar-thumb:hover {
background-color: var(--j0ui-scrollbar-thumb-hover);
}
/* .j0 */
::-webkit-scrollbar-thumb:active {
background-color: var(--j0ui-scrollbar-thumb-active);
}
/* .j0 */
::-webkit-scrollbar-corner {
background-color: var(--j0ui-scrollbar-track-bg);
}
/*
3. PARCHE AUTOFILL WEBKIT
Sobrescribe la inyección forzada de fondo blanco/amarillo en inputs autocompletados.
Usamos el token derivado --j0ui-bg-input que mapea al core de field.
*/
/*
.j0 input:-webkit-autofill,
.j0 input:-webkit-autofill:hover,
.j0 input:-webkit-autofill:focus,
.j0 input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--j0ui-bg-input) inset !important;
-webkit-text-fill-color: var(--j0ui-text-main) !important;
transition: background-color 5000s ease-in-out 0s;
}
Hack de transición infinita para demorar el re-pintado nativo
*/
/* === Fuente: c0104-j0ui-utils.css === */
/* =============================================================================
c0070-j0ui-utils.css
UTILIDADES — Visibilidad condicional por viewport y por tema.
Agnóstico al producto. Sin prefijos fs- ni ix-.
============================================================================= */
/* ─── VIEWPORT ───────────────────────────────────────────────────────────────── */
/* Ocultar en desktop lo que es solo para móvil */
@media (min-width: 768px) {
.j0ui-if-mobile { display: none !important; }
}
/* Ocultar en móvil lo que NO es para móvil */
@media (max-width: 767px) {
.j0ui-if-not-mobile { display: none !important; }
}
/* Ocultar en móvil y desktop lo que es solo para tablet */
@media (max-width: 767px), (min-width: 1025px) {
.j0ui-if-tablet { display: none !important; }
}
/* Ocultar en móvil/tablet lo que es solo para desktop */
@media (max-width: 1024px) {
.j0ui-if-desktop { display: none !important; }
}
/* Ocultar en desktop lo que NO es para desktop */
@media (min-width: 1025px) {
.j0ui-if-not-desktop { display: none !important; }
}
/* ─── TEMA ───────────────────────────────────────────────────────────────────── */
/* Ocultar elementos dark cuando el tema es light */
html[data-theme="light"] .j0-show-dark { display: none !important; }
/* Ocultar elementos light cuando el tema es dark (default) */
html:not([data-theme="light"]) .j0-show-light { display: none !important; }
/* ─── ACCESIBILIDAD GLOBAL ──────────────────────────────────────────────────── */
.j0ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
/* === Fuente: c0105-j0ui-theme-switch.css === */
/* =============================================================================
c0105-j0ui-theme-switch.css
THEME SWITCH — Toggle dark/light al estilo iOS/macOS.
Package: 0100-j0ui-core--public-web (o 0020-j0-os--public-web)
Problema: ACCIONAR
Extraído de c3220-fs-theme-switch.css (producto FlowStyler).
Agnóstico al producto — usa solo --j0ui-core-accent para el estado dark.
Uso HTML:
☀️🌙
JS: escucha click en .theme-pill y togglea html[data-theme="light"].
============================================================================= */
j0-theme-switch {
display: inline-flex;
align-items: center;
vertical-align: middle;
width: 51px;
height: 31px;
}
.theme-pill {
position: relative;
display: inline-flex;
align-items: center;
border-radius: 50px;
padding: 2px;
cursor: pointer;
user-select: none;
width: 51px;
height: 31px;
box-sizing: border-box;
transition: background 0.25s ease, border-color 0.25s ease;
}
.theme-pill:focus-visible {
outline: 2px solid var(--j0ui-core-accent);
outline-offset: 2px;
}
.pill-indicator {
position: absolute;
top: 1px;
left: 1px;
width: 27px;
height: 27px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
background 0.25s ease;
}
.pill-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 13px;
line-height: 1;
z-index: 3;
pointer-events: none;
transition: opacity 0.2s ease;
}
.pill-sun { left: 2px; }
.pill-moon { right: 2px; }
/* ─── MODO LIGHT ─────────────────────────────────────────────────────────────── */
html[data-theme="light"] .theme-pill {
background: rgba(0, 0, 0, 0.10);
border: 1px solid rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .pill-indicator { background: #ffffff; transform: translateX(0); }
html[data-theme="light"] .pill-sun { opacity: 1.0; color: #FF9500; }
html[data-theme="light"] .pill-moon { opacity: 0.3; color: rgba(0, 0, 0, 0.4); }
/* ─── MODO DARK ────────────────────────────────────────────────────── */
html:not([data-theme="light"]) .theme-pill {
background: var(--j0ui-core-accent);
border: 1px solid transparent;
}
html:not([data-theme="light"]) .pill-indicator { background: #ffffff; transform: translateX(20px); }
html:not([data-theme="light"]) .pill-sun { opacity: 0.35; color: rgba(255, 255, 255, 0.8); }
html:not([data-theme="light"]) .pill-moon { opacity: 1.0; color: #ffffff; }
/* === Fuente: c0110-j0ui-buttons.css === */
/* =============================================================================
c0110-j0ui-buttons.css
BOTONES — Sistema completo de botones j0ui.
Escala automática: web por default, compacta dentro de j0-window.
============================================================================= */
/* ─── BASE ───────────────────────────────────────────────────────────────────── */
.j0ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--j0ui-size-input);
padding: 0 var(--j0ui-space-md);
border-radius: var(--j0ui-radius-sm);
font-family: var(--j0ui-font);
font-size: var(--j0ui-size-font-ui);
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
box-shadow: var(--j0ui-shadow-item);
}
.j0ui-btn:active{
box-shadow: var(--j0ui-shadow-item-active);
transform: translateY(1px);
}
.j0ui-btn:disabled,
.j0ui-btn.is-disabled {
opacity: 0.45;
pointer-events: none;
}
/* ─── VARIANTES ──────────────────────────────────────────────────────────────── */
.j0ui-btn--primary {
background: var(--j0ui-core-accent);
color: var(--j0ui-text-on-accent);
border-color: var(--j0ui-core-accent);
}
.j0ui-btn--primary:hover {
background: color-mix(in srgb, var(--j0ui-core-accent) 85%, var(--j0ui-core-text-main) 15%);
border-color: color-mix(in srgb, var(--j0ui-core-accent) 85%, var(--j0ui-core-text-main) 15%);
}
.j0ui-btn--ghost {
background: transparent;
color: var(--j0ui-text-main);
border-color: var(--j0ui-border-input);
}
.j0ui-btn--ghost:hover {
background: var(--j0ui-bg-hover);
border-color: var(--j0ui-border-window-active);
}
.j0ui-btn--danger {
background: var(--j0ui-danger);
color: var(--j0ui-text-on-danger);
border-color: var(--j0ui-danger);
}
.j0ui-btn--danger:hover {
background: color-mix(in srgb, var(--j0ui-danger) 85%, #000 15%);
}
.j0ui-btn--outline {
background: transparent;
color: var(--j0ui-text-accent);
border-color: var(--j0ui-core-accent);
}
.j0ui-btn--outline:hover {
background: var(--j0ui-accent-bg);
}
/* ─── TAMAÑOS ────────────────────────────────────────────────────────────────── */
.j0ui-btn--sm {
height: calc(var(--j0ui-size-input) * 0.75);
padding: 0 calc(var(--j0ui-space-md) * 0.7);
font-size: var(--j0ui-size-font-sm);
}
.j0ui-btn--lg {
height: calc(var(--j0ui-size-input) * 1.25);
padding: 0 calc(var(--j0ui-space-md) * 1.5);
font-size: var(--j0ui-size-font-lg);
}
/* Ancho completo — para formularios web */
.j0ui-btn--block {
width: 100%;
}
/* ─── LOADING STATE ──────────────────────────────────────────────────────────── */
.j0ui-btn.is-loading {
opacity: 0.7;
pointer-events: none;
}
/* === Fuente: c0111-j0ui-primitives.css === */
/* =============================================================================
c0110-j0ui-primitives.css
Primer archivo del package 0110-j0ui-primitives.
Primitivas Atómicas de UI y Carga.
============================================================================= */
/* ─── GRAPHIC SPINNER ───────────────────────────────────────────────────────── */
.j0ui-spinner {
display: inline-block;
width: var(--j0ui-spinner-size, 20px);
height: var(--j0ui-spinner-size, 20px);
border: 2px solid var(--j0ui-border-subtle);
border-top-color: var(--j0ui-core-accent);
border-radius: 50%;
animation: j0ui-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes j0ui-spin {
to { transform: rotate(360deg); }
}
.j0ui-spinner--sm { --j0ui-spinner-size: 14px; }
.j0ui-spinner--lg { --j0ui-spinner-size: 32px; }
@media (prefers-reduced-motion: reduce) {
.j0ui-spinner {
animation-duration: 1.4s;
}
}
/* ─── TEXT SPINNER (GHOST TEXT) ─────────────────────────────────────────────── */
/* Mantiene el ancho y alto del texto fallback original, animando 3 puntos por encima */
.j0ui-text-spinner {
position: relative;
display: inline-flex;
align-items: center;
/* [!] FIX: Hereda dinámicamente el color de texto del elemento padre (ej. blanco en btn primario) */
color: currentColor;
opacity: 0.7; /* Opcional: lo hace ver sutilmente como "cargando" */
}
.j0ui-text-spinner::after {
content: '';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 2px;
font-weight: bold;
animation: j0ui-text-pulse 1.5s infinite steps(4, end);
}
@keyframes j0ui-text-pulse {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/* Fallback visible ante fallo total (No CSS) -> tachado nativo, pero nosotros lo ocultamos para sostener layout */
/* === Fuente: c0120-j0ui-layout.css === */
/* =============================================================================
c0120-j0ui-layout.css
LAYOUT — Container, Stack, Cluster, Split, Grid, Card, Panel.
Package: 0120-j0ui-layout--public-web
Problema: CONTENER
============================================================================= */
/* ─── CONTAINERS ─────────────────────────────────────────────────────────────── */
.j0ui-container {
width: 100%;
max-width: 680px;
margin: 0 auto;
padding: 0 var(--j0ui-space-md);
box-sizing: border-box;
}
.j0ui-container-wide {
width: 100%;
max-width: 1024px;
margin: 0 auto;
padding: 0 var(--j0ui-space-md);
box-sizing: border-box;
}
.j0ui-container-full {
width: 100%;
padding: 0 var(--j0ui-space-md);
box-sizing: border-box;
}
/* ─── CONTAINER CON ASIDE RESERVADO ──────────────────────────────────────────
Para páginas que reservan espacio a la derecha para un panel flotante
(la paleta de FlowStyler, un inspector, lo que sea) sin centrar el
contenido. Default: --j0-aside-width: 0 — el contenedor se comporta como
uno neutro (login, registro, cualquier página sin panel flotante) sin que
nadie tenga que pisar nada. El producto que sí necesita el hueco declara
su propio ancho en su propio CSS de userland — el número mágico vive ahí,
no acá.
Ejemplo de uso real (reemplaza el cálculo a mano que hoy vive en
c1721-fs-pages-2.css, .fs-article-constrained):
:root { --j0-aside-width: 320px; }