aura-theme

Aura テーマジェネレーター

自由形式の説明から Vaadin Aura のテーマ CSS ファイルを生成します。

ワークフロー

1. ユーザーの説明を解釈する — 意図されている色、雰囲気、密度、タイポグラフィ、レイアウト、サーフェス階層、意味的なブランドカラー、コンポーネント固有のスタイル設定の要件を特定します。
2. 関連するリファレンスを確認する — ステップ 1 で特定した内容に基づきます。
   • 有効なプロパティ値とデフォルト値について、必ず references/property-values.md を読みます。
   • 慣用的な例として、最もスタイルが近いリファレンス CSS ファイルを選んで読みます。解釈したスタイルに基づいて選択します。
     • references/cozy-paper.css — ダークモード、エメラルドのアクセント、広々としたフラットなサーフェス、コンテンツの混合カラースキーム、サイドナビゲーションとボタンのパターン
     • references/fresh-mint.css — cozy-paper と同じ基本設定の、すっきりとしたミントのバリエーション
     • references/monochrome.css — ニュートラルなモノクロ、カラースキームの自動設定、不透明なオーバーレイ、等幅フォント、ボタンの枠線パターン
     • references/night-operator.css — ダークなオペレーターテーマ。cozy-paper と同じナビゲーションとボタンのパターン
     • references/preset-sunset-glass.css — 鮮やかなインディゴ、非常に丸みのある形状、太いフォントウェイト、カードのエレベーションのスコープ設定
   • コンポーネント固有のスタイル設定（例：Grid）がステップ 1 で特定された場合に限り、references/components.md を読みます。
3. マッピングする — リファレンスの値を使用して、解釈した各要素を Aura プロパティにマッピングします（常に考慮する項目：サーフェスレベル／不透明度、アプリレイアウトのインセット、フォントファミリー、角丸。まれに考慮する項目：セマンティックな状態を表すパレットカラー。明示的に指定された場合に限り考慮する項目：コンポーネントプロパティ）
4. styles.css ファイルを特定します（デフォルト：/src/main/resources/META-INF/resources/styles.css）
5. ファイルに内容を表す名前を付けます
6. styles.css と同じディレクトリにテーマ CSS ファイルを作成します
7. styles.css に新しいテーマファイルをインポートする @import 文を追加します

ファイルの場所と統合

styles.css の検索：

• デフォルトの場所：/src/main/resources/META-INF/resources/styles.css
• 最初にこのパスを検索します
• 見つからない場合は、ワークスペース内で **/styles.css を検索します

テーマファイルの作成：

• styles.css があるディレクトリに新しい CSS ファイルを作成します
• ステップ 4 で決めた、内容を表すファイル名を使用します

テーマの統合：

• styles.css の先頭に @import "filename.css"; を追加します（filename.css は生成したテーマファイルの名前です）
• styles.css にすでにインポート文がある場合は、新しいインポート文を他のコンテンツより前に追加します

説明の解釈

ユーザーの意図を Aura プロパティにマッピングします。

ユーザーの指定	設定するプロパティ
ダークモード、ダークテーマ	color-scheme: dark
ライトモード	color-scheme: light
自動／システムテーマ	color-scheme: light dark
混合モード、ダークなナビゲーション	color-scheme: dark + --aura-content-color-scheme: light
アクセントとして色名を指定（例：「emerald」、「sky」）	--aura-accent-color-light + --aura-accent-color-dark
カラフル、鮮やか、彩度の高い背景	アクセント背景を使用（アクセントカラーから導出した OKLCH）
暖色系／アースカラーの背景	Stone、Taupe、または Olive の背景
寒色系の背景	Slate、Mist、または Zinc の背景
ニュートラル／すっきりした印象	Neutral または White/Black の背景
落ち着いた、低彩度、柔らかな色	パレットカラー、ユーザーカラー、アクセント全体の彩度／クロマを下げます
明るい、鮮やかな、ビビッドな色	パレットカラー、ユーザーカラー、アクセント全体の彩度／鮮やかさを上げます
エラー、警告、成功に特定のブランドカラーを使用	対応するパレットカラーを設定します（例：--aura-red、--aura-green）
暖色系／寒色系のニュートラルトーン	--aura-neutral-light と --aura-neutral-dark を調整します
コンパクト、高密度	--aura-base-size: 12
ゆとりのある広々とした表示	--aura-base-size: 20
シャープ、角張った、四角い形状	--vaadin-radius-s/m/l: 0（ベースの角丸値を指定しない場合、角は四角になります）
角丸を最小限にする	--aura-base-radius: -1
控えめ、わずかに角丸	--aura-base-radius: 0
標準の角丸	--aura-base-radius: 3（デフォルトのため省略可）
角丸、柔らかな印象	--aura-base-radius: 4
強い角丸	--aura-base-radius: 7（大きなサーフェスのみ。小さなコンポーネントでは上限が適用されます）
高コントラスト、アクセシブル	--aura-contrast-level: 2
控えめ、柔らかなコントラスト	--aura-contrast-level: 0.25
フラット、ミニマル、サーフェスを抑える	--aura-surface-level: -0.5
浮き上がった、レイヤー状、カード風	--aura-surface-level: 2
半透明のサーフェス	--aura-surface-opacity: 0.5（デフォルト）
不透明なサーフェス	--aura-surface-opacity: 1
小さな文字	--aura-base-font-size: 13
大きな文字	--aura-base-font-size: 16
等幅、コード風	Geist Mono、JetBrains Mono、または Atkinson Hyperlegible Mono
モダンですっきりしたフォント	Inter、Geist、Public Sans、または Manrope
アクセシブルなフォント	Atkinson Hyperlegible Next
不透明なオーバーレイ、塗りつぶしのダイアログ	--aura-overlay-surface-opacity: 1
最大化レイアウト、画面端まで表示、インセットなし、全画面	--aura-app-layout-inset: 0px
デフォルトのレイアウトインセット	--aura-app-layout-inset: 1.5vmin（デフォルトのため省略可）
コンテンツ領域をシステムのライト／ダーク設定に合わせる	--aura-content-color-scheme: light dark
通知を常にダークにする	--aura-notification-color-scheme: dark
通知をシステム設定に合わせる	--aura-notification-color-scheme: light dark

コンポーネント固有のスタイル設定（ナビゲーション — 個別のセレクター。非常によく使われます）：

以下のサイドナビゲーションのパターンは、質の高いテーマの多くで使われています。洗練されたアプリテーマでは、あらかじめ適用してください。

パターン	CSS
非アクティブなナビゲーション項目のアイコンにアクセントカラーを適用	vaadin-side-nav-item:not([current]) > vaadin-icon { color: var(--aura-accent-text-color); }
現在のナビゲーション項目：コンテナの背景、枠線なし	vaadin-side-nav-item[current]::part(content) { --vaadin-side-nav-item-background: var(--vaadin-background-container); --vaadin-side-nav-item-border-color: transparent; }
ナビゲーションセクションのラベル：大文字、小さめ、文字間隔を広げる	vaadin-side-nav::part(label) { text-transform: uppercase; font-size: var(--aura-font-size-xs); color: var(--vaadin-text-color); letter-spacing: 0.03em; }

コンポーネント固有のスタイル設定（ボタン — 個別のセレクター。非常によく使われます）：

このパターンは、二次／デフォルトボタンをアクセントカラーではなくニュートラルな印象にするため、質の高いテーマの多くで使われています。

:is(vaadin-button, vaadin-menu-bar-button, vaadin-upload-button):not([theme~="primary"], [theme~="tertiary"]) {
  --aura-accent-color-light: var(--aura-neutral);
  --aura-accent-color-dark: var(--aura-neutral);
  --vaadin-button-background: var(--vaadin-background-container);
  --vaadin-button-border-color: transparent;
  --vaadin-button-shadow: none;
}

モノクロ／枠線付きボタンのスタイル（塗りつぶしなし、枠線のみ）の場合：

html {
  --vaadin-button-border-color: var(--vaadin-border-color);
  --vaadin-button-shadow: none;
}
:is(vaadin-button, vaadin-menu-bar-button, vaadin-upload-button):not([theme~="primary"]) {
  --vaadin-button-background: var(--vaadin-background-container);
}

コンポーネント固有のスタイル設定（フォントのウェイト — 個別の html ブロック）：

複数のウェイトがあるフォント（例：Manrope）では、よりしっかりとした洗練された印象になるよう、ウェイトのスケールを調整します。

html {
  --aura-font-weight-regular: 500;
  --aura-font-weight-medium: 600;
  --aura-font-weight-semibold: 700;
  --vaadin-button-font-weight: 600;
  --vaadin-input-field-value-font-weight: 500;
  --vaadin-checkbox-font-weight: 600;
  --vaadin-radio-button-font-weight: 600;
  --vaadin-message-name-font-weight: 600;
  --vaadin-grid-header-font-weight: 600;
}

コンポーネント固有のスタイル設定（カード／ウィジェット — 個別のセレクター）：

グローバルなサーフェスレベルを低くしつつ、カードを浮き上がらせる必要があるテーマの場合：

vaadin-card,
vaadin-dashboard-widget {
  --aura-surface-level: 4;
}

コンポーネント固有のスタイル設定（入力フィールド — html に適用）：

ユーザーの要望	設定するプロパティ
入力フィールドの外観、境界線、または背景のカスタマイズ	入力フィールドのプロパティ（--vaadin-input-field-background、--vaadin-input-field-border-*）
フォーカスインジケーターのセカンダリーアクセント	フォーカスリングの色（--vaadin-focus-ring-color）

コンポーネント固有のスタイル設定（ユーザーカラー — html に適用）：

ユーザーの要望	設定するプロパティ
アバターの色またはチャートのパレットのカスタマイズ	ユーザーカラーのプロパティ（--vaadin-user-color-0 から --vaadin-user-color-9）
データビジュアライゼーション用のブランドカラーのパレット	ブランドガイドラインに合わせて、10 色すべてのユーザーカラーを定義

コンポーネント固有のスタイル設定（グリッド — 個別のセレクター）：

ユーザーの要望	設定するプロパティ
グリッドの境界線、背景、または角のカスタマイズ	グリッドコンテナーのプロパティ（--vaadin-grid-background、--vaadin-grid-border-*、--vaadin-grid-border-radius）
グリッドの行または列の境界線の追加／調整	グリッド構造のプロパティ（--vaadin-grid-row-border-width、--vaadin-grid-column-border-width）
グリッドヘッダーの外観のカスタマイズ	グリッドヘッダーのプロパティ（--vaadin-grid-header-font-size、--vaadin-grid-header-font-weight、--vaadin-grid-header-text-color）
グリッドの行の背景またはストライプの設定	グリッド行のプロパティ（--vaadin-grid-row-background-color、--vaadin-grid-row-odd-background-color）

重要な考慮事項：

• 読み取り専用プロパティ： リファレンスの Property Index で Read-only に分類されているプロパティは決して設定しないでください。Aura はこれらを計算するため、上書きすると、そのプロパティが提供する色スキームまたはコントラストの動作が損なわれます。代わりに、そのプロパティと併記されているプロパティを設定してください。
• 角の丸み： --aura-base-radius は半径を直接設定するのではなく、派生する 3 つの段階をスケーリングします。--vaadin-radius-s は 0.25lh に制限されるため、ボタンと入力フィールドはベース値が 3 を超えると変化しなくなります。値を上げても影響するのはカードとダイアログのみで、どのベース値でも角は四角になりません。「角を四角に」するには、--vaadin-radius-s/m/l: 0 を直接設定してください（リファレンスを参照）。
• カラフルな背景： ユーザーが鮮やかな／カラフルな UI を求めている場合は、名前付き背景ではなく、oklch の数式を使ったアクセント背景オプションを使用してください（リファレンスを参照）。
• カラーパレットの調整： パレットの色（--aura-red、--aura-green など）を全体的なスタイル（落ち着いた色合い、明るい色、ブランド固有の色）に合わせて調整してください。色相の一貫性を保ち（赤は赤系、緑は緑系のまま）、色調や彩度を調整してください。テキストの色は自動的に導出されます。
• ユーザーカラーの調整： アバターとチャートの見た目に一貫性を持たせるため、ユーザーカラーパレット（--vaadin-user-color-*）を全体的なスタイルに合わせて調整してください。
• コンポーネントのスタイル設定： 洗練されたアプリのテーマにするため、サイドナビとボタンのパターンをあらかじめ含めてください。これらは品質の高いリファレンステーマの大半に含まれています。グリッドのプロパティは明示的に指定された場合にのみ含めてください。
• サーフェスレベル／不透明度： 視覚的な階層のニーズを考慮してください。--aura-surface-level: -0.5（フラット）は、モダンなテーマで一般的です。必要に応じて、カードの浮き上がりをスコープ指定して組み合わせてください。
• コンテンツの色スキーム： --aura-content-color-scheme: light dark を指定すると、コンテンツ領域がシステム設定に従います。ナビゲーションに固定の暗色または明色の color-scheme を指定する設定とよく組み合わせられます。
• アプリレイアウトのインセット： 必ず単位を使用してください（0 ではなく 0px）。CSS の calc() 関数ではこれが必須です。
• フォント： リファレンスにある厳選されたフォントのみを使用してください。それぞれに定義済みのインポート URL があります。

出力ルール

1. デフォルト以外のプロパティのみを含めてください。 デフォルト値と一致するものは省略します。
2. 同じ色相系統のライトとダークのアクセントカラーを必ず組み合わせてください。
3. ライトとダークの背景色を必ず組み合わせてください。名前で指定する場合は Zinc/Zinc、または Accent オプションと一致する oklch 数式を使用します。
4. カスタムフォントファミリーを設定する場合は、厳選されたフォントリストの正確な URL を使って、フォントの @import を含めてください。
5. コア Aura プロパティは html セレクターに記述してください。 グローバルに適用する追加のコンポーネントトークンの上書きには、2 つ目の html {} ブロックを使用できます。
6. デフォルトのライトを使用しない場合は、html に color-scheme を含めてください。
7. サイズ、角丸、コントラスト、サーフェスレベル、サーフェスの不透明度には、リファレンスのプリセット値を使用してください。カスタムの 16 進カラーは、ユーザーがプリセットにない特定の色を明示的に求めた場合にのみ使用できます。
8. アプリレイアウトのインセットには単位を含めてください（例：0 ではなく 0px）。
9. アプリにナビゲーションがない、またはカスタムのボタンスタイルがないとユーザーが指定しない限り、一般的なアプリテーマにはサイドナビゲーションとボタンのコンポーネントパターンを含めてください。これらのパターンはリファレンステーマから直接使用してください。
10. グローバルなサーフェスレベルがフラット（-0.5）で、カードを目立たせる必要がある場合は、--aura-surface-level のスコープを vaadin-card, vaadin-dashboard-widget に設定してください。

ファイル名

設定に基づいて、出力 CSS ファイルに内容が分かる名前を付けてください。命名パターン：

• {accent}-{background}.css — 例：emerald-zinc.css、sky-neutral.css
• 密度やフォントに特徴がある場合は {accent}-{density}-{font}.css
• 小文字とハイフン区切りの名前を使用します

CSS ファイルの構成

@import url('https://fonts.googleapis.com/css2?family=FONT_NAME:wght@RANGE&display=swap');

/* Core Aura configuration */
html {
  color-scheme: VALUE;
  --aura-accent-color-dark: VALUE;
  --aura-accent-color-light: VALUE;
  --aura-app-layout-inset: VALUE;
  --aura-background-color-dark: VALUE;
  --aura-background-color-light: VALUE;
  --aura-base-font-size: VALUE;
  --aura-base-radius: VALUE;
  --aura-base-size: VALUE;
  --aura-content-color-scheme: VALUE;
  --aura-contrast-level: VALUE;
  --aura-font-family: VALUE;
  --aura-notification-color-scheme: VALUE;
  --aura-overlay-surface-opacity: VALUE;
  --aura-surface-level: VALUE;
  --aura-surface-opacity: VALUE;
  /* palette colors only when needed */
  --aura-blue: VALUE;
  --aura-green: VALUE;
  --aura-neutral-dark: VALUE;
  --aura-neutral-light: VALUE;
  --aura-orange: VALUE;
  --aura-purple: VALUE;
  --aura-red: VALUE;
  --aura-yellow: VALUE;
}

/* Side nav styling (include for most app themes) */
vaadin-side-nav-item:not([current]) > vaadin-icon {
  color: var(--aura-accent-text-color);
}

vaadin-side-nav-item[current]::part(content) {
  --vaadin-side-nav-item-background: var(--vaadin-background-container);
  --vaadin-side-nav-item-border-color: transparent;
}

vaadin-side-nav::part(label) {
  text-transform: uppercase;
  font-size: var(--aura-font-size-xs);
  color: var(--vaadin-text-color);
  letter-spacing: 0.03em;
}

/* Button styling — neutral secondary/default buttons (include for most app themes) */
:is(vaadin-button, vaadin-menu-bar-button, vaadin-upload-button):not([theme~="primary"], [theme~="tertiary"]) {
  --aura-accent-color-light: var(--aura-neutral);
  --aura-accent-color-dark: var(--aura-neutral);
  --vaadin-button-background: var(--vaadin-background-container);
  --vaadin-button-border-color: transparent;
  --vaadin-button-shadow: none;
}

/* Card/widget elevation (include when global surface-level is flat) */
vaadin-card,
vaadin-dashboard-widget {
  --aura-surface-level: 4;
}

/* Font weights (include for variable-weight fonts like Manrope) */
html {
  --aura-font-weight-regular: VALUE;
  --aura-font-weight-medium: VALUE;
  --aura-font-weight-semibold: VALUE;
  --vaadin-button-font-weight: VALUE;
  --vaadin-input-field-value-font-weight: VALUE;
  --vaadin-checkbox-font-weight: VALUE;
  --vaadin-radio-button-font-weight: VALUE;
  --vaadin-message-name-font-weight: VALUE;
  --vaadin-grid-header-font-weight: VALUE;
}

/* Input fields (only when explicitly requested) */
html {
  --vaadin-focus-ring-color: VALUE;
  --vaadin-input-field-background: VALUE;
  --vaadin-input-field-border-color: VALUE;
  --vaadin-input-field-border-radius: VALUE;
  --vaadin-input-field-border-width: VALUE;
}

/* User colors for avatars/charts (only when explicitly requested) */
html {
  --vaadin-user-color-0: VALUE;
  /* ... through --vaadin-user-color-9 */
}

/* Grid (only when explicitly requested) */
vaadin-grid {
  --vaadin-grid-background: VALUE;
  --vaadin-grid-border-color: VALUE;
  --vaadin-grid-border-radius: VALUE;
  --vaadin-grid-border-width: VALUE;
  --vaadin-grid-column-border-width: VALUE;
  --vaadin-grid-header-font-size: VALUE;
  --vaadin-grid-header-font-weight: VALUE;
  --vaadin-grid-header-text-color: VALUE;
  --vaadin-grid-row-background-color: VALUE;
  --vaadin-grid-row-border-width: VALUE;
  --vaadin-grid-row-odd-background-color: VALUE;
}

カスタムフォントがない場合は、@import の行を省略してください。デフォルト値を使用するプロパティは省略してください。各ブロック内でプロパティをアルファベット順に並べてください。生成するテーマに関連するセクションのみを含めてください。

例

完全で慣用的な例については、リファレンス CSS ファイルを参照してください。これらは最良の基準となる例です。

• ダークモード、エメラルドのアクセント、ゆったりした間隔、アクセシブルなフォント、フラットなサーフェス、コンテンツごとに異なる配色、ナビゲーション＋ニュートラルなボタン： references/cozy-paper.css と references/night-operator.css
• ニュートラルなモノクロ、自動カラースキーム、不透明なオーバーレイ、等幅フォント、枠線付きボタン： references/monochrome.css
• 鮮やかなインディゴ、とても丸みのある角、太いフォントウェイト、カードの立体感、システムカラースキーム： references/preset-sunset-glass.css

ユーザープロンプト：「黄色のアクセントを使った、鮮やかでカラフルなテーマ」

html {
  --aura-accent-color-dark: #FACC15;
  --aura-accent-color-light: #efb100;
  --aura-background-color-dark: oklch(from var(--aura-accent-color-dark) 0.18 calc(c * 0.3) h);
  --aura-background-color-light: oklch(from var(--aura-accent-color-light) 0.9 calc(c * 0.3) h);
  --aura-contrast-level: 2;
}

ユーザープロンプト：「ブランドカラーを使ってください。エラーには #FF0000、成功には #00AA00 を使用してください」

html {
  --aura-green: #00AA00;
  --aura-red: #FF0000;
}

ユーザープロンプト：「グリッドの角を丸くし、外枠をなくして、控えめな列の区切り線を追加してください」

vaadin-grid {
  --vaadin-grid-border-radius: var(--vaadin-radius-m);
  --vaadin-grid-border-width: 0;
  --vaadin-grid-column-border-width: 1px;
}

ユーザープロンプト：「入力フィールドの背景を明るくして控えめな枠線を付け、フォーカスインジケーターには紫を使用してください」

html {
  --vaadin-focus-ring-color: #9810fa;
  --vaadin-input-field-background: var(--vaadin-background-container);
  --vaadin-input-field-border-color: var(--vaadin-border-color-subtle);
  --vaadin-input-field-border-width: 1px;
}

ユーザープロンプト：「アバターとチャートにブランドカラーパレットを使用してください」

html {
  --vaadin-user-color-0: #2E7D32;
  --vaadin-user-color-1: #1565C0;
  --vaadin-user-color-2: #C62828;
  --vaadin-user-color-3: #F57C00;
  --vaadin-user-color-4: #7B1FA2;
  --vaadin-user-color-5: #00838F;
  --vaadin-user-color-6: #558B2F;
  --vaadin-user-color-7: #D32F2F;
  --vaadin-user-color-8: #1976D2;
  --vaadin-user-color-9: #E64A19;
}