GreyscaleValidé

Variable	Valeur	Aperçu
--color-white	rgb(255,255,255)
--color-grey-100	rgb(248,249,250)
--color-grey-200	rgb(233,236,239)
--color-grey-300	rgb(222,226,230)
--color-grey-400	rgb(206,212,218)
--color-grey-500	rgb(173,181,189)
--color-grey-600	rgb(108,117,125)
--color-grey-700	rgb(73,80,87)
--color-grey-800	rgb(52,58,64)
--color-grey-900	rgb(33,37,41)
--color-black	rgb(16,16,16)

Greyscale (alias)Validé

Variable	Valeur	Aperçu
--color-gray-light	var(--color-grey-300)
--color-gray	var(--color-grey-500)
--color-gray-dark	var(--color-grey-700)

Couleurs chromatiquesValidé

Variable	Valeur	Aperçu
--color-navy	rgb(0,31,63)
--color-blue	rgb(0,116,217)
--color-aqua	rgb(127,219,255)
--color-teal	rgb(57,204,204)
--color-olive	rgb(61,153,112)
--color-green	rgb(46,204,64)
--color-lime	rgb(1,255,112)
--color-yellow	rgb(255,220,0)
--color-orange	rgb(255,133,27)
--color-red	rgb(255,65,54)
--color-fuchsia	rgb(240,18,190)
--color-purple	rgb(177,13,201)
--color-maroon	rgb(133,20,75)
--color-silver	rgb(221,221,221)

Couleurs sémantiques (alias)Validé

Variable	Valeur	Aperçu
--color-danger	var(--color-red)
--color-success	var(--color-green)
--color-warning	var(--color-orange)
--color-notice	var(--color-yellow)
--color-info	var(--color-aqua)
--color-muted	var(--color-grey-500)

Couleurs de texte (thème)Validé

Variable	Thème	Valeur	Aperçu
--text-color-surface	light	$light-text-color-surface rgb(88,89,91)
	dark	$dark-text-color-surface rgb(160,161,162)
--text-color-primary	light	$light-text-color-primary rgb(49,112,149)
	dark	$dark-text-color-primary rgb(94,170,221)
--text-color-secondary	light	$light-text-color-secondary rgb(94,170,221)
	dark	$dark-text-color-secondary rgb(49,112,149)
--text-color-danger	*	var(--color-danger)
--text-color-success	*	var(--color-success)

Couleurs de trait (thème)Validé

Variable	Thème	Valeur	Aperçu
--draw-color-primary	light	$light-draw-color-primary rgb(94,170,221)
	dark	$dark-draw-color-primary rgb(49,112,149)
--draw-color-secondary	light	$light-draw-color-secondary rgb(170,210,235)
	dark	$dark-draw-color-secondary rgb(35,80,110)
--draw-color-surface	light	$light-draw-color-surface rgb(235,235,235)
	dark	$dark-draw-color-surface rgb(40,40,40)
--draw-color-danger	*	var(--color-danger)
--draw-color-success	*	var(--color-success)

Couleurs de fond (thème)Validé

Variable	Thème	Valeur	Aperçu
--background-color-ground	light	$light-background-color-ground rgb(255,254,253)
	dark	$dark-background-color-ground rgb(20,18,21)
--background-color-surface	light	$light-background-color-surface rgb(255,255,255)
	dark	$dark-background-color-surface rgb(20,18,21)

Couleurs tableaux (thème)Validé

Variable	Thème	Valeur	Aperçu
--table-body-text-color	*	var(--text-color-surface)
--table-body-background-color	*	var(--background-color-surface)
--table-body-draw-color	light	$light-table-body-draw-color rgb(220,220,220)
	dark	$dark-table-body-draw-color rgb(50,50,50)
--table-header-background-color	light	$light-table-header-background-color rgb(245,245,245)
	dark	$dark-table-header-background-color rgb(30,28,31)
--table-body-stripe-color	light	$light-table-body-stripe-color rgb(250,250,250)
	dark	$dark-table-body-stripe-color rgb(25,23,26)

Couleurs tags (thème)Validé

Variable	Thème	Valeur	Aperçu
--tag-text-color	*	var(--text-color-surface)
--tag-background-color	*	var(--background-color-surface)
--tag-draw-color	*	var(--draw-color-primary)

Couleurs liens (thème)Validé

Variable	Thème	Valeur	Aperçu
--link-text-color	*	var(--text-color-primary)
--link-text-hover-color	*	var(--text-color-secondary)
--link-text-visited-color	*	var(--text-color-primary)
--link-text-external-color	*	var(--text-color-primary)

Couleurs menu header (thème)Validé

Variable	Thème	Valeur	Aperçu
--menu-header-text-color	*	var(--text-color-surface)
--menu-header-draw-color	*	var(--draw-color-primary)
--menu-header-text-hover-color	*	var(--text-color-primary)

Couleurs menu footer (thème)Validé

Variable	Thème	Valeur	Aperçu
--menu-footer-text-color	*	var(--text-color-primary)
--menu-footer-draw-color	*	var(--draw-color-surface)
--menu-footer-text-hover-color	*	var(--text-color-secondary)

Couleurs slogan (thème)Validé

Variable	Thème	Valeur	Aperçu
--slogan-draw-color	*	var(--draw-color-primary)

Couleurs sous-menu header (thème)Validé

Variable	Thème	Valeur	Aperçu
--submenu-header-text-color	*	var(--text-color-surface)
--submenu-header-text-hover-color	*	var(--text-color-primary)
--submenu-header-background-color	*	var(--background-color-surface)
--submenu-header-draw-color	*	var(--draw-color-surface)
--submenu-header-background-hover-color	light	$light-submenu-header-background-hover-color rgb(235,245,252)
	dark	$dark-submenu-header-background-hover-color rgb(30,45,60)
--submenu-header-draw-hover-color	light	$light-submenu-header-draw-hover-color rgb(200,220,240)
	dark	$dark-submenu-header-draw-hover-color rgb(60,90,120)

Couleurs sélection (thème)Validé

Variable	Thème	Valeur	Aperçu
--selection-color	light	$light-selection-color rgb(210,230,245)
	dark	$dark-selection-color rgb(50,90,130)
--separator-color	light	$light-separator-color linear-gradient(...)
	dark	$dark-separator-color linear-gradient(...)

Layout (responsive)Validé

Variable	Breakpoint	Valeur
--layout-spacing	T (<575px)	10px
	S (575-767px)	12px
	M (768-991px)	14px
	L (992-1199px)	16px
	W (≥1200px)	18px