Hever: migrate to use font-family mixin
This commit is contained in:
Andrés
parent
4f1f707a3e
commit
08629ac084
4 changed files with 64 additions and 14 deletions
|
|
@ -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"),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue