Skip to content

Commit 09694b0

Browse files
sungik-choisungik-choi
authored
Convert legacy color tokens to alpha color tokens at runtime (#2588)
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - #2074 ## Summary <!-- Please brief explanation of the changes made --> 알파 컬러 마이그레이션 중 일부입니다. ColorProps(`color`)를 사용하는 레거시 컴포넌트에서 레거시 시맨틱 컬러를 알파 컬러로 런타임 변환합니다. ## Details <!-- Please elaborate description of the changes --> 커밋별로 확인해주세요 - 레거시 컬러를 사용하는 `ColorProps`, `elevation` 유틸 클래스에서 알파 컬러를 지원 & 대체하도록 변경합니다. - bezier-tokens에서 알파 컬러 토큰의 `color` prefix가 불필요하다고 판단하여 제거했습니다. 피그마에선 functional만 color prefix가 있고, semantic은 없는 등 레거시 시맨틱 컬러와 동일하게 굳이 추가할 필요가 없겠다고 생각하여 제거했습니다. - 컬러 토큰의 값을 직접적으로 비교하는 테스트 케이스들을 제거했습니다. css variable 변환 함수 내부 구현에 기대고 있으므로 각 컴포넌트의 단위 테스트에 포함되기에 큰 의미없다고 판단했습니다. - 스냅샷 업데이트 이 PR 이후에 아래와 같은 작업이 필요합니다. - bezier-react 내부의 레거시 컬러 CSS variable을 알파 컬러로 변경 - codemod: CSS variable 변경은 필수이고, color prop은 런타임에 변환하고 있으므로 나중에 만들어도 될 듯 - stylelint: 타입스크립트 컴파일러의 한계로 유니온 타입의 특정 속성만 deprecated 처리하기가 어려워서 레거시 토큰의 warning 발생은 린트의 힘을 빌려야할 듯 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes 알파 컬러로 변환된 일부 색상의 값이 변경됩니다. (Chromatic UI Review 확인) ## References <!-- Please list any other resources or points the reviewer should be aware of --> 초기에 토큰의 이름을 동일하게 두고, CSS layer를 `tokens`, `alpha-tokens` 두개로 분리하고 알파 토큰에 더 우선순위를 두어 맵핑이 필요한 요소 말고는 최대한 변경이 적게 동일한 CSS variable 이름을 유지하는 방향을 생각했습니다(alpha-*** 가 붙지 않음). 테스트해보니 레거시 시맨틱 네임이 CSS layer의 우선순위로 인해 팔레트(e.g. `blue-200`) 값을 참조할 때 우선순위로 인해 tokens 레이어가 아닌 alpha-tokens 레이어를 참조하는 문제가 있었습니다. 레거시 컬러를 사용했을 땐 레거시 컬러대로 잘 보여져야하는게 올바른 동작이라고 판단해서 이 방식은 기각했습니다.
1 parent b7ae519 commit 09694b0

File tree

48 files changed

+3223
-3157
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3223
-3157
lines changed

‎.changeset/old-bugs-kick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@channel.io/bezier-tokens': patch
3+
---
4+
5+
Remove 'color-' prefix from alpha color tokens

‎.changeset/shy-toes-argue.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@channel.io/bezier-react': major
3+
---
4+
5+
Migrate to alpha version color tokens

‎packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
66
class="SmoothCornersBox AvatarImage"
77
data-state="disabled"
88
data-testid="bezier-avatar"
9-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
9+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
1010
/>
1111
`;
1212

@@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
1616
class="SmoothCornersBox AvatarImage bordered"
1717
data-state="disabled"
1818
data-testid="bezier-avatar"
19-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--bg-white-high); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
19+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--alpha-bg-white-highest); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
2020
/>
2121
`;
2222

@@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
2727
>
2828
<div
2929
class="Status size-m"
30-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
30+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
3131
/>
3232
</div>
3333
`;
@@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
3939
>
4040
<div
4141
class="Status size-m"
42-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
42+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
4343
/>
4444
</div>
4545
`;
@@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
5151
>
5252
<div
5353
class="Status size-m"
54-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
54+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
5555
/>
5656
</div>
5757
`;
@@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
6363
>
6464
<div
6565
class="Status size-l"
66-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
66+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
6767
/>
6868
</div>
6969
`;
@@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
7575
>
7676
<div
7777
class="Status size-m"
78-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
78+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
7979
/>
8080
</div>
8181
`;
@@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
8787
>
8888
<div
8989
class="Status size-l"
90-
style="--b-status-bg-color: var(--bgtxt-green-normal);"
90+
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
9191
/>
9292
</div>
9393
`;

‎packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
1616
class="SmoothCornersBox AvatarImage"
1717
data-state="disabled"
1818
data-testid="bezier-avatar"
19-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
19+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
2020
/>
2121
</div>
2222
<div
@@ -29,7 +29,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
2929
class="SmoothCornersBox AvatarImage"
3030
data-state="disabled"
3131
data-testid="bezier-avatar"
32-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
32+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
3333
/>
3434
</div>
3535
<div
@@ -42,7 +42,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
4242
class="SmoothCornersBox AvatarImage"
4343
data-state="disabled"
4444
data-testid="bezier-avatar"
45-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
45+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
4646
/>
4747
</div>
4848
<div
@@ -55,7 +55,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
5555
class="SmoothCornersBox AvatarImage"
5656
data-state="disabled"
5757
data-testid="bezier-avatar"
58-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
58+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
5959
/>
6060
</div>
6161
<div
@@ -68,7 +68,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
6868
class="SmoothCornersBox AvatarImage"
6969
data-state="disabled"
7070
data-testid="bezier-avatar"
71-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
71+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
7272
/>
7373
</div>
7474
<div
@@ -81,7 +81,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
8181
class="SmoothCornersBox AvatarImage"
8282
data-state="disabled"
8383
data-testid="bezier-avatar"
84-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
84+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
8585
/>
8686
</div>
8787
<div
@@ -91,7 +91,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
9191
<span
9292
class="Text typo-13 margin AvatarEllipsisCount"
9393
data-testid="bezier-text"
94-
style="--b-text-color: var(--txt-black-dark);"
94+
style="--b-text-color: var(--alpha-fg-black-dark);"
9595
>
9696
+1
9797
</span>
@@ -115,7 +115,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
115115
class="SmoothCornersBox AvatarImage"
116116
data-state="disabled"
117117
data-testid="bezier-avatar"
118-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
118+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
119119
/>
120120
</div>
121121
<div
@@ -128,7 +128,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
128128
class="SmoothCornersBox AvatarImage"
129129
data-state="disabled"
130130
data-testid="bezier-avatar"
131-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
131+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
132132
/>
133133
</div>
134134
<div
@@ -141,7 +141,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
141141
class="SmoothCornersBox AvatarImage"
142142
data-state="disabled"
143143
data-testid="bezier-avatar"
144-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
144+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
145145
/>
146146
</div>
147147
<div
@@ -154,7 +154,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
154154
class="SmoothCornersBox AvatarImage"
155155
data-state="disabled"
156156
data-testid="bezier-avatar"
157-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
157+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
158158
/>
159159
</div>
160160
<div
@@ -167,7 +167,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
167167
class="SmoothCornersBox AvatarImage"
168168
data-state="disabled"
169169
data-testid="bezier-avatar"
170-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
170+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
171171
/>
172172
</div>
173173
<div
@@ -177,14 +177,14 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
177177
<div
178178
class="SmoothCornersBox AvatarEllipsisIcon"
179179
data-state="disabled"
180-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
180+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-absolute-black-lightest);"
181181
>
182182
<svg
183183
class="Icon size-xs margin"
184184
data-testid="bezier-icon"
185185
fill="none"
186186
height="1em"
187-
style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
187+
style="--b-icon-color: var(--alpha-bg-absolute-white-dark);"
188188
viewBox="0 0 24 24"
189189
width="1em"
190190
xmlns="http://www.w3.org/2000/svg"
@@ -207,7 +207,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
207207
class="SmoothCornersBox AvatarImage"
208208
data-state="disabled"
209209
data-testid="bezier-avatar"
210-
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
210+
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
211211
/>
212212
</div>
213213
</div>

0 commit comments

Comments
 (0)