Temas

Con sólo unas pocas líneas de código, los usuarios pueden cambiar fácilmente la temática de sus componentes. Al estar desarrollado a través de SASS, el uso de la API es de baja dificultad y ofrece un rediseño de un componente, de varios componentes o de toda la suite.

La esencia de un tema

Dado que IgniteUI para Angular basa los diseños de sus componentes en las Pautas de diseño de materiales, intentamos acercarnos lo más posible a los colores, tamaños y la apariencia general de nuestros componentes a los creados por Google.

Nuestro enfoque de la tematización se basa en varios conceptos simples.

paletas

El primer concepto es el de paletas de colores. Como en toda herramienta visual, los colores son la principal diferencia entre una aplicación y otra. Las Pautas de diseño de materiales prescriben paletas de colores predefinidas que varían en tono y luminosidad para un color base. Hay una buena razón para ello. Realmente quieren garantizar una buena combinación de colores y contraste entre los colores de fondo y los colores del texto de primer plano. Esto es genial, pero limitante al mismo tiempo. Si quisieras tener tu propia paleta personalizada que coincida con tu marca, no tendrías suerte. Reconocemos que esto es un problema, por lo que inventamos un algoritmo que generaría paletas similares a las de Material a partir de los colores base que usted proporcione. Aún más, también generamos colores de texto de contraste para cada tono de la paleta.

Temas

El segundo concepto es el de temas. Las paletas no servirían de mucho si no fueran utilizadas por un tema. Entonces tenemos temas para cada componente, y uno global, que le da estilo a toda la aplicación y a cada componente que contiene. Simplemente pasa tu paleta generada al tema global, nosotros nos encargamos del resto. Por supuesto, puedes diseñar cada componente individualmente a tu gusto. Veremos más de cerca cómo hacerlo más adelante en este artículo.

Tipografía

El último concepto gira en torno a la tipografía. Aunque tenemos una opción de tipo de letra predeterminada, realmente queremos brindarle el poder de diseñar su aplicación en todos los sentidos. La tipografía es una parte muy importante de eso. Proporcionamos un método para cambiar la familia de fuentes, los tamaños y pesos de los títulos, subtítulos y textos de párrafos en su aplicación.

Nota

La tematización requiere Sass.

Generación de paletas de colores

Nuestra biblioteca temática está basada en Sass. Si utilizó la CLI Ignite UI para iniciar su aplicación, puede especificar el estilo en la configuración angular-cli.json en scss, la CLI se encargará de compilar los estilos Sass por usted. Si no ha utilizado Ignite UI CLI, entonces debe configurar su generador para compilar estilos Sass por usted.

Nuestras paletas aceptan argumentos para colores primary, secondary, info, success, warn y error. El color primario es el que será el color más destacado en toda la aplicación. El color secundario es el que se usa en elementos que son procesables, como botones, interruptores, controles deslizantes, etc. Sin embargo, los únicos argumentos requeridos que requerimos son los de los colores primary y secondary. Los valores predeterminados para info, success, warn y error son un conjunto predefinido de nuestra elección.

Para comenzar con nuestra primera paleta de colores, cree un archivo scss que será el archivo base para su tema global. Llamaré al mío "my-app-theme.scss".

@use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; $company-color: #2ab759; // Some green shade I like $secondary-color: #f96a88; // Watermelon pink $my-color-palette: palette( $primary: $company-color, $secondary: $secondary-color, );

¡Ahora tenemos una paleta que contiene exactamente 74 colores! Espera, espera, ¿qué? ¿Cómo ocurrió eso? ¿Proporcionaste 2 y obtuviste 74? ¿De dónde vinieron los otros 72 colores? Detengámonos aquí para explicar lo que acaba de pasar, ya que es bastante importante. Cuando proporcionó colores primary y secondary, los tomamos y generamos sombras y colores de acento para cada uno. Básicamente, ahora en tu paleta tienes 2 subpaletas para colores primary y secondary. Cada subpaleta contiene 12 variaciones de color adicionales basadas en el color original. 4 de los 12 colores son tonos más claros de su color original y 4 son más oscuros. Los 4 colores restantes son versiones más exageradas del color original. Con el color original que hace un total de 13 colores en cada paleta.

Con tantos colores en cada subpaleta, quizás te preguntes: ¿cómo diablos sabré cuál es cuál, verdad? Es bastante simple, de verdad. Cada uno de los colores de la subpaleta tiene un número. Asignamos el número 500 al color original. Los tonos más claros comienzan desde 100 y van hasta 400. Los tonos más oscuros comienzan desde 600 y van hasta 900. Los colores de acento tienen nombres de cadena A100, A200, A400 y A700, respectivamente. Bien, pero ahora son sólo 26 de 72. No te preocupes, hay otra subpaleta que te damos. Aquel que se compone de 'colores' grises, llamados grays. Es igual que las otras dos subpaletas de colores, pero no incluye ninguna variación de acento. Bien, ahora llegamos a 26 + 9 para un total de 35 colores. Esto todavía está muy lejos de 74. ¿De dónde vienen los otros 39 colores? Resolvamos el rompecabezas final. Recuerde que también puede tener 4 colores adicionales para info, success, warn y error. Eso deja otros 35 colores sin contabilizar. ¿Recuerda que el recuento de las subpaletas primary, secondary y grays fue exactamente 35? Los otros 35 colores restantes son colores de texto de contraste para cada uno de los colores de las subpaletas primary, secondary y grays.

¿Entiendo? ¡Bien! Pero, ¿cómo se accede a cualquiera de los colores de la paleta?

Obtener colores de subpaleta

Proporcionamos una función que es fácil de recordar y usar igx-color. Se necesitan tres argumentos: palette, color y variant;

$my-primary-600: color($my-palette, "primary", 600); $my-primary-A700: color($my-palette, "secondary", "A700"); $my-warning-color: color($my-palette, "warn"); // sample usage .my-awesome-class { background: $my-primary-600; border-color: $my-primary-A700; } .warning-bg { background: $my-warning-color; }

Obtener colores de texto de contraste

De manera similar a cómo obtenemos colores de subpaletas, hay una manera de obtener el color de texto de contraste para cada uno de los colores de las subpaletas.

$my-primary-800: color($my-palette, "primary", 600); $my-primary-800-text: contrast-color($my-palette, "primary", 600); // sample usage .my-awesome-article { background: $my-primary-800; color: $my-primary-800-text; }

Generación de un tema

Si ha incluido el archivo "igniteui-angular.css" en el proyecto de su aplicación, ahora es un buen momento para eliminarlo. Usaremos nuestro propio archivo "my-app-theme.scss" para generar nuestro propio tema.

Comencemos con nuestro primer ejemplo en esta página. Esta vez, sin embargo, incluiremos dos mixins core y theme; Por ahora core no acepta ningún argumento. theme, sin embargo, acepta 2: $palette y $exclude. Por ahora, sólo hablaremos del argumento $palette. Echaremos un vistazo más profundo a lo que hace $exclude más adelante cuando hablemos de temas de componentes individuales.

Importante

Incluir core antes que theme es esencial. El mixin core proporciona todas las definiciones básicas necesarias para que theme funcione.

// Import the IgniteUI themes library first @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; $company-color: #2ab759; // Some green shade I like $secondary-color: #f96a88; // Watermelon pink $my-color-palette: palette( $primary: $company-color, $secondary: $secondary-color, ); // IMPORTANT: Make sure you always include core first! @include core(); // Pass the color palette we generated to the theme mixin @include theme($my-color-palette);

Eso es todo. Su aplicación ahora utilizará los colores de su paleta recién generada.

Personalización de tipografía (WIP)

En su estado actual, la definición de tipografía personalizada se limita a cambiar la font family de la aplicación. Actualizaremos esta funcionalidad en versiones posteriores. Nuestra intención es proporcionar una forma sólida de personalizar la tipografía en su aplicación.

Para personalizar la tipografía utilice el mixin typography. Se necesita exactamente un argumento: config.

Importante

Incluir typography después core es fundamental. Esto está sujeto a cambios en futuras versiones.

// Import the IgniteUI themes library first @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; // IMPORTANT: Make sure you always include core first! @include core(); // Include typography before theme @include typography( $config: ( font-family: "Comic Sans MS", ) ); @include theme($default-palette);