Colors conventions

# colors, conventions, theme.json

August 23, 2023
Read more
Couleurs primaires

Construites à partir des deux / trois grandes couleurs de la marque, elles sont utilisées pour marquer l’identité dans des composants qui véhiculent l’image de la marque ou sur lesquels il est nécessaire d’attirer l’attention de l’utilisateur, tels que les éléments cliquables ou les états actifs.

Couleurs système

Couleurs utilisées exclusivement pour représenter des états et des statuts.

Couleurs neutres

Couleurs de base utilisées dans les typographies, fonds, contours et séparateurs dans la majorité des composants. Elles sont notamment utilisées dans les éléments non cliquables et pour représenter les états inactifs.

Couleurs illustratives

Couleurs complémentaires de la charte.

–variations

lightness

from 0 (white) to 1000 (black)

state

–hover
–active

Examples:
```
// couleurs primaires
primary : primary--525
  primary--100
  primary--200
  ...
secondary
tertiary


// couleurs neutres
neutral
  neutral--100  : #fff
  ...
  neutral--1000 : #000


// couleurs système
info
success
warning
error

text           : neutral--100
text-inverted  : neutral--1000

background     : neutral--950

// already outdated
accent ? highlight ?
base     ? -> background
contrast ? -> main text color
```
Source :

Set color palette

August 1, 2023

In theme.json, hide default color pickers and set a controled ranged colors.

{
	...
	"settings": {
		"color": {
			"custom": false,
			"defaultPalette": false,
			"customDuotone": false,
			"customGradient": false,
			"palette": [
				{
					"slug": "dark",
					"name": "Dark",
					"color": "#19191A"
				},
				{
					"slug": "bright",
					"name": "Bright",
					"color": "#FFFFFF"
				}
			]
		}
	}
	...
}

Colors conventions

Couleurs primaires

Couleurs système

Couleurs neutres

Couleurs illustratives

–variations

lightness

state

Examples:

Set color palette