Skip to content

Commit 899c325

Browse files
dr-itzdr-itz
committed
feat(theme): consumer defined root font size
NOTE: The default root font size is now configurable when loading the Element theme. When loading the theme, the default value can be passed as `$element-root-font-size`. Set to `none` to use the browser default. The default value if nothing is provided is still at `16px` so nothing will break and projects can opt-in once ready. ```scss @use '@siemens/element-theme/src/theme' with ( $element-root-font-size: initial ); ``` Furthermore, a series of helper classes are provided that can be applied to the `<html>` tag to change the root font size: - `rfs-none`: use the browser default, regardless of the configured default - `rfs-16`: use 16px - `rfs-20`: use 20px - `rfs-24`: use 24px Any other value can be used by setting the CSS variable at the `<html>` tag or using a `:root {}` CSS block: `--element-root-font-size`. Closes #2166
1 parent 98fa995 commit 899c325

6 files changed

Lines changed: 38 additions & 22 deletions

File tree

‎projects/element-theme/src/styles/_root-font-size.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
$element-root-font-size: initial !default;
2+
3+
html {
4+
// defines the default with low specificity, i.e. easy overridable with :root
5+
--element-root-font-size: #{$element-root-font-size};
6+
}
7+
8+
:root {
9+
font-size: var(--element-root-font-size);
10+
}
11+
12+
// pre-defined root font size helper classes that can be applied to <html> tag
13+
14+
// use browser-defined root font size
15+
.rfs-none {
16+
--element-root-font-size: initial;
17+
}
18+
19+
.rfs-16 {
20+
--element-root-font-size: 16px;
21+
}
22+
23+
.rfs-20 {
24+
--element-root-font-size: 20px;
25+
}
26+
27+
.rfs-24 {
28+
--element-root-font-size: 24px;
29+
}

‎projects/element-theme/src/styles/bootstrap/_reboot.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@
2626
// null by default, thus nothing is generated.
2727

2828
:root {
29-
@if variables.$font-size-root != null {
30-
font-size: var(--#{variables.$variable-prefix}root-font-size);
31-
}
32-
3329
@if variables.$enable-smooth-scroll {
3430
@media (prefers-reduced-motion: no-preference) {
3531
scroll-behavior: smooth;

‎projects/element-theme/src/styles/bootstrap/_root.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
99
--#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};
1010
--#{variables.$variable-prefix}font-monospace: #{meta.inspect(variables.$font-family-monospace)};
11-
12-
// Root and body
13-
@if variables.$font-size-root != null {
14-
--#{variables.$variable-prefix}root-font-size: #{variables.$font-size-root};
15-
}
1611
--#{variables.$variable-prefix}body-font-family: #{meta.inspect(variables.$font-family-base)};
1712
--#{variables.$variable-prefix}body-font-size: #{variables.$font-size-base};
1813
--#{variables.$variable-prefix}body-font-weight: #{variables.$font-weight-base};

‎projects/element-theme/src/styles/bootstrap/_variables.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,9 +160,7 @@ $font-family-monospace:
160160
$font-family-base: $font-family-sans-serif !default;
161161
$font-family-code: $font-family-monospace !default;
162162

163-
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
164163
// $font-size-base effects the font size of the body text
165-
$font-size-root: null !default;
166164
$font-size-base: typography.$si-font-size-body !default;
167165
$font-size-lg: typography.$si-font-size-body-lg !default;
168166
$font-size-sm: typography.$si-font-size-caption !default;

‎projects/element-theme/src/theme.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
$element-theme-default: null !default;
22
$element-themes: null !default;
33

4+
// Defines the default root font size. Change to 'none' at some point.
5+
$element-root-font-size: 16px !default;
6+
47
$_theme-default: 'element';
58
$_themes: () !default;
69

10+
@use 'styles/root-font-size' with (
11+
$element-root-font-size: $element-root-font-size
12+
);
13+
714
// Load Bootstrap
815
@use 'styles/bootstrap';
916

@@ -42,10 +49,3 @@ html,
4249
body {
4350
block-size: 100%;
4451
}
45-
46-
// Define what 1rem actually means. Everything here assumes 16px.
47-
// When the whole thing is properly done, carefully mixing (r)em and px values,
48-
// this can be removed to allow the user's setting.
49-
html {
50-
font-size: 16px;
51-
}

‎src/styles.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,9 @@
2020
@use '@simpl/brand/dist/element-theme-siemens-brand-dark' as brand-dark;
2121

2222
@use '@siemens/element-theme/src/theme' with (
23+
// $element-root-font-size: initial,
2324
$element-theme-default: 'siemens-brand',
24-
$element-themes: (
25-
'siemens-brand',
26-
'element'
27-
)
25+
$element-themes: ('siemens-brand', 'element')
2826
);
2927

3028
@use '@siemens/element-icons/dist/style/siemens-element-icons';

0 commit comments

Comments
 (0)