mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-04-05 23:50:59 +00:00
Keep styleguide color combinations up to date
This commit is contained in:
Thibaud Colas
parent
0c774e7dd1
commit
0131e80eb5
2 changed files with 43 additions and 61 deletions
|
|
@ -67,6 +67,10 @@ section {
|
|||
color: $color-green;
|
||||
}
|
||||
|
||||
.color-green-dark-text {
|
||||
color: $color-green-dark;
|
||||
}
|
||||
|
||||
.color-teal-darker-text {
|
||||
color: $color-teal-darker;
|
||||
}
|
||||
|
|
@ -83,6 +87,10 @@ section {
|
|||
color: $color-red;
|
||||
}
|
||||
|
||||
.color-red-dark-text {
|
||||
color: $color-red-dark;
|
||||
}
|
||||
|
||||
.color-teal-text {
|
||||
color: $color-teal;
|
||||
}
|
||||
|
|
@ -91,6 +99,10 @@ section {
|
|||
color: $color-orange;
|
||||
}
|
||||
|
||||
.color-orange-dark-text {
|
||||
color: $color-orange-dark;
|
||||
}
|
||||
|
||||
.color-blue-text {
|
||||
color: $color-blue;
|
||||
}
|
||||
|
|
@ -131,14 +143,26 @@ section {
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,26 +43,28 @@
|
|||
<h2>Colour palette</h2>
|
||||
|
||||
<ul>
|
||||
<li class="color-teal">color-teal</li>
|
||||
<li class="color-teal-darker">color-teal-darker</li>
|
||||
<li class="color-teal-dark">color-teal-dark</li>
|
||||
<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-grey-1</li>
|
||||
<li class="color-grey-1-1">color-grey-1-1</li>
|
||||
<li class="color-grey-2">color-grey-2</li>
|
||||
<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-red</li>
|
||||
<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>
|
||||
|
|
@ -76,9 +78,7 @@
|
|||
|
||||
<h3>Small text combinations: for font sizes 16px or smaller</h3>
|
||||
<ul class="contrast">
|
||||
<li class="color-teal"><span class="color-black-text">color-black on color-teal</span></li>
|
||||
<li class="color-teal"><span class="color-grey-1-text">color-grey-1 on color-teal</span></li>
|
||||
<li class="color-teal-darker"><span class="color-black-text">color-black on color-teal-darker</span></li>
|
||||
<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>
|
||||
|
|
@ -92,7 +92,6 @@
|
|||
<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-teal-text">color-teal on color-grey-1</span></li>
|
||||
<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>
|
||||
|
|
@ -103,15 +102,6 @@
|
|||
<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-1-1"><span class="color-orange-text">color-orange on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-white-text">color-white on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-menu-text">color-menu-text on color-grey-1-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>
|
||||
|
|
@ -151,12 +141,8 @@
|
|||
<br>
|
||||
<h3>Large text combinations: for font sizes 18px or larger</h3>
|
||||
<ul class="contrast contrast-large">
|
||||
<li class="color-teal"><span class="color-black-text">color-black on color-teal</span></li>
|
||||
<li class="color-teal"><span class="color-grey-1-text">color-grey-1 on color-teal</span></li>
|
||||
<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-black-text">color-black on color-teal-darker</span></li>
|
||||
<li class="color-teal-darker"><span class="color-grey-1-text">color-grey-1 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>
|
||||
|
|
@ -172,16 +158,12 @@
|
|||
<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-green-text">color-green 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-teal-text">color-teal on color-grey-1</span></li>
|
||||
<li class="color-grey-1"><span class="color-teal-darker-text">color-teal-darker on color-grey-1</span></li>
|
||||
<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-green-text">color-green 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>
|
||||
|
|
@ -191,18 +173,6 @@
|
|||
<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-1-1"><span class="color-teal-text">color-teal on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-blue-text">color-blue on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-orange-text">color-orange on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-salmon-text">color-salmon on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-white-text">color-white on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1-1</span></li>
|
||||
<li class="color-grey-1-1"><span class="color-menu-text">color-menu-text on color-grey-1-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>
|
||||
|
|
@ -213,7 +183,6 @@
|
|||
</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-red-text">color-red 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>
|
||||
|
|
@ -221,8 +190,6 @@
|
|||
<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-red-text">color-red on color-grey-4</span></li>
|
||||
<li class="color-grey-4"><span class="color-green-text">color-green 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>
|
||||
|
|
@ -231,35 +198,26 @@
|
|||
<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-green-text">color-green 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"><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-black-text">color-black on color-red</span></li>
|
||||
<li class="color-red"><span class="color-grey-3-text">color-grey-3 on color-red</span></li>
|
||||
<li class="color-red"><span class="color-grey-4-text">color-grey-4 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-red"><span class="color-menu-text">color-menu-text on color-red</span></li>
|
||||
<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"><span class="color-teal-dark-text">color-teal-dark on color-orange</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-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"><span class="color-white-text">color-white on color-green</span></li>
|
||||
<li class="color-green"><span class="color-salmon-light-text">color-salmon-light on color-green</span></li>
|
||||
<li class="color-green"><span class="color-black-text">color-black on color-green</span></li>
|
||||
<li class="color-green"><span class="color-grey-1-text">color-grey-1 on color-green</span></li>
|
||||
<li class="color-green"><span class="color-grey-4-text">color-grey-4 on color-green</span></li>
|
||||
<li class="color-green"><span class="color-grey-5-text">color-grey-5 on color-green</span></li>
|
||||
<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-teal-dark-text">color-teal-dark on color-blue</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue