feat: colors for items via css variable

17-results-summary-component-go/input.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    :root {
+        --summary-item-color-var: 0deg 100% 67%
+    }
+}
+
 html {
     font-size: 18px;
 }

17-results-summary-component-go/public/out.css

@@ -422,6 +422,11 @@ video {
   display: none;
 }
 
+:root {
+  --summary-item-color: 0deg 100% 67%
+    
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -539,10 +544,6 @@ video {
   display: flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .h-32 {
   height: 8rem;
 }
@@ -551,8 +552,8 @@ video {
   width: 8rem;
 }
 
-.grid-cols-2 {
+.flex-1 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  flex: 1 1 0%;
 }
 
 .flex-row {
@@ -588,6 +589,10 @@ video {
   border-bottom-left-radius: 1.5rem;
 }
 
+.bg-summary-item-color\/10 {
+  background-color: hsl(var(--summary-item-color-var) / 0.1);
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -661,6 +666,11 @@ video {
   color: hsl(221 100% 96% / var(--tw-text-opacity));
 }
 
+.text-summary-item-color {
+  --tw-text-opacity: 1;
+  color: hsl(var(--summary-item-color-var) / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

17-results-summary-component-go/tailwind.config.js

@@ -4,10 +4,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'light-red': 'hsl(0, 100%, 67%)',
-        'orangey-yellow': 'hsl(39, 100%, 56%)',
-        'green-teal': 'hsl(166, 100%, 37%)',
-        'cobalt-blue': 'hsl(234, 85%, 45%)',
         'light-slate-blue': 'hsl(252, 100%, 67%)',
         'light-royal-blue': 'hsl(241, 81%, 54%)',
         'violet-blue': 'hsla(256, 72%, 46%)',
@@ -15,6 +11,7 @@ module.exports = {
         'pale-blue': 'hsl(221, 100%, 96%)',
         'light-lavender': 'hsl(241, 100%, 89%)',
         'dark-gray-blue': 'hsl(224, 30%, 27%)',
+        'summary-item-color': 'hsl(var(--summary-item-color-var) / <alpha-value>)',
       },
       'fontFamily': {
         'sans': ['HankenGrotesk', 'sans-serif'],

17-results-summary-component-go/templates/summary-component.gohtml

@@ -53,27 +53,47 @@
 
       <section class="flex flex-col gap-y-4 p-7">
         <h2 class="font-bold">Summary</h2>
-        <dl class="grid grid-cols-2">
+        <dl class="flex flex-col">
-          <dt>Reaction</dt>
+          <div
+            class="flex flex-row bg-summary-item-color/10"
+            style="--summary-item-color-var: 0deg 100% 67%"
+          >
+            <dt class="flex-1 text-summary-item-color">Reaction</dt>
             <dd class="flex flex-row">
               <strong>80</strong>
               / 100
             </dd>
-          <dt>Memory</dt>
+          </div>
+          <div
+            class="flex flex-row bg-summary-item-color/10"
+            style="--summary-item-color-var: 39deg 100% 56%"
+            >
+            <dt class="flex-1 text-summary-item-color">Memory</dt>
             <dd class="flex flex-row">
               <strong>92</strong>
               / 100
             </dd>
-          <dt>Verbal</dt>
+          </div>
+          <div
+            class="flex flex-row bg-summary-item-color/10"
+            style="--summary-item-color-var: 166deg 100% 37%"
+            >
+            <dt class="flex-1 text-summary-item-color">Verbal</dt>
             <dd class="flex flex-row">
               <strong>61</strong>
               / 100
             </dd>
-          <dt>Visual</dt>
+          </div>
+          <div
+            class="flex flex-row bg-summary-item-color/10"
+            style="--summary-item-color-var: 234deg 85% 45%"
+            >
+            <dt class="flex-1 text-summary-item-color">Visual</dt>
             <dd class="flex flex-row">
               <strong>72</strong>
               / 100
             </dd>
+          </div>
         </dl>
         Continue
       </section>