From 0131e80eb58ea2e522e478042eda4d49abb5d35d Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Thu, 23 May 2019 16:23:36 +0100
Subject: [PATCH] Keep styleguide color combinations up to date

---
 .../wagtailstyleguide/scss/styleguide.scss    | 24 ++++++
 .../templates/wagtailstyleguide/base.html     | 80 +++++--------------
 2 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss b/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss
index 109cfe5f1..6bcb8804f 100644
--- a/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss
+++ b/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss
@@ -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;
     }
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
index e99276d9b..5fdab7e84 100644
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@@ -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>