test(bezier-react): update snapshot & remove test cases related to co…

…lor token css variables
channel-io · Jan 7, 2025 · eba6a2e · eba6a2e
1 parent 7875415
commit eba6a2e
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 141 deletions.
diff --git a/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap b/packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
-  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);"
+  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);"
 />
 `;
 
@@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"
-  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);"
+  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);"
 />
 `;
 
@@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
diff --git a/...ages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/...ages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -29,7 +29,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -42,7 +42,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -55,7 +55,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -68,7 +68,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -81,7 +81,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -91,7 +91,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     <span
       class="Text typo-13 margin AvatarEllipsisCount"
       data-testid="bezier-text"
-      style="--b-text-color: var(--txt-black-dark);"
+      style="--b-text-color: var(--alpha-fg-black-dark);"
     >
       +1
     </span>
@@ -115,7 +115,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -128,7 +128,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -141,7 +141,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -154,7 +154,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -167,7 +167,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
-      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);"
+      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);"
     />
   </div>
   <div
@@ -177,14 +177,14 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     <div
       class="SmoothCornersBox AvatarEllipsisIcon"
       data-state="disabled"
-      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);"
+      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);"
     >
       <svg
         class="Icon size-xs margin"
         data-testid="bezier-icon"
         fill="none"
         height="1em"
-        style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
+        style="--b-icon-color: var(--alpha-bg-absolute-white-dark);"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
@@ -207,7 +207,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
         class="SmoothCornersBox AvatarImage"
         data-state="disabled"
         data-testid="bezier-avatar"
-        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);"
+        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);"
       />
     </div>
   </div>

diff --git a/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/bezier-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
-  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);"
+  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);"
 />
 `;
 
@@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"
-  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);"
+  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);"
 />
 `;
 
@@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-m"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;
@@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
 >
   <div
     class="Status size-l"
-    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+    style="--b-status-bg-color: var(--alpha-bg-green-normal);"
   />
 </div>
 `;