esquemas

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

    Descripción general

    Schemas are like recipes. They are simple Sass maps, similar to JSON that allow us to define all properties a theme might use. Those properties can be colors, elevation levels, roundness, etc. Anything a theme consumes can be described as a schema, then passed to the global or component theme. A component schema can extend an existing component schema and override its properties.

    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.

    Let's take the background property for example. It tells the avatar theme what the default background should be.

    The background can be assigned any value, that is, a value that can be assigned to the CSS background-color property. You can also assign a map to background, like in the sample above. When you assign a map to the background property, the map should contain functions as the key names (e.g. color), and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known.

    Extending Schemas

    As you saw from the example above. Schemas are simple maps and as such can be extended by overriding some of their properties. You might want to extend the material avatar schema by only changing its background property, without having to copy all other properties manually. This is easily done using the extend function we provide.

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

    Now the value of $my-avatar-schema will contain all properties of $_light-avatar, but the value for background will have be 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

    We use the light and dark schemas accordingly with the light and dark palettes to create the component themes. For example, using the $light-material-schema along with the $light-material-palette will help us create all of the light material component themes. And vice versa - using the $dark-material-schema along with the $dark-material-palette will give us the dark material component themes.

    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.

    Individual component schemas are bundled up in a global schema map for all components we have. So the $light-avatar schema is stored in the $material-avatar variable, which is then used in the global $light-material-schema. The $light-material-schema map contains all component names as keys, and their corresponding schemas as values. The $light-material-schema looks something like this:

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

    We do this so we can pass the entire $light-material-schema to the theme mixin. So for instance if we wanted to modify the $light-material-schema by replacing the default component schema the avatar component uses we might do:

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

    Currently, the most common use case for schemas is when we want a specific element to have a different theme than the global one. For example, if we had $light-material-schema applied for our global theme, and we wanted only one specific avatar component to use $light-indigo-schema we can do the following:

    // 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.