Änderungen bei der Generierung von Wurzelfarben

manuel · 3. März 2022 um 13:00

Ich konnte keine Ankündigung dazu finden. Ich habe gesehen, dass es neue Stammfarbdeklarationen gibt (primary-900, primary-800, …).

Ich arbeite an einem Theme und erhalte unterschiedliche Berechnungen für diese (primary ist dasselbe), anscheinend abhängig von der Discourse-Version?

Gibt es weitere Informationen darüber, wie Schattierungen und Tönungen generiert werden? Auch, ob das numerische System die beschreibenden Begriffe (low, medium, high, …) vollständig ersetzen soll?

Don · 3. März 2022 um 13:42

Hallo,

Ich glaube, dies ist die Datei für Farbtransformationen, in der Sie den Prozentsatz überprüfen können, wie diese Variablen erstellt wurden.

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

manuel · 3. März 2022 um 14:38

Danke @Don! Aber ja, ich weiß, wo die Farben deklariert sind. Ich war neugierig auf die Überlegungen dahinter und die zukünftigen Pläne.

Zum Beispiel gibt es derzeit numerische Werte für primär und tertiär. Warum nicht für alle Werte eines Farbschemas? Ist das geplant?

Außerdem generieren numerische Werte derzeit nur hellere Farbtöne. Warum nicht ein standardmäßigeres System verwenden, bei dem 500 die Hauptfarbe zugewiesen wird, mit helleren Farbtönen <500 und dunkleren Farbtönen >500?

Ein weiteres Thema: Warum werden hellere Farbtöne nicht linearer generiert, sondern durch eine Mischung mit einer anderen Hauptfarbe aus dem Farbschema?

Derzeit kann ich das Discourse-Farbsystem nicht verwenden, um Farbdeklarationen zu implementieren, wenn ein Kunde ein umfassendes Designsystem hat. Ich muss praktisch alle Werte von Grund auf neu deklarieren. Wenn generierte Farben in Discourse jetzt numerisch definiert sind, warum nicht ein System implementieren, das konsistent und besser auf die Farbgenerierung in gängigen Designsystemen abgestimmt ist?

Falco · 3. März 2022 um 15:35

Ja, siehe UX: Styleguide changes & color variable additions by jordanvidrine · Pull Request #15984 · discourse/discourse · GitHub für den Kontext.

Berechnung vor 8 Tagen geändert, bitte auf die neueste Version aktualisieren.

Thema		Antworten	Aufrufe
How do colors work and how to change them? Support ux	5	119	20. März 2025
Colors changed in beta7? Support	6	963	4. Februar 2019
Reference for full color customization Dev	4	1315	14. Februar 2023
Challenges creating a custom color palette Dev	8	152	29. Januar 2025
Cleaning up our color palette 🎨 Dev	24	4591	20. April 2018

Änderungen bei der Generierung von Wurzelfarben

Verwandte Themen