fix: add defensive styles to prevent global CSS pollution#214
Merged
mattrothenberg merged 4 commits intomainfrom Mar 13, 2026
Merged
fix: add defensive styles to prevent global CSS pollution#214mattrothenberg merged 4 commits intomainfrom
mattrothenberg merged 4 commits intomainfrom
Conversation
commit: |
Contributor
Docs PreviewCommit: |
- Use !important to override CSS layer styles (margin, padding, border, background) - Reset pre: margin, border, border-radius, background, padding - Reset code: margin, padding, background, border
- Add keepMounted to Checkbox.Indicator to prevent DOM removal on toggle - Use data-[unchecked]:invisible to hide icon while preserving layout - Add defensive label styles (!m-0 !min-h-0 !text-base) against global CSS pollution Fixes checkbox jumping issue when used in apps with global label styles.
geoquant
approved these changes
Mar 13, 2026
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
2 participants
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.
Problem
When Kumo components are used in applications with aggressive global styles (e.g., Stratus's
cfBaseStyleslayer), certain elements get polluted:label { margin-bottom: 1rem }adds unwanted margins to all labelsbutton { background: gray }affects unstyled button wrappers (e.g., tooltip triggers)a { color: var(--text-color-primary) }can override link colors if the consuming app defines--text-color-primarydifferently (namespace collision)Solution
Add defensive Tailwind utility classes directly to components. These:
cn()(tailwind-merge) so consumer styles viaclassNamestill override themChanges
Label margins (
m-0)labelVariants()now includesm-0FieldBase.Labelgetsm-0m-0m-0m-0Button trigger resets
!asChild)bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0] inline-flex items-centerbg-transparent border-none shadow-none p-0 m-0Link color namespace fix
Changed Link from
text-primarytotext-kumo-linkto avoid collision with consuming apps that define--text-color-primarydifferently. This was causing links to appear white/invisible in Stratus.Label tooltip composition
Label's tooltip trigger now uses
<Button variant="ghost" size="xs" shape="square">withasChild, leveraging composition instead of relying on defensive resets.Docs
Added "Custom Trigger" section to Tooltip docs demonstrating that
classNamecan fully override defensive styles when not usingasChild.Testing
Related
This is an alternative approach to PR #207 (
data-kumoattributes). Both solve the same problem:data-kumo="component-name"attributes for external CSS targetingThese approaches can be used together or separately depending on the consuming app's needs.