From 0c0a5f9a4deecba5e4be3a35f9886ca1d6ccf381 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Fri, 29 Nov 2024 14:34:48 -0600
Subject: [PATCH] style: :lipstick: Working on secondary colours

---
 .../colour_preview/background.html.erb        | 332 ++++++++++--------
 embedded_gems/pathogen/tailwind.config.js     |  33 +-
 2 files changed, 211 insertions(+), 154 deletions(-)

diff --git a/embedded_gems/pathogen/previews/colour_preview/background.html.erb b/embedded_gems/pathogen/previews/colour_preview/background.html.erb
index 3fa7a2acfc..f35661305b 100644
--- a/embedded_gems/pathogen/previews/colour_preview/background.html.erb
+++ b/embedded_gems/pathogen/previews/colour_preview/background.html.erb
@@ -1,156 +1,198 @@
-<h2 class="text-lg font-bold">Background Colours</h2>
-
-<table
+<div
   class="
-    w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400
+    bg-light-default dark:bg-dark-default text-light-default dark:text-dark-default
+    grid grid-cols-1 gap-4
   "
 >
-  <thead
-    class="
-      text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400
-    "
-  >
-    <tr>
-      <th class="px-6 py-3">Colour</th>
-      <th class="px-6 py-3">Class</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div class="bg-light-brand-primary dark:bg-dark-brand-primary h-6 w-6 rounded"></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-brand-primary dark:bg-dark-brand-primary
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
-          class="
-            bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover h-6 w-6 rounded
-          "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
-          class="
-            bg-light-brand-secondary dark:bg-dark-brand-secondary h-6 w-6 rounded
-          "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-brand-secondary dark:bg-dark-brand-secondary
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
-          class="
-            bg-light-neutral-primary dark:bg-dark-neutral-primary h-6 w-6 rounded
-          "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-neutral-primary dark:bg-dark-neutral-primary
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
-          class="
-            bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover h-6 w-6
-            rounded
-          "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
+  <h2 class="text-lg font-bold">Background Colours</h2>
+
+  <table class=" w-full text-sm text-left ">
+    <thead
+      class="
+        text-xs bg-light-neutral-primary uppercase text-light-onneutral-primary
+        dark:bg-dark-neutral-primary dark:text-dark-onneutral-primary
+      "
+    >
+      <tr>
+        <th class="px-6 py-3">Colour</th>
+        <th class="px-6 py-3">Class</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div class="bg-light-brand-primary dark:bg-dark-brand-primary h-6 w-6 rounded"></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-brand-primary dark:bg-dark-brand-primary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-brand-secondary dark:bg-dark-brand-secondary h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-brand-secondary dark:bg-dark-brand-secondary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-neutral-primary dark:bg-dark-neutral-primary h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-neutral-primary dark:bg-dark-neutral-primary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover h-6 w-6
+              rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-neutral-secondary dark:bg-dark-neutral-secondary h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-neutral-secondary dark:bg-dark-neutral-secondary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-danger-primary dark:bg-dark-danger-primary h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-danger-primary dark:bg-dark-danger-primary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td class="px-6 py-4">
+          <div
+            class="
+              bg-light-danger-secondary dark:bg-dark-danger-secondary h-6 w-6 rounded
+            "
+          ></div>
+        </td>
+        <td class="px-6 py-4 font-mono">
+          bg-light-danger-secondary dark:bg-dark-danger-secondary
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2 class="text-lg font-bold">Text Colours</h2>
+
+  <table class=" w-full text-sm text-left ">
+    <thead
+      class="
+        text-xs bg-light-neutral-primary uppercase dark:bg-dark-neutral-primary
+        text-light-onneutral-primary dark:text-dark-onneutral-primary
+      "
+    >
+      <tr>
+        <th class="px-6 py-3">Colour</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td
           class="
-            bg-light-neutral-secondary dark:bg-dark-neutral-secondary h-6 w-6 rounded
+            px-6 py-4 text-light-default dark:text-dark-default font-mono bg-light-default
+            dark:bg-dark-default
           "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-neutral-secondary dark:bg-dark-neutral-secondary
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
+        >
+          text-light-default dark:text-dark-default
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td
           class="
-            bg-light-danger-primary dark:bg-dark-danger-primary h-6 w-6 rounded
+            px-6 py-4 text-light-onbrand-primary dark:text-dark-onbrand-primary font-mono
+            bg-light-brand-primary dark:bg-dark-brand-primary
           "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-danger-primary dark:bg-dark-danger-primary
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
+        >
+          text-light-onbrand-primary dark:text-dark-onbrand-primary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td
           class="
-            bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover h-6 w-6 rounded
+            px-6 py-4 text-light-onneutral-primary dark:text-dark-onneutral-primary
+            font-mono bg-light-neutral-primary dark:bg-dark-neutral-primary
           "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover
-      </td>
-    </tr>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td class="px-6 py-4">
-        <div
+        >
+          text-light-onneutral-primary dark:text-dark-onneutral-primary
+        </td>
+      </tr>
+      <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700">
+        <td
           class="
-            bg-light-danger-secondary dark:bg-dark-danger-secondary h-6 w-6 rounded
+            px-6 py-4 text-light-ondanger-primary dark:text-dark-ondanger-primary font-mono
+            bg-light-danger-primary dark:bg-dark-danger-primary
           "
-        ></div>
-      </td>
-      <td class="px-6 py-4 font-mono">
-        bg-light-danger-secondary dark:bg-dark-danger-secondary
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 class="text-lg font-bold">Text Colours</h2>
-
-<table
-  class="
-    w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400
-  "
->
-  <thead
-    class="
-      text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400
-    "
-  >
-    <tr>
-      <th class="px-6 py-3">Colour</th>
-      <th class="px-6 py-3">Class</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-      <td
-        class="
-          px-6 py-4 text-light-neutral-onprimary dark:text-dark-neutral-onprimary
-          font-mono bg-light-brand-primary
-        "
-      >
-        text-light-neutral-onprimary dark:text-dark-neutral-onprimary
-      </td>
-    </tr>
-  </tbody>
-</table>
+        >
+          text-light-ondanger-primary dark:text-dark-ondanger-primary
+        </td>
+      </tr>
+      <tr class="bg-light-brand-primary dark:bg-dark-brand-primary">
+        <td class="px-6 py-4 font-mono">
+          <div
+            class="
+              bg-light-brand-secondary dark:bg-dark-brand-secondary
+              text-light-onbrand-secondary dark:text-dark-onbrand-secondary p-2 rounded
+            "
+          >
+            bg-light-brand-secondary dark:bg-dark-brand-secondary
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js
index 334816a48f..ef4bf92383 100644
--- a/embedded_gems/pathogen/tailwind.config.js
+++ b/embedded_gems/pathogen/tailwind.config.js
@@ -32,20 +32,22 @@ module.exports = {
       colors: globalColors,
       backgroundColor: {
         // Light mode
+        "light-default": globalColors.neutral[50],
         "light-brand-primary": globalColors.brand[600],
         "light-brand-primary-hover": globalColors.brand[700],
-        "light-brand-secondary": globalColors.brand[400],
-        "light-neutral-primary": globalColors.neutral[100],
-        "light-neutral-primary-hover": globalColors.neutral[200],
-        "light-neutral-secondary": globalColors.neutral[50],
+        "light-brand-secondary": globalColors.brand[500],
+        "light-neutral-primary": globalColors.neutral[200],
+        "light-neutral-primary-hover": globalColors.neutral[300],
+        "light-neutral-secondary": globalColors.neutral[100],
         "light-danger-primary": globalColors.danger[600],
         "light-danger-primary-hover": globalColors.danger[700],
         "light-danger-secondary": globalColors.danger[400],
 
         // Dark mode
+        "dark-default": globalColors.neutral[900],
         "dark-brand-primary": globalColors.brand[700],
         "dark-brand-primary-hover": globalColors.brand[800],
-        "dark-brand-secondary": globalColors.brand[400],
+        "dark-brand-secondary": globalColors.brand[600],
         "dark-neutral-primary": globalColors.neutral[600],
         "dark-neutral-primary-hover": globalColors.neutral[700],
         "dark-neutral-secondary": globalColors.neutral[500],
@@ -66,17 +68,30 @@ module.exports = {
       },
       textColor: {
         // Light mode
-        "light-brand-onprimary": colors.white,
+        "light-default": globalColors.neutral[900],
+        "light-onbrand-primary": colors.neutral[100],
+        "light-onbrand-secondary": globalColors.brand[800],
+        "light-onneutral-primary": globalColors.neutral[700],
+        "light-ondanger-primary": colors.neutral[100],
+
+        // ------------------------------------------------------
+        "light-brand-onprimary": colors.neutral[50],
         "light-brand-onneutral": globalColors.brand[600],
-        "light-danger-onprimary": colors.white,
+        "light-danger-onprimary": colors.neutral[50],
         "light-danger-onprimary-hover": globalColors.neutral[50],
         "light-neutral-onprimary": globalColors.neutral[800],
         "light-neutral-onneutral": globalColors.neutral[900],
 
         // Dark mode
-        "dark-brand-onprimary": colors.white,
+        "dark-default": globalColors.neutral[400],
+        "dark-onbrand-primary": colors.neutral[100],
+        "dark-onbrand-secondary": globalColors.neutral[800],
+        "dark-onneutral-primary": globalColors.neutral[200],
+        "dark-ondanger-primary": colors.neutral[100],
+        // ------------------------------------------------------
+        "dark-brand-onprimary": colors.neutral[100],
         "dark-brand-onneutral": globalColors.brand[500],
-        "dark-danger-onprimary": colors.white,
+        "dark-danger-onprimary": colors.neutral[100],
         "dark-danger-onprimary-hover": globalColors.neutral[900],
         "dark-neutral-onprimary": globalColors.neutral[200],
         "dark-neutral-onneutral": globalColors.neutral[900],