fix(typography): allow configuring of browser context (#120)

* fix(typography): allow configuring of browser context

* spec(typography): include base-font-size

* refactor(config): move base-font-size config

* refactor(themes): change how $base-font-size is configured

Author: simeonoff

_index.scss

@@ -1,3 +1,4 @@
+@forward './sass/config';
 @forward './sass/bem';
 @forward './sass/color';
 @forward './sass/elevations';

sass/config/_index.scss

@@ -0,0 +1 @@
+$base-font-size: 16px !default;

sass/themes/charts/_category-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_data-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_doughnut-chart-theme.scss

@@ -3,7 +3,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_financial-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_funnel-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_gauge-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_geo-map-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_graph-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_pie-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_shape-chart-theme.scss

@@ -4,7 +4,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/themes/charts/_sparkline-theme.scss

@@ -3,7 +3,8 @@
 @use '../functions' as *;
 @use '../schemas/charts' as *;
 @use '../../utils' as *;
-@use '../../typography' as *;
+@use '../../typography/mixins' as *;
+@use '../../typography/functions' as *;
 
 ////
 /// @package theming

sass/typography/_functions.scss

@@ -4,14 +4,13 @@
 @use 'sass:list';
 @use 'sass:string';
 @use './types';
+@use '../config' as *;
 
 ////
 /// @package theming
 /// @group Typography
 ////
 
-$browser-context: 16px;
-
 /// Converts pixels to relative values (em).
 /// @access public
 /// @param {number|string} $pixels - The pixel value to be converted.
@@ -21,7 +20,7 @@ $browser-context: 16px;
 ///     margin: em(10px) em(5px);
 ///   }
 /// @return {number} - Returns the pixels value converted to em.
-@function em($pixels, $context: $browser-context) {
+@function em($pixels, $context: $base-font-size) {
     @if math.is-unitless($pixels) {
         $pixels: $pixels * 1px;
     }
@@ -42,7 +41,7 @@ $browser-context: 16px;
 ///     margin: rem(10px) rem(5px);
 ///   }
 /// @return {number} - Returns the pixels value converted to rem.
-@function rem($pixels, $context: $browser-context) {
+@function rem($pixels, $context: $base-font-size) {
     @if math.is-unitless($pixels) {
         $pixels: $pixels * 1px;
     }
@@ -63,7 +62,7 @@ $browser-context: 16px;
 ///     margin: px(3.23rem);
 ///   }
 /// @return {number} - Returns the relative value converted to pixels.
-@function px($num, $context: $browser-context) {
+@function px($num, $context: $base-font-size) {
     @if meta.type-of($num) == 'number' {
         @return math.div($num, $num * 0 + 1) * 16px;
     }

sass/typography/_mixins.scss

@@ -4,6 +4,7 @@
 @use '../utils/meta' as *;
 @use './types';
 @use '../themes/mixins' as *;
+@use '../config' as *;
 
 ////
 /// @package theming
@@ -126,6 +127,7 @@
 
     #{$scope} {
         --ig-font-family: #{string.unquote($font-family)};
+        --ig-base-font-size: #{$base-font-size};
 
         @each $name, $style in map.remove($type-scale, '_meta') {
             @include type-style-vars($name, $style);

sass/typography/presets/_bootstrap.scss

@@ -1,4 +1,5 @@
 /* stylelint-disable max-line-length */
+@use '../../config' as *;
 @use '../functions' as *;
 @use '../../utils/map' as *;
 

sass/typography/presets/_fluent.scss

@@ -1,3 +1,4 @@
+@use '../../config' as *;
 @use '../functions' as *;
 
 ////

sass/typography/presets/_indigo.scss

@@ -1,3 +1,4 @@
+@use '../../config' as *;
 @use '../functions' as *;
 
 ////

sass/typography/presets/_material.scss

@@ -1,3 +1,4 @@
+@use '../../config' as *;
 @use '../functions' as *;
 
 ////

test/_typography.spec.scss

@@ -280,6 +280,7 @@ $scale: type-scale(
 
                 @include expect() {
                     --ig-font-family: Roboto, sans-serif;
+                    --ig-base-font-size: 16px;
 
                     @each $category, $styles in map.remove($scale, '_meta') {
                         @each $rule, $value in map.remove($styles, 'font-family') {

test/e2e/theme.scss

@@ -1,4 +1,6 @@
-@use '../../index' as *;
+@use '../../index' as * with (
+    $base-font-size: 16px
+);
 @use '../../sass/color/presets' as *;
 @use '../../sass/typography/presets' as *;
 @use '../../sass/typography/charts' as *;