Referencia para personalización a todo color

Desarrollador
1

Me gustaría crear dos esquemas de color propios en los que elija todas las variables de color (no me gustan los valores calculados/transformados).

¿Hay alguna referencia para esto? El archivo JSON de ejemplo en esta publicación:

Solo tiene algunos de los valores listados (parece que son los que se pueden personalizar por defecto a través del panel de administración). Mientras que algunos esquemas de color que he visto, como los WCAG, exponen algunas variables más.

Esta publicación habló sobre la creación de un plugin para la personalización avanzada de colores: Customizing colors - #10 by awesomerobot

Pero no creo que sea necesario, si fuera posible simplemente tener un archivo JSON de referencia con todas las variables de color con nombre que se pueden anular, omitiendo los valores calculados.

1 me gusta
2

Cuando inspeccionas una instancia de discourse en tu navegador, puedes encontrar todos los nombres de variables raíz en la pestaña de estilos:

image
image394×1320 110 KB

Luego, simplemente declara las variables adicionales en tu archivo json. Por ejemplo:

{
  "about_url": null,
  "license_url": null,
  "name": "Esquemas de color completos",
  "color_schemes": {
    "Colores Claros": {
      "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"
    },
    "Colores Oscuros": {
      "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"
    }
  }
}

Lo bueno es que esas variables también aparecerán en el backend:

image
image1632×1747 210 KB

6 Me gusta
3

Gracias — después de publicar esto, vi que todo también está listado en la página /styleguide > colors de una instancia — supongo que esta es la lista completa…

Ahora solo me pregunto cuál es el uso diferente entre las variables descriptivas (por ejemplo, primary-high) y las numeradas (por ejemplo, primary-800) y cómo tener esto en cuenta al crear mi propio tema.

4

Por lo que sé, son solo algunos cálculos adicionales y más refinados que podrías usar en un tema o componente temático. Pero no se utilizan en el núcleo de Discourse.

Si quisieras escribir tu esquema de colores solo con los valores numéricos, podrías redefinir los descriptivos de esa manera en tu tema:

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

Pero entonces, solo hay valores numéricos para primario y terciario.

1 me gusta
5

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