Este é o repositório de Tokens para os projetos GOVBR-DS.
Esse projeto é desenvolvido usando:
- Baixe o pacote de tokens usando o comando:
npm install --save @govbr-ds/tokens; - Dentro da pasta dist encontram-se vários formatos compilados;
- Carregue o formato adequado no seu projeto.
Exemplo CSS:
<head>
<!-- Tokens -->
<link rel="stylesheet" href="diretorio-dos-tokens/dist/css/tokens.css" />
<!-- Temas -->
<link rel="stylesheet" href="diretorio-dos-tokens/dist/css/themes/light.css" />
<link rel="stylesheet" href="diretorio-dos-tokens/dist/css/themes/dark.css" />
</head>Exemplo SCSS:
// Tokens
@import "diretorio-dos-tokens/dist/scss/tokens";
// Temas
@import "diretorio-dos-tokens/dist/scss/themes/light";
@import "diretorio-dos-tokens/dist/scss/themes/dark";Use o atributo data-br-theme para configurar o tema.
Recomendamos que ele seja aplicado na tag HTML de maior hierarquia. Veja os exemplos a seguir:
-
Uso na tag HTML:
<html data-br-theme="light"> <head>...</head> <body>...</body> </html>
-
Uso na tag BODY:
<html> <head>...</head> <body data-br-theme="light">...</body> </html>
-
Uso na tag DIV:
<html> <head>...</head> <body> <div data-br-theme="light">...</div> </body> </html>
Aplique o exemplo mais adequável ao seu projeto.
O uso dos tokens varia de acordo da tecnologia, assim como a formação dos seus nomes.
- Em CSS e SCSS é usado o padrão kebab case
- Em JS é usado o padrão camel case.
Os tokens CSS são usados como variáveis CSS. Aprenda mais sobre var() em https://developer.mozilla.org/pt-BR/docs/Web/CSS/var.
.seletor-1 {
background-color: var(--color-red-50);
color: var(--color-pure-100);
margin: var(--spacing-layout-03);
padding: var(--spacing-layout-01);
}
.seletor-2 {
background-color: var(--theme-interactive-main);
color: var(--theme-interactive-text-main);
}Recomendamos usar os tokens como variáveis CSS para manter a compatibilidade com os temas. Exemplo:
.seletor {
background-color: var(--color-pure-0);
color: var(--color-pure-100);
margin: var(--spacing-layout-03);
padding: var(--spacing-layout-01);
// Cria as variações
@each $type in "success", "alert", "error" {
&-#{$type} {
background-color: var(--theme-#{$type}-main);
color: var(--theme-#{$type}-text);
}
}
}Caso haja necessidade, os tokens SCSS estão disponíveis no formato map. Aprenda mais sobre esse formato em https://sass-lang.com/documentation/values/maps/.
- Faça o clone deste repositório usando
git clone git@gitlab.com:govbr-ds/ds/govbr-ds-tokens.git - Baixe todas as dependências do projeto usando
npm install - Localize os tokens na pasta 'src' e faça as modificações necessárias
- Compile os novos tokens usando
npm run build
Por favor não crie issues para fazer perguntas...
Use nossos canais abaixo para obter tirar suas dúvidas:
-
Site do GovBR-DS http://gov.br/ds
-
Pelo nosso email govbr-ds@serpro.gov.br
-
Usando nosso canal no discord https://discord.gg/U5GwPfqhUP
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa wiki para aprender sobre os nossos padrões.
Os Web Components do GovBR-DS são criados pelo SERPRO e Dataprev juntamente com a participação da comunidade.
Nesse projeto usamos a licença MIT.