|
== 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
<div class="color-wrapper">
<div class="color-row primary">
<div class="primary" style="background-color: var(--primary-lightest)"><br>lightest</div>
<div class="primary" style="background-color: var(--primary-lighter)"><br>light</div>
<div class="primary" style="background-color: var(--primary-light)"><br>light</div>
<div class="primary" style="background-color: var(--primary-lightish)"><br>lightish</div>
<div class="primary" style="background-color: var(--primary)"><br>base</div>
<div class="primary" style="background-color: var(--primary-darkish)"><br>darkish</div>
<div class="primary" style="background-color: var(--primary-dark)"><br>dark</div>
<div class="primary" style="background-color: var(--primary-darker)"><br>darker</div>
<div class="primary" style="background-color: var(--primary-darkest)"><br>darkest</div>
</div>
<div class="color-row primary">
<div class="primary" style="background-color: var(--primary-desaturatedest)"><br>desaturatedest</div>
<div class="primary" style="background-color: var(--primary-desaturateder)"><br>desaturated</div>
<div class="primary" style="background-color: var(--primary-desaturated)"><br>desaturated</div>
<div class="primary" style="background-color: var(--primary-desaturatedish)"><br>desaturatedish</div>
<div class="primary" style="background-color: var(--primary)"><br>base</div>
<div class="primary" style="background-color: var(--primary-saturatedish)"><br>saturatedish</div>
<div class="primary" style="background-color: var(--primary-saturated)"><br>saturated</div>
<div class="primary" style="background-color: var(--primary-saturateder)"><br>saturateder</div>
<div class="primary" style="background-color: var(--primary-saturatedest)"><br>saturatedest</div>
</div>
<div class="color-row secondary">
<div class="secondary" style="background-color: var(--secondary-lightest)"><br>lightest</div>
<div class="secondary" style="background-color: var(--secondary-lighter)"><br>light</div>
<div class="secondary" style="background-color: var(--secondary-light)"><br>light</div>
<div class="secondary" style="background-color: var(--secondary-lightish)"><br>lightish</div>
<div class="secondary" style="background-color: var(--secondary)"><br>base</div>
<div class="secondary" style="background-color: var(--secondary-darkish)"><br>darkish</div>
<div class="secondary" style="background-color: var(--secondary-dark)"><br>dark</div>
<div class="secondary" style="background-color: var(--secondary-darker)"><br>darker</div>
<div class="secondary" style="background-color: var(--secondary-darkest)"><br>darkest</div>
</div>
<div class="color-row secondary">
<div class="secondary" style="background-color: var(--secondary-desaturatedest)"><br>desaturatedest</div>
<div class="secondary" style="background-color: var(--secondary-desaturateder)"><br>desaturated</div>
<div class="secondary" style="background-color: var(--secondary-desaturated)"><br>desaturated</div>
<div class="secondary" style="background-color: var(--secondary-desaturatedish)"><br>desaturatedish</div>
<div class="secondary" style="background-color: var(--secondary)"><br>base</div>
<div class="secondary" style="background-color: var(--secondary-saturatedish)"><br>saturatedish</div>
<div class="secondary" style="background-color: var(--secondary-saturated)"><br>saturated</div>
<div class="secondary" style="background-color: var(--secondary-saturateder)"><br>saturateder</div>
<div class="secondary" style="background-color: var(--secondary-saturatedest)"><br>saturatedest</div>
</div>
<div class="color-row accent">
<div class="accent" style="background-color: var(--accent-lightest)"><br>lightest</div>
<div class="accent" style="background-color: var(--accent-lighter)"><br>light</div>
<div class="accent" style="background-color: var(--accent-light)"><br>light</div>
<div class="accent" style="background-color: var(--accent-lightish)"><br>lightish</div>
<div class="accent" style="background-color: var(--accent)"><br>base</div>
<div class="accent" style="background-color: var(--accent-darkish)"><br>darkish</div>
<div class="accent" style="background-color: var(--accent-dark)"><br>dark</div>
<div class="accent" style="background-color: var(--accent-darker)"><br>darker</div>
<div class="accent" style="background-color: var(--accent-darkest)"><br>darkest</div>
</div>
<div class="color-row accent">
<div class="accent" style="background-color: var(--accent-desaturatedest)"><br>desaturatedest</div>
<div class="accent" style="background-color: var(--accent-desaturateder)"><br>desaturated</div>
<div class="accent" style="background-color: var(--accent-desaturated)"><br>desaturated</div>
<div class="accent" style="background-color: var(--accent-desaturatedish)"><br>desaturatedish</div>
<div class="accent" style="background-color: var(--accent)"><br>base</div>
<div class="accent" style="background-color: var(--accent-saturatedish)"><br>saturatedish</div>
<div class="accent" style="background-color: var(--accent-saturated)"><br>saturated</div>
<div class="accent" style="background-color: var(--accent-saturateder)"><br>saturateder</div>
<div class="accent" style="background-color: var(--accent-saturatedest)"><br>saturatedest</div>
</div>
</div>
}
div.color-row.primary > div::before {
content: "Primary";
}
div.color-row.secondary > div::before {
content: "Secondary";
}
div.accentcolor-row.Accent > div::before {
content: "Accent";
}
| 
