From 9b4e1394580095a00721d1f53ee7e5260c167c61 Mon Sep 17 00:00:00 2001
From: "Yang Wooseong (Andrew)" <dntjddid1@gmail.com>
Date: Mon, 2 Dec 2024 17:30:57 +0900
Subject: [PATCH] Rename `color-fg-grey-grey-alpha-*` tokens (#2515)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

- `color-fg(bg)-grey-grey-alpha-*` 토큰을 `color-fg(bg)-grey-alpha-*` 으로
변경합니다.
- 누락된 `color-fg-grey-darkest` 토큰을 추가합니다.

## Details

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

- 생략

### Breaking change? (Yes/No)

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

- Yes, bezier-stylelint 버전 업과 동시에 적용되어야 합니다.

## References

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

-
[스레드](https://desk.channel.io/root/groups/v2BezierRelease-364583/6735b3e076a4b1c18516)
---
 .changeset/odd-bags-unite.md                  |   8 ++
 .../alpha/functional/dark-theme/color.json    | 100 +++++++++---------
 .../alpha/functional/light-theme/color.json   | 100 +++++++++---------
 3 files changed, 112 insertions(+), 96 deletions(-)
 create mode 100644 .changeset/odd-bags-unite.md

diff --git a/.changeset/odd-bags-unite.md b/.changeset/odd-bags-unite.md
new file mode 100644
index 000000000..6721e9879
--- /dev/null
+++ b/.changeset/odd-bags-unite.md
@@ -0,0 +1,8 @@
+---
+'@channel.io/bezier-tokens': patch
+---
+
+Changes in alpha color tokens.
+- `color-fg(bg)-grey-grey-alpha-*` are renamed to `color-fg(bg)-grey-alpha-*`.
+- `color-fg(bg)-white-white-alpha-*` are renamed to `color-fg(bg)-white-alpha-*`.
+- add `color-fg-grey-darkest` token.
diff --git a/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json b/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
index dea05cd46..aa77ec1cc 100644
--- a/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
+++ b/packages/bezier-tokens/src/alpha/functional/dark-theme/color.json
@@ -234,6 +234,10 @@
         }
       },
       "grey": {
+        "darkest": {
+          "value": "{color.white.100}",
+          "type": "color"
+        },
         "dark": {
           "value": "{color.grey.500}",
           "type": "color"
@@ -253,20 +257,20 @@
         "lightest": {
           "value": "{color.grey.850}",
           "type": "color"
+        }
+      },
+      "grey-alpha": {
+        "darker": {
+          "value": "{color.grey-alpha.800-90}",
+          "type": "color"
         },
-        "grey-alpha": {
-          "darker": {
-            "value": "{color.grey-alpha.800-90}",
-            "type": "color"
-          },
-          "dark": {
-            "value": "{color.grey-alpha.800-80}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.grey-alpha.850-80}",
-            "type": "color"
-          }
+        "dark": {
+          "value": "{color.grey-alpha.800-80}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.grey-alpha.850-80}",
+          "type": "color"
         }
       }
     },
@@ -326,29 +330,29 @@
           "value": "{color.white.0}",
           "type": "color"
         },
-        "grey-alpha": {
-          "darkest": {
-            "value": "{color.grey-alpha.700-80}",
-            "type": "color"
-          },
-          "darker": {
-            "value": "{color.grey-alpha.800-90}",
-            "type": "color"
-          },
-          "dark": {
-            "value": "{color.grey-alpha.800-80}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.grey-alpha.850-80}",
-            "type": "color"
-          }
-        },
         "normal": {
           "value": "{color.grey.600}",
           "type": "color"
         }
       },
+      "grey-alpha": {
+        "darkest": {
+          "value": "{color.grey-alpha.700-80}",
+          "type": "color"
+        },
+        "darker": {
+          "value": "{color.grey-alpha.800-90}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.grey-alpha.800-80}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.grey-alpha.850-80}",
+          "type": "color"
+        }
+      },
       "white": {
         "highest": {
           "value": "{color.grey.700}",
@@ -365,24 +369,24 @@
         "transparent": {
           "value": "{color.white.0}",
           "type": "color"
+        }
+      },
+      "white-alpha": {
+        "lightest": {
+          "value": "{color.grey-alpha.800-80}",
+          "type": "color"
         },
-        "white-alpha": {
-          "lightest": {
-            "value": "{color.grey-alpha.800-80}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.black.60}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.black.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.black.0}",
-            "type": "color"
-          }
+        "lighter": {
+          "value": "{color.black.60}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.black.20}",
+          "type": "color"
+        },
+        "transparent": {
+          "value": "{color.black.0}",
+          "type": "color"
         }
       },
       "blue": {
diff --git a/packages/bezier-tokens/src/alpha/functional/light-theme/color.json b/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
index dc063dc45..1df4d8d39 100644
--- a/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
+++ b/packages/bezier-tokens/src/alpha/functional/light-theme/color.json
@@ -234,6 +234,10 @@
         }
       },
       "grey": {
+        "darkest": {
+          "value": "{color.grey.900}",
+          "type": "color"
+        },
         "dark": {
           "value": "{color.grey.500}",
           "type": "color"
@@ -253,20 +257,20 @@
         "lightest": {
           "value": "{color.grey.50}",
           "type": "color"
+        }
+      },
+      "grey-alpha": {
+        "darker": {
+          "value": "{color.grey-alpha.200-80}",
+          "type": "color"
         },
-        "grey-alpha": {
-          "darker": {
-            "value": "{color.grey-alpha.200-80}",
-            "type": "color"
-          },
-          "dark": {
-            "value": "{color.grey-alpha.100-80}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.grey-alpha.50-80}",
-            "type": "color"
-          }
+        "dark": {
+          "value": "{color.grey-alpha.100-80}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.grey-alpha.50-80}",
+          "type": "color"
         }
       }
     },
@@ -326,29 +330,29 @@
           "value": "{color.grey.900-0}",
           "type": "color"
         },
-        "grey-alpha": {
-          "darkest": {
-            "value": "{color.grey-alpha.200-80}",
-            "type": "color"
-          },
-          "darker": {
-            "value": "{color.grey-alpha.100-90}",
-            "type": "color"
-          },
-          "dark": {
-            "value": "{color.grey-alpha.100-80}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.grey-alpha.50-80}",
-            "type": "color"
-          }
-        },
         "normal": {
           "value": "{color.grey.400}",
           "type": "color"
         }
       },
+      "grey-alpha": {
+        "darkest": {
+          "value": "{color.grey-alpha.200-80}",
+          "type": "color"
+        },
+        "darker": {
+          "value": "{color.grey-alpha.100-90}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.grey-alpha.100-80}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.grey-alpha.50-80}",
+          "type": "color"
+        }
+      },
       "white": {
         "highest": {
           "value": "{color.white.100}",
@@ -365,24 +369,24 @@
         "transparent": {
           "value": "{color.white.0}",
           "type": "color"
+        }
+      },
+      "white-alpha": {
+        "lightest": {
+          "value": "{color.white.90}",
+          "type": "color"
         },
-        "white-alpha": {
-          "lightest": {
-            "value": "{color.white.90}",
-            "type": "color"
-          },
-          "lighter": {
-            "value": "{color.white.60}",
-            "type": "color"
-          },
-          "light": {
-            "value": "{color.white.20}",
-            "type": "color"
-          },
-          "transparent": {
-            "value": "{color.white.0}",
-            "type": "color"
-          }
+        "lighter": {
+          "value": "{color.white.60}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.white.20}",
+          "type": "color"
+        },
+        "transparent": {
+          "value": "{color.white.0}",
+          "type": "color"
         }
       },
       "blue": {