diff --git a/addons/account/views/account_account_tag_views.xml b/addons/account/views/account_account_tag_views.xml
index 9d43680c58a..89a9d96264c 100644
--- a/addons/account/views/account_account_tag_views.xml
+++ b/addons/account/views/account_account_tag_views.xml
@@ -8,7 +8,7 @@
             <field name="arch" type="xml">
                 <form string="Tags">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <field name="active" invisible="1"/>
                             <field name="name"/>
diff --git a/addons/account/views/account_incoterms_view.xml b/addons/account/views/account_incoterms_view.xml
index 53e4ba18e22..332da23bc8e 100644
--- a/addons/account/views/account_incoterms_view.xml
+++ b/addons/account/views/account_incoterms_view.xml
@@ -20,7 +20,7 @@
             <field name="arch" type="xml">
                 <form string="Incoterms">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <field name="active" invisible="1"/>
                             <field name="name"/>
diff --git a/addons/account/views/account_journal_views.xml b/addons/account/views/account_journal_views.xml
index 7d9dd336a46..2dd5494dc01 100644
--- a/addons/account/views/account_journal_views.xml
+++ b/addons/account/views/account_journal_views.xml
@@ -36,7 +36,7 @@
                                     name="%(action_account_moves_all_a)d" icon="fa-book" string="Journal Entries"
                                     context="{'search_default_journal_id':active_id}"/>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name"/>
                             <h1><field name="name" placeholder="e.g. Customer Invoices"/></h1>
diff --git a/addons/account/views/account_move_views.xml b/addons/account/views/account_move_views.xml
index aaae457e6c7..7ba3ebd0e92 100644
--- a/addons/account/views/account_move_views.xml
+++ b/addons/account/views/account_move_views.xml
@@ -710,10 +710,10 @@
                         <widget name="web_ribbon" title="Partial"
                                 attrs="{'invisible': ['|', ('payment_state', '!=', 'partial'), ('move_type', 'not in', ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt'))]}"/>
                         <widget name="web_ribbon" title="Reversed"
-                                bg_color="bg-danger"
+                                bg_color="text-bg-danger"
                                 attrs="{'invisible': [('payment_state', '!=', 'reversed')]}"/>
                          <widget name="web_ribbon" text="Invoicing App Legacy"
-                                bg_color="bg-info"
+                                bg_color="text-bg-info"
                                 attrs="{'invisible': [('payment_state', '!=', 'invoicing_legacy')]}"
                                 tooltip="This entry has been generated through the Invoicing app, before installing Accounting. It has been disabled by the 'Invoicing Switch Threshold Date' setting so that it does not impact your accounting."/>
 
diff --git a/addons/account/views/account_payment_term_views.xml b/addons/account/views/account_payment_term_views.xml
index b75c814754d..1658dbfaacd 100644
--- a/addons/account/views/account_payment_term_views.xml
+++ b/addons/account/views/account_payment_term_views.xml
@@ -35,7 +35,7 @@
                     <sheet>
                         <field name="active" invisible="1"/>
                         <field name="fiscal_country_codes" invisible="1"/>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name" string="Payment Terms"/>
                             <h1><field name="name" nolabel="1" placeholder="e.g. 30 days"/></h1>
diff --git a/addons/account/views/account_payment_view.xml b/addons/account/views/account_payment_view.xml
index e5e18cb2911..835248449af 100644
--- a/addons/account/views/account_payment_view.xml
+++ b/addons/account/views/account_payment_view.xml
@@ -242,7 +242,7 @@
                         </div>
 
                         <widget name="web_ribbon" text="Invoicing App Legacy"
-                                bg_color="bg-info"
+                                bg_color="text-bg-info"
                                 attrs="{'invisible': [('state', '!=', 'invoicing_legacy')]}"
                                 tooltip="This payment has been generated through the Invoicing app, before installing Accounting. It has been disabled by the 'Invoicing Switch Threshold Date' setting so that it does not impact your accounting."
                         />
diff --git a/addons/account/views/partner_view.xml b/addons/account/views/partner_view.xml
index 5d6e7376458..ebd337f1ea7 100644
--- a/addons/account/views/partner_view.xml
+++ b/addons/account/views/partner_view.xml
@@ -36,7 +36,7 @@
 
                     <sheet>
                     <div class="oe_button_box" name="button_box"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group>
                             <field name="active" invisible="1"/>
diff --git a/addons/analytic/views/analytic_account_views.xml b/addons/analytic/views/analytic_account_views.xml
index 7546634fb9b..3297661fbb1 100644
--- a/addons/analytic/views/analytic_account_views.xml
+++ b/addons/analytic/views/analytic_account_views.xml
@@ -17,7 +17,7 @@
                                 </div>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name"/>
                             <h1>
diff --git a/addons/calendar/views/calendar_views.xml b/addons/calendar/views/calendar_views.xml
index ecfe36748c6..bfef3ecedba 100644
--- a/addons/calendar/views/calendar_views.xml
+++ b/addons/calendar/views/calendar_views.xml
@@ -109,7 +109,7 @@
                     <div class="oe_button_box" name="button_box">
                         <button string="Document" icon="fa-bars" type="object" name="action_open_calendar_event" attrs="{'invisible': ['|', ('res_model', '=', False), ('res_id', '=', False)]}"/>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="res_model" invisible="1" />
                     <field name="res_id" invisible="1" />
                     <field name="attendee_status" invisible="1"/>
diff --git a/addons/crm/views/crm_lead_views.xml b/addons/crm/views/crm_lead_views.xml
index f731d10d19f..54a8cc06370 100644
--- a/addons/crm/views/crm_lead_views.xml
+++ b/addons/crm/views/crm_lead_views.xml
@@ -46,7 +46,7 @@
                                 </div>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Lost" bg_color="bg-danger" attrs="{'invisible': ['|', ('probability', '&gt;', 0), ('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Lost" bg_color="text-bg-danger" attrs="{'invisible': ['|', ('probability', '&gt;', 0), ('active', '=', True)]}"/>
                         <widget name="web_ribbon" title="Won" attrs="{'invisible': [('probability', '&lt;', 100)]}" />
                         <div class="oe_title">
                             <h1><field class="text-break" options="{'line_breaks': False}" widget="text" name="name" placeholder="e.g. Product Pricing"/></h1>
@@ -561,7 +561,7 @@
                             <div t-attf-class="#{!selection_mode ? kanban_color(record.color.raw_value) : ''} #{lost_ribbon ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click oe_kanban_card d-flex flex-column">
                                 <div class="ribbon ribbon-top-right"
                                     attrs="{'invisible': ['|', ('probability', '&gt;', 0), ('active', '=', True)]}">
-                                    <span class="bg-danger">Lost</span>
+                                    <span class="text-bg-danger">Lost</span>
                                 </div>
 
                                 <div class="oe_kanban_content flex-grow-1">
@@ -643,8 +643,8 @@
                     <div class="ribbon ribbon-top-right"
                         attrs="{'invisible': ['&amp;', '|', ('probability', '&gt;', 0), ('active', '=', True),
                             '|', ('probability', '&lt;', 100), ('active', '=', False)]}">
-                        <span t-if="won_ribbon" class="bg-success">Won</span>
-                        <span t-elif="lost_ribbon" class="bg-danger">Lost</span>
+                        <span t-if="won_ribbon" class="text-bg-success">Won</span>
+                        <span t-elif="lost_ribbon" class="text-bg-danger">Lost</span>
                     </div>
                 </xpath>
                 <xpath expr="//div[hasclass('o_kanban_record_subtitle')]" position="replace">
diff --git a/addons/crm/views/crm_lost_reason_views.xml b/addons/crm/views/crm_lost_reason_views.xml
index b5a7a410074..d410fdbbb65 100644
--- a/addons/crm/views/crm_lost_reason_views.xml
+++ b/addons/crm/views/crm_lost_reason_views.xml
@@ -28,7 +28,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <div>
                             <label for="name"/>
diff --git a/addons/delivery/views/delivery_carrier_views.xml b/addons/delivery/views/delivery_carrier_views.xml
index 0444223f6b9..b7fc4ef9a3d 100644
--- a/addons/delivery/views/delivery_carrier_views.xml
+++ b/addons/delivery/views/delivery_carrier_views.xml
@@ -74,7 +74,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title" name="title">
                         <label for="name" string="Shipping Method"/>
                         <h1>
diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index 58fe1a4e8b4..13e9b31bc08 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -31,7 +31,7 @@
                     <field name="legend_blocked" invisible="1"/>
                     <field name="legend_normal" invisible="1"/>
                     <field name="legend_done" invisible="1"/>
-                    <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" text="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="kanban_state" widget="state_selection" class="ms-auto float-end"/>
                     <div class="oe_title">
                         <label for="name" string="Event Name"/>
diff --git a/addons/event/views/event_registration_views.xml b/addons/event/views/event_registration_views.xml
index d5497e684a9..9861cb122ca 100644
--- a/addons/event/views/event_registration_views.xml
+++ b/addons/event/views/event_registration_views.xml
@@ -58,7 +58,7 @@
                 </header>
                 <sheet string="Registration">
                     <div class="oe_button_box" name="button_box"/>
-                    <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" text="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group string="Attendee" name="attendee">
                             <field class="o_text_overflow" name="name"/>
@@ -143,7 +143,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="#{!record.active.raw_value ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click o_event_registration_kanban container-fluid p-0">
                             <div t-if="!record.active.raw_value" class="ribbon ribbon-top-right">
-                                <span class="bg-danger">Archived</span>
+                                <span class="text-bg-danger">Archived</span>
                             </div>
                             <div class="row h-100">
                                 <div class="col-9 pe-0">
diff --git a/addons/event_booth/views/event_booth_category_views.xml b/addons/event_booth/views/event_booth_category_views.xml
index e05b84a1e43..d7d89e0df5d 100644
--- a/addons/event_booth/views/event_booth_category_views.xml
+++ b/addons/event_booth/views/event_booth_category_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <form string="Booth Type">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="image_1920" widget='image' class="oe_avatar" options='{"preview_image": "image_128"}'/>
                     <div class="oe_title">
                         <label for="name" string="Booth Category"/>
diff --git a/addons/event_crm/views/event_lead_rule_views.xml b/addons/event_crm/views/event_lead_rule_views.xml
index aeb85388f0d..0c05acfb172 100644
--- a/addons/event_crm/views/event_lead_rule_views.xml
+++ b/addons/event_crm/views/event_lead_rule_views.xml
@@ -36,7 +36,7 @@
         <field name="arch" type="xml">
             <form string="Lead Generation Rule">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name"/>
                         <h1><field name="name" placeholder="e.g. B2B Fairs"/></h1>
diff --git a/addons/event_sale/views/event_registration_views.xml b/addons/event_sale/views/event_registration_views.xml
index e5ebe88ccd8..917add19dfd 100644
--- a/addons/event_sale/views/event_registration_views.xml
+++ b/addons/event_sale/views/event_registration_views.xml
@@ -44,7 +44,7 @@
             </xpath>
             <xpath expr="//group" position="before">
                 <field name="is_paid" invisible="1"/>
-                <widget name="web_ribbon" title="Paid" bg_color="bg-success" attrs="{'invisible': [('is_paid', '=', False)]}"/>
+                <widget name="web_ribbon" title="Paid" bg_color="text-bg-success" attrs="{'invisible': [('is_paid', '=', False)]}"/>
             </xpath>
             <group name="utm_link" position="before">
                 <group string="Transaction" groups="base.group_no_one">
diff --git a/addons/fleet/views/fleet_vehicle_cost_views.xml b/addons/fleet/views/fleet_vehicle_cost_views.xml
index 6026294d448..28ecde1b5c5 100644
--- a/addons/fleet/views/fleet_vehicle_cost_views.xml
+++ b/addons/fleet/views/fleet_vehicle_cost_views.xml
@@ -15,7 +15,7 @@
                 </header>
                 <sheet>
                     <field name="active" invisible="1"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="currency_id" invisible="1"/>
                     <div class="oe_title">
                         <h1><field name="name"/></h1>
@@ -230,7 +230,7 @@
                     <field name="state" widget="statusbar" options="{'clickable': '1'}"/>
                 </header>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group col="2">
                         <group>
                             <field name="description" />
diff --git a/addons/fleet/views/fleet_vehicle_model_views.xml b/addons/fleet/views/fleet_vehicle_model_views.xml
index ca6f458b386..631b25bc2bb 100644
--- a/addons/fleet/views/fleet_vehicle_model_views.xml
+++ b/addons/fleet/views/fleet_vehicle_model_views.xml
@@ -6,7 +6,7 @@
         <field name="arch" type="xml">
             <form string="Model">
                 <sheet>
-                    <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" text="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_model_vehicle" type="object" icon="fa-car" class="oe_stat_button"
                             attrs="{'invisible': [('vehicle_count', '=', 0)]}">
diff --git a/addons/fleet/views/fleet_vehicle_views.xml b/addons/fleet/views/fleet_vehicle_views.xml
index a8b87eeac82..e0a21f44b25 100644
--- a/addons/fleet/views/fleet_vehicle_views.xml
+++ b/addons/fleet/views/fleet_vehicle_views.xml
@@ -71,7 +71,7 @@
                             <field name="odometer_count" widget="statinfo" string="Odometer"/>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="image_128" widget='image' class="oe_avatar"/>
                     <div class="oe_title">
                         <label for="model_id"/>
diff --git a/addons/hr/views/hr_department_views.xml b/addons/hr/views/hr_department_views.xml
index 91590a1f609..e73d45b21ae 100644
--- a/addons/hr/views/hr_department_views.xml
+++ b/addons/hr/views/hr_department_views.xml
@@ -16,7 +16,7 @@
                                 <field string="Plans" name="plans_count" widget="statinfo"/>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="active" invisible="1"/>
                         <group>
                             <group>
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
index 06fa6d7f0b5..175bafc42f3 100644
--- a/addons/hr/views/hr_employee_public_views.xml
+++ b/addons/hr/views/hr_employee_public_views.xml
@@ -42,7 +42,7 @@
                         <div class="oe_button_box" name="button_box">
                             <!-- Used by other modules-->
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="row justify-content-between position-relative w-100 m-0 mb-2">
                             <div class="oe_title ps-0 pe-2">
                                 <label for="name" string="Employee Name"/>
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index 6ebf27690a9..193ad5603f6 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -60,7 +60,7 @@
                     <sheet>
                         <div name="button_box" class="oe_button_box">
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="avatar_128" invisible="1"/>
                         <div class="row justify-content-between position-relative w-100 m-0 mb-2">
                             <div class="oe_title mw-75 ps-0 pe-2">
diff --git a/addons/hr/views/hr_job_views.xml b/addons/hr/views/hr_job_views.xml
index 7cd4265ffbb..2b0a946fdbd 100644
--- a/addons/hr/views/hr_job_views.xml
+++ b/addons/hr/views/hr_job_views.xml
@@ -11,7 +11,7 @@
                     <field name="company_id" invisible="1"/>
                     <sheet>
                         <div class="oe_button_box" name="button_box"/>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name"/>
                             <h1><field name="name" options="{'line_breaks': False}" widget="text" placeholder="e.g. Sales Manager"/></h1>
diff --git a/addons/hr/views/hr_plan_views.xml b/addons/hr/views/hr_plan_views.xml
index 3b0a8f96da6..2d9ba7c338d 100644
--- a/addons/hr/views/hr_plan_views.xml
+++ b/addons/hr/views/hr_plan_views.xml
@@ -36,7 +36,7 @@
                 <form string="Planning">
                     <field name="company_id" invisible="1"/>
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name" string="Plan Name"/>
                             <h1>
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index d2a98f1b2d0..8d747a93c7b 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -176,7 +176,7 @@
                                 </div>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title pe-0 w-100 mw-100" name="title">
                             <h1 class="d-flex flex-row justify-content-between">
                                 <field name="name" class="text-truncate" placeholder="Contract Reference"/>
diff --git a/addons/hr_expense/views/hr_expense_views.xml b/addons/hr_expense/views/hr_expense_views.xml
index cf1e13c1ed5..93335436ebc 100644
--- a/addons/hr_expense/views/hr_expense_views.xml
+++ b/addons/hr_expense/views/hr_expense_views.xml
@@ -500,7 +500,7 @@
             <field name="arch" type="xml">
                 <form string="Expense Categories">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name='product_variant_count' invisible='1'/>
                         <field name="id" invisible="1"/>
                         <field name="image_1920" widget="image" class="oe_avatar" options="{'image_preview': 'image_128'}"/>
@@ -737,8 +737,8 @@
                             <field name="expense_number" widget="statinfo" string="Expenses"/>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Paid" bg_color="bg-success" attrs="{'invisible': [('payment_state', '!=', 'paid')]}"/>
-                    <widget name="web_ribbon" title="Partial" bg_color="bg-info" attrs="{'invisible': [('payment_state', '!=', 'partial')]}"/>
+                    <widget name="web_ribbon" title="Paid" bg_color="text-bg-success" attrs="{'invisible': [('payment_state', '!=', 'paid')]}"/>
+                    <widget name="web_ribbon" title="Partial" bg_color="text-bg-info" attrs="{'invisible': [('payment_state', '!=', 'partial')]}"/>
                     <widget name="web_ribbon" title="In Payment" attrs="{'invisible': [('payment_state', '!=', 'in_payment')]}"/>
                     <div class="oe_title">
                         <label for="name" class="oe_edit_only"/>
diff --git a/addons/hr_holidays/views/hr_leave_type_views.xml b/addons/hr_holidays/views/hr_leave_type_views.xml
index a2afaa3f5e0..9cffedafb86 100644
--- a/addons/hr_holidays/views/hr_leave_type_views.xml
+++ b/addons/hr_holidays/views/hr_leave_type_views.xml
@@ -55,7 +55,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1><field name="name"/></h1>
                     </div>
diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml
index 5653d011b60..e7daf15443a 100644
--- a/addons/hr_holidays/views/hr_leave_views.xml
+++ b/addons/hr_holidays/views/hr_leave_views.xml
@@ -225,7 +225,7 @@
                 <field name="state" widget="statusbar" statusbar_visible="confirm,validate" attrs="{'invisible': [('active', '=', False)]}"/>
             </header>
             <sheet>
-                <widget name="web_ribbon" title="Canceled" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Canceled" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <div class="alert alert-info" role="alert" attrs="{'invisible': ['|', ('request_unit_hours', '=', False), '|', ('tz_mismatch', '=', False), ('holiday_type', '=', 'category')]}">
                     <span attrs="{'invisible': [('holiday_type', '!=', 'employee')]}">
                         The employee has a different timezone than yours! Here dates and times are displayed in the employee's timezone
diff --git a/addons/hr_recruitment/views/hr_applicant_refuse_reason_views.xml b/addons/hr_recruitment/views/hr_applicant_refuse_reason_views.xml
index e07514e65d7..a29b77350df 100644
--- a/addons/hr_recruitment/views/hr_applicant_refuse_reason_views.xml
+++ b/addons/hr_recruitment/views/hr_applicant_refuse_reason_views.xml
@@ -7,7 +7,7 @@
             <field name="arch" type="xml">
                 <form string="Refuse Reason">
                     <sheet>
-                        <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" text="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <div class="oe_edit_only">
                                 <label for="name"/>
diff --git a/addons/hr_recruitment/views/hr_applicant_views.xml b/addons/hr_recruitment/views/hr_applicant_views.xml
index 62f7f6b106a..20c1e66d02f 100644
--- a/addons/hr_recruitment/views/hr_applicant_views.xml
+++ b/addons/hr_recruitment/views/hr_applicant_views.xml
@@ -97,8 +97,8 @@
                         </div>
                     </button>
                 </div>
-                <widget name="web_ribbon" title="Refused" bg_color="bg-danger" attrs="{'invisible': [('application_status', '!=', 'refused')]}"/>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('application_status', '!=', 'archived')]}"/>
+                <widget name="web_ribbon" title="Refused" bg_color="text-bg-danger" attrs="{'invisible': [('application_status', '!=', 'refused')]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('application_status', '!=', 'archived')]}"/>
                 <widget name="web_ribbon" title="Hired" attrs="{'invisible': [('application_status', '!=', 'hired')]}" />
                 <field name="active" invisible="1"/>
                 <field name="legend_normal" invisible="1"/>
@@ -332,7 +332,7 @@
                         <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click oe_applicant_kanban oe_semantic_html_override">
                             <field name="date_closed" invisible="1"/>
                             <div class="ribbon ribbon-top-right pe-none" attrs="{'invisible': [('date_closed', '=', False)]}">
-                                <span class="bg-success">Hired</span>
+                                <span class="text-bg-success">Hired</span>
                             </div>
                             <span class="badge rounded-pill text-bg-danger float-end me-4" attrs="{'invisible': [('application_status', '!=', 'refused')]}">Refused</span>
                             <span class="badge rounded-pill text-bg-secondary float-end me-4" attrs="{'invisible': [('application_status', '!=', 'archived')]}">Archived</span>
diff --git a/addons/hr_work_entry/views/hr_work_entry_views.xml b/addons/hr_work_entry/views/hr_work_entry_views.xml
index e66a9c704fa..271fa301ff5 100644
--- a/addons/hr_work_entry/views/hr_work_entry_views.xml
+++ b/addons/hr_work_entry/views/hr_work_entry_views.xml
@@ -169,7 +169,7 @@
         <field name="arch" type="xml">
             <form string="Work Entry Type" >
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1>
                             <field name="name" placeholder="Work Entry Type Name"/>
diff --git a/addons/im_livechat/views/chatbot_script_views.xml b/addons/im_livechat/views/chatbot_script_views.xml
index de67db5ce19..2c8fbda4bb9 100644
--- a/addons/im_livechat/views/chatbot_script_views.xml
+++ b/addons/im_livechat/views/chatbot_script_views.xml
@@ -26,7 +26,7 @@
                         </button>
                     </div>
                     <field name="active" invisible="1"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/>
                     <div class="oe_title">
                         <label for="title" string="Chatbot Name"/>
diff --git a/addons/loyalty/views/loyalty_program_views.xml b/addons/loyalty/views/loyalty_program_views.xml
index 0a831bb926c..6c9f13d5033 100644
--- a/addons/loyalty/views/loyalty_program_views.xml
+++ b/addons/loyalty/views/loyalty_program_views.xml
@@ -16,7 +16,7 @@
                         attrs="{'invisible': [('program_type', '!=', 'ewallet')]}" context="{'default_mode': 'selected'}"/>
                 </header>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button" type="object" name="action_open_loyalty_cards" icon="fa-tags">
                             <div class="o_form_field o_stat_info">
diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index 6af6295fe07..a8a075d5b11 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -70,7 +70,7 @@
                 <field name="company_id" invisible="1"/>
                 <field name="currency_id" invisible="1"/>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/>
                     <div class="oe_title">
                         <label for="name" class="oe-edit-only"/>
diff --git a/addons/lunch/views/lunch_supplier_views.xml b/addons/lunch/views/lunch_supplier_views.xml
index 85ae1cc6252..45d87a487ac 100644
--- a/addons/lunch/views/lunch_supplier_views.xml
+++ b/addons/lunch/views/lunch_supplier_views.xml
@@ -18,7 +18,7 @@
         <field name="arch" type="xml">
             <form>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name" string="Vendor"/>
                         <h1><field name="name" required="1" placeholder="e.g. The Pizzeria Inn"/></h1>
diff --git a/addons/mail/views/discuss_channel_views.xml b/addons/mail/views/discuss_channel_views.xml
index 83c802f018f..9aaf53878ed 100644
--- a/addons/mail/views/discuss_channel_views.xml
+++ b/addons/mail/views/discuss_channel_views.xml
@@ -22,7 +22,7 @@
                         <t t-name="kanban-box">
                             <div class="o_discuss_channel_kanban oe_module_vignette oe_kanban_global_click d-flex align-items-center">
                                 <div class="ribbon ribbon-top-right o_small" attrs="{'invisible': [('active', '=', True)]}">
-                                    <span class="bg-danger">Archived</span>
+                                    <span class="text-bg-danger">Archived</span>
                                 </div>
                                 <img t-att-src="kanban_image('discuss.channel', 'avatar_128', record.id.raw_value)" class="oe_module_icon" alt="Channel"/>
                                 <div class="oe_module_desc">
@@ -50,7 +50,7 @@
                         <div class="oe_button_box" name="button_box"/>
                         <field name="avatar_128" invisible="1"/>
                         <field name="image_128" widget="image" class="oe_avatar" options="{'size': [90, 90], 'preview_image':'avatar_128'}"/>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name" string="Group Name"/>
                             <h1>
diff --git a/addons/mail/views/fetchmail_views.xml b/addons/mail/views/fetchmail_views.xml
index a610a3ab81e..b52a3e94fe4 100644
--- a/addons/mail/views/fetchmail_views.xml
+++ b/addons/mail/views/fetchmail_views.xml
@@ -30,7 +30,7 @@
                     </header>
                     <sheet>
                     <field name="active" invisible="1"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger"
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger"
                         attrs="{'invisible': [('active', '=', True)]}"/>
                      <group>
                         <group>
diff --git a/addons/mail/views/mail_activity_views.xml b/addons/mail/views/mail_activity_views.xml
index 50029945cef..3fdc9ee5322 100644
--- a/addons/mail/views/mail_activity_views.xml
+++ b/addons/mail/views/mail_activity_views.xml
@@ -6,7 +6,7 @@
         <field name="arch" type="xml">
             <form string="Activities">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name" class="oe_edit_only"/>
                         <h1><field name="name" placeholder="e.g. Schedule a meeting"/></h1>
diff --git a/addons/mail/views/mail_blacklist_views.xml b/addons/mail/views/mail_blacklist_views.xml
index b823331e09b..c0d5eaea3b7 100644
--- a/addons/mail/views/mail_blacklist_views.xml
+++ b/addons/mail/views/mail_blacklist_views.xml
@@ -25,7 +25,7 @@
                         attrs="{'invisible': ['|', ('active', '=', True), ('email', '=', False)]}"/>
                 </header>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group>
                             <field name="email"/>
diff --git a/addons/mail_group/views/mail_group_message_views.xml b/addons/mail_group/views/mail_group_message_views.xml
index 720cd1517bc..57fd117d837 100644
--- a/addons/mail_group/views/mail_group_message_views.xml
+++ b/addons/mail_group/views/mail_group_message_views.xml
@@ -63,9 +63,9 @@
                         attrs="{'invisible': ['|', ('moderation_status', '!=', 'pending_moderation'), ('is_group_moderated', '=', True)]}"/>
                 </header>
                 <sheet>
-                    <widget name="web_ribbon" title="Rejected" bg_color="bg-danger"
+                    <widget name="web_ribbon" title="Rejected" bg_color="text-bg-danger"
                         attrs="{'invisible': [('moderation_status', '!=', 'rejected')]}"/>
-                    <widget name="web_ribbon" title="Accepted" bg_color="bg-success"
+                    <widget name="web_ribbon" title="Accepted" bg_color="text-bg-success"
                         attrs="{'invisible': [('moderation_status', '!=', 'accepted')]}"/>
                     <group>
                         <field name="mail_message_id" invisible="1"/>
diff --git a/addons/maintenance/views/maintenance_views.xml b/addons/maintenance/views/maintenance_views.xml
index ec2193e0e69..7c523f58bb8 100644
--- a/addons/maintenance/views/maintenance_views.xml
+++ b/addons/maintenance/views/maintenance_views.xml
@@ -342,7 +342,7 @@
                             <field string="Maintenance" name="maintenance_count" widget="statinfo"/>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name"/>
                         <h1><field name="name" string="Name" placeholder="e.g. LED Monitor"/></h1>
@@ -748,7 +748,7 @@
         <field name="arch" type="xml">
             <form string="Maintenance Team">
                 <sheet>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <div class="oe_title">
                     <label for="name" string="Team Name"/>
                     <h1>
diff --git a/addons/mass_mailing/views/mailing_list_views.xml b/addons/mass_mailing/views/mailing_list_views.xml
index 9999634bbc1..5fc8311bca1 100644
--- a/addons/mass_mailing/views/mailing_list_views.xml
+++ b/addons/mass_mailing/views/mailing_list_views.xml
@@ -86,7 +86,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name"/>
                         <h1>
diff --git a/addons/mass_mailing/views/mailing_mailing_views.xml b/addons/mass_mailing/views/mailing_mailing_views.xml
index d4f61d410fe..f2f84c36dda 100644
--- a/addons/mass_mailing/views/mailing_mailing_views.xml
+++ b/addons/mass_mailing/views/mailing_mailing_views.xml
@@ -166,7 +166,7 @@
                                 <field name="bounced_ratio" string="Bounced" widget="percentpie"/>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group class="o_mass_mailing_mailing_group">
                             <field name="active" invisible="1"/>
                             <field name="mailing_type" widget="radio" options="{'horizontal': true}" invisible="1"
diff --git a/addons/mrp/views/mrp_bom_views.xml b/addons/mrp/views/mrp_bom_views.xml
index 8ce0b8b55f6..35e887b5f04 100644
--- a/addons/mrp/views/mrp_bom_views.xml
+++ b/addons/mrp/views/mrp_bom_views.xml
@@ -47,7 +47,7 @@
                             <button name="%(action_report_mrp_bom)d" type="action"
                                 class="oe_stat_button" icon="fa-bars" string="Overview"/>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group>
                             <field name="active" invisible="1"/>
diff --git a/addons/mrp/views/mrp_routing_views.xml b/addons/mrp/views/mrp_routing_views.xml
index 5f0a456a024..f34aaa422e8 100644
--- a/addons/mrp/views/mrp_routing_views.xml
+++ b/addons/mrp/views/mrp_routing_views.xml
@@ -86,7 +86,7 @@
             <field name="arch" type="xml">
                 <form string="Routing Work Centers">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <group name="description">
                                 <field name="active" invisible="1"/>
diff --git a/addons/mrp/views/mrp_workcenter_views.xml b/addons/mrp/views/mrp_workcenter_views.xml
index ff2d0329fa4..b4d50ee285d 100644
--- a/addons/mrp/views/mrp_workcenter_views.xml
+++ b/addons/mrp/views/mrp_workcenter_views.xml
@@ -334,7 +334,7 @@
                                 </div>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <group>
                                 <field name="active" invisible="1"/>
diff --git a/addons/payment/views/payment_provider_views.xml b/addons/payment/views/payment_provider_views.xml
index b8adf8a0143..a6539c57162 100644
--- a/addons/payment/views/payment_provider_views.xml
+++ b/addons/payment/views/payment_provider_views.xml
@@ -52,8 +52,8 @@
                     </div>
                     <field name="image_128" widget="image" class="oe_avatar"
                            attrs="{'readonly': [('module_state', '!=', 'installed')]}"/>
-                    <widget name="web_ribbon" title="Disabled" bg_color="bg-danger" attrs="{'invisible': ['|', ('module_state', '!=', 'installed'), ('state', '!=', 'disabled')]}"/>
-                    <widget name="web_ribbon" title="Test Mode" bg_color="bg-warning" attrs="{'invisible': ['|', ('module_state', '!=', 'installed'), ('state', '!=', 'test')]}"/>
+                    <widget name="web_ribbon" title="Disabled" bg_color="text-bg-danger" attrs="{'invisible': ['|', ('module_state', '!=', 'installed'), ('state', '!=', 'disabled')]}"/>
+                    <widget name="web_ribbon" title="Test Mode" bg_color="text-bg-warning" attrs="{'invisible': ['|', ('module_state', '!=', 'installed'), ('state', '!=', 'test')]}"/>
                     <div class="oe_title">
                         <h1><field name="name" placeholder="Name"/></h1>
                         <div attrs="{'invisible': ['|', ('module_state', '=', 'installed'), ('module_id', '=', False)]}">
diff --git a/addons/payment/views/payment_token_views.xml b/addons/payment/views/payment_token_views.xml
index aa9a673432b..79d0d19e364 100644
--- a/addons/payment/views/payment_token_views.xml
+++ b/addons/payment/views/payment_token_views.xml
@@ -14,7 +14,7 @@
                                 type="action" icon="fa-money" string="Payments">
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group name="general_information">
                             <field name="payment_details"/>
diff --git a/addons/phone_validation/views/phone_blacklist_views.xml b/addons/phone_validation/views/phone_blacklist_views.xml
index 13eadad6dd4..1a1f9df63f8 100644
--- a/addons/phone_validation/views/phone_blacklist_views.xml
+++ b/addons/phone_validation/views/phone_blacklist_views.xml
@@ -25,7 +25,7 @@
                         attrs="{'invisible': ['|', ('active', '=', True), ('number', '=', False)]}"/>
                 </header>
                 <sheet>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group>
                             <field name="number"/>
diff --git a/addons/point_of_sale/views/pos_config_view.xml b/addons/point_of_sale/views/pos_config_view.xml
index 13dd859587f..9f57757a755 100644
--- a/addons/point_of_sale/views/pos_config_view.xml
+++ b/addons/point_of_sale/views/pos_config_view.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <form string="Point of Sale Configuration">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="active" invisible="1"/>
                     <field name="company_has_template" invisible="1"/>
                     <field name="has_active_session" invisible="1"/>
diff --git a/addons/point_of_sale/views/pos_payment_method_views.xml b/addons/point_of_sale/views/pos_payment_method_views.xml
index 506e0f6f05c..ebe6e30974e 100644
--- a/addons/point_of_sale/views/pos_payment_method_views.xml
+++ b/addons/point_of_sale/views/pos_payment_method_views.xml
@@ -6,7 +6,7 @@
         <field name="arch" type="xml">
             <form string="Payment Methods">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="active" invisible="1"/>
                     <field name="type" invisible="1" />
                     <div class="oe_title">
diff --git a/addons/pos_restaurant/views/pos_restaurant_views.xml b/addons/pos_restaurant/views/pos_restaurant_views.xml
index 3c0c769a5b2..11fbe6bc44f 100644
--- a/addons/pos_restaurant/views/pos_restaurant_views.xml
+++ b/addons/pos_restaurant/views/pos_restaurant_views.xml
@@ -8,7 +8,7 @@
             <field name="arch" type="xml">
                 <form string="Restaurant Floor">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="active" invisible="1"/>
                         <group col="4">
                             <field name="name" />
diff --git a/addons/product/views/product_pricelist_views.xml b/addons/product/views/product_pricelist_views.xml
index 2a04b727233..62bdd8cfb66 100644
--- a/addons/product/views/product_pricelist_views.xml
+++ b/addons/product/views/product_pricelist_views.xml
@@ -59,7 +59,7 @@
         <field name="arch" type="xml">
             <form string="Products Price List">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1><field name="name" placeholder="e.g. USD Retailers"/></h1>
                     </div>
diff --git a/addons/product/views/product_views.xml b/addons/product/views/product_views.xml
index 748407828e4..29bfe2be6a3 100644
--- a/addons/product/views/product_views.xml
+++ b/addons/product/views/product_views.xml
@@ -36,7 +36,7 @@
                                </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="id" invisible="True"/>
                     <field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/>
                     <div class="oe_title">
@@ -235,7 +235,7 @@
                     </header>
                     <sheet>
                         <div class="oe_button_box" name="button_box"/>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="active" invisible="1"/>
                         <field name="id" invisible="1"/>
                         <field name="company_id" invisible="1"/>
diff --git a/addons/project/views/project_project_stage_views.xml b/addons/project/views/project_project_stage_views.xml
index c6fd9f145b5..782948275f7 100644
--- a/addons/project/views/project_project_stage_views.xml
+++ b/addons/project/views/project_project_stage_views.xml
@@ -33,7 +33,7 @@
         <field name="arch" type="xml">
             <form delete="0">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <h1><field name="name" placeholder="New"/></h1>
                     <group>
                         <group>
diff --git a/addons/project/views/project_project_views.xml b/addons/project/views/project_project_views.xml
index 7ad3285a4a5..8c256de5fc3 100644
--- a/addons/project/views/project_project_views.xml
+++ b/addons/project/views/project_project_views.xml
@@ -51,7 +51,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1 class="d-flex flex-row">
                             <field name="is_favorite" nolabel="1" widget="boolean_favorite" class="me-2"/>
diff --git a/addons/project/views/project_sharing_project_task_views.xml b/addons/project/views/project_sharing_project_task_views.xml
index d9f490483ba..2a878c554c8 100644
--- a/addons/project/views/project_sharing_project_task_views.xml
+++ b/addons/project/views/project_sharing_project_task_views.xml
@@ -146,7 +146,7 @@
                             </div>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title pe-0">
                         <h1 class="d-flex flex-row justify-content-between">
                             <field name="priority" widget="priority" class="me-3"/>
diff --git a/addons/project/views/project_task_type_views.xml b/addons/project/views/project_task_type_views.xml
index 9052a00f875..47a11a15ce2 100644
--- a/addons/project/views/project_task_type_views.xml
+++ b/addons/project/views/project_task_type_views.xml
@@ -21,7 +21,7 @@
                 <form string="Task Stage" delete="0">
                     <field name="active" invisible="1" />
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}" />
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}" />
                         <group>
                             <group>
                                 <field name="name"/>
@@ -51,7 +51,7 @@
                 <form string="Task Stage" delete="0">
                     <field name="active" invisible="1" />
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}" />
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}" />
                         <group>
                             <group>
                                 <field name="name"/>
diff --git a/addons/project/views/project_task_views.xml b/addons/project/views/project_task_views.xml
index 17a794ad7c3..0a0b807213d 100644
--- a/addons/project/views/project_task_views.xml
+++ b/addons/project/views/project_task_views.xml
@@ -306,7 +306,7 @@
                         <!-- Dummy tag used to organize buttons -->
                         <span id="end_button_box" invisible="1"/>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title pe-0">
                         <h1 class="d-flex justify-content-between align-items-center">
                             <div class="d-flex w-100">
diff --git a/addons/purchase_requisition/views/purchase_requisition_views.xml b/addons/purchase_requisition/views/purchase_requisition_views.xml
index 5dfab9d3bfa..9e0cd14e6eb 100644
--- a/addons/purchase_requisition/views/purchase_requisition_views.xml
+++ b/addons/purchase_requisition/views/purchase_requisition_views.xml
@@ -44,7 +44,7 @@
         <field name="arch" type="xml">
             <form string="Purchase Agreement Types">
             <sheet>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <group>
                     <group string="Agreement Type">
                         <field name="name"/>
diff --git a/addons/resource/views/resource_calendar_views.xml b/addons/resource/views/resource_calendar_views.xml
index 53b5f52c312..b5d2157fd2e 100644
--- a/addons/resource/views/resource_calendar_views.xml
+++ b/addons/resource/views/resource_calendar_views.xml
@@ -24,7 +24,7 @@
                     <button name="switch_calendar_type" attrs="{'invisible':[('two_weeks_calendar', '=', False)]}" string="Switch to 1 week calendar" type="object" confirm="Are you sure you want to switch this calendar to 1 week calendar? All entries will be lost"/>
                 </header>
                 <sheet string="Working Time">
-                    <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_button_box" name="button_box">
                         <button name="%(resource_calendar_leaves_action_from_calendar)d" type="action"
                                 string="Time Off" icon="fa-plane"
diff --git a/addons/resource/views/resource_resource_views.xml b/addons/resource/views/resource_resource_views.xml
index b54ac282f28..17738022ef3 100644
--- a/addons/resource/views/resource_resource_views.xml
+++ b/addons/resource/views/resource_resource_views.xml
@@ -34,7 +34,7 @@
             <sheet>
                 <field name="active" invisible="1" />
                 <field name="company_id" invisible="1"/>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <group>
                     <group name="user_details">
                         <field name="name"/>
diff --git a/addons/sale_management/views/sale_order_template_views.xml b/addons/sale_management/views/sale_order_template_views.xml
index 065215a69aa..4e232df061d 100644
--- a/addons/sale_management/views/sale_order_template_views.xml
+++ b/addons/sale_management/views/sale_order_template_views.xml
@@ -21,7 +21,7 @@
             <form string="Quotation Template">
                 <sheet>
                     <div name="button_box" class="oe_button_box"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title" name="sale_order_template_title">
                         <label for="name" id="sale_order_template_title"/>
                         <h1>
diff --git a/addons/sales_team/views/crm_team_member_views.xml b/addons/sales_team/views/crm_team_member_views.xml
index 261741ff610..23e04ca736e 100644
--- a/addons/sales_team/views/crm_team_member_views.xml
+++ b/addons/sales_team/views/crm_team_member_views.xml
@@ -56,7 +56,7 @@
                     <t t-name="kanban-box">
                         <div class="oe_kanban_card oe_kanban_global_click">
                             <div class="ribbon ribbon-top-right" attrs="{'invisible': [('active', '=', True)]}">
-                                <span class="bg-danger">Archived</span>
+                                <span class="text-bg-danger">Archived</span>
                             </div>
                             <div class="o_kanban_card_content d-flex">
                                 <div>
@@ -105,7 +105,7 @@
                         attrs="{'invisible': [('member_warning', '=', False)]}">
                         <field name="member_warning"/>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="image_1920" widget='image' class="oe_avatar"
                         attrs="{'invisible': [('user_id', '=', False)]}"
                         options='{"preview_image": "image_128"}'/>
diff --git a/addons/sales_team/views/crm_team_views.xml b/addons/sales_team/views/crm_team_views.xml
index 2f760ffd99b..8839ca37d12 100644
--- a/addons/sales_team/views/crm_team_views.xml
+++ b/addons/sales_team/views/crm_team_views.xml
@@ -29,7 +29,7 @@
                 </div>
                 <sheet>
                     <div class="oe_button_box" name="button_box"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <label for="name" string="Sales Team"/>
                         <h1>
diff --git a/addons/stock/views/stock_location_views.xml b/addons/stock/views/stock_location_views.xml
index 52f442d3023..01dc80d0d0a 100644
--- a/addons/stock/views/stock_location_views.xml
+++ b/addons/stock/views/stock_location_views.xml
@@ -26,7 +26,7 @@
                                 class="oe_stat_button"
                                 icon="fa-cubes" name="%(location_open_quants)d" type="action"/>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <label for="name"/>
                     <h1><field name="name" placeholder="e.g. Spare Stock"/></h1>
                     <label for="location_id"/>
@@ -179,7 +179,7 @@
                 <form string="Route">
                     <field name="company_id" invisible="1"/>
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name"/>
                             <h1><field name="name" placeholder="e.g. Two-steps reception"/></h1>
diff --git a/addons/stock/views/stock_orderpoint_views.xml b/addons/stock/views/stock_orderpoint_views.xml
index af72498f734..1ebab25da85 100644
--- a/addons/stock/views/stock_orderpoint_views.xml
+++ b/addons/stock/views/stock_orderpoint_views.xml
@@ -134,7 +134,7 @@
                     <a style="cursor: pointer" class="alert-link o_form_uri" type="action" name="%(action_procurement_compute)d">Run the scheduler</a> manually to trigger the reordering rules right now.
                 </div>
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="oe_title">
                         <h1>
                             <field name="name"/>
diff --git a/addons/stock/views/stock_picking_type_views.xml b/addons/stock/views/stock_picking_type_views.xml
index 769efa49474..debd48bd17b 100644
--- a/addons/stock/views/stock_picking_type_views.xml
+++ b/addons/stock/views/stock_picking_type_views.xml
@@ -75,7 +75,7 @@
         <field name="arch" type="xml">
             <form string="Operation Types">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <label for="name"/>
                     <h1><field name="name" placeholder="e.g. Receptions"/></h1>
                     <group name="first">
diff --git a/addons/stock/views/stock_rule_views.xml b/addons/stock/views/stock_rule_views.xml
index ab1be7d6bfa..7bd2fdbd196 100644
--- a/addons/stock/views/stock_rule_views.xml
+++ b/addons/stock/views/stock_rule_views.xml
@@ -61,7 +61,7 @@
             <field name="arch" type="xml">
                 <form string="Rules">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <div class="oe_title">
                             <label for="name"/>
                             <h1><field name="name"/></h1>
diff --git a/addons/stock/views/stock_warehouse_views.xml b/addons/stock/views/stock_warehouse_views.xml
index e5d1681827c..8e71cee907d 100644
--- a/addons/stock/views/stock_warehouse_views.xml
+++ b/addons/stock/views/stock_warehouse_views.xml
@@ -14,7 +14,7 @@
                                     class="oe_stat_button"
                                     type="object"/>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <label for="name"/>
                         <h1><field name="name" placeholder="e.g. Central Warehouse"/></h1>
                         <group>
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml
index 0afcc91ab75..e2ed251b118 100644
--- a/addons/survey/views/survey_survey_views.xml
+++ b/addons/survey/views/survey_survey_views.xml
@@ -47,7 +47,7 @@
                             <field string="Participations" name="answer_done_count" widget="statinfo"/>
                         </button>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="background_image" widget="image" class="oe_avatar"/>
                     <field name="survey_type" widget="radio" options="{'horizontal': True}"/>
                     <div class="oe_title" style="width: 100%;">
@@ -325,13 +325,13 @@
                                 </button>
                             </div>
                             <widget name="web_ribbon" title="Archived"
-                                bg_color="bg-danger"
+                                bg_color="text-bg-danger"
                                 attrs="{'invisible': [('active', '=', True)]}"/>
                         </div>
                         <!-- displayed in grouped mode -->
                         <div class="o_survey_kanban_card_grouped">
                             <widget name="web_ribbon" title="Archived"
-                                bg_color="bg-danger"
+                                bg_color="text-bg-danger"
                                 attrs="{'invisible': [('active', '=', True)]}"/>
                             <div class="o_kanban_record_top">
                                 <h4 class="o_kanban_record_title p-0 mb4"><field name="title" /></h4>
diff --git a/addons/survey/views/survey_user_views.xml b/addons/survey/views/survey_user_views.xml
index 45f3b19ef39..4f9726f81bc 100644
--- a/addons/survey/views/survey_user_views.xml
+++ b/addons/survey/views/survey_user_views.xml
@@ -53,9 +53,9 @@
                         </button>
                     </div>
                     <field name="test_entry" invisible="1"/>
-                    <widget name="web_ribbon" title="Test Entry" bg_color="bg-info"
+                    <widget name="web_ribbon" title="Test Entry" bg_color="text-bg-info"
                         attrs="{'invisible': [('test_entry', '!=', True)]}"/>
-                    <widget name="web_ribbon" title="Failed" bg_color="bg-danger"
+                    <widget name="web_ribbon" title="Failed" bg_color="text-bg-danger"
                         attrs="{'invisible': ['|', '|', ('test_entry', '=', True), ('scoring_type', '=', 'no_scoring'), ('scoring_success', '=', True)]}"/>
                     <widget name="web_ribbon" title="Passed"
                         attrs="{'invisible': ['|', '|', ('test_entry', '=', True), ('scoring_type', '=', 'no_scoring'), ('scoring_success', '=', False)]}"/>
diff --git a/addons/utm/views/utm_campaign_views.xml b/addons/utm/views/utm_campaign_views.xml
index ed945e9f1b0..7be1f74e163 100644
--- a/addons/utm/views/utm_campaign_views.xml
+++ b/addons/utm/views/utm_campaign_views.xml
@@ -36,7 +36,7 @@
                 <sheet>
                     <div class="oe_button_box d-flex justify-content-end" name="button_box">
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group id="top-group">
                         <field name="active" invisible="1"/>
                         <field class="text-break" name="title" string="Campaign Name" placeholder="e.g. Black Friday"/>
diff --git a/addons/web/static/src/views/widgets/ribbon/ribbon.js b/addons/web/static/src/views/widgets/ribbon/ribbon.js
index 3b6440b45a3..91c34c55dfa 100644
--- a/addons/web/static/src/views/widgets/ribbon/ribbon.js
+++ b/addons/web/static/src/views/widgets/ribbon/ribbon.js
@@ -28,7 +28,7 @@ class RibbonWidget extends Component {
     };
     static defaultProps = {
         title: "",
-        bgClass: "bg-success",
+        bgClass: "text-bg-success",
     };
 
     get classes() {
diff --git a/addons/web/static/src/views/widgets/ribbon/ribbon.scss b/addons/web/static/src/views/widgets/ribbon/ribbon.scss
index 6837b0c7a13..c231abf7969 100644
--- a/addons/web/static/src/views/widgets/ribbon/ribbon.scss
+++ b/addons/web/static/src/views/widgets/ribbon/ribbon.scss
@@ -4,14 +4,6 @@
     overflow: hidden;
     position: absolute;
 
-    &::before, &::after {
-        position: absolute;
-        z-index: -1;
-        content: '';
-        display: block;
-        border: 5px solid #2980b9;
-    }
-
     & span {
         z-index: 1;
         position: absolute;
@@ -40,11 +32,6 @@
         margin-top: -$o-sheet-vpadding;
         right: 0;
 
-        &::before, &::after {
-            border-top-color: black;
-            border-right-color: black;
-        }
-
         &::before {
             top: 0;
             left: 0;
diff --git a/addons/website_blog/views/website_blog_views.xml b/addons/website_blog/views/website_blog_views.xml
index 432ba973baf..1f959a4fa3c 100644
--- a/addons/website_blog/views/website_blog_views.xml
+++ b/addons/website_blog/views/website_blog_views.xml
@@ -19,7 +19,7 @@
             <field name="arch" type="xml">
                 <form string="Blog">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <field name="active" invisible="1"/>
                             <field name="name"/>
diff --git a/addons/website_blog/views/website_pages_views.xml b/addons/website_blog/views/website_pages_views.xml
index cd2a7a0352c..1f8f062fbc8 100644
--- a/addons/website_blog/views/website_pages_views.xml
+++ b/addons/website_blog/views/website_pages_views.xml
@@ -10,7 +10,7 @@
                 <div class="oe_button_box" name="button_box" attrs="{'invisible': [('active', '=', False)]}">
                     <field name="is_published" widget="website_redirect_button"/>
                 </div>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <group name="blog_details">
                     <field name="blog_id"/>
                     <field name="active" invisible="1"/>
diff --git a/addons/website_event_exhibitor/views/event_sponsor_views.xml b/addons/website_event_exhibitor/views/event_sponsor_views.xml
index 348416b6d13..aa5d967ba9d 100644
--- a/addons/website_event_exhibitor/views/event_sponsor_views.xml
+++ b/addons/website_event_exhibitor/views/event_sponsor_views.xml
@@ -77,7 +77,7 @@
                         <field name="is_published" widget="website_redirect_button"
                             attrs="{'invisible': [('exhibitor_type', '=', 'sponsor')]}"/>
                     </div>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="active" invisible="1"/>
                     <field name="image_512" widget="image" class="oe_avatar"/>
                     <div class="oe_title">
diff --git a/addons/website_event_track/views/event_track_views.xml b/addons/website_event_track/views/event_track_views.xml
index 0b14ecb627c..8bb213cc278 100644
--- a/addons/website_event_track/views/event_track_views.xml
+++ b/addons/website_event_track/views/event_track_views.xml
@@ -156,7 +156,7 @@
                     <field name="legend_blocked" invisible="1"/>
                     <field name="legend_normal" invisible="1"/>
                     <field name="legend_done" invisible="1"/>
-                    <widget name="web_ribbon" text="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <div class="d-flex gap-4 mb-3">
                         <div class="flex-grow-1">
                             <label for="name"/>
diff --git a/addons/website_forum/views/forum_forum_views.xml b/addons/website_forum/views/forum_forum_views.xml
index a0d7ae32617..78003584cbf 100644
--- a/addons/website_forum/views/forum_forum_views.xml
+++ b/addons/website_forum/views/forum_forum_views.xml
@@ -49,7 +49,7 @@
                             </button>
                         </div>
                         <field name="active" invisible="1"/>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="image_1920" widget="image" options="{'preview_image': 'image_128'}" class="oe_avatar"/>
                         <div class="oe_title">
                             <label for="name"/>
diff --git a/addons/website_forum/views/forum_post_views.xml b/addons/website_forum/views/forum_post_views.xml
index 42bea1c9102..de40c8100cc 100644
--- a/addons/website_forum/views/forum_post_views.xml
+++ b/addons/website_forum/views/forum_post_views.xml
@@ -14,7 +14,7 @@
                         </div>
                     </button>
                 </div>
-                <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                 <label for="name"/>
                 <h1>
                     <field name="name" placeholder="e.g. When should I plant my tomatoes?"/>
diff --git a/addons/website_hr_recruitment/views/hr_job_views.xml b/addons/website_hr_recruitment/views/hr_job_views.xml
index 2fc2a29c9b3..303c5316ca6 100644
--- a/addons/website_hr_recruitment/views/hr_job_views.xml
+++ b/addons/website_hr_recruitment/views/hr_job_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[hasclass('o_kanban_card_header')]" position="before">
                 <field name="website_published" invisible="1"/>
                 <div class="ribbon ribbon-top-right" attrs="{'invisible': [('website_published', '=', False)]}">
-                    <span class="bg-success">Published</span>
+                    <span class="text-bg-success">Published</span>
                 </div>
             </xpath>
             <xpath expr="//div[@name='kanban_boxes']" position="attributes">
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index 4c04a686ccf..6188aa077de 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -60,7 +60,7 @@
                             </button>
                             <field name="is_published" widget="website_redirect_button"/>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/>
                         <div class="oe_title">
                             <label for="name" string="Course Title"/>
@@ -267,12 +267,12 @@
                                 <div class="ribbon ribbon-top-right"
                                     attrs="{'invisible': [('active', '=', True)]}">
                                     <field name="active" invisible="1"/>
-                                    <span class="bg-danger">Archived</span>
+                                    <span class="text-bg-danger">Archived</span>
                                 </div>
                                 <div class="ribbon ribbon-top-right"
                                     attrs="{'invisible': ['|', ('website_published', '!=', True), ('active', '=', False)]}">
                                     <field name="website_published" invisible="1"/>
-                                    <span class="bg-success">Published</span>
+                                    <span class="text-bg-success">Published</span>
                                 </div>
                                 <div class="o_kanban_card_header">
                                     <div class="o_kanban_card_header_title mb16">
diff --git a/addons/website_slides/views/slide_slide_views.xml b/addons/website_slides/views/slide_slide_views.xml
index cf20ea7b4d8..20166240e80 100644
--- a/addons/website_slides/views/slide_slide_views.xml
+++ b/addons/website_slides/views/slide_slide_views.xml
@@ -85,7 +85,7 @@
                             <field name="is_published" class="ms-1" widget="website_redirect_button"
                                    attrs="{'invisible': ['|',('is_category', '=', True), ('channel_id', '=', False)]}"/>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="image_1920" widget="image" class="oe_avatar" options='{"preview_image": "image_256"}'
                             attrs="{'invisible': [('is_category', '=', True)]}"/>
                         <div class="oe_title pe-xl-0">
diff --git a/odoo/addons/base/views/ir_mail_server_views.xml b/odoo/addons/base/views/ir_mail_server_views.xml
index fea86951064..26c53f10e3b 100644
--- a/odoo/addons/base/views/ir_mail_server_views.xml
+++ b/odoo/addons/base/views/ir_mail_server_views.xml
@@ -10,7 +10,7 @@
                             name="test_smtp_connection" class="btn-primary"/>
                     </header>
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger"
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger"
                             attrs="{'invisible': [('active', '=', True)]}"/>
                         <group>
                             <group>
diff --git a/odoo/addons/base/views/res_bank_views.xml b/odoo/addons/base/views/res_bank_views.xml
index 56aeffa2949..30bd0b4a55d 100644
--- a/odoo/addons/base/views/res_bank_views.xml
+++ b/odoo/addons/base/views/res_bank_views.xml
@@ -8,7 +8,7 @@
             <field name="arch" type="xml">
                 <form string="Bank">
                     <sheet>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <group name="bank_details" col="4">
                             <field name="name"/>
                             <field name="bic"/>
@@ -81,7 +81,7 @@
             <field name="arch" type="xml">
                 <form string="Bank account" name="bank_account_form">
                 <sheet>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <group>
                         <group>
                             <field name="sequence" invisible="1"/>
diff --git a/odoo/addons/base/views/res_partner_views.xml b/odoo/addons/base/views/res_partner_views.xml
index 702c34262c2..5ede699ccf2 100644
--- a/odoo/addons/base/views/res_partner_views.xml
+++ b/odoo/addons/base/views/res_partner_views.xml
@@ -174,7 +174,7 @@
                 </div>
                 <sheet>
                     <div class="oe_button_box" name="button_box"/>
-                    <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                    <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                     <field name="avatar_128" invisible="1"/>
                     <field name="image_1920" widget='image' class="oe_avatar" options='{"preview_image": "avatar_128"}'/>
                     <div class="oe_title mb24">
@@ -500,7 +500,7 @@
                                     </div>
                                 </t>
                                 <div class="ribbon ribbon-top-right" attrs="{'invisible': [('active', '=', True)]}">
-                                    <span class="bg-danger">Archived</span>
+                                    <span class="text-bg-danger">Archived</span>
                                 </div>
                                 <div class="oe_kanban_details d-flex flex-column justify-content-between">
                                     <div>
diff --git a/odoo/addons/base/views/res_users_views.xml b/odoo/addons/base/views/res_users_views.xml
index 7e2df572041..79abb144ea7 100644
--- a/odoo/addons/base/views/res_users_views.xml
+++ b/odoo/addons/base/views/res_users_views.xml
@@ -209,7 +209,7 @@
                                 <field string="Record Rules" name="rules_count" widget="statinfo"/>
                             </button>
                         </div>
-                        <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
+                        <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="active_partner" required="0" readonly="1" invisible="1"/>
                         <div class="alert alert-info text-center o_form_header"
                             attrs="{'invisible': [