Solucionado
Olá! Tudo bom com vocês?
Fiquei com uma dúvida em relação a esse data-contexto na tag html, porque é a primeira vez que eu vejo algo assim. É alguma propriedade da tag ou é algo que pode ser declarado, semelhante ao que é feito com uma classe?
Desde já, agradeço!
Oi Iury, tudo bem?
O atributo data-contexto na tag HTML é um data attribute. Os data attributes são atributos personalizados que podem ser adicionados a elementos HTML para armazenar informações adicionais. Eles seguem a convenção data-*, onde * pode ser substituído por qualquer nome que você desejar.
No caso específico do data-contexto, ele está sendo utilizado para definir o contexto da página. No exemplo que você compartilhou, o valor do data-contexto está sendo alterado dinamicamente através de eventos de clique em botões. Dependendo do valor do data-contexto, o estilo da página é modificado.
Por exemplo, no CSS fornecido, temos as seguintes regras:
[data-contexto="foco"] {
--main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
}
[data-contexto="descanso-curto"] {
--main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%);
}
[data-contexto="descanso-longo"] {
--main-bg-color: linear-gradient(180deg, #1875E9 0%, #041832 48.44%, #01080E 100%);
}
Essas regras definem diferentes cores de fundo (--main-bg-color) para cada valor do data-contexto. Portanto, quando o valor do data-contexto é alterado, o estilo da página é atualizado de acordo.
É importante ressaltar que o data-contexto é apenas um exemplo de uso de data attributes. Você pode criar seus próprios data attributes para armazenar informações adicionais nos elementos HTML, como identificadores únicos, valores específicos para manipulação com JavaScript, entre outros.
Espero ter esclarecido sua dúvida.
Um abraço e bons estudos.
Muitíssimo obrigado, Lorena, ajudou muito sim!