[REF] *: BS5: migration

Automated change made by a lot of RegEx to change all think that is
possible to automate.

https://getbootstrap.com/docs/5.1/migration

Task ID: 2766483

Part-of: odoo/design-themes#580

theme_bewise/views/customizations.xml

@@ -83,7 +83,7 @@
     </xpath>
     <xpath expr="//p[2]" position="replace">
         <p>Journalists, directors, developers, etc. working effectively in their fields of excellence.</p>
-        <div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -109,7 +109,7 @@
     </xpath>
     <xpath expr="//p[2]" position="replace">
         <p>All students benefit from individualised support.</p>
-        <div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -191,7 +191,7 @@
     </xpath>
     <!-- Slide #2 - blockquote -->
     <xpath expr="(//blockquote)[2]" position="attributes">
-        <attribute name="class" add="w-75 mx-auto" remove="w-50 mr-auto" separator=" "/>
+        <attribute name="class" add="w-75 mx-auto" remove="w-50 me-auto" separator=" "/>
     </xpath>
     <xpath expr="(//blockquote)[2]//i" position="attributes">
         <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
@@ -210,7 +210,7 @@
     </xpath>
     <!-- Slide #3 - blockquote -->
     <xpath expr="(//blockquote)[3]" position="attributes">
-        <attribute name="class" add="w-75 mx-auto" remove="w-50 ml-auto" separator=" "/>
+        <attribute name="class" add="w-75 mx-auto" remove="w-50 ms-auto" separator=" "/>
     </xpath>
     <xpath expr="(//blockquote)[3]//i" position="attributes">
         <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>

theme_bistro/views/snippets/s_quotes_carousel.xml

@@ -13,7 +13,7 @@
         <attribute name="style">background-image: none;</attribute>
     </xpath>
     <xpath expr="//blockquote[1]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
     </xpath>
     <xpath expr="//p[1]" position="replace" mode="inner">
         Cosy and friendly, good atmosphere and super food. Especially the spiced fruit crumble.
@@ -24,7 +24,7 @@
         <attribute name="style">background-image: none;</attribute>
     </xpath>
     <xpath expr="(//blockquote)[2]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
     </xpath>
     <xpath expr="(//p)[2]" position="replace" mode="inner">
         This place is perfect for groups or a casual date night.
@@ -35,7 +35,7 @@
         <attribute name="style">background-image: none;</attribute>
     </xpath>
     <xpath expr="(//blockquote)[3]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
     </xpath>
     <xpath expr="(//p)[3]" position="replace" mode="inner">
         A truly exquisite dining experience. I highly recommend the Mustard Sauce, out of this world.

theme_common/static/src/old_snippets/s_compact_menu/000.scss

@@ -17,12 +17,12 @@
             > .row {
                 min-height: 150px;
                 height: auto;
-                border-left: 3px solid gray('200');
+                border-left: 3px solid map-get($grays, '200');
 
                 > .menublock {
                     margin: 0 0 0 20px;
                     padding: 0 20px 0 0;
-                    border-bottom: 1px solid gray('200');
+                    border-bottom: 1px solid map-get($grays, '200');
                     float: left;
                     h4 {
                         font-weight: bold;

theme_common/static/src/old_snippets/s_discount/000.scss

@@ -4,7 +4,7 @@
     padding: 30px 0;
     border-radius: $s-discount-box-border-radius;
     position: relative;
-    box-shadow: 0px 0px 5px 0px rgba(gray('700'), 0.5);
+    box-shadow: 0px 0px 5px 0px rgba(map-get($grays, '700'), 0.5);
     word-wrap: break-word;
 
     &:before {
@@ -63,7 +63,7 @@
 #wrapwrap .s_discount_descr {
     text-align: center;
     font-size: 13px;
-    color: gray('800');
+    color: map-get($grays, '800');
     margin-top: 10px;
     padding: 20px 25px;
     @include s-discount-descr-hook;
@@ -92,7 +92,7 @@
     border-radius: 4px;
     margin-top: 10px;
     background: #f0f0f0;
-    color: gray('800');
+    color: map-get($grays, '800');
     .code {
         padding: 10px 15px;
     }

theme_common/static/src/old_snippets/s_event_list/000.scss

@@ -42,13 +42,13 @@
             text-align: center;
             > li {
                 float: left;
-                color: gray('800');
+                color: map-get($grays, '800');
                 font-size: 11px;
                 font-weight: 300;
 
                 &:hover {
-                    color: gray('800');
+                    color: map-get($grays, '800');
-                    background-color: gray('200');
+                    background-color: map-get($grays, '200');
                 }
 
                 > a {
@@ -87,7 +87,7 @@
                 > a {
                     display: block;
                     width: 100%;
-                    color: gray('800');
+                    color: map-get($grays, '800');
                     text-decoration: none;
                 }
             }
@@ -174,7 +174,7 @@
             width: 40px;
             > ul {
                 height: 100%;
-                border-left: 1px solid lighten(gray('200'), 10%);
+                border-left: 1px solid lighten(map-get($grays, '200'), 10%);
                 > li {
                     width: 100%;
                     height: 33.333%;

theme_common/static/src/old_snippets/s_event_slide/000.scss

@@ -22,8 +22,8 @@
                 background-color: o-color('epsilon');
             }
             > .row > div {
-                border-right: 1px solid gray('200');
+                border-right: 1px solid map-get($grays, '200');
-                border-bottom: 1px solid gray('200');
+                border-bottom: 1px solid map-get($grays, '200');
                 text-align: left;
                 h4 {
                     text-align: center;

theme_common/static/src/old_snippets/s_features_carousel/000.scss

@@ -40,17 +40,17 @@
         border-bottom: {
             width: $s-features-carousel-border-width;
             style: $s-features-carousel-border-style;
-            color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, gray('600'));
+            color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, map-get($grays, '600'));
         }
         text-align: center;
         padding-bottom: 30px;
     }
     .carousel-indicators {
-        border-top: 1px dotted gray('600');
+        border-top: 1px dotted map-get($grays, '600');
         padding-top: 32px;
         visibility: $s-features-carousel-indicators-visible;
         li {
-            border: 1px solid gray('200');
+            border: 1px solid map-get($grays, '200');
         }
     }
     .carousel-indicators .active {

theme_common/static/src/old_snippets/s_full_menu/000.scss

@@ -8,10 +8,10 @@
             font-size: 20px;
         }
         .menu-container > .s_full_menu_content {
-            border-left: 3px solid gray('200');
+            border-left: 3px solid map-get($grays, '200');
             .row {
                 .s_full_menu_content_description {
-                    border-bottom: 1px solid gray('200');
+                    border-bottom: 1px solid map-get($grays, '200');
                     padding-bottom: 15px;
                     line-height: 1;
                     span {

theme_common/static/src/old_snippets/s_pricing/000.scss

@@ -1,6 +1,6 @@
 #wrapwrap .s_pricing strong {
     font-weight: 700;
-    color: gray('800');
+    color: map-get($grays, '800');
 }
 
 #wrapwrap .s_pricing_footer {
@@ -8,7 +8,7 @@
 }
 #wrapwrap .s_pricing_box {
     box-shadow: 0px 2px 5px 0px rgba(black, 0.1);
-    border: 1px solid lighten(gray('200'), 10%);
+    border: 1px solid lighten(map-get($grays, '200'), 10%);
 }
 
 #wrapwrap .s_pricing_header {

theme_common/static/src/old_snippets/s_profile/000.scss

@@ -1,18 +1,18 @@
 #wrapwrap .s_profile_box {
     min-height: 450px;
-    color: gray('800');
+    color: map-get($grays, '800');
 
     @include media-breakpoint-down(lg) {
         text-align: center;
     }
 
     h2 {
-        color: gray('800');
+        color: map-get($grays, '800');
     }
 
     span.tags
     {
-        background: gray('700');
+        background: map-get($grays, '700');
         border-radius: 2px;
         color: white;
         padding: 2px 4px;
@@ -21,14 +21,14 @@
 }
 
 #wrapwrap .s_profile_box_divider {
-    border-top: 1px solid lighten(gray('600'), 15%);
+    border-top: 1px solid lighten(map-get($grays, '600'), 15%);
 }
 
 #wrapwrap .s_profile_box_emphasis:hover {
     transition: all 0.3s ease-in-out;
-    background-color: lighten(gray('200'), 10%);
+    background-color: lighten(map-get($grays, '200'), 10%);
 }
 
 #wrapwrap .s_profile .card p, #wrapwrap .s_profile .card h2 {
-    color: gray('800');
+    color: map-get($grays, '800');
 }

theme_common/static/src/scss/compatibility-saas-10-1.scss

@@ -10,8 +10,8 @@
     }
 }
 
-.black { @include bg-compatibility-mixin($black, gray('600')); }
+.black { @include bg-compatibility-mixin($black, map-get($grays, '600')); }
-.darkgray { @include bg-compatibility-mixin(gray('800'), $white); }
+.darkgray { @include bg-compatibility-mixin(map-get($grays, '800'), $white); }
-.gray { @include bg-compatibility-mixin(gray('700'), $white); }
+.gray { @include bg-compatibility-mixin(map-get($grays, '700'), $white); }
-.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); }
+.lightgray { @include bg-compatibility-mixin(map-get($grays, '200'), map-get($grays, '700')); }
-.white { @include bg-compatibility-mixin($white, gray('700')); }
+.white { @include bg-compatibility-mixin($white, map-get($grays, '700')); }

theme_common/static/src/scss/compatibility-saas-10-2.scss

@@ -3,23 +3,23 @@
 // To allow a smooth transition, old classes alias are created here.
 
 // Define new theme variables in case the user changes its theme
-$gray-light-light: gray('200');
+$gray-light-light: map-get($grays, '200');
-$gray-light-dark: gray('600');
+$gray-light-dark: map-get($grays, '600');
-$gray-dark-light: gray('700');
+$gray-dark-light: map-get($grays, '700');
-$gray-dark-dark: gray('900');
+$gray-dark-dark: map-get($grays, '900');
-$gray-darkest: gray('900');
+$gray-darkest: map-get($grays, '900');
 
 body .color-black { color: $black; }
 body .color-white { color: $white; }
-body .color-gray-lighter { color: gray('200'); }
+body .color-gray-lighter { color: map-get($grays, '200'); }
 body .color-gray-light-light { color: $gray-light-light; }
-body .color-gray-light { color: gray('600'); }
+body .color-gray-light { color: map-get($grays, '600'); }
 body .color-gray-light-dark { color: $gray-light-dark; }
-body .color-gray { color: gray('700'); }
+body .color-gray { color: map-get($grays, '700'); }
 body .color-gray-dark-light { color: $gray-dark-light; }
-body .color-gray-dark { color: gray('900'); }
+body .color-gray-dark { color: map-get($grays, '900'); }
 body .color-gray-dark-dark { color: $gray-dark-dark; }
-body .color-gray-darker { color: gray('900'); }
+body .color-gray-darker { color: map-get($grays, '900'); }
 body .color-gray-darkest { color: $gray-darkest; }
 body .color-alpha { color: o-color('alpha'); }
 body .color-beta { color: o-color('beta'); }

theme_common/static/src/scss/compatibility-saas-11.4-variables.scss

@@ -4,7 +4,7 @@
     li {
         width: 12px;
         height: 12px;
-        border-color: gray('900');
+        border-color: map-get($grays, '900');
         margin: 0;
         &:hover {
             border-color: o-color('alpha');

theme_common/static/src/scss/compatibility-saas-11.4.scss

@@ -317,7 +317,7 @@
 #wrapwrap .s_separator_shade hr {
     height: 2px;
     border-top: 0;
-    background: gray('700');
+    background: map-get($grays, '700');
     border-radius: 5px;
 }
 
@@ -411,7 +411,7 @@
     color: white;
     padding-top: 32px;
     p {
-        color: gray('800');
+        color: map-get($grays, '800');
         font-size: 16px;
     }
 }
@@ -436,7 +436,7 @@
     &.quotecarousel {
         padding: 0;
     }
-    @include blockquote-layout(#fff, gray('900'));
+    @include blockquote-layout(#fff, map-get($grays, '900'));
     .carousel-indicators {
         @include carousel-indicators(5px, -5px);
     }
@@ -602,7 +602,7 @@
         position: absolute;
         content: " ";
         width: 3px;
-        background-color: gray('200');
+        background-color: map-get($grays, '200');
         left: 50%;
         margin-left: -1.5px;
     }
@@ -787,17 +787,17 @@
 
 #wrapwrap .s_timeline_title {
     margin-top: 0;
-    color: gray('800');
+    color: map-get($grays, '800');
 }
 
 #wrapwrap .s_timeline_info {
     margin-top: 0;
-    color: gray('700');
+    color: map-get($grays, '700');
 }
 
 #wrapwrap .s_timeline_date {
     margin-top: 0;
-    color: gray('800');
+    color: map-get($grays, '800');
 }
 
 $s-timeline-company-color: o-color('alpha') !default;
@@ -808,13 +808,13 @@ $s-timeline-company-color: o-color('alpha') !default;
 }
 
 #wrapwrap .s_timeline_heading {
-    color: gray('800');
+    color: map-get($grays, '800');
 }
 
 #wrapwrap .s_timeline_body > p,
 #wrapwrap .s_timeline_body > ul {
     margin-bottom: 0;
-    color: gray('800');
+    color: map-get($grays, '800');
 }
 
 #wrapwrap .s_timeline_body > p + p {
@@ -855,7 +855,7 @@ $s-timeline-company-color: o-color('alpha') !default;
         top: 10px;
         bottom: 10px;
         left: 50%;
-        background-color: gray('700');
+        background-color: map-get($grays, '700');
     }
 
     li {
@@ -875,7 +875,7 @@ $s-timeline-company-color: o-color('alpha') !default;
         .timeline-content-double {
             position: relative;
             width: 50%;
-            color: gray('900');
+            color: map-get($grays, '900');
             &:after {
                 content: '';
                 position: absolute;
@@ -883,8 +883,8 @@ $s-timeline-company-color: o-color('alpha') !default;
                 right: 30px;
                 display: inline-block;
                 border-top: 5px solid rgba(0, 0, 0, 0);
-                border-left: 5px solid gray('900');
+                border-left: 5px solid map-get($grays, '900');
-                border-right: 0 solid gray('900');
+                border-right: 0 solid map-get($grays, '900');
                 border-bottom: 5px solid rgba(0, 0, 0, 0);
             }
 
@@ -922,7 +922,7 @@ $s-timeline-company-color: o-color('alpha') !default;
             line-height: 30px;
             margin-left: -40px;
             background-color: #fff;
-            color: gray('900');
+            color: map-get($grays, '900');
             font-weight: 700;
             text-align: center;
             z-index: $zindex-navbar;
@@ -967,7 +967,7 @@ $s-timeline-company-color: o-color('alpha') !default;
         }
 
         li {
-            border-bottom: 1px solid gray('200');
+            border-bottom: 1px solid map-get($grays, '200');
             &:last-child{
                 border-bottom: 0;
             }
@@ -1177,15 +1177,15 @@ $s-timeline-company-color: o-color('alpha') !default;
 }
 
 #wrapwrap .s_references_2 {
-    @include blockquote-layout(gray('200'), gray('900'));
+    @include blockquote-layout(map-get($grays, '200'), map-get($grays, '900'));
     .carousel-indicators {
         @include carousel-indicators(-15px, -10px);
     }
 }
 
 #wrapwrap .s_medias_list {
-    background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200'));
+    background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, map-get($grays, '200'));
-    .media {
+    .d-flex {
         @include media-breakpoint-down(lg) {
             height: auto !important;
         }
@@ -1200,7 +1200,7 @@ $s-timeline-company-color: o-color('alpha') !default;
             }
             .media-options {
                 height: 100%;
-                background-color: gray('200');
+                background-color: map-get($grays, '200');
                 > .row {
                     margin: 0;
                     [class*="col-"]{

theme_common/static/src/scss/mixins.scss

@@ -83,14 +83,14 @@
 @mixin carousel-control($position, $fa-position, $fa-padding) {
     opacity: 1;
     text-shadow: none;
-    color: gray('900');
+    color: map-get($grays, '900');
     font-size: inherit;
     width: 5%;
     .fa {
         top: 50%;
         background-color: #fff;
         &:hover {
-            color: theme-color('primary');
+            color: map-get($theme-colors, 'primary');
         }
         @include media-breakpoint-down(md) {
             top: auto;
@@ -252,17 +252,17 @@
             // designed... should we keep this ?
             @each $color, $alias in ('success': 'epsilon', 'info': 'gamma', 'warning': 'delta') {
                 &.btn-#{$color} {
-                    @include button-variant(theme-color($alias), theme-color($alias));
+                    @include button-variant(map-get($theme-colors, $alias), map-get($theme-colors, $alias));
                 }
                 &.btn-outline-#{$color} {
-                    @include button-outline-variant(theme-color($alias));
+                    @include button-outline-variant(map-get($theme-colors, $alias));
                 }
             }
             &.btn-danger {
-                @include button-variant(gray('black'), gray('black'));
+                @include button-variant(map-get($grays, 'black'), map-get($grays, 'black'));
             }
             &.btn-outline-danger {
-                @include button-outline-variant(gray('black'), gray('black'));
+                @include button-outline-variant(map-get($grays, 'black'), map-get($grays, 'black'));
             }
         }
     }
@@ -288,7 +288,7 @@
     border-right-width: 0px;
     border-radius: 0px;
     @if $with-color {
-        color: gray('700');
+        color: map-get($grays, '700');
     }
 
     &:focus {
@@ -396,13 +396,13 @@
 }
 
 @mixin o-theme-cfa-ecommerce-classes(
-    $nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: gray('800'),
+    $nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: map-get($grays, '800'),
     $nav-link-active-bg-color: rgba(0, 0, 0, 0), $nav-link-active-color: o-color('epsilon'),
-    $js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: gray('700'),
+    $js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: map-get($grays, '700'),
     $h6-padding-y: 10px, $h6-font-size: 13px, $h6-text-align: left, $h6-border-top: 0, $h6-border-bottom: 0, $h6-color: o-color('delta'),
     $price-font-size: 12px, $product-price-padding: 0, $product-price-align: left, $btn-secondary-padding: 5px 10px,
-    $right-column-border-bottom: 1px solid gray('700'), $right-column-color: gray('700'), $right-column-font-weight: bold,
+    $right-column-border-bottom: 1px solid map-get($grays, '700'), $right-column-color: map-get($grays, '700'), $right-column-font-weight: bold,
-    $add-cart-bg-color: gray('700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) {
+    $add-cart-bg-color: map-get($grays, '700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) {
 
     .breadcrumb {
         padding-top: 20px;
@@ -435,10 +435,10 @@
     }
     .oe_product  {
         .btn.btn-danger {
-            @include button-variant(theme-color('danger'), theme-color('danger'));
+            @include button-variant(map-get($theme-colors, 'danger'), map-get($theme-colors, 'danger'));
         }
         .text-danger {
-            color: theme-color('danger') !important;
+            color: map-get($theme-colors, 'danger') !important;
         }
         .o_wsale_product_information {
             padding: 0px 15px;
@@ -571,7 +571,7 @@
             background-color: rgba(0, 0, 0, 0);
         }
         strong {
-            color: gray('700');
+            color: map-get($grays, '700');
         }
         #cart_products img {
             max-width: 100px;
@@ -594,7 +594,7 @@
         font-size: 18px;
     }
     #right_column {
-        color: gray('700');
+        color: map-get($grays, '700');
         a {
             color: red;
         }
@@ -701,10 +701,10 @@
 
 @mixin o-theme-chd-bg-gradient-classes() {
     .bg_gradient_primary_down {
-        background-image: linear-gradient( rgba(theme-color('primary'), 0), rgba(theme-color('primary'), 1) ),;
+        background-image: linear-gradient( rgba(map-get($theme-colors, 'primary'), 0), rgba(map-get($theme-colors, 'primary'), 1) ),;
     }
     .bg_gradient_primary_up {
-        background-image: linear-gradient( rgba(theme-color('primary'), 1), rgba(theme-color('primary'), 0) ),;
+        background-image: linear-gradient( rgba(map-get($theme-colors, 'primary'), 1), rgba(map-get($theme-colors, 'primary'), 0) ),;
     }
     .bg_gradient_white_down_thumb {
         background-image: linear-gradient( rgba(#ccc, 1), rgba(white, 0.5) ),;
@@ -923,7 +923,7 @@
             &:before {
                 content: "";
                 width: 1px;
-                background-color: gray('200');
+                background-color: map-get($grays, '200');
                 height: 100%;
                 @include o-position-absolute(0, auto, 0, -10%);
             }
@@ -968,7 +968,7 @@
                             label.css_attribute_color {
                                 opacity: 0.8;
                                 cursor: pointer;
-                                border: 1px solid gray('600');
+                                border: 1px solid map-get($grays, '600');
                                 box-shadow: inset 0 0 0 2px #fff;
                                 border-radius: 2px;
 
@@ -1126,8 +1126,8 @@
         .input-group .form-control {
             height: auto;
             padding: $padding;
-            color: gray('900');
+            color: map-get($grays, '900');
-            @include border-left-radius(20px);
+            @include border-start-radius(20px);
 
             + .input-group-append button {
                 padding: 6px 20px;
@@ -1138,10 +1138,10 @@
         // Ask a question - Button
         .btn-group .btn {
             padding: 6px 12px;
-            @include border-right-radius(0);
+            @include border-end-radius(0);
             &.dropdown-toggle {
-                @include border-left-radius(0);
+                @include border-start-radius(0);
-                @include border-right-radius(20px);
+                @include border-end-radius(20px);
             }
         }
         // Ask a question - Editor icons

theme_enark/views/snippets/s_numbers.xml

@@ -18,13 +18,13 @@
         <attribute name="class" remove="col-lg-3" separator=" "/>
     </xpath>
     <xpath expr="(//h6)[1]" position="attributes">
-        <attribute name="class" add="m-0 pl-3" separator=" "/>
+        <attribute name="class" add="m-0 ps-3" separator=" "/>
     </xpath>
     <xpath expr="(//h6)[2]" position="attributes">
-        <attribute name="class" add="m-0 pl-3" separator=" "/>
+        <attribute name="class" add="m-0 ps-3" separator=" "/>
     </xpath>
     <xpath expr="(//h6)[3]" position="attributes">
-        <attribute name="class" add="m-0 pl-3" separator=" "/>
+        <attribute name="class" add="m-0 ps-3" separator=" "/>
     </xpath>
 </template>
 

theme_graphene/views/customizations.xml

@@ -48,7 +48,7 @@
     </xpath>
     <xpath expr="//h2" position="replace">
         <h3>Unique experiences to drive engagement</h3>
-        <div class="s_hr text-left pt16 pb0" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pt16 pb0" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0) !important;"/>
         </div>
     </xpath>
@@ -57,7 +57,7 @@
     </xpath>
     <xpath expr="//p[2]" position="replace">
         <p>We have one goal in mind, the user satisfaction.</p>
-        <div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -81,12 +81,12 @@
         <attribute name="class" add="col-lg-4 offset-lg-1" remove="col-lg-6" separator=" "/>
     </xpath>
     <xpath expr="//h2" position="after">
-        <div class="s_hr text-left pt16 pb0" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pt16 pb0" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0) !important;"/>
         </div>
     </xpath>
     <xpath expr="//p[2]" position="after">
-        <div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -169,7 +169,7 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns" name="Graphene s_three_columns">
     <xpath expr="//div[hasclass('row')]/div//h3[1]" position="replace">
         <h5>Powerful API</h5>
-        <div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -178,7 +178,7 @@
     </xpath>
     <xpath expr="//div[hasclass('row')]/div[2]//h3[1]" position="replace">
         <h5>Mobile Experience</h5>
-        <div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>
@@ -187,7 +187,7 @@
     </xpath>
     <xpath expr="//div[hasclass('row')]/div[3]//h3[1]" position="replace">
         <h5>Support Team</h5>
-        <div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
         </div>
     </xpath>

theme_kiddo/static/src/old_snippets/s_discount/000_variables.scss

@@ -7,7 +7,7 @@ $s-discount-amount-size: 70px;
     color: o-color('alpha');
 }
 @mixin s-discount-box-hook {
-    color: gray('700');
+    color: map-get($grays, '700');
 
     .s_discount_open-code {
         color: o-color('gamma');

theme_kiddo/views/snippets/s_image_text.xml

@@ -23,8 +23,8 @@
         Activities
     </xpath>
     <xpath expr="//h2" position="after">
-        <div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
-            <hr class="w-50 mr-auto" style="border-top: 4px dotted var(--o-color-2) !important;"/>
+            <hr class="w-50 me-auto" style="border-top: 4px dotted var(--o-color-2) !important;"/>
         </div>
     </xpath>
     <xpath expr="//p" position="replace" mode="inner">

theme_kiddo/views/snippets/s_quotes_carousel.xml

@@ -15,7 +15,7 @@
         <attribute name="class" add="pt128 pb128" remove="pt80 pb80" separator=" "/>
     </xpath>
     <xpath expr="(//blockquote)[2]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
     </xpath>
     <xpath expr="(//i)[2]" position="attributes">
         <attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
@@ -26,7 +26,7 @@
         <attribute name="class" add="pt128 pb128" remove="pt80 pb80" separator=" "/>
     </xpath>
     <xpath expr="(//blockquote)[3]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
     </xpath>
     <xpath expr="(//i)[3]" position="attributes">
         <attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>

theme_kiddo/views/snippets/s_text_image.xml

@@ -20,8 +20,8 @@
 
     <!-- Separator -->
     <xpath expr="//h2" position="after">
-        <div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
-            <hr class="w-50 mr-auto" style="border-top: 4px dotted var(--o-color-1) !important;"/>
+            <hr class="w-50 me-auto" style="border-top: 4px dotted var(--o-color-1) !important;"/>
         </div>
     </xpath>
     

theme_kiddo/views/snippets/s_three_columns.xml

@@ -33,7 +33,7 @@
     </xpath>
     <!-- Column n°1 - Add separator -->
     <xpath expr="//h3" position="after">
-        <div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
             <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
         </div>
     </xpath>
@@ -65,7 +65,7 @@
     </xpath>
     <!-- Column n°2 - Add separator -->
     <xpath expr="(//h3)[2]" position="after">
-        <div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
             <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-1) !important;"/>
         </div>
     </xpath>
@@ -97,7 +97,7 @@
     </xpath>
     <!-- Column n°3 - Add separator -->
     <xpath expr="(//h3)[3]" position="after">
-        <div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
             <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
         </div>
     </xpath>

theme_loftspace/static/src/old_snippets/s_features_carousel/000_variables.scss

@@ -9,5 +9,5 @@ $s-features-carousel-indicators-visible: visible;
     }
 }
 @mixin s-features-carousel-mask-hook {
-    border: 1px solid gray('200');
+    border: 1px solid map-get($grays, '200');
 }

theme_loftspace/views/snippets/s_call_to_action.xml

@@ -29,7 +29,7 @@
     </xpath>
     <!-- Add secondary button -->
     <xpath expr="//a[hasclass('btn')]" position="before">
-        <a href="#" class="btn btn-secondary btn-lg mr-2 mb-2">Our services</a>
+        <a href="#" class="btn btn-secondary btn-lg me-2 mb-2">Our services</a>
     </xpath>
 </template>
 

theme_monglia/static/src/old_snippets/s_features_carousel/000_variables.scss

@@ -9,5 +9,5 @@ $s-features-carousel-indicators-visible: visible;
     }
 }
 @mixin s-features-carousel-mask-hook {
-    border: 1px solid gray('200');
+    border: 1px solid map-get($grays, '200');
 }

theme_nano/views/snippets/s_carousel.xml

@@ -14,7 +14,7 @@
     <xpath expr="//*[hasclass('s_hr')][1]" position="replace"/>
     <!-- Slide #03 -->
     <xpath expr="//*[hasclass('carousel-item')][3]" position="replace"/>
-    <xpath expr="//*[@data-slide-to='2']" position="replace"/>
+    <xpath expr="//*[@data-bs-slide-to='2']" position="replace"/>
 </template>
 
 </odoo>

theme_odoo_experts/views/snippets/s_quotes_carousel.xml

@@ -20,7 +20,7 @@
     </xpath>
     <!-- Carousel item #2 - blockquote -->
     <xpath expr="//div[hasclass('carousel-item')][2]//blockquote" position="attributes">
-        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
     </xpath>
     <!-- Carousel item #3 - filter -->
     <xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
@@ -32,7 +32,7 @@
     </xpath>
     <!-- Carousel item #3 - blockquote -->
     <xpath expr="//div[hasclass('carousel-item')][3]//blockquote" position="attributes">
-        <attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
     </xpath>
 </template>
 

theme_orchid/views/snippets/s_quotes_carousel.xml

@@ -32,7 +32,7 @@
     </xpath>
     <!-- Center the blockquote -->
     <xpath expr="(//blockquote)[2]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
     </xpath>
 
     <!-- Quote 3 -->
@@ -46,7 +46,7 @@
     </xpath>
     <!-- Center the blockquote -->
     <xpath expr="(//blockquote)[3]" position="attributes">
-        <attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
+        <attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
     </xpath>
 </template>
 

theme_paptic/views/customizations.xml

@@ -99,7 +99,7 @@
         <p>&#160;</p>
         <h5>Scalable and Modular</h5>
         <p>Whether you start small or are already a large company, our solution adapts to your needs and grows with you.</p>
-        <div class="s_hr text-left pb16 pt8" data-snippet="s_hr" data-name="Separator">
+        <div class="s_hr text-start pb16 pt8" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-style: solid; border-top-color: rgb(233, 236, 239) !important; border-top-width: 3px !important;"/>
         </div>
     </xpath>

theme_real_estate/views/snippets/s_three_columns.xml

@@ -8,7 +8,7 @@
     </xpath>
     <!-- Column #1 -->
     <xpath expr="//h3" position="before">
-        <span class="text-600 font-weight-bold">$295,000</span>
+        <span class="text-600 fw-bold">$295,000</span>
     </xpath>
     <xpath expr="//h3" position="replace" mode="inner">
         House On The Hill
@@ -22,7 +22,7 @@
 
     <!-- Column 2 -->
     <xpath expr="(//h3)[2]" position="before">
-        <span class="text-600 font-weight-bold">$1,295,000,000</span>
+        <span class="text-600 fw-bold">$1,295,000,000</span>
     </xpath>
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Moutain View
@@ -36,7 +36,7 @@
 
     <!-- Column 3 -->
     <xpath expr="(//h3)[3]" position="before">
-        <span class="text-600 font-weight-bold">$455,000</span>
+        <span class="text-600 fw-bold">$455,000</span>
     </xpath>
     <xpath expr="(//h3)[3]" position="replace" mode="inner">
         Paradise Residence

theme_treehouse/static/src/scss/compatibility-saas-11.4.scss

@@ -116,11 +116,11 @@
     // Comparisons
     .s_comparisons {
         .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
-            background-color: theme-color('primary');
+            background-color: map-get($theme-colors, 'primary');
-            border-color: theme-color('primary');
+            border-color: map-get($theme-colors, 'primary');
         }
         .panel-body h2 small {
-            color: gray('900');
+            color: map-get($grays, '900');
         }
     }
 

theme_yes/views/snippets/s_cover.xml

@@ -26,7 +26,7 @@
     </xpath>
     <!-- Scroll Down Button -->
     <xpath expr="//*[hasclass('container')]" position="after">
-        <a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto mb-5 text-white o_not_editable" href="#" contenteditable="false" title="" style="background-color: rgba(25, 41, 37, 0.55) !important;" data-original-title="Scroll down to next section">
+        <a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto mb-5 text-white o_not_editable" href="#" contenteditable="false" title="" style="background-color: rgba(25, 41, 37, 0.55) !important;" data-bs-original-title="Scroll down to next section">
             <i class="fa fa-chevron-down fa-1x"></i>
         </a>
     </xpath>

theme_yes/views/snippets/s_quotes_carousel.xml

@@ -11,7 +11,7 @@
         <div class="o_we_bg_filter" style="background-color: rgba(25, 41, 37, 0.55) !important;"/>
     </xpath>
     <xpath expr="//blockquote[hasclass('s_blockquote')]" position="attributes">
-        <attribute name="class" add="mr-auto" remove="mx-auto" separator=" "/>
+        <attribute name="class" add="me-auto" remove="mx-auto" separator=" "/>
     </xpath>
     <xpath expr="(//i[hasclass('s_blockquote_icon')])" position="attributes">
         <attribute name="style" add="background-color: rgba(255, 0, 0, 0) !important;" separator="; "></attribute>