# Adeo Mozaic デザインシステム

## Adeo Mozaic デザインシステム インターフェースプレビュー

数量を入力またはステップ操作し、その上限・下限を試して、ローカルの資材リストを準備します。

## Adeo Mozaic デザインシステム デザインリファレンス

Mozaic SCSS/BEMドキュメント: 基盤とインストールのページはv1.85.0を示し、数量のコードリファレンスはv1.76.0を示しています。これらは文書化されたリファレンス契約であり、すべてのページが単一の最新パッケージバージョンに追随しているという主張ではありません。

### マジックユニットのリファレンス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mu025 | 4px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu050 | 8px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu075 | 12px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu100 | 16px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu125 | 20px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu150 | 24px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu175 | 28px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu200 | 32px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu250 | 40px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu300 | 48px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu350 | 56px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu400 | 64px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu500 | 80px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu600 | 96px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
| mu700 | 112px | Remベースのスペーシングリファレンス。ピクセル換算は、文書化された16pxのベースを前提としています。 |
### ボタンの寸法

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Small height | 32px / 2mu | コンパクトなコントロール。 |
| Medium height | 48px / 3mu | モバイルの数量構成に使用します。 |
| Large height | 56px / 3.5mu | 強調度の高い大きなアクション。 |
| Text + icon, small / medium | 24px icon | アイコンとラベルのバランスを保ちます。 |
| Text + icon, large | 32px icon | ラージボタン。 |
| Icon-only, medium / large | 32px icon | スクエアコントロール。 |
### 本文のヒエラルキー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mt-body-m | 16px regular | デフォルトの本文。 |
| Small body | 14px | 複数行本文の推奨最小サイズ。 |
| Large body | 18px | 段落の推奨最大サイズ。 |
### 数量コンポーネントの構造

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mc-quantity-selector | Wrapper | 2つのコントロールと入力フィールドを保持します。 |
| mc-quantity-selector__input | Input element | mc-text-inputも適用します。 |
| mc-quantity-selector__button-left | Decrement element | mc-button--square と --bordered も同様です。 |
| mc-quantity-selector__button-right | Increment element | mc-button--square と --bordered も同様です。 |
| Small composition | mc-text-input--s + mc-button--s | グループ全体をまとめて変更します。 |
| is-disabled | Visual state class | 実際の動作には、ネイティブの disabled 属性を併用します。 |
### ビルドとカスタマイズ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | 必須プラグインの一覧。 |
| Parser | postcss-scss | SCSS ソースを確認します。 |
| Production environment | MOZAIC_ENV=production | 本番環境向けのプラグイン設定を有効にします。 |
### スペーシングユーティリティ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mu-mb-100 | 16px bottom margin | コンポーネント間の余白。 |
| mu-pl-050 | 8px left padding | ユーティリティのスペーシング。 |
| make-space-util(m, t, 075) | Top margin at mu075 | 指定したユーティリティを生成します。 |
## Adeo Mozaic デザインシステム 完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Adeo Mozaic デザインシステム の SCSS コンポーネントと、カスタマイズ可能なリテール向けブランド設定

### ADEO は組織名であり、デフォルトのプリセットではありません

> Mozaic では、ソーススタイルとデザイントークンは、フォントや SVG アイコンとは別に提供されます。デフォルトのトークンテーマは Leroy Merlin で、ADEO は明示的に指定するプリセットです。そのため、緑色の初期プレビューが表示されても、それは ADEO の公式コーポレートカラーであることを示すものではありません。

ADEO プリセットを使うには、preset: "adeo" と tokens.localTokensExportPath を指定した mozaic.config.js を作成し、npx mozaic-tokens-build を実行します。カスタムトークンディレクトリは、無関係な値を置き換えるのではなく、対応する JSON パスをディープマージします。テーマ生成とコンポーネントのスタイリングは、別々のビルド工程です。

- styles は SCSS コンポーネントを提供します。

- tokens はソース形式と生成済みのトークン形式を提供します。

- web-fonts と icons は、それぞれ個別のアセットを提供します。

- css-dev-tools は、ビルドと lint の設定を提供します。

関連する仕様を確認する

## Adeo Mozaic デザインシステム：マジックユニットを活用し、テキストコンテナの幅を固定しない

### 16px を基準とする rem ベースの設計

Mozaic のスペーシングスケールは、小さい値では 4 分の 1 単位、中間の値では 2 分の 1 単位、大きい値では 1 単位刻みです。参照表では、独自のスペーシング体系を作らなくても、実際に定義されている名称付きの値を確認できます。

プランナーでは、間隔に 16px、内側の余白に 24px、コントロールの高さに 48px を使用しています。これにより、周囲のカードやテキストが伸縮できる柔軟性を保ちながら、コンポーネント全体に一貫したリズムを持たせています。翻訳や拡大でラベルが切れてしまう固定高のコンテンツボックスより、コントロールに最小高を設定するほうが適切です。

関連する仕様を確認する

## Adeo Mozaic デザインシステム：密度の高いコントロールの横でも本文を読みやすく保つ

### 実用的な本文サイズ 3 種類

本文の基本サイズは、標準ウェイトの 16px です。複数行のテキストには 14px 以上、段落には 18px 以下が推奨されています。このプレビューではシステムフォントにフォールバックしており、Mozaic の web-fonts パッケージが含まれているかのような見せ方はしていません。

大きめのタイトルでプロジェクト名を示し、本文で計算内容を説明し、小さめの補足文で例の対象範囲を示します。素材の値は、棚のイラストに描き込むのではなく、実際のテキストとして表示します。

関連する仕様を確認する

## Adeo Mozaic デザインシステム：連携して動く 3 つの要素を 1 つのコンポーネントに

### ラッパーはアプリケーションの状態を管理しません

数量セレクターは、正方形で枠線付きの減少ボタン、数値入力欄、同じスタイルの増加ボタンで構成されます。テキスト入力とボタンを含む 3 つすべてのコンポーネントスタイルをインポートしてください。quantity-selector だけをインポートしても、ドキュメントに記載された構成にはなりません。

コンパクトなバリアントにする場合は、ボタンと入力のサイズを同時に変更します。利用ガイダンスでは小さいブレークポイントでミディアムサイズが必要とされているため、スマートフォンですべてを縮小するのは誤った最適化です。プレビューでは48pxのコントロールを維持し、代わりに周囲の構成を積み重ねます。

関連する仕様を確認する

## Adeo Mozaic デザインシステム 境界のスタイリングは実際の動作と一致させる必要があります

### 型付き入力にはプラスとマイナス以外の状態がある

オリジナルの例では1から12までの整数を検証します。1では減少が実際に無効になり、12では増加が無効になります。is-disabledクラスだけではキーボード操作による実行を止められません。ネイティブのdisabledと視覚的なクラスを同期させています。

空または小数の入力値が、もっともらしい資材リストに黙って変換されることはありません。送信時には許容範囲を説明し、フィールドにフォーカスを当てます。その後の編集で、以前に準備した結果はクリアされます。その結果は以前の数量を表していたためです。棚の計算は架空のサンプルデータであり、構造や購買に関する助言ではありません。

1. 空文字列をゼロとして扱わずに、入力値を読み取ります。

2. サンプル数を計算する前に、整数と範囲をバリデーションします。

3. 両方の境界ボタンと、アクセシブルなエラー状態を更新します。

4. バリデーションが通った後にのみ、ローカルのスナップショットを作成します。

関連する仕様を確認する

## Adeo Mozaic デザインシステム プロジェクトの成果には1つのソリッドアクションを使う

### ステップ操作と準備を分離する

ステッパーは入力値を変更するものなので、控えめな枠線付きのスクエアコントロールを使います。ソリッドの「資材リストを準備」ボタンはフォーム全体に対して作用します。同色のソリッドアクションを2つ並べると、この違いが分かりにくくなります。

結果のメッセージには、何も注文されていないことが明示されます。偽のローディング状態、決済フロー、ネットワーク送信はありません。具体的なサマリーがあれば、値とアクションの関係を示すのに十分です。

関連する仕様を確認する

## Adeo Mozaic デザインシステム 文書化されたインポートをMozaicのパイプラインでコンパイルする

### 設定が先、コンポーネント出力が後

全設定のインポートは変数、関数、ミックスインを提供しますが、それ自体ではコンポーネントCSSを出力しません。付属のバンドルはそれに続けてtext-input、button、quantity-selectorを読み込みます。提供されたプラグイン設定がMozaicのインポートパスを解決し、期待される変換を実行します。

このセットアップでは、プラグインパッケージが提供していないため、PostCSS CLIランナーを用意しています。本番環境ではMOZAIC_ENVがプラグイン設定を変更します。インストールページは現在Node 20+を要求し、Dart Sassを推奨しています。Node Sassに言及した古い記述を、非推奨のコンパイラをインストールする理由にすべきではありません。

関連する仕様を確認する

## Adeo Mozaic デザインシステム ユーティリティの余白はコンポーネント内部の外に保つ

### コンポーネントが自らのレイアウトを所有する箇所ではスケール値を使う

Mozaicのマージンとパディングのユーティリティは、コンポーネント間の余白用に意図されています。新しいコンポーネント内では、コンポーネントが自己完結するようSCSSのマジックユニット変数を使います。意図したリズムを保つには、calc($mu025 - 1px)のように、目標寸法から枠線を差し引く必要がある場合があります。

このオフライン見本は、ネイティブなMozaic CSSの実行を主張するものではありません。文書化された寸法と数量の構造を、オリジナルの配色、CSSの棚のイラスト、ローカルのみのインタラクションで解釈しています。別のコードブロックが、実際のライブラリクラスとビルドの接続を提供します。

関連する仕様を確認する

## Adeo Mozaic デザインシステム コンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

完全なドキュメントをindex.htmlとして保存し、ブラウザで開きます。Mozaicのマジックユニットとミディアム数量コントロールに対する、オリジナルのオフラインHTML/CSS解釈。オリジナルのイラストとアプリケーション用パレットであり、ネイティブライブラリのCSSではありません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>
```

コードリファレンス

- 棚の数量は資材リストを生成するのであって、注文ではありません。ネイティブのマークアップには文書化されたMozaicのPostCSS出力が必要です。このスタンドアロンのドキュメントには、独自の解釈スタイルが含まれています。

### 上限付きの棚数量と、そこから導出される資材リスト

実際のMozaicクラスがネイティブのnumber入力フィールドを囲みます。オリジナルのJavaScriptが整数の検証、境界での無効化、ローカルのみのサマリーを提供します。

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
 const n=number(),ok=valid(n); result.textContent='';
 minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
 minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
 input.setAttribute('aria-invalid',String(!ok&&showError));
 error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
 counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
 return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>
```

コードリファレンス

- 2つのステッパーボタンは type="button" を使うため、フォームを送信することはありません。

- ネイティブの min/max/step は引き続き意味を持ち、カスタムバリデーションが空入力と小数入力をカバーします。

- 数量を変更すると、先に準備したスナップショットは無効になります。

## Adeo Mozaic デザインシステム AI エージェントのセットアップ

### 実装の出発点

公開 SCSS ワークフローを、ドキュメントに記載された PostCSS 設定で使用します。HTML のサンプルは public/index.html に保存してください。ここではネイティブパッケージのビルドは実行していません。オフラインプレビューは独自の解釈です。現在のインストールガイドでは Dart Sass を使用しており、以前の PostCSS ページの Node Sass の記述を置き換えています。

```
# Node 20+. Use a CommonJS project for this configuration.
npm install @mozaic-ds/styles sass
npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss
# Save the configuration and SCSS below, then build:
npx postcss src/bundle.scss --output public/mozaic.css
# Production build on a POSIX shell:
MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css

// postcss.config.js
module.exports = {
  syntax: require('postcss-scss'),
  plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig')
};

// src/bundle.scss — settings must precede components.
@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';
```

### あなたのプロジェクト向けプロンプト

```
settings-tools/all-settings を使って Mozaic SCSS の構成を作成し、text-input、button、quantity-selector の前に配置します。小さい画面では 48px の medium コントロールに合わせ、境界のボタンはネイティブで無効化し、入力された整数を検証して、ローカル専用のサマリーを作成してください。ドキュメントに記載された PostCSS パイプラインを使用し、デフォルトの Leroy Merlin テーマと ADEO プリセットを区別してください。
```

## Adeo Mozaic デザインシステムの出典と範囲

Mozaic に関する独立した OpenDesign リファレンスです。このサンプルは ADEO や Leroy Merlin のストアフロントではなく、実際の注文や構造上の指針でもありません。ドキュメントのスナップショットは版ラベルが異なります。

- インストール パッケージ、Node、Dart Sass。

- PostCSS の設定 必須のプラグインパイプライン。

- SCSS のインポート 設定の依存関係とインポート順序。

- マジック単位 実際のスペーシングの段階。

- 本文スタイル ドキュメントに記載された段落サイズ。

- ボタン 寸法とアクションの階層。

- 数量の使用方法 レスポンシブなサイズと想定用途。

- 数量のコード BEM の構造と依存関係のインポート。

- トークンのカスタマイズ デフォルトテーマと上書き。

- スペーシングユーティリティ ユーティリティクラスとコンポーネントのスペーシング。

## Adeo Mozaic デザインシステム関連リソース

### Adobe Spectrum

選択可能なクリエイティブアセットのテーブルとエクスポートプリセットのインスペクターを通して、React Spectrum v3 を学びます。Provider のテーマと入力スケール、対応しているスタイルプロップ、キー付きコレクション、そして v3 と新しい Spectrum 2 実装との境界を理解します。

### Alaska Airlines Auro

実際のセマンティックカラーとタイプトークン、クラスベースのタイポグラフィ、ネイティブのフライトコンポーネントを通して、Auro の Alaska テーマを探ります。2 件の独自のフライト記録が、航空会社の在庫や予約を表すものではなく、ローカルでの絞り込みと選択を示します。

### Arco Design

Arco の制御された Transfer コンポーネントで、レポートセクションのセレクターを構築します。実際のスペーシングとサイズのスケール、CSS 変数の規約、セマンティックな界面表面、そして行を選択することと移動することの違いを探ります。


- [実装リファレンス](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [ソース](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [ソース](https://mozaic.adeo.cloud/components/buttons/)
- [ソース](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [ソース](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [ソース](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [ソース](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/components/buttons/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [関連する仕様を確認する](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [コードリファレンス](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [コードリファレンス](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [インストール パッケージ、Node、Dart Sass。](https://mozaic.adeo.cloud/get-started/developers/installation/)
- [PostCSS の設定 必須のプラグインパイプライン。](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [SCSS のインポート 設定の依存関係とインポート順序。](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [マジック単位 実際のスペーシングの段階。](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [本文スタイル ドキュメントに記載された段落サイズ。](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [ボタン 寸法とアクションの階層。](https://mozaic.adeo.cloud/components/buttons/)
- [数量の使用方法 レスポンシブなサイズと想定用途。](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [数量のコード BEM の構造と依存関係のインポート。](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [トークンのカスタマイズ デフォルトテーマと上書き。](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [スペーシングユーティリティ ユーティリティクラスとコンポーネントのスペーシング。](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)