CSS-Variablen: Wie wir sie für das Theming bei FloqAST verwenden

In einem früheren Beitrag sprach J.C. darüber, wie wir migrieren entkoppelte Microfrontends hier bei FloQast. Wir arbeiten auch an einem Design- und Themenaktualisierung , was sich auf mehrere Micro-Frontends, den Hub und eine interne UI-Bibliothek auswirkt. Während wir gearbeitet haben, haben wir dieselben Sätze von Farbvariablen an mehreren Stellen gefunden — in JavaScript-Dateien (für die Interpolation von Farben in Gestylte Komponenten Deklarationen), SCSS-Dateien und über mehrere Frontend-Projekte hinweg, die alle zu einem einseitige Anwendung zur Laufzeit.

Wie können wir TROCKEN Diese Farbdeklarationen aufwerten und sie gleichzeitig so einfach wie möglich konsumieren und ändern lassen?

CSS-Variablen

Die beste Lösung, die wir gefunden haben, sind CSS-Variablen, auch bekannt als benutzerdefinierte Eigenschaften. Falls Sie sich nicht auskennen, werden sie normalerweise so deklariert:

:root { 
  --primary: rgb(14, 51, 98);
  --primary-active: rgb(14, 51, 98, 0.38); 
}

... und so konsumiert:

.some-button { 
  background-color: var(--primary); 
} 

.some-button:active { 
  background-color: var(--primary-active); 
}

Um das Thema der App dynamisch zu gestalten, stellen Sie sicher alle Farben Die in der App verwendeten werden als CSS-Variablen deklariert und verwendet.Hinweis: Wenn Sie Styled Components verwenden, sollten Sie die Deklaration der obersten Ebene in einen Aufruf von einschließen Erstellen Sie einen globalen Stil.

Deklarationen und Überschreibungen

Sie müssen diese Variablen nur einmal deklarieren und zu jeder HTML-Seite hinzufügen. Weil wir eine Micro-Frontend-Architektur verwenden, Kunden-Hub Hier werden unsere globalen Variablen deklariert und dem HTML-Dokument hinzugefügt — der Single Source of Truth. Der Client-Hub könnte auch App-weite Theme-Änderungen wie den Dunkelmodus oder vom Benutzer konfigurierbare Designs verarbeiten, indem einfach unterschiedliche Werte auf die Farbvariablen angewendet werden.

Mit CSS können Sie jede Eigenschaft auf jeder Ebene für jedes Element oder Unterbaum von Elementen überschreiben — einschließlich CSS-Variablen. Das bedeutet, dass jedes Micro-Frontend die Themenfarben für seinen eigenen Bereich der App überschreiben kann. Angenommen, das Markup eines Microclients befindet sich in einem bestimmten Bereich:

<div class="settings-client"> 
  <!-- settings client markup goes here --> 
</div>

wir können Stile nur für diesen Client überschreiben:

.settings-client { 
  --primary: rgb(255, 6, 185); 
  --primary-active: rgb(255, 6, 185, 0.4); 
}

Wenn du verwendest Gestylte Komponenten und React (das wir verwenden und empfehlen), das obige Markup und die Stile könnten so aussehen:

const SettingsClientWrapper = styled.div` 
  --primary: rgb(255, 6, 185); 
  --primary-active: rgb(255, 6, 185, 0.4); 
`;

//woanders, in deinem JSX-Markup

return ( 
  //... 
  <SettingsClientWrapper> 
    {/* settings client markup goes here */} 
  </SettingsClientWrapper> 
  //... 
);

RGB-Werte austrocknen

Sie haben vielleicht bemerkt, dass unsere oben:root-Farben die r/g/b-Farbkomponenten wiederholen. Die meisten Themensysteme haben Farbgruppen, die voneinander abgeleitet sind. Können wir die abtrocknen? Es stellt sich heraus, dass wir:

:root { 
  /* arbitrary strings work as variables! */ 
  --primary-base: 14, 51, 98; 
  --primary: rgb(var(--primary-base)); 
  --primary-active: rgb(var(--primary-base), 0.38); 
}

Es gibt Einschränkungen, wie dynamisch wir sein können. var (...) fügt immer Leerzeichen vor und nach dem Wert ein, den es interpoliert, sodass Ausdrücke wie #var (--red-value) 218F oder var (--width) px Syntaxfehler auslösen. (siehe die Spezifikation für weitere Informationen.)

Abgeleitete Farben

Alle Themenfarben werden normalerweise von einigen Grundfarben abgeleitet. Diese Ableitungen müssen manuell, auf dem Server oder in JavaScript vorgenommen werden. Bisher ist CSS nicht in der Lage, Farboperationen durchzuführen, die über String-Interpolation (siehe oben) oder calc () -Ausdrücke hinausgehen (siehe Beispiel 11 in der Abschnitt var () der Spezifikation).

Wenn Browseranbieter implementieren CSS-Farbmodul Level 5, mit CSS-Funktionen wie color-adjust (), color-mix () und color-contrast () können wir das Theme aus einigen Grundfarben ableiten.

:root { 
  /* somewhere, over the rainbow ... */ 
  --primary: rgb(255, 6, 185); 
  --primary-active: color-mix(var(--primary), transparent, 40%); 
}

Bis dahin...

Egal, ob du deine Theme-Farben manuell oder im Code ableitest, du kannst sie TROCKEN halten, indem du:

• Deklarieren von Themenfarben an einer einzigen Stelle.
• Überschreiben von Farben für bestimmte Clients oder Unterbäume mithilfe der CSS-Kaskade.
• Referenzierung und/oder Interpolation anderer Variablen, sofern möglich.