make use of the field-guide color pallet instead of the local one

Author: mansona

docs/concepts/colours.md

@@ -10,33 +10,42 @@ Website elements like text and icons should meet accesibility standards when use
 
 The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.
 
-<div class="layout">
-  <ColorPallet class="lg:col-2" @color="#E04E39" @name="Brand" @variable="--color-brand" @class-name="bg-brand"/>
-  <ColorPallet class="lg:col-2" @color="#FFFFFF" @name="White" @variable="--color-white" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#F4F6F8" @name="Gray 100" @variable="--color-gray-100" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#EBEEF2" @name="Gray 200" @variable="--color-gray-200" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#DCE0E6" @name="Gray 300" @variable="--color-gray-300" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#BEC4CC" @name="Gray 400" @variable="--color-gray-400" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#8F949F" @name="Gray 500" @variable="--color-gray-500" @class-name="bg-dark" />
-  <ColorPallet class="lg:col-2" @color="#6A707A" @name="Gray 600" @variable="--color-gray-600" @class-name="bg-light" />
-  <ColorPallet class="lg:col-2" @color="#42474F" @name="Gray 700" @variable="--color-gray-700" @class-name="bg-light" />
-  <ColorPallet class="lg:col-2" @color="#2B2D34" @name="Gray 800" @variable="--color-gray-800" @class-name="bg-light" />
-  <ColorPallet class="lg:col-2" @color="#1C1E24" @name="Gray 900" @variable="--color-gray-900" @class-name="bg-light" />
-  <ColorPallet class="lg:col-2" @color="#000000" @name="Black" @variable="--color-black" @class-name="bg-light" />
+<!-- fix for styleguide selector in the colour pallets -->
+<style>
+  .text-xl + * {
+    margin-top: 0;
+  }
+</style>
+
+<div class="layout mt-3">
+  {{#each (array
+    (hash color="#E04E39" name="Brand" variable="--color-brand" className="bg-brand")
+    (hash color="#FFFFFF" name="White" variable="--color-white")
+    (hash color="#F4F6F8" name="Gray 100" variable="--color-gray-100")
+    (hash color="#EBEEF2" name="Gray 200" variable="--color-gray-200")
+    (hash color="#DCE0E6" name="Gray 300" variable="--color-gray-300")
+    (hash color="#BEC4CC" name="Gray 400" variable="--color-gray-400")
+    (hash color="#8F949F" name="Gray 500" variable="--color-gray-500")
+    (hash color="#6A707A" name="Gray 600" variable="--color-gray-600")
+    (hash color="#42474F" name="Gray 700" variable="--color-gray-700")
+    (hash color="#2B2D34" name="Gray 800" variable="--color-gray-800")
+    (hash color="#1C1E24" name="Gray 900" variable="--color-gray-900")
+    (hash color="#000000" name="Black" variable="--color-black")
+  ) as |item|}}
+    <ColorPallet
+      class="lg:col-2"
+      @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+      @textColorClasses={{array '' 'text-light'}}
+      @color={{item.color}}
+      @name={{item.name}}
+      @variable={{item.variable}}
+      @class-name={{item.className}}
+    />
+  {{/each}}
 </div>
 
 ## 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.
 
 The secondary palette is yet to be defined.
-
-### 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>

tests/dummy/app/components/color-pallet.js

@@ -1,5 +1,3 @@
-@import 'color-pallet.css';
-
 .self-executing-code-block {
   margin-bottom: 2rem;
 }