From 08629ac084905e70d5cdd7a15b0fb8d7a60db252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 18 Oct 2019 12:45:25 +0200 Subject: [PATCH] Hever: migrate to use font-family mixin --- hever/sass/_config-child-theme-deep.scss | 66 +++++++++++++++++++----- hever/style-editor.css | 4 ++ hever/style-rtl.css | 4 ++ hever/style.css | 4 ++ 4 files changed, 64 insertions(+), 14 deletions(-) diff --git a/hever/sass/_config-child-theme-deep.scss b/hever/sass/_config-child-theme-deep.scss index ecaaf08e4..56eff345d 100644 --- a/hever/sass/_config-child-theme-deep.scss +++ b/hever/sass/_config-child-theme-deep.scss @@ -20,10 +20,19 @@ $config-global: ( "font": ( /* Font Family */ "family": ( - "primary": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", - "secondary": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", + "primary": ( + "fallback": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", + "css-var": '--font-headings', + ), + "secondary": ( + "fallback": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", + "css-var": '--font-base' + ), "code": "monospace, monospace", - "ui": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", + "ui": ( + "fallback": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif", + "css-var": '--font-base', + ), ), /* Font Size */ "size": ( @@ -140,7 +149,10 @@ $config-elements: ( // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "secondary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"), + ), "line-height": map-deep-get($config-global, "font", "line-height", "md"), "size": map-deep-get($config-global, "font", "size", "md"), "weight": bold, @@ -169,7 +181,10 @@ $config-button: ( ), // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "ui"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"), + ), "size": map-deep-get($config-global, "font", "size", "base"), "weight": bold, "line-height": 1, @@ -202,7 +217,10 @@ $config-heading: ( // Fonts & Typography "font": ( // Family - "family": map-deep-get($config-global, "font", "family", "primary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"), + ), // Size "size": ( "h6": map-deep-get($config-global, "font", "size", "md"), @@ -241,7 +259,10 @@ $config-heading: ( $config-list: ( // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "secondary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"), + ), ), ); @@ -251,7 +272,10 @@ $config-list: ( $config-pullquote: ( // Font "font": ( - "family": #{map-deep-get($config-heading, "font", "family")}, + "family": ( + "fallback": map-deep-get($config-heading, "font", "family", "fallback"), + "css-var": map-deep-get($config-heading, "font", "family", "css-var"), + ), ), // Border "color": ( @@ -270,7 +294,10 @@ $config-pullquote: ( $config-quote: ( // Font "font": ( - "family": #{map-deep-get($config-heading, "font", "family")}, + "family": ( + "fallback": map-deep-get($config-heading, "font", "family", "fallback"), + "css-var": map-deep-get($config-heading, "font", "family", "css-var"), + ), ), ); @@ -298,7 +325,10 @@ $config-header: ( "title": ( // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "primary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"), + ), "size": map-deep-get($config-global, "font", "size", "xxl"), "weight": bold, "line-height": 1, @@ -308,7 +338,10 @@ $config-header: ( "description": ( // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "secondary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"), + ), "size": map-deep-get($config-global, "font", "size", "xs"), ), ), @@ -323,8 +356,10 @@ $config-header: ( ), // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "secondary"), - "family-css-variable": '--font-base', + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"), + ), "size": map-deep-get($config-global, "font", "size", "base"), "weight": bold, "line-height": 1, @@ -354,7 +389,10 @@ $config-footer: ( ), // Fonts "font": ( - "family": map-deep-get($config-global, "font", "family", "primary"), + "family": ( + "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"), + "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"), + ), "size": map-deep-get($config-global, "font", "size", "sm"), "line-height": map-deep-get($config-global, "font", "line-height", "sm"), ), diff --git a/hever/style-editor.css b/hever/style-editor.css index b67cce2ca..abb8808aa 100644 --- a/hever/style-editor.css +++ b/hever/style-editor.css @@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration * Crop Text Boundry * - Sets a fixed-width on content within alignwide and alignfull blocks */ +/** + * Add font-family using CSS variables. + * It also adds the proper fallback for browsers without support. + */ /** * Child Theme Name */ diff --git a/hever/style-rtl.css b/hever/style-rtl.css index 13d19f474..0f27af129 100644 --- a/hever/style-rtl.css +++ b/hever/style-rtl.css @@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration * Crop Text Boundry * - Sets a fixed-width on content within alignwide and alignfull blocks */ +/** + * Add font-family using CSS variables. + * It also adds the proper fallback for browsers without support. + */ /** * Child Theme Deep */ diff --git a/hever/style.css b/hever/style.css index 59541418e..46ca62433 100644 --- a/hever/style.css +++ b/hever/style.css @@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration * Crop Text Boundry * - Sets a fixed-width on content within alignwide and alignfull blocks */ +/** + * Add font-family using CSS variables. + * It also adds the proper fallback for browsers without support. + */ /** * Child Theme Deep */