# Mozilla Protocol デザインシステム

## Mozilla Protocol デザインシステムのインターフェースプレビュー

読みやすさの密度を比べ、説明の詳細を展開し、購読登録をせずに無効・有効なメールアドレスの状態を試せます。

## Mozilla Protocol デザインシステムのデザインリファレンス

公開済みの Mozilla Protocol 22.0.0 のトークンJSONとネイティブの CSS を使用。ドル記号で始まる名前はSassトークンです。元のサンプルではMozillaのタイポグラフィテーマを使用しています。密度コントロールと円形イラストはアプリケーション独自の要素です。

### 書体のスタック

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $font-stack-base | Inter, X-LocaleSpecific, sans-serif | MozillaまたはFirefoxのブランド書体スタックを明示的に選びます。長文の本文には見出し用書体を使わないでください。 |
| $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | MozillaまたはFirefoxのブランド書体スタックを明示的に選びます。長文の本文には見出し用書体を使わないでください。 |
| $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | MozillaまたはFirefoxのブランド書体スタックを明示的に選びます。長文の本文には見出し用書体を使わないでください。 |
| $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | MozillaまたはFirefoxのブランド書体スタックを明示的に選びます。長文の本文には見出し用書体を使わないでください。 |
| $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | MozillaまたはFirefoxのブランド書体スタックを明示的に選びます。長文の本文には見出し用書体を使わないでください。 |
### コンポーネントの間隔

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $spacing-xs | 4px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
| $spacing-sm | 8px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
| $spacing-md | 16px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
| $spacing-lg | 24px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
| $spacing-xl | 32px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
| $spacing-2xl | 48px | コンポーネント内や、密接に関連する要素の間に使う余白。 |
### 大きなレイアウトのリズム

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $layout-2xs | 16px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-xs | 24px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-sm | 32px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-md | 48px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-lg | 64px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-xl | 96px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
| $layout-2xl | 192px | 編集セクションの間には、コンポーネント内の余白とは区別して、より大きな間隔を設けます。 |
### コンテンツ幅

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $content-xs | 304px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
| $content-sm | 432px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
| $content-md | 688px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
| $content-lg | 928px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
| $content-xl | 1152px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
| $content-max | 1440px | すべてのテキストブロックを最大幅まで広げるのではなく、実際のコンテンツが読みやすく収まる最大幅を選びます。 |
### 画面のブレークポイント

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $screen-xs | 320px | 公開されているビューポートの段階です。個々のコンポーネント用ミックスインは、選択した段階に応じて調整される場合があります。 |
| $screen-sm | 480px | 公開されているビューポートの段階です。個々のコンポーネント用ミックスインは、選択した段階に応じて調整される場合があります。 |
| $screen-md | 768px | 公開されているビューポートの段階です。個々のコンポーネント用ミックスインは、選択した段階に応じて調整される場合があります。 |
| $screen-lg | 1024px | 公開されているビューポートの段階です。個々のコンポーネント用ミックスインは、選択した段階に応じて調整される場合があります。 |
| $screen-xl | 1312px | 公開されているビューポートの段階です。個々のコンポーネント用ミックスインは、選択した段階に応じて調整される場合があります。 |
### 角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $border-radius-xs | 2px | コンポーネントに合った角丸を使い、オリジナルのイラストはUIの形状と分けて扱います。 |
| $border-radius-sm | 4px | コンポーネントに合った角丸を使い、オリジナルのイラストはUIの形状と分けて扱います。 |
| $border-radius-md | 8px | コンポーネントに合った角丸を使い、オリジナルのイラストはUIの形状と分けて扱います。 |
| $border-radius-lg | 16px | コンポーネントに合った角丸を使い、オリジナルのイラストはUIの形状と分けて扱います。 |
### タイポグラフィのユーティリティとテーマの選択

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Mozillaテーマの編集コンテンツです。プレビューでは公式パッケージのフォントを読み込みます。 |
| $brand-theme: firefox | Metropolis + Inter | Firefoxテーマのタイポグラフィは、別のブランド選択肢です。 |
| mzp-u-title-lg | Responsive title utility | メインの編集見出しに使用します。見た目の大きさから見出しの意味を推測しないでください。 |
| mzp-u-title-xs | Small title utility | 2つの補足セクションでは、意味的なh2要素にこのクラスを使います。 |
| mzp-u-title-2xs | Compact title utility | 短い記事では、h3にこのクラスを使います。 |
| Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | 元の読みやすさ設定であり、公式の2つのProtocolテーマではありません。 |
## Mozilla Protocol デザインシステム完全ガイド

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

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

## Mozilla Protocol デザインシステムの編集レイアウト

### 読みやすい編集上の階層から始める

> Protocolは、UIだけでなく編集コンテンツやマーケティング向けの画面にも対応します。このサンプルは、大きな見出しとオリジナルの円形イラストで始まり、その後、記事のプレビューとダイジェスト登録フォームへと続きます。読者に操作を求める前に、メッセージを伝えるための余白を確保する構成です。情報量の多い管理ダッシュボードとは異なるレイアウトです。

### ブランドテーマとアプリケーション独自の要素を分ける

この例では、mzp-t-mozillaとネイティブのProtocolタイポグラフィを使用しています。記事、イラスト、密度設定はアプリケーション独自のコンテンツです。ネイティブのクラス名やフォントファイルを使っていても、公式Mozillaサービスになるわけではありません。フッターで対象範囲を明示し、ダイジェストの操作では確認メッセージを表示するだけです。

## Mozilla Protocol デザインシステムのフォントとタイトル用ユーティリティ

### ブランドに合った書体の組み合わせを選ぶ

Protocol 22では、Mozilla向けにMozilla HeadlineとMozilla Textのスタックを、Firefox向けにMetropolisとInterを提供しています。このサンプルでは、パッケージに含まれるフォントを読み込みます。見出しと本文の役割は分けてください。すべての段落にディスプレイ書体を使うと、編集上の階層を際立たせるコントラストが失われます。

### 見出しの意味と見た目の大きさを分けて考える

ヒーロー見出しにはh1とmzp-u-title-lgを使います。補足セクションにはh2とmzp-u-title-xs、記事タイトルにはh3とmzp-u-title-2xsを使います。レスポンシブユーティリティを使えば、見出し構造を変えずに見た目のサイズを調整できます。読みやすさの密度コントロールが変更するのはサンプルの段落だけで、ページ全体やコントロールのサイズには影響しません。

- h1はページの冒頭で使います。

- h2で読み物のプレビューとフォームを区切ります。

- h3で記事の抜粋に見出しを付けます。

## Mozilla Protocol デザインシステムのカラーとイラスト

### イラストを編集コンテンツとして使う

円形のグラデーションはオリジナルのCSS作品で、短い代替テキストを付けています。暖色から紫へ移る配色は、新しい公式MozillaロゴやProtocolが提供するトークンとして示しているものではありません。それ以外の部分には控えめなニュートラルカラーの背景を使い、イラストと主要な操作が明確な役割を保てるようにしています。

### フォームの状態には、それぞれの意味を持たせる

メールアドレスの入力エラーには、説明文と目に見える無効状態の枠線を付けています。成功時には別の確認ブロックを表示し、入力した例のアドレスを示したうえで、メールは送信されていないことを明記します。カラフルなヒーロー要素がエラー表示と競合したり、フォームが成功したかどうかを曖昧にしたりしないようにしてください。

## Mozilla Protocol デザインシステムのコンポーネントとレイアウトのスケール

### 2つの余白スケールを使い分ける

公開されているコンポーネント用の余白は4、8、16、24、32、48pxです。これとは別に、64、96、192pxまでのレイアウト用スケールがあります。フォームやカード内では小さい方のスケールを使い、編集セクションの間には大きなリズムを持たせます。小さな間隔をすべてレイアウト用の値にすると、ラベルと入力欄の関係が弱まります。

### 列を増やす前に、行の長さを制限する

Protocolでは、304pxから最大1440pxまでのコンテンツ幅を用意しています。このサンプルでは、編集コンテンツ用に幅1152pxのコンテナを使い、十分な幅がある場合は2列にしています。アプリケーションのブレークポイントを下回ると、記事とフォームは縦に並びます。見出し、記事、フォームはそれぞれ、行が際限なく長くならない適切な幅を保ちます。

## Mozilla Protocol デザインシステムのボタン、詳細表示、フォーム

### フォームの正しい構造を保つ

ダイジェストの例は、表示ラベル、メールアドレス入力欄、説明文、エラーメッセージ、送信ボタンを備えたネイティブフォームです。コンポーネントのスタイルはProtocolが担い、アプリケーションが入力を検証して、その場で結果を表示します。ヒーローのアクションには、ページ内のセクションへ移動するリンクを使い、送信にはボタンを使います。

### 補足説明にはシンプルなディスクロージャーを使う

「変更点」のディスクロージャーには、ネイティブのdetails/summary要素を使っています。記事の流れを妨げることなく、段落のカスタム設定であるcomfortableとcompactについて説明します。これは、見せかけのナビゲーションタブでも、先に操作しなければならない隠れた要件でもありません。ディスクロージャーの開閉にかかわらず、フォームと表示密度のコントロールは利用できます。

## Mozilla Protocol デザインシステム：閲覧状態と検証状態

### 閲覧設定は一度に1つだけ変更する

2つの表示密度ボタンはラベル付きグループを形成し、aria-pressedを公開します。Compactに切り替えると、記事内の段落のフォントサイズ、行の高さ、下部の余白だけが変わります。本文、タイトル、フォームの入力欄はそのままです。この例では、こうした表示設定とMozillaおよびFirefoxのブランドテーマの切り替えを明確に区別しています。

### フォームのエラー回復を予測しやすくする

無効なメールアドレスを入力するとエラーが表示され、入力欄にフォーカスが移ります。入力を編集すると古いエラーが解除され、以前の確認メッセージも非表示になります。有効なメールアドレスを入力すると、その場で生成された結果が表示され、その結果にフォーカスが移ります。「別のアドレスを試す」を選ぶとフォームがクリアされ、無効状態が解除されて、入力欄にフォーカスが戻ります。非同期の登録処理を行うものではありません。

1. 空欄または形式が正しくないメールアドレスを送信し、フィールドのエラーを確認します。

2. メールアドレスの例を入力し、その場で表示される確認メッセージをプレビューします。

3. 「別のアドレスを試す」を選び、フォームをリセットして入力欄にフォーカスを戻します。

## Mozilla Protocol デザインシステム：アクセシブルな編集コントロール

### アートワークとコントロールに異なる役割を持たせる

イラストには画像の役割を持つ要素を使い、簡潔な代替テキストを付けています。表示密度のボタン、ディスクロージャー、送信アクションには実際に操作できるコントロールを使います。メールアドレスの入力欄は、aria-describedbyを介して説明文とエラーの両方を参照します。キーボード操作時には、ネイティブスタイルに加えて視認できるフォーカスアウトラインを表示します。

### レイアウトが縦に並ぶ場合も順序に意味を持たせる

ドキュメントの順序は、見出し、閲覧プレビュー、説明、フォームです。モバイルでも同じ順序を保ち、CSSによってフォームが説明より前に移動することはありません。モバイル用の180pxのイラストは編集コンテンツを補うものであり、ページを横スクロールさせる固定幅の障害物ではありません。

## Mozilla Protocol デザインシステム：CSSの統合

### 公開済みのアセットを例と一緒にバンドルする

付属のエントリーファイルでは、コンパイル済みテーマ、protocol.css、protocol-components.cssの順に読み込み、その後にアプリケーションのスタイルシートを読み込みます。Protocol 22では、:rootにテーマのカスタムプロパティが必要です。従来のブランドクラスを付けるだけでは、タイポグラフィは設定されません。Viteの起動前にprotocol-theme.scssをコンパイルしてください。モジュール対応のバンドラーが、フォントと画像のURLを解決します。以下のHTML、JavaScript、CSSのブロックに、このサンプルのソース一式が含まれています。隠れたニュースレターバックエンドや、パッケージ固有の状態プロバイダーはありません。

### 実際の購読サービスがある場合にのみフォームを拡張する

本番環境では、その場で表示する結果を検証済みのリクエストに置き換え、利用するサービスに応じて、同意、処理中、重複登録、サーバーエラーの挙動を定義してください。こうしたアプリケーション要件は、Protocolの表示スタイルとは分けて扱います。メールアドレスが構文上有効というだけで、その場での確認メッセージを登録成功と表示しないでください。

## Mozilla Protocol デザインシステム：コンポーネント例

### index.html — 編集ページ一式

セマンティックな記事、表示密度のコントロール、ディスクロージャー、オリジナルのCSSイラストを使った、その場で動作するダイジェストフォーム。

```
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading specimen</title></head>
<body>
<main class="reading-example mzp-t-mozilla">
  <header class="reading-top">
    <strong>MOZILLA PROTOCOL · EDITORIAL SPECIMEN</strong
    ><span>Original example by OpenDesign</span>
  </header>
  <section class="reading-hero">
    <div>
      <h1 class="mzp-u-title-lg">A little more room to read.</h1>
      <p>
        Make space for useful ideas, quieter pages, and a reading rhythm that
        feels like yours.
      </p>
      <a class="mzp-c-button" href="#reading-controls"
        >Explore the reading preview</a
      >
    </div>
    <div
      class="orb"
      role="img"
      aria-label="Original warm-to-purple circular illustration"
    ></div>
  </section>
  <div class="reading-main">
    <section id="reading-controls">
      <h2 class="mzp-u-title-xs">Choose your reading rhythm</h2>
      <p>
        Compare two application-defined densities using the same short article.
      </p>
      <div class="density-options" role="group" aria-label="Reading density">
        <button
          class="mzp-c-button mzp-t-secondary"
          data-density="comfortable"
          aria-pressed="true"
        >
          Comfortable</button
        ><button
          class="mzp-c-button mzp-t-secondary"
          data-density="compact"
          aria-pressed="false"
        >
          Compact
        </button>
      </div>
      <article id="article-sample">
        <h3 class="mzp-u-title-2xs">The open page</h3>
        <p>
          A useful page gives an idea enough room to breathe. Its headings show
          the path, its paragraphs keep a readable measure, and its controls
          remain easy to find.
        </p>
        <p>
          Changing density should preserve the story. This preview adjusts
          paragraph size and spacing without replacing the article or changing
          your place in the task.
        </p>
      </article>
      <details>
        <summary>What changes in this example?</summary>
        <p>
          Comfortable uses 16px text with 1.6 line height. Compact uses 14px
          with 1.4. These are example reading preferences, not separate official
          Protocol themes.
        </p>
      </details>
    </section>
    <aside class="signup">
      <h2 class="mzp-u-title-xs">Preview a reading digest</h2>
      <p>
        Try the form styling and local validation. No subscription is created.
      </p>
      <form id="reading-form" novalidate>
        <label for="email">Email address</label
        ><input
          id="email"
          type="email"
          autocomplete="email"
          aria-describedby="email-note email-error"
        />
        <p class="note" id="email-note">
          Use an example address. Nothing will be sent.
        </p>
        <p id="email-error" class="error" role="alert" hidden>
          Enter an email address, such as reader@example.com.
        </p>
        <button class="mzp-c-button" type="submit">Preview confirmation</button>
      </form>
      <div id="confirmation" tabindex="-1" role="status" hidden>
        Local preview confirmed for <strong></strong>. No email was sent.<button
          id="reset"
          class="mzp-c-button mzp-t-secondary"
          type="button"
        >
          Try another address
        </button>
      </div>
    </aside>
  </div>
  <footer class="reading-footer">
    Native Mozilla Protocol 22.0.0 CSS and fonts. Original illustration, copy
    and JavaScript; not an official Mozilla service.
  </footer>
</main>
<script type="module" src="/src/main.js"></script>
</body></html>
```

コードリファレンス

- プロジェクトのルートにindex.htmlとして保存します。次の2つのブロックはsrc/main.jsとsrc/protocol.cssです。

### main.js — ネイティブアセットとその場で動作する処理

公式スタイルを読み込み、データを送信せずに表示密度の選択、入力検証、フォーカス、リセットを実装します。

```
import "./protocol-theme.css";
import "@mozilla-protocol/core/protocol/css/protocol.css";
import "@mozilla-protocol/core/protocol/css/protocol-components.css";
import "./protocol.css";
const form = document.querySelector("#reading-form"),
  error = document.querySelector("#email-error"),
  input = document.querySelector("#email"),
  result = document.querySelector("#confirmation");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const value = input.value.trim();
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    error.hidden = false;
    input.setAttribute("aria-invalid", "true");
    input.focus();
    return;
  }
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  result.hidden = false;
  result.querySelector("strong").textContent = value;
  result.focus();
});
input.addEventListener("input", () => {
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  result.hidden = true;
});
document.querySelector("#reset").addEventListener("click", () => {
  form.reset();
  result.hidden = true;
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  input.focus();
});
document.querySelectorAll("[data-density]").forEach((button) =>
  button.addEventListener("click", () => {
    document
      .querySelectorAll("[data-density]")
      .forEach((b) => b.setAttribute("aria-pressed", String(b === button)));
    document
      .querySelector("#article-sample")
      .classList.toggle("compact", button.dataset.density === "compact");
  }),
);
```

コードリファレンス

- この処理はアプリケーション側のJavaScriptであり、Protocolのニュースレターサービスではありません。

### protocol.css — オリジナルのレイアウト

レスポンシブなページレイアウト、閲覧設定、オリジナルの円形イラスト。

```
[hidden] { display: none !important; }
body {
  margin: 0;
}
.reading-example {
  background: #fff;
  color: #000;
}
.reading-top {
  padding: 24px;
  border-bottom: 1px solid #cdcdd4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
.reading-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr);
  gap: 48px;
  align-items: center;
  padding: 48px;
  max-width: 1152px;
  margin: auto;
}
.reading-hero h1 {
  max-width: 680px;
}
.reading-hero p {
  max-width: 580px;
}
.orb {
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 33% 32%,
    #ffea80 0 10%,
    #ff8a50 30%,
    #ff298a 55%,
    #7542e5 82%
  );
  border-radius: 50%;
  position: relative;
  box-shadow: 16px 24px 0 #f0f0f4;
}
.orb:after {
  content: "";
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: white;
}
.reading-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 48px;
  max-width: 1152px;
  margin: auto;
  padding: 0 48px 48px;
}
.density-options {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.density-options button {
  font-size: 12px;
  padding: 8px 12px;
}
.density-options button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #0060df;
}
#article-sample {
  padding: 24px;
  border: 1px solid #cdcdd4;
  border-radius: 8px;
  background: #f9f9fb;
}
#article-sample p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
}
#article-sample.compact p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.signup {
  padding: 24px;
  background: #e7dfff;
  border-radius: 8px;
}
.signup input {
  width: 100%;
  margin-bottom: 8px;
}
.signup label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}
.signup .note {
  font-size: 12px;
  line-height: 1.5;
}
.signup .error {
  color: #a4000f;
  font-size: 14px;
  font-weight: 700;
}
.signup input[aria-invalid="true"] {
  border-color: #a4000f;
  box-shadow: 0 0 0 2px #a4000f;
}
.signup .mzp-c-button {
  width: 100%;
  margin: 8px 0;
}
#confirmation {
  padding: 16px;
  background: #e3fff3;
  margin-top: 16px;
  border-left: 4px solid #008a46;
  overflow-wrap: anywhere;
}
.reading-footer {
  padding: 24px;
  border-top: 1px solid #cdcdd4;
  font-size: 12px;
}
.reading-example details {
  margin-top: 24px;
}
.reading-example summary {
  cursor: pointer;
  font-weight: 700;
}
.reading-example details p {
  font-size: 14px;
  margin-top: 12px;
}
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #0060df;
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .reading-hero {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 24px;
  }
  .orb {
    width: 180px;
    justify-self: center;
    box-shadow: 8px 12px 0 #f0f0f4;
  }
  .reading-main {
    grid-template-columns: 1fr;
    padding: 0 24px 32px;
    gap: 32px;
  }
  .reading-top {
    flex-wrap: wrap;
  }
  .reading-hero h1 {
    font-size: 36px;
  }
  .density-options {
    flex-wrap: wrap;
  }
}
```

コードリファレンス

- アプリケーション側の表示密度とレイアウトの設定は、公開済みのSassトークンとは分けて示しています。

### protocol-theme.scss — 必須のMozillaルートテーマ

アプリケーションの起動前に、これをsrc/protocol-theme.cssにコンパイルしてください。

```
@use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla');
@use '@mozilla-protocol/core/protocol/css/includes/themes';
```

コードリファレンス

- Sassの設定でブランドを選択します。実行時にクラスを切り替える方法ではありません。

## Mozilla Protocol デザインシステム：エージェントのセットアップ

### 実装の出発点

ローカルプレビュー用に、ネイティブのCSS/fontsとオリジナルのスクリプトをバンドルしています。ご利用のViteのリリースがサポートするNode.jsのバージョンを使ってください。ビルドを再配布する場合は、パッケージのライセンスとアセットのクレジット表記を引き継いでください。

```
npm create vite@latest protocol-reading -- --template vanilla
cd protocol-reading
npm install
npm install @mozilla-protocol/core@22.0.0
npm install --save-dev sass
npx sass --load-path=node_modules src/protocol-theme.scss src/protocol-theme.css
# Replace index.html; add src/main.js and src/protocol.css from the full examples.
npm run dev
```

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

```
Mozilla Protocol 22.0.0を使って編集ページを作成します。実際のフォント、余白、コンテナの参照値を確認してください。付属のHTML/CSS/JSの完成済み構成を出発点にし、セマンティックな見出しと視認できるフォームラベルを維持しながら、オリジナルのイラストや表示密度の設定と公式トークンを区別します。その場での入力検証が示す内容を正確に保ち、実際の購読サービスは、そのサービスと同意に関する要件を定義してから統合してください。
```

## Mozilla Protocol デザインシステム：情報源と対象範囲

Mozilla Protocol 22.0.0に関するOpenDesignのアプリケーションガイドです。このサンプルでは、公開済みのCSSとバンドルされたフォントを使用し、独自の文章、イラスト、その場で動作するフォーム処理を組み合わせています。Mozillaの製品、ニュースレター、購読サービスではありません。ブランドとアセットの権利は、それぞれの所有者に帰属します。

- Protocolのタイポグラフィ ブランドごとのフォントの組み合わせとタイトル用ユーティリティ。

- 公開済みトークンのエクスポート 余白、レイアウト、コンテンツ幅、フォントスタック。

- ProtocolのCSSの使い方 スタイルシートの統合方法。

- Protocolのソース 実装、アセット、MPLライセンス。

## Mozilla Protocol デザインシステム：関連リソース

### Nord デザインシステム

ルーム申請の下書きを通して、NordのTherapyテーマのトークンとWeb Componentの仕様を確認できます。実際の色の役割、画面幅に応じたフィールドのサイズ、明示的なバリデーション、ローカルで用意した結果を確認できます。

### Oracle Redwood

Oracle JET 19 Redwoodの実際の配色、セマンティックな役割、スペーシング、密度の境界を、編集可能な独自の株式レビューシートを通して詳しく確認できます。

### Orange OUDS Web

Orange OUDS 1.4の実際のセマンティックトークン、テーマパッケージ、ネイティブのOffcanvasの挙動を、レスポンシブ対応の比較調査一式で確認できます。


- [実装リファレンス](https://protocol.mozilla.org/docs/usage/framework)
- [ソース](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json)
- [ソース](https://protocol.mozilla.org/docs/fundamentals/typography)
- [コードリファレンス](https://protocol.mozilla.org/components/detail/example-form)
- [コードリファレンス](https://protocol.mozilla.org/docs/usage/framework)
- [コードリファレンス](https://protocol.mozilla.org/docs/fundamentals/design-tokens)
- [Protocolのタイポグラフィ ブランドごとのフォントの組み合わせとタイトル用ユーティリティ。](https://protocol.mozilla.org/docs/fundamentals/typography)
- [公開済みトークンのエクスポート 余白、レイアウト、コンテンツ幅、フォントスタック。](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json)
- [ProtocolのCSSの使い方 スタイルシートの統合方法。](https://protocol.mozilla.org/docs/usage/framework)
- [Protocolのソース 実装、アセット、MPLライセンス。](https://github.com/mozilla/protocol)