From b633a95bb6dc4b2227985be11651b73435c8e677 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Tue, 20 Sep 2022 15:31:19 +0000 Subject: [PATCH] [IMP] web, web_editor, website, spreadsheet: use system fonts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use system fonts for backend and web-editor's UI. This commit removes references to proprietary fonts and allows the OS to use the system ones. The aim is to reduce http request and the general footprint (see enterprise counter-part). The new font-stack: - apple-system (San Francisco): iOS Safari, macOS Safari, macOS Firefox - BlinkMacSystemFont (San Francisco): macOS Chrome - Segoe UI: Windows - Roboto: Android, Chrome OS - Helvetica Neue: old OSX versions - Ubuntu: Ubuntu - Liberation Sans: Linux (others) - Arial: Any - sans-serif: General fallback This was actually already introduced for the website default theme and as a general option with [1] but it was not complete: if reaching the need to use Roboto of the font stack, the repo Roboto was used instead of the potential system one. It was not shown during testing with the previous font stack. With the new one, on Ubuntu, it was revealed as the Ubuntu font comes after Roboto. [1]: https://github.com/odoo/odoo/commit/c0f2f670eb087991cc9a6a67f4beea5f12bd15f2 task-2995248 closes odoo/odoo#101533 X-original-commit: 9f8f8f2ef88aee746819469c918b2d31ec29d031 Related: odoo/enterprise#31985 Signed-off-by: Adrien Dieudonné (adr) --- .../static/src/o_spreadsheet/o_spreadsheet.js | 2 +- addons/web/__manifest__.py | 2 -- addons/web/static/src/scss/bootstrap_overridden.scss | 3 ++- addons/web/static/src/scss/primary_variables.scss | 9 +++++++-- addons/web/static/src/views/list/list_renderer.scss | 1 + .../web_editor/static/src/scss/web_editor.variables.scss | 4 ++-- addons/web_editor/static/src/scss/wysiwyg_snippets.scss | 2 +- addons/website/static/src/scss/website.edit_mode.scss | 2 +- 8 files changed, 15 insertions(+), 10 deletions(-) diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js index 620eca2091d..20c8d91d420 100644 --- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js +++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js @@ -34280,7 +34280,7 @@ display: grid; grid-template-columns: auto 350px; * { - font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } &, *, diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index 57d02c4bbda..6a00ca88a55 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -60,7 +60,6 @@ This module provides the core of the Odoo Web Client. 'web/static/lib/select2/select2.css', 'web/static/lib/select2-bootstrap-css/select2-bootstrap.css', 'web/static/lib/daterangepicker/daterangepicker.css', - 'web/static/fonts/fonts.scss', 'web/static/src/webclient/navbar/navbar.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/mimetypes.scss', @@ -333,7 +332,6 @@ This module provides the core of the Odoo Web Client. 'web/static/lib/select2/select2.css', 'web/static/lib/select2-bootstrap-css/select2-bootstrap.css', 'web/static/lib/daterangepicker/daterangepicker.css', - 'web/static/fonts/fonts.scss', 'web/static/src/webclient/navbar/navbar.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/mimetypes.scss', diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 8a36f830f85..d684c8cf2f1 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -112,7 +112,7 @@ $caret-width: 4px !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1) !default; +$font-family-sans-serif: $o-font-family-sans-serif !default; $font-size-base: $o-font-size-base !default; $line-height-base: $o-line-height-base !default; @@ -123,6 +123,7 @@ $h3-font-size: $font-size-base * 1.3 !default; $h4-font-size: $font-size-base * 1.2 !default; $h5-font-size: $font-size-base * 1.1 !default; +$headings-font-family: $o-headings-font-family !default; $headings-font-weight: bold !default; $headings-color: $o-main-headings-color !default; diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index ebc7bf5d17e..fcf9b54a65c 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -9,12 +9,12 @@ $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 +// Global sans-serif fonts stack, defined 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; +$o-system-fonts: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default; // Colors // This is BS default @@ -57,6 +57,11 @@ $o-theme-text-colors: ( $o-opacity-disabled: .5 !default; $o-opacity-muted: .76 !default; +$o-font-family-sans-serif: o-add-unicode-support-font($o-system-fonts) !default; +$o-font-family-monospace: o-add-unicode-support-font((SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) !default; + +$o-headings-font-family: o-add-unicode-support-font(("SF Pro Display", $o-system-fonts)) !default; + $o-main-text-color: $o-gray-700 !default; $o-main-bg-color: #f0eeee !default; $o-main-color-muted: rgba($o-main-text-color, $o-opacity-muted) !default; diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss index f86b78e1c2b..b0a36ec4958 100644 --- a/addons/web/static/src/views/list/list_renderer.scss +++ b/addons/web/static/src/views/list/list_renderer.scss @@ -15,6 +15,7 @@ // We need this to be collapse because we want to add a border on the rows // for sale order/invoice lines of type section. border-collapse: collapse; + font-variant-numeric: tabular-nums; > thead, > tbody, > tfoot { > tr > :first-child { diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 50b7497b639..09e255a1fe9 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -26,7 +26,7 @@ $o-we-color-info: #6999a8 !default; $o-we-bg: $o-we-bg-light !default; $o-we-color: $o-we-fg-light !default; $o-we-font-size: 13px !default; -$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; +$o-we-font-family: $o-font-family-sans-serif !default; $o-we-accent: #01bad2 !default; $o-we-border-width: 1px !default; $o-we-border-color: $o-we-bg-light !default; @@ -167,7 +167,7 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default; $o-we-sidebar-content-field-input-max-width: 60px !default; $o-we-sidebar-content-field-input-bg: $o-we-bg-light !default; -$o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$o-we-sidebar-content-field-input-font-family: $o-font-family-monospace !default; $o-we-sidebar-content-field-input-unit-font-size: 11px !default; $o-we-sidebar-content-field-input-border-color: $o-we-accent !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 78ecff0a819..b995e7a560c 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -548,7 +548,7 @@ body.editor_enable.editor_has_snippets { we-button:not(.fa) { text-align: left; - font-family: Roboto, "Montserrat", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: $o-we-font-family; font-size: 12px; font-weight: 400; diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index df5f9b46084..1283c894046 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -244,5 +244,5 @@ body.editor_enable { .o_homepage_editor_welcome_message { padding-top: 128px; padding-bottom: 128px; - font-family: Roboto, $font-family-sans-serif; + font-family: $o-font-family-sans-serif; }