WEEK3 – DAY1 – 奇葩的設計稿

設計稿有問題啊!連基礎樣式套用的顏色都能寫錯，害我對整體有了先入為主的概念，而導致問問題的方向判斷錯誤，chatgpt的答案我不滿意，也覺得不合理，後來想了一陣子，直接問出關鍵點，chatgpt才說我是對的?害我找了一個下午，一大堆的蠢問題。

一整個下午都在看色階與顏色，還有下方的調色盤，真的好不容易才把色彩樣式設定完成，但還有一堆工作沒做，像是BS本身沒寫的函式，到最後可能要自己補，明天教git，應該是沒時間實做了，後天，應該會把一些其他的參數設定完，星期四、五應該有機會開始切版。

遇到的問題

1. 設計稿的顏色是否與程式定義一致？
2. 為什麼設計稿中的顏色與預設的 theme-colors 有差異？
   • 如 cyan-600 顏色與設計稿的顏色不符，是否需要手動覆蓋。
3. Color Palette 與 Theme Colors 的關係是什麼？
   • Theme Colors 是主題顏色，Color Palette 是所有顏色的色階表，它們如何影響彼此？
4. 如何覆蓋預設顏色而不影響整體結構？
   • 在 theme-color-variables 中覆蓋預設顏色是否足夠，還是需要更改 color-variables？
5. 是否需要為 celadon 等新增的顏色額外定義變數？
   • 例如，celadon 是設計稿新增的，但預設並無此顏色，如何處理？

顏色映射與使用

1. 是否需要新增完整的色階表？
   • 設計稿中的顏色有多個色階，如 gray-100 到 gray-1000，是否需要完整地新增所有色階？
2. 設計稿顏色的代碼如何對應到程式中？
   • 是否需要將設計稿中的顏色完整貼入變數定義，例如 $gray-100: #FAFAFA？
3. !default 的使用規則是什麼？
   • 色階表中的變數是否需要加上 !default，影響是什麼？
4. 如何處理預設的顏色與新增的顏色？
   • 如果新增顏色如 celadon，而預設中沒有對應的色階表，如何避免影響現有結構？

程式碼結構與配置

1. 為什麼部分顏色變數定義在最前面？
   • 如 gray 的定義在其他顏色變數前面，是特殊配置還是歷史遺留？
2. 是否需要保留所有預設的顏色？
   • 如果我們僅使用 8 種顏色，是否需要保留 indigo 等未使用的顏色？
3. 是否需要將 Color Palette 拆分成單獨檔案？
   • 是否需要獨立出一個 color-palette.scss 文件以保持清晰的結構？
4. 顏色映射表與完整的色階表是否可以合併？
   • 現有的 colors-map 和單獨的色階定義是否有必要合併到一起？

按鈕測試與驗證

1. 按鈕是否正確應用顏色？
   • 測試按鈕顯示時，發現有兩個按鈕沒有正確顯示顏色，原因是什麼？
2. 按鈕樣式是否有遺漏？
   • 除了顏色外，按鈕的邊框、背景色、hover 狀態是否需要檢查？
3. 如果主題顏色修改，按鈕的樣式是否同步更新？
   • 確保修改主題顏色時，所有按鈕的樣式都正確更新。

其他疑問

1. 設計稿中的顏色是否完全覆蓋程式預設？
   • 如果設計稿中缺少某些色階或顏色，是否需要額外補充？
2. 設計稿的顏色是否需要與程式碼一一對應？
   • 設計稿中是否有多餘或未使用的顏色？