docs: add docs for new tab parameter #550

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

@@ -18,6 +18,14 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ---
 
+## 5.16.0 (2023-06-05)
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received style, color and icon parameter similar to other shortcodes.
+
+  Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
+
+---
+
 ## 5.15.0 (2023-05-29)
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} Now also compatible with Hugo {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.112.0{{% /badge %}} or higher. This does not change the minimum required Hugo version.

exampleSite/content/shortcodes/tab.en.md

@@ -48,14 +48,17 @@ printf("Hello World!");
 
 ### Parameter
 
-| Name                  | Default              | Notes       |
+| Name                  | Default         | Notes       |
-|:----------------------|:---------------------|:------------|
+|:----------------------|:----------------|:------------|
-| **name**              | _<empty>_      | Arbitrary text for the name of the tab. |
+| **style**             | `default`       | The style scheme used for the tab.<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` |
-| _**&lt;content&gt;**_ | _&lt;empty&gt;_      | Arbitrary text to be displayed in the tab. |
+| **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]({{%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 the tab. |
 
 ## Examples
 
-### Code with collapsed margins
+### Single Code Block with Collapsed Margins
 
 {{% tab title="Code" %}}
 
@@ -65,7 +68,7 @@ printf("Hello World!");
 
 {{% /tab %}}
 
-### Mixed content
+### Mixed Markdown Content
 
 {{% tab title="_**Mixed**_" %}}
 
@@ -76,3 +79,75 @@ printf("Hello World!");
 ```
 
 {{% /tab %}}
+
+### Understanding `style` and `color` Behavior
+
+The `style` parameter affects how the `color` parameter is applied.
+
+````go
+{{</* tabs */>}}
+{{%/* tab title="just colored style" style="blue" */%}}
+The `style` parameter is set to a color style.
+
+This will set the background to a lighter version of the chosen style color as configured in your theme variant.
+{{%/* /tab */%}}
+{{%/* tab title="just color" color="blue" */%}}
+Only the `color` parameter is set.
+
+This will set the background to a lighter version of the chosen CSS color value.
+{{%/* /tab */%}}
+{{%/* tab title="default style and color" style="default" color="blue" */%}}
+The `style` parameter affects how the `color` parameter is applied.
+
+The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
+{{%/* /tab */%}}
+{{%/* tab title="just severity style" style="info" */%}}
+The `style` parameter is set to a severity style.
+
+This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
+{{%/* /tab */%}}
+{{%/* tab title="severity style and color" style="info" color="blue" */%}}
+The `style` parameter affects how the `color` parameter is applied.
+
+This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
+{{%/* /tab */%}}
+{{</* /tabs */>}}
+````
+
+{{< tabs >}}
+{{% tab title="just colored style" style="blue" %}}
+
+The `style` parameter is set to a color style.
+
+This will set the background to a lighter version of the chosen style color as configured in your theme variant.
+
+{{% /tab %}}
+{{% tab title="just color" color="blue" %}}
+
+Only the `color` parameter is set.
+
+This will set the background to a lighter version of the chosen CSS color value.
+
+{{% /tab %}}
+{{% tab title="default style and color" style="default" color="blue" %}}
+
+The `style` parameter affects how the `color` parameter is applied.
+
+The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
+
+{{% /tab %}}
+{{% tab title="just severity style" style="info" %}}
+
+The `style` parameter is set to a severity style.
+
+This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
+
+{{% /tab %}}
+{{% tab title="severity style and color" style="info" color="blue" %}}
+
+The `style` parameter affects how the `color` parameter is applied.
+
+This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
+
+{{% /tab %}}
+{{< /tabs >}}

exampleSite/content/shortcodes/tabs.en.md

@@ -77,6 +77,8 @@ echo "Hello World!"
 | Name                  | Default              | Notes       |
 |:----------------------|:---------------------|:------------|
 | **groupid**           | _&lt;random&gt;_     | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. The tab selection is restored automatically based on the `groupid` for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.<br><br>This sychronization applies to the whole site! |
+| **style**             | _&lt;empty&gt;_      | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
+| **color**             | _&lt;empty&gt;_      | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
 | _**&lt;content&gt;**_ | _&lt;empty&gt;_      | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
 
 ## Examples
@@ -194,12 +196,14 @@ Hello = World
 {{% /tab %}}
 {{< /tabs >}}
 
-### Nested Tabs
+### Nested Tabs and Color
 
 In case you want to nest tabs, the parent tab that contains the subtabs needs to be declared with `{{</* tab */>}}` instead of `{{%/* tab */%}}`. Note, that in this case it is not possible to put markdown in the parent tab.
 
+You can also set various color parameter for all tabs or just selected ones. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. 
+
 ````go
-{{</* tabs groupid="main" */>}}
+{{</* tabs groupid="main" style="primary" */>}}
 {{</* tab title="Text" */>}}
   Simple text is possible here...
   {{</* tabs groupid="tabs-example-language" */>}}
@@ -215,7 +219,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
   {{</* /tabs */>}}
 {{</* /tab */>}}
 
-{{</* tab title="Code" */>}}
+{{</* tab title="Code" style="default" color="fuchsia" */>}}
   ...but no markdown
   {{</* tabs groupid="tabs-example-language" */>}}
   {{%/* tab title="python" */%}}
@@ -233,7 +237,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
 {{</* /tabs */>}}
 ````
 
-{{< tabs groupid="main" >}}
+{{< tabs groupid="main" style="primary" >}}
 {{< tab title="Text" >}}
   Simple text is possible here...
   {{< tabs groupid="tabs-example-language" >}}
@@ -249,7 +253,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
   {{< /tabs >}}
 {{< /tab >}}
 
-{{< tab title="Code" >}}
+{{< tab title="Code" style="default" color="fuchsia" >}}
   ...but no markdown
   {{< tabs groupid="tabs-example-language" >}}
   {{% tab title="python" %}}