Odoo テーマ SCSS 変数リファレンス
重要な読み込み順序のルール
テーマの SCSS ファイルは、Odoo のコア変数が定義される前に読み込まれます。
1. YOUR theme's primary_variables.scss (via prepend) ← FIRST
2. Odoo core primary_variables.scss ← SECOND
CONSEQUENCE: CANNOT use map-merge() with core variables!
誤り：$o-color-palettes: map-merge($o-color-palettes, (...)); → 未定義変数エラー
正しい：map-merge を使わず、単独の変数を定義します。
1. $o-theme-font-configs — Google Fonts
$o-theme-font-configs: (
'<Font Name>': (
'family': (<CSS font-family list>), // Required
'url': '<Google Fonts query param>', // Required — NOT the full URL!
'properties': ( // Optional: per-context overrides
'<font-alias>': ( '<key>': <value> ),
),
),
);
重要：'url' キーにはクエリパラメーターのみを指定します。
// CORRECT
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
// WRONG — do NOT include full URL
'url': 'https://fonts.googleapis.com/css?family=Poppins:300,400,700'
フォントウェイトの形式
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
// Light Light-i Regular Regular-i SemiBold ...
// Number alone = normal, Number + 'i' = italic
複数語のフォント名
'url': 'Open+Sans:300,300i,400,400i,700,700i'
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700'
フォントエイリアス（'properties' 用）
| エイリアス | 対応先 | 用途 |
|---|
'base' | 'font' | 本文テキスト |
'headings' | 'headings-font' | すべての見出し |
'navbar' | 'navbar-font' | ナビゲーション |
'buttons' | 'buttons-font' | ボタン |
完全な例
$o-theme-font-configs: (
'Poppins': (
'family': ('Poppins', sans-serif),
'url': 'Poppins:300,300i,400,400i,500,500i,600,600i,700,700i',
'properties': (
'base': ( 'font-size-base': (15 / 16) * 1rem ),
),
),
'Playfair Display': (
'family': ('Playfair Display', serif),
'url': 'Playfair+Display:400,400i,700,700i',
),
);
アラビア語／RTL フォント
$o-theme-font-configs: (
'IBM Plex Sans Arabic': (
'family': ('IBM Plex Sans Arabic', sans-serif),
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700',
),
'Cairo': (
'family': ('Cairo', sans-serif),
'url': 'Cairo:200,300,400,500,600,700,800,900',
),
);
2. $o-color-palettes — カラーシステム
5 つのセマンティックカラー
| 色 | 意味 | 一般的な用途 |
|---|
o-color-1 | プライマリ／アクセント | ブランドカラー、ボタン、リンク |
o-color-2 | セカンダリ | アクセント、セカンダリボタン |
o-color-3 | 明るい背景 | セクションの背景、カード |
o-color-4 | 白／最も明るい色 | コンテンツの背景（#FFFFFF） |
o-color-5 | ダーク／テキスト | 見出し、フッター、暗いセクション |
カラーの組み合わせ（o_cc1 ～ o_cc5）
| クラス | 背景 | 用途 |
|---|
o_cc1 | o-color-4（白） | メインコンテンツ |
o_cc2 | o-color-3（明るい色） | 交互に配置するセクション |
o_cc3 | o-color-2（セカンダリ） | アクセントセクション |
o_cc4 | o-color-1（プライマリ） | CTA セクション |
o_cc5 | o-color-5（ダーク） | フッター、暗いセクション |
パレットの構造
$o-color-palettes: map-merge($o-color-palettes, (
'my-palette': (
'o-color-1': #09294F,
'o-color-2': #FFA807,
'o-color-3': #F6F4F0,
'o-color-4': #FFFFFF,
'o-color-5': #1B212C,
// Component assignments
'menu': 1,
'footer': 5,
'copyright': 5,
// Color combination overrides
'o-cc5-link': 'o-color-4',
'o-cc5-btn-primary': 'o-color-2',
),
));
注記：$o-color-palettes を使った map-merge が機能するのは、テーマ以外のモジュールのみです。prepend を使用するテーマでは、代わりに 'color-palettes-name' を指定して $o-website-values-palettes を使用してください。
HTML での使用方法
<section class="o_cc o_cc1 pt32 pb32"></section>
<section class="o_cc o_cc2 pt32 pb32"></section>
<section class="o_cc o_cc5 pt32 pb32"></section>
色の導出（使用できる色が 2 色のみの場合）
o-color-3 = lighten(primary, 45%)
o-color-4 = #FFFFFF
o-color-5 = darken(primary, 40%) or #191A19
3. $o-website-values-palettes — マスター設定（115 個以上のキー）
クイックリファレンス
| カテゴリ | 数 | 説明 |
|---|
| タイポグラフィとフォント | 13 | フォントファミリーの設定 |
| フォントサイズ | 13 | ベースサイズと見出しサイズ |
| 行の高さ | 11 | テキストの間隔 |
| マージン | 22 | 見出しと段落のマージン |
| ボタン | 17 | ボタンのスタイル設定 |
| 入力欄 | 12 | フォームフィールドのスタイル設定 |
| ヘッダー | 13 | ヘッダー／ナビゲーションの設定 |
| フッター | 3 | フッターの設定 |
| リンク | 1 | 下線の動作 |
| レイアウト | 3 | ページレイアウト |
| 色とグラデーション | 5 | パレットとグラデーション |
| Google Fonts | 2 | 追加フォントの読み込み |
3.1 タイポグラフィとフォント
| キー | 説明 |
|---|
'font' | サイト全体のベースフォント |
'headings-font' | H1～H6 のフォント |
'navbar-font' | ナビゲーションメニューのフォント |
'buttons-font' | ボタンテキストのフォント |
'h2-font' ～ 'h6-font' | 個別の見出しフォント |
'display-1-font' ～ 'display-4-font' | ディスプレイテキストのフォント |
3.2 フォントサイズ
| キー | デフォルト | 説明 |
|---|
'font-size-base' | 1rem | ベースのフォントサイズ（16px） |
'small-font-size' | 0.875rem | 小さいテキスト（14px） |
'h1-font-size' ～ 'h6-font-size' | 計算値 | 見出しサイズ |
'display-1-font-size' ～ 'display-6-font-size' | 5rem～2.5rem | ディスプレイサイズ |
3.3 行の高さとマージン
| キー | デフォルト | 説明 |
|---|
'body-line-height' | 1.5 | 本文テキスト |
'headings-line-height' | 1.2 | すべての見出し |
'h2-line-height' ～ 'h6-line-height' | 継承 | 個別設定 |
'paragraph-margin-top' | 0 | 段落の上マージン |
'paragraph-margin-bottom' | 16px | 段落の下マージン |
'headings-margin-top' / 'headings-margin-bottom' | 0 / 0.5rem | 見出しのマージン |
3.4 ボタン（17 個のキー）
| Key | 説明 |
|---|
'btn-padding-y' / 'btn-padding-x' | デフォルトのパディング |
'btn-font-size' | フォントサイズ |
'btn-padding-y-sm' / 'btn-padding-x-sm' | 小さいボタン |
'btn-padding-y-lg' / 'btn-padding-x-lg' | 大きいボタン |
'btn-border-width' | 境界線の太さ |
'btn-border-radius' / -sm / -lg | 角の丸み |
'btn-primary-outline' | プライマリをアウトラインにする（bool） |
'btn-secondary-outline' | セカンダリをアウトラインにする（bool） |
'btn-primary-flat' / 'btn-secondary-flat' | フラットスタイル（bool） |
'btn-ripple' | マテリアルのリップル効果（bool） |
3.5 入力欄（12 個のキー）
| Key | 説明 |
|---|
'input-padding-y' / 'input-padding-x' | 入力欄のパディング |
'input-font-size' | 入力欄のフォントサイズ |
'input-border-width' | 境界線の太さ |
'input-border-radius' / -sm / -lg | 角の丸み |
3.6 ヘッダーとナビゲーション（13 個のキー）
| Key | 値 | 説明 |
|---|
'header-template' | 'default' / 'hamburger' / 'vertical' / 'sidebar' | ヘッダーのレイアウト |
'header-links-style' | 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom' | リンクのスタイル |
'header-font-size' | CSS length | ヘッダーテキストのサイズ |
'logo-height' | CSS length | ロゴの高さ |
'fixed-logo-height' | CSS length | 固定時のロゴの高さ |
'hamburger-position' | 'left' / 'center' / 'right' | デスクトップでの位置 |
'hamburger-position-mobile' | 'left' / 'center' / 'right' | モバイルでの位置 |
3.7 フッター（3 個のキー）
| Key | 値 | 説明 |
|---|
'footer-template' | 'default' / 'centered' / 'minimalist' / 'links' / 'descriptive' | レイアウト |
'footer-effect' | null / 'slideout_slide_hover' / 'slideout_shadow' | アニメーション |
'footer-scrolltop' | boolean | ページ上部へ戻るボタン |
3.8 リンクとレイアウト
| Key | 値 | 説明 |
|---|
'link-underline' | 'never' / 'hover' / 'always' | 下線の動作 |
'layout' | 'full' / 'boxed' | ページレイアウト |
'body-image' | URL | 背景画像 |
3.9 色とグラデーション
| Key | 説明 |
|---|
'color-palettes-name' | 有効なカラーパレット名 |
'menu-gradient' | メニューの背景グラデーション |
'footer-gradient' | フッターの背景グラデーション |
完全な例 — モダンな企業向けテーマ
$o-website-values-palettes: (
(
'color-palettes-name': 'my-corporate-palette',
// Typography
'font': 'Inter',
'headings-font': 'Inter',
'navbar-font': 'Inter',
'buttons-font': 'Inter',
'font-size-base': 1rem,
'headings-line-height': 1.3,
'body-line-height': 1.6,
// Header
'header-template': 'default',
'header-links-style': 'default',
'logo-height': 48px,
'fixed-logo-height': 36px,
// Buttons
'btn-padding-y': 0.75rem,
'btn-padding-x': 1.5rem,
'btn-border-radius': 8px,
'btn-ripple': true,
// Inputs
'input-padding-y': 0.75rem,
'input-border-radius': 8px,
// Footer
'footer-template': 'default',
'footer-scrolltop': true,
// Links
'link-underline': 'hover',
'layout': 'full',
),
);
タイポグラフィの倍率
$o-theme-h1-font-size-multiplier: (64 / 16); // 64px → 4.0
$o-theme-h2-font-size-multiplier: (48 / 16); // 48px → 3.0
$o-theme-h3-font-size-multiplier: (32 / 16); // 32px → 2.0
$o-theme-h4-font-size-multiplier: (24 / 16); // 24px → 1.5
$o-theme-h5-font-size-multiplier: (20 / 16); // 20px → 1.25
$o-theme-h6-font-size-multiplier: (16 / 16); // 16px → 1.0 (FIXED!)
