From 4beb742a54e4eeddf05dd72d88ec90dcef5b502b Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 16 Apr 2020 13:32:22 +0100
Subject: [PATCH 1/4] add new colour pallet

---
 addon/styles/global.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/addon/styles/global.css b/addon/styles/global.css
index 385165ac..61f856ed 100644
--- a/addon/styles/global.css
+++ b/addon/styles/global.css
@@ -26,6 +26,19 @@
   --color-brand-hc-dark: #cf2d20;
   --color-brand-40: rgba(224, 78, 57, 0.4);
 
+  --color-blue-dark: #0076D6;
+  --color-blue: #10AAFF;
+  --color-blue-light: #DFFDFF;
+
+  --color-green: #8BE998;
+  --color-green-light: #C7F9DE;
+
+  --color-yellow: #FFEC64;
+  --color-yellow-light: #FFFAD6;
+
+  --color-lilac: #7650F1;
+  --color-lilac-light: #D5CBFF;
+
   --color-gray: #a2a3a8;
   --color-success: #d9f9e3;
   --color-danger: #ffd8e1;

From 7b9715218a060d000b2f3b7b822860c7d79b2e44 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Thu, 16 Apr 2020 14:27:25 +0100
Subject: [PATCH 2/4] add docs for new colour pallet

---
 docs/concepts/colors.md | 84 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/docs/concepts/colors.md b/docs/concepts/colors.md
index 59149805..67a18f1f 100644
--- a/docs/concepts/colors.md
+++ b/docs/concepts/colors.md
@@ -48,4 +48,86 @@ The primary palette is applied across every page of the website and contains the
 
 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.
 
-The secondary palette is yet to be defined.
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#0076D6"
+    @name="Dark Blue"
+    @variable="--color-blue-dark"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#10AAFF"
+    @name="Blue"
+    @variable="--color-blue"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#DFFDFF"
+    @name="Light Blue"
+    @variable="--color-blue-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#8BE998"
+    @name="Green"
+    @variable="--color-green"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#C7F9DE"
+    @name="Light Green"
+    @variable="--color-green-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#FFEC64"
+    @name="Yellow"
+    @variable="--color-yellow"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#FFFAD6"
+    @name="Light Yellow"
+    @variable="--color-yellow-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#7650F1"
+    @name="Lilac"
+    @variable="--color-lilac"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#D5CBFF"
+    @name="Light Lilac"
+    @variable="--color-lilac-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>

From 957c8794726d32ddc24a1b902aee8108b75351f5 Mon Sep 17 00:00:00 2001
From: Chris Manson <mansona@users.noreply.github.com>
Date: Tue, 21 Apr 2020 11:37:37 +0100
Subject: [PATCH 3/4] Update docs/concepts/colours.md

Co-Authored-By: Melanie Sumner <melaniersumner@gmail.com>
---
 docs/concepts/colors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/concepts/colors.md b/docs/concepts/colors.md
index 67a18f1f..85f0ffce 100644
--- a/docs/concepts/colors.md
+++ b/docs/concepts/colors.md
@@ -46,7 +46,7 @@ The primary palette is applied across every page of the website and contains the
 
 ## Secondary Colors
 
-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.
+These colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.
 
 <div class="layout">
   <ColorPallet

From 3a8a1a58ffc2b710c78ed069555ba88e656b1b06 Mon Sep 17 00:00:00 2001
From: Amy Lam <amy.r.lam@gmail.com>
Date: Wed, 24 Jun 2020 09:34:51 -0700
Subject: [PATCH 4/4] Change name for clarity

Based on PR feedback
---
 docs/concepts/colors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/concepts/colors.md b/docs/concepts/colors.md
index 85f0ffce..3c79a3dc 100644
--- a/docs/concepts/colors.md
+++ b/docs/concepts/colors.md
@@ -44,7 +44,7 @@ The primary palette is applied across every page of the website and contains the
   {{/each}}
 </div>
 
-## Secondary Colors
+## Illustration Colors
 
 These colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.