[18.0][IMP] web_theme_classic Add dark mode and some cleanup

web_theme_classic/README.rst

@@ -80,6 +80,9 @@ Contributors
 ------------
 
 - Sylvain LE GAL (https://www.twitter.com/legalsylvain)
+- `Pyxiris <https://github.com/Pyxiris>`__
+
+  - `Liam Noonan <https://github.com/ljmnoonan>`__
 
 Maintainers
 -----------

web_theme_classic/__manifest__.py

@@ -18,6 +18,13 @@
         "web.assets_backend": [
             "/web_theme_classic/static/src/scss/web_theme_classic.scss",
         ],
+        "web.assets_web_dark": [
+            (
+                "before",
+                "/web_theme_classic/static/src/scss/web_theme_classic.scss",
+                "/web_theme_classic/static/src/scss/web_theme_classic.dark.scss",
+            ),
+        ],
     },
     "installable": True,
     "application": True,

web_theme_classic/readme/CONTRIBUTORS.md

@@ -1 +1,3 @@
 - Sylvain LE GAL (<https://www.twitter.com/legalsylvain>)
+- [Pyxiris](https://github.com/Pyxiris)
+  - [Liam Noonan](https://github.com/ljmnoonan)

web_theme_classic/static/description/index.html

@@ -418,6 +418,10 @@ <h2><a class="toc-backref" href="#toc-entry-3">Authors</a></h2>
 <h2><a class="toc-backref" href="#toc-entry-4">Contributors</a></h2>
 <ul class="simple">
 <li>Sylvain LE GAL (<a class="reference external" href="https://www.twitter.com/legalsylvain">https://www.twitter.com/legalsylvain</a>)</li>
+<li><a class="reference external" href="https://github.com/Pyxiris">Pyxiris</a><ul>
+<li><a class="reference external" href="https://github.com/ljmnoonan">Liam Noonan</a></li>
+</ul>
+</li>
 </ul>
 </div>
 <div class="section" id="maintainers">

web_theme_classic/static/src/scss/web_theme_classic.dark.scss

@@ -0,0 +1,2 @@
+$wtc-input-border-color-focus: rgba($o-action, 0.5) !default;
+$wtc-input-background-color-required: mix($o-action, transparent, 10) !default;

web_theme_classic/static/src/scss/web_theme_classic.scss

@@ -2,105 +2,173 @@
         Variables
 ************************************************************/
 
-$input-border-color: #cccccc;
-$input-border-color-focus: #71639e;
-$input-background-color-required: #d2d2ff;
-$input-color-placeholder-required: #6c757d;
-
-$button-border-color: #dee2e6;
+/* The wtc prefix keeps these from conflicting with bootstrap vars*/
+$wtc-input-border-color: $o-gray-500 !default;
+$wtc-input-border-color-focus: $o-community-color !default;
+$wtc-input-color-required: $o-gray-900 !default;
+// Note, it is very important that this be a mix with transparent! The reason is that the normal $o-input-bg
+// is transparent and so some styles are built assuming this. The most notable examples are monetary fields
+// which are set up like this:
+// <div name="list_price" class="o_field_widget o_required_modifier o_field_monetary oe_inline">
+//      <div class="text-nowrap d-inline-flex w-100 align-items-baseline position-relative">
+//          <span class="o_input position-absolute pe-none d-flex w-100">
+//              <span>$&nbsp;</span>
+//              <span class="opacity-0 d-inline-block overflow-hidden mw-100 o_monetary_ghost_value">0.00</span>
+//          </span>
+//          <span class="opacity-0">$&nbsp;</span>
+//          <input class="o_input flex-grow-1 flex-shrink-1" autocomplete="off" id="list_price_0" type="text">
+//      </div>
+// </div>
+// So a non transparent background on the <input> element blocks off the display. so it is much better to immitate $o-input-invalid-bg
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/scss/primary_variables.scss#L170
+$wtc-input-background-color-required: mix(#0000ff, transparent, 10) !default;
+$wtc-input-color-placeholder-required: #6c757d !default;
 
 /***********************************************************
-        Form View : Handle Fields Borders
+        Handle Borders
 ************************************************************/
 
-.o_form_view {
-    .o_input,
-    .o_field_html > .note-editable {
-        /* Add border for all editable fields */
-        border: 1px solid $input-border-color !important;
-        border-radius: 3px;
-
-        /* add darker border on focus */
-        &:focus {
-            border-color: $input-border-color-focus !important;
-        }
-    }
-
-    .o_field_many2many_selection {
-        .o_input {
-            /* Prevent to have double border for many2many tags input fields */
-            border: 0px solid !important;
-        }
+/* Odoo sets this without consideration for nesting, as occurs with custom properties.
+ * https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L36C1-L39C2
+ * We fix that here. We also use our special toned down version of $o-action for full borders */
+.o_field_widget:focus-within {
+    &:has(.o_field_widget) {
+        @include print-variable(o-input-border-color, $wtc-input-border-color);
+        @include print-variable(o-caret-color, $input-color);
     }
+    @include print-variable(o-input-border-color, $wtc-input-border-color-focus);
+    @include print-variable(o-caret-color, $wtc-input-border-color-focus);
+}
 
-    .o_field_monetary {
-        /* Prevent to have double border for monetary fields */
-        .o_input {
-            border: 0px solid !important;
-        }
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L50C1-L65C2
+.o_input {
+    border: $input-border-width solid var(--o-input-border-color);
+    border-radius: 3px;
+}
 
-        #list_price_0 {
-            border: 1px solid $input-border-color !important;
-            border-radius: 3px;
+// An odd case. The search input when adding a new user to an existing task from kanban
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss#L62C9-L62C55
+.o_m2m_tags_avatar_field_popover .o-autocomplete .o-autocomplete--input.o_input {
+    border-width: $input-border-width;
+    padding-left: $o-input-padding-x;
+}
 
-            &:focus {
-                border-color: $input-border-color-focus !important;
-            }
+// All these selectors are probably not necessary, but just following:
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/properties_field.scss#L12C1-L45C2
+.o_field_properties,
+.o_field_properties.o_field_invalid,
+.o_property_field_popover {
+    .o_input:focus,
+    .dropdown:focus ~ .o_dropdown_button,
+    .dropdown:focus-within ~ .o_dropdown_button,
+    .o_input:focus ~ .o_datepicker_button,
+    .o_dropdown_button:focus {
+        @include print-variable(o-input-border-color, $wtc-input-border-color-focus);
+        * {
+            @include print-variable(
+                o-input-border-color,
+                $wtc-input-border-color-focus
+            );
         }
     }
 }
 
-/***********************************************************
-        Form View : Handle Button Borders
-************************************************************/
+// Give tag type custom properties input borders too. Note the code we are overriding
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_value.scss#L43C1-L46C2
+.o_field_property_many2many_value:not(.readonly),
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_tags.scss#L29C1-L32C2
+.o_field_property_tag:not(.readonly) {
+    border: $input-border-width solid var(--o-input-border-color);
+    border-radius: 3px;
+}
 
 .o_form_view {
-    .btn-light {
-        border-color: $button-border-color;
+    /* Odoo sets borders to transparent unless hovered or focused. We override this.
+     * https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/form/form_controller.scss#L202C1-L204C6 */
+    &:not(.o_field_highlight)
+        .o_field_widget:not(.o_field_invalid):not(.o_field_highlight)
+        .o_input:not(:hover):not(:focus) {
+        --o-input-border-color: #{$wtc-input-border-color};
     }
 
-    .btn-light {
-        &:hover {
-            border-color: $button-border-color;
+    /* Monetary fields need some special help */
+    .o_field_monetary {
+        /* Prevent having double border for monetary fields */
+        span.o_input:has(~ input.o_input) {
+            border: $input-border-width solid transparent !important;
         }
-    }
 
-    .o_input {
-        padding-left: 4px;
-        padding-right: 2px;
+        /* Keep the monetary symbol away from the border when it is outside the border */
+        /* For when the symbol is on the left side */
+        span.o_input + span.opacity-0 {
+            margin-right: 3px;
+        }
+        /* For when the symbol is on the right side */
+        span.o_input ~ span.opacity-0:not(span.o_input + span.opacity-0) {
+            margin-left: 3px;
+        }
     }
 }
 
 /***********************************************************
         Form View : Handle Background for required fields
 ************************************************************/
 
-.o_form_view {
-    .o_required_modifier:not(.o_readonly_modifier) {
-        .o_input {
-            /* Add background for all editable and required fields */
-            background-color: $input-background-color-required !important;
-
-            /* darker placeholder as the background is darker */
-            &::placeholder {
-                color: $input-color-placeholder-required;
-            }
-        }
-    }
-
-    .o_required_modifier.o_field_selection:not(.o_readonly_modifier) {
-        /* Specific case for field selection */
-        background-color: $input-background-color-required !important;
-    }
+// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L31C1-L34C2
+.o_required_modifier {
+    @include print-variable(
+        o-input-background-color,
+        $wtc-input-background-color-required
+    );
 }
 
 /***********************************************************
-        Tree View : Handle style for required fields
+        Tree View : Handle style for input fields
 ************************************************************/
 
-.o_list_renderer
-    .o_data_row.o_selected_row
-    > .o_data_cell.o_required_modifier:not(.o_readonly_modifier) {
-    /* Disable border bottom as the field has now a background */
-    border-bottom: 0px solid;
+// We override all lists, not just in forms
+.o_list_renderer .o_data_row {
+    // Prevent item description from getting $wtc-input-background-color-required when row not in focus
+    &:not(.selected_row) .o_input {
+        background-color: initial;
+    }
+    &.o_selected_row > .o_data_cell {
+        &.o_required_modifier:not(.o_readonly_modifier),
+        &.o_invalid_cell:not(.o_readonly_modifier) {
+            /* Disable border bottom as the field has now a background */
+            border-bottom: 0px;
+        }
+        > .o_field_widget {
+            // We have to manually reintroduce the input invalid styles
+            &.o_field_invalid:not(.o_readonly_modifier):not(.o_invisible_modifier):has(
+                    .o_input
+                ) {
+                --o-input-background-color: #{$o-input-invalid-bg};
+                .o_input {
+                    --o-input-border-color: #{$o-danger};
+                }
+            }
+            &:not(.o_readonly_modifier):not(.o_invisible_modifier) {
+                &.o_required_modifier:not(.o_field_invalid) {
+                    .o_input {
+                        color: $wtc-input-color-required;
+                        --o-input-background-color: #{$wtc-input-background-color-required} !important;
+                        background-color: var(--o-input-background-color) !important;
+                    }
+                }
+                // Handle borders
+                .o_input {
+                    border: $input-border-width solid var(--o-input-border-color) !important;
+                    /* Prevent double borders in nested o_input like tags */
+                    .o_input {
+                        border: 0 !important;
+                    }
+                }
+            }
+            // Handle monetary fields in list
+            &.o_field_monetary span.o_input:has(~ input.o_input) {
+                border: $input-border-width solid transparent !important;
+            }
+        }
+    }
 }