Rename white to white-absolute for AlphaButton and use transparent …

…tokens (#2454)

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

- alpha functional color 에 transparent token 을 추가합니다 (e.g.
alpha-color-bg-blue-transparent). 모두 같은 배경색임에도 각각 다른 transparent token
으로 구분하는 이유는 hovered color를 쉽게 활용하기 위함입니다.
- color 속성의 white 값을 white-absolute 로 변경합니다. 
- 일부 누락되어 있었던 텍스트 & 아이콘 스타일을 추가합니다. 

## Details

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

-  생략

### Breaking change? (Yes/No)

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

## References

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

.changeset/curly-plants-obey.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-tokens': patch
+---
+
+Add transparent tokens for alpha global and functional tokens.

.changeset/nervous-dragons-tickle.md

@@ -0,0 +1,8 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Changes to `AlphaButton` and `AlphaIconButton`
+- `white` color is renamed to `white-absolute`.
+- use transparent token for background color of tertiary style.
+- add missed color style for `white-absolute`.

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: var(--alpha-color-bg-absolute-white-dark),
+      white-absolute: 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: var(--alpha-color-bg-absolute-white-lightest),
+      white-absolute: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -103,7 +103,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-tertiary) {
-    background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    @each $color in $chromatic-colors {
+      &:where(.color-#{'' + $color}) {
+        /* stylelint-disable-next-line bezier/validate-token */
+        background-color: var(--alpha-color-bg-#{$color}-transparent);
+      }
+    }
+
+    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
+      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    }
   }
 
   /* color */
@@ -118,6 +127,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-light-grey) {
       color: var(--alpha-color-fg-absolute-white-normal);
     }
+
+    &:where(.color-white-absolute) {
+      color: var(--alpha-color-fg-absolute-black-normal);
+    }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
@@ -152,7 +165,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  &:where(.variant-tertiary.color-white) {
+  &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
     & :where(.ButtonIcon) {
       color: var(--alpha-color-fg-absolute-white-light);
     }
@@ -221,7 +234,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
 
-      &:where(.color-dark-grey, .color-light-grey, .color-white) {
+      &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
         background-color: var(--bg-black-lighter);
       }
     }
@@ -238,7 +251,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-white.variant-tertiary) {
+    &:where(.color-white-absolute.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'
+  | 'white-absolute'
 
 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: var(--alpha-color-bg-absolute-white-dark),
+      white-absolute: 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: var(--alpha-color-bg-absolute-white-lightest),
+      white-absolute: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
@@ -84,7 +84,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-tertiary) {
-    background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    @each $color in $chromatic-colors {
+      &:where(.color-#{'' + $color}) {
+        /* stylelint-disable-next-line bezier/validate-token */
+        background-color: var(--alpha-color-bg-#{$color}-transparent);
+      }
+    }
+
+    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
+      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    }
   }
 
   /* color */
@@ -99,6 +108,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-light-grey) {
       color: var(--alpha-color-fg-absolute-white-normal);
     }
+
+    &:where(.color-white-absolute) {
+      color: var(--alpha-color-fg-absolute-black-normal);
+    }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
@@ -133,7 +146,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  &:where(.variant-tertiary.color-white) {
+  &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
     & :where(.ButtonIcon) {
       color: var(--alpha-color-fg-absolute-white-normal);
     }
@@ -202,7 +215,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
 
-      &:where(.color-dark-grey, .color-light-grey, .color-white) {
+      &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
         background-color: var(--bg-black-lighter);
       }
     }
@@ -219,7 +232,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-white.variant-tertiary) {
+    &:where(.color-white-absolute.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'
+  | 'white-absolute'
 
 type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
 

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

@@ -295,6 +295,10 @@
         "lightest": {
           "value": "{color.white.5}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.white.0}",
+          "type": "color"
         }
       },
       "grey": {
@@ -318,6 +322,10 @@
           "value": "{color.grey.850}",
           "type": "color"
         },
+        "transparent": {
+          "value": "{color.white.0}",
+          "type": "color"
+        },
         "grey-alpha": {
           "darkest": {
             "value": "{color.grey-alpha.700-80}",
@@ -354,6 +362,10 @@
           "value": "{color.grey.900}",
           "type": "color"
         },
+        "transparent": {
+          "value": "{color.white.0}",
+          "type": "color"
+        },
         "white-alpha": {
           "lightest": {
             "value": "{color.grey-alpha.800-80}",
@@ -366,6 +378,10 @@
           "light": {
             "value": "{color.black.20}",
             "type": "color"
+          },
+          "transparent": {
+            "value": "{color.white.0}",
+            "type": "color"
           }
         }
       },
@@ -397,6 +413,10 @@
         "shade-normal": {
           "value": "{color.shade-blue.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.blue.300-0}",
+          "type": "color"
         }
       },
       "cobalt": {
@@ -427,6 +447,10 @@
         "shade-normal": {
           "value": "{color.shade-cobalt.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.cobalt.300-0}",
+          "type": "color"
         }
       },
       "red": {
@@ -457,6 +481,10 @@
         "shade-normal": {
           "value": "{color.shade-red.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.red.300-0}",
+          "type": "color"
         }
       },
       "orange": {
@@ -487,6 +515,10 @@
         "shade-normal": {
           "value": "{color.shade-orange.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.orange.300-0}",
+          "type": "color"
         }
       },
       "green": {
@@ -517,6 +549,10 @@
         "shade-normal": {
           "value": "{color.shade-green.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.green.300-0}",
+          "type": "color"
         }
       },
       "teal": {
@@ -547,6 +583,10 @@
         "shade-normal": {
           "value": "{color.shade-teal.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.teal.300-0}",
+          "type": "color"
         }
       },
       "olive": {
@@ -577,6 +617,10 @@
         "shade-normal": {
           "value": "{color.shade-olive.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.olive.300-0}",
+          "type": "color"
         }
       },
       "yellow": {
@@ -607,6 +651,10 @@
         "shade-normal": {
           "value": "{color.shade-yellow.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.yellow.300-0}",
+          "type": "color"
         }
       },
       "pink": {
@@ -637,6 +685,10 @@
         "shade-normal": {
           "value": "{color.shade-pink.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.pink.300-0}",
+          "type": "color"
         }
       },
       "purple": {
@@ -667,6 +719,10 @@
         "shade-normal": {
           "value": "{color.shade-purple.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.purple.300-0}",
+          "type": "color"
         }
       },
       "navy": {
@@ -697,6 +753,10 @@
         "shade-normal": {
           "value": "{color.shade-navy.600}",
           "type": "color"
+        },
+        "transparent": {
+          "value": "{color.navy.300-0}",
+          "type": "color"
         }
       },
       "absolute": {