refactor(css): separate theme and UI scoping attributes #30
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
Split CSS concerns between two data attributes to fix utility class leakage and enable easier CSS variable overrides. ## Architecture - `[data-wallet-theme]`: Provider-level wrapper for CSS variable definitions. Variables inherit to all descendants. - `[data-wallet-ui]`: Component-level attribute for utility class scoping. Applied to buttons and portal wrappers. ## Key Changes **Provider and Components** - WalletUIProvider wrapper uses `data-wallet-theme` for variables - Button components add `data-wallet-ui` directly on the element - Portal wrappers use both attributes for full functionality **CSS Structure** - Variable definitions now use `[data-wallet-theme]` selectors - Button resets use same-element selector `[data-wallet-ui][data-wallet-button]` - Portal content uses descendant selector `[data-wallet-ui] [role="dialog"]` **Post-process Script** - Generate dual selector patterns for utility classes: - `[data-wallet-ui].class` for elements with attribute directly - `[data-wallet-ui] .class` for descendants ## Benefits - Utility classes no longer leak to consumer app elements - CSS variables can be overridden via ancestor selectors - Consumers target `[data-wallet-theme]` for variable overrides
Contributor
|
🎉 This PR is included in version 1.0.0-beta.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Contributor
|
🎉 This PR is included in version 1.0.0 🎉 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
1 participant
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
Refactors the CSS scoping architecture to use two separate data attributes, fixing utility class leakage and enabling easier CSS variable overrides.
Problem: The previous architecture used
[data-wallet-ui]on the provider wrapper for both CSS variable definitions and utility class scoping. This caused:.hidden, etc.) to leak to consumer app elements inside the providerSolution: Split concerns between two attributes:
[data-wallet-theme]— Provider-level wrapper for CSS variable definitions (inherits to descendants)[data-wallet-ui]— Component-level attribute for utility class scoping (on buttons and portal wrappers)Key Changes
Provider and Components
WalletUIProviderwrapper usesdata-wallet-themefor CSS variablesConnectWalletButton,ConnectedWalletButton) adddata-wallet-uidirectlyConnectWalletMenu,ConnectedWalletMenu) use both attributesCSS Structure
[data-wallet-theme]selectors[data-wallet-ui][data-wallet-button][data-wallet-ui] [role="dialog"]Post-process Script
[data-wallet-ui].class— elements with attribute directly (buttons)[data-wallet-ui] .class— descendants (portal content)Documentation
[data-wallet-theme]Test Plan
pnpm test)pnpm lint)pnpm build)pnpm e2e:docker)