[FIX] web, crm, fleet, sale: font-weight

Establish a set of target font-weight values (may not directly match the final result on screen). Enable the system to naturally utilize the "bolder" font-weight. Remove previous customizations designed for "Roboto" that clashed with certain system-fonts. Enforce the "normal" font-weight for icons, regardless by their parent design. Adapts some kanban titles. closes odoo#134824 X-original-commit: 74fce06 Related: odoo/enterprise#47140 Signed-off-by: Pierre Paridans (app) <[email protected]> Co-authored-by: Brieuc-brd <[email protected]>
ronelsimon · Sep 13, 2023 · 46dca09 · 46dca09
1 parent 4775fed
commit 46dca09
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 21 deletions.
diff --git a/addons/crm/views/crm_lead_views.xml b/addons/crm/views/crm_lead_views.xml
@@ -564,8 +564,8 @@
                                 </div>
 
                                 <div class="oe_kanban_content flex-grow-1">
-                                    <div class="o_kanban_record_title oe_kanban_details">
-                                        <strong><field name="name"/></strong>
+                                    <div class="oe_kanban_details">
+                                        <strong class="o_kanban_record_title"><field name="name"/></strong>
                                     </div>
                                     <div class="o_kanban_record_subtitle">
                                         <t t-if="record.expected_revenue.raw_value">

diff --git a/addons/fleet/views/fleet_vehicle_cost_views.xml b/addons/fleet/views/fleet_vehicle_cost_views.xml
@@ -300,8 +300,8 @@
                                 <div class="o_kanban_record_top">
                                     <img t-att-src="kanban_image('fleet.vehicle', 'image_128', record.vehicle_id.raw_value)" t-att-alt="record.vehicle_id.value" class="o_image_24_cover float-start"/>
                                     <div class="o_kanban_record_headings ps-2 pe-2">
-                                        <div class="text-truncate o_kanban_record_title">
-                                            <strong>
+                                        <div class="text-truncate">
+                                            <strong class="o_kanban_record_title">
                                                 <field name="vehicle_id"/>
                                                 <span t-attf-class="float-end badge #{['todo', 'running'].indexOf(record.state.raw_value) > -1 ? 'text-bg-secondary' : ['cancelled'].indexOf(record.state.raw_value) > -1 ? 'text-bg-danger' : 'text-bg-success'}">
                                                     <field name="state"/>

diff --git a/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss b/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss
@@ -12,9 +12,6 @@
                     > * {
                         @include o-text-overflow(block);
                     }
-                    > strong {
-                        font-weight: $font-weight-bolder;
-                    }
                 }
             }
         }

diff --git a/addons/sale/views/product_product_views.xml b/addons/sale/views/product_product_views.xml
@@ -23,8 +23,8 @@
                                 <div class="o_kanban_record_top flex-column m-0">
                                     <div class="d-flex">
                                         <field class="me-2" name="priority" widget="priority"/>
-                                        <h4 class="o_kanban_record_title text-reset">
-                                            <strong><field name="name"/></strong>
+                                        <h4 class="text-reset">
+                                            <strong class="o_kanban_record_title"><field name="name"/></strong>
                                         </h4>
                                     </div>
                                     <div t-if="record.default_code.value">

diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -106,9 +106,10 @@ $caret-width: 4px !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-weight-normal: 400 !default;
-$font-weight-bold: 500 !default;
-$font-weight-bolder: 700 !default;
+// Desired weights, not necessarily matching the final result on screen.
+// Check primary_variables.scss for more info.
+$font-weight-normal: $o-font-weight-normal !default;
+$font-weight-bold: $o-font-weight-medium !default;
 
 $font-family-sans-serif: $o-font-family-sans-serif !default;
 

diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
@@ -24,6 +24,21 @@ $o-line-height-base: 1.5 !default; // This is BS default
 // automatically added.
 $o-system-fonts: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default;
 
+
+// Font weights
+// Caution: These values represent the desired font weights, but they may vary
+// depending on the user's operating system.
+// Because we rely on system fonts, the browser will interpret these values
+// based on the available fonts on the user's device.
+// If the exact font weight is unavailable, the browser will attempt to assign
+// a suitable weight using the fallowing fallback scheme.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights
+
+$o-font-weight-normal: 400 !default;
+$o-font-weight-medium: 500 !default;
+$o-font-weight-bold: 700 !default;
+$o-font-weight-extrabold: 800 !default;
+
 // Colors
 // This is BS default
 $o-white: #FFFFFF !default;

diff --git a/addons/web/static/src/views/widgets/ribbon/ribbon.scss b/addons/web/static/src/views/widgets/ribbon/ribbon.scss
@@ -22,7 +22,7 @@
         color: $white;
         font-size: var(--Ribbon-font-size, var(--Ribbon-font-size-default));
         line-height: var(--Ribbon-height, var(--Ribbon-height-default));
-        font-weight: $font-weight-bolder;
+        font-weight: $o-font-weight-bold;
         font-family: 'Lato', sans-serif;
         text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
         text-transform: uppercase;

diff --git a/addons/web/static/src/webclient/icons.scss b/addons/web/static/src/webclient/icons.scss
@@ -26,6 +26,12 @@ $oi-sizes: (
     ),
 );
 
+// Force font-weight to normal
+// ----------------------------------------------------------------------------
+.oi, .fa {
+    font-weight: $font-weight-normal;
+}
+
 // Define base-classes' properties using CSS variables.
 // Allows to dinamically update rules according to the context and eventual
 // utility classes.

diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
@@ -218,14 +218,6 @@ select {
 // Misc.
 //------------------------------------------------------------------------------
 
-// By default, <b> and <strong> are set to `$font-weight-bolder`.
-// Override with `$font-weight-bold` in order to ensure consistency with default
-// bold text, while keeping `$font-weight-bolder` variable untouched for specific
-// uses (eg. '.fw-bolder' class).
-b, strong {
-  font-weight: $font-weight-bold;
-}
-
 //== Titles
 @include media-breakpoint-down(md) {
   h1 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,9 +12,6 @@ @@
                         > * {
                             @include o-text-overflow(block);
                         }
-                        > strong {
-                            font-weight: $font-weight-bolder;
-                        }
                     }
                 }
             }
@@ Expand Down @@