[FW][IMP] odoo_theme: toctrees-l1,l2 design improvement

extensions/odoo_theme/static/js/layout.js

@@ -34,7 +34,25 @@
         // Make all external links open in a new tab by default.
         content.querySelectorAll('a.external').forEach(externalLink => {
             externalLink.setAttribute('target', '_blank');
-        })
+        });
+
+        let canAccessAllL1Toctrees = true; // Whether all direct children have a ref.
+        const toctreeWrapper = document.querySelector('.toctree-wrapper');
+        toctreeWrapper?.querySelectorAll('.toctree-l1').forEach(l1Toctree => {
+            // Flag L2 toctrees that have L3 children.
+            if (l1Toctree.querySelector('.toctree-l3')) {
+                l1Toctree.querySelectorAll('.toctree-l2').forEach (l2Toctree => {
+                    l2Toctree.classList.add('o_toc_contains_l3');
+                });
+            }
+            if (l1Toctree.querySelector('a').getAttribute('href') === '#') {
+                canAccessAllL1Toctrees = false;
+            }
+        });
+        if (canAccessAllL1Toctrees) {
+            // Use the style of L2 toctrees on L1 toctrees.
+            toctreeWrapper?.classList.add('o_toc_l1_to_l2');
+        }
     });
 
 })();

extensions/odoo_theme/static/scss/_typography.scss

@@ -39,5 +39,5 @@ b, strong{
 }
 
 a {
-    font-weight: $font-weight-bold;
+    font-weight: var(--o-link-fontweight, #{$font-weight-bold});
 }

extensions/odoo_theme/static/scss/bootstrap_overridden.scss

@@ -49,6 +49,7 @@ $h6-font-size:                              $font-size-base !default;
 $font-weight-lighter:         200;
 $font-weight-light:           300;
 $font-weight-normal:          400;
+$font-weight-medium:          500;
 $font-weight-bold:            600;
 $font-weight-bolder:          700;
 

extensions/odoo_theme/static/scss/bootstrap_scss/_reboot.scss

@@ -259,11 +259,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--o-link-color, #{$link-color});
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--o-link-hover-color, #{$link-hover-color});
     text-decoration: $link-hover-decoration;
   }
 }

extensions/odoo_theme/static/style.scss

@@ -585,28 +585,42 @@ main.container-fluid {
 }
 
 .toctree-wrapper {
+    %toctree-custom-link {
+        > a:not([href="#"]){
+            --o-link-color: #{$o-gray-color};
+            --o-link-hover-color: #{$primary};
+
+            &:after {
+                content: ' #{$i-link}';
+                @include o-inline-icon(auto, baseline, 0.7em, $font-weight-bold);
+                color: $primary;
+            }
+        }
+    }
+
     > ul, .toctree-l1 > ul {
         padding-left: 0;
         list-style: none;
     }
 
-    .toctree-l1 > a {
-        display: block;
-        margin-top: $o-padding-m;
-        margin-bottom: $o-margin-s;
-        padding-bottom: $o-padding-xs;
-        border-bottom: 1px solid $o-gray-border;
-        @include font-size($h2-font-size);
-        font-weight: 600;
-    }
-
-    .toctree-l1 {
+    &:not(.o_toc_l1_to_l2) .toctree-l1 {
+        @extend %toctree-custom-link;
         margin-bottom: 2rem;
+
+        > a {
+            display: block;
+            margin-top: $o-padding-m;
+            margin-bottom: $o-margin-s;
+            padding-bottom: $o-padding-xs;
+            border-bottom: 1px solid $o-gray-border;
+            @include font-size($h2-font-size);
+            font-weight: $font-weight-bolder;
+        }
     }
 
-    .toctree-l2 > a[href="#"] {
-        margin-top: 0.7rem;
-        display: inline-block;
+    .toctree-l2.o_toc_contains_l3 {
+        margin-top: map-get($spacers, 3);
+        @extend %toctree-custom-link;
     }
 
     a[href="#"] {
@@ -615,6 +629,10 @@ main.container-fluid {
         pointer-events: none;
         cursor: default;
     }
+
+    .toctree-l3 > a {
+        --o-link-fontweight: #{$font-weight-medium};
+    }
 }
 
 article.doc-body {