forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[dapp-kit] provide locally scoped CSS resets for our UI components (M…
…ystenLabs#14041) ## Description This PR adds locally scoped CSS resets to our `dapp-kit` library which aims to be as minimal / unobtrusive as possible. There really isn't a great industry solution to this as a web application can always override library styling. To explain the options I considered here: 1. ❌ Not shipping any CSS reset and leaving it purely to the consumer (not everyone uses CSS resets) 2. ❌ Using a globally scoped CSS reset (this is bad as library styling should never affect broader application styling) 3. [✅] Using locally scoped CSS resets to only reset the styling in our library with sensible defaults - [❌] Creating a `reset.css.ts` file with reset styles that have to be manually applied to every element - [❌] Doing the above but creating a generic `Box` type component to apply resets (I really don't like this abstraction) - [✅] Marking entry points to our UI components using a data attribute and then applying global styles [Rainbow-kit](https://github.com/rainbow-me/rainbowkit/blob/252f02e8c024e2f92734653e8ec5fd2180434b07/site/components/Box/Box.tsx#L31) goes with the `Box` approach, [ConnectKit](https://github.com/family/connectkit/blob/825f95e8f6bd9fae16803a63efaa14b87137a793/packages/connectkit/src/styles/index.ts#L199) goes with a similar solution to what I decided on here, and [Radix UI themes](https://github.com/radix-ui/themes/blob/58209d3b8b3cbebd6bcbf33eb0df30fa6fe5b3ab/packages/radix-ui-themes/src/styles/reset.css#L11) also goes with a similar solution. I guess I sort of combined the latter two approaches 🤔 With preflight disabled: <img width="990" alt="image" src="https://github.com/MystenLabs/sui/assets/7453188/8632c0fc-2046-43aa-a882-c743a86e765f"> ## Test Plan - Tested in Sui Explorer with the `preflight: false` setting which disables our CSS reset - CI --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes
- Loading branch information
1 parent
c253ca8
commit 261b567
Showing
8 changed files
with
162 additions
and
70 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { globalStyle } from '@vanilla-extract/css'; | ||
|
|
||
| import { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js'; | ||
|
|
||
| globalStyle(createScopedSelector('*'), { | ||
| boxSizing: 'border-box', | ||
| }); | ||
|
|
||
| globalStyle(createScopedSelector('button'), { | ||
| appearance: 'none', | ||
| backgroundColor: 'transparent', | ||
| fontSize: 'inherit', | ||
| fontFamily: 'inherit', | ||
| lineHeight: 'inherit', | ||
| letterSpacing: 'inherit', | ||
| outline: 'none', | ||
| color: 'inherit', | ||
| border: 0, | ||
| padding: 0, | ||
| margin: 0, | ||
| }); | ||
|
|
||
| globalStyle(createScopedSelector('a'), { | ||
| textDecoration: 'none', | ||
| color: 'inherit', | ||
| outline: 'none', | ||
| }); | ||
|
|
||
| globalStyle(createScopedSelector('ol, ul'), { | ||
| listStyle: 'none', | ||
| margin: 0, | ||
| padding: 0, | ||
| }); | ||
|
|
||
| globalStyle(createScopedSelector('h1, h2, h3, h4, h5, h6'), { | ||
| fontSize: 'inherit', | ||
| fontWeight: 'inherit', | ||
| margin: 0, | ||
| }); | ||
|
|
||
| function createScopedSelector(selector: string) { | ||
| return `${styleDataAttributeSelector}:where(${selector}), ${styleDataAttributeSelector} :where(${selector})`; | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { Slot } from '@radix-ui/react-slot'; | ||
| import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react'; | ||
| import { forwardRef } from 'react'; | ||
|
|
||
| import { styleDataAttribute } from '../../constants/styleDataAttribute.js'; | ||
|
|
||
| import './StyleMarker.css.js'; | ||
|
|
||
| type StyleMarker = { | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| export const StyleMarker = forwardRef< | ||
| ElementRef<typeof Slot>, | ||
| ComponentPropsWithoutRef<typeof Slot> | ||
| >(({ children }, forwardedRef) => ( | ||
| <Slot ref={forwardedRef} {...styleDataAttribute}> | ||
| {children} | ||
| </Slot> | ||
| )); | ||
| StyleMarker.displayName = 'StyleMarker'; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| export const styleDataAttributeName = 'data-dapp-kit'; | ||
|
|
||
| export const styleDataAttributeSelector = `[${styleDataAttributeName}]`; | ||
|
|
||
| export const styleDataAttribute = { [styleDataAttributeName]: '' }; |