[IMP] website: add a system fonts option and use it in the default theme

To allow increasing page loading performance, websites can now choose to
use system fonts instead of using a google font. It is also the default
in the default theme of Odoo from now on. The option will automatically
be available for all themes whatever way they defined their available
fonts but will only be used as default if explicitly asked by the theme
(as done in the default theme).

task-2993054

X-original-commit: c0f2f670eb087991cc9a6a67f4beea5f12bd15f2
Part-of: odoo/odoo#101068

addons/web/static/src/scss/primary_variables.scss

@@ -9,6 +9,13 @@ $o-font-size-base: 13rem * (1px / $o-root-font-size) !default;
 $o-font-size-base-touch: 15px !default;
 $o-line-height-base: 1.5 !default; // This is BS default
 
+// This is the bootstrap default, it is duplicated here as we need to process
+// it before actually using it (to add more unicode support with the special
+// Odoo font for example). Adding unicode support is not done directly here as
+// this font can be used by the website where the unicode support is already
+// automatically added.
+$o-system-fonts: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default;
+
 // Colors
 // This is BS default
 $o-white: #FFFFFF !default;

addons/website/static/src/js/editor/snippets.options.js

@@ -124,10 +124,13 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
         const variable = this.el.dataset.variable;
         _.times(nbFonts, fontNb => {
             const realFontNb = fontNb + 1;
+            const fontKey = weUtils.getCSSVariableValue(`font-number-${realFontNb}`, style);
+            const fontName = fontKey === "'SYSTEM_FONTS'" ? _t("System Fonts") : fontKey.slice(1, -1);
             const fontEl = document.createElement('we-button');
             fontEl.classList.add(`o_we_option_font_${realFontNb}`);
+            fontEl.setAttribute('string', fontName);
             fontEl.dataset.variable = variable;
-            fontEl.dataset[methodName] = weUtils.getCSSVariableValue(`font-number-${realFontNb}`, style);
+            fontEl.dataset[methodName] = fontKey;
             fontEl.dataset.font = realFontNb;
             fontEls.push(fontEl);
             this.menuEl.appendChild(fontEl);

addons/website/static/src/scss/primary_variables.scss

@@ -2031,9 +2031,11 @@ $o-font-aliases-to-keys: (
 );
 $o-website-values-palettes: (
     (
-        'headings-font': 'Source Sans Pro',
-        'navbar-font': 'Source Sans Pro',
-        'buttons-font': 'Source Sans Pro',
+        // By default, the $o-base-website-values-palette for fonts are "null"
+        // but will actually automatically be filled with the first font themes
+        // define in $o-theme-font-configs (for the base one). For the default
+        // website, we want to specifically use the system fonts.
+        'font': 'SYSTEM_FONTS',
     ),
 ) !default;
 $o-website-values-palette-number: 1 !default;
@@ -2067,6 +2069,16 @@ $o-theme-h6-font-size-multiplier: 1 !default;
 //         ...,
 //     )
 // )
+// $o-base-theme-font-configs will be used to automatically extend
+// $o-theme-font-configs whatever themes added inside.
+$o-base-theme-font-configs: (
+    'SYSTEM_FONTS': (
+        // This allows users to use default system fonts, potentially improving
+        // page loading performances. This should always be kept as the first
+        // font defined in $o-base-theme-font-configs.
+        'family': $o-system-fonts,
+    ),
+) !default;
 $o-theme-font-configs: (
     'Roboto': (
         'family': ('Roboto', sans-serif),

addons/website/static/src/scss/secondary_variables.scss

@@ -4,7 +4,8 @@
 
 // Complete the base website values palette with the first defined font in
 // $o-theme-font-configs, this allows themes to just define a list of fonts and
-// relying on the fact the first one will be used.
+// relying on the fact the first one will be used (but not SYSTEM_FONTS which
+// is defined in $o-base-theme-font-configs).
 $-first-font-name: nth(map-keys($o-theme-font-configs), 1);
 @if map-get($o-base-website-values-palette, 'font') == null {
     $o-base-website-values-palette: map-merge($o-base-website-values-palette, (
@@ -215,6 +216,10 @@ $o-we-auto-contrast-exclusions: join($o-we-auto-contrast-exclusions, map-keys($o
 // Fonts
 //------------------------------------------------------------------------------
 
+// Use $o-base-theme-font-configs to extend $o-theme-font-configs whatever
+// themes added inside.
+$o-theme-font-configs: map-merge($o-base-theme-font-configs, $o-theme-font-configs);
+
 // Merge base fonts with user-added google fonts
 @each $font-name in (o-website-value('google-fonts') or ()) {
     $o-theme-font-configs: map-merge($o-theme-font-configs, (
@@ -243,7 +248,11 @@ $o-we-auto-contrast-exclusions: join($o-we-auto-contrast-exclusions, map-keys($o
     $-font-config: o-safe-get($o-theme-font-configs, $font-name, ());
     @return map-get($-font-config, $config-key);
 }
-$o-theme-font: o-get-font-info('base') or (sans-serif,) !default;
+
+$o-theme-font: o-get-font-info('base') !default;
+// A theme which defines no default font normally automatically uses the first
+// one in $o-base-theme-font-configs. This ensures a misconfiguration also does.
+$o-theme-font: $o-theme-font or o-add-unicode-support-font($o-system-fonts);
 $o-theme-headings-font: o-get-font-info('headings') or $o-theme-font !default;
 $o-theme-navbar-font: o-get-font-info('navbar') or $o-theme-font !default;
 $o-theme-buttons-font: o-get-font-info('buttons') or $o-theme-font !default;

addons/website/static/src/scss/website.wysiwyg.scss

@@ -38,10 +38,6 @@ $i: 1;
 @each $font-name, $font-config in $o-theme-font-configs {
     we-toggler.o_we_option_font_#{$i}, we-button.o_we_option_font_#{$i} > div {
         font-family: o-safe-get($font-config, 'family', $font-family-base);
-
-        &::before {
-            content: $font-name;
-        }
     }
     $i: $i + 1;
 }