[REF] theme_*: dispatch theme_common mixins into specific themes

theme_*: theme_bewise, theme_enark, theme_graphene, theme_treehouse

This commit copies the `theme_common` mixins in the few places where
they are used, to prepare for the future deletion of `theme_common`.

task-3696867

Author: bso-odoo

theme_bewise/static/src/old_snippets/s_big_icons/000.scss

@@ -1,3 +1,17 @@
+// From old theme common.
+@mixin o-theme-chd-big-icons-styles($bg-color: o-color('alpha'), $border-color: o-color('alpha'),
+    $transform: scale(1.1, 1.1), $fa-color: white, $h5-color: white) {
+
+    background-color: $bg-color !important;
+    border-color: $border-color;
+    transform: $transform;
+    .fa {
+        color: $fa-color !important;
+    }
+    h5.o_default_snippet_text {
+        color: $h5-color !important;
+    }
+}
 
 /* Big Icon Circle */
 @include o-theme-chd-big-icons-classes(4px solid o-color('alpha'), o-color('alpha'));

theme_enark/static/src/old_snippets/s_big_icons/000.scss

@@ -1,3 +1,17 @@
+// From old theme common.
+@mixin o-theme-chd-big-icons-styles($bg-color: o-color('alpha'), $border-color: o-color('alpha'),
+    $transform: scale(1.1, 1.1), $fa-color: white, $h5-color: white) {
+
+    background-color: $bg-color !important;
+    border-color: $border-color;
+    transform: $transform;
+    .fa {
+        color: $fa-color !important;
+    }
+    h5.o_default_snippet_text {
+        color: $h5-color !important;
+    }
+}
 
 /* Big Icon Circle */
 @include o-theme-chd-big-icons-classes(0, none);

theme_graphene/static/src/scss/secondary_variables.scss

@@ -1,3 +1,19 @@
+// From old theme common.
+@function o-theme-common-add-color-variations($from, $to, $variations: ('light': 10%, 'dark': -10%)) {
+    $color-variations: ();
+    @each $color-name in ('alpha', 'beta', 'gamma', 'delta', 'epsilon') {
+        $color: map-get($from, $color-name);
+        @if $color != null {
+            @each $variation-name, $amount in $variations {
+                $color-variations: map-merge($color-variations, (
+                    '#{$color-name}-#{$variation-name}': adjust-color($color, $lightness: $amount),
+                ));
+            }
+        }
+    }
+    @return map-merge($color-variations, $to);
+}
+
 // TODO Maybe we should handle light/dark variation in standard in such a way no
 // extra classes are created (border-alpha-light, btn-epsilon-dark, ...)
 $-palettes: $o-theme-color-palettes;

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

@@ -1,3 +1,76 @@
+// From old theme common.
+@mixin fa-size-generator($base-size) {
+    .fa {
+        text-align: center;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .fa,
+    .fa.fa-1x {
+        width: ($base-size + 20px);
+        height: ($base-size + 20px);
+        line-height: ($base-size + 20px);
+    }
+    .fa.fa-2x {
+        width: ($base-size + 40px);
+        height: ($base-size + 40px);
+        line-height: ($base-size + 40px);
+    }
+    .fa.fa-3x {
+        width: ($base-size + 60px);
+        height: ($base-size + 60px);
+        line-height: ($base-size + 60px);
+    }
+    .fa.fa-4x {
+        width: ($base-size + 80px);
+        height: ($base-size + 80px);
+        line-height: ($base-size + 80px);
+    }
+    .fa.fa-5x {
+        width: ($base-size + 100px);
+        height: ($base-size + 100px);
+        line-height: ($base-size + 100px);
+    }
+}
+
+@mixin carousel-control($position, $fa-position, $fa-padding) {
+    opacity: 1;
+    text-shadow: none;
+    color: map-get($grays, '900');
+    font-size: inherit;
+    width: 5%;
+    .fa {
+        top: 50%;
+        background-color: #fff;
+        &:hover {
+            color: map-get($theme-colors, 'primary');
+        }
+        @include media-breakpoint-down(md) {
+            top: auto;
+            bottom: 0;
+        }
+    }
+    @include fa-size-generator(20px);
+    &.left {
+        background-image: none;
+        left: $position;
+        .fa {
+            left: $fa-position;
+            right: auto;
+            padding-right: $fa-padding;
+        }
+    }
+    &.right {
+        background-image: none;
+        right: $position;
+        .fa {
+            right: $fa-position;
+            left: auto;
+            padding-left: $fa-padding;
+        }
+    }
+}
+
 #wrapwrap {
 
     // Carousel