ATM Iris es una herramienta creada para facilitar la creación de componentes web en el front-end mediante hojas de estilo en cascada.

Al instalar este paquete en un proyecto, los desarrolladores pueden acceder fácilmente a estilos consistentes y coherentes que garantizan una apariencia uniforme para todos los sitios web.

Además de simplificar el proceso de diseño y desarrollo, ATM Iris ayuda a mantener la imagen de marca corporativa en todo momento, lo que repercute en una mejor experiencia de usuario.

Antes de instalar ATM Iris, es encesario instalar Angular Material.

ng add @angular/material

Prebuild Indigo/Pink

Typography NO

Animations YES

Después, es necesario instalar Material Icons.

npm install material-icons@latest

Instala la última versión usando:

npm i atm-iris@latest

Añade la hoja de estilo global llamada atm-styles.scss que se muestra a continuación, al fichero angular.json del siguiente modo:

"styles": [
  "node_modules/atm-iris/styles/atm-styles.scss",
  "src/styles.scss"
],

Al instalar Angular Material o Material icons se añaden de forma automática en el index.html del proyecto varias entradas en el cabecera para poder obtener las fuentes e iconos desde el CDN del proveedor.

Además de no hacerlo de esta forma porque dependemos de otro servidor externo o es posible que el cliente tenga el acceso a internet limitado, los recursos ya se encuentran cargados en el proyecto.

Estas referencias hay que eliminarlas.

Una vez creado el proyecto, busca en tu archivo index.html y elimina los siguientes links generados de manera automática:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Para más información, visita el Storybook de Iris y... ¡averigua cómo crear y dar estilos a todos tus componentes!