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.

The Essence of a Theme

Dado que IgniteUI para Angular basa sus diseños de componentes en las Directrices de diseño de materiales, intentamos acercarnos lo más posible a los colores, tamaños y 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.

La tematización requiere Sass.

Generating Color Palettes

Nuestra biblioteca de temas está basada en Sass. Si usó la CLI de Ignite UI para arrancar su aplicación, puede especificar el estilo en la configuración de angular.json​ ​a scss, la CLI se encargará de compilar los estilos de Sass por usted. Si no ha utilizado Ignite UI CLI, debe configurar su creador para compilar estilos de Sass por usted.

Nuestras paletas aceptan argumentos para primary, secondary, surface, info, success,, warn y error colores. El color primario es el que será el color más prominente en toda la aplicación. El color secundario es el que se utiliza en los elementos que se pueden accionar, como botones, interruptores, controles deslizantes, etc. El color de la superficie se utiliza para el color de fondo de algunos de los componentes. Los únicos argumentos necesarios son los unos para,y primary​ ​secondary​ ​surface colores. De forma predeterminada, los valores son for info, success, warn, y error a 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
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);
scss

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

Con tantos colores en cada subpaleta te estarás preguntando, ¿cómo diablos sabré cuál es cuál, verdad? Es bastante simple, en realidad. 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 50 y van hasta 400. Los tonos más oscuros comienzan desde 600 y van hasta 900. Los colores de énfasis tienen nombres A100 de cadena, A200, A400, y A700, respectivamente. Está bien, pero ahora son solo 42 de 216. No te preocupes, hay otra subpaleta que te damos. Uno que consiste en 'colores' grises, llamados grays. Es igual que las otras dos subpaletas de colores, pero no incluye ninguna variación de acento. Bien, ahora estamos hasta 42 + 10 para un total de 52 colores. Todavía está muy lejos de los 216. ¿De dónde vienen los otros 164 colores? Resolvamos el rompecabezas final. Recuerde que también puede tener 4 colores adicionales para info, success, warn y error. Así que eso deja otros 56 colores sin contabilizar. Recuerde que el recuento de las secondary​ ​info​ ​surface​ ​grays​ ​primary​ ​success​ ​warn​ ​error paletas y subpaletas fue exactamente 108, que es la mitad de los 216 colores. La mitad restante de los colores son los colores de texto de contraste para cada variante de color, todos tienen-contrast como sufijo en su nombre de variable y son blancos o negros.

¿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 color. Se necesitan tres argumentos -palette, color, y variant;

$my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}
scss

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;
}
scss

Generating a Theme

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 desde nuestro primer ejemplo en esta página. Esta vez, sin embargo, vamos a incluir dos mezclas core y theme; Por ahora core no acepta ningún argumento. theme, sin embargo, sí acepta algunos -$palette, $schema, $exclude, $roundness, $elevation,. $elevations Por ahora, solo hablaremos del $palette argumento.

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
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-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);
scss

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

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.

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);
scss