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: (
    background: (
        color: (
            'gray',
            400,
            0.54,
        ),
    ),
    color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    icon-color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    border-radius: rem(8px),
    size: (
        sizable: (
            rem(40px),
            rem(64px),
            rem(88px),
        ),
    ),
    default-size: 1,
);
scss

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.

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

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
- $light-material-schema
- $light-fluent-schema
- $light-bootstrap-schema
- $light-indigo-schema
Esquemas oscuros
- $dark-material-schema
- $dark-fluent-schema
- $dark-bootstrap-schema
- $dark-indigo-schema

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. Por lo tanto, el $light-avatar esquema se almacena en la $material-avatar variable, que luego se utiliza en el global $light-material-schema. El $light-material-schema mapa contiene todos los nombres de componentes como claves y sus esquemas correspondientes como valores. El $light-material-schema aspecto es algo así:

$light-material-schema: (
    action-strip: $material-action-strip,
    avatar: $material-avatar,
    badge: $material-badge,
    ...
);
scss

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, (
    avatar: $my-avatar-schema
));
scss

Ahora podemos pasar todo eso al mixin de temas global:

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

Los avatares de tu tema global ahora usarán el color verde lima para su 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.

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

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

Actualmente, el caso de uso más común para los esquemas es cuando queremos que un elemento específico tenga un tema diferente al global. Por ejemplo, si hubiéramos $light-material-schema solicitado nuestro tema global y quisiéramos usar $light-indigo-schema solo un componente de avatar específico, podemos hacer lo siguiente:

// We only get the avatar part of the light-indigo-schema
$indigo-avatar: map.get($light-indigo-schema, avatar);

// We include the specific schema to a class which we can then set on the avatar component that we want
.indigo-avatar {
    @include css-vars(
        avatar-theme(
            $schema: $indigo-avatar
        )
    );
}
scss

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.