设计令牌

设计令牌（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 函数。