From f96661ac13450943742f0e5102bf3170456f2ad9 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Tue, 19 Nov 2024 16:51:10 +1100
Subject: [PATCH] feat: add support for hex color values in feature badges

---
 layouts/shortcodes/feature.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/layouts/shortcodes/feature.html b/layouts/shortcodes/feature.html
index 55e7d27..5318621 100644
--- a/layouts/shortcodes/feature.html
+++ b/layouts/shortcodes/feature.html
@@ -2,7 +2,7 @@
 {{ $title := .Get "title" }}
 {{ $description := .Get "description" }}
 {{ $badge := .Get "badge" }}
-{{ $badgeColor := .Get "badgeColor" | default "primary" }}
+{{ $badgeColor := .Get "badgeColor" | default "#5573df" }}
 {{ $image := .Get "image" }}
 {{ $buttonText := .Get "buttonText" | default "Learn More" }}
 {{ $buttonLink := .Get "buttonLink" | default "#" }}
@@ -10,7 +10,7 @@
 
 {{ $features := split (.Get "features") "," }}
 
-<div class="grid lg:grid-cols-2 gap-12 items-center">
+<div class="grid lg:grid-cols-2 gap-12 items-center" style="--badge-color: {{ $badgeColor }}">
     {{ if eq $imagePosition "left" }}
     <div class="order-2 lg:order-1">
         <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
@@ -18,13 +18,22 @@
     {{ end }}
 
     <div class="space-y-6 {{ if eq $imagePosition "left" }}order-1 lg:order-2{{ end }}">
-        <div class="inline-block px-4 py-2 rounded-full bg-{{ $badgeColor }}-100 text-{{ $badgeColor }}-700 font-medium">{{ $badge }}</div>
+        <style>
+            .badge {
+                background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
+                color: var(--badge-color);
+            }
+            .badge-icon {
+                color: var(--badge-color);
+            }
+        </style>
+        <div class="badge inline-block px-4 py-2 rounded-full font-medium">{{ $badge }}</div>
         <h3 class="text-2xl md:text-3xl font-bold">{{ $title }}</h3>
         <p class="text-lg text-gray-600">{{ $description }}</p>
         <ul class="space-y-4">
             {{ range $features }}
             <li class="flex items-center space-x-3">
-                <svg class="w-5 h-5 text-{{ $badgeColor }}-700" fill="currentColor" viewBox="0 0 20 20">
+                <svg class="badge-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                 </svg>
                 <span>{{ . | strings.TrimSpace }}</span>