From 7e766aa5dd168588e469fe5e5994e6dc5b011b3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Mon, 23 Jan 2023 22:35:43 +0100
Subject: [PATCH] shortcodes: add color parameter #438

---
 .../content/basics/migration/_index.en.md     |  6 +++
 .../content/shortcodes/attachments.en.md      | 39 +++++++++++++------
 exampleSite/content/shortcodes/badge.en.md    | 29 +++++++++++---
 exampleSite/content/shortcodes/button.en.md   | 15 +++++--
 exampleSite/content/shortcodes/notice.en.md   | 25 +++++++++---
 layouts/partials/shortcodes/attachments.html  |  8 +++-
 layouts/partials/shortcodes/badge.html        |  3 +-
 layouts/partials/shortcodes/button.html       |  8 +++-
 layouts/partials/shortcodes/notice.html       |  3 +-
 layouts/shortcodes/attachments.html           |  1 +
 layouts/shortcodes/badge.html                 |  7 ++--
 layouts/shortcodes/button.html                |  5 ++-
 layouts/shortcodes/notice.html                |  1 +
 13 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 677052bdbe..9d20b12f7a 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -14,6 +14,12 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ---
 
+## 5.10.0 (not yet released)
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`attachments`]({{% relref "shortcodes/attachments" %}}), [`badge`]({{% relref "shortcodes/badge" %}}), [`button`]({{% relref "shortcodes/button" %}}) and [`notice`]({{% relref "shortcodes/notice" %}}) shortcodes have a new parameter `color` to set arbitrary CSS color values.
+
+---
+
 ## 5.9.0 (2022-12-23)
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The required folder name for the [`attachments` shortcode]({{% relref "shortcodes/attachments" %}}) was changed for leaf bundles.
diff --git a/exampleSite/content/shortcodes/attachments.en.md b/exampleSite/content/shortcodes/attachments.en.md
index 941f645541..dbe0ad52d3 100644
--- a/exampleSite/content/shortcodes/attachments.en.md
+++ b/exampleSite/content/shortcodes/attachments.en.md
@@ -31,6 +31,21 @@ While the examples are using shortcodes with named parameter you are free to als
 {{% /tab %}}
 {{< /tabs >}}
 
+### Parameter
+
+| Name        | Default         | Notes       |
+|:------------|:----------------|:------------|
+| **style**   | `transparent`   | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **color**   | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. 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 |
+| **title**   | see notes       | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Attachments`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **icon**    | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
+| **sort**    | `asc`           | Sorting the output in `asc`ending or `desc`ending order. |
+| **pattern** | `.*`            | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br><br>- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` |
+
+## Setup
+
+### Single language
+
 The shortcode lists files found in a specific folder. The name of the folder depends on your page type (either branch bundle, leaf bundle or page).
 
 1. For simple pages, attachments must be placed in a folder named like your page and ending with `.files`.
@@ -61,6 +76,8 @@ The shortcode lists files found in a specific folder. The name of the folder dep
     >      * **_index.files**
     >          * attachment.pdf
 
+### Multilingual
+
 Be aware that if you use a multilingual website, you will need to have as many folders as languages and the language code must be part of the folder name.
 
 Eg. for a site in English and Piratish:
@@ -75,16 +92,6 @@ Eg. for a site in English and Piratish:
   >   * page.en.md
   >   * page.pir.md
 
-### Parameter
-
-| Name        | Default       | Notes       |
-|:------------|:--------------|:------------|
-| **style**   | `transparent` | The color scheme used to highlight the box content.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
-| **title**   | see notes     | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: `Attachments`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
-| **icon**    | see notes     | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
-| **sort**    | `asc`         | Sorting the output in `asc`ending or `desc`ending order. |
-| **pattern** | `.*`          | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br><br>- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` |
-
 ## Examples
 
 ### Custom Title, List of Attachments Ending in pdf or mp4
@@ -103,6 +110,14 @@ Eg. for a site in English and Piratish:
 
 {{% attachments style="info" sort="desc" /%}}
 
-### Style and Icons
+### With User-Defined Color and Font Awesome Brand Icon
 
-For further examples for **style**, **title** and **icon**, see the [`notice` shortcode]({{% relref "shortcodes/notice" %}}) documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
+````go
+{{%/* attachments color="fuchsia" icon="fab fa-hackerrank" /*/%}}
+````
+
+{{% attachments color="fuchsia" icon="fab fa-hackerrank" /%}}
+
+### Style, Color, Title and Icons
+
+For further examples for **style**, **color**, **title** and **icon**, see the [`notice` shortcode]({{% relref "shortcodes/notice" %}}) documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
diff --git a/exampleSite/content/shortcodes/badge.en.md b/exampleSite/content/shortcodes/badge.en.md
index 1e4db9672c..d88b4678ea 100644
--- a/exampleSite/content/shortcodes/badge.en.md
+++ b/exampleSite/content/shortcodes/badge.en.md
@@ -8,7 +8,8 @@ The `badge` shortcode displays little markers in your text with adjustable color
 {{% badge %}}Important{{% /badge %}}
 {{% badge style="primary" title="Version" %}}6.6.6{{% /badge %}}
 {{% badge style="red" icon="angle-double-up" %}}Captain{{% /badge %}}
-{{% badge style="info" %}}Awesome{{% /badge %}}
+{{% badge style="info" %}}New{{% /badge %}}
+{{% badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge %}}
 
 ## Usage
 
@@ -21,7 +22,8 @@ While the examples are using shortcodes with named parameter you are free to als
 {{%/* badge %}}Important{{% /badge */%}}
 {{%/* badge style="primary" title="Version" %}}6.6.6{{% /badge */%}}
 {{%/* badge style="red" icon="angle-double-up" %}}Captain{{% /badge */%}}
-{{%/* badge style="info" %}}Awesome{{% /badge */%}}
+{{%/* badge style="info" %}}New{{% /badge */%}}
+{{%/* badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge */%}}
 ````
 
 {{% /tab %}}
@@ -47,6 +49,12 @@ While the examples are using shortcodes with named parameter you are free to als
 {{ partial "shortcodes/badge.html" (dict
   "context" .
   "style" "info"
+  "content" "New"
+)}}
+{{ partial "shortcodes/badge.html" (dict
+  "context" .
+  "color" "fuchsia"
+  "icon" "fab fa-hackerrank"
   "content" "Awesome"
 )}}
 ````
@@ -58,9 +66,10 @@ While the examples are using shortcodes with named parameter you are free to als
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **style**             | `default`       | The color scheme used to paint the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
-| **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
-| **title**             | see notes       | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **style**             | `default`       | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. 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 |
+| **title**             | see notes       | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary text for the badge. |
 
 ## Examples
@@ -177,9 +186,17 @@ While the examples are using shortcodes with named parameter you are free to als
 
 ### Other
 
+#### With User-Defined Color and Font Awesome Brand Icon
+
+````go
+{{%/* badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge */%}}
+````
+
+{{% badge color="fuchsia" icon="fab fa-hackerrank" %}}Awesome{{% /badge %}}
+
 #### With Icon Content
 
-You can combine the badge with the [`icon` shortcode]({{% relref "shortcodes/icon" %}}) to create even more stunning variants.
+You can combine the badge with the [`icon` shortcode]({{% relref "shortcodes/icon" %}}) to create even more stunning visuals.
 
 In this case you need to declare `{{</* badge */>}}` instead of `{{%/* badge */%}}`. Note, that in this case it is not possible to put markdown in the content.
 
diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md
index ee85ff0800..a0c96a95e3 100644
--- a/exampleSite/content/shortcodes/button.en.md
+++ b/exampleSite/content/shortcodes/button.en.md
@@ -48,12 +48,13 @@ Once the button is clicked, it opens another browser tab for the given URL.
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
 | **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
-| **style**             | `transparent`   | The color scheme used to paint the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
-| **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **style**             | `transparent`   | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. 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**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **iconposition**      | `left`          | Places the icon to the `left` or `right` of the title. |
 | **target**            | see notes       | The destination frame/window if **href** is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- the setting of `externalLinkTarget` or `_blank` if not set, for any address starting with `http://` or `https://`<br>- no specific value for all other links |
 | **type**              | see notes       | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button` |
-| _**&lt;content&gt;**_ | see notes       | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| _**&lt;content&gt;**_ | see notes       | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 
 ## Examples
 
@@ -147,6 +148,14 @@ Once the button is clicked, it opens another browser tab for the given URL.
 
 ### Other
 
+#### With User-Defined Color and Font Awesome Brand Icon
+
+````go
+{{%/* button href="https://gohugo.io/" color="fuchsia" icon="fab fa-hackerrank" %}}Hugo{{% /button */%}}
+````
+
+{{% button href="https://gohugo.io/" color="fuchsia" icon="fab fa-hackerrank" %}}Hugo{{% /button %}}
+
 #### Severity Style with All Defaults
 
 ````go
diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
index 36e5106e52..d02590cbc6 100644
--- a/exampleSite/content/shortcodes/notice.en.md
+++ b/exampleSite/content/shortcodes/notice.en.md
@@ -51,9 +51,10 @@ It is all about the boxes.
 
 | Name      | Position | Default   | Notes       |
 |:----------|:---------|:----------|:------------|
-| **style** | 1        | `default` | The color scheme used to highlight the box content.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
-| **title** | 2        | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
-| **icon**  | 3        | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **style** | 1        | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **color** |          | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. 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 |
+| **title** | 2        | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **icon**  | 3        | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | _**&lt;content&gt;**_ |          | _&lt;empty&gt;_ | Arbitrary text to be displayed in box. |
 
 ## Examples
@@ -249,10 +250,10 @@ A **red** disclaimer
 
 ### By Special Color
 
-#### Default with Title and Icon
+#### Default with Positional Parameter
 
 ````go
-{{%/* notice style="default" title"Pay Attention to this Note!" icon="skull-crossbones" */%}}
+{{%/* notice default "Pay Attention to this Note!" "skull-crossbones" */%}}
 Some serious information.
 {{%/* /notice */%}}
 ````
@@ -264,7 +265,7 @@ Some serious information.
 #### Transparent with Title and Icon
 
 ````go
-{{%/* notice style="transparent" title"Pay Attention to this Note!" icon="skull-crossbones" */%}}
+{{%/* notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" */%}}
 Some serious information.
 {{%/* /notice */%}}
 ````
@@ -272,3 +273,15 @@ Some serious information.
 {{% notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" %}}
 Some serious information.
 {{% /notice %}}
+
+### With User-Defined Color and Font Awesome Brand Icon
+
+````go
+{{%/* notice color="fuchsia" title="Hugo" icon="fab fa-hackerrank" */%}}
+Victor? Is it you?
+{{%/* /notice */%}}
+````
+
+{{% notice color="fuchsia" title="Hugo" icon="fab fa-hackerrank" %}}
+Victor? Is it you?
+{{% /notice %}}
diff --git a/layouts/partials/shortcodes/attachments.html b/layouts/partials/shortcodes/attachments.html
index 545a3ea0cc..9b7398984c 100644
--- a/layouts/partials/shortcodes/attachments.html
+++ b/layouts/partials/shortcodes/attachments.html
@@ -1,6 +1,10 @@
 {{- $context := .context }}
+{{- $color := .color | default "" }}
 {{- $content := .content }}
-{{- $style := .style | default "transparent" }}
+{{- $style := .style | default "default" }}
+{{- if and (not $color) (eq (len $color) 0) }}
+  {{- $style = .style | default "transparent" }}
+{{- end }}
 {{- $title := .title | default ($style | T) | default ("Attachments-label" | T) }}
 {{- $title = trim $title " " }}
 {{- $icon := .icon | default "" }}
@@ -22,7 +26,7 @@
 {{- $defaultUrlPrefix := strings.TrimRight "/" $defaultLanguagePage.RelPermalink }}
 {{- $urlPrefix := strings.TrimRight "/" $context.Page.RelPermalink }}
 {{- with $context }}
-<div class="box attachments cstyle {{ $style }}">
+<div class="box attachments cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   <div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title }}</div>
   <ul class="box-content attachments-files">
   {{- $fileLink := printf "%s/%s" (.Page.Language.ContentDir | default "content") .Page.File.Dir }}
diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html
index e80765b2b5..d8779bdc4d 100644
--- a/layouts/partials/shortcodes/badge.html
+++ b/layouts/partials/shortcodes/badge.html
@@ -1,4 +1,5 @@
 {{- $context := .context }}
+{{- $color := .color | default "" }}
 {{- $content := .content }}
 {{- $style := .style | default "default" }}
 {{- $title := .title | default ($style | T) }}
@@ -15,5 +16,5 @@
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- with $context -}}
-<span class="badge cstyle {{ $style }}{{ if or $icon $title }} badge-with-title{{ end }}">{{ if or $icon $title }}<span class="badge-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title }}{{ end }}</span>{{ end }}<span class="badge-content">{{ $content }}</span></span>
+<span class="badge cstyle {{ $style }}{{ if or $icon $title }} badge-with-title{{ end }}">{{ if or $icon $title }}<span class="badge-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title }}{{ end }}</span>{{ end }}<span class="badge-content"{{ if $color }} style="background-color: {{ $color }};"{{ end }}>{{ $content }}</span></span>
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html
index 31d8b5acbf..ea4a44c5d2 100644
--- a/layouts/partials/shortcodes/button.html
+++ b/layouts/partials/shortcodes/button.html
@@ -1,7 +1,11 @@
 {{- $context := .context }}
+{{- $color := .color | default "" }}
 {{- $content := .content }}
 {{- $href := (trim .href " ") | default "" }}
-{{- $style := .style | default "transparent" }}
+{{- $style := .style | default "default" }}
+{{- if and (not $color) (eq (len $color) 0) }}
+  {{- $style = .style | default "transparent" }}
+{{- end }}
 {{- $target := .target | default "" }}
 {{- $type := .type | default "" }}
 {{- $isButton := false }}
@@ -32,7 +36,7 @@
 {{- end }}
 {{- $iconposition := .iconposition | default "left" }}
 {{- with $context }}
-<span class="btn cstyle {{ $style }}">
+<span class="btn cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   {{- if $isButton }}
   <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
   {{- else }}
diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html
index 7045529f13..06b1af3f60 100644
--- a/layouts/partials/shortcodes/notice.html
+++ b/layouts/partials/shortcodes/notice.html
@@ -1,4 +1,5 @@
 {{- $context := .context }}
+{{- $color := .color | default "" }}
 {{- $content := .content }}
 {{- $style := .style | default "default" }}
 {{- $title := .title | default ($style | T) }}
@@ -15,7 +16,7 @@
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- with $context }}
-<div class="box notices cstyle {{ $style }}">
+<div class="box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   <div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title }}</div>
   <div class="box-content">
 {{ $content | safeHTML }}  </div>
diff --git a/layouts/shortcodes/attachments.html b/layouts/shortcodes/attachments.html
index 4bf4494066..2b09181064 100644
--- a/layouts/shortcodes/attachments.html
+++ b/layouts/shortcodes/attachments.html
@@ -1,6 +1,7 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
 {{- partial "shortcodes/attachments.html" (dict
   "context" .
+  "color"   (.Get "color")
   "content" .Inner
   "icon"    (.Get "icon")
   "pattern" (.Get "pattern")
diff --git a/layouts/shortcodes/badge.html b/layouts/shortcodes/badge.html
index 6060ec1bf0..65900f4423 100644
--- a/layouts/shortcodes/badge.html
+++ b/layouts/shortcodes/badge.html
@@ -1,8 +1,9 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
 {{- partial "shortcodes/badge.html" (dict
   "context" .
+  "color"   (.Get "color")
   "content" .Inner
-  "icon"          (.Get "icon")
-  "style"         (.Get "style")
-  "title"         (.Get "title")
+  "icon"    (.Get "icon")
+  "style"   (.Get "style")
+  "title"   (.Get "title")
 ) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index 1d192aefff..4bf82bba6b 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -1,7 +1,8 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
 {{- partial "shortcodes/button.html" (dict
-  "context" .
-  "content" .Inner
+  "context"       .
+  "color"         (.Get "color")
+  "content"       .Inner
   "href"          (.Get "href")
   "icon"          (.Get "icon")
   "iconposition"  ((.Get "iconposition") | default (.Get "icon-position"))
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
index f3cb4fa2a3..8ec82a74fc 100644
--- a/layouts/shortcodes/notice.html
+++ b/layouts/shortcodes/notice.html
@@ -1,6 +1,7 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
 {{- partial "shortcodes/notice.html" (dict
   "context" .
+  "color"   (.Get "color")
   "content" .Inner
   "icon"    (.Get "icon" | default (.Get 2))
   "style"   (.Get "style" | default (.Get 0))