Add code tabs

docs/assets/js/docs-main.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,6 +25,7 @@
  */
 
 // Theme JS from the `TeamDev-Ltd/site-commons`.
+import 'js/components/code-tabs.js';
 /* TODO:2025-12-03:julia.evseeva: Enable when the icon position will be approved. */
 /*import 'js/components/copy-code.js'*/
 

docs/assets/scss/docs-common/code/_code-block.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,9 +31,10 @@
   shortcode with the file name parameter or with using the `code-tabs`.
 */
 .code-block {
-  $code-block-background: var(--code-block-background);
-  $header-name-font-size: 12px;
-  $header-bg-color: var(--code-block-background);
+  $code-block-background: transparent;
+  $header-name-font-size: var(--code-tab-font-size);
+  $header-name-padding: 4px 0;
+  $header-bg-color: var(--code-block-header-background);
   $header-divider-color: var(--code-block-header-divider-color);
 
   margin-bottom: 40px;
@@ -49,11 +50,11 @@
     border-bottom: 1px solid $header-divider-color;
 
     .file-name {
-      color: var(--code-block-text-color);
+      color: #3a3a3a;
       font-size: $header-name-font-size;
-      font-weight: bold;
+      font-weight: 400;
       line-height: 1;
-      padding: 14px $code-block-padding;
+      padding: $header-name-padding;
     }
 
     .copy-code-to-clipboard-icon {

docs/assets/scss/docs-common/code/_code-tabs.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,16 +33,19 @@
   $code-tab-active-color: var(--code-tab-active-color);
   $code-tab-indicator-color: var(--code-tab-indicator-color);
   $code-tab-font: var(--main-font);
-  $code-tab-padding: 14px 16px;
+  $code-tab-padding: 4px 0;
+  $code-tab-font-size: var(--code-tab-font-size);
   $border-radius: 3px;
-  $indicator-line-height: 3px;
-  $indicator-line-border-radius: $indicator-line-height/2;
+  $indicator-line-height: 2px;
+  $indicator-line-border-radius: calc($indicator-line-height / 2);
 
   margin: 20px 0 32px;
 
   .tabs {
     position: relative;
     display: flex;
+    column-gap: 24px;
+    margin-bottom: 12px;
 
     .indicator {
       content: '';
@@ -64,8 +67,8 @@
       padding: $code-tab-padding;
       font-family: $code-tab-font;
       color: $code-tab-color;
-      font-weight: bold;
-      font-size: 12px;
+      font-weight: 500;
+      font-size: $code-tab-font-size;
       line-height: 1;
       transition: color .2s ease-in-out;
       cursor: pointer;
@@ -82,7 +85,7 @@
             bottom: -1px;
             width: 100%;
             height: $indicator-line-height;
-            background: red;
+            background: $code-tab-indicator-color;
           }
         }
       }
@@ -94,13 +97,6 @@
       }
     }
   }
-
-  .code-tab-content {
-    p {
-      padding-top: 0 !important;
-      margin-bottom: 8px;
-    }
-  }
 }
 
 .code-tab-content {
@@ -114,7 +110,19 @@
     display: inline-block;
   }
 
-  p:first-child {
-    padding-top: 0 !important;
+  p {
+    &:first-child {
+      padding-top: 0 !important;
+    }
+
+    &:has(> embed-code) {
+      display: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  ul:last-child {
+    margin-bottom: 0;
   }
 }

docs/assets/scss/docs-common/code/_code.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,32 +28,31 @@
   --code-background: #ffffff;
   --code-text-color: inherit;
   --code-padding: 0;
+
+  --code-block-header-divider-color: transparent;
+  --code-block-header-background: transparent;
+  --code-tab-color: #818181;
+  --code-tab-active-color: #1a96de;
+  --code-tab-indicator-color: #1a96de;
+  --code-tab-font-size: 15px;
 }
 
 .dark-code-theme {
   --code-block-background: #2b2b2b;
   --code-block-text-color: #a9b7c6;
   --code-block-box-shadow: unset;
-  --code-block-header-divider-color: rgba(255, 255, 255, .08);
   --code-block-highlighted-line-bg: #383636;
   --copy-code-icon-color: #{$gray-600};
   --copy-code-icon-hover-color: rgba(255, 255, 255, .8);
-  --code-tab-color: #{$gray-600};
-  --code-tab-active-color: #f8f8f2;
-  --code-tab-indicator-color: #{$gray-700};
 }
 
 .light-code-theme {
   --code-block-background: #ffffff;
   --code-block-text-color: var(--text-color);
   --code-block-box-shadow: 0 3px 12px 0 rgba(35, 37, 38, .1);
-  --code-block-header-divider-color: rgba(0, 0, 0, .07);
   --code-block-highlighted-line-bg: #e9f0e9;
   --copy-code-icon-color: #{$gray-600};
   --copy-code-icon-hover-color: #{$gray-700};
-  --code-tab-color: #{$gray-600};
-  --code-tab-active-color: var(--text-color);
-  --code-tab-indicator-color: $main-brand-color;
 }
 
 $mono-font-family: $main-mono-font;

docs/assets/scss/docs/modules/_article-container.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -58,7 +58,15 @@ $article-container-min-height: 460px;
     --code-block-padding: 20px;
   }
 
+  .code-tabs {
+    margin: 8px 0 40px;
+  }
+
   .highlight {
+    &:not(.code-tabs .highlight) {
+      margin: 8px 0 40px;
+    }
+
     // Applies negative margins only to the parent `chroma` element.
     // Useful for the default and table views with the numbered lines.
     > .chroma {

docs/assets/scss/docs/modules/_article-text.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -217,10 +217,6 @@
     color: $black;
   }
 
-  .highlight {
-    margin: 8px 0 40px;
-  }
-
   .date {
     font-family: $main-font;
     font-size: 14px;