Foundation

Cores & Gradients

Matriz semântica, escala cromática completa e parte de padronizações para fundos, textos e bordas.

1. Padronização Semântica

Classes utilitárias curtas e práticas para as cores de estado do Y2.

Fundos (.B...)

.Bprin
.Bsecu
.Bsuce
.Bperi
.Binfo
.Baler

Textos (.T...)

.Tprin Texto
.Tsecu Texto
.Tsuce Texto
.Tperi Texto
.Tinfo Texto
.Taler Texto

Bordas (.L...)

.Lprin
.Lsecu
.Lsuce
.Lperi
.Linfo
.Laler

2. Galeria Cromtica Completa

Todas as famílias de cores com seus 7 níveis de intensidade, opacidades (1-4) e degradês.

3. Degradês Puros (Sistema .dgX)

20 camadas de gradiente que podem ser combinadas com qualquer cor.

4. Tipografia Cromática (Text Gradients)

Aplique gradientes diretamente nos textos usando .T{cor}D.

Âmbar

.TambaD

Esmeralda

.TesmeD

Água

.TaguaD

Céu

.TceuD

Fúcsia

.TfuchD

Violeta

.TviolD

5. Padronização Day/Night Mode

Segue base de cores e esquema para o Y2Day.

    BG [.y2-bg / .By2-bg...]
  • .y2-bg--y2-bg
  • .y2-bg---y2-bg-
  • .y2-bg----y2-bg--
  • .y2-bg-----y2-bg---
  • .y2-bg_--y2-bg_
  • .y2-bg__--y2-bg__
  • .y2-bg___--y2-bg___
    BL [.y2-bl / .By2-bl...]
  • .y2-bl--y2-bl
  • .y2-bl---y2-bl-
  • .y2-bl----y2-bl--
  • .y2-bl-----y2-bl---
  • .y2-bl_--y2-bl_
  • .y2-bl__--y2-bl__
  • .y2-bl___--y2-bl___
    COLOR [.Ty2-color...]
  • .Ty2-color--y2-color
  • .Ty2-color---y2-color-
  • .Ty2-color----y2-color--
  • .Ty2-color-----y2-color---
  • .Ty2-color_--y2-color_
  • .Ty2-color__--y2-color__
  • .Ty2-color___--y2-color___
SHADOW [.y2-shadow...]
  • .y2-shadow
  • .y2-shadow-
  • .y2-shadow--
  • .y2-shadow---
  • .y2-shadow_
BORDER [.y2-border...]
  • .y2-border
  • .y2-border-
  • .y2-border--
  • .y2-border_

Referência Completa

Padrões de classes utilitárias e variáveis CSS disponíveis para cada família cromática.

Classes Utilitárias por Família

Famlia Cor semântica Texto .T{fam} Texto grad. .T{fam}D Background .B{fam} Variável CSS
prin Primária .Tprin .TprinD .Bprin --prin / --y2-pri
secu Secundária .Tsecu .TsecuD .Bsecu --secu / --y2-sec
suce Sucesso .Tsuce .TsuceD .Bsuce --suce / --y2-suc
aler Alerta .Taler .TalerD .Baler --aler / --y2-ale
info Informação .Tinfo .TinfoD .Binfo --info / --y2-inf
peri Perigo .Tperi .TperiD .Bperi --peri / --y2-per
verm Vermelho (0°) .Tverm .TvermD .Bverm --verm
lara Laranja (20°) .Tlara .TlaraD .Blara --lara
amba Âmbar (40°) .Tamba .TambaD .Bamba --amba
amar Amarelo (60°) .Tamar .TamarD .Bamar --amar
lima Lima (80°) .Tlima .TlimaD .Blima --lima
verd Verde (100°) .Tverd .TverdD .Bverd --verd
esme Esmeralda (160°) .Tesme .TesmeD .Besme --esme
cian Ciano (180°) .Tcian .TcianD .Bcian --cian
agua Água (200°) .Tagua .TaguaD .Bagua --agua
azul Azul (220°) .Tazul .TazulD .Bazul --azul
ceu Céu (240°) .Tceu .TceuD .Bceu --ceu
indi Índigo (260°) .Tindi .TindiD .Bindi --indi
viol Violeta (280°) .Tviol .TviolD .Bviol --viol
roxo Roxo (300°) .Troxo .TroxoD .Broxo --roxo
fuch Fúcsia (320°) .Tfuch .TfuchD .Bfuch --fuch
rosa Rosa (330°) .Trosa .TrosaD .Brosa --rosa
rose Rose (340°) .Trose .TroseD .Brose --rose
bg Fundo UI .Tbg .TbgD .Bbg --bg
texto Texto UI .Ttexto .TtextoD .Btexto --texto
linhas Linhas UI .Tlinhas .TlinhasD .Blinhas --linhas

Tokens por Família (escala de tom)

Token Var CSS Uso típico Classe texto Classe bg
--{fam} tom base Botões, badges .T{fam} .B{fam}
--{fam}- tom claro 1 Hover claro .T{fam}- .B{fam}-
--{fam}-- tom claro 2 - .T{fam}-- .B{fam}--
--{fam}--- tom claro 3 - .T{fam}--- .B{fam}---
--{fam}_ tom escuro 1 Hover escuro .T{fam}_ .B{fam}_
--{fam}__ tom escuro 2 - .T{fam}__ .B{fam}__
--{fam}___ tom escuro 3 - .T{fam}___ .B{fam}___
--{fam}13 10% opacidade Fundos suaves, badges - .B{fam}13
--{fam}14 20% opacidade - - .B{fam}14

Gradientes Decorativos

Classe Tipo Preview
.DG1 - .DG20 background gradiente
DG1DG5DG10DG15DG20
.T[família]D texto com gradiente Texto gradiente primário