Guides
Theming
FormKrafter livre une feuille de style d’environ 6 Ko, et elle est opt-in.
Aucun framework CSS en dessous, aucun reset global, et rien qui s’échappe de
l’espace de noms de classes .fk-* — elle s’insère donc dans un design system
existant sans bagarre.
Tokens de design
Section intitulée « Tokens de design »Tout le visuel passe par des propriétés CSS personnalisées. Surchargez-les où vous voulez dans la cascade — globalement, ou dans la portée d’un seul sous-arbre :
| Token | Clair | Sombre |
|---|---|---|
--fk-color-primary |
#2b7a81 |
#4fb8b2 |
--fk-color-surface |
#ffffff |
#111c24 |
--fk-color-border |
#d5dde2 |
#2d3f4b |
--fk-color-text |
texte | — |
--fk-color-muted |
texte secondaire | — |
--fk-color-danger |
état d’erreur | — |
--fk-radius |
rayon des angles | — |
--fk-spacing |
unité d’espacement de base | — |
--fk-font |
pile de polices | — |
.checkout-form { --fk-color-primary: #7c3aed; --fk-radius: 2px;}Dark mode
Section intitulée « Dark mode »Le dark mode s’active par la cascade — pas de JavaScript, pas de theme provider, pas de re-rendu. Les deux signaux fonctionnent :
<html class="dark"> <fk-form-render></fk-form-render></html><div data-fk-theme="dark"> <fk-form-render></fk-form-render></div>Apporter votre propre CSS
Section intitulée « Apporter votre propre CSS »Ignorer complètement styles.css et écrire vos propres règles .fk-* est une
stratégie supportée, pas un contournement. Les composants émettent des noms de
classes stables et aucun style inline sur ce que vous voudriez contrôler.
import { FkFormRender } from '@streamline-pulse/formkrafter-react'// import '@streamline-pulse/formkrafter-wc/styles.css' ← à omettreÉtapes suivantes
Section intitulée « Étapes suivantes »Un projet de Streamline Pulse