Skip to content

Commit edebe02

Browse files
authored
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
1 parent 24d5599 commit edebe02

21 files changed

+38
-17
lines changed

_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@forward './sass/config';
12
@forward './sass/bem';
23
@forward './sass/color';
34
@forward './sass/elevations';

sass/config/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$base-font-size: 16px !default;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
@use '../functions' as *;
44
@use '../schemas/charts' as *;
55
@use '../../utils' as *;
6-
@use '../../typography' as *;
6+
@use '../../typography/mixins' as *;
7+
@use '../../typography/functions' as *;
78

89
////
910
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

sass/themes/charts/_gauge-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

sass/themes/charts/_graph-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@use '../functions' as *;
55
@use '../schemas/charts' as *;
66
@use '../../utils' as *;
7-
@use '../../typography' as *;
7+
@use '../../typography/mixins' as *;
8+
@use '../../typography/functions' as *;
89

910
////
1011
/// @package theming

sass/themes/charts/_sparkline-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
@use '../functions' as *;
44
@use '../schemas/charts' as *;
55
@use '../../utils' as *;
6-
@use '../../typography' as *;
6+
@use '../../typography/mixins' as *;
7+
@use '../../typography/functions' as *;
78

89
////
910
/// @package theming

sass/typography/_functions.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@
44
@use 'sass:list';
55
@use 'sass:string';
66
@use './types';
7+
@use '../config' as *;
78

89
////
910
/// @package theming
1011
/// @group Typography
1112
////
1213

13-
$browser-context: 16px;
14-
1514
/// Converts pixels to relative values (em).
1615
/// @access public
1716
/// @param {number|string} $pixels - The pixel value to be converted.
@@ -21,7 +20,7 @@ $browser-context: 16px;
2120
/// margin: em(10px) em(5px);
2221
/// }
2322
/// @return {number} - Returns the pixels value converted to em.
24-
@function em($pixels, $context: $browser-context) {
23+
@function em($pixels, $context: $base-font-size) {
2524
@if math.is-unitless($pixels) {
2625
$pixels: $pixels * 1px;
2726
}
@@ -42,7 +41,7 @@ $browser-context: 16px;
4241
/// margin: rem(10px) rem(5px);
4342
/// }
4443
/// @return {number} - Returns the pixels value converted to rem.
45-
@function rem($pixels, $context: $browser-context) {
44+
@function rem($pixels, $context: $base-font-size) {
4645
@if math.is-unitless($pixels) {
4746
$pixels: $pixels * 1px;
4847
}
@@ -63,7 +62,7 @@ $browser-context: 16px;
6362
/// margin: px(3.23rem);
6463
/// }
6564
/// @return {number} - Returns the relative value converted to pixels.
66-
@function px($num, $context: $browser-context) {
65+
@function px($num, $context: $base-font-size) {
6766
@if meta.type-of($num) == 'number' {
6867
@return math.div($num, $num * 0 + 1) * 16px;
6968
}

sass/typography/_mixins.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use '../utils/meta' as *;
55
@use './types';
66
@use '../themes/mixins' as *;
7+
@use '../config' as *;
78

89
////
910
/// @package theming
@@ -126,6 +127,7 @@
126127

127128
#{$scope} {
128129
--ig-font-family: #{string.unquote($font-family)};
130+
--ig-base-font-size: #{$base-font-size};
129131

130132
@each $name, $style in map.remove($type-scale, '_meta') {
131133
@include type-style-vars($name, $style);

sass/typography/presets/_bootstrap.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* stylelint-disable max-line-length */
2+
@use '../../config' as *;
23
@use '../functions' as *;
34
@use '../../utils/map' as *;
45

sass/typography/presets/_fluent.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../../config' as *;
12
@use '../functions' as *;
23

34
////

sass/typography/presets/_indigo.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../../config' as *;
12
@use '../functions' as *;
23

34
////

sass/typography/presets/_material.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../../config' as *;
12
@use '../functions' as *;
23

34
////

test/_typography.spec.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,7 @@ $scale: type-scale(
280280

281281
@include expect() {
282282
--ig-font-family: Roboto, sans-serif;
283+
--ig-base-font-size: 16px;
283284

284285
@each $category, $styles in map.remove($scale, '_meta') {
285286
@each $rule, $value in map.remove($styles, 'font-family') {

test/e2e/theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@use '../../index' as *;
1+
@use '../../index' as * with (
2+
$base-font-size: 16px
3+
);
24
@use '../../sass/color/presets' as *;
35
@use '../../sass/typography/presets' as *;
46
@use '../../sass/typography/charts' as *;

0 commit comments

Comments
 (0)