feat: Add configurable font size and weight for metric values (fixes #12300)Theming metric font size weight#12344
Closed
DHANUSHRAJA22 wants to merge 4 commits intostreamlit:developfrom
Closed
Conversation
…metric value font size and weight fields to CustomThemeConfigUpdate NewSession.proto
…ont config parsing functions to theme_util.pyUpdate theme_util.py - Added _parse_metric_font_config() function to validate metric font size and weight parameters - Added parse_theme_config() function to process theme configuration from dictionaries - Added apply_theme_config_from_toml() function to handle config.toml theme parsing - These functions support the new 'metric_value_font_size' and 'metric_value_font_weight' parameters - Includes comprehensive validation and error handling with proper comments for maintainability - Enables passing these new config parameters from config.toml or Python theme dicts into CustomThemeConfig
…onThemeAdd metricValueFontSize and metricValueFontWeight to EmotionTheme interfaceAdd metricValueFontSize and metricValueFontWeight to EmotionTheme interfaceUpdate types.ts - Added optional metricValueFontSize property (number) for customizing metric value font size in pixels - Added optional metricValueFontWeight property (number) for customizing metric value font weight (100-900) - Added comprehensive comments for clarity and future maintainability - These properties extend the EmotionTheme interface to support metric component styling customization
…dMetricValueText to use theme font propertiesUpdate styled-components.ts - Updated StyledMetricValueText to use theme.metricValueFontSize with fallback to theme.fontSizes.threeXL - Updated StyledMetricValueText to use theme.metricValueFontWeight with fallback to theme.fontWeights.bold - Added inline comments for better maintainability - Enables customizable metric value font styling through theme configuration
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) |
lukasmasuch
added
change:feature
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements configurable font size and weight for metric values to address issue #12300. Users can now customize the appearance of metric components through theme configuration settings.
- Adds
metric_value_font_sizeandmetric_value_font_weighttheme configuration options - Implements validation for CSS font property values (size > 0, weight 100-900)
- Updates frontend components to use theme-specific styling with backward compatibility
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| proto/streamlit/proto/NewSession.proto | Added metric_value_font_size and metric_value_font_weight fields to CustomThemeConfig |
| lib/streamlit/runtime/theme_util.py | Added validation and parsing functions for metric font configuration |
| frontend/lib/src/theme/types.ts | Extended EmotionTheme interface with optional metric font properties |
| frontend/lib/src/components/elements/Metric/styled-components.ts | Updated metric value styling to use theme properties with fallbacks |
Comments suppressed due to low confidence (1)
Comment on lines
+95
to
+98
|
|
||
| This function validates the font size and weight values for metric components | ||
| to ensure they fall within acceptable ranges for CSS font properties. | ||
|
|
There was a problem hiding this comment.
The docstring should follow the existing pattern in the file with proper spacing. There should be no blank line before 'Args:' section.
Suggested change
| This function validates the font size and weight values for metric components | |
| to ensure they fall within acceptable ranges for CSS font properties. | |
| This function validates the font size and weight values for metric components | |
| to ensure they fall within acceptable ranges for CSS font properties. |
Contributor
|
Hey, thanks for the contribution! Can you convert the config option names to camel case, e.g. |
jrieke
added
the
status:waiting-for-requested-changes
Collaborator
|
Going to close this because it seems to be stale. Feel free to reopen in case you want to continue working on this! |
3 tasks
sfc-gh-lwilby
added a commit
that referenced
this pull request
Feb 9, 2026
…#13550) ## feat: add metricValueFontSize and metricValueFontWeight theme options Add `metricValueFontSize` and `metricValueFontWeight` theme configuration options to customize st.metric value text appearance. ### Example configuration ```toml [theme] metricValueFontSize = "3rem" # or "48px" or "48" metricValueFontWeight = 300 ``` ### Supported formats for `metricValueFontSize` | Format | Example | Result | |--------|---------|--------| | rem | `"3rem"` | 3rem (48px with 16px base) | | px | `"48px"` | 48px | | number (string) | `"48"` | 48px | Invalid values (negative, zero, invalid format) log a warning and fallback to the default (2.25rem ≈ 36px). ## Screenshots ### Before (Default) `metricValueFontSize` not set → uses default (2.25rem ≈ 36px) <img width="2072" height="3516" alt="metric_before" src="https://github.com/user-attachments/assets/b8c3097f-adf6-4e31-8b23-27777425c0ce" /> ### Supported formats Shows valid values (`"48px"`, `"3rem"`, `"36"`, `"24px"`) and invalid values that fallback to default (`"-10px"`, `"0"`, `"aaa"`). <img width="2072" height="3516" alt="pr_screenshot_metricValueFontSize" src="https://github.com/user-attachments/assets/076ea5a8-5147-429f-a749-87cdcb5eb64c" /> ## GitHub Issue Link (if applicable) Closes #12300 ## Testing Plan - [x] Unit Tests (JS and Python) - Theme utils tests for font size/weight validation (17 test cases for metricValueFontSize) - Metric component tests for styling - Python config tests - Proto compatibility tests - [x] E2E test (`e2e_playwright/theming/theme_metric_value_style_test.py`) - Verifies rem string parsing (3rem → 48px) - Verifies CSS properties are applied correctly - Snapshot test for visual verification - [x] Manual testing with custom config.toml ### Notes - **rem/px support**: `metricValueFontSize` accepts string values with rem/px units (like `headingFontSizes`). - **Backward compatibility**: When options are not configured, the default behavior is unchanged. No breaking changes. - **Previous PR**: This is a fresh implementation addressing feedback from #12344 (using camelCase for config options). - **Documentation**: Based on other PRs, docs updates are typically handled in separate issues. Happy to take on a docs issue if assigned. --------- Co-authored-by: Laura Wilby <[email protected]>
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
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.
Summary
This PR implements customizable font size and weight for metric values, addressing issue #12300. Users can now configure
metric_value_font_sizeandmetric_value_font_weightin their theme settings to customize the appearance of metric components.Changes Made
Backend Changes
metric_value_font_sizeandmetric_value_font_weightfields to theCustomThemeConfigprotobuftheme_util.pyto ensure proper CSS font values (size > 0, weight 100-900)Frontend Changes
EmotionThemeinterface with new optional properties:metricValueFontSizeandmetricValueFontWeightStyledMetricValueTextcomponent to use theme-specific font properties with fallback to defaults??)Testing
Configuration Example
Users can now add this to their config.toml:
Closes #12300## Describe your changes
GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.