一開始規劃這套 UI Kit 時，技術清單裡其實有 Tailwind CSS + SCSS

• React Component 使用 Tailwind CSS
• Legacy Web 使用 CDN 引入 CSS
• CDN 的 CSS 可以用 SCSS 維護

但做到 Day 5 的 Design Tokens，再回頭看這個架構，突然發現一件事：
如果 React Button 寫一份 Style，CDN Button 又用 SCSS 寫一份，那不就又變成兩套 Button 了？
這好像跟一開始做 UI Kit 的目的完全相反。

真正的問題不是「能不能一起用」，而是：
這個 Project 現在有什麼問題，需要 SCSS 來解決？

目前似乎沒有。

我不想維護兩套 Component

套 UI Kit 最後希望同時服務兩種環境：

                   UI Kit
                     │
            ┌────────┴────────┐
            ▼                 ▼
          React              CDN
            │                 │
            ▼                 ▼
       New Systems        Legacy Web
                          mod_plsql

但這裡的 React 和 CDN，應該只是不同的使用方式。
而不是：
❌ React Button
└─ Tailwind 維護一份

❌ CDN Button
└─ SCSS 再維護一份
否則今天改了 Button 的 Focus Style：
React Button → 改好了
CDN Button → 忘記改

比較符合這套 UI Kit 目標的方向應該是：

                 UI Kit Source
                       │
              Design Tokens
                       │
              Components / Rules
                       │
                     Build
               ┌───────┴───────┐
               ▼               ▼
             React           CDN Assets
                              CSS / JS
               │               │
               ▼               ▼
          New Systems      Legacy Web

也就是：

Single Source, Multiple Outputs

React 與 Legacy Web 可以有不同的使用方式，但不應該因此維護兩套獨立的 Component Style

那 CDN 要怎麼產生？
這也是目前還沒有答案的地方。
例如 React 可以這樣使用：

<Button variant="outline">
  取消
</Button>

但 Legacy Web 最後可能希望使用：

<button class="ui-btn ui-btn--outline">
  取消
</button>

現在 button.tsx 裡的 Variant 是透過 CVA 定義：
variant: {
default: "...",
outline: "...",
destructive: "...",
}
那麼未來要怎麼從同一套 Component Rules，產生 Legacy Web 可以使用的 CSS API？

        同一套 Component Rules
                  │
        ┌─────────┴─────────┐
        ▼                   ▼
React Component          CDN CSS
variant="outline"    .ui-btn--outline

這會留到後面實際處理 CDN Build 時再研究
現在先不為還沒發生的問題設計一大套架構。

Design Tokens 仍然只有一套
Day 5 建立的 Design Tokens 也不會因為輸出 CDN 就再做一次
仍然是 React 與 Legacy Web 共用的規則。

所以，還需要 SCSS 嗎？

目前的答案是：先不要

不是因為 Tailwind 比 SCSS 好，也不是兩者不能一起使用。
而是目前已經有：
CSS Variables → Design Tokens
Tailwind → Component Styling
CVA → Variants
Vite → Build Tool

暫時沒有一個明確的問題非得由 SCSS 解決。
如果之後做到 CDN Build，真的出現適合 SCSS 處理的需求，再加入也不遲。
工具應該拿來解決問題，而不是因為一開始寫在技術清單裡，就一定得用上。

Day 6 Done

今天沒有安裝新的 Package，也沒有新增 Component

反而刪掉了一個原本預設好的想法：
Tailwind → React
SCSS → Legacy

目前更希望做到的是：

          One UI Kit
              │
         Single Source
              │
       ┌──────┴──────┐
       ▼             ▼
     React          CDN
       │             │
       ▼             ▼
 New Systems     Legacy Web

React 和 CDN 是不同的 Distribution Target，而不是兩套 UI Kit。
至於同一套 Component 到底要怎麼輸出成 CDN 可以使用的 CSS / JS，先留到真正做到 Build 的時候再解決。

架構先想清楚，接下來終於可以回頭處理那顆從 Day 4 就一直沒有亂動的 Button 了~

Day 7: 第一個元件 Button：從 shadcn/ui 變成自己的 Button