Tematización con Sass
Descripción general
Dado que IgniteUI para Angular basa los diseños de sus componentes en los Principios de diseño de materiales, intentamos acercarnos lo más posible a los colores, tamaños, tipografía y la apariencia general de nuestros componentes a los creados por Google para nuestro tema predeterminado. El sistema Material Design sigue cambiando y no deja de implementar 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 Material Design no es una tarea sencilla. Nos requirió construir una base muy modular, configurable y aún mantenible a partir de la cual se puedan generar estilos de componentes muy diferentes. También tenemos que admitir navegadores nuevos y antiguos 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
El segundo concepto importante gira en torno a los esquemas temáticos. Los esquemas temáticos son como recetas para temas de componentes individuales. Proporcionan a los temas de los componentes individuales información sobre qué colores de paleta deben usar y cuáles deben ser las redondez y las sombras generales. Por ejemplo, un esquema de componente le dice a un tema de componente que el color de fondo de un elemento debe ser la variante 500 del color primary, sin importar qué paleta pase el usuario al tema de componente.
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
El sistema de temática Sass define la redondez mínima y máxima para cada componente. Quizás esté más familiarizado con el término border-radius en el contexto de CSS. La redondez es similar en que usa border-radius para diseñar los elementos del componente; sin embargo, la redondez en el contexto del sistema temático es un número entre 0 y 1. Un componente que tiene una redondez de 0 usa el radio de borde mínimo. según lo definido por el tema del componente: podría ser 0 o un valor distinto de cero. Del mismo modo, establecer la redondez en 1 establecerá el radio del borde en el radio máximo permitido para el componente. Mientras que el radio de borde mínimo y máximo se definen en el propio tema del componente, el valor de redondez base se establece en el esquema del componente.
Elevaciones
Las elevaciones son las sombras que se establecen para diferentes partes de cada tema componente. Se basan en niveles 25 (0-24) según lo prescrito por las pautas de Material Design. Tener un número finito de sombras nos permite tener una forma consistente de definir la jerarquía de profundidad en nuestras aplicaciones. En Sass se definen como un mapa de 24 niveles de elevación con box-shadows como valores y luego se pasan a un tema componente. Los esquemas de componentes proporcionarán información genérica al tema sobre los niveles de elevación que deben usar los elementos específicos.
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.
GitHub