@litigiovirtual/ius-design-styles

Origen. Este paquete es el espejo publicado del paquete ius-tokens/ del proyecto Claude Design de Ius Design (el diseñador lo mantiene allá). En las specs del diseñador aparece como @litigiovirtual/ius-tokens — es ESTE paquete. No editar a mano: ver DESIGN-SYNC.md en la raíz del monorepo.

Design tokens del sistema Ius (Litigiovirtual): las variables CSS --ius-* que definen color, tipografía, espaciado, radios, tamaños de ícono, sombras/elevación y breakpoints, más la utilidad de scroll .ius-scroll.

Es la fuente de verdad de los valores del sistema. Cualquier app (Angular, React, etc.) que quiera verse "como Ius" consume este paquete y usa las variables — nunca hex/px crudos.

Qué incluye

• tokens.css — un único archivo con todas las variables --ius-* bajo :root (224 declaraciones), las clases utilitarias de tipografía (.ius-h1 … .ius-body-sm, .ius-label, .ius-overline, .ius-caption) y las utilidades de disposición (.ius-scroll, .ius-flex · .ius-stack · .ius-form-grid). Aplanado: no depende de ningún otro archivo.
• base.css — opcional. Defaults del documento (tipografía base de html/body, box-sizing: border-box, fondo de página y color de selección) escritos con los tokens. Impórtalo después de tokens.css, que es de donde lee las variables.
• icons.css — tokens de familia tipográfica (--ius-font-display/body/icon) y las clases de iconografía (.ius-icon, .ius-icon--secondary/--outline) con sus font-variation-settings. Independiente de cómo se carguen las fuentes (no trae @font-face ni @import).
• fonts.css + fonts/ — las tipografías incluidas y locales (Roboto, Rubik, Material Symbols Rounded como fuentes variables .woff2) con sus @font-face. Cero red externa: el paquete es autónomo y funciona offline.

Cubre: | Grupo | Prefijo | Ejemplos | |---|---|---| | Color (paleta + semántico) | --ius-{primary,neutral,success,info,warning,danger}-*, --ius-text-*, --ius-surface-*, --ius-stroke*, --ius-btn-* | --ius-primary-900, --ius-text-primary | | Hues categóricos (frutas) | --ius-{durazno,banano,sandia,arandano,uva,aguacate}-* | --ius-uva-500 | | Tipografía | --ius-fs-*, --ius-lh-*, --ius-fw-*, --ius-ls-* + clases .ius-h1…, .ius-label, .ius-overline | --ius-fs-base, --ius-lh-lg | | Espaciado / radios / íconos | --ius-space-*, --ius-radius-*, --ius-icon-* | --ius-space-md, --ius-radius-lg, --ius-icon-md | | Sombras / foco / motion | --ius-elevation-*, --ius-focus-ring, --ius-duration-*, --ius-ease-* | --ius-elevation-300 | | Breakpoints (para JS) | --ius-bp-* | --ius-bp-md |

Fuentes incluidas. Roboto (display), Rubik (body) y Material Symbols Rounded (íconos) vienen dentro del paquete como fuentes variables locales (fonts.css + fonts/). No hay dependencia de red: el paquete se autoabastece y funciona offline. Un único .ttf variable por familia cubre todos los pesos que usa el sistema (400 / 500 / 600 / 700 + itálicas) por interpolación del eje wght.

Instalación

npm install @litigiovirtual/ius-design-styles

Uso (Angular)

Importar una vez en el styles.scss/styles.css global del proyecto:

@import "@litigiovirtual/ius-design-styles/tokens.css";
@import "@litigiovirtual/ius-design-styles/base.css"; /* opcional — siempre después de tokens.css */
@import "@litigiovirtual/ius-design-styles/fonts.css";
@import "@litigiovirtual/ius-design-styles/icons.css";

A partir de ahí, en cualquier componente:

.mi-boton {
  background: var(--ius-primary-900);
  color: var(--ius-text-on-primary);
  padding: var(--ius-space-sm) var(--ius-space-md);
  border-radius: var(--ius-radius-lg);
  font-size: var(--ius-fs-base);
  box-shadow: var(--ius-elevation-100);
}

Contenedor con scroll con la barra del sistema:

<div class="ius-scroll" style="overflow:auto; max-height: 320px;">…</div>

Fuentes (incluidas, locales)

El paquete trae las tipografías — no hay que cargar nada por CDN ni tocar el index.html. Basta con importar fonts.css (ver "Uso" arriba) y las tres familias quedan disponibles offline:

| Familia | Rol | Archivo | Ejes | |---|---|---|---| | Roboto | display / headings | fonts/Roboto.woff2 (+ -Italic) | wdth, wght | | Rubik | body / captions | fonts/Rubik.woff2 (+ -Italic) | wght | | Material Symbols Rounded | iconografía | fonts/MaterialSymbolsRounded.woff2 | FILL, GRAD, opsz, wght |

Son fuentes variables: un solo archivo por familia interpola todos los pesos del sistema (400 / 500 / 600 / 700 + itálicas), así que no se incluyen cortes estáticos. Los tokens --ius-font-display (Roboto) y --ius-font-body (Rubik) ya apuntan a estas familias; los ejes de los íconos se fijan en .ius-icon (ver icons.css).

Si por política de tu app prefieres servir las fuentes por CDN en vez de empaquetarlas, omite fonts.css y carga Roboto / Rubik / Material Symbols Rounded desde Google Fonts en el index.html. Los tokens y icons.css funcionan igual.

Regeneración (mantenedores)

tokens.css se genera desde el proyecto de diseño Ius (concatenando tokens/{colors,typography,spacing,breakpoints,effects}.css + scrollbar.css + layout.css). No se edita a mano: si cambia un token, se cambia en el proyecto de diseño y se republica una versión nueva de este paquete. La app Angular no ve el cambio hasta actualizar la dependencia (versionado semántico).