From ac75bcb1ac014f677cff60b9d627792a47b59385 Mon Sep 17 00:00:00 2001
From: hugo <hugoms@me.com>
Date: Sun, 22 Feb 2026 13:07:30 +0100
Subject: [PATCH] fix: category and tag badges with better styling

---
 src/main/engine/templates/partials/styles.liquid | 11 ++++++-----
 tests/engine/BlogGenerationEngine.test.ts        |  8 ++++++++
 tests/engine/PreviewServer.test.ts               |  8 ++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/main/engine/templates/partials/styles.liquid b/src/main/engine/templates/partials/styles.liquid
index 89cbbc6..0501b90 100644
--- a/src/main/engine/templates/partials/styles.liquid
+++ b/src/main/engine/templates/partials/styles.liquid
@@ -50,7 +50,8 @@
   .single-post { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
   .single-post-taxonomy { display: flex; flex-wrap: wrap; gap: .4rem .45rem; margin: -.1rem 0 .2rem; }
   .single-post-taxonomy-bubble {
-    --bubble-accent: var(--pico-primary, var(--primary));
+    --bubble-accent: var(--pico-ins-color, rgb(53, 117, 56));
+    --bubble-bg: var(--bubble-accent);
     display: inline-flex;
     align-items: center;
     border: 1px solid var(--bubble-accent);
@@ -58,14 +59,14 @@
     padding: .1rem .5rem;
     font-size: .74rem;
     line-height: 1.35;
-    color: var(--bubble-accent);
-    background: transparent;
+    color: #000;
+    background: var(--bubble-bg, var(--bubble-accent));
     text-decoration: none;
   }
   .single-post-taxonomy-bubble:hover,
   .single-post-taxonomy-bubble:focus-visible { text-decoration: underline; }
-  .single-post-taxonomy-bubble-category { --bubble-accent: var(--pico-primary, var(--primary)); }
-  .single-post-taxonomy-bubble-tag { --bubble-accent: var(--pico-secondary, var(--secondary)); }
+  .single-post-taxonomy-bubble-category { --bubble-accent: var(--pico-ins-color, rgb(53, 117, 56)); --bubble-bg: var(--pico-ins-color, rgb(53, 117, 56)); }
+  .single-post-taxonomy-bubble-tag { --bubble-accent: var(--pico-del-color, rgb(183, 72, 72)); --bubble-bg: var(--pico-del-color, rgb(183, 72, 72)); }
   .preview-pagination { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .25rem; }
   .preview-pagination-link { color: var(--pico-muted-color, var(--muted-color)); text-decoration: none; font-size: .92rem; opacity: .72; transition: opacity .15s ease-in-out; }
   .preview-pagination-link:hover,
diff --git a/tests/engine/BlogGenerationEngine.test.ts b/tests/engine/BlogGenerationEngine.test.ts
index 695f2d1..6f55eff 100644
--- a/tests/engine/BlogGenerationEngine.test.ts
+++ b/tests/engine/BlogGenerationEngine.test.ts
@@ -432,6 +432,14 @@ describe('BlogGenerationEngine', () => {
     expect(html).toContain('href="/category/article/"');
     expect(html).toContain('href="/tag/css-only/"');
     expect(html).toContain('style="--bubble-accent: #22aa88;"');
+    expect(html).toContain('background: var(--bubble-bg, var(--bubble-accent));');
+    expect(html).toContain('color: #000;');
+    expect(html).toContain('.single-post-taxonomy-bubble-category {');
+    expect(html).toContain('--bubble-accent: var(--pico-ins-color');
+    expect(html).toContain('--bubble-bg: var(--pico-ins-color');
+    expect(html).toContain('.single-post-taxonomy-bubble-tag {');
+    expect(html).toContain('--bubble-accent: var(--pico-del-color');
+    expect(html).toContain('--bubble-bg: var(--pico-del-color');
 
     const categoryIndex = html.indexOf('single-post-taxonomy-bubble-category');
     const tagIndex = html.indexOf('single-post-taxonomy-bubble-tag');
diff --git a/tests/engine/PreviewServer.test.ts b/tests/engine/PreviewServer.test.ts
index 4b40d98..07a6a8a 100644
--- a/tests/engine/PreviewServer.test.ts
+++ b/tests/engine/PreviewServer.test.ts
@@ -763,6 +763,14 @@ describe('PreviewServer', () => {
     expect(html).toContain('href="/category/article/"');
     expect(html).toContain('href="/tag/css-only/"');
     expect(html).toContain('style="--bubble-accent: #22aa88;"');
+    expect(html).toContain('background: var(--bubble-bg, var(--bubble-accent));');
+    expect(html).toContain('color: #000;');
+    expect(html).toContain('.single-post-taxonomy-bubble-category {');
+    expect(html).toContain('--bubble-accent: var(--pico-ins-color');
+    expect(html).toContain('--bubble-bg: var(--pico-ins-color');
+    expect(html).toContain('.single-post-taxonomy-bubble-tag {');
+    expect(html).toContain('--bubble-accent: var(--pico-del-color');
+    expect(html).toContain('--bubble-bg: var(--pico-del-color');
 
     const categoryIndex = html.indexOf('single-post-taxonomy-bubble-category');
     const tagIndex = html.indexOf('single-post-taxonomy-bubble-tag');