Skip to content

GitLab

Closed
Created by Holger Heißmeyer@retaniOwner

Styling in Komponenten anwenden

Wir haben ca. 10 Variablen. gefunden, mit denen man den Style einer App ausreichen individualisieren können soll: Farben, Abstände, Schatten, Font, etc.

Sie werden über css Variable transportiert, die in der Komponente Styling gesetzt werden, z.B. ---color-background: .

In den einzelnen Komponenten werden diese Variable entsprechend verwendet (var(--color-background))

Bei den Abständen gibt es nur 1 Grundvariable, die einzelnen Abstände werden daraus über Multiplikatoren abgeleitet.

Definition der Variablen:

https://www.figma.com/file/7y5c91AmKjRnfsnglX7yAD/App-Interface-(ehemals-The-Gate)?node-id=2100%3A11376

image

theming variables:
text color
background color
background highlight color
font family text
font family headlines
border radius
border width (-> border style)
shadow amount (-> shadow)
button border radius
primary button text color = rosa
distances scale factor

Abgeleitet:
distance xs
distance s
distanve m
distance l
distance xl
scaled distance xs
scaled distance s
scaled distanve m
scaled distance l
scaled distance xl

die abstände der interaktiven elemente skalieren nicht (z.b. Abstände in Button-Leiste, Play button etc)

Aufgabe:

  1. Überlegen, wie die Variablen genannt werden sollen und prüfen, was schon implementiert ist
  2. CSS Variablen definieren in packages/interkit/components/Styling.svelte
  3. Werte in der Komponente aus den Props holen, dafür packages/interkit/components/Styling.yaml anpassen
  4. Die Komponenten durchgehen, die in der Marta-App verwendet werden und die vorhandenen hard coded Werte im CSS durch die Variablen ersetzen.

Hinweise:

  • Idealerweise gibt es in den Komponenten jeweils 2 CSS Klassen für Elemente: Erst eine an BEM angelegte lange Bezeichnung wie Map__Controls__Play, die verwendet werden kann, um alles mögliche global über ein global.css zu überschreiben. Zweitens eine nur intern verwendete Klasse wie container, button, die im <style> lokal verwendet wird
  • Erst mal mit den einfachen Dingen anfangen und schauen, wie gut es sich überhaupt schon implementieren lässt. Noch ist vieles im Fluss.
  • Hier ist der. Marta Mockup https://www.figma.com/file/7y5c91AmKjRnfsnglX7yAD/App-Interface-(ehemals-The-Gate)?node-id=1452%3A0
  • Basti ist der Ansprechpartner für design
Edited by Holger Heißmeyer