Esquemas

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

    Visão geral

    Schemas são como receitas. Eles são mapas Sass simples, 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, redondeza, etc. Qualquer coisa que um tema consome pode ser descrita como um schema e, em seguida, passada para o tema global ou de componente. Um schema de componente pode estender um schema de componente existente e substituir 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 a propriedade background como exemplo. Ela diz ao tema do avatar qual deve ser o plano de fundo padrão.

    O background pode receber qualquer valor, ou seja, um valor que pode ser atribuído à propriedade CSS background-color. Você também pode atribuir um mapa a background, como no exemplo acima. Quando você atribui um mapa à propriedade background, o mapa deve conter funções como nomes de chaves (por exemplo, color) e argumentos para as funções como valores para as chaves. Fazemos isso para poder resolver os valores mais tarde, 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 do avatar, devemos ser capazes de resolvê-la mais tarde, somente quando a paleta for conhecida.

    Extending Schemas

    Como você viu no exemplo acima. Schemas são mapas simples e, como tal, podem ser estendidos ao substituir algumas de suas propriedades. Você pode querer estender o esquema do avatar do material alterando apenas sua propriedade background, sem ter que copiar todas as outras propriedades manualmente. Isso é feito facilmente usando a função extend que fornecemos.

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

    Agora o valor de $my-avatar-schema conterá todas as propriedades de $_light-avatar, mas o valor de background será 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 claro e escuro de acordo com as paletas claro e escuro para criar os temas de componentes. Por exemplo, usar o $light-material-schema junto com o $light-material-palette nos ajudará a criar todos os temas de componentes de material claro. E vice-versa - usar o $dark-material-schema junto com o $dark-material-palette nos dará os temas de componentes de 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 de esquema global para todos os componentes que temos. Então o esquema $light-avatar é armazenado na variável $material-avatar, que é então usada no $light-material-schema global. O mapa $light-material-schema contém todos os nomes de componentes como chaves, e seus esquemas correspondentes como valores. O $light-material-schema se parece com isto:

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

    Fazemos isso para que possamos passar todo o $light-material-schema para o mixin theme. Então, por exemplo, se quiséssemos modificar o $light-material-schema substituindo o esquema de componente padrão 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 aplicado para nosso tema global, e quiséssemos que apenas um componente avatar específico usasse $light-indigo-schema 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.