プリセット

Tanrei は既定のシステム tanrei と、3 つのプリセット m3-like、m3-expressive-like、cupertino を同梱しています。プリセットは、自分で書くものと同じデザインシステムのレイヤーです。Tanrei のコンポーネントに別のデザインシステムの値を与え、どのコンポーネントと、どの variant の値を持つかを決めます。そのまま使うことも、自分のデザインシステムの出発点にすることもできます。

Web でプリセットを使う

トークンを読み込み、次にプリセットのスタイルシートを読み込みます。プリセットのトークンは、その属性を付けた範囲に効きます。
```
import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
```
属性を <html> か、ページの任意の部分に付けます。1 つのページに複数のシステムを置けます。
```
<html data-tanrei-system="m3-like">
```
@tanrei/web の代わりに、プリセットのエントリーでコンポーネントを登録します。エントリーが登録するのは、そのプリセットが持つコンポーネントだけです。
```
import '@tanrei/web/m3-like';
```
プリセットのフォントを、トークンが使うファミリー名のまま読み込みます（下に一覧があります）。Tanrei はフォントファイルを同梱しません。フォントを参照してください。

プリセットが持つものは、そのコンポーネントマニフェスト @tanrei/web/systems/<id>.components.json に載っており、エディターやコーディングエージェントはこれを読みます。このサイトでは、コンポーネントの一覧の横か、サイドバーの上端でデザインシステムを選ぶと、一覧はそのシステムが持つものだけを表示します。

プリセット

各プリセットの以下の情報は、そのレイヤー、解決済みのトークン、コンポーネントマニフェストから読み込んでいます。

m3-like

スタイルシート: @tanrei/web/systems/m3-like.css
属性: data-tanrei-system="m3-like"
コンポーネント: 96 個。@tanrei/web/m3-like が登録します
本文: Roboto, system-ui, sans-serif — Roboto (@fontsource-variable/roboto) を読み込みます
コード: Roboto Mono, ui-monospace, monospace — Roboto Mono (@fontsource-variable/roboto-mono) を読み込みます
アイコン: Material Symbols Outlined — Material Symbols Outlined (@fontsource-variable/material-symbols-outlined) を読み込みます
既定のシステムにないもの: FAB menu, Segmented button
このシステムにないもの: なし
既定のシステムにないバリアント: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
外しているバリアント: filled: Navigation bar · tonal: Tabs

生成元 tokens/systems/m3-like.system.json, tokens/generated/m3-like/components.json

m3-expressive-like

スタイルシート: @tanrei/web/systems/m3-expressive-like.css
属性: data-tanrei-system="m3-expressive-like"
コンポーネント: 96 個。@tanrei/web/m3-expressive-like が登録します
本文: Roboto, system-ui, sans-serif — Roboto (@fontsource-variable/roboto) を読み込みます
コード: Roboto Mono, ui-monospace, monospace — Roboto Mono (@fontsource-variable/roboto-mono) を読み込みます
アイコン: Material Symbols Outlined — Material Symbols Outlined (@fontsource-variable/material-symbols-outlined) を読み込みます
既定のシステムにないもの: FAB menu, Segmented button
このシステムにないもの: なし
既定のシステムにないバリアント: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
外しているバリアント: filled: Navigation bar · tonal: Tabs

生成元 tokens/systems/m3-expressive-like.system.json, tokens/generated/m3-expressive-like/components.json

cupertino

スタイルシート: @tanrei/web/systems/cupertino.css
属性: data-tanrei-system="cupertino"
コンポーネント: 95 個。@tanrei/web/cupertino が登録します
本文: -apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif — Inter (@fontsource-variable/inter) を読み込みます
コード: ui-monospace, SF Mono, Menlo, monospace — プラットフォームのフォントを使います
アイコン: Material Symbols Rounded — Material Symbols Rounded (@fontsource-variable/material-symbols-rounded) を読み込みます
既定のシステムにないもの: Segmented button
このシステムにないもの: FAB menu（代わりに Main action button, Bottom sheet）
既定のシステムにないバリアント: filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input
外しているバリアント: filled: Navigation bar

生成元 tokens/systems/cupertino.system.json, tokens/generated/cupertino/components.json

プリセットのコンポーネントを 1 つ、自分のシステムに取り込む

プリセットにあって既定のシステムにないコンポーネント（m3-like の FAB メニューや、セグメントボタン）も、既定のシステムの上に作るプロダクトから使えます。tanrei を継ぐレイヤーを書き、そこにコンポーネントを取り込み、コンポーネント自身のモジュールを読み込みます。するとそのコンポーネントは、自分のシステムのトークンで描かれます。トークンが自分のシステムのトークンを参照するので、こうして取り込んだ FAB メニューはプロダクトのほかの部分と同じ見た目になり、プリセットの値は何も持ち込まれません。

コンポーネントを自分のレイヤー（design/acme.system.json。自分のデザインシステムを作るを参照）に取り込みます。プリセットのレイヤーにあるコンポーネントは、そのレイヤーを from で指定します。既定のシステムが外しているコンポーネントは、名前だけを書きます。
```
{
  "id": "acme",
  "extends": "tanrei",
  "components": {
    "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
  }
}
```
ビルドします。npx tanrei build が、取り込んだコンポーネントのトークンを自分の値で解決したシステムのスタイルシートと、それらを載せたコンポーネントマニフェストを書き出します。

自分のスタイルシートを読み込み、自分の属性を付け、既定のシステムのコンポーネントと取り込んだコンポーネントを登録します。

import '@tanrei/web/tokens.css';
import './styles/acme.css';
import '@tanrei/web';
import '@tanrei/web/components/fab-menu';
import '@tanrei/web/components/segmented-button';

<html data-tanrei-system="acme">

コンポーネントを、それを持たないシステムの下で使っても描かれますが、開発ビルドのコンソールにそのことが表示されます。各コンポーネントのページには、どのシステムがそれを持ち、ほかのシステムが代わりに何を使うかが書いてあります。

ソースコードと Issue（GitHub）