Essa biblioteca Sass tem como presente objetivo gerar arquivos css, mixins e functions sass que vão possuir formas e funcionalidades que vão colorir a sua aplicação. O desenvolvedor seta inicialmente as cores base de sua paleta de cores e a partir dessas cores base e script gera uma paleta de cores com níves de cor mais claros e escuros. Além disso, outras classes css/mixins sass vão permitir que o desenvolvedor consiga facilmente atribuir estilos padrão de cor para os seus componentes web.

Para ver em funcionamento visite nossa página demo

Clone o projeto para obter os arquivos sass

git clone https://github.com/LuigiJordanio/gerador-paleta-sass.git

Importe no início de sua folha de estilo:

@import "your-path/pallete";

Coloque todas as suas cores padrão no objeto de cores, você pode colocar quantas cores quiser:

 $colors: (
    color-name: #ff00ff,
    color-name-2: #00ff99
);

Por padrão ele vem com a numeração de 8, quanto maior o número maior vai ser a diferença entra as cores geradas:

$color_scale:8;

Por padrão ele vem com a numeração de 3,o script vai gerar o número desejado de variações mais claras e mais escuras:

$color_number:3;

É gerado automaticamente um classe css que é composta por .bg-{nome-da-color}-{tipo}-{nivel} e um apelido que contém as 3 primeiras letras da cor, primeira letra do tipo e o numeral. .bg-{nom}-{tipo}{nivel}

É gerado automaticamente um classe css que é composta por .tx-{nome-da-color}-{tipo}-{nivel} e um apelido que contém as 3 primeiras letras da cor, primeira letra do tipo e o numeral. .tx-{nom}-{tipo}{nivel}

Para ver em funcionamento visite nossa página demo

Para atribuir borda em todos os cantos do elemento é gerado automaticamente um classe css que é composta por .border-{nome-da-color}-{tipo}-{nivel}

Para atribuir borda em cantos específicos do elemento é gerado automaticamente um classe css que é composta por .border-{canto}-{nome-da-color}-{tipo}-{nivel} e também um apelido que é composto por .br-{canto}-{nome-da-color}-{tipo}{nivel}

Para selecionar e utilizar a cor desejada, você pode utilizar a função que recebe 3 parametros e retorna a cor desejada.

  get-color('color','style','level');

 .custom-primary-darker-1{
   background-color: get-color('primary','darker-1');
   color:get-color('primary','darker-1');
 }

Saída no css

 .custom-primary-darker-1{
   background-color: #000000;
   color:#000000;
 }

Afim de trazer mais comodidade para o desenvolvedor front-end, foram anexados mixins que permitem a atribuição de propriedades css diretamente na sua classe customizada.São eles:

Para atribuir uma cor de fundo para o seu elemento basta inserir a seguinte linha no seu arquivo sass. Os parametros de tipo e level são opcionais, quando não passados, o valor padrão é a cor standard.

 .custom-class{
   @include background-color('color','type-level')
 }

Exemplo:

 .custom-class{
   @include background-color('primary','darker-1')
 }

Saida

 .custom-class{
   background-color: #000000;
 }

Afim de trazer mais comodidade para o desenvolvedor front-end, foram anexados mixins que permitem a atribuição de propriedades css diretamente na sua classe customizada.São eles:

Para atribuir uma cor de fundo para o seu elemento basta inserir a seguinte linha no seu arquivo sass. Os parametros de tipo e level são opcionais, quando não passados, o valor padrão é a cor standard. Ainda existe um terceiro parametro para a passagem de uma cor com opacidade

 .custom-class{
   @include background-color('color','type-level');
 }

Exemplos:

 .custom-class-darker{
   @include background-color('primary','darker-1');
 }
 .custom-class{
   @include background-color('primary');
 }
 .custom-class-darker-opacity{
   @include background-color('primary','darker-1', 0.5);
 }

Saida

  .custom-class-darker{
   background-color: #000000;
 }
 .custom-class{
   background-color: #00FF00;
 }
 .custom-class-darker-opacity{
   background-color: rgba(0,0,0,.5);
 }

Para atribuir uma border com uma cor específica para o seu elemento basta inserir a seguinte linha no seu arquivo sass. Os parametros de tipo e level são opcionais, quando não passados, o valor padrão é a cor standard. Ainda existe um terceiro parametro para a passagem de uma cor com opacidade. Quando o parametro de direção não for passado, ele implementara a cor da borda em todos os cantos.

 .custom-class{
   @include border-color('color','type','opacity','direction');
 }

Exemplos:

 .custom-border-darker{
   @include border-color('primary','darker-1');
 }
 .custom-class{
   @include border-color('primary');
 }
 .custom-class-darker-opacity-top{
   @include border-color('primary','darker-1', 0.5,'top');
 }

Saída no css:

 .custom-border-darker{
   border-color:#00f000;
 }
 .custom-class{
   border-color:#00f000;
 }
 .custom-class-darker-opacity-top{
   border-top-color:rgba(0,0,0,.5);
 }

Para atribuir uma cor de texto para o seu texto basta inserir a seguinte linha no seu arquivo sass. Os parametros de tipo e level são opcionais, quando não passados, o valor padrão é a cor standard. Ainda existe um terceiro parametro para a passagem de uma cor com opacidade

  @include color('color','type-level');

Exemplos:

 .custom-class-darker{
   @include color('primary','darker-1');
 }
 .custom-class{
   @include color('primary');
 }
 .custom-class-darker-opacity{
   @include color('primary','darker-1', 0.5);
 }

Para atribuir uma cor de fundo em gradient para o seu elemento basta inserir a seguinte linha no seu arquivo sass. São recebido como parametro dois valores de em hexadecimal, pode ser utilizado com a função get-color()

   @include background-gradient(get-color('color'),get-color('color-2'));

Exemplos:

 .custom-class-gradient{
   @include background-gradient(get-color('color'),get-color('color-2'));
 }

 .custom-class-hex{
   @include background-gradient('#FFFFFF','#000000');
 }

Para atribuir uma cor de fundo em gradient para o seu elemento basta inserir a seguinte linha no seu arquivo sass. São recebido como parametro dois valores de em hexadecimal, pode ser utilizado com a função get-color()

   @include color-gradient(get-color('color'),get-color('color-2'));

Exemplos:

 .custom-class-gradient{
   @include color-gradient(get-color('color'),get-color('color-2'));
 }

 .custom-class-hex{
   @include color-gradient('#FFFFFF','#000000');
 }

• Automatizar teste de constraste de cor
• Criar snippet codes Vs Studio e outros editores de texto
• Criar biblioteca de cores para softwares de prototipação, ex: Figma, Sketch, Adobe XD, etc.
• Criar webpack npm para gerar palleta de cores a partir de comandos.
• Criar página de demo.

MIT

** Software livre**