Odoo Theme SCSS Variable Reference

Critical Load Order Rule

Theme SCSS files load BEFORE core Odoo variables are defined:

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!

WRONG: $o-color-palettes: map-merge($o-color-palettes, (...)); → Undefined variable error RIGHT: Define standalone variables without 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> ),
        ),
    ),
);

CRITICAL: The 'url' key contains only the query parameter:

// 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'

Font Weight Format

'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
//      Light  Light-i  Regular Regular-i SemiBold ...
// Number alone = normal, Number + 'i' = italic

Multi-word Font Names

'url': 'Open+Sans:300,300i,400,400i,700,700i'
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700'

Font Aliases (for 'properties')

Alias	Maps To	Usage
'base'	'font'	Body text
'headings'	'headings-font'	All headings
'navbar'	'navbar-font'	Navigation
'buttons'	'buttons-font'	Buttons

Complete Example

$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',
    ),
);

Arabic/RTL Fonts

$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 — Color System

The Five Semantic Colors

Color	Meaning	Typical Usage
o-color-1	Primary/Accent	Brand color, buttons, links
o-color-2	Secondary	Accent, secondary buttons
o-color-3	Light Background	Section backgrounds, cards
o-color-4	White/Lightest	Content background (#FFFFFF)
o-color-5	Dark/Text	Headings, footer, dark sections

Color Combinations (o_cc1 - o_cc5)

Class	Background	Usage
o_cc1	o-color-4 (White)	Main content
o_cc2	o-color-3 (Light)	Alternate sections
o_cc3	o-color-2 (Secondary)	Accent sections
o_cc4	o-color-1 (Primary)	CTA sections
o_cc5	o-color-5 (Dark)	Footer, dark

Palette Structure

$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',
    ),
));

NOTE: map-merge with $o-color-palettes works ONLY in non-theme modules. In themes (which use prepend), use $o-website-values-palettes with 'color-palettes-name' instead.

HTML Usage

<section class="o_cc o_cc1 pt32 pb32"><!-- White bg --></section>
<section class="o_cc o_cc2 pt32 pb32"><!-- Light bg --></section>
<section class="o_cc o_cc5 pt32 pb32"><!-- Dark bg --></section>

Color Derivation (when only 2 colors are available)

o-color-3 = lighten(primary, 45%)
o-color-4 = #FFFFFF
o-color-5 = darken(primary, 40%) or #191A19

---

3. $o-website-values-palettes — Master Configuration (115+ Keys)

Quick Reference

Category	Count	Description
Typography & Fonts	13	Font family configuration
Font Sizes	13	Base and heading sizes
Line Heights	11	Text spacing
Margins	22	Heading and paragraph margins
Buttons	17	Button styling
Inputs	12	Form field styling
Header	13	Header/navigation config
Footer	3	Footer config
Links	1	Underline behavior
Layout	3	Page layout
Colors & Gradients	5	Palette and gradients
Google Fonts	2	Additional font loading

3.1 Typography & Fonts

Key	Description
'font'	Base font for entire site
'headings-font'	Font for H1-H6
'navbar-font'	Navigation menu font
'buttons-font'	Button text font
'h2-font' to 'h6-font'	Individual heading fonts
'display-1-font' to 'display-4-font'	Display text fonts

3.2 Font Sizes

Key	Default	Description
'font-size-base'	1rem	Base font size (16px)
'small-font-size'	0.875rem	Small text (14px)
'h1-font-size' to 'h6-font-size'	Calculated	Heading sizes
'display-1-font-size' to 'display-6-font-size'	5rem-2.5rem	Display sizes

3.3 Line Heights & Margins

Key	Default	Description
'body-line-height'	1.5	Body text
'headings-line-height'	1.2	All headings
'h2-line-height' to 'h6-line-height'	Inherits	Individual
'paragraph-margin-top'	0	Paragraph top
'paragraph-margin-bottom'	16px	Paragraph bottom
'headings-margin-top' / 'headings-margin-bottom'	0 / 0.5rem	Headings

3.4 Buttons (17 Keys)

Key	Description
'btn-padding-y' / 'btn-padding-x'	Default padding
'btn-font-size'	Font size
'btn-padding-y-sm' / 'btn-padding-x-sm'	Small button
'btn-padding-y-lg' / 'btn-padding-x-lg'	Large button
'btn-border-width'	Border thickness
'btn-border-radius' / -sm / -lg	Corner radius
'btn-primary-outline'	Primary as outline (bool)
'btn-secondary-outline'	Secondary as outline (bool)
'btn-primary-flat' / 'btn-secondary-flat'	Flat style (bool)
'btn-ripple'	Material ripple effect (bool)

3.5 Inputs (12 Keys)

Key	Description
'input-padding-y' / 'input-padding-x'	Input padding
'input-font-size'	Input font size
'input-border-width'	Border thickness
'input-border-radius' / -sm / -lg	Corner radius

3.6 Header & Navigation (13 Keys)

Key	Values	Description
'header-template'	'default' / 'hamburger' / 'vertical' / 'sidebar'	Header layout
'header-links-style'	'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'	Link style
'header-font-size'	CSS length	Header text size
'logo-height'	CSS length	Logo height
'fixed-logo-height'	CSS length	Logo when fixed
'hamburger-position'	'left' / 'center' / 'right'	Desktop position
'hamburger-position-mobile'	'left' / 'center' / 'right'	Mobile position

3.7 Footer (3 Keys)

Key	Values	Description
'footer-template'	'default' / 'centered' / 'minimalist' / 'links' / 'descriptive'	Layout
'footer-effect'	null / 'slideout_slide_hover' / 'slideout_shadow'	Animation
'footer-scrolltop'	boolean	Scroll-to-top button

3.8 Links & Layout

Key	Values	Description
'link-underline'	'never' / 'hover' / 'always'	Underline behavior
'layout'	'full' / 'boxed'	Page layout
'body-image'	URL	Background image

3.9 Colors & Gradients

Key	Description
'color-palettes-name'	Active color palette name
'menu-gradient'	Menu background gradient
'footer-gradient'	Footer background gradient

---

Complete Example — Modern Corporate Theme

$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',
    ),
);

Typography Multipliers

$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!)