狀態顏色 token

採取 核准的元件別名,然後在最終匯出步驟之前將它們對應到懸停、活動、停用、焦點或選定狀態 token。

該頁面位於語義和元件命名之後。它用於狀態別名切換,而不是僅用於第一次無障礙傳遞或原始匯出。

其他語言 日本語 | English | 繁體中文 | 繁體中文(香港)

如何使用

  1. 在色票已經具有可信的語義和元件別名之後開始。
  2. 選擇與目標系統相符的預設,然後先查看懸停、活動、焦點、停用或選定的別名。
  3. 一旦狀態層對於設計系統文件或工程切換足夠清晰,就複製 CSS 變數或 JSON 區塊。

從元件別名移至狀態別名

此頁面填補了「元件 token 名稱看起來不錯」和「工程現在需要懸停、活動、焦點、停用或選定狀態名稱」之間的空白。

將元件別名對應到狀態別名。

光狀態別名
暗狀態別名
CSS 變數
JSON

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

使用 無障礙色票 當角色色彩還在動的時候。使用 語意顏色 token 當語義命名本身仍然是主要工作時。使用 元件顏色 token 當按鈕、卡片、輸入、導航或徽章別名仍在命名時。在這些步驟之後,當剩下的問題是在匯出之前應如何命名懸停、活動、焦點、停用或選定狀態時,請使用此頁面。使用 顏色 token 預覽, 顏色 token 審核, 和 顏色 token 差異 當真正的問題仍然是簽署或比較而不是狀態命名。

常見問題解答

這個頁面會產生什麼?

它將核准的元件別名對應到狀態級 token,例如懸停、活動、停用、焦點或選擇,然後匯出 CSS 變數和 JSON。

我什麼時候應該使用它來代替元件顏色 token?

當按鈕、卡片、輸入、導航或徽章別名仍然是主要工作時,請使用元件顏色 token。之後,當團隊現在需要在這些元件別名之上建立狀態別名時,請使用此頁面。

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

當角色等級 token 已足以進行切換時,請使用顏色 token 匯出。當最終匯出之前仍需要修復狀態別名時,請使用此頁面。

分享 URL 中儲存了什麼?

分享 URL 儲存基色、token 前綴、無障礙目標、選定狀態預設以及是否包含深色別名。