diff --git a/addons/account/views/account_payment_term_views.xml b/addons/account/views/account_payment_term_views.xml
index ae1fb0fa380..5ce1f4fdb5d 100644
--- a/addons/account/views/account_payment_term_views.xml
+++ b/addons/account/views/account_payment_term_views.xml
@@ -79,7 +79,7 @@
                                     on
                                     <field name="example_date" class="fw-bold oe_inline"/>
                                 </div>
-                                <div colspan="2">
+                                <div colspan="2" class="py-1 bg-view">
                                     <field name="note" placeholder="e.g. Payment terms: 30 days after invoice date"/>
                                     <field name="example_preview_discount" class="ps-2"
                                            invisible="not early_discount or not display_on_invoice"/>
diff --git a/addons/fleet/views/fleet_vehicle_views.xml b/addons/fleet/views/fleet_vehicle_views.xml
index 2db560e8abd..9102efc2e5f 100644
--- a/addons/fleet/views/fleet_vehicle_views.xml
+++ b/addons/fleet/views/fleet_vehicle_views.xml
@@ -311,10 +311,10 @@
                                             <field name="contract_count"/>
                                             Contract(s)
                                             <span t-if="record.contract_renewal_due_soon.raw_value and !record.contract_renewal_overdue.raw_value"
-                                                class="fa fa-exclamation-triangle" t-att-style="'color:orange'" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
+                                                class="fa fa-exclamation-triangle text-warning" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
                                             </span>
                                              <span t-if="record.contract_renewal_overdue.raw_value"
-                                                class="fa fa-exclamation-triangle" t-att-style="'color:red;'" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
+                                                class="fa fa-exclamation-triangle text-danger" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
                                             </span>
                                         </a>
                                         <field name="activity_ids" widget="kanban_activity"/>
diff --git a/addons/gamification/views/gamification_goal_views.xml b/addons/gamification/views/gamification_goal_views.xml
index 59b1b22b79a..d892a714190 100644
--- a/addons/gamification/views/gamification_goal_views.xml
+++ b/addons/gamification/views/gamification_goal_views.xml
@@ -175,7 +175,7 @@
                                     <t t-if="record.definition_display.raw_value == 'boolean'">
                                         <div class="o_goal_state">
                                             <t t-if="record.state.raw_value=='reached'"><i role="img" class="text-success fa fa-check fa-3x" title="Goal Reached" aria-label="Goal Reached"/></t>
-                                            <t t-if="record.state.raw_value=='inprogress'"><i role="img" class="fa fa-clock-o fa-3x" title="Goal in Progress" aria-label="Goal in Progress"/></t>
+                                            <t t-if="record.state.raw_value=='inprogress'"><i role="img" class="text-700 fa fa-clock-o fa-3x" title="Goal in Progress" aria-label="Goal in Progress"/></t>
                                             <t t-if="record.state.raw_value=='failed'"><i role="img" class="text-danger fa fa-times fa-3x" title="Goal Failed" aria-label="Goal Failed"/></t>
                                         </div>
                                     </t>
diff --git a/addons/hr/static/src/components/department_chart/department_chart.xml b/addons/hr/static/src/components/department_chart/department_chart.xml
index 0aca97f4ce3..d2291eebbfa 100644
--- a/addons/hr/static/src/components/department_chart/department_chart.xml
+++ b/addons/hr/static/src/components/department_chart/department_chart.xml
@@ -35,7 +35,7 @@
                     <span class="department_name ms-2">
                         <t t-esc="dept.name"/>
                     </span>
-                    <a class="badge rounded-pill bg-white border" role="button"
+                    <a class="badge rounded-pill bg-300 border px-2" role="button"
                         title="Show employees"
                         t-on-click.prevent="() => this.openDepartmentEmployees(dept.id)">
                         <t t-esc="dept.employees"/>
diff --git a/addons/hr_expense/static/src/components/expense_dashboard.xml b/addons/hr_expense/static/src/components/expense_dashboard.xml
index cb7fb0199fd..7137be77a3f 100644
--- a/addons/hr_expense/static/src/components/expense_dashboard.xml
+++ b/addons/hr_expense/static/src/components/expense_dashboard.xml
@@ -7,7 +7,7 @@
                 <t t-set="data" t-value="expense[1]"/>
                 <div t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column p-3 border-bottom text-center"
                      t-att-data-tooltip="data['tooltip']">
-                    <span t-out="renderMonetaryField(data['amount'], data['currency'])" class="h2 m-0 text-odoo"/>
+                    <span t-out="renderMonetaryField(data['amount'], data['currency'])" class="h2 m-0 text-primary"/>
                     <b class="mx-2" t-out="data['description']"/>
                 </div>
                 <div t-if="name !== 'approved'" t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column p-3 border-bottom text-center">
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.xml b/addons/hr_holidays/static/src/dashboard/time_off_card.xml
index 3c43e6b1020..88f03ea653e 100644
--- a/addons/hr_holidays/static/src/dashboard/time_off_card.xml
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-    <div t-name="hr_holidays.TimeOffCard" class="o_timeoff_card py-3 text-odoo">
+    <div t-name="hr_holidays.TimeOffCard" class="o_timeoff_card py-3 text-primary">
         <t t-set="data" t-value="props.data"/>
         <t t-set="duration" t-value="props.requires_allocation ? data.virtual_remaining_leaves : data.virtual_leaves_taken"/>
         <t t-set="parsed_duration" t-value="formatNumber(this.lang, duration)"/>
diff --git a/addons/hr_holidays/views/hr_leave_type_views.xml b/addons/hr_holidays/views/hr_leave_type_views.xml
index 7e786b2007d..25d5e9226f9 100644
--- a/addons/hr_holidays/views/hr_leave_type_views.xml
+++ b/addons/hr_holidays/views/hr_leave_type_views.xml
@@ -28,7 +28,7 @@
                                 invisible="requires_allocation == 'no' or not id"
                                 help="Count of allocations for this time off type (approved or waiting for approbation) with a validity period starting this year.">
                             <div class="o_stat_info">
-                                <field name="allocation_count"/>
+                                <field name="allocation_count" class="o_stat_value"/>
                                 <span class="o_stat_text">Allocations</span>
                             </div>
                         </button>
@@ -39,7 +39,7 @@
                                 invisible="not id"
                                 help="Count of time off requests for this time off type (approved or waiting for approbation) with a start date in the current year.">
                             <div class="o_stat_info">
-                                <field name="group_days_leave"/>
+                                <field name="group_days_leave" class="o_stat_value"/>
                                 <span class="o_stat_text">Time Off</span>
                             </div>
                         </button>
@@ -50,7 +50,7 @@
                                 invisible="not id or accrual_count == 0"
                                 help="Count of plans linked to this time off type.">
                             <div class="o_stat_info">
-                                <field name="accrual_count"/>
+                                <field name="accrual_count" class="o_stat_value"/>
                                 <span class="o_stat_text">Accruals</span>
                             </div>
                         </button>
diff --git a/addons/hr_org_chart/static/src/fields/hr_org_chart.xml b/addons/hr_org_chart/static/src/fields/hr_org_chart.xml
index b6d10f59c97..2d36a182c29 100644
--- a/addons/hr_org_chart/static/src/fields/hr_org_chart.xml
+++ b/addons/hr_org_chart/static/src/fields/hr_org_chart.xml
@@ -55,7 +55,7 @@
                 data-bs-toggle="popover"
                 t-on-click="(event) => this._onOpenPopover(event, employee)">
             <a href="#"
-                t-attf-class="badge rounded-pill bg-white border {{employee.indirect_sub_count &lt; 10 ? 'px-2' : 'px-1' }}"
+                t-attf-class="badge rounded-pill bg-300 border {{employee.indirect_sub_count &lt; 10 ? 'px-2' : 'px-1' }}"
                 t-esc="employee.indirect_sub_count"
                 />
         </button>
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index c3b3a2385ef..f800157a231 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -24,11 +24,6 @@
 
         .o_job_activities {
             list-style-type: none;
-
-            .to-recruit {
-                color: $o-enterprise-color;
-                font-weight: bold;
-            }
         }
 
         .o_kanban_card_header_title {
diff --git a/addons/hr_recruitment/views/hr_job_views.xml b/addons/hr_recruitment/views/hr_job_views.xml
index 9dc822942ca..bf017cb6add 100644
--- a/addons/hr_recruitment/views/hr_job_views.xml
+++ b/addons/hr_recruitment/views/hr_job_views.xml
@@ -99,10 +99,10 @@
                                     </div>
                                     <ul class="col-5 o_job_activities">
                                         <li>
-                                            <a name="edit_job" type="edit" t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'to-recruit' : 'text-secondary' }}" groups="hr_recruitment.group_hr_recruitment_user">
+                                            <a name="edit_job" type="edit" t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'text-primary fw-bolder' : 'text-secondary' }}" groups="hr_recruitment.group_hr_recruitment_user">
                                                 <field name="no_of_recruitment"/> To Recruit
                                             </a>
-                                            <span t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'to-recruit' : 'text-secondary' }}" groups="!hr_recruitment.group_hr_recruitment_user">
+                                            <span t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'text-primary fw-bolder' : 'text-secondary' }}" groups="!hr_recruitment.group_hr_recruitment_user">
                                                 <field name="no_of_recruitment"/> To Recruit
                                             </span>
                                         </li>
diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index ff65717920f..e6bd73cf3ee 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -124,7 +124,7 @@
                                                     <field class="pe-1" name="is_favorite" widget="boolean_favorite" nolabel="1"/>
                                                     <strong><span t-esc="record.name.value"/></strong>
                                                 </div>
-                                                <div class="text-odoo">
+                                                <div class="text-primary">
                                                     <div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 fs-6 badge rounded-pill text-bg-success">
                                                         New
                                                     </div>
diff --git a/addons/mail/static/src/core/common/autoresize_input.scss b/addons/mail/static/src/core/common/autoresize_input.scss
index e008303ec03..49df2b303ed 100644
--- a/addons/mail/static/src/core/common/autoresize_input.scss
+++ b/addons/mail/static/src/core/common/autoresize_input.scss
@@ -1,11 +1,9 @@
-.o-mail-AutoresizeInput:not([disabled]):focus {
-    border-color: map-get($theme-colors, "dark") !important;
-    background-color: $white;
-}
+.o-mail-AutoresizeInput {
+    --o-input-border-color: transparent;
 
-.o-mail-AutoresizeInput:not([disabled]):hover {
-    background-color: $white;
-    &:not(:focus) {
-        border: $border-width solid $border-color !important;
+    &:not([disabled]) {
+        &:hover, &:focus {
+            --o-input-border-color: #{$border-color};
+        }
     }
 }
diff --git a/addons/mail/static/src/core/common/autoresize_input.xml b/addons/mail/static/src/core/common/autoresize_input.xml
index f7688cafc14..e056444127f 100644
--- a/addons/mail/static/src/core/common/autoresize_input.xml
+++ b/addons/mail/static/src/core/common/autoresize_input.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.AutoresizeInput">
     <input
-        class="o-mail-AutoresizeInput text-truncate px-1 border-1 border-transparent"
+        class="o-mail-AutoresizeInput o_input px-1 border-1 text-truncate"
         t-attf-class="{{ props.className }}"
         t-attf-placeholder="{{ props.placeholder }}"
         t-att-disabled="!props.enabled"
diff --git a/addons/mail/static/src/core/common/core.dark.scss b/addons/mail/static/src/core/common/core.dark.scss
index 20349cdc6fc..e9338a17fd7 100644
--- a/addons/mail/static/src/core/common/core.dark.scss
+++ b/addons/mail/static/src/core/common/core.dark.scss
@@ -1,5 +1,8 @@
 .o-discuss-badge {
-    --o-discuss-badge-bg: #{$primary}; // sync with --o-navbar-badge-bg
+    --o-discuss-badge-bg: #{map-get($o-theme-text-colors, 'primary')}; // sync with --o-navbar-badge-bg
+    &.o-muted {
+        --o-discuss-badge-bg: #{$gray-300};
+    }
 }
 
 a.o_mail_redirect, a.o_channel_redirect {
diff --git a/addons/mail/static/src/core/common/core.scss b/addons/mail/static/src/core/common/core.scss
index d193d3510a6..edf4529b370 100644
--- a/addons/mail/static/src/core/common/core.scss
+++ b/addons/mail/static/src/core/common/core.scss
@@ -8,7 +8,7 @@
 
 .o-discuss-badge {
     --o-discuss-badge-bg: #{$o-success}; // sync with --o-navbar-badge-bg
-    color: $white !important;
+    color: white !important;
     background-color: var(--o-discuss-badge-bg) !important;
 
     &.o-muted {
diff --git a/addons/mail/static/src/core/common/discuss.xml b/addons/mail/static/src/core/common/discuss.xml
index b9859ded5cd..1617f626d6f 100644
--- a/addons/mail/static/src/core/common/discuss.xml
+++ b/addons/mail/static/src/core/common/discuss.xml
@@ -22,7 +22,7 @@
                 <ImStatus t-if="thread and thread.type === 'chat' and thread.chatPartner" className="'me-1'" persona="thread.chatPartner" thread="thread" />
                 <div class="d-flex flex-grow-1 align-self-center align-items-center h-100 py-2">
                     <AutoresizeInput
-                        className="'o-mail-Discuss-threadName lead fw-bold flex-shrink-1 text-dark bg-view py-0'"
+                        className="'o-mail-Discuss-threadName lead fw-bold flex-shrink-1 text-dark py-0'"
                         enabled="thread.is_editable or thread.type === 'chat'"
                         onValidate.bind="renameThread"
                         value="thread.displayName"
@@ -31,7 +31,7 @@
                         <div class="flex-shrink-0 mx-2 py-2 border-start"/>
                         <t t-set="autogrowDescriptionPlaceholder">Add a description</t>
                         <AutoresizeInput
-                            className="'o-mail-Discuss-threadDescription flex-shrink-1 py-1 bg-view'"
+                            className="'o-mail-Discuss-threadDescription flex-shrink-1 py-1'"
                             enabled="thread.is_editable"
                             onValidate.bind="updateThreadDescription"
                             placeholder="thread.is_editable ? autogrowDescriptionPlaceholder : ''"
diff --git a/addons/mail/static/src/core/common/message.xml b/addons/mail/static/src/core/common/message.xml
index ba9818f35b1..45b3fbfa3e7 100644
--- a/addons/mail/static/src/core/common/message.xml
+++ b/addons/mail/static/src/core/common/message.xml
@@ -19,7 +19,7 @@
                             <img class="o-mail-Message-avatar w-100 h-100 rounded" t-att-src="authorAvatarUrl" t-att-class="authorAvatarAttClass"/>
                         </div>
                         <t t-elif="!message.isTransient">
-                            <small t-if="isActive and props.showDates" class="o-mail-Message-date text-muted opacity-50 ms-2">
+                            <small t-if="isActive and props.showDates" class="o-mail-Message-date text-muted opacity-75 ms-2">
                                 <t t-esc="messageService.dateSimple(message)"/>
                             </small>
                             <div t-else="" class="ms-2">
@@ -36,7 +36,7 @@
                                 <strong class="me-1 text-truncate"><t t-if="message.author" t-esc="message.author.name"/><t t-else="" t-esc="message.email_from"/></strong>
                             </span>
                             <t t-if="!isAlignedRight" t-call="mail.Message.notification"/>
-                            <small t-if="!message.is_transient" class="o-mail-Message-date text-muted opacity-50" t-att-class="{ 'me-2': !isAlignedRight }" t-att-title="message.datetimeShort">
+                            <small t-if="!message.is_transient" class="o-mail-Message-date text-muted opacity-75" t-att-class="{ 'me-2': !isAlignedRight }" t-att-title="message.datetimeShort">
                                 <t t-if="shouldDisplayAuthorName">- </t>
                                 <RelativeTime datetime="message.datetime"/>
                             </small>
diff --git a/addons/mail/static/src/core/common/navigable_list.xml b/addons/mail/static/src/core/common/navigable_list.xml
index 0a46b75f520..45fe0f5895c 100644
--- a/addons/mail/static/src/core/common/navigable_list.xml
+++ b/addons/mail/static/src/core/common/navigable_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NavigableList">
-        <div class="o-mail-NavigableList bg-white m-0 p-0" t-ref="root" t-att-class="props.class">
+        <div class="o-mail-NavigableList bg-view m-0 p-0" t-ref="root" t-att-class="props.class">
             <div t-if="show" class="o-open border" t-on-mousedown.prevent="">
                 <div t-if="props.isLoading" class="o-mail-NavigableList-item">
                     <a href="#" class="d-flex align-items-center w-100 py-2 px-4 gap-1">
diff --git a/addons/mail/static/src/core/common/thread.scss b/addons/mail/static/src/core/common/thread.scss
index ca51f24e391..a28bcfb8b3b 100644
--- a/addons/mail/static/src/core/common/thread.scss
+++ b/addons/mail/static/src/core/common/thread.scss
@@ -4,14 +4,6 @@
 .o-mail-Thread-newMessage {
     transition: opacity 0.5s;
 
-    hr {
-        border-color: lighten($o-brand-odoo, 15%) !important;
-    }
-
-    hr, span {
-        color: lighten($o-brand-odoo, 15%);
-    }
-
     span {
         font-size: 0.8rem;
     }
diff --git a/addons/mail/static/src/core/common/thread.xml b/addons/mail/static/src/core/common/thread.xml
index 590b26a6627..7e6e4ab9b90 100644
--- a/addons/mail/static/src/core/common/thread.xml
+++ b/addons/mail/static/src/core/common/thread.xml
@@ -24,7 +24,7 @@
                     </t>
                     <Transition t-if="props.thread.model === 'discuss.channel'"  visible="props.thread.seen_message_id === (prevMsg?.id ?? false)" name="'o-fade'" t-slot-scope="transition">
                         <div class="o-mail-Thread-newMessage d-flex align-items-center fw-bolder" t-att-class="{ 'opacity-0': transition.className.includes('o-fade-leave') }">
-                            <hr class="ms-2 flex-grow-1 border opacity-50"/><span class="px-2">New messages</span><hr class="me-2 flex-grow-1 border opacity-50"/>
+                            <hr class="ms-2 flex-grow-1 border border-danger opacity-50"/><span class="px-2 text-danger">New messages</span><hr class="me-2 flex-grow-1 border border-danger opacity-50"/>
                         </div>
                     </Transition>
                     <t t-if="msg.isNotification">
diff --git a/addons/mail/static/src/core/web/discuss_sidebar.dark.scss b/addons/mail/static/src/core/web/discuss_sidebar.dark.scss
index d57731b58fc..67967ec406f 100644
--- a/addons/mail/static/src/core/web/discuss_sidebar.dark.scss
+++ b/addons/mail/static/src/core/web/discuss_sidebar.dark.scss
@@ -1,5 +1,5 @@
 .o-mail-DiscussSidebar-item {
     &:hover, &.o-active {
-        background-color: $o-gray-100 !important;
+        background-color: $o-gray-300;
     }
 }
diff --git a/addons/mail/static/src/core/web/discuss_sidebar.scss b/addons/mail/static/src/core/web/discuss_sidebar.scss
index a8161683a4e..7ec391f9909 100644
--- a/addons/mail/static/src/core/web/discuss_sidebar.scss
+++ b/addons/mail/static/src/core/web/discuss_sidebar.scss
@@ -8,6 +8,6 @@
 
 .o-mail-DiscussSidebar-item {
     &:hover, &.o-active {
-        background-color: $o-gray-200 !important;
+        background-color: $o-gray-200;
     }
 }
diff --git a/addons/mail/static/src/core/web/notification_item.scss b/addons/mail/static/src/core/web/notification_item.scss
index c763005cd7b..f88f5c21934 100644
--- a/addons/mail/static/src/core/web/notification_item.scss
+++ b/addons/mail/static/src/core/web/notification_item.scss
@@ -1,29 +1,3 @@
-$o-mail-NotificationItem-background-color: $o-view-background-color !default;
-$o-mail-NotificationItem-hover-background-color: darken(
-    $o-mail-NotificationItem-background-color,
-    7%
-) !default;
-
-$o-mail-NotificationItem-muted-background-color: $gray-100 !default;
-$o-mail-NotificationItem-muted-hover-background-color:
-    darken($o-mail-NotificationItem-muted-background-color, 7%) !default;
-
-.o-mail-NotificationItem {
-    background-color: $o-mail-NotificationItem-background-color;
-
-    &:hover {
-        background-color: $o-mail-NotificationItem-hover-background-color;
-    }
-
-    &.o-muted {
-        background-color: $o-mail-NotificationItem-muted-background-color;
-
-        &:hover {
-            background-color: $o-mail-NotificationItem-muted-hover-background-color;
-        }
-    }
-}
-
 .o-mail-NotificationItem-badge {
     padding: 3px 6px !important;
 }
diff --git a/addons/mail/static/src/core/web/notification_item.xml b/addons/mail/static/src/core/web/notification_item.xml
index 71ec12c5287..1dab4cfba9e 100644
--- a/addons/mail/static/src/core/web/notification_item.xml
+++ b/addons/mail/static/src/core/web/notification_item.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.NotificationItem">
     <ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
-        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'o-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
+        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
             <div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
                 <img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
                 <t t-slot="icon"/>
diff --git a/addons/mail/static/src/discuss/core/web/channel_selector.xml b/addons/mail/static/src/discuss/core/web/channel_selector.xml
index e5a6663429b..28fd596dec7 100644
--- a/addons/mail/static/src/discuss/core/web/channel_selector.xml
+++ b/addons/mail/static/src/discuss/core/web/channel_selector.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="discuss.ChannelSelector">
-    <div class="o-discuss-ChannelSelector d-flex flex-wrap form-control rounded bg-white p-1" t-att-class="props.class" t-ref="root">
+    <div class="o-discuss-ChannelSelector d-flex flex-wrap form-control rounded p-1" t-att-class="props.class" t-ref="root">
         <TagsList t-if="props.multiple" tags="tagsList"/>
         <input
             class="text-truncate form-control flex-grow-1 border-0 px-2 py-0"
diff --git a/addons/mail/static/tests/messaging_menu/messaging_menu_tests.js b/addons/mail/static/tests/messaging_menu/messaging_menu_tests.js
index 5d6d1b4207e..931070c40bf 100644
--- a/addons/mail/static/tests/messaging_menu/messaging_menu_tests.js
+++ b/addons/mail/static/tests/messaging_menu/messaging_menu_tests.js
@@ -443,7 +443,7 @@ QUnit.test("mark unread channel as read", async (assert) => {
     await triggerEvents(".o-mail-NotificationItem", ["mouseenter"]);
     await click(".o-mail-NotificationItem [title='Mark As Read']");
     assert.verifySteps(["set_last_seen_message"]);
-    await contains(".o-mail-NotificationItem.o-muted");
+    await contains(".o-mail-NotificationItem.text-muted");
     await triggerEvents(".o-mail-NotificationItem", ["mouseenter"]);
     await contains(".o-mail-NotificationItem [title='Mark As Read']", { count: 0 });
     await contains(".o-mail-ChatWindow", { count: 0 });
diff --git a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
index ae462c8b3f5..4b95ad89508 100644
--- a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
@@ -16,7 +16,7 @@
                             Add to favorite filters
                         </div>
                         <div class="d-inline-flex">
-                            <input t-ref="autofocus" type="text" class="o_mass_mailing_filter_name w-auto ms-2"
+                            <input t-ref="autofocus" type="text" class="o_mass_mailing_filter_name o_input w-auto ms-2"
                                 placeholder='e.g. "VIP Customers"' t-on-keydown="onFilterNameInputKeydown"/>
                             <button class="btn btn-sm btn-primary o_mass_mailing_btn_save_filter mx-2" t-on-click="onSaveFilter">
                                 Add
diff --git a/addons/onboarding/static/src/scss/onboarding.variables.dark.scss b/addons/onboarding/static/src/scss/onboarding.variables.dark.scss
index b70b0f155af..3736c78ab21 100644
--- a/addons/onboarding/static/src/scss/onboarding.variables.dark.scss
+++ b/addons/onboarding/static/src/scss/onboarding.variables.dark.scss
@@ -2,5 +2,5 @@
 // ============================================================================
 // No CSS hacks, variables overrides only
 
-$o-onboarding-color-blue: #516db3 !default;
+$o-onboarding-color-blue: #7188c1 !default;
 $o-onboarding-color-orange: #c67c7a !default;
diff --git a/addons/project/models/project_update.py b/addons/project/models/project_update.py
index 5fe9f7705b7..4cb11c5e7dd 100644
--- a/addons/project/models/project_update.py
+++ b/addons/project/models/project_update.py
@@ -11,10 +11,10 @@ from odoo.tools import formatLang
 
 STATUS_COLOR = {
     'on_track': 20,  # green / success
-    'at_risk': 2,  # orange
+    'at_risk': 22,  # orange
     'off_track': 23,  # red / danger
-    'on_hold': 4,  # light blue
-    'done': 5,  # purple
+    'on_hold': 21,  # light blue
+    'done': 24,  # purple
     False: 0,  # default grey -- for studio
     # Only used in project.task
     'to_define': 0,
diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss
index f9aa528953e..c8c51292b80 100644
--- a/addons/project/static/src/scss/project_dashboard.scss
+++ b/addons/project/static/src/scss/project_dashboard.scss
@@ -51,10 +51,6 @@
         }
     }
 
-    .o_column_progress .bg-purple {
-        background-color: purple;
-    }
-
     @include media-breakpoint-down(md) {
         .o_view_nocontent {
             top: 15%;
diff --git a/addons/project/static/src/scss/project_widgets.scss b/addons/project/static/src/scss/project_widgets.scss
index 9fc5b841627..cbfa2bee949 100644
--- a/addons/project/static/src/scss/project_widgets.scss
+++ b/addons/project/static/src/scss/project_widgets.scss
@@ -20,6 +20,9 @@
     &.o_color_bubble_23 {
         background-color: $o-danger;
     }
+    &.o_color_bubble_24 {
+        background-color: $primary;
+    }
 }
 
 .o_status_with_color {
diff --git a/addons/project/static/src/utils/project_utils.js b/addons/project/static/src/utils/project_utils.js
index 7f24c49393f..2e12191cd59 100644
--- a/addons/project/static/src/utils/project_utils.js
+++ b/addons/project/static/src/utils/project_utils.js
@@ -4,11 +4,11 @@
  * List of colors according to the selection value, see `project_update.py`
  */
 export const STATUS_COLORS = {
-    'on_track': 10,
-    'at_risk': 2,
-    'off_track': 1,
-    'on_hold': 4,
-    'done': 5,
+    'on_track': 20,
+    'at_risk': 22,
+    'off_track': 23,
+    'on_hold': 21,
+    'done': 24,
 };
 
 export const STATUS_COLOR_PREFIX = 'o_status_bubble mx-0 o_color_bubble_';
diff --git a/addons/project/static/tests/tours/personal_stage_tour.js b/addons/project/static/tests/tours/personal_stage_tour.js
index 262aae3784d..26184b04175 100644
--- a/addons/project/static/tests/tours/personal_stage_tour.js
+++ b/addons/project/static/tests/tours/personal_stage_tour.js
@@ -68,7 +68,7 @@ registry.category("web_tour.tours").add('personal_stage_tour', {
     trigger: '.o-kanban-button-new',
 }, {
     content: "Create a new personal task",
-    trigger: 'input.o_input',
+    trigger: 'input.o_input:not(.o_searchview_input)',
     run: 'text New Test Task',
 }, {
     content: "Confirm create",
diff --git a/addons/project_todo/static/src/components/todo_editable_breadcrumb_name/todo_editable_breadcrumb_name.scss b/addons/project_todo/static/src/components/todo_editable_breadcrumb_name/todo_editable_breadcrumb_name.scss
index bffa0ea8f6d..c68e36c7ea7 100644
--- a/addons/project_todo/static/src/components/todo_editable_breadcrumb_name/todo_editable_breadcrumb_name.scss
+++ b/addons/project_todo/static/src/components/todo_editable_breadcrumb_name/todo_editable_breadcrumb_name.scss
@@ -2,19 +2,11 @@
     width: 100%;
     text-overflow: clip;
     overflow: hidden;
-    border: none;
     padding: 0px 5px 0px 2px;
     color: $o-gray-700;
-    border-bottom: $input-border-width solid transparent;
     transition: border-color 0.3s;
 
-    &:hover {
-        border-bottom-color: $o-brand-primary;
-    }
-
     &:focus {
-        outline: 1px solid #ccc;
-        outline-offset: -1px;
         color: $dark;
     }
 
@@ -30,4 +22,3 @@
         background-color: inherit;
     }
 }
-
diff --git a/addons/purchase/static/src/views/purchase_dashboard.xml b/addons/purchase/static/src/views/purchase_dashboard.xml
index c0535ee338f..683931f025b 100644
--- a/addons/purchase/static/src/views/purchase_dashboard.xml
+++ b/addons/purchase/static/src/views/purchase_dashboard.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <t t-name="purchase.PurchaseDashboard">
-        <div class="o_purchase_dashboard container-fluid py-4 border-bottom bg-white">
+        <div class="o_purchase_dashboard container-fluid py-4 border-bottom bg-view">
             <div class="row justify-content-between gap-3 gap-lg-0">
                 <div class="col-12 col-lg-5 col-xl-5 col-xxl-4 flex-grow-1 flex-lg-grow-0 flex-shrink-0">
                     <div class="grid gap-4">
@@ -56,7 +56,7 @@
                                 <div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
                                     Avg Order Value
                                 </div>
-                                <div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-light">
+                                <div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-view">
                                     <span><t t-out="purchaseData['all_avg_order_value']"/></span>
                                 </div>
                             </div>
@@ -64,7 +64,7 @@
                                 <div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center py-2 justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
                                     Purchased Last 7 Days
                                 </div>
-                                <div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-light">
+                                <div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-view">
                                     <span><t t-out="purchaseData['all_total_last_7_days']"/></span>
                                 </div>
                             </div>
@@ -74,7 +74,7 @@
                                 <div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
                                     Lead Time to Purchase
                                 </div>
-                                <div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-light">
+                                <div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-view">
                                     <span><t t-out="purchaseData['all_avg_days_to_purchase']"/> &#160;Days</span>
                                 </div>
                             </div>
@@ -82,7 +82,7 @@
                                 <div class="g-col-12 g-col-md-4 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
                                     RFQs Sent Last 7 Days
                                 </div>
-                                <div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-light">
+                                <div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-view">
                                     <span><t t-out="purchaseData['all_sent_rfqs']"/></span>
                                 </div>
                             </div>
diff --git a/addons/survey/static/src/scss/survey_question_views.scss b/addons/survey/static/src/scss/survey_question_views.scss
index c7ad5f43243..e2628dbea8c 100644
--- a/addons/survey/static/src/scss/survey_question_views.scss
+++ b/addons/survey/static/src/scss/survey_question_views.scss
@@ -1,11 +1,10 @@
 .o_survey_question_view_form .o_form_renderer {
 
     .o_preview_questions {
-        border: 3px solid $o-gray-500;
+        border: 3px solid $gray-400;
         width: auto;
         padding: 10px 20px 10px;
         margin-top: 15px;
-        color: $o-gray-500;
     }
 
     .o_preview_questions .o_datetime {
diff --git a/addons/survey/views/survey_question_views.xml b/addons/survey/views/survey_question_views.xml
index 9dfb60be351..40c2f949f55 100644
--- a/addons/survey/views/survey_question_views.xml
+++ b/addons/survey/views/survey_question_views.xml
@@ -35,7 +35,7 @@
                             <field name="question_type" widget="radio" required="not is_page" />
                         </group>
                         <group>
-                            <div class="mx-lg-auto w-lg-50 d-none d-sm-block o_preview_questions" colspan="2">
+                            <div class="mx-lg-auto w-lg-50 d-none d-sm-block o_preview_questions bg-light" colspan="2">
                                 <!-- Multiple choice: only one answer -->
                                 <div invisible="question_type != 'simple_choice'" role="img" aria-label="Multiple choice with one answer"
                                     title="Multiple choice with one answer">
diff --git a/addons/web/static/src/core/commands/command_palette.scss b/addons/web/static/src/core/commands/command_palette.scss
index 33ae91051cd..1b6d372b0af 100644
--- a/addons/web/static/src/core/commands/command_palette.scss
+++ b/addons/web/static/src/core/commands/command_palette.scss
@@ -10,7 +10,7 @@
 
         .o_command {
             &.focused {
-                background: rgba($o-action, 0.25);
+                background: rgba($o-component-active-bg, .65);
             }
 
             &_hotkey {
diff --git a/addons/web/static/src/core/effects/rainbow_man.xml b/addons/web/static/src/core/effects/rainbow_man.xml
index d78c890238d..873b94bfd7e 100644
--- a/addons/web/static/src/core/effects/rainbow_man.xml
+++ b/addons/web/static/src/core/effects/rainbow_man.xml
@@ -58,7 +58,7 @@
                     </svg>
                     <div class="o_reward_msg mx-4">
                         <div class="o_reward_msg_card">
-                            <div class="o_reward_msg_content text-muted px-3 py-4 bg-white d-inline-block border border-light border-top-0">
+                            <div class="o_reward_msg_content text-muted px-3 py-4 bg-view d-inline-block border border-light border-top-0">
                                 <t t-if="!props.Component">
                                     <t t-out="props.message"/>
                                 </t>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
index c699d543cbc..669aab5dafe 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
@@ -1,9 +1,9 @@
 .o_popover_field_selector {
     &.o-popover-top > .popover-arrow::after {
-        border-top-color: map-get($theme-colors, 'primary');
+        border-top-color: #{$o-gray-300};
     }
     &.o-popover-bottom > .popover-arrow::after {
-        border-bottom-color: map-get($theme-colors, 'primary');
+        border-bottom-color: #{$o-gray-300};
     }
 }
 
@@ -18,7 +18,7 @@
 
     .o_model_field_selector_popover_header, .o_model_field_selector_popover_footer {
         color: color-contrast(map-get($theme-colors, 'primary'));
-        background: map-get($theme-colors, 'primary');
+        background: #{$o-gray-300};
         font-weight: bold;
         padding: 5px 0.4em;
 
@@ -28,12 +28,6 @@
             padding: 0px 35px;
             text-align: center;
         }
-        .o_model_field_selector_popover_search > .o_input, > input {
-            color: $o-main-text-color;
-            font-size: 115%;
-            border: none;
-            padding: 5px 0.4rem;
-        }
         .o_model_field_selector_popover_option {
             @include o-position-absolute($top: 0);
             padding: 8px;
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
index 35957ecc24f..447d7e58692 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
@@ -25,7 +25,7 @@
                     <div class="o_model_field_selector_popover_search mt-2">
                         <input type="text"
                                placeholder='Search...'
-                               class="o_input"
+                               class="o_input p-1 border rounded-1 bg-view"
                                t-att-value="state.page.query"
                                t-on-input="(ev) => this.debouncedSearchFields(ev.target.value)" />
                     </div>
@@ -35,14 +35,14 @@
                 <ul class="o_model_field_selector_popover_page">
                     <t t-foreach="state.page.fieldNames" t-as="fieldName" t-key="fieldName">
                         <t t-set="fieldDef" t-value="state.page.fieldDefs[fieldName]" />
-                        <li class="o_model_field_selector_popover_item d-flex" t-att-class="{ 'active': fieldName === state.page.focusedFieldName }" t-att-data-name="fieldName">
-                            <button class="o_model_field_selector_popover_item_name btn flex-fill text-start" t-on-click="() => this.selectField(fieldDef)">
+                        <li class="o_model_field_selector_popover_item d-flex border-bottom" t-att-class="{ 'active': fieldName === state.page.focusedFieldName }" t-att-data-name="fieldName">
+                            <button class="o_model_field_selector_popover_item_name btn btn-light flex-fill rounded-0 text-start" t-on-click="() => this.selectField(fieldDef)">
                                 <t t-esc="fieldDef.string" />
                                 <t t-if="fieldDef.record_name"> (<t t-esc="fieldDef.record_name" />)</t>
                                 <div t-if="props.isDebugMode" class="text-muted o_model_field_selector_popover_item_title"><t t-esc="fieldName"/> (<t t-esc="fieldDef.type"/>)</div>
                             </button>
                             <t t-if="(!fieldDef.is_property and fieldDef.relation and props.followRelations) or fieldDef.type === 'properties'">
-                                <button class="o_model_field_selector_popover_item_relation btn btn-link" t-on-click.stop="() => this.followRelation(fieldDef)">
+                                <button class="o_model_field_selector_popover_item_relation btn btn-light border-0 border-start rounded-0" t-on-click.stop="() => this.followRelation(fieldDef)">
                                     <i class="oi oi-chevron-right o_model_field_selector_popover_relation_icon" role="img" aria-label="Relation to follow" title="Relation to follow" />
                                 </button>
                             </t>
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index fc2081cf276..1d75a60a079 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.NotificationWowl">
-        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-white mb-2 position-relative"
+        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-view mb-2 position-relative"
          role="alert" aria-live="assertive" aria-atomic="true">
             <strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 ps-3 pe-5" t-out="props.title"/>
             <button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
diff --git a/addons/web/static/src/core/signature/name_and_signature.scss b/addons/web/static/src/core/signature/name_and_signature.scss
index 8a380dcda87..45fc779fdc3 100644
--- a/addons/web/static/src/core/signature/name_and_signature.scss
+++ b/addons/web/static/src/core/signature/name_and_signature.scss
@@ -3,10 +3,6 @@
     position: relative;
 }
 
-.o_web_sign_signature_group {
-    background: #ffffff;
-}
-
 .o_signature_stroke {
     position: absolute;
     border-top: #D1D0CE solid 2px;
diff --git a/addons/web/static/src/core/signature/name_and_signature.xml b/addons/web/static/src/core/signature/name_and_signature.xml
index b572b302ba2..fdd87eafbb3 100644
--- a/addons/web/static/src/core/signature/name_and_signature.xml
+++ b/addons/web/static/src/core/signature/name_and_signature.xml
@@ -49,8 +49,8 @@
                 border, but we remove the padding from the body, so the canvas
                 will overflow on the corners without this rule.
             -->
-            <div t-if="state.showSignatureArea" class="o_web_sign_signature_group bg-white card mt-3" style="overflow: hidden;">
-                <div class="card-header">
+            <div t-if="state.showSignatureArea" class="o_web_sign_signature_group bg-100 card mt-3" style="overflow: hidden;">
+                <div class="card-header bg-transparent">
                     <div class="row g-0">
                         <div t-if="!props.noInputName or defaultName" class="col-auto">
                             <a role="button" href="#" t-on-click.prevent="onClickSignAuto" t-attf-class="o_web_sign_auto_button me-2 btn btn-light {{ state.signMode === 'auto' ? 'active': '' }}">
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 91caeb6a0a4..ac252d36220 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -73,7 +73,7 @@ $body-color: $o-main-text-color !default;
 $link-color: $o-main-link-color !default;
 $link-decoration: none !default;
 $link-hover-decoration: none !default;
-$link-shade-percentage: 15% !default;
+$link-shade-percentage: 30% !default;
 
 // Muted
 //
diff --git a/addons/web/static/src/scss/bs_mixins_overrides_backend.scss b/addons/web/static/src/scss/bs_mixins_overrides_backend.scss
index 9c36b006845..50c66a70483 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides_backend.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides_backend.scss
@@ -27,7 +27,7 @@
 
     a#{$-parent}, button#{$-parent} {
         &:hover, &:focus, &:active, &.active {
-            @include o-print-color(darken($-color, $link-shade-percentage), color, text-opacity);
+            @include o-print-color(shift-color($-color, $link-shade-percentage), color, text-opacity);
         }
     }
 }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 07be71e119f..4e1f2c632c0 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -152,7 +152,7 @@ $o-btn-custom: (
 
 // Components (BS)
 
-$o-border-color: $o-gray-300 !default;
+$o-border-color: var(--border-color, #{$o-gray-300}) !default;
 
 // Forms
 
diff --git a/addons/web/static/src/search/search_bar/search_bar.scss b/addons/web/static/src/search/search_bar/search_bar.scss
index 9a7151d97da..7a39a5299de 100644
--- a/addons/web/static/src/search/search_bar/search_bar.scss
+++ b/addons/web/static/src/search/search_bar/search_bar.scss
@@ -10,4 +10,4 @@
     }
 
     animation: animate .25s ease-out;
-}
\ No newline at end of file
+}
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index 58559a2a2ee..ff3c6b1da85 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -12,7 +12,7 @@
                 >
 
                 <!-- :hover overlay -->
-                <div class="position-absolute start-0 top-0 bottom-0 end-0 bg-white border rounded-2 shadow opacity-0 opacity-100-hover"/>
+                <div class="position-absolute start-0 top-0 bottom-0 end-0 bg-view border rounded-2 shadow opacity-0 opacity-100-hover"/>
 
                 <div class="o_searchview_facet_label position-relative rounded-start-2 px-1"
                     t-on-click="(ev) => this.onFacetLabelClick(ev.target, facet)"
@@ -53,7 +53,7 @@
 
     <t t-name="web.SearchBar.Input">
         <input type="text"
-            class="o_searchview_input d-print-none flex-grow-1 w-auto border-0"
+            class="o_searchview_input o_input d-print-none flex-grow-1 w-auto border-0"
             accesskey="Q"
             placeholder="Search..."
             role="searchbox"
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index 0f2c2699cc5..6791302c4ce 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -24,7 +24,7 @@
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
             <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
-                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-odoo': ''}} me-2"
+                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2"
                     t-att-style="section.color and ('color: ' + section.color)"
                 />
                 <b t-esc="section.description"/>
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index 06e34c83ee4..8f13533b766 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/addons/web/static/src/search/search_panel/search_view.scss
@@ -1,9 +1,10 @@
 .o_searchview {
-    background-color: $input-focus-bg;
+    --SearchBar-background-color: $input-focus-bg;
+    
+    background-color: var(--SearchBar-background-color);
     border: $input-border-width solid $border-color;
 
     &:focus-within {
-        background-color: $input-focus-bg;
         border-color: $input-focus-border-color;
         color: $input-focus-color;
 
@@ -16,8 +17,6 @@
 
     .o_searchview_input {
         appearance: none;
-        color: inherit;
-        background: inherit;
     }
 
     .o_searchview_autocomplete {
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index 14841c94ab5..af66402b284 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -1,5 +1,5 @@
 // Variables
-$o-cw-color-today-accent: #714B67;
+$o-cw-color-today-accent: $o-danger;
 $o-cw-filter-avatar-size: 20px;
 
 // Animations
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index fe581a65aa9..bf6b47f2eaf 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -1,6 +1,6 @@
 .o_calendar_renderer {
     --o-circle-padding: calc(#{map-get($spacers, 1 )} / 2);
-    --o-cw-border-color: #{lighten($border-color, 5%)};
+    --o-cw-border-color: #{$border-color};
 
     background-color: $o-view-background-color;
     grid-area: cal;
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
index e9502974551..a8849877f4b 100644
--- a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -98,7 +98,7 @@
             </label>
             <t t-if="filter.canRemove">
                 <button
-                    class="o_remove btn position-absolute top-50 end-0 bg-white py-0 px-2 text-700 transition-base"
+                    class="o_remove btn position-absolute top-50 end-0 py-0 px-2 bg-view text-700 transition-base"
                     role="img"
                     title="Remove this favorite from the list"
                     aria-label="Remove this favorite from the list"
diff --git a/addons/web/static/src/views/fields/badge/badge_field.scss b/addons/web/static/src/views/fields/badge/badge_field.scss
index 838249a2add..cfc6dd78d85 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.scss
+++ b/addons/web/static/src/views/fields/badge/badge_field.scss
@@ -3,11 +3,11 @@
     border: 0;
     font-size: 12px;
     user-select: none;
-    background-color: rgba(lightgray, 0.5);
+    background-color: $o-gray-300;
     font-weight: 500;
     @include o-text-overflow;
     transition: none; // remove transition to prevent badges from flickering at reload
-    color: #444B5A;
+    color: $o-black;
     &.o_field_empty {
         display: none !important;
     }
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
index d15f9de5501..ef8cf918a3d 100644
--- a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
@@ -3,7 +3,7 @@
         grid-template-columns: auto min-content;
         border: 1px solid $primary;
         font-size: $font-size-sm;
-        color: $o-brand-primary;
+        color: o-text-color('primary');
         font-weight: $badge-font-weight;
 
         .o_input {
diff --git a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
index 1a7b1cca531..ca13f715de1 100644
--- a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
+++ b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
@@ -47,7 +47,7 @@
             </div>
 
             <div class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
-            <div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
+            <div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span role="img" aria-label="Delete" title="Delete">×</span></div>
         </div>
     </div>
 </t>
diff --git a/addons/web/static/src/views/fields/properties/properties_field.scss b/addons/web/static/src/views/fields/properties/properties_field.scss
index b9fbc697ec4..8aac4be76a5 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/properties_field.scss
@@ -32,9 +32,9 @@
         .dropdown:focus-within ~ .o_dropdown_button,
         .o_input:focus ~ .o_datepicker_button,
         .o_dropdown_button:focus {
-            @include print-variable(o-input-border-color, $o-brand-primary);
+            @include print-variable(o-input-border-color, $o-action);
             * {
-                @include print-variable(o-input-border-color, $o-brand-primary);
+                @include print-variable(o-input-border-color, $o-action);
             }
         }
     }
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index 10c29e7b2ed..f1a509dea2b 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -27,7 +27,7 @@
     %-stat-button-value {
         order: 2;
         font-weight: $font-weight-bold;
-        color: $o-brand-primary;
+        color: var(--o-stat-text-color, #{$o-brand-primary});
         font-size: $o-font-size-base-smaller;
     }
 
@@ -50,7 +50,7 @@
 
         .o_button_icon {
             font-size: $-stat-button-icon-size;
-            color: $primary;
+            color: var(--o-stat-button-color, #{$primary});
 
             &:before {
                 margin-right: $-stat-button-icon-margin-end;
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index 9788c55ee5c..155a0aa6c8a 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -164,7 +164,7 @@
                 padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                 &:not(:first-child) {
-                    border-top: 1px solid map-get($grays, '300');
+                    border-top: 1px solid $dropdown-divider-bg;
                 }
 
                 .oe_kanban_colorpicker {
@@ -173,7 +173,7 @@
                 }
 
                 div[class*="col-"] + div[class*="col-"] {
-                    border-left: 1px solid map-get($grays, '300');
+                    border-left: 1px solid $dropdown-divider-bg;
                 }
                 > div:last-child {
                     @include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
index 3f7c3471ee9..62419b74793 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -20,7 +20,7 @@
                     Edit
                 </button>
                 <span class="flex-grow-1"></span>
-                <button class="btn btn-secondary o_kanban_cancel text-600" t-on-click="() => this.cancel(true)">
+                <button class="btn btn-secondary o_kanban_cancel" t-on-click="() => this.cancel(true)">
                     <i class="fa fa-trash" />
                 </button>
             </div>
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index 265f643bf5a..d229cf3451c 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -96,7 +96,7 @@
                             <div class="o_kanban_examples d-flex p-2">
                                 <div t-foreach="ghostColumns" t-as="column" t-key="column.name" class="o_kanban_examples_group flex-grow-1 m-3">
                                     <h6><b t-esc="column.name"/></h6>
-                                    <div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-white">
+                                    <div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-light">
                                         <div class="o_ghost_content w-100 pb-3 bg-300"/>
                                         <div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
                                         <span class="mt-2 rounded-circle bg-300">
diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index 0d136cbda99..cef95dab744 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -211,9 +211,6 @@
                 margin-left: 10px;
 
                 > button {
-                    @include o-hover-text-color($o-brand-primary, darken($o-brand-primary, 20%));
-                    background-color: transparent;
-                    border: none;
                     padding-top: 0;
                     padding-bottom: 0;
                 }
diff --git a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
index e19770bddab..7203758b627 100644
--- a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web.MobileSwitchCompanyMenu">
-    <div class="o_burger_menu_companies p-3 bg-100">
+    <div class="o_burger_menu_companies p-3">
         <div class="o_burger_menu_user_title h6 mb-3">Companies</div>
         <t t-foreach="Object.values(companyService.allowedCompaniesWithAncestors)
                       .filter((c) => !c.parent_id)
diff --git a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
index 4c79d489685..ddbd72a860b 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
@@ -3,7 +3,7 @@
     <t t-name="web.SettingsPage">
         <div class="o_setting_container">
             <div class="position-sticky top-0 flex-grow-0 z-index-1">
-                <div class="settings_tab h-100" t-if="!env.isSmall or state.search.value.length === 0">    
+                <div class="settings_tab h-100 border-end" t-if="!env.isSmall or state.search.value.length === 0">
                     <t t-foreach="props.modules" t-as="module" t-key="module.key">
                         <div class="tab" t-if="!module.isVisible"
                              t-att-class="{
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
index 538af7c1c84..4046c25fd53 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
@@ -35,9 +35,9 @@
 
 // BASE SETTINGS LAYOUT
 .o_base_settings_view .o_form_renderer {
-   --settings__tab-bg: #{map-get($grays, '900')};
-   --settings__tab-bg--active: #{map-get($grays, '800')};
-   --settings__tab-color: #{map-get($grays, '400')};
+   --settings__tab-bg: #{map-get($grays, '100')};
+   --settings__tab-bg--active: #{$o-component-active-bg};
+   --settings__tab-color: #{map-get($grays, '700')};
    --settings__title-bg: #{map-get($grays, '200')};
 
    height: 100%;
@@ -71,8 +71,8 @@
            overflow: auto;
 
            .selected {
-               background-color: var(--settings__tab-bg--active);
-               box-shadow: inset 2px 0 0 $o-brand-primary;
+               background-color: var(--settings__tab-bg--active, #{$o-component-active-bg});
+               box-shadow: inset 2px 0 0 $o-component-active-border;
            }
 
            .tab {
@@ -92,7 +92,7 @@
                }
 
                &:hover, &.selected {
-                   color: white;
+                   color: $o-gray-900;
                }
            }
        }
@@ -106,7 +106,7 @@
            > .app_settings_block {
                h2 {
                    margin: 0 0 !important;
-                   @include o-base-settings-horizontal-padding(.4rem);
+                   @include o-base-settings-horizontal-padding(.7rem);
                    background-color: var(--settings__title-bg);
                    font-size: 15px;
 
@@ -117,7 +117,7 @@
 
                h3 {
                    margin: 0 0 !important;
-                   @include o-base-settings-horizontal-padding(.4rem);
+                   @include o-base-settings-horizontal-padding(.7rem);
                    font-weight: 400;
                    font-size: 13px;
                }
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
index 466ccdb8f43..78e09777686 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
@@ -10,7 +10,7 @@
                     <div class="o_searchview form-control d-flex align-items-center py-1" role="search" aria-autocomplete="list">
                         <i class="o_searchview_icon oi oi-search me-2" role="img" aria-label="Search..." title="Search..." />
                         <div class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1">
-                            <input type="text" class="o_searchview_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>
+                            <input type="text" class="o_searchview_input o_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>
                         </div>
                     </div>
                 </div>
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index 7b770532dc9..3c78eed49a4 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -18,7 +18,7 @@
 
 
 <t t-name="web.SwitchCompanyItem">
-    <DropdownItem class="'p-0 bg-white'" parentClosingMode="!isCompanyAllowed ? 'none' : 'all'">
+    <DropdownItem class="'p-0'" parentClosingMode="!isCompanyAllowed ? 'none' : 'all'">
         <div
             class="d-flex"
             t-att-class="{ 'disabled': !isCompanyAllowed }"
@@ -34,7 +34,7 @@
                 t-att-class="{ 'border-primary': isCurrent, 'disabled': !isCompanyAllowed }"
                 t-on-click.stop="() => this.toggleCompany()">
 
-                <span class="btn border-0 p-2" t-att-class="isCompanyAllowed ? 'btn-light' : 'disabled'">
+                <span class="btn border-0 p-2" t-att-class="isCompanyAllowed ? 'btn-link text-primary' : 'disabled'">
                     <i class="fa fa-fw py-2" t-att-class="isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
                 </span>
             </div>
@@ -46,7 +46,7 @@
                 t-att-title="'Switch to ' + props.company.name "
                 tabindex="0"
                 class="d-flex flex-grow-1 align-items-center py-0 log_into ps-2"
-                t-att-class="isCurrent ? 'alert-primary' : 'btn fw-normal border-0 ' + (isCompanyAllowed ? 'btn-light' : 'disabled')"
+                t-att-class="isCurrent ? 'alert-primary' : 'btn fw-normal border-0 ' + (isCompanyAllowed ? 'btn-link text-primary' : 'disabled')"
                 t-on-click="() => this.logIntoCompany()">
 
                 <span
diff --git a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
index c82f22d45ce..4d37aef4ea3 100644
--- a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
+++ b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
@@ -1727,7 +1727,7 @@ QUnit.module("SettingsFormView", (hooks) => {
 
         assert.containsOnce(target, "[name='textField'] input");
         assert.verifySteps([
-            `focusin: <input type="text" class="o_searchview_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox">`,
+            `focusin: <input type="text" class="o_searchview_input o_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox">`,
         ]);
     });
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
index 0bf6f91f140..a34aabe2ef0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.dark.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
@@ -7,7 +7,7 @@
     --o-we-toolbar-bg-active: #{$o-gray-400};
     --o-we-toolbar-border: #{$o-gray-200};
     --o-we-toolbar-color-text: #{$o-gray-800};
-    --o-we-toolbar-color-accent: #{$o-brand-primary};
+    --o-we-toolbar-color-accent: #{$o-action};
     --o-we-toolbar-color-clickable: #{$o-gray-800};
     --o-we-toolbar-color-clickable-active: #{$o-black};
 }
diff --git a/addons/web_tour/static/src/tour_pointer/tour_pointer.scss b/addons/web_tour/static/src/tour_pointer/tour_pointer.scss
index b294a3919ff..3dc7ce30656 100644
--- a/addons/web_tour/static/src/tour_pointer/tour_pointer.scss
+++ b/addons/web_tour/static/src/tour_pointer/tour_pointer.scss
@@ -45,7 +45,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
     --TourPointer__scale: 1.12;
     --TourPointer__color: #{$o-enterprise-color};
     --TourPointer__color-accent: #{lighten($o-enterprise-color, 7%)};
-    --TourPointer__border-width: 3px;
+    --TourPointer__border-width: 1px;
     --TourPointer__border-color-rgb: 255, 255, 255;
     --TourPointer__border-color: rgba(var(--TourPointer__border-color-rgb), 1);
     --TourPointer__arrow-size: 1rem;
@@ -83,7 +83,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
     .o_tour_pointer_tip {
         width: var(--TourPointer__width);
         height: var(--TourPointer__height);
-        border: var(--TourPointer__border-width) solid var(--TourPointer__border-color);
+        border: var(--TourPointer__border-width) solid white;
         border-radius: 0 50% 50% 50%;
         background-image: radial-gradient(
             var(--TourPointer__color-accent),
@@ -93,7 +93,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
     }
 
     .o_tour_pointer_content {
-        background-color: inherit;
+        background-color: $light;
         color: transparent;
         transition: color 0s ease var(--TourPointer__expand-duration);
 
@@ -140,21 +140,21 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
     }
 
     &.o_open {
-        border-color: var(--TourPointer__color);
-        background-color: var(--TourPointer__border-color);
+        border-color: #{$o-gray-400};
+        background-color: #{$o-gray-300};
         animation: var(--TourPointer__reveal-animation);
 
         .o_tour_pointer_tip {
             width: var(--TourPointer__arrow-size);
             height: var(--TourPointer__arrow-size);
-            border-color: var(--TourPointer__color);
+            border-color: #{$o-gray-400};
             border-radius: 0;
-            background: white;
+            background: $light;
             box-shadow: none;
         }
 
         .o_tour_pointer_content {
-            color: var(--TourPointer__text-color);
+            color: $o-black;
         }
 
         &.o_left {
diff --git a/addons/web_tour/static/src/tour_pointer/tour_pointer.xml b/addons/web_tour/static/src/tour_pointer/tour_pointer.xml
index 9b798d606c7..07c3c33804f 100644
--- a/addons/web_tour/static/src/tour_pointer/tour_pointer.xml
+++ b/addons/web_tour/static/src/tour_pointer/tour_pointer.xml
@@ -20,7 +20,7 @@
         >
             <div class="o_tour_pointer_tip position-absolute" />
             <div
-                class="o_tour_pointer_content overflow-hidden px-3 py-2 w-100 h-100 position-relative"
+                class="o_tour_pointer_content rounded overflow-hidden px-3 py-2 w-100 h-100 position-relative"
                 t-att-class="{ invisible: content and !isOpen }"
             >
                 <t t-out="content" />
diff --git a/addons/website/static/src/scss/website_visitor_views.scss b/addons/website/static/src/scss/website_visitor_views.scss
index 1c94168e9de..221e995391c 100644
--- a/addons/website/static/src/scss/website_visitor_views.scss
+++ b/addons/website/static/src/scss/website_visitor_views.scss
@@ -8,9 +8,6 @@
                 margin: 0px;
                 padding: 0px;
                 border-top: 0px !important;
-                &:first-child {
-                    border-bottom: 1px solid #dee2e6 !important;
-                }
                 .oe_kanban_details {
                     display:none !important;
                 }