[3.2] Farbgestaltung: Schemata, Konzepte, Umsetzung - was ergibt Sinn? [gelöst]

[Melmac]

@Lehrling:

Die Liste der Dinge, die berücksichtigt werden müssen, wird lang und länger ...
Gut, dass die auch alle hier erwähnt werden - ich neige ganz gerne dazu, sowas zu lange zu übersehen

Text- und Linkfarben (inklusive :hover etc.) wollte ich eigentlich aus der primären Farbe des jeweiligen Schemas ableiten lassen.
Die Textfarbe in Abhängigkeit zur jeweiligen Hintergrundfarbe des Elemenst wechseln zu lassen, sollte sich mit SASS eigentlich problemlos automatisieren lassen, sodass dies dann auch nicht jedesmal explizit angepasst werden muss.

und für Überschriften greifen oft auch andere Farbcodes

Durch den "Umweg" über die Modul-Stylesheets lässt sich dies, falls wirklich mal erforderlich, auch direkt "vor Ort" noch weiter anpassen.
Wobei ich aber generell die Anzahl der im Style letztendlich zum Tragen kommenden Farben massiv reduzieren möchte. Teilweise sind die bereits jetzt schon (in prosilver) kaum noch wirklich voneinander zu unterscheiden - und auf den Futzeldisplays von Smartphones wird das, IMHO, auch nicht wirklich besser.

Wenn ich mir Hanakins Generator für prosilver-Farben anschaue: sind von den dort generierten 40+ Farbwerten für die Verwendung im Style wirklich alle erforderlich?
Mal schauen, wie weit ich dies im Laufe der Arbeit daran noch "eindampfen" kann, ohne dass es dann einfach im Sinne von "zu simpel" wird
Es werden ja trotzdem noch genügend "Erblasten" von prosilver erhalten bleiben, zumindest im CSS, das am Ende beim Kompilieren generiert wird.

P.S.:
"Anspruchsvoll" würde ich das jetzt nicht nennen - es sei denn, etwas lernen und in seinen Zusammenhängen verstehen zu wollen, würde dazu zählen
Das kann ich halt nur, indem ich mir eine Aufgabe stelle, die über die Grenzen meines bisherigen (sehr bescheidenen!) "Wissens" hinausgeht ...
Ihr habt da alle ein gutes Stück mehr an Erfahrung ...

[Melmac]

So, um das hier zu einem Abschluss zu bringen ...

@Tobi:
Dein Beispiiel hat mich etwas in Verzweiflung gestürzt - es wird ja noch komplizierter: wenn die Ausgangsfarbe wechselt, weil jetzt ein anderes Farbschema angezogen wird, dann kann die jeweilige Berechnung, die bei Schema A "optimal" passt, bei Schema B auch mehr oder weniger daneben sein.
Die Berechnung von abgeleiteten Farbwerten muss ich dann wohl oder übel noch für jedes Schema individuell gestalten können ...

Nachdem ich mich jetzt ein paarmal ganz gewaltig verlaufen habe, bin ich momentan an einem Ansatz hängen geblieben, der dies hoffentlich auffangen zu können scheint:

a) Jedes Farbschema bekommt ein eigenes Stylesheet, in dem nach einem vorgegebenen Muster die Ausgangsfarben festgelegt werden.
Jede "Farbe", der später im Style zum Einsatz kommen wird, bekommt eine eigene Variable. Deren Farbwerte können dann so festgelegt werden, wie es für einen "runden" Eindruck am geeignetsten ist: entweder als fester Wert oder als aus einer der Ausgangsfarben berechneter Wert - wobei dann die Berechnungsformel frei gewählt werden kann. Wie die Werte zustande kommen, müsste so jedem Anwender freigestellt sein.
(Die Variablen selbst sind aber dabei vorgegeben und in jedem Schema-Stylesheet prinzipiell identisch.)

b) Zusammengeführt und in Arbeitsdaten "übersetzt" wird das ganze dann in einem separaten Stylesheet:
Da ich den Import von Stylesheets nicht über Bedingungen steuern kann, werden zuerst einmal alle vorhandenen Schema-Stylesheets importiert.
Danach werden den in diesem File angelegten "endgültigen" Variablen (= diejenigen, die dann in den Stylesheets eingefügt werden) die entsprechenden Pendants aus den Schema-Files zugeordnet.
Gesteuert wird das über eine entsprechende Funktion, die anhand des gerade konfigurierten Farbschemas für den Style nur die passenden Variablen des zugehörigen Schema-Stylesheets zurückgibt.

So müsste es doch hoffentlich möglich sein, einerseits die Farbwahl in jedem Schema-File völlig flexibel vornehmen und andererseits die Verteilung auf die Stylesheets dennoch fest eincodieren zu können?

Für den Anwender wird es dann hoffentlich auch einfacher, eigene Schemata zu erstellen und einzubinden: Mustervorlage nach Anleitung "ausfüllen" > unter neuem Namen (ebenfalls nach Anleitung) in einem vorgegebenen Ordner abspeichern > Datei im unter (b) genannten Stylesheet importieren > neues Schema in der Konfiguration auswählen > kompilieren > fertig.

Hab ich da jetzt etwas übersehen oder zu kompliziert gedacht?

[tas2580]

@Melmac

Lass mir doch am besten mal irgendwie den Code zukommen, oder gib mir zumindest ein Link zu einem Forum in dem das läuft. Wenn ich den Code sehe verstehe ich am ehesten was du willst und erkenne auch besser wo man was optimieren kann wie wenn du hier dein Code wieder in für Menschen lesbare Texte übersetzt.

Gruß Tobi

[Melmac]

Hallo Tobi

Momentan bin ich noch dabei, zwei Testschemata zu erstellen und die Arbeitsvariablen in die Stylesheets zu bringen, von daher kann ich noch keine lauffähige Demo anbieten

Reichen für den Anfang die Codes der relevanten Files im Pastebin?
(Alles noch etwas grob und nicht "feingeschliffen", sorry)

• Vorlagendatei _colour_scheme_template.scss für das Erstellen eigener Schema-Stylesheets: pastebin/?mode=view&s=42
• Test-Farbschema "black" _colour_scheme_black.scss : pastebin/?mode=view&s=43
• Das Modul-Stylesheet _module_colour_schemes.scss, das den Schemawechsel steuert und die "Schema-Variablen" in "Arbeits-Variablen" überführt, die dann fest in den einzelnen Stylesheets eingefügt werden: pastebin/?mode=view&s=44

Die dort auftauchende Variable $switch-col-scheme enthält den Wert für das im Konfigurationsfile des Styles definierte Schema.
Die Funktion

Code: Alles auswählen

/// Pick variables according to selected colour scheme
@function get-colour-var($scheme-var, $scheme: null) {
  $scheme: $switch-col-scheme;
  $var-selector: ('$' + '$scheme' + '-' + '$scheme-var');

  @return $var-selector;
}

wird benötigt, um die jeweils passende Variable des gewählten Schemas herausfiltern zu können.
Ob das dann auch wirklich so funktioniert wie vorgesehen ... muss ich noch testen

Alternativ kann ich übers Wochenende auch mal schauen, dass ich hierfür vielleicht noch einen zusätzlichen "Bastel-Branch" im Repo anlege.