From 7deceae18c209c67f6cfbbe3f7704798bb02a42e Mon Sep 17 00:00:00 2001
From: Andrea Ulliana <aul@odoo.com>
Date: Wed, 26 Jun 2019 12:28:13 +0000
Subject: [PATCH] [IMP] website, *: use "auto" widget for font customization

* theme_bootswatch, theme_default, website_theme_install

This commit makes use of the new 'auto' widget for font selection:
instead of enabling a template which will enable a scss file which sets
a font variable to a specific value... we directly allow to do a scss
custo which sets that value.

The code in charge of resetting font customizations on theme switching
is also moved and refactored here in website (instead of being specific
to each theme).

Part of https://github.com/odoo/odoo/pull/33442
task-1974659

Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../models/theme_bootswatch.py                |   1 +
 addons/theme_default/models/theme_default.py  |   1 +
 addons/website/controllers/main.py            |  25 +--
 addons/website/models/assets.py               |  34 ++++
 .../static/src/scss/bootstrap_overridden.scss |   4 +-
 .../fonts/option_font_body_02_variables.scss  |   1 -
 .../fonts/option_font_body_03_variables.scss  |   1 -
 .../fonts/option_font_body_04_variables.scss  |   1 -
 .../fonts/option_font_body_05_variables.scss  |   1 -
 .../fonts/option_font_body_06_variables.scss  |   1 -
 .../option_font_button_02_variables.scss      |   1 -
 .../option_font_button_03_variables.scss      |   1 -
 .../option_font_button_04_variables.scss      |   1 -
 .../option_font_button_05_variables.scss      |   1 -
 .../option_font_button_06_variables.scss      |   1 -
 .../option_font_navbar_02_variables.scss      |   1 -
 .../option_font_navbar_03_variables.scss      |   1 -
 .../option_font_navbar_04_variables.scss      |   1 -
 .../option_font_navbar_05_variables.scss      |   1 -
 .../option_font_navbar_06_variables.scss      |   1 -
 .../fonts/option_font_title_02_variables.scss |   1 -
 .../fonts/option_font_title_03_variables.scss |   1 -
 .../fonts/option_font_title_04_variables.scss |   1 -
 .../fonts/option_font_title_05_variables.scss |   1 -
 .../fonts/option_font_title_06_variables.scss |   1 -
 .../static/src/scss/primary_variables.scss    |   8 +-
 .../static/src/scss/secondary_variables.scss  |   4 +
 addons/website/static/src/scss/website.scss   |  16 +-
 addons/website/views/website_templates.xml    | 158 +++---------------
 .../models/theme_models.py                    |  12 ++
 30 files changed, 94 insertions(+), 189 deletions(-)
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_button_02_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_button_03_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_button_04_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_button_05_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_button_06_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
 delete mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss

diff --git a/addons/theme_bootswatch/models/theme_bootswatch.py b/addons/theme_bootswatch/models/theme_bootswatch.py
index bf238666044..77a7c577063 100644
--- a/addons/theme_bootswatch/models/theme_bootswatch.py
+++ b/addons/theme_bootswatch/models/theme_bootswatch.py
@@ -1,5 +1,6 @@
 from odoo import models
 
+
 class ThemeBootswatch(models.AbstractModel):
     _inherit = 'theme.utils'
 
diff --git a/addons/theme_default/models/theme_default.py b/addons/theme_default/models/theme_default.py
index bcf9853bd9e..1fda54cb8ae 100644
--- a/addons/theme_default/models/theme_default.py
+++ b/addons/theme_default/models/theme_default.py
@@ -1,5 +1,6 @@
 from odoo import models
 
+
 class ThemeDefault(models.AbstractModel):
     _inherit = 'theme.utils'
 
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index e17a216e762..a1cca57919f 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -369,10 +369,6 @@ class Website(Home):
     @http.route(['/website/make_scss_custo'], type='json', auth='user', website=True)
     def make_scss_custo(self, url, values):
         """
-        Makes a scss customization of the given file. That file must
-        contain a scss map including a line comment containing the word 'hook',
-        to indicate the location where to write the new key,value pairs.
-
         Params:
             url (str):
                 the URL of the scss file to customize (supposed to be a variable
@@ -382,24 +378,11 @@ class Website(Home):
                 key,value mapping to integrate in the file's map (containing the
                 word hook). If a key is already in the file's map, its value is
                 overridden.
+
+        Returns:
+            boolean
         """
-        AssetsUtils = request.env['web_editor.assets']
-
-        custom_url = AssetsUtils.make_custom_asset_file_url(url, 'web.assets_common')
-        updatedFileContent = AssetsUtils.get_asset_content(custom_url) or AssetsUtils.get_asset_content(url)
-        updatedFileContent = updatedFileContent.decode('utf-8')
-        for name, value in values.items():
-            pattern = "'%s': %%s,\n" % name
-            regex = re.compile(pattern % ".+")
-            replacement = pattern % value
-            if regex.search(updatedFileContent):
-                updatedFileContent = re.sub(regex, replacement, updatedFileContent)
-            else:
-                updatedFileContent = re.sub(r'( *)(.*hook.*)', r'\1%s\1\2' % replacement, updatedFileContent)
-
-        # Bundle is 'assets_common' as this route is only meant to update
-        # variables scss files
-        AssetsUtils.save_asset(url, 'web.assets_common', updatedFileContent, 'scss')
+        request.env['web_editor.assets'].make_scss_customization(url, values)
         return True
 
     @http.route(['/website/multi_render'], type='json', auth="public", website=True)
diff --git a/addons/website/models/assets.py b/addons/website/models/assets.py
index c2a52588eaa..1bbd653bd47 100644
--- a/addons/website/models/assets.py
+++ b/addons/website/models/assets.py
@@ -1,12 +1,46 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
+import re
+
 from odoo import models
 
 
 class Assets(models.AbstractModel):
     _inherit = 'web_editor.assets'
 
+    def make_scss_customization(self, url, values):
+        """
+        Makes a scss customization of the given file. That file must
+        contain a scss map including a line comment containing the word 'hook',
+        to indicate the location where to write the new key,value pairs.
+
+        Params:
+            url (str):
+                the URL of the scss file to customize (supposed to be a variable
+                file which will appear in the assets_common bundle)
+
+            values (dict):
+                key,value mapping to integrate in the file's map (containing the
+                word hook). If a key is already in the file's map, its value is
+                overridden.
+        """
+        custom_url = self.make_custom_asset_file_url(url, 'web.assets_common')
+        updatedFileContent = self.get_asset_content(custom_url) or self.get_asset_content(url)
+        updatedFileContent = updatedFileContent.decode('utf-8')
+        for name, value in values.items():
+            pattern = "'%s': %%s,\n" % name
+            regex = re.compile(pattern % ".+")
+            replacement = pattern % value
+            if regex.search(updatedFileContent):
+                updatedFileContent = re.sub(regex, replacement, updatedFileContent)
+            else:
+                updatedFileContent = re.sub(r'( *)(.*hook.*)', r'\1%s\1\2' % replacement, updatedFileContent)
+
+        # Bundle is 'assets_common' as this route is only meant to update
+        # variables scss files
+        self.save_asset(url, 'web.assets_common', updatedFileContent, 'scss')
+
     def _get_custom_attachment(self, custom_url, op='='):
         """
         See web_editor.Assets._get_custom_attachment
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index 1dd53f6a7bf..011e16511f5 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -25,9 +25,9 @@ $body-color: palette-color('text') !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number) !default;
+$font-family-sans-serif: $o-theme-font !default;
 
-$headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number) !default;
+$headings-font-family: $o-theme-headings-font !default;
 $headings-color: palette-color('h1') !default;
 
 // Jumbotron
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
deleted file mode 100644
index ab959cd7a6d..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
deleted file mode 100644
index 882e72a0b72..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
deleted file mode 100644
index 5340d78012c..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
deleted file mode 100644
index 31723e664c0..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
deleted file mode 100644
index 66abf12c21c..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-font-number: 6;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_button_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_button_02_variables.scss
deleted file mode 100644
index 2d804021980..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_button_02_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-buttons-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_button_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_button_03_variables.scss
deleted file mode 100644
index 1c614fd35d0..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_button_03_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-buttons-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_button_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_button_04_variables.scss
deleted file mode 100644
index 8ef0852a1ff..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_button_04_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-buttons-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_button_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_button_05_variables.scss
deleted file mode 100644
index 0adadb1e9c4..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_button_05_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-buttons-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_button_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_button_06_variables.scss
deleted file mode 100644
index fa00777d716..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_button_06_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-buttons-font-number: 6;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
deleted file mode 100644
index 45d8014b8eb..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-navbar-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
deleted file mode 100644
index c46c2de1180..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-navbar-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
deleted file mode 100644
index 69662acc773..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-navbar-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
deleted file mode 100644
index c96837086b5..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-navbar-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
deleted file mode 100644
index 49ef9f8167c..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-navbar-font-number: 6;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
deleted file mode 100644
index 690e1b1c3a6..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-headings-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
deleted file mode 100644
index c68022bb4da..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-headings-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
deleted file mode 100644
index 37b5a9b328f..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-headings-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
deleted file mode 100644
index ca1848f61ed..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-headings-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss
deleted file mode 100644
index 572800b17ec..00000000000
--- a/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-headings-font-number: 6;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index bb9d182756a..605bf113396 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -51,6 +51,10 @@ $o-website-values-palettes: (
     (
         'logo-height': null, // Default to navbar height (see portal)
         'header-font-size': null, // Default to BS (normal font-size)
+        'font-number': 1,
+        'headings-font-number': 1,
+        'navbar-font-number': 1,
+        'buttons-font-number': 1,
     ),
 ) !default;
 $o-website-values-palette-number: 1 !default;
@@ -87,7 +91,3 @@ $o-theme-font-names: (
     'Noto Serif',
     'Arvo',
 ) !default;
-$o-theme-font-number: 1 !default;
-$o-theme-headings-font-number: 1 !default;
-$o-theme-buttons-font-number: 1 !default;
-$o-theme-navbar-font-number: 1 !default;
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 168965c56f1..1169ee22fbc 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -51,3 +51,7 @@ $o-website-values-palette-number: length($o-website-values-palettes);
 }
 
 $o-theme-navbar-logo-height: o-website-value('logo-height') !default;
+$o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default;
+$o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;
+$o-theme-navbar-font: nth($o-theme-fonts, o-website-value('navbar-font-number')) !default;
+$o-theme-buttons-font: nth($o-theme-fonts, o-website-value('buttons-font-number')) !default;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 5fb20b332c8..c63c246acec 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -4,10 +4,10 @@
 
 $-seen: ();
 $-font-numbers: (
-    $o-theme-font-number,
-    $o-theme-headings-font-number,
-    $o-theme-buttons-font-number,
-    $o-theme-navbar-font-number
+    o-website-value('font-number'),
+    o-website-value('headings-font-number'),
+    o-website-value('navbar-font-number'),
+    o-website-value('buttons-font-number'),
 );
 @each $-number in $-font-numbers {
     @if index($-seen, $-number) == null {
@@ -75,8 +75,8 @@ $-font-numbers: (
 }
 
 .navbar {
-    @if ($o-theme-navbar-font-number != $o-theme-font-number) {
-        font-family: nth($o-theme-fonts, $o-theme-navbar-font-number);
+    @if ($o-theme-navbar-font != $o-theme-font) {
+        font-family: $o-theme-navbar-font;
     }
 
     .nav-item {
@@ -154,8 +154,8 @@ h6 {
     color: color('h6');
 }
 .btn {
-    @if ($o-theme-buttons-font-number != $o-theme-font-number) {
-        font-family: nth($o-theme-fonts, $o-theme-buttons-font-number);
+    @if ($o-theme-buttons-font != $o-theme-font) {
+        font-family: $o-theme-buttons-font;
     }
 }
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 621bec6e99e..28195f913f3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -552,42 +552,42 @@
         <content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
             <list string="Title">
                 <selection id="theme_customize_content_fonts_title">
-                    <opt data-xmlid="" data-font="1"/>
-                    <opt data-xmlid="website.option_font_title_02_variables" data-font="2"/>
-                    <opt data-xmlid="website.option_font_title_03_variables" data-font="3"/>
-                    <opt data-xmlid="website.option_font_title_04_variables" data-font="4"/>
-                    <opt data-xmlid="website.option_font_title_05_variables" data-font="5"/>
-                    <opt data-xmlid="website.option_font_title_06_variables" data-font="6"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="1" data-font="1"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="2" data-font="2"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="3" data-font="3"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="4" data-font="4"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="5" data-font="5"/>
+                    <opt data-widget="auto" data-variable="headings-font-number" data-value="6" data-font="6"/>
                 </selection>
             </list>
             <list string="Body">
                 <selection id="theme_customize_content_fonts_body">
-                    <opt data-xmlid="" data-font="1"/>
-                    <opt data-xmlid="website.option_font_body_02_variables" data-font="2"/>
-                    <opt data-xmlid="website.option_font_body_03_variables" data-font="3"/>
-                    <opt data-xmlid="website.option_font_body_04_variables" data-font="4"/>
-                    <opt data-xmlid="website.option_font_body_05_variables" data-font="5"/>
-                    <opt data-xmlid="website.option_font_body_06_variables" data-font="6"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="1" data-font="1"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="2" data-font="2"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="3" data-font="3"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="4" data-font="4"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="5" data-font="5"/>
+                    <opt data-widget="auto" data-variable="font-number" data-value="6" data-font="6"/>
                 </selection>
             </list>
             <list string="Button">
                 <selection id="theme_customize_content_fonts_button">
-                    <opt data-xmlid="" data-font="1"/>
-                    <opt data-xmlid="website.option_font_button_02_variables" data-font="2"/>
-                    <opt data-xmlid="website.option_font_button_03_variables" data-font="3"/>
-                    <opt data-xmlid="website.option_font_button_04_variables" data-font="4"/>
-                    <opt data-xmlid="website.option_font_button_05_variables" data-font="5"/>
-                    <opt data-xmlid="website.option_font_button_06_variables" data-font="6"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="1" data-font="1"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="2" data-font="2"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="3" data-font="3"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="4" data-font="4"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="5" data-font="5"/>
+                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="6" data-font="6"/>
                 </selection>
             </list>
             <list string="Navbar">
                 <selection id="theme_customize_content_fonts_navbar">
-                    <opt data-xmlid="" data-font="1"/>
-                    <opt data-xmlid="website.option_font_navbar_02_variables" data-font="2"/>
-                    <opt data-xmlid="website.option_font_navbar_03_variables" data-font="3"/>
-                    <opt data-xmlid="website.option_font_navbar_04_variables" data-font="4"/>
-                    <opt data-xmlid="website.option_font_navbar_05_variables" data-font="5"/>
-                    <opt data-xmlid="website.option_font_navbar_06_variables" data-font="6"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="1" data-font="1"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="2" data-font="2"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="3" data-font="3"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="4" data-font="4"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="5" data-font="5"/>
+                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="6" data-font="6"/>
                 </selection>
             </list>
         </content>
@@ -615,116 +615,6 @@
     </xpath>
 </template>
 
-<!-- TODO use scss customization for fonts instead (like for user colors) -->
-
-<!-- Title font options -->
-<template id="option_font_title_02_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_02_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_title_03_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_03_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_title_04_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_04_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_title_05_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_05_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_title_06_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_06_variables.scss"/>
-    </xpath>
-</template>
-
-<!-- Body font options -->
-<template id="option_font_body_02_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_02_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_body_03_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_03_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_body_04_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_04_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_body_05_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_05_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_body_06_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_06_variables.scss"/>
-    </xpath>
-</template>
-
-<!-- Button font options -->
-<template id="option_font_button_02_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_button_02_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_button_03_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_button_03_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_button_04_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_button_04_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_button_05_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_button_05_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_button_06_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_button_06_variables.scss"/>
-    </xpath>
-</template>
-
-<!-- Navbar font options -->
-<template id="option_font_navbar_02_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_navbar_03_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_navbar_04_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_navbar_05_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_font_navbar_06_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss"/>
-    </xpath>
-</template>
-
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>
diff --git a/addons/website_theme_install/models/theme_models.py b/addons/website_theme_install/models/theme_models.py
index 20a30c9713a..20105df25c1 100644
--- a/addons/website_theme_install/models/theme_models.py
+++ b/addons/website_theme_install/models/theme_models.py
@@ -147,6 +147,18 @@ class Theme(models.AbstractModel):
         if not website:  # remove optional website in master
             website = self.env['website'].get_current_website()
 
+        # Reinitialize font customizations
+        self.env['web_editor.assets'].make_scss_customization(
+            '/website/static/src/scss/options/user_values.scss',
+            {
+                'font-number': 'null',
+                'headings-font-number': 'null',
+                'navbar-font-number': 'null',
+                'buttons-font-number': 'null',
+            }
+        )
+
+        # Call specific theme post copy
         theme_post_copy = '_%s_post_copy' % mod.name
         if hasattr(self, theme_post_copy):
             _logger.info('Executing method %s' % theme_post_copy)