From 0ed3c088fd6e24bfee8a88a9824143daac62f259 Mon Sep 17 00:00:00 2001
From: "julia.evseeva" <julia.evseeva@teamdev.com>
Date: Mon, 12 Jan 2026 19:03:49 +0100
Subject: [PATCH 1/5] Improve the style of the code tabs

---
 docs/assets/js/docs-main.js                          |  1 +
 docs/assets/scss/docs-common/code/_code-block.scss   |  4 ++--
 docs/assets/scss/docs-common/code/_code-tabs.scss    | 12 ++++++++++--
 docs/assets/scss/docs-common/code/_code.scss         | 12 +++++++-----
 .../assets/scss/docs/modules/_article-container.scss |  8 ++++++++
 docs/assets/scss/docs/modules/_article-text.scss     |  4 ----
 6 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/docs/assets/js/docs-main.js b/docs/assets/js/docs-main.js
index 6e4bab5..4d2a60a 100644
--- a/docs/assets/js/docs-main.js
+++ b/docs/assets/js/docs-main.js
@@ -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'*/
 
diff --git a/docs/assets/scss/docs-common/code/_code-block.scss b/docs/assets/scss/docs-common/code/_code-block.scss
index 4fe4d6e..d1df199 100644
--- a/docs/assets/scss/docs-common/code/_code-block.scss
+++ b/docs/assets/scss/docs-common/code/_code-block.scss
@@ -31,9 +31,9 @@
   shortcode with the file name parameter or with using the `code-tabs`.
 */
 .code-block {
-  $code-block-background: var(--code-block-background);
+  $code-block-background: transparent;
   $header-name-font-size: 12px;
-  $header-bg-color: var(--code-block-background);
+  $header-bg-color: var(--code-block-header-background);
   $header-divider-color: var(--code-block-header-divider-color);
 
   margin-bottom: 40px;
diff --git a/docs/assets/scss/docs-common/code/_code-tabs.scss b/docs/assets/scss/docs-common/code/_code-tabs.scss
index 581ca92..bd8bb43 100644
--- a/docs/assets/scss/docs-common/code/_code-tabs.scss
+++ b/docs/assets/scss/docs-common/code/_code-tabs.scss
@@ -65,7 +65,7 @@
       font-family: $code-tab-font;
       color: $code-tab-color;
       font-weight: bold;
-      font-size: 12px;
+      font-size: 13px;
       line-height: 1;
       transition: color .2s ease-in-out;
       cursor: pointer;
@@ -82,7 +82,7 @@
             bottom: -1px;
             width: 100%;
             height: $indicator-line-height;
-            background: red;
+            background: $code-tab-indicator-color;
           }
         }
       }
@@ -96,10 +96,18 @@
   }
 
   .code-tab-content {
+    &:not(:has(.highlight)) {
+      padding-top: 16px;
+    }
+
     p {
       padding-top: 0 !important;
       margin-bottom: 8px;
     }
+
+    ul:last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
diff --git a/docs/assets/scss/docs-common/code/_code.scss b/docs/assets/scss/docs-common/code/_code.scss
index a323ce5..907a200 100644
--- a/docs/assets/scss/docs-common/code/_code.scss
+++ b/docs/assets/scss/docs-common/code/_code.scss
@@ -34,26 +34,28 @@
   --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-header-divider-color: transparent;
+  --code-block-header-background: transparent;
   --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};
+  --code-tab-active-color: var(--text-color);
+  --code-tab-indicator-color: #1a96de;
 }
 
 .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-header-divider-color: transparent;
+  --code-block-header-background: transparent;
   --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;
+  --code-tab-indicator-color: #1a96de;
 }
 
 $mono-font-family: $main-mono-font;
diff --git a/docs/assets/scss/docs/modules/_article-container.scss b/docs/assets/scss/docs/modules/_article-container.scss
index 57a005e..e2739ae 100644
--- a/docs/assets/scss/docs/modules/_article-container.scss
+++ b/docs/assets/scss/docs/modules/_article-container.scss
@@ -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 {
diff --git a/docs/assets/scss/docs/modules/_article-text.scss b/docs/assets/scss/docs/modules/_article-text.scss
index 95c53ba..2493bf0 100644
--- a/docs/assets/scss/docs/modules/_article-text.scss
+++ b/docs/assets/scss/docs/modules/_article-text.scss
@@ -217,10 +217,6 @@
     color: $black;
   }
 
-  .highlight {
-    margin: 8px 0 40px;
-  }
-
   .date {
     font-family: $main-font;
     font-size: 14px;

From 2b1e1c899e5c36dbbdff58e41d7cf062d6f4f410 Mon Sep 17 00:00:00 2001
From: "julia.evseeva" <julia.evseeva@teamdev.com>
Date: Thu, 15 Jan 2026 13:20:56 +0100
Subject: [PATCH 2/5] Style the code tabs according the full-width code blocks

---
 .../scss/docs-common/code/_code-tabs.scss     | 44 +++++++++----------
 docs/assets/scss/docs-common/code/_code.scss  | 16 +++----
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/docs/assets/scss/docs-common/code/_code-tabs.scss b/docs/assets/scss/docs-common/code/_code-tabs.scss
index bd8bb43..c23ef49 100644
--- a/docs/assets/scss/docs-common/code/_code-tabs.scss
+++ b/docs/assets/scss/docs-common/code/_code-tabs.scss
@@ -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: 15px;
   $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: 16px;
+    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: 13px;
+      font-weight: 500;
+      font-size: $code-tab-font-size;
       line-height: 1;
       transition: color .2s ease-in-out;
       cursor: pointer;
@@ -94,21 +97,6 @@
       }
     }
   }
-
-  .code-tab-content {
-    &:not(:has(.highlight)) {
-      padding-top: 16px;
-    }
-
-    p {
-      padding-top: 0 !important;
-      margin-bottom: 8px;
-    }
-
-    ul:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
 
 .code-tab-content {
@@ -122,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;
   }
 }
diff --git a/docs/assets/scss/docs-common/code/_code.scss b/docs/assets/scss/docs-common/code/_code.scss
index 907a200..2b51062 100644
--- a/docs/assets/scss/docs-common/code/_code.scss
+++ b/docs/assets/scss/docs-common/code/_code.scss
@@ -28,34 +28,30 @@
   --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;
 }
 
 .dark-code-theme {
   --code-block-background: #2b2b2b;
   --code-block-text-color: #a9b7c6;
   --code-block-box-shadow: unset;
-  --code-block-header-divider-color: transparent;
-  --code-block-header-background: transparent;
   --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: var(--text-color);
-  --code-tab-indicator-color: #1a96de;
 }
 
 .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: transparent;
-  --code-block-header-background: transparent;
   --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: #1a96de;
 }
 
 $mono-font-family: $main-mono-font;

From 941cc4fe030ecf9c8b834bd72114153683a86034 Mon Sep 17 00:00:00 2001
From: "julia.evseeva" <julia.evseeva@teamdev.com>
Date: Thu, 15 Jan 2026 14:24:07 +0100
Subject: [PATCH 3/5] Adjust the file name styles

---
 docs/assets/scss/docs-common/code/_code-block.scss | 9 +++++----
 docs/assets/scss/docs-common/code/_code-tabs.scss  | 2 +-
 docs/assets/scss/docs-common/code/_code.scss       | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/assets/scss/docs-common/code/_code-block.scss b/docs/assets/scss/docs-common/code/_code-block.scss
index d1df199..251481f 100644
--- a/docs/assets/scss/docs-common/code/_code-block.scss
+++ b/docs/assets/scss/docs-common/code/_code-block.scss
@@ -32,7 +32,8 @@
 */
 .code-block {
   $code-block-background: transparent;
-  $header-name-font-size: 12px;
+  $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);
 
@@ -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 {
diff --git a/docs/assets/scss/docs-common/code/_code-tabs.scss b/docs/assets/scss/docs-common/code/_code-tabs.scss
index c23ef49..47ae308 100644
--- a/docs/assets/scss/docs-common/code/_code-tabs.scss
+++ b/docs/assets/scss/docs-common/code/_code-tabs.scss
@@ -34,7 +34,7 @@
   $code-tab-indicator-color: var(--code-tab-indicator-color);
   $code-tab-font: var(--main-font);
   $code-tab-padding: 4px 0;
-  $code-tab-font-size: 15px;
+  $code-tab-font-size: var(--code-tab-font-size);
   $border-radius: 3px;
   $indicator-line-height: 2px;
   $indicator-line-border-radius: calc($indicator-line-height / 2);
diff --git a/docs/assets/scss/docs-common/code/_code.scss b/docs/assets/scss/docs-common/code/_code.scss
index 2b51062..4700600 100644
--- a/docs/assets/scss/docs-common/code/_code.scss
+++ b/docs/assets/scss/docs-common/code/_code.scss
@@ -34,6 +34,7 @@
   --code-tab-color: #818181;
   --code-tab-active-color: #1a96de;
   --code-tab-indicator-color: #1a96de;
+  --code-tab-font-size: 15px;
 }
 
 .dark-code-theme {

From 833a99ec2e9f06acc3a65a21d0a1a342385ca034 Mon Sep 17 00:00:00 2001
From: "julia.evseeva" <julia.evseeva@teamdev.com>
Date: Thu, 15 Jan 2026 14:26:16 +0100
Subject: [PATCH 4/5] Adjust copyright year

---
 docs/assets/js/docs-main.js                           | 2 +-
 docs/assets/scss/docs-common/code/_code-block.scss    | 2 +-
 docs/assets/scss/docs-common/code/_code-tabs.scss     | 2 +-
 docs/assets/scss/docs-common/code/_code.scss          | 2 +-
 docs/assets/scss/docs/modules/_article-container.scss | 2 +-
 docs/assets/scss/docs/modules/_article-text.scss      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/assets/js/docs-main.js b/docs/assets/js/docs-main.js
index 4d2a60a..745914a 100644
--- a/docs/assets/js/docs-main.js
+++ b/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.
diff --git a/docs/assets/scss/docs-common/code/_code-block.scss b/docs/assets/scss/docs-common/code/_code-block.scss
index 251481f..2610a37 100644
--- a/docs/assets/scss/docs-common/code/_code-block.scss
+++ b/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.
diff --git a/docs/assets/scss/docs-common/code/_code-tabs.scss b/docs/assets/scss/docs-common/code/_code-tabs.scss
index 47ae308..639c125 100644
--- a/docs/assets/scss/docs-common/code/_code-tabs.scss
+++ b/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.
diff --git a/docs/assets/scss/docs-common/code/_code.scss b/docs/assets/scss/docs-common/code/_code.scss
index 4700600..2a16396 100644
--- a/docs/assets/scss/docs-common/code/_code.scss
+++ b/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.
diff --git a/docs/assets/scss/docs/modules/_article-container.scss b/docs/assets/scss/docs/modules/_article-container.scss
index e2739ae..8d54da2 100644
--- a/docs/assets/scss/docs/modules/_article-container.scss
+++ b/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.
diff --git a/docs/assets/scss/docs/modules/_article-text.scss b/docs/assets/scss/docs/modules/_article-text.scss
index 2493bf0..3c4aaa2 100644
--- a/docs/assets/scss/docs/modules/_article-text.scss
+++ b/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.

From fdb50a78d7dd186aef60275217aeaddfaae5609a Mon Sep 17 00:00:00 2001
From: "julia.evseeva" <julia.evseeva@teamdev.com>
Date: Thu, 15 Jan 2026 14:53:14 +0100
Subject: [PATCH 5/5] Increase the gap

---
 docs/assets/scss/docs-common/code/_code-tabs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/assets/scss/docs-common/code/_code-tabs.scss b/docs/assets/scss/docs-common/code/_code-tabs.scss
index 639c125..7503f7b 100644
--- a/docs/assets/scss/docs-common/code/_code-tabs.scss
+++ b/docs/assets/scss/docs-common/code/_code-tabs.scss
@@ -44,7 +44,7 @@
   .tabs {
     position: relative;
     display: flex;
-    column-gap: 16px;
+    column-gap: 24px;
     margin-bottom: 12px;
 
     .indicator {