Esquemas

    Esquemas são uma maneira simples e declarativa de listar todas as propriedades que um tema de componente usa.

    Visão geral

    Esquemas são como receitas. São simples mapas Sass, semelhantes ao JSON, que nos permitem definir todas as propriedades que um tema pode usar. Essas propriedades podem ser cores, níveis de elevação, arredondamento, etc. Qualquer coisa que um tema consome pode ser descrita como umschema e depois passada para o tema global ou componente. Um esquema de componente pode estender um esquema de componente existente e sobrescrever suas propriedades.

    Os esquemas devem ser usados quando você deseja alterar as propriedades do tema padrão de um componente de uma forma que não resulte na duplicação de regras de estilo CSS ou variáveis CSS.

    Vamos dar uma olhada no esquema do Material Avatar leve:

    $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 você pode ver no exemplo acima, o esquema do componente define as propriedades que o Avatar Theme consome. Ele apenas prescreve as cores que o avatar deve usar, sem referenciar um mapa de paleta de cores concreto.

    Vamos pegar abackground propriedade como exemplo. Ele diz ao tema do avatar qual deve ser o fundo padrão.

    Obackground pode ser atribuído a qualquer valor, ou seja, um valor que pode ser atribuído à propriedade CSSbackground-color. Você também pode atribuir um mapa parabackground, como no exemplo acima. Quando você atribui um mapa àbackground propriedade, o mapa deve conter funções como nomes de chave (por exemplocolor), e argumentos para as funções como valores para essas chaves. Fazemos isso para poder resolver os valores depois, quando o tema do avatar estiver sendo construído. Veja, como não sabemos a paleta que um usuário pode passar para o tema avatar, deveríamos conseguir resolvê-la depois, só quando a paleta for conhecida.

    Extending Schemas

    Como você viu no exemplo acima. Esquemas são mapas simples e, como tal, podem ser estendidos sobrescrevendo algumas de suas propriedades. Você pode querer estender o esquema do avatar material mudando apenas suasbackground propriedades, sem precisar copiar todas as outras propriedades manualmente. Isso é facilmente feito usando aextend função que oferecemos.

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

    Agora, o valor de$my-avatar-schema irá conter, mas$_light-avatar o valor debackground terá .limegreen​

    Predefined Schemas

    Fornecemos esquemas claros e escuros predefinidos que usamos em nossas predefinições de tema:

    • Esquemas de Luz
      • $light-material-schema
      • $light-fluent-schema
      • $light-bootstrap-schema
      • $light-indigo-schema
    • Esquemas Escuros
      • $dark-material-schema
      • $dark-fluent-schema
      • $dark-bootstrap-schema
      • $dark-indigo-schema

    Usamos os esquemas de luz e escuro conforme as paletas de luz e escuro para criar os temas componentes. Por exemplo, usar o$light-material-schema junto com$light-material-palette o ajudará a criar todos os temas dos componentes do material leve. E vice-versa – usar junto$dark-material-schema com o$dark-material-palette vai nos dar os temas componentes do material escuro.

    Consuming Schemas

    Até agora mostramos o que é um esquema de componente e como você pode criar um, mas não falamos sobre como você pode usar esquemas em seu projeto Sass.

    Esquemas de componentes individuais são agrupados em um mapa global de esquemas para todos os componentes que temos. Assim, o$light-avatar esquema é armazenado na$material-avatar variável, que é então usada no global$light-material-schema. O$light-material-schema mapa contém todos os nomes dos componentes como chaves, e seus esquemas correspondentes como valores. A$light-material-schema aparência é mais ou menos assim:

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

    Fazemos isso para passar tudo$light-material-schema para atheme mistura. Por exemplo, se quisermos modificar o$light-material-schema substituindo o esquema padrão do componente que o componente avatar usa, poderíamos fazer:

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

    Agora podemos passar tudo isso para o mixin do tema global:

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

    Os avatares no seu tema global agora usarão a cor verde-limão como plano de fundo.

    Alguns esquemas de componentes, como o esquema de botões, têm definições de propriedade para arredondamento. Isso significa que você pode alterar o arredondamento padrão do botão para todos os botões.

    Vamos ver como temas de componentes individuais podem usar o esquema que criamos acima.

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

    Atualmente, o caso de uso mais comum para esquemas é quando queremos que um elemento específico tenha um tema diferente do global. Por exemplo, se tivéssemos$light-material-schema solicitado nosso tema global e quiséssemos usar apenas um componente$light-indigo-schema específico do avatar, poderíamos fazer o seguinte:

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

    Embora os esquemas exijam um conhecimento mais profundo da nossa biblioteca de temas em comparação com funções de tema e mixins, eles nos permitem declarar temas de componentes sem aumentar o tamanho do CSS produzido. Outro benefício de usar esquemas é o quão reutilizáveis e extensíveis eles são, pois são mapas Sass simples. Você pode misturar e combinar esquemas de componentes para criar esquemas de tema globais.

    Usamos esquemas internamente para criar variações que resultam em diferentes temas pré-agrupados para Material, Bootstrap, Fluent e Indigo.

    API Overview

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.