Skip to main content

Color

O Ugla oferece um conjunto de cores que podem se usada de diversas maneiras.

Classes

As cores base do Ugla são: aquamarine, red, green, yellow, red e gray, e para cada um existe uma classe que adiciona o atributo color.

ClassCorHexadecimalRepresentação
.color-grayCinza#656565img
.color-redVermelha#D71F3Cimg
.color-purpleRoxo#641E75img
.color-aquamarineAquamarine#20BEC6img
.color-greenVerde#20C67Bimg
.color-yellowAmarelo#F2B838img

Além das classes para color, o Ugla oferece também classes para o atributo background:

ClassCorHexadecimalRepresentação
.background-grayCinza#656565img
.background-redVermelha#D71F3Cimg
.background-purpleRoxo#641E75img
.background-aquamarineAquamarine#20BEC6img
.background-greenVerde#20C67Bimg
.background-yellowAmarelo#F2B838img

SCSS

Mas existem outras maneiras de usar a cores, uma delas é com uma function do SCSS: color(). Para fazer uso da função, basta chamá-la a frente de um atributo de cor, passando o nome do theme e a tonalidade da cor desejada. Os temas são: aquamarine, red, green, yellow, red e gray, além desses temos um agrupador chamado others que contém outras cores necessárias. As intencidades de cor são: extra-light, light, medium, dark. Todo tema precisa iniciar com _.

Exemplo

p {
color: color(_aquamarine, medium);
}

div {
background-color: color(_gray, dark);
}

Tabela de cores

img

ThemeExtra LightLightMediumDark
Gray#d9d9d9#999999#444444#222222
Red#e09ec6#e27887#d71f3c#9f0e0e
Purple#954b97#823193#641e75#491f53
Aquamarine#9ed6e5#7fced6#20bec6#20acb4
Green#9ee5d1#7fd6b3#20c67b#20b472
Yellow#fbe96a#fbd068#f2b838#f39200

Others

O others possuí diversos atributos e seu uso é:

p {
color: color(_others, <variante>)
}

img

VarianteRepresentação
light#fff
dark#444444
dark-alphargba(68, 68, 68, .67);
shadow#b6b6b6;
text-shadow#999999;
body#f2f0f0;
body-alphargba(242, 240, 240, .9);
light-alphargba(255, 255, 255, 0);