Replace hardcoded small font sizes with theme variable in SCSS files #3635
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
…font-sizes We now have an internal CSS variable called `--limel-theme-default-small-font-size`, that can unify all font sizes that are `0.8125rem` (`13px`) across all components.
…font-sizes Using `--limel-theme-default-small-font-size`, we now unify all font sizes that are `0.8125rem` (`13px`), in various components.
Kiarokh
added
the
maintenance
📝 WalkthroughWalkthroughA new CSS custom property Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (10)
🧰 Additional context used📓 Path-based instructions (2)src/components/**/*.scss📄 CodeRabbit Inference Engine (.cursor/rules/css-class-names-in-components-using-shadow-dom.mdc)
Files:
**/*.{tsx,scss}⚙️ CodeRabbit Configuration File
Files:
🧠 Learnings (14)📓 Common learnings📚 Learning: in lime-elements, css custom properties follow a specific naming convention: 1. internal use variabl...Applied to files:
📚 Learning: in the lime-elements repository, css custom properties prefixed with `--lime-` are considered intern...Applied to files:
📚 Learning: in lime-elements, css custom properties like `--limel-theme-surface-background-color` are applied at...Applied to files:
📚 Learning: examples in lime elements use shadow dom (with `shadow: true` in the component decorator) for style ...Applied to files:
📚 Learning: for lime-elements, example files should import types from the public api using '@limetech/lime-eleme...Applied to files:
📚 Learning: in lime elements components that use shadow dom (with `shadow: true` in the component decorator), ke...Applied to files:
📚 Learning: lime elements generally does not support unreasonably old browsers, so modern css properties like `s...Applied to files:
📚 Learning: the lime-elements codebase must use relative imports (even with multiple "../") rather than alias im...Applied to files:
📚 Learning: in limel-chip-set, the onclick handler should be placed on the content div (
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new CSS variable --limel-theme-default-small-font-size to standardize the 13px font size across all components in the Lime Elements library.
- Defines a new CSS variable for small font sizes (13px/0.8125rem)
- Replaces hardcoded font-size values with the new CSS variable across multiple components
- Ensures consistent theming for small text elements throughout the component library
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/global/core-styles.scss | Defines the new CSS variable for small font size |
| src/components/snackbar/snackbar.scss | Updates snackbar text to use the new variable |
| src/components/slider/slider.scss | Updates slider value indicator text to use the new variable |
| src/components/menu-list/menu-list.scss | Updates menu item font size to use the new variable |
| src/components/markdown/partial-styles/_pre-code.scss | Updates code element font size to use the new variable |
| src/components/list/list.scss | Updates secondary text and other small text elements to use the new variable |
| src/components/header/header.scss | Updates subheading font size to use the new variable |
| src/components/form/row/row.scss | Updates description text font size to use the new variable |
| src/components/dynamic-label/dynamic-label.scss | Updates label font size to use the new variable |
| src/components/button-group/button-group.scss | Updates chip text font size to use the new variable |
coderabbitai
bot
changed the title
LucyChyzhova
approved these changes
Aug 6, 2025
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3635/ |
Collaborator
|
🎉 This PR is included in version 38.21.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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.
We now have an internal CSS variable called
--limel-theme-default-small-font-size, that can unify all font sizes thatare
0.8125rem(13px) across all components.Summary by CodeRabbit
Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: