mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
Remove legacy colour palettes from styleguide
This commit is contained in:
Thibaud Colas
parent
8f96a5669d
commit
1b2aa07a57
@ -15,184 +15,6 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
.palette {
|
||||
@include clearfix();
|
||||
|
||||
ul {
|
||||
@include clearfix();
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.contrast li {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.contrast-large {
|
||||
font-size: 18px;
|
||||
|
||||
li {
|
||||
width: 150px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-black-text {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.color-grey-1-text {
|
||||
color: $color-grey-1;
|
||||
}
|
||||
|
||||
.color-white-text {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.color-salmon-light-text {
|
||||
color: $color-salmon-light;
|
||||
}
|
||||
|
||||
.color-green-text {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
.color-green-dark-text {
|
||||
color: $color-green-dark;
|
||||
}
|
||||
|
||||
.color-teal-darker-text {
|
||||
color: $color-teal-darker;
|
||||
}
|
||||
|
||||
.color-teal-dark-text {
|
||||
color: $color-teal-dark;
|
||||
}
|
||||
|
||||
.color-grey-2-text {
|
||||
color: $color-grey-2;
|
||||
}
|
||||
|
||||
.color-red-text {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.color-red-dark-text {
|
||||
color: $color-red-dark;
|
||||
}
|
||||
|
||||
.color-teal-text {
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
.color-orange-text {
|
||||
color: $color-orange;
|
||||
}
|
||||
|
||||
.color-orange-dark-text {
|
||||
color: $color-orange-dark;
|
||||
}
|
||||
|
||||
.color-blue-text {
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
.color-salmon-text {
|
||||
color: $color-salmon;
|
||||
}
|
||||
|
||||
.color-grey-3-text {
|
||||
color: $color-grey-3;
|
||||
}
|
||||
|
||||
.color-grey-4-text {
|
||||
color: $color-grey-4;
|
||||
}
|
||||
|
||||
.color-grey-5-text {
|
||||
color: $color-grey-5;
|
||||
}
|
||||
|
||||
.color-menu-text {
|
||||
color: $color-menu-text;
|
||||
}
|
||||
|
||||
.color-teal {
|
||||
background-color: $color-teal;
|
||||
}
|
||||
|
||||
.color-teal-darker {
|
||||
background-color: $color-teal-darker;
|
||||
}
|
||||
|
||||
.color-teal-dark {
|
||||
background-color: $color-teal-dark;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
background-color: $color-red;
|
||||
}
|
||||
|
||||
.color-red-dark {
|
||||
background-color: $color-red-dark;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
background-color: $color-orange;
|
||||
}
|
||||
|
||||
.color-orange-dark {
|
||||
background-color: $color-orange-dark;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
background-color: $color-green;
|
||||
}
|
||||
|
||||
.color-green-dark {
|
||||
background-color: $color-green-dark;
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
background-color: $color-blue;
|
||||
}
|
||||
|
||||
.color-grey-1 {
|
||||
background-color: $color-grey-1;
|
||||
}
|
||||
|
||||
.color-grey-2 {
|
||||
background-color: $color-grey-2;
|
||||
}
|
||||
|
||||
.color-grey-3 {
|
||||
background-color: $color-grey-3;
|
||||
}
|
||||
|
||||
.color-grey-4 {
|
||||
background-color: $color-grey-4;
|
||||
}
|
||||
|
||||
.color-grey-5 {
|
||||
background-color: $color-grey-5;
|
||||
}
|
||||
|
||||
.color-salmon {
|
||||
background-color: $color-salmon;
|
||||
}
|
||||
|
||||
.color-salmon-light {
|
||||
background-color: $color-salmon-light;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
:before,
|
||||
:after {
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
<h2>Contents</h2>
|
||||
<nav>
|
||||
<ul class="unlist">
|
||||
<li><a href="#palette">Colour palette</a></li>
|
||||
<li><a href="#accessiblecolours">Accessible colour combinations</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#help">Help text</a></li>
|
||||
<li><a href="#listings">Listings</a></li>
|
||||
@ -39,191 +37,6 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="palette" class="palette">
|
||||
<h2>Colour palette</h2>
|
||||
|
||||
<ul>
|
||||
<li class="color-teal color-white-text">color-teal</li>
|
||||
<li class="color-teal-darker color-white-text">color-teal-darker</li>
|
||||
<li class="color-teal-dark color-white-text">color-teal-dark</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="color-salmon">color-salmon</li>
|
||||
<li class="color-salmon-light">color-salmon-light</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="color-grey-1 color-white-text">color-grey-1</li>
|
||||
<li class="color-grey-2 color-white-text">color-grey-2</li>
|
||||
<li class="color-grey-3">color-grey-3</li>
|
||||
<li class="color-grey-4">color-grey-4</li>
|
||||
<li class="color-grey-5">color-grey-5</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="color-red color-white-text">color-red</li>
|
||||
<li class="color-red-dark color-white-text">color-red-dark</li>
|
||||
<li class="color-orange">color-orange</li>
|
||||
<li class="color-orange-dark">color-orange-dark</li>
|
||||
<li class="color-green">color-green</li>
|
||||
<li class="color-green-dark color-white-text">color-green-dark</li>
|
||||
<li class="color-blue">color-blue</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="palette" id="accessiblecolours">
|
||||
|
||||
<h2>Accessible colour combinations</h2>
|
||||
<p>WCAG (Web Content Accessibility Guidelines) ensures that content is accessible by everyone, regardless of any disability or user device. To ensure text remains compliant with WCAG 2.0 AA standards, use only these permitted colour combinations.</p>
|
||||
|
||||
<p>Use this <a href="https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?colors=43b1b0,358c8b,246060,71b2d4,cd3238,e9b04d,189370,f37e77,fcf2f2,ffffff,000000,333333,404040,666666,d9d9d9,e6e6e6,fafafa,cacaca&level=AA">Color Palette Accessibility Checker</a> to test new colour combinations using the existing colour palette.</p>
|
||||
|
||||
<h3>Small text combinations: for font sizes 16px or smaller</h3>
|
||||
<ul class="contrast">
|
||||
<li class="color-teal "><span class="color-white-text">color-white on color-teal</span></li>
|
||||
<li class="color-teal-dark"><span class="color-white-text">color-white on color-teal-dark</span></li>
|
||||
<li class="color-teal-dark"><span class="color-salmon-light-text">color-salmon-light on color-teal-dark</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-salmon"><span class="color-black-text">color-black on color-salmon</span></li>
|
||||
<li class="color-salmon"><span class="color-grey-1-text">color-grey-1 on color-salmon</span></li>
|
||||
<li class="color-salmon-light"><span class="color-teal-dark-text">color-teal-dark on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-red-text">color-red on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-black-text">color-black on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-grey-1-text">color-grey-1 on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-grey-2-text">color-grey-2 on color-salmon-light</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-grey-1"><span class="color-blue-text">color-blue on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-orange-text">color-orange on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-salmon-text">color-salmon on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-white-text">color-white on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-menu-text">color-menu-text on color-grey-1</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-grey-2"><span class="color-salmon-light-text">color-salmon on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-white-text">color-white on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-grey-4-text">color-grey-4 on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-grey-5-text">color-grey-5 on color-grey-2</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-grey-3"><span class="color-teal-dark-text">color-teal-dark on color-grey-3</span></li>
|
||||
<li class="color-grey-3"><span class="color-black-text">color-black on color-grey-3</span></li>
|
||||
<li class="color-grey-3"><span class="color-grey-1-text">color-grey-1 on color-grey-3</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-grey-4"><span class="color-teal-dark-text">color-teal-dark on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-black-text">color-black on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-grey-1-text">color-grey-1 on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-grey-2-text">color-grey-2 on color-grey-4</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-grey-5"><span class="color-teal-dark-text">color-teal-dark on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-red-text">color-red on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-black-text">color-black on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-grey-1-text">color-grey-1 on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-grey-2-text">color-grey-2 on color-grey-5</span></li>
|
||||
</ul>
|
||||
<ul class="contrast">
|
||||
<li class="color-red"><span class="color-salmon-light-text">color-salmon-light on color-red</span></li>
|
||||
<li class="color-red"><span class="color-white-text">color-white on color-red</span></li>
|
||||
<li class="color-red"><span class="color-grey-5-text">color-grey-5 on color-red</span></li>
|
||||
<li class="color-orange"><span class="color-black-text">color-black on color-orange</span></li>
|
||||
<li class="color-orange"><span class="color-grey-1-text">color-grey-1 on color-orange</span></li>
|
||||
<li class="color-green"><span class="color-black-text">color-black on color-green</span></li>
|
||||
<li class="color-blue"><span class="color-black-text">color-black on color-blue</span></li>
|
||||
<li class="color-blue"><span class="color-grey-1-text">color-grey-1 on color-blue</span></li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<h3>Large text combinations: for font sizes 18px or larger</h3>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-teal-darker"><span class="color-salmon-light-text">color-salmon-light on color-teal-darker</span></li>
|
||||
<li class="color-teal-darker"><span class="color-white-text">color-white on color-teal-darker</span></li>
|
||||
<li class="color-teal-darker"><span class="color-grey-4-text">color-grey-4 on color-teal-darker</span></li>
|
||||
<li class="color-teal-darker"><span class="color-grey-5-text">color-grey-5 on color-teal-darker</span></li>
|
||||
<li class="color-teal-dark"><span class="color-white-text">color-white on color-teal-dark</span></li>
|
||||
<li class="color-teal-dark"><span class="color-salmon-light-text">color-salmon-light on color-teal-dark</span></li>
|
||||
<li class="color-teal-dark"><span class="color-grey-3-text">color-grey-3 on color-teal-dark</span></li>
|
||||
<li class="color-teal-dark"><span class="color-grey-4-text">color-grey-4 on color-teal-dark</span></li>
|
||||
<li class="color-teal-dark"><span class="color-grey-5-text">color-grey-5 on color-teal-dark</span></li>
|
||||
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-salmon"><span class="color-black-text">color-black on color-salmon</span></li>
|
||||
<li class="color-salmon"><span class="color-grey-1-text">color-grey-1 on color-salmon</span></li>
|
||||
<li class="color-salmon-light"><span class="color-teal-darker-text">color-teal-darker on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-teal-dark-text">color-teal-dark on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-red-text">color-red on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-black-text">color-black on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-grey-1-text">color-grey-1 on color-salmon-light</span></li>
|
||||
<li class="color-salmon-light"><span class="color-grey-2-text">color-grey-2 on color-salmon-light</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-grey-1"><span class="color-blue-text">color-blue on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-orange-text">color-orange on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-salmon-text">color-salmon on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-white-text">color-white on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-menu-text">color-menu-text on color-grey-1</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-grey-2"><span class="color-salmon-light-text">color-salmon on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-white-text">color-white on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-grey-3-text">color-grey-3 on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-grey-4-text">color-grey-4 on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-grey-5-text">color-grey-5 on color-grey-2</span></li>
|
||||
<li class="color-grey-2"><span class="color-menu-text">color-menu-text on color-grey-2</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-grey-3"><span class="color-teal-dark-text">color-teal-dark on color-grey-3</span></li>
|
||||
<li class="color-grey-3"><span class="color-black-text">color-black on color-grey-3</span></li>
|
||||
<li class="color-grey-3"><span class="color-grey-1-text">color-grey-1 on color-grey-3</span></li>
|
||||
<li class="color-grey-3"><span class="color-grey-2-text">color-grey-2 on color-grey-3</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-grey-4"><span class="color-teal-darker-text">color-teal-darker on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-teal-dark-text">color-teal-dark on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-black-text">color-black on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-grey-1-text">color-grey-1 on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-grey-2-text">color-grey-2 on color-grey-4</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-grey-5"><span class="color-teal-darker-text">color-teal-darker on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-teal-dark-text">color-teal-dark on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-red-text">color-red on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-black-text">color-black on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-grey-1-text">color-grey-1 on color-grey-5</span></li>
|
||||
<li class="color-grey-5"><span class="color-grey-2-text">color-grey-2 on color-grey-5</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-red-dark"><span class="color-salmon-light-text">color-salmon-light on color-red-dark</span></li>
|
||||
<li class="color-red-dark"><span class="color-white-text">color-white on color-red-dark</span></li>
|
||||
<li class="color-red-dark"><span class="color-grey-3-text">color-grey-3 on color-red-dark</span></li>
|
||||
<li class="color-red-dark"><span class="color-grey-4-text">color-grey-4 on color-red-dark</span></li>
|
||||
<li class="color-red-dark"><span class="color-grey-5-text">color-grey-5 on color-red-dark</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-orange-dark"><span class="color-white-text">color-white on color-orange-dark</span></li>
|
||||
<li class="color-orange-dark"><span class="color-black-text">color-black on color-orange-dark</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-green-dark"><span class="color-white-text">color-white on color-green-dark</span></li>
|
||||
<li class="color-green-dark"><span class="color-salmon-light-text">color-salmon-light on color-green-dark</span></li>
|
||||
</ul>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-blue"><span class="color-black-text">color-black on color-blue</span></li>
|
||||
<li class="color-blue"><span class="color-grey-1-text">color-grey-1 on color-blue</span></li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="typography">
|
||||
<h2>Typography</h2>
|
||||
<h1>This is an h1</h1>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user