[REM] *: drop custom bg-[color]-light classes

Drop custom `bg-[color]-light` classes in favor of BS's background
color opacity system.
ref: https://getbootstrap.com/docs/5.1/utilities/background/#opacity

Part of the overall v16 SCSS optimization/restyle, task-2704984.

task-2918463

Part-of: odoo/odoo#97051

addons/stock/report/report_stock_reception.xml

@@ -50,7 +50,7 @@
                                 <a href="#" t-att-res-model="doc_model" view-type="form" t-att-res-id="doc.id">
                                     <t t-esc="doc.display_name"/>
                                 </a>
-                                <span t-field="doc.state" t-attf-class="badge rounded-pill #{'bg-success-light' if doc.state == 'done' else 'bg-info-light'}"/>
+                                <span t-field="doc.state" t-attf-class="badge rounded-pill bg-opacity-50 #{'bg-success' if doc.state == 'done' else 'bg-info'}"/>
                             </div>
                         </t>
                     </t>

addons/web/static/src/legacy/js/fields/basic_fields_owl.js

@@ -19,7 +19,7 @@ odoo.define('web.basic_fields_owl', function (require) {
      */
     class FieldBadge extends AbstractField {
         _getClassFromDecoration(decoration) {
-            return `bg-${decoration.split('-')[1]}-light`;
+            return `bg-${decoration.split('-')[1]}`;
         }
     }
     FieldBadge.description = _lt("Badge");

addons/web/static/src/legacy/xml/fields.xml

@@ -7,7 +7,7 @@
     </t>
 
     <t t-name="web.FieldBadge" owl="1">
-        <span class="badge rounded-pill o_field_badge" t-esc="_formatValue(value)"/>
+        <span class="badge rounded-pill o_field_badge bg-opacity-50" t-esc="_formatValue(value)"/>
     </t>
 
 </templates>

addons/web/static/src/libs/bootstrap/utilities_custom.scss

@@ -114,6 +114,11 @@ $utilities: map-merge(
             property: cursor,
             values: default pointer,
         ),
+        "bg-opacity": (
+            css-var: true,
+            class: bg-opacity,
+            values: $utilities-opacity,
+        ),
         "flex-basis": (
             responsive: true,
             property: flex-basis,

addons/web/static/src/views/fields/badge/badge_field.js

@@ -18,7 +18,7 @@ export class BadgeField extends Component {
     get classFromDecoration() {
         for (const decorationName in this.props.decorations) {
             if (this.props.decorations[decorationName]) {
-                return `bg-${decorationName}-light`;
+                return `bg-${decorationName}`;
             }
         }
         return "";

addons/web/static/src/views/fields/badge/badge_field.xml

@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web.BadgeField" owl="1">
-        <span t-if="props.value" class="badge rounded-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
+        <span t-if="props.value" class="badge rounded-pill bg-opacity-50" t-att-class="classFromDecoration" t-esc="formattedValue" />
     </t>
 
 </templates>

addons/web/static/tests/legacy/fields/basic_fields_tests.js

@@ -9275,14 +9275,14 @@ QUnit.module('Legacy basic_fields', {
         });
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger-light');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning-light');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
 
         await list.reload();
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger-light');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning-light');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
 
         list.destroy();
     });

addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js

@@ -9908,14 +9908,14 @@ QUnit.module('Legacy fields', {}, function () {
             });
 
             assert.containsN(form, '.o_data_row', 2);
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning-light');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
 
             await testUtils.dom.click(form.$('.o_data_row .o_data_cell:first'));
             await testUtils.owlCompatibilityExtraNextTick();
             await testUtils.fields.editInput(form.$('.o_selected_row .o_field_integer'), '44');
             await testUtils.owlCompatibilityExtraNextTick();
 
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning-light');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
 
             form.destroy();
         });

addons/web/static/tests/views/fields/badge_field_tests.js

@@ -124,7 +124,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.containsN(target, '.o_field_badge[name="display_name"]', 4);
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger-light');
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning-light');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning');
     });
 });

addons/web/static/tests/views/fields/one2many_field_tests.js

@@ -10855,7 +10855,7 @@ QUnit.module("Fields", (hooks) => {
         assert.containsN(target, ".o_data_row", 2);
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning-light"
+            "bg-warning"
         );
 
         await click(target.querySelector(".o_data_row .o_data_cell"));
@@ -10863,7 +10863,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning-light"
+            "bg-warning"
         );
     });