設計令牌

設計令牌（Design Tokens）是一種用於管理設計系統的策略。

它將設計系統中的所有可重複使用元素（例如顏色、字體、間距等）抽象為獨立的變數，以便在整個設計系統中進行統一的管理和應用。

mdui 使用全域 CSS 自訂屬性來實作設計令牌。這意味著，你只需修改 CSS 自訂屬性，就能全域修改所有 mdui 元件的樣式。同時，對於你自己開發的樣式，也推薦優先參照 CSS 自訂屬性，以確保你的樣式與 mdui 元件的樣式保持統一，此外，在修改動態配色時，你自己的樣式也能同步更新配色。

顏色

mdui 為淺色模式和深色模式分別提供了一組 CSS 自訂屬性。在淺色模式下，CSS 自訂屬性名為--mdui-color-{name}-light，其中 {name}為顏色名稱；在深色模式下則為--mdui-color-{name}-dark。

此外，mdui 還提供了一組名為 --mdui-color-{name}的 CSS 自訂屬性，該屬性在淺色模式下會參照--mdui-color-{name}-light，在深色模式下會參照 --mdui-color-{name}-dark，因此能根據目前淺色模式和深色模式自動切換顏色。

如果你需要修改部分顏色的 CSS 自訂屬性，需要同時修改 --mdui-color-{name}-light和--mdui-color-{name}-dark兩個屬性。而在讀取 CSS 自訂屬性時，直接使用--mdui-color-{name}屬性即可。

CSS 自訂屬性的屬性值為 RGB 的三個顏色使用, 分隔，下面的範例演示了顏色的 CSS 自訂屬性的用法：

/* 修改 primary 的顏色值 */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* 把 foo 元素的背景色設為 primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* 把 bar 元素的背景色設為含 0.8 不透明度的 primary */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

如果你需要建立一套全新的配色，推薦使用 setColorScheme 函式，該函式能根據你指定的一個顏色值產生一整套配色方案。

圓角

mdui 提供了 7 種不同大小的圓角。以下是如何使用這些圓角的 CSS 自訂屬性的範例：

/* 修改 extra-small 的圓角大小 */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* 把 foo 元素的圓角設為 extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

排版

mdui 提供了 15 種不同的文字樣式，包括 Display large、Display medium、Display small、Headline large、Headline medium、Headline small、Title large、Title medium、Title small、Label large、Label medium、Label small、Body large、Body medium、Body small。

下面是使用範例：

/* 修改 Body large 的文字樣式 */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* 把 foo 元素的文字樣式設為 Body large */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

狀態層不透明度

部分 mdui 元件在互動時會在其上加上一層半透明遮罩。例如 <mdui-button> 元件，在滑鼠懸停、聚焦、按下或拖曳時，都會出現半透明遮罩。你可以透過修改 CSS 自訂屬性來調整這些遮罩的不透明度。

下面是使用範例：

/* 修改狀態層不透明度 */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

抬升高度（陰影）

部分 mdui 元件具有陰影效果，以模擬元件在頁面上的抬升感。你可以透過修改 CSS 自訂屬性來調整元件的陰影效果。

下面是使用範例：

/* 修改 level1 級別的陰影 */
:root {
  --mdui-elevation-level1:
    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* 把 foo 元素的陰影設為 level1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

動畫

mdui 元件中的動畫緩動曲線和持續時間可以透過 CSS 自訂屬性進行配置。

下面是使用範例：

/* 修改 standard 的緩動曲線、及 short1 的持續時間 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* 設定 foo 元素的過渡效果使用 standard 的緩動曲線、及 short1 的持續時間 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

響應式斷點

mdui 提供了一系列的響應式斷點，這些斷點可以透過 CSS 自訂屬性進行配置。下面是使用範例：

/* 修改 sm 的斷點值 */
:root {
  --mdui-breakpoint-sm: 560px;
}

需要注意的是，這些 CSS 自訂屬性不能在 CSS 媒體查詢中使用。以下是一個錯誤的範例：

/* 錯誤用法。媒體查詢中無法使用 CSS 自訂屬性 */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

如果你需要在 JavaScript 中進行斷點判斷，可以使用 breakpoint 函式。