Personnalisation des variables CSS

Orion UI utilise un système de variables CSS définies sur les sélecteurs data-orion-theme='light' et data-orion-theme='dark'.
Le dark thème surcharge uniquement les variables de couleur. Ces variables permettent de personnaliser la typographie, les couleurs, les espacements et les arrondis de tous les composants.
Le fichier correspondant est css-vars.less

Surcharger le style

Il est facile de surcharger les variables CSS par défaut pour adapter l'apparence au thème souhaité.

Le plus simple est de créer un fichier qui va contenir toutes les surcharges dont vous avez besoin (orion-override.less par exemple), et de l'importer dans votre fichier de style après les imports de styles d'Orion.

@import "@orion.ui/orion/dist/styles/styles.less";
@import "@orion.ui/orion/dist/styles/packages/index.less";

@import "orion-override.less";

h1 {
	color: var(--grey-light);
}
...

Surcharge des sélecteurs CSS

.orion-input {
	&__input {
		border-color: var(--neutral-100);
	}

  // Modification pour le dark-thème
  [data-orion-theme="dark"] & {
    background-color: var(--info-100);
  }
}

.orion-sticker {
	align-items: center;
	padding: 1.5rem;
	border-radius: 0.75rem;
	font-size: 0.9rem;

	&__title {
		margin-bottom: 0.25rem;
		font-size: 1rem;
		color: var(--brand);
	}
}

<style lang="less" scoped>

.my-component {
  display: flex;
  justify-content: flex-end;

// surcharge du style uniquement au sein de MyComponent
  :deep(.orion-icon) {
    font-size: 1rem;
  }
}
</style>

Surcharge des variables

:root {
	--radius-input: 0.5rem;
	--rgb-brand: 51, 67, 148;
}

Variables disponibles

Fontes et tailles de texte

Rayons (Border radius)

Couleurs

Variables RGB de base

Ces variables stockent les couleurs sous forme de triplets RGB et servent de source pour toutes les autres variables CSS.
Chaque couleur possède 3 déclinaisons supplémentaires (light, dark, alt)

Variables CSS dérivées

Ces variables utilisent les valeurs RGB pour créer des couleurs CSS utilisables directement dans le style.

Bonnes pratiques

1. Toujours utiliser les variables CSS dérivées (--grey, --brand, etc.) dans vos styles plutôt que les RVB bruts pour assurer la cohérence des thèmes.
2. Surcharger les couleurs pour les thèmes sombres uniquement en modifiant les variables RVB correspondantes.
3. Éviter de modifier directement les variables dérivées, pour ne pas casser la cohérence des thèmes.
4. Utiliser les suffixes -light, -dark, -alt pour gérer les nuances et les variantes de couleur.

Exemple d’utilisation

.button {
  background-color: var(--brand);
  color: var(--base);
}

.alert-success {
  background-color: var(--success-light);
  border-color: var(--success);
  color: rgb(var(--rgb-inverse),0.2); // Pour gérer l'opacité par exemple
}

Fluid

Les variables --fluid-* sont utilisées pour définir des padding et rester cohérent dans toute l'application.

Espaces

Les variables --space-* définissent les marges et espacements standards dans la grille du design.
Elles sont fixes (en rem) et permettent de garantir une cohérence verticale et horizontale.