shortcodes: add style option to mimic code box color scheme #551

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

@@ -20,9 +20,11 @@ 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.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and 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.
+  If you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.
+
+  Additionally the `name` parameter was renamed to `title` but 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.
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports [separate favicons]({{%relref "basics/customization/#change-the-favicon" %}}) for light & dark mode optionally.
 

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

@@ -39,7 +39,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` |
+| **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` |
 | **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`, `accent`<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`, `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]({{%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) |

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` |
+| **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` |
 | **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. |

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` |
+| **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` |
 | **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) |

exampleSite/content/shortcodes/tab.en.md

@@ -50,7 +50,7 @@ printf("Hello World!");
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **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` |
+| **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` |
 | **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) |

layouts/partials/shortcodes/tabs.html

@@ -12,7 +12,7 @@
   {{- end }}
   {{- with $tab }}
     {{- $color := .color | default $color }}
-    {{- $style := .style | default $style | default (cond (ne .color "") "filled" "default") }}
+    {{- $style := .style | default $style | default (cond (ne .color "") "filled" "initial") }}
     {{- $title := .title | default ($style | T) }}
     {{- $title = trim $title " " }}
     {{- $icon := .icon | default "" }}
@@ -37,7 +37,7 @@
   {{- end }}
 {{- end }}
 {{- $color = .color | default "" }}
-{{- $style = .style | default (cond (ne .color "") "filled" "default") }}
+{{- $style = .style | default (cond (ne .color "") "filled" "initial") }}
 {{- $title = .title | default ($style | T) }}
 {{- $title = trim $title " " }}
 {{- $icon = .icon | default "" }}

static/css/theme.css

@@ -1897,7 +1897,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     padding: 1rem;
 }
 /* remove margin if only a single code block is contained in the tab */
-#body .tab-content-text:has(> div.highlight:only-child){
+#body .tab-content-text:has(> div.highlight:only-child),
+#body .tab-content.tab-panel-style.code > .tab-content-text{
     padding: 0;
 }
 /* remove border from a code block if single  */

static/css/variant.css

@@ -205,6 +205,13 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
 }
 
+.cstyle.code {
+    --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
+}
+
 .cstyle.transparent {
     --VARIABLE-BOX-color: transparent;
     --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
@@ -398,6 +405,7 @@ article ul > li > input[type="checkbox"] {
     color: var(--VARIABLE-BOX-TEXT-color);
 }
 
+.tab-panel-style.cstyle.initial,
 .tab-panel-style.cstyle.default {
     --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
     --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
@@ -408,6 +416,7 @@ article ul > li > input[type="checkbox"] {
     --VARIABLE-BOX-BG-color: transparent;
 }
 
+#body .tab-panel-style.cstyle.initial.tab-nav-button.active,
 #body .tab-panel-style.cstyle.default.tab-nav-button.active,
 #body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
     background-color: var(--VARIABLE-BOX-BG-color);
@@ -416,6 +425,7 @@ article ul > li > input[type="checkbox"] {
     border-top-color: var(--VARIABLE-BOX-color);
 }
 
+#body .tab-panel-style.cstyle.initial.tab-content,
 #body .tab-panel-style.cstyle.default.tab-content,
 #body .tab-panel-style.cstyle.transparent.tab-content{
     background-color: var(--VARIABLE-BOX-BG-color);

static/js/theme.js

@@ -65,6 +65,23 @@ function adjustContentWidth(){
     elc.style[ dir_padding_end ] = '' + end + 'px';
 }
 
+function fixCodeTabs(){
+    /* if only a single code block is contained in the tab and no style was selected, treat it like style=code */
+    var codeTabPanels = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style.initial' ) ).filter( function( tabPanel ){
+        return tabPanel.querySelector( '.tab-content-text > div.highlight:only-child');
+    });
+
+    codeTabPanels.forEach( function( tabPanel ){
+        tabPanel.classList.remove( 'initial' );
+        tabPanel.classList.add( 'code' );
+        tabId = tabPanel.dataset.tabItem;
+        var p = tabPanel.parentNode.parentNode;
+        var tabButton = p.querySelector( '.tab-nav-button.tab-panel-style[data-tab-item="'+tabId+'"]' );
+        tabButton.classList.remove( 'initial' );
+        tabButton.classList.add( 'code' );
+    });
+}
+
 function switchTab(tabGroup, tabId) {
     var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
         return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
@@ -1251,6 +1268,7 @@ ready( function(){
     initToc();
     initAnchorClipboard();
     initCodeClipboard();
+    fixCodeTabs();
     restoreTabSelections();
     initSwipeHandler();
     initHistory();