feat(theme): consumer defined root font size#2284
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the root font size configuration in the element theme by introducing a dedicated _root-font-size.scss stylesheet with helper classes and removing Bootstrap-specific root font size overrides. The review feedback correctly points out that using none as a CSS font-size value is invalid, and suggests replacing it with the standard revert keyword across variables, helper classes, and comments.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
dr-itz
force-pushed
the
feat/theme/rfs
branch
4 times, most recently
from
95d2afe to
899c325
Compare
|
@spike-rabbit I went with non-breaking as I think projects need to verify/fix their applications first. In the end it's one line to flip the default. |
spike-rabbit
left a comment
spike-rabbit
left a comment
There was a problem hiding this comment.
Wouldn't it make sense, to also mention that setting it to none is the recommended way?
Do you think we should switch the default with 52? If yes I guess it makes sense to write this in the note as well.
done |
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
spike-rabbit
force-pushed
the
feat/theme/rfs
branch
from
638bead to
70f5f0f
Compare
2 participants
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 tononeto use the browser default. The default value if nothing is provided is still at16pxso nothing will break and projects can opt-in once ready. It is recommended to set this toinitialas soon as possible. Starting with Element v52,initialwill be the default.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 defaultrfs-16: use 16pxrfs-20: use 20pxrfs-24: use 24pxAny 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
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: