@roblexperu/style

Librería de estilos (Sass/SCSS) del sistema de diseño de Roblex. Compila a una única hoja de estilos distribuible (public/css/roblex-style.css) que consumen las apps de Roblex, e incluye además la fuente de íconos propia y las tipografías de marca (Maax, Publica Sans Round). No contiene lógica de aplicación en JS: es únicamente estilos, fuente de íconos y web fonts.

Instalación

npm install @roblexperu/style

Uso

Opción A — hoja de estilos ya compilada (la forma documentada de consumo):

// angular.json
"styles": [
  "node_modules/@roblexperu/style/public/css/roblex-style.css"
]

Opción B — importar el SCSS fuente, si tu app necesita acceso a las variables/mixins (colores, breakpoints, tipografía, etc.):

// styles.scss de la app consumidora
@import '~@roblexperu/style/src/main';

Scripts

| Script | Descripción | | --- | --- | | npm run build | Compila src/main.scss → public/css/roblex-style.css (expandido, con source map) | | npm run build:prod | Igual, pero comprimido (usado para releases) | | npm run build:watch | Compila en cada cambio, para desarrollo local | | npm start | Sirve ./public con live-server en el puerto 4444, para revisar visualmente el CSS compilado | | npm test | Corre la suite de pruebas unitarias (Jest: mixins Sass vía sass-true + scripts JS) | | npm run lint:js | ESLint sobre **/*.js (corre automático en pre-commit vía husky + lint-staged) | | npm run build:icon | Regenera la fuente de íconos desde ./svg/*.svg con fontello-offline-cli, y copia el resultado a fonts/, public/fonts/RoblexIcons y src/icons/_roblex-icons-codes.scss. Correr después de agregar/editar/quitar un ícono en ./svg/ | | npm run update-version | Bump interactivo de versión (patch/minor/major/preupdate) vía scripts/version-update.js; también commitea y taggea | | npm run push | update-version + npm publish. Muta el historial de git y publica — no correr sin confirmación explícita |

Arquitectura

Todo se ensambla desde src/main.scss, que importa (en este orden) Bootstrap 4 y luego las capas del sistema de diseño bajo src/, cada una con su propio _index.scss como barrel file:

1. vars/ — variables y mapas de Sass: colores (_colors.scss, incluye el mapa $colors-roblex), breakpoints, variables base (CDN/ruta de fuentes), variables de flexbox. Sin selectores, solo tokens.
2. mixins/ — mixins reutilizables: helpers de flexbox, breakpoints por media query, helpers de @font-face/tamaño de fuente.
3. typography/ — declaraciones @font-face de las dos tipografías de marca (Maax, Publica Sans Round), la fuente de íconos (_roblex-icons.scss) y clases utilitarias de color.
4. atoms/ — primitivas de UI más pequeñas y reutilizables: botones, inputs, checkboxes/radios, select, toggle, avatar, divider, rating, progress.
5. organisms/ — componentes compuestos de mayor nivel, construidos a partir de átomos: navbar/header, footer, card, dropdown, steps, modal, snack-bar, sidepanel, trading-calculator, calculate, califications, schedule-notifications.
6. pages/ — bloques de estilos específicos de página (accounts, authentication, changes, operations, profile, main).
7. utility/ — clases utilitarias (display, cursor, helpers de página, overrides de sweet-alert).
8. icons/ — importa _roblex-icons-codes.scss, el mapa de códigos de caracteres de la fuente de íconos generado automáticamente (no editar a mano; regenerar con npm run build:icon).

Al agregar un componente nuevo, creá el archivo _nombre.scss en la capa correspondiente (atoms/organisms/pages/utility) y agregá el @import en el _index.scss de esa capa — nada se importa automáticamente por glob.

Convenciones de z-index

Documentadas como comentario al final de src/main.scss:

• navbar-header: 1001
• roblex-modal: 2001
• cdk-overlay-container: 4001

Pipeline de íconos

Los íconos fuente viven como SVGs individuales en ./svg/. npm run build:icon corre fontello-offline-cli contra ./svg/ para generar un bundle de webfont en ./webfonts/, y luego fonts-icons.js copia el resultado:

• ./fonts → ./public/fonts/
• ./webfonts/font → ./public/fonts/RoblexIcons
• ./webfonts/css/roblex-font-icons-codes.scss → src/icons/_roblex-icons-codes.scss

webfonts/config.json es la configuración del proyecto Fontello (reimportable en fontello.com). Nunca editar a mano src/icons/_roblex-icons-codes.scss ni el contenido de webfonts/font — son generados.

Fuentes

Las dos tipografías de marca están vendoreadas en ./fonts/ (Maax, PublicaSansRound) y se sirven desde $cdn: 'https://cdn.roblex.pe/fonts' (ver src/vars/_var.scss), con $path-fonts: '/assets' como ruta local de fallback en desarrollo.

Tests

npm test corre Jest sobre test/:

• test/sass/ — pruebas de los mixins de Sass (flexbox, media, tipografía) usando sass-true, comparando el CSS realmente compilado contra el esperado.
• test/js/ — pruebas de los scripts de build (scripts/version-update.js, fonts-icons.js).

Requiere Node dentro del rango declarado en engines (compatible con Angular 22: ^22.22.3 || ^24.15.0 || >=26.0.0).