Tematización con Sass

    Ignite UI for Angular no rehúye exponer su API de temas Sass para que pueda tomar el control total del estilo de su aplicación. La API que exponemos es, en gran medida, exactamente la misma API que usamos internamente para construir cada uno de los temas que agrupamos con el producto. Es abstracto y permite la granularidad de los temas en diferentes niveles, desde un solo componente hasta todo el conjunto de aplicaciones.

    Descripción general

    Dado que IgniteUI para Angular basa sus diseños de componentes en los Principios de Material Design, tratamos de acercarnos lo más posible a los colores, tamaños, tipografía y apariencia general de nuestros componentes a los creados por Google para nuestro tema predeterminado. El sistema de Material Design cambia constantemente y no se desvía de la implementación de cambios importantes, lo que en última instancia afecta la forma en que escribimos y modificamos los estilos de los componentes que enviamos. Con soporte para 3 temas adicionales: Microsoft Fluent, Bootstrap y nuestros propios sistemas Indigo Design, adaptar el sistema de Material Design no es una tarea sencilla. Requirió que construyéramos una base muy modular, configurable y, sin embargo, mantenible a partir de la cual se pueden generar estilos de componentes muy diferentes. También tenemos que admitir navegadores antiguos y nuevos por igual, por lo que Sass ha sido de gran ayuda en este esfuerzo, brindándonos herramientas que nos permitieron crear un sistema visceral de variables, funciones y mixins.

    Nuestro enfoque de la tematización se basa en varios conceptos: esquemas temáticos, paletas, tipografía, redondez, elevaciones y animaciones. Luego, estos conceptos se mezclan para producir el tema final. Cada concepto se desglosa para permitir un enfoque más granular del estilo.

    Dado que queremos garantizar que aspectos específicos de nuestro sistema de diseño permanezcan ilesos, no le permitimos cambiar todo y reescribir completamente los estilos usando la API que exponemos; sin embargo, podría hacerlo si investigara un poco.

    Explicaremos cada concepto en detalle y las API relacionadas para que pueda sentirse realmente en control de nuestro motor de temas.

    Note

    Aunque la biblioteca de temas de Sass es potente, la mayoría de las personas sólo necesitarán modificar algunas variables CSS para personalizar el tema predeterminado. Le recomendamos que lea primero la documentación de variables CSS. Sólo deberías necesitar usar Sass si deseas modificar el tema producido en un nivel más profundo. Un buen ejemplo sería cuando necesita crear varias variantes de temas reutilizables diferentes para el mismo componente, o agitar el CSS producido para incluir solo estilos para los componentes que usa en su aplicación.

    paletas

    El primer concepto que debemos entender es el de paletas. Como en toda herramienta visual, los colores son el principal factor diferenciador entre una aplicación y otra. Las Pautas de diseño de materiales prescriben paletas de colores predefinidas que varían en tono, luminosidad y saturación para un color base determinado. 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 desea tener su propia paleta personalizada basada en las pautas de materiales que coincidan con su marca, probablemente no tenga suerte. Reconocemos que esto es un problema, por eso inventamos un algoritmo que genera paletas similares a materiales a partir de los colores base que usted proporciona. También generamos colores de texto de contraste para cada tono de la paleta.

    esquemas

    The second important concept revolves around theme schemas. Theme schemas are like recipes for individual component themes. They give individual component themes information about what palette colors they should use and what the overall roundness and shadows should be. For instance, a component scheme tells a component theme that the background color of an element should be the 500 variant from the primary color, without caring what palette the user passes to the component theme.

    Tipografía

    La tipografía es un módulo separado en nuestra biblioteca de temas de Sass y está desacoplado de los temas de los componentes individuales. Aunque tenemos un tipo de letra predeterminado para elegir, 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, botones, cuerpo del texto, etc. en su aplicación.

    Redondez

    The Sass theming system defines minimum and maximum roundness for each component. You may be more familiar with the term border-radius in the context of CSS. Roundness is similar in that it uses border-radius to style the elements of the component, however, roundness in the context of the theming system is a number between 0 and 1. A component that has a roundness of 0 uses the minimum border-radius as defined by the component theme - it could be 0 or a non-zero value. Likewise, setting the roundness to 1 will set the border-radius to the maximum allowed radius for the component. While the minimum and maximum border-radius are defined in the component theme itself, the base roundness value is set in the component schema.

    Elevaciones

    Elevations are the shadows being set for different parts of each component theme. They are based on 25(0-24) levels as prescribed by the Material Design guidelines. Having a finite number of shadows allows us to have a consistent way of defining depth hierarchy in our applications. In Sass they are defined as a map of 24 elevation levels with box-shadows as values and later passed to a component theme. Component schemas will provide generic information to the theme about the elevation levels specific elements should use.

    animaciones

    Algunos componentes utilizan transiciones de fotogramas clave y animaciones para comunicar cambios de estado de forma clara. Incluimos una enorme biblioteca de animaciones de fotogramas clave y funciones de sincronización que se pueden importar y utilizar en toda su aplicación. Están agitados, por lo que incluir la misma combinación de animación dos veces produce solo una declaración CSS en su hoja de estilo de salida.

    Themes

    Finalmente, tenemos temas componentes. Las paletas, esquemas, elevaciones, redondez y animaciones no servirían de mucho por sí solas si no fueran utilizadas por un tema. Proporcionamos temas para componentes individuales y uno global que da estilo a toda la aplicación y a cada componente que contiene. Simplemente pasas la paleta y el esquema al tema global, nosotros nos encargamos del resto. Por supuesto, puede diseñar cada componente individualmente a su gusto creando esquemas personalizados, elevaciones y pasando diferentes valores de redondez y colores a los mixins temáticos del componente.

    Additional Resources

    Aprende los conceptos:

    Aprenda a crear temas para toda la aplicación:

    Aprenda a crear temas específicos de componentes:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.