前言

假設今天當你打開 figma，準備開始刻前端，

發現很多按鈕都是 #9f86ff 這個顏色，

他甚至已經是你的主色了，你卻只能一次一次的複製這個色號，
哪天一不小心打成 #9f96ff，哪邊怪怪的卻完全說不出來。

UI/UX 來找你溝通還只能說我查一下這個色號是多少，
一來一回就浪費很多時間。

Design Token

根據 Material Design 中提到的

They also help designers and engineers “speak the same language”
Design Token 可以幫助設計師跟工程師 說同一種語言，省去溝通成本

那這樣，假設我們今天有個主要( primary )顏色的按鈕

那設計師跟工程師在討論的時候都可以用 primary 作為溝通橋梁，
這樣很清楚的確定兩者都是在指主要顏色的按鈕，

而這個 primary 要怎麼包裝實際的顏色靜態值，
那就各自交給兩邊的專業。

這就是 Design token 的用意。

設計實作

我們前面兩個篇章中提到了單獨使用 Tailwind 可惜的地方在於，
Tailwind 元件( TailwindPlus ) 並不是免費的

但我們可以使用另一個元件框架來做雙 UI 框架專案，
這時候統一樣式就變得非常、非常、非常重要。

光是一個 UI 框架就可能讓人找得亂七八糟，更何況是再多一個，

那我們就可以運用 Design Token 來解決這個問題

Classes of tokens

這邊並不會帶到整個 Design Token 內部的細節，
篇幅過長且也不是本篇重點。

既然我們是使用 PrimeVue，那我們就來看它是怎麼推薦我們使用的吧。

PrimeVue

這邊我們看 Design Token 的部分，
從左到右是 Primitive(原始值) -> Semantic(語意值) -> Component(組件值)

• Primitive : 不帶有任何意義單純表示一個值的容器
• Semantic : 可以用來表示特定意義的值 ex: primary.color
• Component : 表示特定組件使用什麼值 ex: button.background

而 Primitive 還會再連接到 CSS Variables，這通常是 PrimeVue 的主題設定，
這邊只要我們改成自定義的值，就可以完成唯一來源的第一步。

以下是一個簡單的範例:

/* style.css */
:root{
     --purple-500:#9f86ff;
}

// theme/index.js
import { definePreset } from '@primeuix/themes';
import Material from '@primeuix/themes/Material';

const MyPreset = definePreset(Material,{
    primitive: { /* 最底層 */
        purple: {
           500: 'var(--purple-500)'
        }
    },
    semantic: { /* 中間層 */
        primary: { 
            500: '{purple.50}'
        }
    },
    component: { /* 組件層 */
            button:{
            // 略...
                primary:{
                    background: '{primary.50}'
                }
            // 略...
    },
  }
}

上面的程式碼傳換成圖片就是長這樣，
其實沒有什麼魔法，就只是一層包一層而已。

那到這邊 PrimeVue 的設定就告一段落。

Tailwind

接下來著手進行 Tailwind 這邊的整合，

在 Vue 過氣前要學的第二十二件事 - 小孩才做選擇 ( 中 ) / PrimeVue 中，
有提到 Tailwind v4 已經沒有 tailwind.config.js，
現在都統一在 style.css 中做設置。

所以打開你剛剛已經在 PrimeVue 設定階段的那個 style.css
引入 tailwindcss

/* style.css */
+ @import 'tailwindcss';

:root{
     --purple-500:#9f86ff;
}

+ @theme {
+  --color-primary-500: var(--purple-500)
+ }

沒錯 就這麼簡單，
為什麼不用像 PrimeVue 要再綁定 component layer 呢 ?

首先原因，免費版的 Tailwind 沒有 component，
二是因為 Tailwind 中會自動綁定 namespace 到 Utility classes 上

像我們上面--color-primary-500，
可以轉換成 bg-primary-500 、text-primary-500，所以三層也不是一個固定值。

至此你已經成功達成使用 Design Token 統一雙 UI 框架的架構，

結語

說實在的這其實是我覺得最實用的篇章，
至少我自己在找資料時，關於 CSS variable 如何統一不同框架的作法是偏少，
或是我關鍵字下錯。

但這也不是我獨創的，是看社群在討論時有提到這種做法，我再自己摸索出來的，
說不定根本不是這樣做 XD，但至少這個作法是可行的，也不局限在 Vue。

因為 CSS variable 是原生 CSS3 提供的功能，是跨框架存在的觀念自然彈性很高。

那這個小篇章就到這邊結束!
敬請期待明天的另一個篇章，也是套件篇章的最後一篇。

一些小練習

1. 試著照今天的流程，把一個顏色變成 primary 並把他應用到你的套件裡吧!