#CSS #Relative #Colors: Build UI #Palettes Without a Color Picker
▻https://theosoti.com/blog/css-relative-colors

Relative colors shine when a component needs multiple accents. Here is a compact pattern for a callout card:

Keep derived tokens in one space so the relationships stay coherent. Mixing spaces is valid, but remember the source is converted to the output space for every calculation, which can subtly change the result.

The component only needs one input (—tone). Everything else follows.

.callout {
	--tone: #4b6bff;
	--tone-strong: hsl(from var(--tone) h s calc(l - 12));
	--tone-soft: hsl(from var(--tone) h calc(s - 20) calc(l + 28));
	--tone-border: rgb(from var(--tone) r g b / 0.2);
	--tone-shadow: rgb(from var(--tone) r g b / 0.25);

	border: 1px solid var(--tone-border);
	background-color: var(--tone-soft);
	box-shadow: 0 12px 24px var(--tone-shadow);
}

.callout strong {
	color: var(--tone-strong);
}

via ▻https://css-tricks.com/whats-important-6

STPo › Portfolio › Direction artistique › Jérémie Do Van Lanh
▻http://www.stpo.fr/portfolio/direction-artistique/jeremie-do-van-lanh-2

« la #CSS a été codée intégralement en unités relatives (em), ce qui lui assure une interopérabilité robuste et une accessibilité renforcée » Tags : #em #intégration CSS #relative accessibilité

#accessibilité

Confused About #rem and #em?
▻http://j.eremy.net/confused-about-rem-and-em

Tags : em rem #px unité #CSS #taille #dimension #relative

#unité