Quadrados de Tema

AVISO:

Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.

O que isto é

Um componente que exibe um monte de quadrados coloridos para mostrar a elegância de um tema CSS.

Projetado por WoedenazWoedenaz e componentizado por CroquemboucheCroquembouche.

Este componente é projetado para ser usado para temas CSS, mas pode ser usado em quase qualquer página, se você realmente quiser.

Uso

Em qualquer wiki:

[[include :scp-pt-br:component:theme-squares -=-
| color1-name=Minha Cor Favorita
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

Note o "-=-" após o nome do componente. Você precisa incluir isso — caso contrário todo este texto explicando como usar o componente irá aparecer na sua página.

Para este componente, há três parâmetros por cor. Troque N com o número da cor.

colorN-name O nome da cor. Escolha o que quiser!
colorN-variable O nome da variável CSS que contém esta cor.
A variável deve conter três números separados por vírgulas representando os valores RGB da cor. Isso é consistente com variáveis estilo BHL.
Se suas variáveis contiverem outra coisa (e.g. uma cor RGB/RGBA completa ou hex), você terá que sobrepor a cor do fundo de cada quadrado de tema manualmente com CSS.
colorN-info Informação sobre a cor. Exibir os valores RGB é típico. Deixe curto.
Se você não quer nenhum texto, acrescente @@ @@ em vez.
colorN-has-light-text
Opcional. Padrão: 0
Ou 0 ou 1. Determina a cor da fonte no quadrado. Útil para certificar que há contraste suficiente entre a cor do fundo e a cor do texto.
Se 1, o valor de --swatch-text-light é usado, ou branco (255, 255, 255) se não for definido. Caso contrário --swatch-text-dark, ou preto (0, 0, 0). Como todas as variáveis de cor CSS estilo BHL, três números representando valores RGB são esperados.

Uma cor só pode ser usada se for exposta como uma variável CSS. Todas as cores em um tema Black Highlighter têm uma variável CSS por padrão, então para temas BHL, este componente deve funcionar sem problema. Porém, sigma9 não usa variáveis CSS, então as únicas variáveis CSS que estão disponíveis são as que você definiu no seu tema.

Este componente pode suportar um máximo de 6 cores primárias e 12 cores secundárias. Eu recomendo duas cores primárias e não mais que seis cores secundárias.

Para acrescentar uma cor primária, apenas acrescente os três primeiros dos parâmetros acima à inclusão, como mostrado no exemplo.

Para acrescentar uma cor secundária, é a mesma coisa, mas troque 'color' por 'subcolor'.

Exemplo

Aqui está um exemplo maior, tirado de um tema Black Highlighter:

[[include :scp-pt-br:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

Isto produz os seguintes quadrados coloridos:

bhl-squares.png

Ajustes

Você pode ajustar a aparência do componente com CSS.

O componente inteiro tem a classe .colors-container, e qualquer CSS que o alveja deve incluir essa classe para certificar que nenhuma outra coisa na página seja afetada. Cada quadrado colorido tem a classe .color. As cores primárias têm um parent .colors e as cores secundárias têm um parent .subcolors.

Você irá precisar usar !important para sobrepor o fundo de um quadrado.

Por exemplo, o Tema Laughter and Knives acrescenta um fundo gradiente à nona cor secundária assim:

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

Ferramenta para converter sintaxes existentes em argumentos para este componente

{$color1-name}{$color1-variable}{$color1-info}
{$color2-name}{$color2-variable}{$color2-info}
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}
{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License