From 93b115b7cb714f62b881caa9e97df7f756ef75f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 3 Oct 2023 22:49:49 +0200
Subject: [PATCH] taxonomy: add style and color parameter for tags #671

---
 exampleSite/content/cont/taxonomy.en.md |  4 +++-
 layouts/partials/tags.html              |  1 -
 layouts/partials/term-list.html         |  7 ++++++-
 static/css/variant.css                  | 13 +++++++++----
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/exampleSite/content/cont/taxonomy.en.md b/exampleSite/content/cont/taxonomy.en.md
index c00f00eba2..40c09d3127 100644
--- a/exampleSite/content/cont/taxonomy.en.md
+++ b/exampleSite/content/cont/taxonomy.en.md
@@ -59,5 +59,7 @@ If you define [custom taxonomies](https://gohugo.io/content-management/taxonomie
 |-----------------------|-----------------|-------------|
 | **page**              | _&lt;empty&gt;_ | Mandatory reference to the page. |
 | **taxonomy**          | _&lt;empty&gt;_ | The plural name of the taxonomy to display as used in your frontmatter. |
-| **class**             | _&lt;empty&gt;_ | Additional CSS classes set on the outermost generated HTML element. |
+| **class**             | _&lt;empty&gt;_ | Additional CSS classes set on the outermost generated HTML element.<br><br>If set to `tags` you will get the visuals for displaying the _tags_ taxonomy, otherwise it will be a simple list of links as for the _categories_ taxonomy. |
+| **style**             | `primary`       | The style scheme used if **class** is `tags`.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used if **class** is `tags`. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **icon**              | _&lt;empty&gt;_ | An optional [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the list. |
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
index a46a3856c8..c18ae2a2f2 100644
--- a/layouts/partials/tags.html
+++ b/layouts/partials/tags.html
@@ -1,4 +1,3 @@
-
 {{- partial "term-list.html" (dict
   "page" .
   "taxonomy" "tags"
diff --git a/layouts/partials/term-list.html b/layouts/partials/term-list.html
index aeade17aee..2efaa632b1 100644
--- a/layouts/partials/term-list.html
+++ b/layouts/partials/term-list.html
@@ -1,6 +1,11 @@
 {{- $page := .page }}
 {{- $taxonomy := .taxonomy }}
 {{- $class := .class }}
+{{- $color := .color | default "" }}
+{{- $style := .style | default "" }}
+{{- if and (not $style) (eq (len $style) 0) }}
+  {{- $color = .color | default "var(--INTERNAL-TAG-BG-color)" }}
+{{- end }}
 {{- $icon := .icon | default "" }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
@@ -24,7 +29,7 @@
   {{- end }}
 {{- end }}
 {{- with $term_pages }}
-<div class=" taxonomy-{{ $taxonomy }} term-list {{ $class }}" title="{{ $taxonomy_page.Title }}">
+<div class=" taxonomy-{{ $taxonomy }} term-list cstyle {{ $style }} {{ $class }}" title="{{ $taxonomy_page.Title }}"{{ if $color }}{{ printf " style=\"--VARIABLE-TAGS-BG-color: %s;\"" $color | safeHTMLAttr }}{{ end }}>
   {{- if $icon }}
   <i class="{{ $icon }}"></i>
   {{- end }}
diff --git a/static/css/variant.css b/static/css/variant.css
index 722518ed4e..b46f4251dd 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -372,17 +372,22 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
     --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
 }
 
+#R-body .tags {
+    --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
+    --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
+}
+
 #R-body .tags a.term-link {
-    background-color: var(--INTERNAL-TAG-BG-color);
-    color: var(--INTERNAL-MAIN-BG-color);
+    background-color: var(--VARIABLE-TAGS-BG-color);
+    color: var(--VARIABLE-TAGS-color);
 }
 
 #R-body .tags a.term-link:before {
-    border-right-color: var(--INTERNAL-TAG-BG-color);
+    border-right-color: var(--VARIABLE-TAGS-BG-color);
 }
 
 #R-body .tags a.term-link:after {
-    background-color: var(--INTERNAL-MAIN-BG-color);
+    background-color: var(--VARIABLE-TAGS-color);
 }
 
 .badge > * {