[IMP][CSS] Use CSS variables to style different alert types

CSS variables avoid having to repeat code for each alert type.
Also remove the need to add "tip" to the theme-colors (no need for "tip"
styled buttons, badges etc, especially as tips use the primary color) by
styling `.alert-tip` with customized copy of BS alert mechanism.

In order to be able to modify the icons with a CSS variable,
the `content` attribute has been removed from the `o-inline-icon` mixin.
Code where this mixin is called in other places has been adapted.

extensions/odoo_theme/static/scss/_mixins.scss

@@ -49,8 +49,7 @@
 
 //-- add icon
 
-@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
+@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
-    content: '#{$icon-content}';
     vertical-align: $v-align;
     margin: $margin;
     @include font-size($font-size);

extensions/odoo_theme/static/scss/_variables.scss

@@ -133,6 +133,15 @@ $o-literals-border:                         $o-literals-bg;
 $o-toc-bg:                                  $o-gray-bg;
 $o-toc-border:                              $o-toc-bg;
 
+$o-alert-note-color:                        $primary;
+$o-alert-tip-color:                         $primary;
+$o-alert-example-color:                     $success;
+$o-alert-warning-color:                     $success;
+$o-alert-danger-color:                      $danger;
+$o-alert-exercises-color:                   $dark;
+
+$o-accordion-bg:                            $o-alert-exercises-color!default;
+
 //------------------------------------------------------------------------------
 // Misc
 //------------------------------------------------------------------------------
@@ -168,5 +177,16 @@ $o-icon-margin:                             .2em;
 // Components
 //------------------------------------------------------------------------------
 
-// Accordion
+// Alerts
-$o-accordion-bg:                            $o-gray-bg!default;
+$o-alert-default-icon: $i-info;
+$o-alert-code-border-color: $o-gray-border;
+
+$o-alert-types: (
+    "primary": ("color": $primary, "icon": $i-exercise),
+    "secondary": ("color": $secondary, "icon": $i-arrow-right),
+    "tip": ("color": $primary, "icon": $i-lightbulb),
+    "success": ("color": $success, "icon": $i-knowledge),
+    "warning": ("color": $warning, "icon": $i-warning),
+    "danger": ("color": $danger, "icon": $i-danger),
+    "dark": ("color": $dark, "icon": $i-exercise)
+);

extensions/odoo_theme/static/scss/bootstrap_overridden.scss

@@ -31,18 +31,6 @@ $info:                                      $blue;
 $warning:                                   $orange;
 $danger:                                    $red;
 
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "tip":        $primary,
-  "light":      $light,
-  "dark":       $dark,
-);
-
 // Fonts
 // Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:                    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;

extensions/odoo_theme/static/style.scss

@@ -163,7 +163,8 @@ header {
                     &:before {
                         @include o-position-absolute($top: 50%, $right: 3rem);
                         @include o-transform (translateY(-50%)) ;
-                        @include o-inline-icon($i-close, auto, middle, 1.2rem);
+                        content: $i-close;
+                        @include o-inline-icon(auto, middle, 1.2rem);
                     }
                 }
             }
@@ -295,7 +296,8 @@ header {
 
         > .toctree-l1 {
             &[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
-                @include o-inline-icon($i-doc-apps, 0 5px 0 0);
+                content: $i-doc-apps;
+                @include o-inline-icon(0 5px 0 0);
                 color: $o-violet;
             }
 
@@ -570,7 +572,8 @@ header {
                     align-items: center;
 
                     &:before {
-                        @include o-inline-icon($i-article, 0 $o-icon-margin 0 0);
+                        content: $i-article;
+                        @include o-inline-icon(0 $o-icon-margin 0 0);
                         color: $o-gray-light;
                     }
                 }
@@ -886,13 +889,14 @@ header {
 //------------------------------------------------------------------------------
 // Alerts
 //------------------------------------------------------------------------------
+
         .alert {
             border-width: 0 0 0 $alert-border-width;
             @include font-size($font-size-sm);
 
             code, div[class^="highlight"] {
                 background-color: $white !important;
-                border: 1px solid $o-gray-border;
+                border: 1px solid var(--o-alert-code-border-color,#{$o-gray-border}) ;
                 color: inherit;
             }
 
@@ -911,7 +915,8 @@ header {
                 font-weight: $o-fw-bold;
 
                 &:before {
-                    @include o-inline-icon($i-info, 0 $o-icon-margin 0 0, baseline, $font-size-base, inherit);
+                    content: var(--o-alert-icon, #{$o-alert-default-icon});
+                    @include o-inline-icon(0 $o-icon-margin 0 0, baseline, $font-size-base, inherit);
                     @include media-breakpoint-down(md) {
                         display:none;
                     }
@@ -920,87 +925,70 @@ header {
 
             // Custom Admonitions
             &[class^="admonition"] {
-                @extend .alert-info;
+                --o-alert-icon: '#{$i-info}';
+                --o-alert-code-border-color: tint-color($info, 30%);
+                $background: shift-color($info, $alert-bg-scale);
+                $border: shift-color($info, $alert-border-scale);
+                $color: shift-color($info, $alert-color-scale);
 
-                code, div[class^="highlight"] {
+                @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-                    border-color: tint-color($info, 30%);
+                    $color: mix($info, color-contrast($background), abs($alert-color-scale));
                 }
+
+                @include alert-variant($background, $border, $color);
             }
 
             // Note
             &.alert-primary {
-                > .alert-title:before, > h3:before {
+                --o-alert-code-border-color: #{tint-color($primary, 50%)};
-                    content: '#{$i-note}';
+                --o-alert-icon: '#{$i-note}';
-                }
-
-                code, div[class^="highlight"] {
-                    border-color: tint-color($primary, 30%);
-                }
             }
 
             // See Also
             &.alert-secondary {
-                > .alert-title:before, > h3:before {
+                --o-alert-icon: '#{$i-article}';
-                    content: '#{$i-arrow-right}';
+                --o-alert-code-border-color: #{tint-color($secondary, 30%)};
-                }
-
                 a {
                     color: $secondary;
                 }
-
-                code, div[class^="highlight"] {
-                    border-color: tint-color($secondary, 50%);
-                }
             }
 
             // Tip
             &.alert-tip {
-                background-color: $o-gray-bg;
+                --o-alert-icon: '#{$i-lightbulb}';
-                > .alert-title:before, > h3:before {
+                --o-alert-code-border-color: #{$o-gray-border};
-                    content: '#{$i-lightbulb}';
+                $background: $o-gray-bg;
-                    @include font-size(1.2rem);
+                $border: shift-color($primary, $alert-border-scale);
+                $color: shift-color($primary, $alert-color-scale);
+
+                @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+                    $color: mix($primary, color-contrast($background), abs($alert-color-scale));
                 }
+                @include alert-variant($background, $border, $color);
             }
 
             // Example
             &.alert-success {
-                > .alert-title:before, > h3:before {
+                --o-alert-icon: '#{$i-knowledge}';
-                    content: '#{$i-knowledge}';
+                --o-alert-code-border-color: #{tint-color($success, 50%)};
-                }
-
-                code, div[class^="highlight"] {
-                    border-color: tint-color($success, 50%);
-                }
             }
 
             // Warning & Important
             &.alert-warning {
-                > .alert-title:before, > h3:before {
+                --o-alert-icon: '#{$i-warning}';
-                    content: '#{$i-warning}';
+                --o-alert-code-border-color: #{tint-color($warning, 50%)};
-                }
-                code, div[class^="highlight"] {
-                    border-color: tint-color($warning, 50%);
-                }
             }
 
             // Danger
             &.alert-danger {
-                > .alert-title:before, > h3:before {
+                --o-alert-icon: '#{$i-danger}';
-                    content: '#{$i-danger}';
+                --o-alert-code-border-color: #{tint-color($danger, 50%)};
-                }
-                code, div[class^="highlight"] {
-                    border-color: tint-color($danger, 50%);
-                }
             }
 
             // Exercises
             &.alert-dark {
-                > .alert-title:before, > h3:before {
+                --o-alert-icon: '#{$i-exercise}';
-                    content: '#{$i-exercise}';
+                --o-alert-code-border-color: #{tint-color($dark, 50%)};
-                }
-                code, div[class^="highlight"] {
-                    border-color: tint-color($dark, 50%);
-                }
             }
         }
     }