feat(theme): consumer defined root font size

dr-itz · spike-rabbit · commit 656712ef92b1 · 2026-07-08T11:37:54.000Z
NOTE: The default root font size is now configurable when loading the Element theme. Pass the value via `$element-root-font-size`, or set it to `none` to use the browser default. If nothing is provided, the default remains `16px`, so nothing breaks and projects can opt in when ready. We recommend switching to `none / initial` as soon as possible. Starting with Element v52, `initial` will be the default. ```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
diff --git a/projects/element-theme/src/styles/_root-font-size.scss b/projects/element-theme/src/styles/_root-font-size.scss
@@ -0,0 +1,29 @@
+$element-root-font-size: initial !default;
+
+html {
+  // defines the default with low specificity, i.e. easy overridable with :root
+  --element-root-font-size: #{$element-root-font-size};
+}
+
+:root {
+  font-size: var(--element-root-font-size);
+}
+
+// pre-defined root font size helper classes that can be applied to <html> tag
+
+// use browser-defined root font size
+.rfs-none {
+  --element-root-font-size: initial;
+}
+
+.rfs-16 {
+  --element-root-font-size: 16px;
+}
+
+.rfs-20 {
+  --element-root-font-size: 20px;
+}
+
+.rfs-24 {
+  --element-root-font-size: 24px;
+}
diff --git a/projects/element-theme/src/styles/bootstrap/_reboot.scss b/projects/element-theme/src/styles/bootstrap/_reboot.scss
@@ -26,10 +26,6 @@
 // null by default, thus nothing is generated.
 
 :root {
-  @if variables.$font-size-root != null {
-    font-size: var(--#{variables.$variable-prefix}root-font-size);
-  }
-
   @if variables.$enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
diff --git a/projects/element-theme/src/styles/bootstrap/_root.scss b/projects/element-theme/src/styles/bootstrap/_root.scss
@@ -8,11 +8,6 @@
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};
   --#{variables.$variable-prefix}font-monospace: #{meta.inspect(variables.$font-family-monospace)};
-
-  // Root and body
-  @if variables.$font-size-root != null {
-    --#{variables.$variable-prefix}root-font-size: #{variables.$font-size-root};
-  }
   --#{variables.$variable-prefix}body-font-family: #{meta.inspect(variables.$font-family-base)};
   --#{variables.$variable-prefix}body-font-size: #{variables.$font-size-base};
   --#{variables.$variable-prefix}body-font-weight: #{variables.$font-weight-base};
diff --git a/projects/element-theme/src/styles/bootstrap/_variables.scss b/projects/element-theme/src/styles/bootstrap/_variables.scss
@@ -160,9 +160,7 @@ $font-family-monospace:
 $font-family-base: $font-family-sans-serif !default;
 $font-family-code: $font-family-monospace !default;
 
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text
-$font-size-root: null !default;
 $font-size-base: typography.$si-font-size-body !default;
 $font-size-lg: typography.$si-font-size-body-lg !default;
 $font-size-sm: typography.$si-font-size-caption !default;
diff --git a/projects/element-theme/src/theme.scss b/projects/element-theme/src/theme.scss
@@ -1,9 +1,16 @@
 $element-theme-default: null !default;
 $element-themes: null !default;
 
+// Defines the default root font size. Change to 'none' at some point.
+$element-root-font-size: 16px !default;
+
 $_theme-default: 'element';
 $_themes: () !default;
 
+@use 'styles/root-font-size' with (
+  $element-root-font-size: $element-root-font-size
+);
+
 // Load Bootstrap
 @use 'styles/bootstrap';
 
@@ -42,10 +49,3 @@ html,
 body {
   block-size: 100%;
 }
-
-// Define what 1rem actually means. Everything here assumes 16px.
-// When the whole thing is properly done, carefully mixing (r)em and px values,
-// this can be removed to allow the user's setting.
-html {
-  font-size: 16px;
-}
diff --git a/src/styles.scss b/src/styles.scss
@@ -20,11 +20,9 @@
 @use '@simpl/brand/dist/element-theme-siemens-brand-dark' as brand-dark;
 
 @use '@siemens/element-theme/src/theme' with (
+  // $element-root-font-size: initial,
   $element-theme-default: 'siemens-brand',
-  $element-themes: (
-    'siemens-brand',
-    'element'
-  )
+  $element-themes: ('siemens-brand', 'element')
 );
 
 @use '@siemens/element-icons/dist/style/siemens-element-icons';
