View source for MediaWiki talk:Gadget-colorPalette.css

== Our current color palette ==
You can use any of these in your CSS styles by using the var() function.
;For example
:color: var(--secondary-lightish)
:background-color: var(--primary-desaturateder)
----
{{#css:
.color-wrapper {
	overflow: auto;
	color: white;
}
.color-row span:nth-child(odd), .color-row span:nth-child(odd)::before {
	color: black;
}
.color-row {
	display: flex;
	flex-direction: row;
}
.color-row > div {
	text-align: center;
	height: 150px;
	flex: 1 0 100px;
}
.color-row.grayscale > div {
	flex: 1 0 0px;
}
.color-row.primary span:nth-child(1)::before, .color-row.primary span:nth-child(2)::before {
	content: "Primary";
}
.color-row.secondary span:nth-child(1)::before, .color-row.secondary span:nth-child(2)::before {
	content: "Secondary";
}
.color-row.tertiary span:nth-child(1)::before, .color-row.tertiary span:nth-child(2)::before {
	content: "Tertiary";
}
.color-row.accent span:nth-child(1)::before, .color-row.accent span:nth-child(2)::before {
	content: "Accent";
}
}}
<div class="color-wrapper">
<div class="color-row primary">
<div class="color-col" data-color="var(--primary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div>
<div class="color-col" data-color="var(--primary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div>
<div class="color-col" data-color="var(--primary-light)"><span><br>light<br></span><span><br>light</span></div>
<div class="color-col" data-color="var(--primary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div>
<div class="color-col" data-color="var(--primary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--primary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div>
<div class="color-col" data-color="var(--primary-dark)"><span><br>dark<br></span><span><br>dark</span></div>
<div class="color-col" data-color="var(--primary-darker)"><span><br>darker<br></span><span><br>darker</span></div>
<div class="color-col" data-color="var(--primary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div>
</div>
<div class="color-row primary">
<div class="color-col" data-color="var(--primary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div>
<div class="color-col" data-color="var(--primary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div>
<div class="color-col" data-color="var(--primary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div>
<div class="color-col" data-color="var(--primary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div>
<div class="color-col" data-color="var(--primary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--primary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div>
<div class="color-col" data-color="var(--primary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div>
<div class="color-col" data-color="var(--primary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div>
<div class="color-col" data-color="var(--primary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div>
</div>
<div class="color-row secondary">
<div class="color-col" data-color="var(--secondary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div>
<div class="color-col" data-color="var(--secondary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div>
<div class="color-col" data-color="var(--secondary-light)"><span><br>light<br></span><span><br>light</span></div>
<div class="color-col" data-color="var(--secondary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div>
<div class="color-col" data-color="var(--secondary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--secondary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div>
<div class="color-col" data-color="var(--secondary-dark)"><span><br>dark<br></span><span><br>dark</span></div>
<div class="color-col" data-color="var(--secondary-darker)"><span><br>darker<br></span><span><br>darker</span></div>
<div class="color-col" data-color="var(--secondary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div>
</div>
<div class="color-row secondary">
<div class="color-col" data-color="var(--secondary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div>
<div class="color-col" data-color="var(--secondary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div>
<div class="color-col" data-color="var(--secondary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div>
<div class="color-col" data-color="var(--secondary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div>
<div class="color-col" data-color="var(--secondary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--secondary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div>
<div class="color-col" data-color="var(--secondary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div>
<div class="color-col" data-color="var(--secondary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div>
<div class="color-col" data-color="var(--secondary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div>
</div>
<div class="color-row accent">
<div class="color-col" data-color="var(--accent-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div>
<div class="color-col" data-color="var(--accent-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div>
<div class="color-col" data-color="var(--accent-light)"><span><br>light<br></span><span><br>light</span></div>
<div class="color-col" data-color="var(--accent-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div>
<div class="color-col" data-color="var(--accent)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--accent-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div>
<div class="color-col" data-color="var(--accent-dark)"><span><br>dark<br></span><span><br>dark</span></div>
<div class="color-col" data-color="var(--accent-darker)"><span><br>darker<br></span><span><br>darker</span></div>
<div class="color-col" data-color="var(--accent-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div>
</div>
<div class="color-row accent">
<div class="color-col" data-color="var(--accent-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div>
<div class="color-col" data-color="var(--accent-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div>
<div class="color-col" data-color="var(--accent-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div>
<div class="color-col" data-color="var(--accent-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div>
<div class="color-col" class="color-col" data-color="var(--accent)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--accent-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div>
<div class="color-col" data-color="var(--accent-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div>
<div class="color-col" data-color="var(--accent-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div>
<div class="color-col" data-color="var(--accent-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div>
</div>
<div class="color-row tertiary">
<div class="color-col" data-color="var(--tertiary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div>
<div class="color-col" data-color="var(--tertiary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div>
<div class="color-col" data-color="var(--tertiary-light)"><span><br>light<br></span><span><br>light</span></div>
<div class="color-col" data-color="var(--tertiary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div>
<div class="color-col" data-color="var(--tertiary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--tertiary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div>
<div class="color-col" data-color="var(--tertiary-dark)"><span><br>dark<br></span><span><br>dark</span></div>
<div class="color-col" data-color="var(--tertiary-darker)"><span><br>darker<br></span><span><br>darker</span></div>
<div class="color-col" data-color="var(--tertiary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div>
</div>
<div class="color-row tertiary">
<div class="color-col" data-color="var(--tertiary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div>
<div class="color-col" data-color="var(--tertiary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div>
<div class="color-col" data-color="var(--tertiary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div>
<div class="color-col" data-color="var(--tertiary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div>
<div class="color-col" data-color="var(--tertiary)"><span><br>base<br></span><span><br>base</span></div>
<div class="color-col" data-color="var(--tertiary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div>
<div class="color-col" data-color="var(--tertiary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div>
<div class="color-col" data-color="var(--tertiary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div>
<div class="color-col" data-color="var(--tertiary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div>
</div>
<div class="color-row grayscale">
<div class="color-col" data-color="var(--white)"><span>White<br></span><span>White</span></div>
<div class="color-col" data-color="var(--gray-lightest)"><span>Gray lightest<br></span><span>Gray lightest</span></div>
<div class="color-col" data-color="var(--gray-lighter)"><span>Gray lighter<br></span><span>Gray lighter</span></div>
<div class="color-col" data-color="var(--gray-light)"><span>Gray light<br></span><span>Gray light</span></div>
<div class="color-col" data-color="var(--gray-lightish)"><span>Gray lightish<br></span><span>Gray lightish</span></div>
<div class="color-col" data-color="var(--gray)"><span>Gray<br></span><span>Gray</span></div>
<div class="color-col" data-color="var(--gray-darkish)"><span>Gray darkish<br></span><span>Gray darkish</span></div>
<div class="color-col" data-color="var(--gray-dark)"><span>Gray dark<br></span><span>Gray dark</span></div>
<div class="color-col" data-color="var(--gray-darker)"><span>Gray darker<br></span><span>Gray darker</span></div>
<div class="color-col" data-color="var(--gray-darkest)"><span>Gray darkest<br></span><span>Gray darkest</span></div>
<div class="color-col" data-color="var(--black)"><span>Black<br></span><span>Black</span></div>
</div>
<div class="color-row">
<div class="color-col" data-color="var(--text-light)"><span>Text light<br></span><span>Text light</span></div>
<div class="color-col" data-color="var(--text-alt)"><span>Text alt<br></span><span>Text alt</span></div>
<div class="color-col" data-color="var(--text-dark)"><span>Text<br></span><span>Text</span></div>
<div class="color-col" data-color="var(--text-dark)"><span>Text dark<br></span><span>Text dark</span></div>
</div>
</div>
----