increase font size across admin, improve color contrast

client/scss/components/_button.scss

@@ -222,7 +222,7 @@
     &.disabled {
         background-color: $color-grey-3;
         border-color: $color-grey-3;
-        color: lighten($color-grey-2, 15%);
+        color: $color-grey-2;
         cursor: default;
     }
 

client/scss/components/_header.scss

@@ -92,6 +92,10 @@ header {
         }
     }
 
+    .error-message {
+        color: inherit;
+    }
+
     .fields {
         margin-top: -0.5em;
 

client/scss/components/_help-block.scss

@@ -14,7 +14,7 @@
     }
 
     a {
-        color: $color-teal;
+        color: $color-link;
     }
 }
 

client/scss/components/_listing.scss

@@ -44,7 +44,7 @@ ul.listing {
         border-bottom: 1px solid $color-grey-4;
 
         th {
-            font-size: 0.85em;
+            font-size: 0.9em;
             text-align: left;
             font-weight: normal;
             white-space: nowrap;
@@ -129,7 +129,7 @@ ul.listing {
             }
 
             .parent a {
-                color: $color-link-hover;
+                color: $color-white;
             }
 
             .status-tag {

client/scss/components/_messages.scss

@@ -32,7 +32,7 @@
     }
 
     .error {
-        background-color: $color-red;
+        background-color: $color-red-dark;
 
         &:before {
             font-family: wagtail;
@@ -41,7 +41,7 @@
     }
 
     .warning {
-        background-color: $color-orange;
+        background-color: $color-orange-dark;
 
         &:before {
             font-family: wagtail;
@@ -50,7 +50,7 @@
     }
 
     .success {
-        background-color: $color-green;
+        background-color: $color-green-dark;
 
         &:before {
             font-family: wagtail;
@@ -64,11 +64,10 @@
 
     .button-secondary {
         border-color: rgba(255, 255, 255, 0.5);
-        color: rgba(255, 255, 255, 0.8);
+        color: $color-white;
 
         &:hover {
             border-color: transparent;
-            color: $color-white;
         }
     }
 

client/scss/components/_messages.status.scss

@@ -1,9 +1,9 @@
 .status-msg {
     &.success {
-        color: $color-green;
+        color: $color-green-dark;
     }
 
     &.failure {
-        color: $color-red;
+        color: $color-red-dark;
     }
 }

client/scss/elements/_forms.scss

@@ -40,6 +40,10 @@ label,
         display: inline;
     }
 
+    &.no-float {
+        float: none;
+    }
+
     @include media-breakpoint-up(sm) {
         @include column(2);
         padding-top: 1.2em;

client/scss/elements/_typography.scss

@@ -8,7 +8,7 @@
 body {
     -webkit-font-smoothing: antialiased; // Do not remove!
     font-family: Open Sans, Arial, sans-serif;
-    font-size: 80%;
+    font-size: 85%;
     line-height: 1.5em;
     color: $color-text-base;
 }
@@ -84,7 +84,7 @@ dl {
 }
 
 dt {
-    color: darken($color-grey-3, 15%);
+    color: $color-grey-2;
     text-transform: uppercase;
     font-size: 0.9em;
 }

client/scss/settings/_variables.scss

@@ -34,8 +34,11 @@ $color-teal-dark: darken(adjust-hue($color-teal, 1), 7);
 
 $color-blue: #71b2d4;
 $color-red: #cd3238;
+$color-red-dark: #b4191f;
 $color-orange: #e9b04d;
+$color-orange-dark: #bb5b03;
 $color-green: #189370;
+$color-green-dark: #157b57;
 $color-salmon: #f37e77;
 $color-salmon-light: #fcf2f2;
 $color-white: #fff;
@@ -44,7 +47,6 @@ $color-black: #000;
 // darker to lighter
 $color-grey-1: darken($color-white, 80);
 $color-grey-2: darken($color-white, 70);
-
 $color-grey-3: darken($color-white, 15);
 $color-grey-4: darken($color-white, 10);
 $color-grey-5: darken($color-white, 2);
@@ -62,13 +64,13 @@ $color-input-error-bg: lighten(saturate($color-red, 28), 45);
 
 $color-button: $color-teal;
 $color-button-hover: $color-teal-darker;
-$color-button-yes: $color-green;
+$color-button-yes: $color-green-dark;
 $color-button-yes-hover: darken($color-button-yes, 8%);
-$color-button-no: $color-red;
+$color-button-no: $color-red-dark;
 $color-button-no-hover: darken($color-button-no, 20%);
-$color-button-warning: $color-orange;
-$color-button-warning-hover: darken($color-orange, 20%);
-$color-link: $color-teal;
+$color-button-warning: $color-orange-dark;
+$color-button-warning-hover: darken($color-button-warning, 20%);
+$color-link: $color-teal-darker;
 $color-link-hover: $color-teal-dark;
 
 $color-text-base: darken($color-white, 85);
@@ -86,7 +88,7 @@ $font-serif: Roboto Slab, Georgia, serif;
 
 // misc sizing
 $thumbnail-width: 130px;
-$menu-width: 180px;
+$menu-width: 200px;
 $menu-width-max: 320px;
 $mobile-nav-indent: 50px;
 

wagtail/images/templates/wagtailimages/images/edit.html

@@ -75,7 +75,7 @@
 
                 <div class="row">
                     <div class="col8 divider-after">
-                        <h2 class="label u-text-transform-uppercase">{% trans "Focal point" %} <span class="u-text-weight-normal">{% trans "(optional)" %}</span></h2>
+                        <h2 class="label no-float u-text-transform-uppercase">{% trans "Focal point" %} <span class="u-text-weight-normal">{% trans "(optional)" %}</span></h2>
                         <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
 
                         <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>