Add fill-grey-light color token and update component background colors (#2782)

<!--
  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)
- [ ] 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 -->
closes webtech-4605
<!-- Fixes #0000 -->

## Summary
누락되었던 `fill-grey-light` 토큰을 추가하고 컴포넌트들의 배경색을 수정합니다. 
<!-- Please brief explanation of the changes made -->

## Details

<!-- Please elaborate description of the changes -->
- `fill-grey-light` 토큰 추가
- TextField, Textarea focus된 상태일 때 배경색을 `fill-grey-light`로 변경
- control(radio, checkbox)들의 기본 배경색을 `fill-grey-light`로 변경
- AlphaIconButton의 tertiary dark-grey, light-grey의 호버 시 색상이 적용되지 않는 문제
확인하여 실제 존재하는 토큰으로 변경 (`color-fill-neutral-transparent-hovered`)
- AlphaFloatingButton, AlphaIconFloatingButton의 secondary 배경색을
`fill-grey`로 변경

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


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## 릴리스 노트

* **새로운 기능**
  * 디자인 시스템에 새로운 색상 토큰을 추가했습니다.

* **스타일**
* Checkbox, RadioGroup, TextField(포커스/유효성 검사 상태), TextArea(포커스 상태)의 배경색을
업데이트했습니다.
  * FloatingButton과 FloatingIconButton의 보조 변형 스타일을 개선했습니다.
  * IconButton 호버 상태에 대한 경미한 스타일 개선을 적용했습니다.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: timok1m

.changeset/proud-lions-wonder.md

@@ -0,0 +1,6 @@
+---
+'@channel.io/bezier-tokens': patch
+'@channel.io/bezier-react': patch
+---
+
+Add fill-grey-light color token and update component background colors: TextField-primary and TextArea focus states, RadioGroup and Checkbox defaults, and some buttons.

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -108,7 +108,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--color-surface-highest);
+    background-color: var(--color-fill-grey);
   }
 
   /* color */

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -89,7 +89,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.variant-secondary) {
-    background-color: var(--color-surface-highest);
+    background-color: var(--color-fill-grey);
   }
 
   /* color */

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

@@ -185,9 +185,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
           /* stylelint-disable-next-line bezier/validate-token */
-          background-color: var(
-            --color-fill-accent-#{$color}-heavier-hovered
-          );
+          background-color: var(--color-fill-accent-#{$color}-heavier-hovered);
         }
       }
 
@@ -224,15 +222,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
 
       &:where(.color-dark-grey, .color-light-grey) {
-        background-color: var(
-          --color-fill-neutral-lighter-transparent-hovered
-        );
+        background-color: var(--color-fill-neutral-transparent-hovered);
       }
 
       &:where(.color-white-absolute) {
-        background-color: var(
-          --color-fill-absolute-white-transparent-hovered
-        );
+        background-color: var(--color-fill-absolute-white-transparent-hovered);
       }
     }
 

packages/bezier-react/src/components/Checkbox/Checkbox.module.scss

@@ -18,7 +18,7 @@
 
   margin: 1px;
 
-  background-color: var(--color-surface);
+  background-color: var(--color-fill-grey-light);
   border-radius: 7px;
   box-shadow: inset 0 0 0 2px var(--color-border-neutral-heavy);
 

packages/bezier-react/src/components/RadioGroup/RadioGroup.module.scss

@@ -45,7 +45,7 @@ $inner-indicator-size: 8px;
     box-sizing: border-box;
     margin: $outer-indicator-margin;
 
-    background-color: var(--color-surface);
+    background-color: var(--color-fill-grey-light);
     border-radius: 50%;
     outline: none;
     box-shadow: inset 0 0 0 2px var(--color-border-neutral-heavy);

packages/bezier-react/src/components/TextArea/TextArea.module.scss

@@ -39,12 +39,12 @@
   }
 
   &:focus {
-    background-color: var(--color-surface);
+    background-color: var(--color-fill-grey-light);
     box-shadow: var(--state-input-active);
   }
 
   &[aria-invalid='true'] {
-    background-color: var(--color-surface);
+    background-color: var(--color-fill-grey-light);
     box-shadow: var(--state-input-error);
   }
 

packages/bezier-react/src/components/TextField/TextField.module.scss

@@ -80,7 +80,7 @@
       :has(.TextFieldInput[aria-invalid='true']),
       :has(.TextFieldInput:not(:disabled, :read-only):focus)
     ) {
-    background-color: var(--color-surface);
+    background-color: var(--color-fill-grey-light);
   }
 
   &:where(.variant-primary:has(.TextFieldInput:read-only)) {

packages/bezier-tokens/src/beta/semantic/dark-theme/color.json

@@ -317,6 +317,10 @@
         }
       },
       "grey": {
+        "light": {
+          "value": "{color.grey.900}",
+          "type": "color"
+        },
         "normal": {
           "value": "{color.grey.850}",
           "type": "color"

packages/bezier-tokens/src/beta/semantic/light-theme/color.json

@@ -317,6 +317,10 @@
         }
       },
       "grey": {
+        "light": {
+          "value": "{color.grey.25}",
+          "type": "color"
+        },
         "normal": {
           "value": "{color.grey.50}",
           "type": "color"