1 files changed, 125 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 1d8ee69551f..fbaa1557fa0 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -517,3 +517,128 @@ blockquote {
     border-left: 5px solid $gray-300;
     font-style: italic
 }
+
+// Bg/text color classes generation
+.o_cc {
+    #{$o-color-extras-nesting-selector} {
+        // Re-force dropdown-item colors inside presets otherwise the presets
+        // 'link' colors take over.
+        .dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
+                                        // .dropdown-menu to counter a:not(.btn)
+            &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                color: $dropdown-link-color;
+
+                @include hover-focus {
+                    color: $dropdown-link-hover-color;
+                }
+            }
+            &.disabled,
+            &:disabled {
+                &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                    color: $dropdown-link-disabled-color;
+                }
+            }
+        }
+    }
+}
+@for $index from 1 through length($o-color-combinations) {
+    $config: nth($o-color-combinations, $index);
+    $-bg: map-get($config, 'bg');
+    $-text: map-get($config, 'text');
+    $-headings: map-get($config, 'headings');
+    $-h2: map-get($config, 'h2');
+    $-h3: map-get($config, 'h3');
+    $-h4: map-get($config, 'h4');
+    $-h5: map-get($config, 'h5');
+    $-h6: map-get($config, 'h6');
+    $-link: map-get($config, 'link');
+    $-btn-primary: map-get($config, 'btn-primary');
+    $-btn-primary-border: map-get($config, 'btn-primary-border');
+    $-btn-secondary: map-get($config, 'btn-secondary');
+    $-btn-secondary-border: map-get($config, 'btn-secondary-border');
+
+    // Those color classes color multiple elements when applied on a snippet.
+    // Those rules are not important so that they can be overridden through
+    // bg and text utility classes. **
+    .o_cc#{$index} {
+        // Background & Text
+        @include o-bg-color(o-color($-bg), o-color($-text), $important: false);
+
+        #{$o-color-extras-nesting-selector} {
+            // Headings
+            h1, h2, h3, h4, h5, h6 {
+                // 'inherit' comes from the o-bg-color mixin
+                color: o-color($-headings);
+            }
+            h2, h3, h4, h5, h6 {
+                color: o-color($-h2);
+            }
+            h3, h4, h5, h6 {
+                color: o-color($-h3);
+            }
+            h4, h5, h6 {
+                color: o-color($-h4);
+            }
+            h5, h6 {
+                color: o-color($-h5);
+            }
+            h6 {
+                color: o-color($-h6);
+            }
+
+            // Links
+            $-link-color: if($-link, o-color($-link), theme-color('primary'));
+            $-link-hover-color: darken($-link-color, 15%);
+            a:not(.btn), .btn-link {
+                color: $-link-color;
+
+                @include hover {
+                    color: $-link-hover-color;
+                }
+            }
+
+            // Buttons
+
+            // Primary
+            $-btn-primary-color: if($-btn-primary, o-color($-btn-primary), theme-color('primary'));
+            $-btn-primary-border-color: if($-btn-primary-border, o-color($-btn-primary-border), $-btn-primary-color);
+            .btn-fill-primary {
+                @include button-variant($-btn-primary-color, $-btn-primary-border-color);
+            }
+            .btn-outline-primary {
+                @include button-outline-variant($-btn-primary-border-color);
+            }
+
+            // Secondary
+            $-btn-secondary-color: if($-btn-secondary, o-color($-btn-secondary), theme-color('secondary'));
+            $-btn-secondary-border-color: if($-btn-secondary-border, o-color($-btn-secondary-border), $-btn-secondary-color);
+            .btn-fill-secondary {
+                @include button-variant($-btn-secondary-color, $-btn-secondary-border-color);
+            }
+            .btn-outline-secondary {
+                @include button-outline-variant($-btn-secondary-border-color);
+            }
+
+            // 'Active' states. Note: this only emulates very common components
+            // used in snippets. This might need to be more complex the day we
+            // can apply color combinations anywhere (page-item, ...).
+            .nav-pills {
+                .nav-link.active,
+                .show > .nav-link {
+                    background-color: $-btn-primary-color;
+                    color: color-yiq($-btn-primary-color);
+                }
+            }
+            .dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
+                                            // .dropdown-menu (see .o_cc).
+                &.active,
+                &:active {
+                    &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                        @include gradient-bg($-btn-primary-color);
+                        color: color-yiq($-btn-primary-color);
+                    }
+                }
+            }
+        }
+    }
+}