組件顏色權杖

採取 經批准的角色或語義顏色,然後在最終切換之前將它們映射到按鈕、卡片、輸入、導航、徽章或內容區塊的具體別名中。

此頁面位於角色顏色看起來可信之後。它用於元件別名命名,而不是僅用於第一個可訪問性傳遞或原始匯出層。

其他語言 日本語 | English | 繁體中文

如何使用

  1. 在角色顏色對於產品、文件或行銷工作來說已經足夠可接受之後開始。
  2. 選擇與切換目標相符的元件預設,然後先查看按鈕、卡片、輸入、導航或徽章別名。
  3. 一旦別名層足夠清晰以進入設計系統文件或程式碼審查,即可複製 CSS 變數或 JSON 區塊。

從語意角色轉移到元件別名

此頁面填補了“角色顏色看起來不錯”和“工程需要特定的組件權杖名稱”之間的空白。

在匯出之前將角色顏色對應到具體元件別名。

光別名
深色別名
CSS 變數
JSON

如何在附近的頁面之間進行選擇

使用 無障礙色票 當角色色彩還在動的時候。使用 語意顏色權杖 當命名語義角色仍然是主要工作時。使用 顏色權杖預覽顏色權杖審核 當集合仍然需要視覺簽核或清理時。使用 狀態顏色權杖 當元件別名看起來已經可以接受時,剩下的問題是如何命名懸停、活動、焦點、停用或選定狀態。使用 顏色權杖匯出 當角色等級的捆綁包已經足夠時。當語義顏色現在需要特定的按鈕、卡片、輸入、導航、徽章或內容區塊別名時,請在這些步驟之間使用此頁面。

常見問題解答

這個頁面會產生什麼?

它將批准的角色顏色轉換為元件別名,例如按鈕、卡片、輸入、導航、引用或徽章權杖,然後匯出 CSS 變數和 JSON。

我什麼時候應該使用它而不是語義顏色權杖?

當主要任務是命名角色本身時,使用語義顏色權杖。當那些命名的顏色現在需要具體的元件別名來進行設計系統或工程切換時,請使用此頁面。

我什麼時候應該使用它而不是顏色權杖匯出?

當基於角色的權杖包已足以進行切換時,請使用顏色權杖匯出。當團隊在最終匯出之前仍需要按鈕、卡片、輸入或徽章別名時,請先使用此頁面。

共用 URL 中儲存了什麼?

共用 URL 儲存基底色、權杖前綴、對比目標、所選元件預設以及是否包含深色別名。