ember-learn · mansona · Jun 21, 2019 · Jun 21, 2019
diff --git a/addon/styles/components/es-card.css b/addon/styles/components/es-card.css
@@ -7,4 +7,4 @@
 
 .card-content {
   padding: 1rem;
-}
+}
diff --git a/addon/styles/global.css b/addon/styles/global.css
@@ -5,6 +5,10 @@
   --color-muted: #F4F6F8;
   --color-ember-orange: #E04E39;
   --color-gray: #A2A3A8;
+  --color-success: #D9F9E3;
+  --color-danger: #FFD8E1;
+  --color-warning: #FCFFC9;
+  --color-info: #E3EEFC;
   --text-preset-1: 0.8rem;
   --text-preset-2: 1rem;
   --text-preset-3: 2rem;
@@ -13,6 +17,11 @@
   --font-weight-1: 300;
   --font-weight-2: 400;
   --font-weight-3: 600; 
+  --spacing-1: 0.5rem;
+  --spacing-2: 1rem;
+  --spacing-3: 2rem;
+  --spacing-4: 4rem;
+  --max-width: 80rem;
 }
 
 body, html {
@@ -60,10 +69,14 @@ h6 {
   color: var(--color-light);
 }
 
-.muted {
+.bg-muted {
   background-color: var(--color-muted);
 }
 
+.bg-info {
+  background: var(--color-info);
+}
+
 .container {
   max-width: var(--container-width-large);
   margin-left: auto;

diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css
@@ -4,4 +4,4 @@
 
 .margin-bottom-small {
   margin-bottom: 2rem;
-}
+}
diff --git a/addon/styles/layout.css b/addon/styles/layout.css
@@ -1,9 +1,14 @@
+.container {
+  padding: var(--spacing-4) 0;
+  margin: 0 auto;
+  width: var(--max-width);
+}
+
 .row {
   display: flex;
   margin-left: -1rem;
   margin-right: -1rem;
-  width: 100%;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   margin-bottom: 2rem;
 }
 
@@ -21,11 +26,16 @@
   align-items: flex-end;
 }
 
-.col-50 {
+.col-one-half {
   width: 50%;
   margin: 0 1rem;
 }
 
+.col-one-third {
+  width: 30.3%;
+  margin: 0 1rem;
+}
+
 @media (max-width: 576px) {
   .row {
     flex-direction: column;

diff --git a/package-lock.json b/package-lock.json
diff --git a/tests/dummy/app/styles/color-pallet.css b/tests/dummy/app/styles/color-pallet.css
@@ -1,20 +1,21 @@
 div.color-pallet {
   display: flex;
-
-  width: 300px;
   flex-direction: column;
+  border: 1px solid var(--color-muted);
+  overflow: hidden;
+  border-radius: 4px;
+  margin-bottom: var(--spacing-3);
 }
 
 .color-pallet__example {
-  height: 150px;
-  border-radius: 10px 10px 0 0;
+  padding: var(--spacing-1);
 }
 
 .color-pallet__example-text-row {
   display: grid;
   grid-template-rows: 65px 30px;
   text-align: center;
-  padding: 0 1.5rem;
+  padding: var(--spacing-1);
 }
 
 .color-pallet__example-text {
@@ -33,23 +34,24 @@ div.color-pallet {
 
 .color-pallet__example-text-result span {
   font-family: monospace;
-  font-size: 15px;
-  background-color: black;
-  color: white;
-  border-radius: 20px;
-  padding: 1px 5px;
+  font-size: var(--text-preset-1);
+  background-color: var(--color-dark);
+  color: var(--color-light);
+  border-radius: 4px;
+  line-height: var(--text-preset-2);
+  display: inline-block;
+  padding: 0 var(--spacing-1);
 }
 
 .color-pallet__details {
   flex-grow: 1;
   min-height: 250px;
-  background-color: #F4F5F7;
-  border-radius: 0 0 10px 10px;
+  background-color: var(--color-muted);
   padding: 0 1.5rem;
 }
 
 .color-pallet__details-title {
-  color: #707D90;
+  color: var(--color-gray);
   text-transform: uppercase;
   font-size: .9rem;
 }

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -52,5 +52,7 @@
 </aside>
 
 <main>
-  {{outlet}}
+  <div class="container">
+    {{outlet}}
+  </div>
 </main>
diff --git a/tests/dummy/app/templates/components/color-pallet.hbs b/tests/dummy/app/templates/components/color-pallet.hbs
@@ -19,6 +19,20 @@
       </dl>
     {{/if}}
 
+    {{#if @variable}}
+      <dl>
+        <dt class="color-pallet__details-title">Variable</dt>
+        <dd>{{@variable}}</dd>
+      </dl>
+    {{/if}}
+
+    {{#if @class-name}}
+      <dl>
+        <dt class="color-pallet__details-title">Class Name</dt>
+        <dd>{{@class-name}}</dd>
+      </dl>
+    {{/if}}
+
     <dl>
       <dt class="color-pallet__details-title">RGB</dt>
       <dd>{{rgbString}}</dd>

diff --git a/tests/dummy/app/templates/concepts/colours.md b/tests/dummy/app/templates/concepts/colours.md
@@ -1,5 +1,56 @@
 # Colours
 
-Here we talk about the color scheme
+### Here we talk about the color scheme
 
-<ColorPallet @color="#0052CC" @name="B400 - Pacific bridge"/>
+## Primary Colours
+The primary palette is applied across every page of the website and contains the brand, accent and neutral colours. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.
+
+The following swatches contain a sample of each of the primary palette colours, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
+
+
+<div class="row">
+  <div class="col-one-third">
+    <ColorPallet @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
+  </div>
+</div>
+
+
+## Secondary Colours
+The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
+
+<div class="row">
+  <div class="col-one-third">
+    <ColorPallet @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
+  </div>
+  <div class="col-one-third">
+    <ColorPallet @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
+  </div>
+</div>
+
+### Examples
+
+#### Applying a background color to the card component
+
+<div class="card bg-info">
+  <div class="card-content">
+  Do you have questions? Run into an issue or a bug? Get support from the community. A list of chat rooms, forums, and more are available here.
+  </div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ @@
     .card-content {
       padding: 1rem;
-    }
+    }