shortcodes: support for accent color #440

exampleSite/content/basics/migration/_index.en.md

@@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% 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.
 
+  Additionally the `--ACCENT-color` brand color introduced in version 5.8.0 is now supported with these shortcodes.
+
 ---
 
 ## 5.9.0 (2022-12-23)

exampleSite/content/shortcodes/attachments.en.md

@@ -35,7 +35,7 @@ While the examples are using shortcodes with named parameter you are free to als
 
 | 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` |
+| **style**   | `transparent`   | The style scheme used for the box.<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` |
 | **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) |

exampleSite/content/shortcodes/badge.en.md

@@ -66,7 +66,7 @@ While the examples are using shortcodes with named parameter you are free to als
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **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` |
+| **style**             | `default`       | The style scheme used for the badge.<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` |
 | **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) |
@@ -95,10 +95,12 @@ While the examples are using shortcodes with named parameter you are free to als
 ````go
 {{%/* badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge */%}}
 {{%/* badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge */%}}
+{{%/* badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge */%}}
 ````
 
 {{% badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge %}}
 {{% badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge %}}
+{{% badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge %}}
 
 #### By Color
 

exampleSite/content/shortcodes/button.en.md

@@ -48,7 +48,7 @@ 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 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` |
+| **style**             | `transparent`   | The style scheme used for the button.<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` |
 | **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. |
@@ -80,10 +80,12 @@ Once the button is clicked, it opens another browser tab for the given URL.
 ````go
 {{%/* button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button */%}}
 {{%/* button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button */%}}
+{{%/* button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button */%}}
 ````
 
 {{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
 {{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button %}}
 
 #### By Color
 

exampleSite/content/shortcodes/notice.en.md

@@ -51,7 +51,7 @@ It is all about the boxes.
 
 | Name      | Position | Default   | Notes       |
 |:----------|:---------|:----------|:------------|
-| **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` |
+| **style** | 1        | `default` | The style scheme used for the box.<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` |
 | **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) |
@@ -186,6 +186,18 @@ A **secondary** disclaimer
 A **secondary** disclaimer
 {{% /notice %}}
 
+#### Accent
+
+````go
+{{%/* notice style="accent" */%}}
+An **accent** disclaimer
+{{%/* /notice */%}}
+````
+
+{{% notice style="accent" %}}
+An **accent** disclaimer
+{{% /notice %}}
+
 ### By Color
 
 #### Blue without a Title and Icon

static/css/ie.css

@@ -245,6 +245,14 @@
 		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
 	}
 
+	div.box.accent {
+		background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
+	}
+
+	div.box.accent > .box-content {
+		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
+	}
+
 	div.box.blue {
 		background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
 	}
@@ -446,6 +454,14 @@
 		border-color: #486ac9; /* var(--SECONDARY-color) */
 	}
 
+	.btn.cstyle.accent {
+		background-color: #ff88ff; /* var(--ACCENT-color) */
+	}
+
+	.btn.cstyle.accent > * {
+		border-color: #ff88ff; /* var(--ACCENT-color) */
+	}
+
 	.btn.cstyle.blue {
 		background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
 	}
@@ -559,6 +575,11 @@
 		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
 	}
 
+	.badge.accent > .badge-content {
+		background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
+		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
+	}
+
 	.badge.blue > .badge-content {
 		background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
 		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */

static/css/variant.css

@@ -272,6 +272,11 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
 }
 
+.cstyle.accent {
+    --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
 .cstyle.blue {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);