Referência para personalização completa de cores

Dev
1

Gostaria de criar dois dos meus próprios esquemas de cores onde eu escolho todas as variáveis de cor (não gosto dos valores calculados/transformados).

Existe uma referência para isso? O arquivo json de exemplo neste post:

Apenas tem alguns dos valores listados (parece que os que são personalizáveis por padrão através do painel de administração). Enquanto alguns esquemas de cores que vi, como os WCAG, expõem mais algumas variáveis.

Este post falou sobre a criação de um plugin para personalização avançada de cores: Customizing colors - #10 by awesomerobot

Mas acho que isso não é necessário, se fosse possível apenas ter um arquivo json de referência com todas as variáveis de cor nomeadas que podem ser substituídas, ignorando os valores calculados.

1 curtida
2

Ao inspecionar uma instância do Discourse no seu navegador, você pode encontrar todos os nomes de variáveis raiz na aba de estilos:

image
image394×1320 110 KB

Em seguida, basta declarar as variáveis adicionais no seu arquivo JSON. Por exemplo:

{
  "about_url": null,
  "license_url": null,
  "name": "Esquemas de Cores Completos",
  "color_schemes": {
    "Cores Claras": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Cores Escuras": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

A coisa boa é que essas variáveis também aparecerão no backend:

image
image1632×1747 210 KB

6 curtidas
3

Obrigado — depois que fiz esta postagem, vi que tudo também está listado na página /styleguide > colors de uma instância — presumo que esta seja a lista completa…

Agora estou apenas me perguntando qual é o uso diferente entre as variáveis descritivas (por exemplo, primary-high) e as numeradas (por exemplo, primary-800) e como levar isso em consideração ao criar meu próprio tema.

4

Pelo que sei, são apenas alguns cálculos adicionais e mais refinados que você poderia usar em um tema ou componente de tema. Mas eles não são usados no núcleo do Discourse.

Se você quisesse escrever seu esquema de cores apenas com os valores numerados, poderia redeclarar os descritivos assim em seu tema:

:root {
  --primary-high: var(--primary-800);
}

Mas, então, existem apenas valores numerados para primário e terciário.

1 curtida
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.