Cores Color, bg, Degrade

Cores
Degrades
Opacidades
Color Texto

Cores
                .bg-{cor}(0|16) = Background-Color;

                Ex.: .bg-cinz10 | .bg-amar5 | .bg-principal
            
Cores PadrõesPrincipal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno
Corespreto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

                          
                
                    <span class="bg-verm1">
                        bg-verm1
                    </span>
                    <span class="bg-amar7">
                        bg-amar7
                    </span>
                    <span class="c-verd15">
                        bg-verd15
                    </span>
                    <span class="c-azul8">
                        bg-azul8
                    </span>
                
              
            
        

            Cores Primarias [.bg-{cor}[1-16]]
principal
secundária
sucesso
infor
alerta
perigo
claro
Noturno

        

            Neutro [.bg-neut[1-19]]
neut
neut1
neut2
neut3
neut4
neut5
neut6
neut7
neut8
neut9
neut10
neut11
neut12
neut13
neut14
neut15
neut16
neut17
neut18
neut19
bran
pret

        

            Cinza [.bg-cinz[1-16]]
cinz
cinz1
cinz2
cinz3
cinz4
cinz5
cinz6
cinz7
cinz8
cinz9
cinz10
cinz11
cinz12
cinz13
cinz14
cinz15
cinz16

        

            Zinco [.bg-zinc[1-16]]
zinc
zinc1
zinc2
zinc3
zinc4
zinc5
zinc6
zinc7
zinc8
zinc9
zinc10
zinc11
zinc12
zinc13
zinc14
zinc15
zinc16

        

            Pedra [.bg-pedr[1-16]]
pedr
pedr1
pedr2
pedr3
pedr4
pedr5
pedr6
pedr7
pedr8
pedr9
pedr10
pedr11
pedr12
pedr13
pedr14
pedr15
pedr16

        

            Vermelho [.bg-verm[1-16]]
verm
verm1
verm2
verm3
verm4
verm5
verm6
verm7
verm8
verm9
verm10
verm11
verm12
verm13
verm14
verm15
verm16

        

            Laranja [.bg-lara[1-16]]
lara
lara1
lara2
lara3
lara4
lara5
lara6
lara7
lara8
lara9
lara10
lara11
lara12
lara13
lara14
lara15
lara16

        

            Amarelo [.bg-amar[1-16]]
amar
amar1
amar2
amar3
amar4
amar5
amar6
amar7
amar8
amar9
amar10
amar11
amar12
amar13
amar14
amar15
amar16

        

            Marron [.bg-marr[1-16]]
marr
marr1
marr2
marr3
marr4
marr5
marr6
marr7
marr8
marr9
marr10
marr11
marr12
marr13
marr14
marr15
marr16

        

            Limão [.bg-lima[1-16]]
lima
lima1
lima2
lima3
lima4
lima5
lima6
lima7
lima8
lima9
lima10
lima11
lima12
lima13
lima14
lima15
lima16

        

            Verde [.bg-verd[1-16]]
verd
verd1
verd2
verd3
verd4
verd5
verd6
verd7
verd8
verd9
verd10
verd11
verd12
verd13
verd14
verd15
verd16

        

            Petrólio [.bg-petr[1-16]]
petr
petr1
petr2
petr3
petr4
petr5
petr6
petr7
petr8
petr9
petr10
petr11
petr12
petr13
petr14
petr15
petr16

        

            Cian [.bg-cian[1-16]]
cian
cian1
cian2
cian3
cian4
cian5
cian6
cian7
cian8
cian9
cian10
cian11
cian12
cian13
cian14
cian15
cian16

        

            Céu [.bg-ceu[1-16]]
ceu
ceu1
ceu2
ceu3
ceu4
ceu5
ceu6
ceu7
ceu8
ceu9
ceu10
ceu11
ceu12
ceu13
ceu14
ceu15
ceu16

        

            Azul [.bg-azul[1-16]]
azul
azul1
azul2
azul3
azul4
azul5
azul6
azul7
azul8
azul9
azul10
azul11
azul12
azul13
azul14
azul15
azul16

        

            Indigo [.bg-indi[1-16]]
indi
indi1
indi2
indi3
indi4
indi5
indi6
indi7
indi8
indi9
indi10
indi11
indi12
indi13
indi14
indi15
indi16

        

            Violeta [.bg-viol[1-16]]
viol
viol1
viol2
viol3
viol4
viol5
viol6
viol7
viol8
viol9
viol10
viol11
viol12
viol13
viol14
viol15
viol16

        

            Roxo [.bg-roxo[1-16]]
roxo
roxo1
roxo2
roxo3
roxo4
roxo5
roxo6
roxo7
roxo8
roxo9
roxo10
roxo11
roxo12
roxo13
roxo14
roxo15
roxo16

        

            Lilás [.bg-lila[1-16]]
lila
lila1
lila2
lila3
lila4
lila5
lila6
lila7
lila8
lila9
lila10
lila11
lila12
lila13
lila14
lila15
lila16

        

            Rosa [.bg-rosa[1-16]]
rosa
rosa1
rosa2
rosa3
rosa4
rosa5
rosa6
rosa7
rosa8
rosa9
rosa10
rosa11
rosa12
rosa13
rosa14
rosa15
rosa16

        

            Rose [.bg-rose[1-16]]
rose
rose1
rose2
rose3
rose4
rose5
rose6
rose7
rose8
rose9
rose10
rose11
rose12
rose13
rose14
rose15
rose16

        
:rootVocê tambem pode usar as variaveis globais, tanto no seu proprio css como alterar no swcss.css.
Exemplo: --cor[0-30] | --cinz10 | var(--cinz10)

                todas variaveis consiste em:

            

                    cor

                    os primeiros 4 digitos da cor.
                

                    [0|16]

                    variações da cor. Sendo a 10 a cor padrão da mesma.
                

                    [17|20]

                    opacidade da cor. 10% 25% 50% 75%
                

                          
                
                <style>
                    .cor-opc1{
                        background-color: var(--cinz10);
                    }
                    .cor-opc2{
                        background-color: var(--vermz16);
                    }
                    .cor-opc3{
                        background-color: var(--ceu6);
                    }
                </style>
                
              
            
        

Degrades
                .bg-{color}-deg(1|10) = Background-Color Degrade;

                Ex.: .bg-cinz-deg10 | .bg-amar-deg5 | .bg-principal5
            
Corespreto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

                          
                
                    <span class="bg-verm-deg1">
                        bg-verm-deg1
                    </span>
                    <span class="bg-pedr-deg3">
                        bg-pedr-deg3
                    </span>
                    <span class="bg-verm-deg10">
                        bg-verm-deg10
                    </span>
                    <span class="bg-azul-deg7">
                        bg-azul-deg7
                    </span>                  
                
              
            
        

            Principal [.bg-principal[1-10]]
principal1
principal2
principal3
principal4
principal5
principal6
principal7
principal8
principal9
principal10

        

            Secundária [.bg-secundaria[1-10]]
secundaria1
secundaria2
secundaria3
secundaria4
secundaria5
secundaria6
secundaria7
secundaria8
secundaria9
secundaria10

        

            Sucesso [.bg-sucesso[1-10]]
sucesso1
sucesso2
sucesso3
sucesso4
sucesso5
sucesso6
sucesso7
sucesso8
sucesso9
sucesso10

        

            Infor [.bg-infor[1-10]]
infor1
infor2
infor3
infor4
infor5
infor6
infor7
infor8
infor9
infor10

        

            Alerta [.bg-alerta[1-10]]
alerta1
alerta2
alerta3
alerta4
alerta5
alerta6
alerta7
alerta8
alerta9
alerta10

        

            Perigo [.bg-perigo[1-10]]
perigo1
perigo2
perigo3
perigo4
perigo5
perigo6
perigo7
perigo8
perigo9
perigo10

        

            Claro [.bg-claro[1-10]]
claro1
claro2
claro3
claro4
claro5
claro6
claro7
claro8
claro9
claro10

        

            Noturno [.bg-noturno[1-10]]
noturno1
noturno2
noturno3
noturno4
noturno5
noturno6
noturno7
noturno8
noturno9
noturno10

        

            Neutro [.bg-neut-deg[1-10]]
neut-deg1
neut-deg2
neut-deg3
neut-deg4
neut-deg5
neut-deg6
neut-deg7
neut-deg8
neut-deg9
neut-deg10

        
.degVocê pode criar seus proprios degrade com quaisquer cor: 

                .deg(1|10) = Background-Color Degrade;

                Ex.: .deg1 | .deg10


                Coloque a cor em seguida o tipo de degrade q vc deseja.
            

                Opcionais
1
2
3
4
5
6
7
8
9
10

            
             
               
                 <div class="bg-cinz10 deg1"></div>
               
             
           

                Opcionais
1
2
3
4
5
6
7
8
9
10

            
              
                
                    <div class="bg-azul10 deg1">1</div>
                    <div class="bg-rose6 deg2">2</div>
                    <div class="bg-lila14 deg3">3</div>
                    <div class="bg-amar deg4">4</div>
                    <div class="bg-verd8 deg5">5</div>
                    <div class="bg-ceu9 deg6">6</div>
                    <div class="bg-verm10 deg7">7</div>
                    <div class="bg-lara deg8">8</div>
                    <div class="bg-roxo deg9">9</div>
                    <div class="bg-petr deg10">10</div>
                
              
            
:rootVocê tambem pode usar as variaveis globais, tanto no seu proprio css como alterar no swcss.css.
Exemplo: --deg[1-10] | --deg10 | var(--deg5)

                todas variaveis consiste em:

            

                    deg

                    as dez posições conforme o grau:

                    0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°

                    Alem de 02 circle [interno e externo].
                

                          
                
                <style>
                    .deg-opc1{
                        background: var(--deg5);
                        background-color: var(--verm5);
                    }
                    .deg-opc2{
                        background: var(--deg3);
                        background-color: var(--lila15);
                    }
                    .deg-opc3{
                        background: var(--deg1);
                        background-color: var(--cinz10);
                    }
                </style>
                
              
            
        

Opacidades [em Background]

.bg-{cor}-opa(1|4) = Opacidade: 10%, 25%, 50%, 75%;

.bg-{cor}-opa1 = Opacidade: 10%;
.bg-{cor}-opa2 = Opacidade: 25%;
.bg-{cor}-opa3 = Opacidade: 50%;
.bg-{cor}-opa4 = Opacidade: 75%;

Cores

preto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

              
                
                    <span class="bg-verm-opa3">
                        bg-opacidade-verm-3
                    </span>
                    <span class="bg-pedr-opa1">
                        bg-opacidade-pedr-1
                    </span> 
                    <span class="bg-amba-opa3">
                        bg-opacidade-amba-3
                    </span>

Cinza [.bg-cinz-opa[1-4]] ( 10% - 25% - 50% 75% )

cinz-opa1
cinz-opa2
cinz-opa3
cinz-opa4

Zinco [.bg-zinc-opa[1-4]] ( 10% - 25% - 50% 75% )

zinc-opa1
zinc-opa2
zinc-opa3
zinc-opa4

Pedra [.bg-pedr-opa[1-4]] ( 10% - 25% - 50% 75% )

pedr-opa1
pedr-opa2
pedr-opa3
pedr-opa4

Vermelho [.bg-verm-opa[1-4]] ( 10% - 25% - 50% 75% )

verm-opa1
verm-opa2
verm-opa3
verm-opa4

Laranja [.bg-lara-opa[1-4]] ( 10% - 25% - 50% 75% )

lara-opa1
lara-opa2
lara-opa3
lara-opa4

Amarelo [.bg-amar-opa[1-4]] ( 10% - 25% - 50% 75% )

amar-opa1
amar-opa2
amar-opa3
amar-opa4

Marron [.bg-marr-opa[1-4]] ( 10% - 25% - 50% 75% )

marr-opa1
marr-opa2
marr-opa3
marr-opa4

Limão [.bg-lima-opa[1-4]] ( 10% - 25% - 50% 75% )

lima-opa1
lima-opa2
lima-opa3
lima-opa4

Verde [.bg-verd-opa[1-4]] ( 10% - 25% - 50% 75% )

verd-opa1
verd-opa2
verd-opa3
verd-opa4

Petróleo [.bg-petr-opa[1-4]] ( 10% - 25% - 50% 75% )

petr-opa1
petr-opa2
petr-opa3
petr-opa4

Cian [.bg-cian-opa[1-4]] ( 10% - 25% - 50% 75% )

cian-opa1
cian-opa2
cian-opa3
cian-opa4

Céu [.bg-ceu-opa[1-4]] ( 10% - 25% - 50% 75% )

ceu-opa1
ceu-opa2
ceu-opa3
ceu-opa4

Azul [.bg-azul-opa[1-4]] ( 10% - 25% - 50% 75% )

azul-opa1
azul-opa2
azul-opa3
azul-opa4

Indigo [.bg-indi-opa[1-4]] ( 10% - 25% - 50% 75% )

indi-opa1
indi-opa2
indi-opa3
indi-opa4

Violeta [.bg-viol-opa[1-4]] ( 10% - 25% - 50% 75% )

viol-opa1
viol-opa2
viol-opa3
viol-opa4

Roxo [.bg-roxo-opa[1-4]] ( 10% - 25% - 50% 75% )

roxo-opa1
roxo-opa2
roxo-opa3
roxo-opa4

Lilás [.bg-lila-opa[1-4]] ( 10% - 25% - 50% 75% )

lila-opa1
lila-opa2
lila-opa3
lila-opa4

Rosa [.bg-rosa-opa[1-4]] ( 10% - 25% - 50% 75% )

rosa-opa1
rosa-opa2
rosa-opa3
rosa-opa4

Rose [.bg-rose-opa[1-4]] ( 10% - 25% - 50% 75% )

rose-opa1
rose-opa2
rose-opa3
rose-opa4

Preto [.bg-pret-opa[1-4]] ( 10% - 25% - 50% 75% )

pret-opa1
pret-opa2
pret-opa3
pret-opa4

Branco [.bg-bran-opa[1-4]] ( 10% - 25% - 50% 75% )

bran-opa1
bran-opa2
bran-opa3
bran-opa4

Textos
                .t-{cor padrão} =Cores Padrões;

                .t-{cor}[1|16] = Cores;

                .t-{cor}-d = Cores Degrade;

            
Cores PadrõesPrincipal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno
Corespreto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

                          
                
                    <span class="t-principal">
                        texto-principal
                    </span>
                    <span class="t-alerta">
                        texto-alerta
                    </span>
                    <span class="t-zinc10">
                        text-zinc10
                    </span>
                    <span class="t-verm16">
                        texto-verm16
                    </span>                  
                
              
            
        
Texto cores primariasPrincipal
Secundária
Sucesso
Infor
Alerta
Perigo
Noturno
Claro


cinz11
amar14
lila10
verm8
marr12
verd10
rose
pret


Texto cores em Degrade
                .t-{cor}-deg =Cores Padrões;

                Ex.: .t-cinz-deg | t-amar-deg | t-sucesso-deg | t-infor-deg

                (Texto em degrade não aceita background)
            
Cores PadrõesPrincipal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno
Corespreto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).
Principal
Secundária
Sucesso
Infor
Alerta
Perigo
Noturno
Claro
Neutro
Cinza
Zinco
Pedra
Vermelho
Laranja
Amarelo
Marron
Limão
Verde
Petrólio
Cian
Céu
Azul
Indigo
Violeta
Roxo
Lilás
Rosa
Rose
Preto
Branco
Opacidade em Texto
                .t-{cor}-opa[1|4] =10% 25% 50% 75%

                Ex.: .t-cinz-opa1 | t-amar-opa4 | t-sucesso-opa2

                (Texto em degrade não aceita background)
            
Cores PadrõesPrincipal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno
Corespreto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

                              
                    
                    <span class="t-principal-opa4">
                        texto-principal-75%
                    </span>
                    <span class="t-alerta-opa2">
                        texto-alerta-25%
                    </span>
                    <span class="t-zinc-opa3">
                        text-zinc-50%
                    </span>
                    <span class="t-verm-opa1">
                        texto-verm-10%
                    </span> 
                    
                  
                
        
Principal 10%
Secundária 25%
Sucesso 50%
Infor 75%
Alerta 10%
Perigo 25%
Noturno 50%
Lilas 75%
Petróleo 10%
Rose 25%
Marron 50%
Vermelho 75%