esquemas

    Los esquemas son una forma sencilla y declarativa de enumerar todas las propiedades que utiliza un tema componente.

    Descripción general

    Los esquemas son como recetas. Son mapas Sass simples, similares a JSON, que nos permiten definir todas las propiedades que podría usar un tema. Esas propiedades pueden ser colores, niveles de elevación, redondez, etc. Cualquier cosa que consuma un tema puede describirse como un schema y luego pasarse al tema global o componente. Un esquema de componente puede ampliar un esquema de componente existente y anular sus propiedades.

    Los esquemas deben usarse cuando desee cambiar las propiedades del tema predeterminado de un componente de una manera que no resulte en la duplicación de reglas de estilo CSS o variables CSS.

    Echemos un vistazo al esquema de Material Avatar ligero:

    $_light-avatar: extend(
    $_square-shape-avatar,
    (
        background: (
           color: ('gray', 400)
        ),

        color: (
           color: ('gray', 800)
        ),
    )
);

    Como puede ver en el ejemplo anterior, el esquema del componente define las propiedades que consume el tema Avatar. Simplemente prescribe los colores que debe usar el avatar, sin hacer referencia a un mapa de paleta de colores concreto.

    Tomemos como ejemplo la propiedad background. Le dice al tema del avatar cuál debería ser el fondo predeterminado.

    Al background se le puede asignar cualquier valor, es decir, un valor que se puede asignar a la propiedad background-color de CSS. También puedes asignar un mapa al background, como en el ejemplo anterior. Cuando asigna un mapa a la propiedad background, el mapa debe contener funciones como nombres de claves (por ejemplo, color) y argumentos para las funciones como valores para dichas claves. Hacemos esto para poder resolver los valores más adelante, cuando se esté creando el tema del avatar. Mira, como no conocemos la paleta que un usuario podría pasar al tema de avatar, deberíamos poder resolverlo más adelante, solo cuando conozcamos la paleta.

    También podemos agregar otras funciones y argumentos al mapa background como pares clave-valor. Por ejemplo, es posible que deseemos ejecutar el resultado resuelto de color: ('gray', 400) a través de la función to-opaque que tenemos, para resolver el valor HEX para la variante de color 400 de la paleta gray, que generalmente se representa en rgba. .

    Veamos cómo cambiará el esquema cuando hagamos esta adición:

    $_light-avatar: (
    icon-background: (
       color: ('gray', 400),
        to-opaque: #fff
    ),
    ...
);

    El resultado de la llamada a la función de color se pasará automáticamente como primer argumento a la función to-opaque. Dado que to-opaque acepta un segundo argumento para el color de fondo, lo proporcionamos como valor. Si la función no acepta ningún argumento adicional, debe asignar una lista vacía () como valor.

    Extending Schemas

    Como vio en el ejemplo anterior. Los esquemas son mapas simples y, como tales, pueden ampliarse anulando algunas de sus propiedades. Es posible que desee ampliar el esquema de avatar del material cambiando únicamente su propiedad background, sin tener que copiar todas las demás propiedades manualmente. Esto se hace fácilmente utilizando la función extend que proporcionamos.

    $my-avatar-schema: extend($_light-avatar, (
    background: limegreen
));

    Ahora el valor de $my-avatar-schema contendrá todas las propiedades de $_light-avatar, pero el valor de background será limegreen.

    Predefined Schemas

    Proporcionamos esquemas de luz y oscuridad predefinidos que utilizamos en nuestros ajustes preestablecidos de temas:

    • Esquemas de luz
      • $ esquema-material-ligero
      • $ esquema-fluido-luz
      • $esquema-bootstrap-luz
      • $esquema-índigo-claro
    • Esquemas oscuros
      • $esquema-de-material-oscuro
      • $ esquema-fluido-oscuro
      • $ esquema-bootstrap-oscuro
      • $esquema-índigo-oscuro

    Usamos los esquemas claros y oscuros de acuerdo con las paletas claras y oscuras para crear los temas componentes. Por ejemplo, usar el $light-material-schema junto con la $light-material-palette nos ayudará a crear todos los temas de los componentes de material ligero. Y viceversa: usar el $dark-material-schema junto con la $dark-material-palette nos dará los temas del componente de material oscuro.

    Consuming Schemas

    Hasta ahora hemos mostrado qué es un esquema de componente y cómo puedes crear uno, pero no hemos hablado sobre cómo puedes usar esquemas en tu proyecto Sass.

    Los esquemas de componentes individuales se agrupan en un mapa de esquema global para todos los componentes que tenemos. Entonces, el esquema $_light-avatar es parte del $light-material-schema global. El $light-material-schema asigna esquemas de componentes a nombres de componentes. El $light-material-schema se parece a esto:

    $light-material-schema: (
    igx-avatar: $_light-avatar,
    igx-badge: $_light-badge,
    ...
);

    Hacemos esto para poder pasar todo el $light-material-schema al theme mixin. Entonces, por ejemplo, si quisiéramos modificar el $light-material-schema reemplazando el esquema del componente predeterminado que usa el componente avatar, podríamos hacer:

    $my-light-schema: extend($light-material-schema, (
    igx-avatar: $my-avatar-schema
));

    Ahora podemos pasar todo eso al mixin de temas global:

    // styles.scss
@include theme(
    $schema: $my-light-schema,
    $palette: $default-palette
);

    Los avatares en su tema global ahora tendrán el color verde lima como fondo.

    Algunos esquemas de componentes, como el esquema de botones, tienen definiciones de propiedades para la redondez. Esto significa que puede cambiar la redondez predeterminada de todos los botones.

    Finalmente, veamos cómo los temas de componentes individuales pueden usar el esquema que creamos anteriormente.

    $my-avatar-theme: avatar-theme(
    $schema: $my-avatar-schema
);

    Conclusions

    Aunque los esquemas requieren un conocimiento más profundo de nuestra biblioteca de temas en comparación con las funciones de temas y mixins, nos permiten declarar temas de componentes sin aumentar el tamaño del CSS producido. Otro beneficio de usar esquemas es lo reutilizables y extensibles que son, ya que son mapas Sass simples. Puede mezclar y combinar esquemas de componentes para crear esquemas de temas globales.

    Usamos esquemas internamente para crear variaciones que dan como resultado diferentes temas preempaquetados para Material, Bootstrap, Fluent e Indigo.

    API Overview

    Additional Resources

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