diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index c2391df2cf9..65f38ffda73 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -541,6 +541,7 @@ This module provides the core of the Odoo Web Client.
         'web._assets_primary_variables': [
             'web/static/src/scss/primary_variables.scss',
             'web/static/src/**/**/*.variables.scss',
+            'base/static/src/scss/onboarding.variables.scss',
         ],
         'web._assets_secondary_variables': [
             'web/static/src/scss/secondary_variables.scss',
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 03e04c3081a..224d39d9b3a 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -1,26 +1,8 @@
 // = Onboarding Panel
 // ============================================================================
+$o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
+
 .o_onboarding_main {
-    $o-onboarding-base-time: 0.5s;
-    $o-onboarding-dot-size: 20px;
-    $o-onboarding-progress-size: 2px;
-    $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4;
-
-    $o-onboarding-colors: (
-        'blue': (
-            'bg': (#60ABC3, #4187AE),
-            'ui': (#fcb157, #FBEEC8),
-        ),
-        'orange': (
-            'bg': (#DA9D77, #B9684F),
-            'ui': (#0774f4, #68B3C9),
-        ),
-        'violet': (
-            'bg': (#6070C3, #475DA4),
-            'ui': (#F39D9B, #FBEEC8),
-        ),
-    );
-
     background: white center top;
     background-size: cover;
 
diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.scss b/odoo/addons/base/static/src/scss/onboarding.variables.scss
new file mode 100644
index 00000000000..6f433e6628a
--- /dev/null
+++ b/odoo/addons/base/static/src/scss/onboarding.variables.scss
@@ -0,0 +1,18 @@
+$o-onboarding-base-time: 0.5s !default;
+$o-onboarding-dot-size: 20px !default;
+$o-onboarding-progress-size: 2px !default;
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#60ABC3, #4187AE),
+        'ui': (#fcb157, #FBEEC8),
+    ),
+    'orange': (
+        'bg': (#DA9D77, #B9684F),
+        'ui': (#0774f4, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#6070C3, #475DA4),
+        'ui': (#F39D9B, #FBEEC8),
+    ),
+) !default;