Style Selector v2

Démonstration des 19 styles de design avec système de tokens CSS

Sélecteur de Style

Alertes

Ceci est un exemple d'alerte utilisant la couleur d'accent du thème sélectionné.

Boutons

Cartes de Démonstration

Typographie

Les polices s'adaptent automatiquement au thème sélectionné. Chaque style utilise des Modern Font Stacks pour une compatibilité optimale.

Couleurs

Le système de tokens centralisé garantit une cohérence parfaite entre tous les éléments de l'interface.

Espacements

Les marges et paddings sont définis via des variables standardisées pour maintenir une harmonie visuelle.

Ombres & Effets

Chaque thème possède ses propres ombres et effets visuels qui correspondent à son identité graphique.

Bordures

Les rayons de bordure, épaisseurs et styles varient selon le thème pour créer des ambiances distinctes.

Transitions

Les vitesses et courbes de transition sont personnalisées pour chaque style, du rapide au fluide.

Variables Testées

Enchaînement des Variables

Tokens.css → Variables descriptives (--bleu-electrique, --space-16, --font-neo-grotesque)

Theme CSS → Variables sémantiques (--primary-color, --spacing-md, --font-family-primary)

Base.css → Styles appliqués utilisant les variables sémantiques

Cette section démontre que toutes les variables s'enchaînent correctement du niveau tokens jusqu'aux styles finaux.