Change white-absolute to white in AlphaButton and `AlphaIconBut…

…ton` color (#2278)

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

- None

## Summary

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

- white (absolute) 처럼 괄호에 있는 것은 개발단에서 생략하는 것으로 합의한 것을 반영합니다.

## Details

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

- 생략

### Breaking change? (Yes/No)

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

- Yes

## References

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

- [스레드
(internal)](https://desk.channel.io/root/threads/groups/v2_BezierRelease-364583/666957ba4acbecf950a6/666957ba4acbecf950a6)

.changeset/giant-kangaroos-ring.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Change `white-absolute` to `white` in `AlphaButton` and `AlphaIconButton` color.

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

@@ -71,7 +71,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-normal),
       dark-grey: var(--alpha-color-bg-grey-darkest),
       light-grey: var(--alpha-color-bg-black-dark),
-      white-absolute: var(--alpha-color-bg-absolute-white-dark),
+      white: var(--alpha-color-bg-absolute-white-dark),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -92,7 +92,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-lightest),
       dark-grey: var(--alpha-color-bg-black-lighter),
       light-grey: var(--alpha-color-bg-black-lighter),
-      white-absolute: var(--alpha-color-bg-absolute-white-lightest),
+      white: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -152,7 +152,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  &:where(.variant-tertiary.color-white-absolute) {
+  &:where(.variant-tertiary.color-white) {
     & :where(.ButtonIcon) {
       color: var(--alpha-color-fg-absolute-white-light);
     }
@@ -218,7 +218,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
 
-      &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
+      &:where(.color-dark-grey, .color-light-grey, .color-white) {
         background-color: var(--bg-black-lighter);
       }
     }
@@ -235,7 +235,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-white-absolute.variant-tertiary) {
+    &:where(.color-white.variant-tertiary) {
       & :where(.ButtonIcon) {
         color: var(--alpha-color-fg-absolute-white-normal);
       }

packages/bezier-react/src/components/AlphaButton/Button.types.ts

@@ -21,7 +21,7 @@ export type ButtonColor =
   | 'purple'
   | 'dark-grey'
   | 'light-grey'
-  | 'white-absolute'
+  | 'white'
 
 export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
 

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

@@ -52,7 +52,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-normal),
       dark-grey: var(--alpha-color-bg-grey-darkest),
       light-grey: var(--alpha-color-bg-black-dark),
-      white-absolute: var(--alpha-color-bg-absolute-white-dark),
+      white: var(--alpha-color-bg-absolute-white-dark),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -73,7 +73,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-lightest),
       dark-grey: var(--alpha-color-bg-black-lighter),
       light-grey: var(--alpha-color-bg-black-lighter),
-      white-absolute: var(--alpha-color-bg-absolute-white-lightest),
+      white: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -133,7 +133,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  &:where(.variant-tertiary.color-white-absolute) {
+  &:where(.variant-tertiary.color-white) {
     & :where(.ButtonIcon) {
       color: var(--alpha-color-fg-absolute-white-normal);
     }
@@ -199,7 +199,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
 
-      &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
+      &:where(.color-dark-grey, .color-light-grey, .color-white) {
         background-color: var(--bg-black-lighter);
       }
     }
@@ -216,7 +216,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-white-absolute.variant-tertiary) {
+    &:where(.color-white.variant-tertiary) {
       & :where(.ButtonIcon) {
         color: var(--alpha-color-fg-absolute-white-normal);
       }

packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts

@@ -21,7 +21,7 @@ type IconButtonColor =
   | 'purple'
   | 'dark-grey'
   | 'light-grey'
-  | 'white-absolute'
+  | 'white'
 
 type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'