Revert headings colour

nice-digital · Oct 18, 2018 · 02c01da · 02c01da
1 parent ed564fd
commit 02c01da
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 34 deletions.
diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
@@ -152,7 +152,6 @@
 
   &__heading {
     @include font-size(-1);
-    color: $colour-text-inverse;
     display: inline-block;
     font-weight: normal;
     margin: em(0 $spacing-small 0 0);

diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
@@ -29,24 +29,13 @@
   // Extra supplementary links etc
   &__extra {
     @include grid-item(12, $md: 4, $loose: true);
-
-    // sass-lint:disable-block no-universal-selectors
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: $colour-text-inverse;
-    }
   }
 
   &__title {
     @include h1;
-    color: $colour-text-inverse;
   }
 
   &__intro {
     @include lead;
-    color: $colour-text-inverse;
   }
 }
diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss
@@ -7,6 +7,7 @@
 /// @since 0.1.0
 .panel {
   background: $colour-panel-default;
+  border: 1px solid $colour-panel-default-border; // To distinguish panel from off-grey body background
   margin: em($spacing-medium 0 $spacing-large);
   padding: em($spacing-medium);
 
@@ -30,13 +31,6 @@
 .panel--inverse {
   @include links-inverse;
   background: $colour-panel-inverse;
+  border: 0;
   color: $colour-text-inverse;
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $colour-text-inverse;
-  }
 }
diff --git a/src/stylesheets/settings/_settings-colours-semantic.scss b/src/stylesheets/settings/_settings-colours-semantic.scss
@@ -13,17 +13,19 @@ $colour-true-white: #fff;
 
 // GLOBAL
 
-/// Page background colour
+/// Page background colour. It's off-white in an attempt to make
+/// text easier to read for those with 'visual stress', 50% of
+/// which happen to be dyslexic (British Dyslexia association), by
+/// reducing contrast. See https://ux.stackexchange.com/a/73918/92081
+/// for a more detailed explanation.
 /// @since 0.2.0
-$colour-body: #fafafa;
+$colour-body: #f4f4f4;
 
-/// Standard, primary body text colour
+/// Standard, primary body text colour. Off-black, to slightly reduce
+/// contrast in an attempt to make text easier to read for those with
+/// 'visual stress', see also $colour-body.
 /// @since 0.2.0
-$colour-text: $colour-nice-rich-black;
-
-/// Heading text colour
-/// @since 0.5.2
-$colour-headings: $colour-nice-black;
+$colour-text: $colour-nice-black;
 
 /// Subtle text colour
 /// @since 0.2.0
@@ -165,6 +167,10 @@ $colour-border: $colour-nice-grey-1;
 /// @since 0.2.0
 $colour-panel-default: $colour-nice-grey-3;
 
+// Default (light) panel border
+/// @since 0.5.2
+$colour-panel-default-border: $colour-nice-grey-2;
+
 // Inverse (dark) panels background
 /// @since 0.2.0
 $colour-panel-inverse: $colour-nice-dark-grey;

diff --git a/src/stylesheets/typography/_typography-headings.scss b/src/stylesheets/typography/_typography-headings.scss
@@ -8,7 +8,6 @@
 @mixin h1 {
   @include font(h1);
   clear: both;
-  color: $colour-headings;
   font-weight: 900;
   max-width: 66ch;
 }
@@ -19,7 +18,6 @@
 @mixin h2 {
   @include font(h2);
   clear: both;
-  color: $colour-headings;
   font-weight: 700;
   max-width: 66ch;
 }
@@ -30,7 +28,6 @@
 @mixin h3 {
   @include font(h3);
   clear: both;
-  color: $colour-headings;
   font-weight: 700;
   max-width: 66ch;
 }
@@ -41,7 +38,6 @@
 @mixin h4 {
   @include font(h4);
   clear: both;
-  color: $colour-headings;
   font-weight: 700;
   max-width: 66ch;
 }
@@ -52,7 +48,6 @@
 @mixin h5 {
   @include font(h5);
   clear: both;
-  color: $colour-headings;
   font-weight: 700;
   max-width: 66ch;
 }
@@ -63,7 +58,6 @@
 @mixin h6 {
   @include font(h6);
   clear: both;
-  color: $colour-headings;
   font-weight: 700;
   max-width: 66ch;
 }