docs(colours): Document Colours in Styleguidist format

telus · Jul 19, 2017 · 244e1b4 · 244e1b4
1 parent 477b1e3
commit 244e1b4
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 0 deletions.
diff --git a/config/styleguide.config.js b/config/styleguide.config.js
@@ -26,6 +26,10 @@ module.exports = {
         {
           name: 'Links',
           content: '../docs-new/elements/links.md'
+        },
+        {
+          name: 'Colours',
+          content: '../docs-new/elements/colours.md'
         }
       ]
     },

diff --git a/docs-new/elements/colours.md b/docs-new/elements/colours.md
@@ -0,0 +1,195 @@
+
+## Overview
+
+---
+
+Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change. At a minimum; colours use the WCAG 2.0 Level AA contrast ratio of at least 4.5:1.
+
+## Brand colours
+
+---
+
+White is the cornerstone of our palette and the most dominant colour in it, but purple and green are what make it distinctive and memorable. See usage description below.
+
+## Buttons/Links/Headings/Body
+
+---
+
+<div class="container colors">
+  <div class="grid-row">
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(36,135,0);"></span>
+      <p>
+        <strong>Accessible Green</strong>
+      </p>
+      <p>`$color-accessible-green`</p>
+      <p>#248700</p>
+      <p>Usage: Primary button backgrounds/outline</p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(102, 204, 0);"></span>
+      <p>
+        <strong>Telus Green</strong>
+      </p>
+      <p>`$color-telus-green`</p>
+      <p>#66CC00</p>
+      <p>Usage: Decorative elements (graphs/charts).</p>
+      <p class="text--small">
+        * use only for decorative items (when it doesn't need to be colour accessible)
+      </p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(75,40,109);"></span>
+      <p>
+        <strong>Telus Purple</strong>
+      </p>
+      <p>`$color-telus-purple`</p>
+      <p>#4B286D</p>
+      <p>Usage: Headings, secondary button background/outline, chevron links</p>
+    </div>
+  </div>
+</div>
+
+<div class="container colors">
+  <div class="grid-row">
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(42, 44, 46);"></span>
+      <p>
+        <strong>Shark</strong>
+      </p>
+      <p>`$color-shark`</p>
+      <p>#2A2C2E</p>
+      <p>Usage: Sub headings (H3, H4), body text, and focus form objects borders</p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(84,89,95);"></span>
+      <p>
+        <strong>Shuttle Grey</strong>
+      </p>
+      <p>`$color-shuttle-grey`
+      </p>
+      <p>
+        #54595F
+      </p>
+      <p>
+        Usage: Colour for default links
+      </p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(255, 255, 255);"></span>
+      <p>
+        <strong>White</strong>
+      </p>
+      <p>
+        `$color-white`
+      </p>
+      <p>
+        #FFFFFF
+      </p>
+      <p>
+        Usage: Page background, inverted links/buttons
+      </p>
+    </div>
+  </div>
+</div>
+
+
+## Notifications/messaging/errors
+
+---
+
+<div class="container colors">
+  <div class="grid-row">
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(193,35,53);"></span>
+      <p>
+        <strong>Cardinal</strong>
+      </p>
+      <p>
+        `$color-cardinal`
+      </p>
+      <p>
+        #C12335
+      </p>
+      <p>
+        Usage: Error body text and icons
+      </p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(255,246,248);"></span>
+      <p>
+        <strong>Lavender Blush</strong>
+      </p>
+      <p>
+        `$color-lavender-blush`
+      </p>
+      <p>
+        #FFF6F8
+      </p>
+      <p>
+        Usage: Notification/error messaging background
+      </p>
+    </div>
+    <div class="medium-4">
+      <span class="color-preview" style="background-color: rgb(242,239,244);"></span>
+      <p>
+        <strong>White Lilac</strong>
+      </p>
+      <p>
+        `$color-white-lilac`
+      </p>
+      <p>
+        #F2EFF4
+      </p>
+      <p>
+        Usage: Branded messaging background
+      </p>
+    </div>
+    <div class="grid-row">
+      <div class="medium-4">
+        <span class="color-preview" style="background-color: rgb(216,216,216);"></span>
+        <p>
+          <strong>Gainsboro</strong>
+        </p>
+        <p>
+          `$color-gainsboro`
+        </p>
+        <p>
+          #D8D8D8
+        </p>
+        <p>
+          Usage: Horizontal, vertical and wave dividers
+        </p>
+      </div>
+      <div class="medium-4">
+        <span class="color-preview" style="background-color: rgb(247,247,248);"></span>
+        <p>
+          <strong>Athens Grey</strong>
+        </p>
+        <p>
+          `$color-athens-grey`
+        </p>
+        <p>
+          #F7F7F8
+        </p>
+        <p>
+          Usage: Helper/disabled state background
+        </p>
+      </div>
+      <div class="medium-4">
+        <span class="color-preview" style="background-color: rgb(244,249,242);"></span>
+        <p>
+          <strong>Panache</strong>
+        </p>
+        <p>
+          `$color-panache`
+        </p>
+        <p>
+          #F4F9F2
+        </p>
+        <p>
+          Usage: Success messaging background
+        </p>
+      </div>
+    </div>
+  </div>
diff --git a/docs-new/scss/_colours.scss b/docs-new/scss/_colours.scss
@@ -0,0 +1,8 @@
+.color-preview {
+  border-radius: 50%;
+  border: 1px solid #aaa;
+  display: inline-block;
+  height: 90px;
+  line-height: 90px;
+  width: 90px;
+}
diff --git a/docs-new/scss/styleguide.scss b/docs-new/scss/styleguide.scss
@@ -1,3 +1,4 @@
 @import '../../src/scss/settings/variables';
 
 @import "examples";
+@import "colours";