fix(bezier-tokens): fix scoping issues with common semantic tokens (#…

…1910)

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

- #1779 

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

Fix scoping issues with common semantic tokens

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

<img width="886" alt="image"
src="https://github.com/channel-io/bezier-react/assets/58209009/a159ab9e-ceca-4f18-9eff-b1a715ce0330">

> 우측 라이트 테마의 box-shadow가 다크 테마의 box-shadow(shdw 컬러) 토큰을 참조한 모습

- #1779 에서 공용 시맨틱 토큰을 줄이고자, CSS의 경우 전체 루트 선택자 하위에만 variable을 선언했습니다. 
- 예상과 다르게 실제는 가장 가까운 테마의 시맨틱 토큰을 참조하는 게 아니라, 루트에 적용된 시맨틱 토큰을 참조하는 방식으로
동작했습니다.
- #1779 이전으로 되돌려, 각 테마별 스코프에 공용 시맨틱 토큰을 (중복되더라도) 각각 선언하여 참조가 올바르게 되도록
변경했습니다.

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No (alpha)

packages/bezier-tokens/scripts/build-tokens.ts

@@ -1,5 +1,9 @@
 import { minimatch } from 'minimatch'
-import StyleDictionary, { type Platform } from 'style-dictionary'
+import StyleDictionary, {
+  type Config,
+  type Options,
+  type Platform,
+} from 'style-dictionary'
 
 import {
   customJsCjs,
@@ -32,146 +36,93 @@ function defineWebPlatform({ options, ...rest }: Platform): Platform {
   }
 }
 
-const PATH = {
-  GLOBAL: 'src/global/*.json',
-  SEMANTIC_COMMON: 'src/semantic/*.json',
-  SEMANTIC_LIGHT: 'src/semantic/light-theme/*.json',
-  SEMANTIC_DARK: 'src/semantic/dark-theme/*.json',
-} as const
+interface DefineConfigOptions {
+  source: string[]
+  reference?: string[]
+  destination: string
+  options?: Options & {
+    cssSelector: string
+  }
+}
 
-function main() {
-  TokenBuilder.extend({
-    source: [PATH.GLOBAL, PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT],
+function defineConfig({
+  source,
+  reference = [],
+  destination,
+  options,
+}: DefineConfigOptions): Config {
+  return {
+    source: [...source, ...reference],
     platforms: {
-      'web/cjs/global': defineWebPlatform({
-        buildPath: 'dist/cjs/',
-        files: [
-          {
-            destination: 'global.js',
-            format: customJsCjs.name,
-            filter: ({ filePath }) =>
-              [PATH.GLOBAL].some((src) => minimatch(filePath, src)),
-          },
-        ],
-      }),
-      'web/esm/global': defineWebPlatform({
-        buildPath: 'dist/esm/',
-        files: [
-          {
-            destination: 'global.mjs',
-            format: customJsEsm.name,
-            filter: ({ filePath }) =>
-              [PATH.GLOBAL].some((src) => minimatch(filePath, src)),
-          },
-        ],
-      }),
-      'web/css/global': defineWebPlatform({
-        buildPath: 'dist/css/',
-        files: [
-          {
-            destination: 'global.css',
-            format: 'css/variables',
-            filter: ({ filePath }) =>
-              [PATH.GLOBAL, PATH.SEMANTIC_COMMON].some((src) =>
-                minimatch(filePath, src),
-              ),
-            options: {
-              selector: ':where(:root, :host)',
-              outputReferences: true,
-            },
-          },
-        ],
-      }),
-      'web/cjs/light-theme': defineWebPlatform({
+      'web/cjs': defineWebPlatform({
         buildPath: 'dist/cjs/',
         files: [
           {
-            destination: 'lightTheme.js',
+            destination: `${destination}.js`,
             format: customJsCjs.name,
             filter: ({ filePath }) =>
-              [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT].some((src) =>
-                minimatch(filePath, src),
-              ),
+              source.some((src) => minimatch(filePath, src)),
           },
         ],
       }),
-      'web/esm/light-theme': defineWebPlatform({
+      'web/esm': defineWebPlatform({
         buildPath: 'dist/esm/',
         files: [
           {
-            destination: 'lightTheme.mjs',
+            destination: `${destination}.mjs`,
             format: customJsEsm.name,
             filter: ({ filePath }) =>
-              [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT].some((src) =>
-                minimatch(filePath, src),
-              ),
+              source.some((src) => minimatch(filePath, src)),
           },
         ],
       }),
-      'web/css/light-theme': defineWebPlatform({
+      'web/css': defineWebPlatform({
         buildPath: 'dist/css/',
         files: [
           {
-            destination: 'light-theme.css',
+            destination: `${destination}.css`,
             format: 'css/variables',
             filter: ({ filePath }) =>
-              [PATH.SEMANTIC_LIGHT].some((src) => minimatch(filePath, src)),
+              source.some((src) => minimatch(filePath, src)),
             options: {
-              selector: ':where(:root, :host), [data-bezier-theme="light"]',
+              selector: options?.cssSelector,
               outputReferences: true,
             },
           },
         ],
       }),
     },
-  }).buildAllPlatforms()
+  }
+}
 
-  TokenBuilder.extend({
-    source: [PATH.GLOBAL, PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK],
-    platforms: {
-      'web/cjs/dark-theme': defineWebPlatform({
-        buildPath: 'dist/cjs/',
-        files: [
-          {
-            destination: 'darkTheme.js',
-            format: customJsCjs.name,
-            filter: ({ filePath }) =>
-              [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK].some((src) =>
-                minimatch(filePath, src),
-              ),
-          },
-        ],
+function main() {
+  [
+    TokenBuilder.extend(
+      defineConfig({
+        source: ['src/global/*.json'],
+        destination: 'global',
+        options: { cssSelector: ':where(:root, :host)' },
       }),
-      'web/esm/dark-theme': defineWebPlatform({
-        buildPath: 'dist/esm/',
-        files: [
-          {
-            destination: 'darkTheme.mjs',
-            format: customJsEsm.name,
-            filter: ({ filePath }) =>
-              [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK].some((src) =>
-                minimatch(filePath, src),
-              ),
-          },
-        ],
+    ),
+    TokenBuilder.extend(
+      defineConfig({
+        source: ['src/semantic/*.json', 'src/semantic/light-theme/*.json'],
+        reference: ['src/global/*.json'],
+        destination: 'lightTheme',
+        options: {
+          cssSelector: ':where(:root, :host), [data-bezier-theme="light"]',
+        },
       }),
-      'web/css/dark-theme': defineWebPlatform({
-        buildPath: 'dist/css/',
-        files: [
-          {
-            destination: 'darkTheme.css',
-            format: 'css/variables',
-            filter: ({ filePath }) =>
-              [PATH.SEMANTIC_DARK].some((src) => minimatch(filePath, src)),
-            options: {
-              selector: '[data-bezier-theme="dark"]',
-              outputReferences: true,
-            },
-          },
-        ],
+    ),
+    TokenBuilder.extend(
+      defineConfig({
+        source: ['src/semantic/*.json', 'src/semantic/dark-theme/*.json'],
+        reference: ['src/global/*.json'],
+        destination: 'darkTheme',
+        options: { cssSelector: '[data-bezier-theme="dark"]' },
       }),
-    },
-  }).buildAllPlatforms()
+    ),
+  ].forEach((builder) => builder.buildAllPlatforms())
 }
 
 main()