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 の 3 つの色の値をカンマ , で区切ったものです。以下の例は色の 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 関数の使用をお勧めします。この関数は、指定された 1 つの色の値から一連のカラースキームを生成します。

角丸

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 関数を使用できます。