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 simples mapas Sass, similares a JSON, que nos permiten definir todas las propiedades que un tema podría usar. Esas propiedades pueden ser colores, niveles de elevación, redondez, etc. Cualquier cosa que consuma un tema puede describirse como unschema tema global o componente que se puede pasar. Un esquema de componentes puede extender un esquema de componentes 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,
);

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 labackground propiedad como ejemplo. Le indica al tema del avatar cuál debe ser el fondo predeterminado.

Se puedebackground asignar a cualquier valor, es decir, un valor que pueda asignarse a la propiedad CSSbackground-color. También puedes asignar un mapa a,background como en el ejemplo anterior. Cuando asignas un mapa a labackground propiedad, el mapa debe contener funciones como nombres de clave (por ejemplocolor), y argumentos para las funciones como valores de dichas claves. Hacemos esto para poder resolver los valores más adelante, cuando se esté construyendo el tema avatar. Verás, como no conocemos la paleta que un usuario podría pasar al tema avatar, deberíamos poder resolverla más adelante, solo cuando la paleta sea conocida.

Extending Schemas

Como viste en el ejemplo anterior. Los esquemas son aplicaciones simples y, como tales, pueden extenderse sobrescribiendo algunas de sus propiedades. Quizá quieras ampliar el esquema del avatar material solo cambiando susbackground propiedades, sin tener que copiar todas las demás propiedades manualmente. Esto se puede hacer fácilmente con laextend función que ofrecemos.

$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 debackground 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 de luz y oscuridad en consecuencia junto con las paletas de luz y oscuridad para crear los temas componentes. Por ejemplo, usar el$light-material-schema junto con el$light-material-palette ayudará a crear todos los temas componentes de material ligero. Y viceversa: usar el$dark-material-schema junto con el$dark-material-palette nos dará los temas componentes 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 global de esquemas para todos los componentes que tenemos. Así que el$light-avatar esquema se almacena en la$material-avatar variable, que luego se usa en el global$light-material-schema. El$light-material-schema mapa contiene todos los nombres de los componentes como claves y sus esquemas correspondientes como valores. Se$light-material-schema ve algo así:

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

Hacemos esto para poder pasar todo$light-material-schema altheme mixin. Por ejemplo, si quisiéramos modificar el$light-material-schema reemplazando el esquema de componentes por defecto que usa el componente avatar, podríamos hacer:

$my-light-schema: extend($light-material-schema, (
    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 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
);

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 solo un componente$light-indigo-schema específico de avatar, podríamos 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
        )
    );
}

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.