From 21b1bf81b9d673bf5361657b2c49d7f3b05b2125 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Thu, 29 Dec 2022 10:42:36 +0100
Subject: [PATCH] [IMP][CSS] Use BS font-weight variables and fix

Instead of redefining font-weights, we override the BS variables and add
one extra font-weight in the newly-introduced extended utilities file.
After this change all the variables needed replacing and some tweaking
was needed to get the same or closely similar result as before this
change.

By doing so the font-weight classes in the typography file were obsolete
and hence removed.
Some other font-weight issues which were already there have been fixed
in this commit too.
---
 .../odoo_theme/layout_templates/header.html   |  2 +-
 .../odoo_theme/layout_templates/homepage.html |  8 ++--
 .../odoo_theme/static/scss/_mixins.scss       |  6 +--
 .../odoo_theme/static/scss/_typography.scss   | 44 ++-----------------
 .../static/scss/_utilities_extended.scss      | 16 +++++++
 .../odoo_theme/static/scss/_variables.scss    | 10 +----
 .../static/scss/bootstrap_overridden.scss     |  4 +-
 extensions/odoo_theme/static/style.scss       | 40 ++++++++---------
 8 files changed, 50 insertions(+), 80 deletions(-)
 create mode 100644 extensions/odoo_theme/static/scss/_utilities_extended.scss

diff --git a/extensions/odoo_theme/layout_templates/header.html b/extensions/odoo_theme/layout_templates/header.html
index 1fd61669a..f04d9664a 100644
--- a/extensions/odoo_theme/layout_templates/header.html
+++ b/extensions/odoo_theme/layout_templates/header.html
@@ -7,7 +7,7 @@
     </div>
     <div class="d-flex flex-grow-1">
         {%- include "layout_templates/searchbox.html" %}
-        <a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
+        <a class="btn btn-primary fw_bold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
     </div>
 </div>
 <div class="o_subheader border-bottom d-flex">
diff --git a/extensions/odoo_theme/layout_templates/homepage.html b/extensions/odoo_theme/layout_templates/homepage.html
index b6631c478..747786607 100644
--- a/extensions/odoo_theme/layout_templates/homepage.html
+++ b/extensions/odoo_theme/layout_templates/homepage.html
@@ -7,7 +7,7 @@
             <div class="col-lg-6">
                 <h2><a href="{{ pathto('applications') }}">{{ _("User Docs") }}</a></h2>
                 <p class="text-muted">{{ _("Discover our guide to help you use and configure the platform, by applications.") }}</p>
-                <h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Apps") }}</h5>
+                <h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Apps") }}</h5>
                 <ul class="list-unstyled">
                     <li>
                         <a href="{{ pathto('applications/finance/accounting') }}" class="stretched-link">
@@ -34,7 +34,7 @@
             <div class="col-lg-6">
                 <h2 class="border-top pt-4 pt-lg-0"><a href="{{ pathto('administration') }}">{{ _("Install and Maintain") }}</a></h2>
                 <p class="text-muted">{{ _("Learn how to install, deploy and upgrade Odoo on premise or on Odoo.sh.") }}</p>
-                <h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
+                <h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
                 <ul class="list-unstyled">
                     <li>
                         <a href=" {{ pathto('administration/deployment/install') }} " class="stretched-link">
@@ -63,7 +63,7 @@
             <div class="col-lg-6">
                 <h2 class="border-top pt-4"><a href="{{ pathto('developer') }}">{{ _("Developer") }}</a></h2>
                 <p class="text-muted">{{ _("Learn to develop in Odoo by reading the framework references and programmer tutorials.") }}</p>
-                <h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
+                <h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
                 <ul class="list-unstyled">
                     <li>
                         <a href="{{ pathto('developer/howtos/rdtraining') }}" class="stretched-link">
@@ -95,7 +95,7 @@
             <div class="col-lg-6">
                 <h2 class="border-top pt-4"><a href="{{ pathto('contributing') }}">{{ _("Contributing") }}</a></h2>
                 <p class="text-muted">{{ _("You want to contribute to Odoo but don't know where to start? The tutorials and guidelines are there to help you make Odoo even better.") }}</p>
-                <h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
+                <h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
                 <ul class="list-unstyled">
                     <li>
                         <a href="{{ pathto('contributing/development/coding_guidelines') }}" class="stretched-link">
diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss
index 6e8d6e0aa..1f5b6200b 100644
--- a/extensions/odoo_theme/static/scss/_mixins.scss
+++ b/extensions/odoo_theme/static/scss/_mixins.scss
@@ -49,7 +49,7 @@
 
 //-- add icon
 
-@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
+@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $font-weight-normal) {
     vertical-align: $v-align;
     margin: $margin;
     @include font-size($font-size);
@@ -92,7 +92,7 @@
 }
 
 @mixin o-content-tab-selected {
-    font-weight: $o-fw-bold;
+    font-weight: $font-weight-bolder;
     border-bottom: 1px solid $white;
     border-left: 1px solid $o-gray-border;
     border-right: 1px solid $o-gray-border;
@@ -105,6 +105,6 @@
     background: $o-literals-bg;
     font-size: 0.875rem;
     font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
-    font-weight: $o-fw-regular;
+    font-weight: inherit;
     color: inherit;
 }
diff --git a/extensions/odoo_theme/static/scss/_typography.scss b/extensions/odoo_theme/static/scss/_typography.scss
index 64e4b433b..0b885a40c 100644
--- a/extensions/odoo_theme/static/scss/_typography.scss
+++ b/extensions/odoo_theme/static/scss/_typography.scss
@@ -32,50 +32,12 @@ html body{
 }
 
 //------------------------------------------------------------------------------
-// Font weight
+// Font Styling
 //------------------------------------------------------------------------------
 b, strong{
-    font-weight: $o-fw-bold;
+    font-weight: $font-weight-bolder;
 }
 
 a {
-    font-weight: $o-fw-semibold;
-}
-
-.fw_extralight {
-    font-weight: $o-fw-extralight;
-}
-
-.fw_light {
-    font-weight: $o-fw-light;
-}
-
-.fw_extralight, .fw_light{
-    label, b, strong, a {
-        font-weight: $o-fw-regular;
-    }
-}
-
-.fw_regular {
-    font-weight: $o-fw-regular;
-}
-
-.fw_medium {
-    font-weight: $o-fw-medium;
-}
-
-.fw_semibold {
-    font-weight: $o-fw-semibold;
-}
-
-.fw_bold {
-    font-weight: $o-fw-bold;
-}
-
-.fw_extrabold {
-    font-weight: $o-fw-extrabold;
-}
-
-.fw_black {
-    font-weight: $o-fw-black;
+    font-weight: $font-weight-bold;
 }
diff --git a/extensions/odoo_theme/static/scss/_utilities_extended.scss b/extensions/odoo_theme/static/scss/_utilities_extended.scss
new file mode 100644
index 000000000..9a59c5caa
--- /dev/null
+++ b/extensions/odoo_theme/static/scss/_utilities_extended.scss
@@ -0,0 +1,16 @@
+// Extend Utilities
+$utilities: () !default;
+$utilities: map-merge(
+  $utilities,
+  (
+    "font-weight": map-merge(
+      map-get($utilities, "font-weight"),
+      (
+        values: map-merge(
+            map-get(map-get($utilities, "font-weight"), "values"),
+            ("medium" : $o-font-weight-medium)
+        ),
+      ),
+    ),
+  )
+);
diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss
index 10196aeeb..69ae4508b 100644
--- a/extensions/odoo_theme/static/scss/_variables.scss
+++ b/extensions/odoo_theme/static/scss/_variables.scss
@@ -8,14 +8,8 @@ $o-container-max-width-xxxl: 1560px;
 // ===============================================
 $o-font-family-serif:                         'Roboto Slab', Georgia, "Times New Roman", Times, serif;
 
-$o-fw_extralight:                             200;
-$o-fw_light:                                  300;
-$o-fw-regular:                                400;
-$o-fw-medium:                                 500;
-$o-fw-semibold:                               600;
-$o-fw-bold:                                   700;
-$o-fw-extrabold:                              800;
-$o-fw_black:                                  900;
+// Extra font added in custom utilities
+$o-font-weight-medium:                        500;
 
 //------------------------------------------------------------------------------
 // icomoon icons
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
index 1cb0344fa..dbb60def5 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
@@ -50,7 +50,7 @@ $font-weight-lighter:         200;
 $font-weight-light:           300;
 $font-weight-normal:          400;
 $font-weight-bold:            600;
-$font-weight-bolder:          800;
+$font-weight-bolder:          700;
 
 // Images
 
@@ -60,7 +60,7 @@ $thumbnail-padding:                         .5rem;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 $btn-font-size:                             .875rem;
-$btn-font-weight:                           $font-weight-medium;
+$btn-font-weight:                           500;
 $btn-close-focus-shadow:                    0 0 0 0 transparent;
 $btn-close-bg:                              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#000000"><path d="M15,16c-.27,0-.54-.11-.73-.31l-4.21-4.44c-.38-.4-.36-1.03,.04-1.41s1.03-.36,1.41,.04l3.48,3.67,3.42-3.67c.38-.4,1.01-.42,1.41-.05,.4,.38,.42,1.01,.05,1.41l-4.15,4.44c-.19,.2-.45,.32-.73,.32h0Z"/><path d="M10.79,20.44c-.25,0-.49-.09-.69-.27-.4-.38-.42-1.01-.04-1.41l4.21-4.45c.19-.2,.45-.31,.73-.31h0c.28,0,.54,.12,.73,.32l4.15,4.45c.38,.4,.35,1.04-.05,1.41-.41,.38-1.04,.35-1.41-.05l-3.42-3.67-3.48,3.67c-.2,.21-.46,.31-.73,.31Z"/><path d="M15,28.37c-7.37,0-13.37-6-13.37-13.37S7.63,1.63,15,1.63s13.37,6,13.37,13.37-6,13.37-13.37,13.37Zm0-24.74C8.73,3.63,3.63,8.73,3.63,15s5.1,11.37,11.37,11.37,11.37-5.1,11.37-11.37S21.27,3.63,15,3.63Z"/></svg>');
 $btn-close-width:                           2rem;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index b2ab90628..e4b99e476 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -3,6 +3,8 @@
 @import "scss/bootstrap_overridden";
 @import "scss/bootstrap_scss/bootstrap";
 @import "scss/_variables";
+@import "scss/_utilities_extended";
+@import "scss/bootstrap_scss/utilities/_api.scss";
 @import "scss/_mixins";
 @import "scss/_typography";
 @import "scss/_iconfont";
@@ -224,7 +226,7 @@ header {
         padding-left: $o-padding-s;
         background-color: lighten($secondary, 70%) ;
         color: $secondary;
-        font-weight: $o-fw-regular;
+        font-weight: $font-weight-normal;
 
         @include o-transition(all, .3s);
         @include font-size($font-size-sm);
@@ -339,7 +341,7 @@ header {
                 display: inline-block;
                 padding: .4rem 0;
                 color: $o-gray-color;
-                font-weight: $o-fw-regular;
+                font-weight: $font-weight-normal;
             }
 
             &:not(.toctree-l1) {
@@ -368,7 +370,7 @@ header {
                     }
                 }
                 > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
-                    font-weight: $o-fw-bold;
+                    font-weight: $font-weight-bolder;
                 }
             }
         }
@@ -408,14 +410,14 @@ header {
 
         h5 {
             text-transform: uppercase;
-            font-weight: $o-fw-bold;
+            font-weight: $font-weight-bolder;
             color: $o-gray-color;
             padding-left: $o-padding-xs;
             margin-bottom: $o-padding-xs;
         }
 
         a {
-            font-weight: $o-fw-regular;
+            font-weight: $font-weight-normal;
             color: $o-gray-color
         }
 
@@ -452,7 +454,7 @@ header {
         padding: 0 .3rem;
         &.file {
             font-family: $font-family-base;
-            font-weight: $o-fw-medium;
+            font-weight: $o-font-weight-medium;
             font-style: italic;
             padding-right: .4rem;
             color: $blue-700;
@@ -638,7 +640,7 @@ header {
                             padding: $o-padding-s;
 
                             blockquote {
-                                font-weight: $o-fw-semibold;
+                                font-weight: $font-weight-bold;
                                 font-style: italic;
                             }
 
@@ -691,7 +693,7 @@ header {
                 pointer-events: none;
                 cursor: default;
                 color: $o-gray-color;
-                font-weight: $o-fw-semibold;
+                font-weight: $font-weight-bold;
             }
         }
 
@@ -720,7 +722,7 @@ header {
 
                 > h1 {
                     color: $secondary;
-                    font-weight: $o-fw-bold;
+                    font-weight: $font-weight-bolder;
                     margin-bottom: $o-margin-s;
 
                     @include media-breakpoint-up(lg) {
@@ -737,12 +739,8 @@ header {
                 }
 
                 > h3 {
-                    font-weight: $o-fw-bold;
-                }
-
-
-                > h4, > h5, > h6 {
-                    font-weight: $o-fw-semibold;
+                    font-size: $font-size-base * 1.3;
+                    font-weight: $font-weight-bold;
                 }
 
                 img {
@@ -766,7 +764,7 @@ header {
                 .figure {
 
                     .caption, .caption-text {
-                        font-weight: $o-fw-semibold;
+                        font-weight: $font-weight-bold;
                         color: $o-gray;
                     }
 
@@ -843,14 +841,14 @@ header {
         }
 
         .guilabel, .menuselection {
-            font-weight: $o-fw-semibold;
+            font-weight: $font-weight-bold;
         }
 
         .dfn{
             @include font-size($font-size-sm);
             line-height: 1;
             color: $blue-600;
-            font-weight: $o-fw-semibold;
+            font-weight: $font-weight-bold;
             &:before {
                 content:'?';
                 display: inline-block;
@@ -861,7 +859,7 @@ header {
                 text-align: center;
                 color: $blue-600;
                 font-size: 12px;
-                font-weight: $o-fw-extrabold;
+                font-weight: $font-weight-bolder;
                 font-style: normal;
                 margin: 0 .1rem;
             }
@@ -912,7 +910,7 @@ header {
                 line-height: 1em;
                 margin: 0 0 10px 0;
                 @include font-size($font-size-base);
-                font-weight: $o-fw-bold;
+                font-weight: $font-weight-bolder;
 
                 &:before {
                     content: var(--o-alert-icon, #{$o-alert-default-icon});
@@ -1154,7 +1152,7 @@ footer {
 
         h4 {
             color: $secondary;
-            font-weight: $o-fw-bold;
+            font-weight: $font-weight-bolder;
             margin-bottom: $o-margin-s;
         }