Suporte de variável de cor para botões de exibição de cartão

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 1 min. de leitura
  • Saiba como usar variáveis de cor para mudar o tema dos botões de exibição do cartão móvel.

    Use variáveis de cor em atributos de elemento de modelo de cartão para controlar valores de cor para botões de ícone em seus cartões móveis.

    As seguintes variáveis de cor estão disponíveis para uso:
    • VariávelCorDefundo
    • BorderColorVariable
    • TextColorVariable

    Para obter mais informações sobre esses atributos, consulte Atributos de elemento do modelo de cartão.

    Variável de cor usada em um elemento de modelo de exibição de cartão

    Guia de estilo do botão

    Cor Exemplo Variáveis
    Primário Exemplo de botão primário
    Plano de Fundo

    Variável móvel: primária

    Variável da web: now-color--primary-1

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable

    Secundário(a) Exemplo de botão secundário
    Plano de Fundo

    Variável móvel: plano de fundo primário

    Variável da web: now-color_background--primary

    Texto

    Variável móvel: primária

    Variável da web: now-color--primary-1

    Borda (2px)

    Variável móvel: primária

    Variável da web: now-color--primary-1

    Positivo Exemplo de botão positivo
    Plano de Fundo

    Variável móvel: positivo

    Variável da Web: now-color_alert--positive-3

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable

    Destrutivo Exemplo de botão destrutivo
    Plano de Fundo

    Variável móvel: destrutiva

    Variável da web: now-color_alert--critical-3

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable

    Simples Exemplo de botão simples
    Plano de Fundo

    Variável móvel: Primário/Positivo/Destrutivo

    Variável da web: now-color--primary-1/

    now-color_alert--positive-3/

    now-color_alert--critical-3

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable

    Nota:
    Este botão pode ser configurado com cores primárias, positivas ou destrutivas.
    Desativado Exemplo de botão desabilitado

    Use este estilo quando a ação estiver indisponível off-line.

    Pode ser usado com todos os estilos: primário, secundário, texto/ícone.