Add absolute transparent tokens, modify AlphaButton bg color (#2460)

<!--
  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 -->

<!-- Fixes #0000 -->
- 없음
## Summary

<!-- Please brief explanation of the changes made -->

- bg/absolute/white,black/transparent 토큰을 추가합니다. 
- bg/white/white-alpha/transparent 다크테마값을 white/0에서 black/0로 수정합니다. 
- Alpha(Icon)Button 의 tertiary 배경색을 수정합니다. 

## Details

<!-- Please elaborate description of the changes -->
- 생략  

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No
## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

-
[스레드(internal)](https://desk.channel.io/root/groups/v2BezierRelease-364583/6715ed6a8c9efb2632fe)
-
[피그마(internal)](https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=0-1&t=GPYPLyyOBg3Oml6g-1)

Author: yangwooseong

.changeset/olive-flowers-pump.md

@@ -0,0 +1,7 @@
+---
+'@channel.io/bezier-tokens': patch
+---
+
+Changes in alpha functional tokens
+ - fix value of dark theme `bg-white-white-alpha-transparent` to `black-0`.
+ - add `bg-absolute-white,black-transparent`.

.changeset/sour-planets-burn.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Modify background color of tertiary `AlphaButton` and `AlphaIconButton`.

packages/bezier-react/src/components/AlphaButton/Button.module.scss

@@ -110,8 +110,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
-      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    &:where(.color-dark-grey, .color-light-grey) {
+      background-color: var(--alpha-color-bg-black-transparent);
+    }
+
+    &:where(.color-white-absolute) {
+      background-color: var(--alpha-color-bg-absolute-white-transparent);
     }
   }
 

packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss

@@ -91,8 +91,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
-      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    &:where(.color-dark-grey, .color-light-grey) {
+      background-color: var(--alpha-color-bg-black-transparent);
+    }
+
+    &:where(.color-white-absolute) {
+      background-color: var(--alpha-color-bg-absolute-white-transparent);
     }
   }
 

packages/bezier-tokens/src/alpha/functional/dark-theme/color.json

@@ -380,7 +380,7 @@
             "type": "color"
           },
           "transparent": {
-            "value": "{color.white.0}",
+            "value": "{color.black.0}",
             "type": "color"
           }
         }
@@ -780,6 +780,10 @@
           "lightest": {
             "value": "{color.black.20}",
             "type": "color"
+          },
+          "transparent": {
+            "value": "{color.black.0}",
+            "type": "color"
           }
         },
         "white": {
@@ -802,6 +806,10 @@
           "lightest": {
             "value": "{color.white.20}",
             "type": "color"
+          },
+          "transparent": {
+            "value": "{color.white.0}",
+            "type": "color"
           }
         }
       }

packages/bezier-tokens/src/alpha/functional/light-theme/color.json

@@ -780,6 +780,10 @@
           "lightest": {
             "value": "{color.black.20}",
             "type": "color"
+          },
+          "transparent": {
+            "value": "{color.black.0}",
+            "type": "color"
           }
         },
         "white": {
@@ -802,6 +806,10 @@
           "lightest": {
             "value": "{color.white.20}",
             "type": "color"
+          },
+          "transparent": {
+            "value": "{color.white.0}",
+            "type": "color"
           }
         }
       }