npm が使えない環境で使う

Claude Artifact、ChatGPT Canvas、メール内 HTML、コードサンドボックスなど、⁠npm も CDN も使えない自己完結 HTML 環境⁠では @gunjo/ui をインストールできません。この環境向けに、GunjoUI はデザイントークンを ⁠Tailwind 非依存の純 CSS⁠ として固定 URL で配布しています。

https://www.gunjo.jp/tokens.css

パッケージと同じソース・オブ・トゥルースから生成しているため、値は @gunjo/ui 本体と常に一致します。

1. tokens.css を取り込む

自己完結 HTML では外部 CSS を読み込めないことが多いため、⁠内容をコピーして <style> に貼る⁠のが基本です：

<style>
/* https://www.gunjo.jp/tokens.css の内容をここに貼る */
</style>

AI エージェントなら URL を fetch して同じことができます。外部リソースの読み込みが許される環境（通常の静的サイトなど）では <link> でも構いません：

<link rel="stylesheet" href="https://www.gunjo.jp/tokens.css">

2. トークンの読み方

値は H S% L% の HSL トリプレットです（テーマ と同じ規約）。使うときは hsl() で包み、透明度は slash 記法で合成します：

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
.button-primary:hover {
  background: hsl(var(--primary) / 0.9);
}

セマンティックトーンは 5 色（primary / info / success / warning / destructive）。各色に subtle（淡い背景）・base（標準）・strong（濃い強調）の 3 段と専用の border があり、背景に -subtle を使ったらその上の文字は -subtle-foreground、のように対で使います。詳細は セマンティックトーン を参照してください。

影（--shadow-*）はそのまま box-shadow に、--duration-* と --ease-* は transition に使えます。

3. 余白と字

余白と字の段階も同じシートに入っています。ドキュメントの数値を手で写す必要はありません：

.panel {
  padding: var(--space-6);          /* 24px */
  gap: var(--space-2);              /* 8px */
  font-size: var(--text-sm);        /* 14px */
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-semibold);
}

⁠名前は寸法ではなく段階です。⁠ --space-2 は「2 段目」＝ 8px（gap-2 と同じ 8px）で、2px ではありません。Spacing をはじめシステム全体が使っている語彙と同じなので、このシートで組んだ画面とパッケージで組んだ画面が、余白を同じ言葉で説明できます。小数の段はハイフンで書きます（カスタムプロパティ名に素の . は置けないため）。--space-0-5 が 2px です。

⁠値は rem です。⁠ 読み手がブラウザの文字サイズを上げれば、画面ごと大きくなります。各行の末尾に px を併記していますが、これは目安で、px の方に書き換えると読み手の設定が効かなくなります。

寸法ではなく決まりを持っているトークンが 3 つあります。--control-h（36px・ボタンと入力とセレクトの共通の高さ）、--text-ui（14px・UI の既定）、--text-prose（16px・長文の既定）です。壁掛けの盤や屋外の手袋のように、画面を詰めたい・大きくしたいときは、個々の指定を探して回るのではなく、この 3 つを差し替えてください。

文字種は --font-sans / --font-mono / --font-mincho の 3 つで、どれも上書き前提です。Mincho の webfont はシートに同梱していないので、無い環境では環境の明朝（最終的には serif）に落ちます。

4. ダークモード

<html class="dark"> または <html data-theme="dark"> で切り替わります。OS 設定に追従させる場合は <head> に 1 行：

<script>if(matchMedia("(prefers-color-scheme: dark)").matches)document.documentElement.classList.add("dark")</script>

サンプル：カード 1 枚

トークンを貼ったあと、このまま <body> に貼れば GunjoUI ルックのカードが表示されます：

<style>
.demo-card {
  max-width: 360px;
  padding: 24px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.demo-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  background: hsl(var(--success-subtle));
  color: hsl(var(--success-subtle-foreground));
  border: 1px solid hsl(var(--success-border));
  border-radius: 9999px;
}
.demo-button {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.demo-button:hover { background: hsl(var(--primary) / 0.9); }
</style>

<div class="demo-card">
  <span class="demo-badge">稼働中</span>
  <h2 style="margin: 12px 0 4px; font-size: 18px;">今月の予約</h2>
  <p style="margin: 0 0 16px; font-size: 14px; color: hsl(var(--muted-foreground));">
    前月より 12 件増えています。
  </p>
  <button class="demo-button">詳細を見る</button>
</div>

基本パターンも「貼るだけ」で使う（patterns.css）

トークンの上に、よく使う部品の見た目を gj- クラスとしてまとめた ⁠patterns.css⁠ も配布しています。tokens.css の⁠あとに⁠貼れば、card / stat tile / badge / button / form / table / tabs / timeline / gantt / meter が GunjoUI ルックで使えます。

https://www.gunjo.jp/patterns.css

<span class="gj-badge gj-badge--ok">稼働中</span>
<button class="gj-btn gj-btn--primary">保存</button>

<div class="gj-card gj-card--bar gj-card--bar-ok">
  <h2 class="gj-card__title">今月の予約</h2>
  <p class="gj-card__desc">前月より 12 件増えています。</p>
</div>

状態は ok（稼働・成功）・warn（注意）・crit（危険）の 3 系統で統一しています。gantt（期間バー＋今日線＋マイルストーン）や timeline など、業務画面のプリミティブも含みます。

まとめて開ける単一ファイル（starter.html）

tokens.css・patterns.css・デモ画面を 1 ファイルに詰めた ⁠starter.html⁠ もあります。開けば全部品の見本が見られ、コピーすれば動く土台になります。

https://www.gunjo.jp/starter.html

AI に指示する場合

そのまま使える指示文の例：

npm・CDN が使えない環境では、@gunjo/ui の代わりに https://www.gunjo.jp/tokens.css のデザイントークンと https://www.gunjo.jp/patterns.css のパターンクラスを <style> に貼り、gj- クラスと hsl(var(--トークン名)) 記法で GunjoUI ルックを再現してください。余白と字も同じシートの var(--space-*) / var(--text-*) / var(--font-weight-*) を使い、px の直書きはしないでください。見本は https://www.gunjo.jp/starter.html にあります。

この方法で得られるもの・得られないもの

tokens.css / patterns.css が持つのは⁠トークンと見た目（色・角丸・影・モーション・余白・字・基本パターンの CSS）⁠だけです。コンポーネントの実装（アクセシビリティ対応、キーボード操作、状態管理）は含まれません。tabs のパネル切替のような挙動には別途 JavaScript が要ります（starter.html に最小例あり）。npm が使える環境では @gunjo/ui 本体のインストール を使ってください。

なお、npm はあるが Tailwind は使わないプロジェクトでは、同じ tokens.css / patterns.css をパッケージの subpath（@gunjo/ui/tokens.css / @gunjo/ui/patterns.css）として import できます（0.1.0-beta.2 から収録）。詳細は 採用ガイド を参照してください。