Use 'inverse' instead of 'reverse' and remove reference to 'dark' panels

nice-digital · Apr 28, 2017 · c8b9b97 · c8b9b97
1 parent 618d409
commit c8b9b97
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 30 deletions.
diff --git a/server/views/components/panels.njk b/server/views/components/panels.njk
@@ -0,0 +1,31 @@
+{% extends "layouts/_layout.njk" %}
+{% set title = "Panels component" %}
+
+{% block body %}
+
+	<div class="container">
+
+		<h1>Panels</h1>
+
+		<h2>Default (light) panel</h2>
+
+		<div class="panel">
+			<p>
+				Some <a href="#">text</a> content
+			</p>
+		</div>
+
+		<h2>Inverse (dark) panel</h2>
+
+		<div class="panel panel--inverse">
+			<p>
+				Some <a href="#">text</a> content
+			</p>
+			<p>
+				<a href="#" class="btn btn--light">A light button</a>
+			</p>
+		</div>
+
+	</div>
+
+{% endblock %}
diff --git a/server/views/index.njk b/server/views/index.njk
@@ -7,6 +7,7 @@
 		<li><a href="/components/tabs/">Tabs</a></li>
 		<li><a href="/components/quote/">Quote</a></li>
 		<li><a href="/components/lists/">Lists</a></li>
+		<li><a href="/components/panels/">Panels</a></li>
 		<li><a href="/components/typography/">Typography</a></li>
 	</ul>
 

diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
@@ -6,8 +6,8 @@
 /// @since 0.1.0
 .site-footer {
   @include font-size(-1);
-  background: $colour-panel-dark;
-  color: $colour-text-reverse;
+  background: $colour-panel-inverse;
+  color: $colour-text-inverse;
   margin-top: em(32px);
   padding: em(32px 0);
 
@@ -16,7 +16,7 @@
   }
 
   a {
-    color: $colour-text-reverse;
+    color: $colour-text-inverse;
 
     &:focus {
       color: #000;
@@ -105,13 +105,13 @@
 
     a {
       @include font-size(-1);
-      color: $colour-panel-light;
+      color: $colour-panel-default;
       display: block;
       padding: em(8 0);
       text-decoration: none;
 
       &:hover {
-        color: $colour-text-reverse;
+        color: $colour-text-inverse;
       }
 
       &:focus {
@@ -218,7 +218,7 @@
     }
 
     &__item {
-      border-left: 1px solid $colour-text-reverse;
+      border-left: 1px solid $colour-text-inverse;
       display: inline-block;
       line-height: 1;
 

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -52,7 +52,7 @@
     float: left;
 
     &--active .tabs__tab-btn { // sass-lint:disable-line no-combinators
-      background: $colour-panel-light;
+      background: $colour-panel-default;
     }
   }
 
@@ -67,13 +67,13 @@
     padding: 0 1rem;
 
     &:hover {
-      background: $colour-panel-light;
+      background: $colour-panel-default;
     }
   }
 
   // The tab content containing the tab panels
   &__content {
-    background: $colour-panel-light;
+    background: $colour-panel-default;
     padding: 1rem;
   }
 

diff --git a/src/stylesheets/components/_components-global.scss b/src/stylesheets/components/_components-global.scss
@@ -36,7 +36,13 @@
   }
 
   &--panel {
-    background: $colour-panel-light;
+    background: $colour-panel-default;
+    padding: 0 2%;
+    width: auto;
+  }
+
+  &--panel-inverse {
+    background: $colour-panel-inverse;
     padding: 0 2%;
     width: auto;
   }

diff --git a/src/stylesheets/components/_components-hero.scss b/src/stylesheets/components/_components-hero.scss
@@ -1,6 +1,7 @@
 .hero {
+  @extend %inverse-links;
   background: $colour-nice-teal;
-  color: $colour-text-reverse;
+  color: $colour-text-inverse;
   padding: em(0 0 $spacing-large);
 
   &__container {

diff --git a/src/stylesheets/components/_components-nav.scss b/src/stylesheets/components/_components-nav.scss
@@ -20,7 +20,7 @@
       text-decoration: none;
 
       &:hover {
-        background-color: $colour-panel-light;
+        background-color: $colour-panel-default;
       }
 
       &:active {

diff --git a/src/stylesheets/components/_components-panel.scss b/src/stylesheets/components/_components-panel.scss
@@ -6,7 +6,7 @@
 /// Often used within a sidebar.
 /// @since 0.1.0
 .panel {
-  background: $colour-panel-light;
+  background: $colour-panel-default;
   margin: em($spacing-medium 0 $spacing-large);
   padding: em($spacing-medium);
 
@@ -19,12 +19,14 @@
   }
 }
 
-/// Modifier for the panel, to use a dark background
+/// Modifier for the panel, to use a inverse (dark) background.
+/// Autmatically uses inverse links within it. Doesn't affect buttons
+/// though, so any buttons within a dark panel should be `.btn.btn--light`.
 /// @require %inverse-links
 /// @require .panel
 /// @since 0.1.0
-.panel--dark {
+.panel--inverse {
   @extend %inverse-links;
-  background: $colour-panel-dark;
-  color: $colour-text-reverse;
+  background: $colour-panel-inverse;
+  color: $colour-text-inverse;
 }
diff --git a/src/stylesheets/components/_components-phase.scss b/src/stylesheets/components/_components-phase.scss
@@ -47,8 +47,8 @@
 /// @since 0.1.0
 .phase-tag {
   @include font-size(-1);
-  background-color: $colour-panel-dark;
-  color: $colour-text-reverse;
+  background-color: $colour-panel-inverse;
+  color: $colour-text-inverse;
   display: inline-block;
   font-weight: 900;
   letter-spacing: 1px;
@@ -64,16 +64,16 @@
 
   &--alpha {
     background-color: $colour-alpha;
-    color: $colour-text-reverse;
+    color: $colour-text-inverse;
   }
 
   &--beta {
     background-color: $colour-beta;
-    color: $colour-text-reverse;
+    color: $colour-text-inverse;
   }
 
   &--live {
     background-color: $colour-live;
-    color: $colour-text-reverse;
+    color: $colour-text-inverse;
   }
 }
diff --git a/src/stylesheets/settings/_settings-colours-semantic.scss b/src/stylesheets/settings/_settings-colours-semantic.scss
@@ -25,9 +25,9 @@ $colour-text: $colour-nice-rich-black;
 /// @since 0.2.0
 $colour-text-subtle: $colour-nice-grey-1;
 
-/// Body text colour for use on dark background
+/// Inverse body text colour for use on dark background
 /// @since 0.2.2
-$colour-text-reverse: $colour-nice-white;
+$colour-text-inverse: $colour-nice-white;
 
 /// Focus colour
 /// @since 0.2.0
@@ -61,7 +61,7 @@ $colour-link-active: #2e8aca;
 
 /// Inverse link text colour
 /// @since 0.2.9
-$colour-link-inverse: $colour-text-reverse;
+$colour-link-inverse: $colour-text-inverse;
 
 /// Inverse link hover colour
 /// @since 0.2.9
@@ -146,13 +146,13 @@ $colour-btn-light-text: $colour-nice-rich-black;
 /// @since 0.2.0
 $colour-border: $colour-nice-grey-1;
 
-// Light panels, tabs etc
+// Default (light) panel background, tabs etc
 /// @since 0.2.0
-$colour-panel-light: $colour-nice-grey-3;
+$colour-panel-default: $colour-nice-grey-3;
 
-// Dark panels background
+// Inverse (dark) panels background
 /// @since 0.2.0
-$colour-panel-dark: $colour-nice-dark-grey;
+$colour-panel-inverse: $colour-nice-dark-grey;
 
 
 // NOTIFICATIONS/BANNERS

diff --git a/src/stylesheets/typography/_typography-global.scss b/src/stylesheets/typography/_typography-global.scss
@@ -134,7 +134,7 @@ p,
 }
 
 code {
-  background: $colour-panel-light;
+  background: $colour-panel-default;
   border: 1px solid $colour-border;
   border-radius: 2px;
   color: $colour-text;