theme: support for GitHub styled alerts #885

assets/css/swagger.css

@@ -162,6 +162,30 @@ select:-webkit-autofill {
 .swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after {
     background-color: var(--INTERNAL-BOX-BLUE-color);
 }
+.swagger-ui .opblock.opblock-patch {
+    border-color: var(--INTERNAL-BOX-CYAN-color);
+}
+.swagger-ui .opblock.opblock-patch .opblock-summary-method {
+    background-color: var(--INTERNAL-BOX-CYAN-color);
+}
+.swagger-ui .opblock.opblock-patch .opblock-summary {
+    border-color: var(--INTERNAL-BOX-CYAN-color);
+}
+.swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after {
+    background-color: var(--INTERNAL-BOX-CYAN-color);
+}
+.swagger-ui .opblock.opblock-options {
+    border-color: var(--INTERNAL-BOX-MAGENTA-color);
+}
+.swagger-ui .opblock.opblock-options .opblock-summary-method {
+    background-color: var(--INTERNAL-BOX-MAGENTA-color);
+}
+.swagger-ui .opblock.opblock-options .opblock-summary {
+    border-color: var(--INTERNAL-BOX-MAGENTA-color);
+}
+.swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span::after {
+    background-color: var(--INTERNAL-BOX-MAGENTA-color);
+}
 .swagger-ui .tab li {
     color: var(--INTERNAL-MAIN-TEXT-color);
 }

assets/css/theme-neon.css

@@ -50,10 +50,14 @@
     /* optional base colors for colored boxes as in badges, buttons, notice, etc. shortcode */
     --BOX-BLUE-color: rgba( 48, 117, 229, 1 ); /* background color of blue boxes */
     --BOX-BLUE-TEXT-color: var( --BOX-BLUE-color ); /* text color of blue boxes */
+    --BOX-CYAN-color: rgba( 30, 190, 190, 1 ); /* background color of cyan boxes */
+    --BOX-CYAN-TEXT-color: var( --BOX-CYAN-color ); /* text color of cyan boxes */
     --BOX-GREEN-color: rgba( 42, 178, 24, 1 ); /* background color of green boxes */
     --BOX-GREEN-TEXT-color: var( --BOX-GREEN-color ); /* text color of green boxes */
     --BOX-GREY-color: rgba( 128, 128, 128, 1 ); /* background color of grey boxes */
     --BOX-GREY-TEXT-color: var( --BOX-GREY-color ); /* text color of grey boxes */
+    --BOX-MAGENTA-color: rgba( 237, 33, 220, 1 ); /* background color of magenta boxes */
+    --BOX-MAGENTA-TEXT-color: var( --BOX-MAGENTA-color ); /* text color of magenta boxes */
     --BOX-ORANGE-color: rgba( 237, 153, 9, 1 ); /* background color of orange boxes */
     --BOX-ORANGE-TEXT-color: var( --BOX-ORANGE-color ); /* text color of orange boxes */
     --BOX-RED-color: rgba( 224, 62, 62, 1 ); /* background color of red boxes */

assets/css/variant.css

@@ -155,16 +155,21 @@ div.box > .box-content {
     color: var(--VARIABLE-BOX-TEXT-color);
 }
 
+.cstyle.caution {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color);
+}
+
+.cstyle.important {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color);
+}
+
 .cstyle.info {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
 }
 
-.cstyle.warning {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
-}
-
 .cstyle.note {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
@@ -175,6 +180,11 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
 }
 
+.cstyle.warning {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
+}
+
 .cstyle.primary {
     --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
@@ -195,6 +205,11 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
 }
 
+.cstyle.cyan {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color);
+}
+
 .cstyle.green {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
@@ -205,6 +220,11 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
 }
 
+.cstyle.magenta {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color);
+}
+
 .cstyle.orange {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);

exampleSite/config/_default/params.toml

@@ -440,6 +440,16 @@ disableMermaid = true
 # This can be overridden in the page's frontmatter.
 customMermaidURL = "" # "https://unpkg.com/mermaid/dist/mermaid.min.js"
 
+#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Notice
+# These options configure how notices are displayed.
+
+# Wether to add support for Relearn's additional notice styles
+# Default: false
+# If this value is set to false, GitHub's alerts extension also recognises
+# the additional Relearn styles like "info".
+disableBlockquoteNoticeSupport = false
+
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # OpenApi
 # These options configure how OpenAPI specifications are displayed.

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

@@ -18,6 +18,16 @@ This document shows you what's new in the latest release and flags it with one o
 
 ---
 
+## 6.2.0.beta (XXXX-XX-XX) {#620}
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you are running Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}} or later, the theme is now capable to print [GitHub styled alerts](cont/markdown#alerts).
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To support new severity levels for GitHub styled alerts, all shortcodes that support severity levels with their `style` parameter were expanded with the new severities `caution` and `important` and the `color` parameter was expanded with `cyan` and `magenta`. Please note, that coloring and icons of severities may defer from the [display you see on GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts).
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To support new severity levels for GitHub styled alerts, the new severities and their according colors are also available ass CSS variables `BOX-MAGENTA-color`, `BOX-MAGENTA-TEXT-color`, `BOX-CAUTION-color`, `BOX-CAUTION-TEXT-color`, `BOX-CYAN-color`, `BOX-CYAN-TEXT-color`, `BOX-IMPORTANT-color`, `BOX-IMPORTANT-TEXT-color`. You don't need to change anything in your custom color stylesheet as appropriate default colors will be used.
+
+---
+
 ## 6.1.0 (2024-08-02) {#610}
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The [`include` shortcode](shortcodes/include) is now able to resolve links to pages as well as resources or files in the file system (the old behavior).

exampleSite/content/cont/markdown.en.md

@@ -115,6 +115,48 @@ Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
 Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
 {{% /notice %}}
 
+## Blockquotes
+
+For quoting blocks of content from another source within your document add `>` before any text you want to quote.
+
+Blockquotes can also be nested.
+
+````md
+> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+````
+
+{{% notice style="secondary" icon="eye" title="Result" %}}
+> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+{{% /notice %}}
+
+## Alerts
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!INFO]
+> Information that users might find interesting.
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
 ## Text Markers
 
 ### Bold
@@ -487,28 +529,6 @@ Adding a colon on the left and/or right side of the dashes below any heading wil
 | ext    | 3      | extension to be used for dest files. |
 {{% /notice %}}
 
-## Blockquotes
-
-For quoting blocks of content from another source within your document add `>` before any text you want to quote.
-
-Blockquotes can also be nested.
-
-````md
-> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-````
-
-{{% notice style="secondary" icon="eye" title="Result" %}}
-> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-{{% /notice %}}
-
 ## Links
 
 ### Autolink

exampleSite/content/cont/taxonomy.en.md

@@ -58,6 +58,6 @@ If you define [custom taxonomies](https://gohugo.io/content-management/taxonomie
 | **page**              | _<empty>_ | Mandatory reference to the page. |
 | **taxonomy**          | _<empty>_ | 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.<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` |
+| **style**             | `primary`       | The style scheme used if **class** is `tags`.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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](shortcodes/icon#finding-an-icon) set to the left of the list. |

exampleSite/content/shortcodes/attachments/index.en.md

@@ -54,7 +54,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`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **style**   | `transparent`   | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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](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`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **style**             | `default`       | The style scheme used for the badge.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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](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) |
@@ -79,16 +79,20 @@ While the examples are using shortcodes with named parameter you are free to als
 #### By Severity
 
 ````go
-{{%/* badge style="info" %}}New{{% /badge */%}}
-{{%/* badge style="note" %}}Change{{% /badge */%}}
-{{%/* badge style="tip" %}}Optional{{% /badge */%}}
-{{%/* badge style="warning" %}}Breaking{{% /badge */%}}
+{{%/* badge style="caution" %}}Magenta{{% /badge */%}}
+{{%/* badge style="important" %}}Cyan{{% /badge */%}}
+{{%/* badge style="info" %}}Blue{{% /badge */%}}
+{{%/* badge style="note" %}}Orange{{% /badge */%}}
+{{%/* badge style="tip" %}}Green{{% /badge */%}}
+{{%/* badge style="warning" %}}Red{{% /badge */%}}
 ````
 
-{{% badge style="info" %}}New{{% /badge %}}
-{{% badge style="note" %}}Change{{% /badge %}}
-{{% badge style="tip" %}}Optional{{% /badge %}}
-{{% badge style="warning" %}}Breaking{{% /badge %}}
+{{% badge style="caution" %}}Magenta{{% /badge %}}
+{{% badge style="important" %}}Cyan{{% /badge %}}
+{{% badge style="info" %}}Blue{{% /badge %}}
+{{% badge style="note" %}}Orange{{% /badge %}}
+{{% badge style="tip" %}}Green{{% /badge %}}
+{{% badge style="warning" %}}Red{{% /badge %}}
 
 #### By Brand Colors
 
@@ -106,15 +110,19 @@ While the examples are using shortcodes with named parameter you are free to als
 
 ````go
 {{%/* badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge */%}}
+{{%/* badge style="cyan" icon="palette" title="Color" %}}Cyan{{% /badge */%}}
 {{%/* badge style="green" icon="palette" title="Color" %}}Green{{% /badge */%}}
 {{%/* badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge */%}}
+{{%/* badge style="magenta" icon="palette" title="Color" %}}Magenta{{% /badge */%}}
 {{%/* badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge */%}}
 {{%/* badge style="red" icon="palette" title="Color" %}}Red{{% /badge */%}}
 ````
 
 {{% badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge %}}
+{{% badge style="cyan" icon="palette" title="Color" %}}Cyan{{% /badge %}}
 {{% badge style="green" icon="palette" title="Color" %}}Green{{% /badge %}}
 {{% badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge %}}
+{{% badge style="magenta" icon="palette" title="Color" %}}Magenta{{% /badge %}}
 {{% badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge %}}
 {{% badge style="red" icon="palette" title="Color" %}}Red{{% /badge %}}
 

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`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **style**             | `transparent`   | The style scheme used for the button.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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](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. |

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`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **style** | 1        | `default` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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](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) |
@@ -61,11 +61,11 @@ It is all about the boxes.
 
 ### By Severity
 
-#### Info with markup
+#### Caution with markup
 
 ````go
-{{%/* notice style="info" */%}}
-An **information** disclaimer
+{{%/* notice style="caution" */%}}
+An **caution** disclaimer
 
 You can add standard markdown syntax:
 
@@ -83,8 +83,8 @@ You can add standard markdown syntax:
 {{%/* /notice */%}}
 ````
 
-{{% notice style="info" %}}
-An **information** disclaimer
+{{% notice style="caution" %}}
+An **caution** disclaimer
 
 You can add standard markdown syntax:
 
@@ -101,6 +101,30 @@ You can add standard markdown syntax:
 > the possibilities are endless (almost - including other shortcodes may or may not work)
 {{% /notice %}}
 
+#### Important
+
+````go
+{{%/* notice style="important" */%}}
+A **important** disclaimer
+{{%/* /notice */%}}
+````
+
+{{% notice style="important" %}}
+A **important** disclaimer
+{{% /notice %}}
+
+#### Info
+
+````go
+{{%/* notice style="info" */%}}
+A **information** disclaimer
+{{%/* /notice */%}}
+````
+
+{{% notice style="info" %}}
+A **information** disclaimer
+{{% /notice %}}
+
 #### Note
 
 ````go

exampleSite/content/shortcodes/resources/index.en.md

@@ -40,7 +40,7 @@ Multilanguage features are not supported directly by the shortcode but rely on H
 
 | 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`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
+| **style**   | `transparent`   | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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: `Resources`<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](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/tab.en.md

@@ -50,7 +50,7 @@ printf("Hello World!");
 
 | Name                  | Default         | Notes       |
 |-----------------------|-----------------|-------------|
-| **style**             | see notes       | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<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` |
+| **style**             | see notes       | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `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 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 title for the tab. 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](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) |

i18n/ar.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "ملاحظه"
+[caution]
+other = "الحذر"
+
+[important]
+other = "مهم"
 
 [info]
 other = "معلومات"
 
+[note]
+other = "ملاحظه"
+
 [tip]
 other = "بقشيش"
 

i18n/art-x-pir.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Avast"
+[caution]
+other = "Behold"
+
+[important]
+other = "Imporrrt'nt"
 
 [info]
 other = "Ahoi"
 
+[note]
+other = "Avast"
+
 [tip]
 other = "Smarrrt arrrse"
 

i18n/cs.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Poznámka"
+[caution]
+other = "Upozornění"
+
+[important]
+other = "Důležité"
 
 [info]
 other = "Info"
 
+[note]
+other = "Poznámka"
+
 [tip]
 other = "Tip"
 

i18n/de.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Anmerkung"
+[caution]
+other = "Vorsicht"
+
+[important]
+other = "Wichtig"
 
 [info]
 other = "Info"
 
+[note]
+other = "Anmerkung"
+
 [tip]
 other = "Tipp"
 

i18n/en.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Note"
+[caution]
+other = "Caution"
+
+[important]
+other = "Important"
 
 [info]
 other = "Info"
 
+[note]
+other = "Note"
+
 [tip]
 other = "Tip"
 

i18n/es.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Nota"
+[caution]
+other = "Precaución"
+
+[important]
+other = "Importante"
 
 [info]
 other = "Información"
 
+[note]
+other = "Nota"
+
 [tip]
 other = "Consejo"
 

i18n/fi.toml

@@ -67,12 +67,18 @@ other = "KT"
 [Megabyte-symbol]
 other = "MT"
 
-[note]
-other = "Huom"
+[caution]
+other = "Varoitus"
+
+[important]
+other = "Tärkeä"
 
 [info]
 other = "Info"
 
+[note]
+other = "Huom"
+
 [tip]
 other = "Vihje"
 

i18n/fr.toml

@@ -67,12 +67,18 @@ other = "ko"
 [Megabyte-symbol]
 other = "Mo"
 
-[note]
-other = "Remarque"
+[caution]
+other = "Attention"
+
+[important]
+other = "Important"
 
 [info]
 other = "Information"
 
+[note]
+other = "Remarque"
+
 [tip]
 other = "Astuce"
 

i18n/hi.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "नोट"
+[caution]
+other = "सावधानी"
+
+[important]
+other = "महत्वपूर्ण"
 
 [info]
 other = "जानकारी"
 
+[note]
+other = "नोट"
+
 [tip]
 other = "नोक"
 

i18n/hu.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Jegyzet"
+[caution]
+other = "Vigyázat"
+
+[important]
+other = "Fontos"
 
 [info]
 other = "Infó"
 
+[note]
+other = "Jegyzet"
+
 [tip]
 other = "Tipp"
 

i18n/id.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Nota"
+[caution]
+other = "Perhatian"
+
+[important]
+other = "Penting"
 
 [info]
 other = "Info"
 
+[note]
+other = "Nota"
+
 [tip]
 other = "Ujung"
 

i18n/it.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Nota"
+[caution]
+other = "Attenzione"
+
+[important]
+other = "Importante"
 
 [info]
 other = "Informazione"
 
+[note]
+other = "Nota"
+
 [tip]
 other = "Suggerimento"
 

i18n/ja.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "メモ"
+[caution]
+other = "注意"
+
+[important]
+other = "重要"
 
 [info]
 other = "情報"
 
+[note]
+other = "メモ"
+
 [tip]
 other = "ヒント"
 

i18n/ko.toml

@@ -67,14 +67,20 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-# code snippent 내의 comment(주석)과의 혼동 방지를 위해 위와 같이 번역합니다.
-other = "주"
+[caution]
+other = "주의"
+
+[important]
+other = "중요"
 
 [info]
 # 예제 내용상 learn theme 참고 용도로 사용되어 위와 같이 번역합니다.
 other = "참고"
 
+[note]
+# code snippent 내의 comment(주석)과의 혼동 방지를 위해 위와 같이 번역합니다.
+other = "주"
+
 [tip]
 # 우리말 순화어로 기록 가능하고, note, info와 의미상 좀 더 명확한 구분이 되어 아래처럼 기록합니다.
 other = "도움말"

i18n/nl.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Notitie"
+[caution]
+other = "Let op"
+
+[important]
+other = "Belangrijk"
 
 [info]
 other = "Info"
 
+[note]
+other = "Notitie"
+
 [tip]
 other = "Fooi"
 

i18n/pl.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Uwaga"
+[caution]
+other = "Ostrożność"
+
+[important]
+other = "Ważne"
 
 [info]
 other = "Info"
 
+[note]
+other = "Uwaga"
+
 [tip]
 other = "Porada"
 

i18n/pt.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Nota"
+[caution]
+other = "Cuidado"
+
+[important]
+other = "Important"
 
 [info]
 other = "Informação"
 
+[note]
+other = "Nota"
+
 [tip]
 other = "Dica"
 

i18n/ro.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Notă"
+[caution]
+other = "Atenție"
+
+[important]
+other = "Important"
 
 [info]
 other = "Info"
 
+[note]
+other = "Notă"
+
 [tip]
 other = "Sfat"
 

i18n/ru.toml

@@ -67,12 +67,18 @@ other = "КБ"
 [Megabyte-symbol]
 other = "МБ"
 
-[note]
-other = "Заметка"
+[caution]
+other = "Внимание"
+
+[important]
+other = "Важно"
 
 [info]
 other = "Информация"
 
+[note]
+other = "Заметка"
+
 [tip]
 other = "Совет"
 

i18n/sw.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Kumbuka"
+[caution]
+other = "Tahadhari"
+
+[important]
+other = "Muhimu"
 
 [info]
 other = "Habari"
 
+[note]
+other = "Kumbuka"
+
 [tip]
 other = "Kidokezo"
 

i18n/tr.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Not"
+[caution]
+other = "Dikkat"
+
+[important]
+other = "Önemli"
 
 [info]
 other = "Bilgi"
 
+[note]
+other = "Not"
+
 [tip]
 other = "Bahşiş"
 

i18n/vi.toml

@@ -70,12 +70,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "Ghi chú"
+[caution]
+other = "Thận trọng"
+
+[important]
+other = "Quan trọng"
 
 [info]
 other = "Thông tin"
 
+[note]
+other = "Ghi chú"
+
 [tip]
 other = "Mẹo vặt"
 

i18n/zh-CN.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "注释"
+[caution]
+other = "注意事项"
+
+[important]
+other = "重要"
 
 [info]
 other = "信息"
 
+[note]
+other = "注释"
+
 [tip]
 other = "提示"
 

i18n/zh-Hans.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "注释"
+[caution]
+other = "注意事项"
+
+[important]
+other = "重要"
 
 [info]
 other = "信息"
 
+[note]
+other = "注释"
+
 [tip]
 other = "提示"
 

i18n/zh-Hant.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "註釋"
+[caution]
+other = "注意事項"
+
+[important]
+other = "重要"
 
 [info]
 other = "資訊"
 
+[note]
+other = "註釋"
+
 [tip]
 other = "提示"
 

i18n/zh-TW.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "註釋"
+[caution]
+other = "注意事項"
+
+[important]
+other = "重要"
 
 [info]
 other = "資訊"
 
+[note]
+other = "註釋"
+
 [tip]
 other = "提示"
 

i18n/zh.toml

@@ -67,12 +67,18 @@ other = "KB"
 [Megabyte-symbol]
 other = "MB"
 
-[note]
-other = "注释"
+[caution]
+other = "注意事项"
+
+[important]
+other = "重要"
 
 [info]
 other = "信息"
 
+[note]
+other = "注释"
+
 [tip]
 other = "提示"
 

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,19 @@
+{{- $alerttype := .AlertType }}
+{{- $text := .Text }}
+{{- if not site.Params.disableBlockquoteNoticeSupport }}
+  {{- range findRESubmatch "^(<p>)?\\[!(\\w+)\\]\\n(.*?)(</p>)?\\s*$" $text 1 }}
+    {{- $alerttype = lower (index . 2) }}
+    {{- $text = printf "%s%s%s" (index . 1) (index . 3) (index . 4) }}
+  {{- end }}
+{{- end }}
+{{- if $alerttype }}
+  {{- partial "shortcodes/notice.html" (dict
+    "page" .Page
+    "style" $alerttype
+    "content" $text
+  ) }}
+{{- else }}
+<blockquote>
+  {{- $text | safeHTML }}
+</blockquote>
+{{- end }}

layouts/partials/shortcodes/attachments.html

@@ -12,19 +12,23 @@
 {{- end }}
 {{- $title := .title }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim ($title | default ("Attachments-label" | T)) " " }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
   {{- $icon = "paperclip" }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

layouts/partials/shortcodes/badge.html

@@ -8,18 +8,22 @@
 {{- $style := .style | default "default" }}
 {{- $title := .title }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim $title " " }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

layouts/partials/shortcodes/button.html

@@ -32,18 +32,22 @@
 {{- end }}
 {{- $title := .title | default ($content) }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim $title " " }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

layouts/partials/shortcodes/notice.html

@@ -8,18 +8,22 @@
 {{- $style := .style | default "default" }}
 {{- $title := .title }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim $title " " }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

layouts/partials/shortcodes/resources.html

@@ -11,19 +11,23 @@
 {{- end }}
 {{- $title := .title }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim ($title | default ("Attachments-label" | T)) " " }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
   {{- $icon = "paperclip" }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

layouts/partials/shortcodes/tabs.html

@@ -19,18 +19,22 @@
     {{- $style := .style | default $style | default (cond (ne $color "") "filled" "initial") }}
     {{- $title := .title }}
     {{- if not $title }}
+      {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+      {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
       {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-      {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
       {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
       {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+      {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
     {{- end }}
     {{- $title = trim $title " " }}
     {{- $icon := .icon | default "" }}
     {{- if and (not $icon) (eq (len $icon) 0) }}
+      {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+      {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
       {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-      {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
       {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
       {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+      {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
     {{- end }}
     {{- $icon = trim $icon " " }}
     {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
@@ -50,18 +54,22 @@
 {{- $style = .style | default (cond (ne $color "") "filled" "initial") }}
 {{- $title = .title }}
 {{- if not $title }}
+  {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }}
-  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }}
   {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }}
+  {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }}
 {{- end }}
 {{- $title = trim $title " " }}
 {{- $icon = .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }}
+  {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }}
   {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
   {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
   {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
 {{- end }}
 {{- $icon = trim $icon " " }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}

static/css/swagger-dark.css

@@ -1416,17 +1416,21 @@ select:-webkit-autofill {
     background-image: initial;
     background-color: rgba(24, 149, 128, 0.1);
     border-color: rgb(22, 140, 114);
+    border-color-relearn: var(--INTERNAL-BOX-CYAN-color);
 }
 .swagger-ui .opblock.opblock-patch .opblock-summary-method {
     background-image: initial;
     background-color: rgb(24, 149, 128);
+    background-color-relearn: var(--INTERNAL-BOX-CYAN-color);
 }
 .swagger-ui .opblock.opblock-patch .opblock-summary {
     border-color: rgb(22, 140, 114);
+    border-color-relearn: var(--INTERNAL-BOX-CYAN-color);
 }
 .swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after {
     background-image: initial;
     background-color: rgb(24, 149, 128);
+    background-color-relearn: var(--INTERNAL-BOX-CYAN-color);
 }
 .swagger-ui .opblock.opblock-head {
     background-image: initial;
@@ -1448,17 +1452,21 @@ select:-webkit-autofill {
     background-image: initial;
     background-color: rgba(10, 72, 134, 0.1);
     border-color: rgb(15, 101, 186);
+    border-color-relearn: var(--INTERNAL-BOX-MAGENTA-color);
 }
 .swagger-ui .opblock.opblock-options .opblock-summary-method {
     background-image: initial;
     background-color: rgb(10, 72, 134);
+    background-color-relearn: var(--INTERNAL-BOX-MAGENTA-color);
 }
 .swagger-ui .opblock.opblock-options .opblock-summary {
     border-color: rgb(15, 101, 186);
+    border-color-relearn: var(--INTERNAL-BOX-MAGENTA-color);
 }
 .swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span::after {
     background-image: initial;
     background-color: rgb(10, 72, 134);
+    background-color-relearn: var(--INTERNAL-BOX-MAGENTA-color);
 }
 .swagger-ui .opblock.opblock-deprecated {
     background-image: initial;

static/css/variables.css

@@ -76,24 +76,32 @@
     --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, var(--INTERNAL-MAIN-TEXT-color));
 
     --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
+    --INTERNAL-BOX-CYAN-color: var(--BOX-CYAN-color, rgba( 45, 190, 200, 1 ));
     --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));
     --INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba( 160, 160, 160, 1 ));
+    --INTERNAL-BOX-MAGENTA-color: var(--BOX-MAGENTA-color, rgba( 229, 50, 210, 1 ));
     --INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba( 237, 153, 9, 1 ));
     --INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba( 224, 62, 62, 1 ));
 
+    --INTERNAL-BOX-CAUTION-color: var(--BOX-CAUTION-color, var(--INTERNAL-BOX-MAGENTA-color));
     --INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color));
+    --INTERNAL-BOX-IMPORTANT-color: var(--BOX-IMPORTANT-color, var(--INTERNAL-BOX-CYAN-color));
     --INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color));
     --INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color));
     --INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color));
     --INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color));
 
     --INTERNAL-BOX-BLUE-TEXT-color: var(--BOX-BLUE-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
+    --INTERNAL-BOX-CYAN-TEXT-color: var(--BOX-CYAN-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
     --INTERNAL-BOX-GREEN-TEXT-color: var(--BOX-GREEN-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
     --INTERNAL-BOX-GREY-TEXT-color: var(--BOX-GREY-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
+    --INTERNAL-BOX-MAGENTA-TEXT-color: var(--BOX-MAGENTA-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
     --INTERNAL-BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
     --INTERNAL-BOX-RED-TEXT-color: var(--BOX-RED-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
 
+    --INTERNAL-BOX-CAUTION-TEXT-color: var(--BOX-CAUTION-TEXT-color, var(--INTERNAL-BOX-MAGENTA-TEXT-color));
     --INTERNAL-BOX-INFO-TEXT-color: var(--BOX-INFO-TEXT-color, var(--INTERNAL-BOX-BLUE-TEXT-color));
+    --INTERNAL-BOX-IMPORTANT-TEXT-color: var(--BOX-IMPORTANT-TEXT-color, var(--INTERNAL-BOX-CYAN-TEXT-color));
     --INTERNAL-BOX-NEUTRAL-TEXT-color: var(--BOX-NEUTRAL-TEXT-color, var(--INTERNAL-BOX-GREY-TEXT-color));
     --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color));
     --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color));

static/js/variant.js

@@ -573,6 +573,11 @@ var variants = {
 		{ name: 'BOX-BLUE-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of blue boxes', },
 		{ name: 'BOX-INFO-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color',         tooltip: 'text color of info boxes', },
 
+		{ name: 'BOX-CYAN-color',                        group: 'colored boxes',  default: 'rgba( 45, 190, 200, 1 )',     tooltip: 'background color of cyan boxes', },
+		{ name: 'BOX-IMPORTANT-color',                   group: 'colored boxes', fallback: 'BOX-CYAN-color',              tooltip: 'background color of info boxes', },
+		{ name: 'BOX-CYAN-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of cyan boxes', },
+		{ name: 'BOX-IMPORTANT-TEXT-color',              group: 'colored boxes', fallback: 'BOX-CYAN-TEXT-color',         tooltip: 'text color of info boxes', },
+
 		{ name: 'BOX-GREEN-color',                       group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )',      tooltip: 'background color of green boxes', },
 		{ name: 'BOX-TIP-color',                         group: 'colored boxes', fallback: 'BOX-GREEN-color',             tooltip: 'background color of tip boxes', },
 		{ name: 'BOX-GREEN-TEXT-color',                  group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of green boxes', },
@@ -583,6 +588,11 @@ var variants = {
 		{ name: 'BOX-GREY-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of grey boxes', },
 		{ name: 'BOX-NEUTRAL-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color',         tooltip: 'text color of neutral boxes', },
 
+		{ name: 'BOX-MAGENTA-color',                     group: 'colored boxes',  default: 'rgba( 229, 50, 210, 1 )',     tooltip: 'background color of magenta boxes', },
+		{ name: 'BOX-CAUTION-color',                     group: 'colored boxes', fallback: 'BOX-MAGENTA-color',           tooltip: 'background color of info boxes', },
+		{ name: 'BOX-MAGENTA-TEXT-color',                group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of magenta boxes', },
+		{ name: 'BOX-CAUTION-TEXT-color',                group: 'colored boxes', fallback: 'BOX-MAGENTA-TEXT-color',      tooltip: 'text color of info boxes', },
+
 		{ name: 'BOX-ORANGE-color',                      group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )',      tooltip: 'background color of orange boxes', },
 		{ name: 'BOX-NOTE-color',                        group: 'colored boxes', fallback: 'BOX-ORANGE-color',            tooltip: 'background color of note boxes', },
 		{ name: 'BOX-ORANGE-TEXT-color',                 group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of orange boxes', },