Add codeFontSize theming config option
#11508
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
Contributor
✅ PR preview is ready!
|
Contributor
📈 Frontend coverage change detectedThe frontend unit test (vitest) coverage has increased by 0.0100%
✅ Coverage change is within normal range. |
2ccc76c to
10e4bce
Compare
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new theming configuration option, codeFontSize, to control the font size of code blocks and inline code across various components. Key changes include:
- Adding the codeFontSize field in backend proto definitions and configuration options.
- Updating tests, theme utilities, and styled-components to apply the new codeFontSize.
- Enhancing the parsing and calculation functions to convert codeFontSize values for inline code scaling.
Reviewed Changes
Copilot reviewed 44 out of 44 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| proto/streamlit/proto/NewSession.proto | Added new optional string field for code_font_size and updated next ID. |
| lib/tests/streamlit/runtime/app_session_test.py | Updated test mocks to include the new codeFontSize option. |
| lib/tests/streamlit/proto_compatibility_test.py | Included code_font_size in proto compatibility tests. |
| lib/tests/streamlit/config_test.py | Added tests for theme.codeFontSize and theme.sidebar.codeFontSize options. |
| lib/streamlit/config.py | Registers codeFontSize via _create_theme_options with a description. |
| frontend/lib/src/theme/utils.ts | Added parseFontSize, calculateInlineCodeFontSize, and integration in createEmotionTheme. |
| frontend/lib/src/theme/primitives/typography.ts | Set default typography values for codeFontSize and inlineCodeFontSize. |
| Various styled-components and e2e tests | Updated components and tests to use codeFontSize for code styling. |
Comments suppressed due to low confidence (1)
lib/streamlit/config.py:1177
- [nitpick] The description for codeFontSize states that the value is in pixels, yet the default typography value uses rem. It would be helpful to clarify whether codeFontSize is expected as a pixel or rem value to avoid unit inconsistencies.
_create_theme_options("codeFontSize", categories=["theme", CustomThemeCategories.SIDEBAR],
lukasmasuch
reviewed
Jun 7, 2025
lukasmasuch
approved these changes
Jun 7, 2025
Collaborator
lukasmasuch
left a comment
There was a problem hiding this comment.
LGTM 👍 but wondering if we also should also make the inline code size 15% smaller as it's done in the default theme (0.875rem vs 0.75em). But probably depends if it still looks good by using the same calculated value
1cdc336 to
4a13dfb
Compare
Collaborator
Author
|
Per product, keeping the inline code as |
sfc-gh-mbarnes
approved these changes
Jun 17, 2025
lukasmasuch
pushed a commit
that referenced
this pull request
Jun 17, 2025
Adding a config option `codeFontSize` for both `[theme]` & `[theme.sidebar]` that controls the font size for code - displayed with `st.code`, `st.json`, `st.help`, and inline. * **Note: inline code will continue to be set to default of `"0.75em"`** and not adjusted based on the provided `codeFontSize` * The `st.help` member's table styling was also updated in this PR (default from `theme.fontSizes.twoSm` - `12px` to `theme.fontSizes.sm` -`14px`) thus why all `st.help` snaps updated
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
Adding a config option
codeFontSizefor both[theme]&[theme.sidebar]that controls the font size for code - displayed withst.code,st.json,st.help, and inline."0.75em"and not adjusted based on the providedcodeFontSizest.helpmember's table styling was also updated in this PR (default fromtheme.fontSizes.twoSm-12pxtotheme.fontSizes.sm-14px) thus why allst.helpsnaps updatedTesting Plan