diff --git a/docs/content/shortcodes/icon.en.md b/docs/content/shortcodes/icon.en.md
index 624fd9381a..83f398db3e 100644
--- a/docs/content/shortcodes/icon.en.md
+++ b/docs/content/shortcodes/icon.en.md
@@ -6,7 +6,7 @@ title = 'Icon'
The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome.com) library.
-{{% icon skull-crossbones %}}
+{{% icon skull-crossbones blue %}}
{{% icon style="warning" %}}
{{% icon icon="angle-double-up" color="blue" %}}
@@ -16,7 +16,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
{{% tab title="shortcode" %}}
````go
-{{%/* icon icon="skull-crossbones" */%}}
+{{%/* icon icon="skull-crossbones" style="blue" */%}}
{{%/* icon style="warning" */%}}
{{%/* icon icon="angle-double-up" color="blue" */%}}
````
@@ -25,9 +25,9 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
{{% tab title="shortcode (positional)" %}}
````go
-{{%/* icon skull-crossbones */%}}
-{{%/* icon exclamation-triangle */%}}
-{{%/* icon angle-double-up */%}}
+{{%/* icon skull-crossbones blue */%}}
+{{%/* icon exclamation-triangle red */%}}
+{{%/* icon angle-double-up blue */%}}
````
{{% /tab %}}
@@ -37,6 +37,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
{{ partial "shortcodes/icon.html" (dict
"page" .
"icon" "skull-crossbones"
+ "style" "blue"
)}}
{{ partial "shortcodes/icon.html" (dict
"page" .
@@ -57,7 +58,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
| Name | Position | Default | Notes |
|-----------------------|----------|-----------------|-------------|
| **icon** | 1 | _<empty>_ | [Font Awesome icon name](#finding-an-icon) to be displayed. It will be displayed in the text color of its according context. |
-| **style** | | _<empty>_ | The style scheme used for the icon.
- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning` - by brand color: `primary`, `secondary`, `accent` - by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red` - by special color: `default`, `transparent`, `code`
You can also [define your own styles](shortcodes/notice#defining-own-styles). |
+| **style** | 2 | _<empty>_ | The style scheme used for the icon.
- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning` - by brand color: `primary`, `secondary`, `accent` - by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red` - by special color: `default`, `transparent`, `code`
You can also [define your own styles](shortcodes/notice#defining-own-styles). |
| **color** | | _<empty>_ | 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.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
|
### Finding an icon
@@ -90,10 +91,14 @@ Built with {{% icon heart %}} by Relearn and Hugo
### With color
````go
-Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo
+- Built with {{%/* icon heart red */%}} by Relearn and Hugo
+- Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo - long form, same as above
+- Built with {{%/* icon icon="heart" color="red" */%}} by Relearn and Hugo - this uses the HTML color red instead of the red style
````
-Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo
+- Built with {{% icon heart red %}} by Relearn and Hugo
+- Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo - long form, same as above
+- Built with {{% icon icon="heart" color="red" %}} by Relearn and Hugo - this uses the HTML color red instead of the red style
### Advanced HTML Usage
diff --git a/layouts/partials/_relearn/boxStyle.gotmpl b/layouts/partials/_relearn/boxStyle.gotmpl
index a871f3ab56..cbb35a8f7f 100644
--- a/layouts/partials/_relearn/boxStyle.gotmpl
+++ b/layouts/partials/_relearn/boxStyle.gotmpl
@@ -38,6 +38,8 @@
(dict "identifier" "default")
(dict "identifier" "transparent")
(dict "identifier" "code")
+ (dict "identifier" "filled")
+ (dict "identifier" "initial")
) }}
{{- if eq .identifier $style }}
{{- $set = dict "style" $style "title" "" "icon" "" }}
diff --git a/layouts/partials/shortcodes/attachments.html b/layouts/partials/shortcodes/attachments.html
index 356292b8bb..8c22314f23 100644
--- a/layouts/partials/shortcodes/attachments.html
+++ b/layouts/partials/shortcodes/attachments.html
@@ -12,6 +12,10 @@
{{- $style = .style | default "transparent" }}
{{- end }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
+{{- if and (not $boxStyle.style) (not $color) }}
+ {{- $color = $style }}
+ {{- $style = "" }}
+{{- end }}
{{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }}
{{- $icon := trim ($boxStyle.icon | default "paperclip") " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
@@ -30,7 +34,7 @@
{{- if ne .BundleType "leaf" }}
{{- warnf "%q: UNSUPPORTED usage of 'attachments' shortcode found while using Hugo >= 0.112.0, use a leaf bundle instead; see https://mcshelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html#single-language" $filepath }}
{{- end -}}
-
+
{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
{{- $fileDir := path.Dir (strings.TrimPrefix (path.Clean hugo.WorkingDir) (path.Clean .File.Filename)) }}
diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html
index 28bea8a6f3..06e4bc6ed4 100644
--- a/layouts/partials/shortcodes/badge.html
+++ b/layouts/partials/shortcodes/badge.html
@@ -8,11 +8,15 @@
{{- $content := .content }}
{{- $style := .style | default "default" }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
+{{- if and (not $boxStyle.style) (not $color) }}
+ {{- $color = $style }}
+ {{- $style = "" }}
+{{- end }}
{{- $title := trim ($boxStyle.title) " " }}
{{- $icon := trim ($boxStyle.icon) " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}
{{- with $page -}}
-{{ if or $icon $title }}{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}{{ end }}{{ $content | safeHTML }}
+{{ if or $icon $title }}{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ if $title }}{{ $title | .RenderString }}{{ end }}{{ end }}{{ $content | safeHTML }}
{{- end }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html
index 8d3c2c0733..6aada05056 100644
--- a/layouts/partials/shortcodes/button.html
+++ b/layouts/partials/shortcodes/button.html
@@ -44,6 +44,10 @@
{{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "target" .target)) -}}
{{- end }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" (or .title $content) "icon" .icon) }}
+{{- if and (not $boxStyle.style) (not $color) }}
+ {{- $color = $style }}
+ {{- $style = "" }}
+{{- end }}
{{- $title := trim ($boxStyle.title) " " }}
{{- $icon := trim ($boxStyle.icon) " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
@@ -51,7 +55,7 @@
{{- end }}
{{- $iconposition := .iconposition | default "left" }}
{{- with $page -}}
-
+
{{- if $isButton -}}