Ideo3.2 Framework Documentation

Couleurs nuancier (v2)

Toggle example guides Toggle HTML markup

(systeme de couleur v2)
Palettes de couleurs inclues dans le framework IDEO3.2 Avec ce nouveau systeme de couleur, il est possible d'utiliser des couleurs et des variations différentes en darkMode.

Il faut commencer par importer le nouveau systeme de couleur

@import "@{ambiance-url}less/colors/import.less";

On précise ensuite les couleurs principales du site (nom d'une couleur prégénérée de la palette de couleurs) via les variables suivantes.

// en light mode :
@brand: dodgerBlue;
@accent: @brand;
@lead: tomato;
@contrast: @brand;
@text: @brand;
@surface: @brand;

// en dark mode :
@brand-dark: @brand;
@accent-dark: @accent;
@lead-dark: @lead;
@contrast-dark: @contrast;
@text-dark: @text;
@surface-dark: @surface;

Chaque jeux de couleur est disponible sous 3 différentes variations. 

// en light mode :
@brandVariation: 2;
@accentVariation: @brandVariation;
@leadVariation: @brandVariation;
@contrastVariation: @brandVariation;
@textVariation: @brandVariation;
@surfaceVariation: @brandVariation;

// en dark mode :
@brandVariation-dark: @brandVariation;
@accentVariation-dark: @accentVariation;
@leadVariation-dark: @leadVariation;
@contrastVariation-dark: @contrastVariation;
@textVariation-dark: @textVariation;
@surfaceVariation-dark: @surfaceVariation;
<insert-markup>design.couleurs.couleurs.v2-</insert-markup>
Markup: ../../../snippets/components/colors-v2.hbs 
<div class="row">
	<div class="large-12 columns">
		<div id="color-shades"></div>
	</div>
</div>

<script type="text/javascript">
	// Définir un tableau de noms de couleurs
	const colorNames = [
		"red",
		"tomato",
		"amaranth",
		"deepPink",
		"pink",
		"fuchsia",
		"purple",
		"violet",
		"indigo",
		"navy",
		"blue",
		"linkeoBlue",
		"dodgerBlue",
		"cyan",
		"teal",
		"emerald",
		"springGreen",
		"shamrockGreen",
		"green",
		"forestGreen",
		"lime",
		"yellow",
		"gold",
		"amber",
		"orange",
		"brown",
		"choco",
		"sand",
		"slate",
		"gray",
		"neutral"
	];

	// Fonction pour générer un bloc HTML en fonction du nom de la couleur
	function generateColorBlock(colorName) {
		return `
			<div class="color-shades" data-name="${colorName}">
				<div class="color-name">${colorName}</div>
				${Array.from({ length: 23 }, (_, index) => `
					<div class="color-shade color-${index}" data-number="${index}" style="background-color: hsl(var(--${colorName}-${index}-hsl))"></div>
				`).join("\n")}
			</div>
		`;
	}

	// Générer les blocs HTML pour toutes les couleurs dans le tableau de noms
	const htmlBlocks = colorNames.map(generateColorBlock).join("\n");

	// Obtenir la référence de la div avec l'ID "color-shades"
	const colorShadesDiv = document.getElementById("color-shades");

	// Insérer les blocs HTML générés dans la div "color-shades"
	colorShadesDiv.innerHTML = htmlBlocks;
</script>
Source: src/cssframework_v2/less/doc.less, line 1448