Bug 1504190 - Make the Calendar themeable with WX-themes. r=MakeMyDay a=philipp
authorRichard Marti <richard.marti@gmail.com>
Mon, 08 Oct 2018 23:21:15 +0200
changeset 34323 306a8f3a372d36bede07c7d438e308be54121c89
parent 34322 7b3232d39834e897c97c00a9cfab2506b3d661cd
child 34324 9378f2d586b07b4adef8802297ffa2bbf4dd3363
push id389
push userclokep@gmail.com
push dateMon, 18 Mar 2019 19:01:53 +0000
reviewersMakeMyDay, philipp
bugs1504190
Bug 1504190 - Make the Calendar themeable with WX-themes. r=MakeMyDay a=philipp
calendar/base/content/calendar-task-view.xul
calendar/base/content/calendar-unifinder-todo.xul
calendar/base/content/calendar-unifinder.xul
calendar/base/jar.mn
calendar/base/themes/common/calendar-management.css
calendar/base/themes/common/calendar-task-tree.css
calendar/base/themes/common/calendar-task-view.css
calendar/base/themes/common/calendar-unifinder.css
calendar/base/themes/common/calendar-views.css
calendar/base/themes/common/icons/locked-selected.svg
calendar/base/themes/common/icons/locked.svg
calendar/base/themes/common/icons/warn-selected.svg
calendar/base/themes/common/icons/warn.svg
calendar/base/themes/common/today-pane.css
calendar/base/themes/common/widgets/calendar-widgets.css
calendar/base/themes/common/widgets/minimonth.css
calendar/base/themes/linux/calendar-task-view.css
calendar/base/themes/linux/calendar-unifinder.css
calendar/base/themes/linux/calendar-views.css
calendar/base/themes/linux/today-pane.css
calendar/base/themes/osx/calendar-task-view.css
calendar/base/themes/osx/calendar-views.css
calendar/base/themes/osx/today-pane.css
calendar/base/themes/windows/calendar-task-tree.css
calendar/base/themes/windows/calendar-task-view.css
calendar/base/themes/windows/calendar-unifinder.css
calendar/base/themes/windows/calendar-views.css
calendar/base/themes/windows/today-pane.css
calendar/lightning/themes/common/lightning.css
calendar/lightning/themes/linux/lightning.css
calendar/lightning/themes/osx/lightning.css
calendar/lightning/themes/windows/lightning.css
mail/base/content/messenger.xul
mail/themes/linux/mail/searchBox.css
mail/themes/osx/mail/searchBox.css
mail/themes/windows/mail/searchBox.css
--- a/calendar/base/content/calendar-task-view.xul
+++ b/calendar/base/content/calendar-task-view.xul
@@ -27,24 +27,24 @@
       <hbox id="task-addition-box" align="center">
         <box align="center" flex="1">
           <toolbarbutton id="calendar-add-task-button"
                          label="&calendar.newtask.button.label;"
                          tooltiptext="&calendar.newtask.button.tooltip;"
                          observes="calendar_new_todo_command"/>
           <textbox id="view-task-edit-field"
                    flex="1"
-                   class="task-edit-field"
+                   class="task-edit-field themeableSearchBox"
                    onfocus="taskEdit.onFocus(event)"
                    onblur="taskEdit.onBlur(event)"
                    onkeypress="taskEdit.onKeyPress(event)"/>
         </box>
         <box align="center" flex="1">
           <textbox id="task-text-filter-field"
-                   class="searchBox"
+                   class="themeableSearchBox"
                    type="search"
                    flex="1"
                    placeholder=""
                    emptytextbase="&calendar.task.text-filter.textbox.emptytext.base1;"
                    keyLabelNonMac="&calendar.task.text-filter.textbox.emptytext.keylabel.nonmac;"
                    keyLabelMac="&calendar.task.text-filter.textbox.emptytext.keylabel.mac;"
                    oncommand="taskViewUpdate();"/>
         </box>
--- a/calendar/base/content/calendar-unifinder-todo.xul
+++ b/calendar/base/content/calendar-unifinder-todo.xul
@@ -33,16 +33,16 @@
                   persist="checked"/>
       </box>
       <vbox id="calendar-task-tree-detail" flex="1">
         <calendar-task-tree id="unifinder-todo-tree" flex="1"
                             visible-columns="completed priority title"
                             persist="visible-columns ordinals widths sort-active sort-direction"
                             context="taskitem-context-menu"/>
         <textbox id="unifinder-task-edit-field"
-                 class="task-edit-field"
+                 class="task-edit-field themeableSearchBox"
                  onfocus="taskEdit.onFocus(event)"
                  onblur="taskEdit.onBlur(event)"
                  onkeypress="taskEdit.onKeyPress(event)"/>
       </vbox>
     </vbox>
   </vbox>
 </overlay>
--- a/calendar/base/content/calendar-unifinder.xul
+++ b/calendar/base/content/calendar-unifinder.xul
@@ -46,17 +46,17 @@
                         label="&calendar.events.filter.currentview.label;"
                         value="currentview"/>
             </menupopup>
           </menulist>
         </box>
         <box align="center" flex="1">
           <label control="unifinder-search-field" value="&calendar.search.options.searchfor;"/>
           <textbox id="unifinder-search-field"
-                   class="searchBox"
+                   class="themeableSearchBox"
                    type="search"
                    oncommand="refreshEventTree();"
                    flex="1"/>
         </box>
         <toolbarbutton id="unifinder-closer"
                        class="unifinder-closebutton close-icon"
                        command="calendar_show_unifinder_command"
                        tooltiptext="&calendar.unifinder.close.tooltip;"/>
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -129,17 +129,16 @@ calendar.jar:
     ../skin/common/icons/edit.svg                     (themes/common/icons/edit.svg)
     ../skin/common/icons/email.svg                    (themes/common/icons/email.svg)
     ../skin/common/icons/event.svg                    (themes/common/icons/event.svg)
     ../skin/common/icons/find.svg                     (themes/common/icons/find.svg)
     ../skin/common/icons/freebusy.svg                 (themes/common/icons/freebusy.svg)
     ../skin/common/icons/icon32.svg                   (themes/common/icons/icon32.svg)
     ../skin/common/icons/imip-bar.svg                 (themes/common/icons/imip-bar.svg)
     ../skin/common/icons/locked.svg                   (themes/common/icons/locked.svg)
-    ../skin/common/icons/locked-selected.svg          (themes/common/icons/locked-selected.svg)
     ../skin/common/icons/newevent.svg                 (themes/common/icons/newevent.svg)
     ../skin/common/icons/newtask.svg                  (themes/common/icons/newtask.svg)
     ../skin/common/icons/pane.svg                     (themes/common/icons/pane.svg)
     ../skin/common/icons/print.svg                    (themes/common/icons/print.svg)
     ../skin/common/icons/priority.svg                 (themes/common/icons/priority.svg)
     ../skin/common/icons/private.svg                  (themes/common/icons/private.svg)
     ../skin/common/icons/save.svg                     (themes/common/icons/save.svg)
     ../skin/common/icons/save-close.svg               (themes/common/icons/save-close.svg)
@@ -147,17 +146,16 @@ calendar.jar:
     ../skin/common/icons/status.svg                   (themes/common/icons/status.svg)
     ../skin/common/icons/synchronize.svg              (themes/common/icons/synchronize.svg)
     ../skin/common/icons/task.svg                     (themes/common/icons/task.svg)
     ../skin/common/icons/task-tab.svg                 (themes/common/icons/task-tab.svg)
     ../skin/common/icons/tentative.svg                (themes/common/icons/tentative.svg)
     ../skin/common/icons/today.svg                    (themes/common/icons/today.svg)
     ../skin/common/icons/timezones.svg                (themes/common/icons/timezones.svg)
     ../skin/common/icons/warn.svg                     (themes/common/icons/warn.svg)
-    ../skin/common/icons/warn-selected.svg            (themes/common/icons/warn-selected.svg)
     ../skin/common/attendee-icons.png                 (themes/common/images/attendee-icons.png)
     ../skin/common/checkbox-images.png                (themes/common/images/checkbox-images.png)
     ../skin/common/event-continue.svg                 (themes/common/images/event-continue.svg)
     ../skin/common/event-end.svg                      (themes/common/images/event-end.svg)
     ../skin/common/event-grippy-bottom.png            (themes/common/images/event-grippy-bottom.png)
     ../skin/common/event-grippy-left.png              (themes/common/images/event-grippy-left.png)
     ../skin/common/event-grippy-right.png             (themes/common/images/event-grippy-right.png)
     ../skin/common/event-grippy-top.png               (themes/common/images/event-grippy-top.png)
--- a/calendar/base/themes/common/calendar-management.css
+++ b/calendar/base/themes/common/calendar-management.css
@@ -13,28 +13,20 @@ calendar-list-tree > tree > treechildren
 calendar-list-tree > tree > treechildren::-moz-tree-cell(calendarname-treecol) {
     margin-inline-start: 1px;
 }
 
 calendar-list-tree > tree > treechildren::-moz-tree-image(status-treecol, readonly) {
     list-style-image: url(chrome://calendar-common/skin/icons/locked.svg);
 }
 
-calendar-list-tree > tree > treechildren::-moz-tree-image(status-treecol, readonly, selected) {
-    list-style-image: url(chrome://calendar-common/skin/icons/locked-selected.svg);
-}
-
 calendar-list-tree > tree > treechildren::-moz-tree-image(status-treecol, readfailed) {
     list-style-image: url(chrome://calendar-common/skin/icons/warn.svg);
 }
 
-calendar-list-tree > tree > treechildren::-moz-tree-image(status-treecol, readfailed, selected) {
-    list-style-image: url(chrome://calendar-common/skin/icons/warn-selected.svg);
-}
-
 calendar-list-tree > tree > treechildren::-moz-tree-cell-text(disabled) {
     color: GrayText;
 }
 
 calendar-list-tree > tree {
     padding: 0;
     margin: 4px 0;
     -moz-appearance: none;
--- a/calendar/base/themes/common/calendar-task-tree.css
+++ b/calendar/base/themes/common/calendar-task-tree.css
@@ -8,85 +8,43 @@
 }
 
 /* align the treechildren text */
 .calendar-task-tree > treechildren::-moz-tree-cell-text {
     margin-top: 1px;
     margin-bottom: 1px;
 }
 
-.calendar-task-tree > treechildren::-moz-tree-row(selected, focus) {
-    background-color: Highlight;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(selected, focus) {
-    color: HighlightText;
-}
-
 .calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress) {
-    color: green;
+    color: green !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) {
-    background-color: green;
+    background-color: green !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress, selected, focus) {
-    color: HighlightText;
+    color: HighlightText !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-cell-text(overdue) {
-    color: red;
+    color: red !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) {
-    background-color: red;
+    background-color: red !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-cell-text(overdue, selected, focus) {
-    color: HighlightText;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday) {
-    color: WindowText;
-    font-weight: bold;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-row(duetoday, selected, focus) {
-    background-color: Highlight;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday, selected, focus) {
-    color: HighlightText;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(future) {
-    color: WindowText;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-row(future, selected, focus) {
-    background-color: Highlight;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(future, selected, focus) {
-    color: HighlightText;
+    color: HighlightText !important;
 }
 
 .calendar-task-tree > treechildren::-moz-tree-cell-text(completed) {
     text-decoration: line-through;
     font-style: italic;
-    color: WindowText;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-row(completed, selected, focus) {
-    background-color: Highlight;
-}
-
-.calendar-task-tree > treechildren::-moz-tree-cell-text(completed, selected, focus) {
-    color: HighlightText;
 }
 
 .calendar-task-tree-col-priority {
     list-style-image: url(chrome://calendar-common/skin/task-images.png);
     -moz-image-region: rect(0 13px 13px 0);
 }
 
 .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, normalpriority),
--- a/calendar/base/themes/common/calendar-task-view.css
+++ b/calendar/base/themes/common/calendar-task-view.css
@@ -21,64 +21,95 @@
 #calendar-task-details {
     min-height: 6ex;
 }
 
 #task-addition-box {
     border-bottom: 1px solid ThreeDShadow;
 }
 
+:root[lwt-tree] #task-addition-box {
+    background-color: var(--toolbar-bgcolor);
+    background-image: linear-gradient(var(--sidebar-border-color) 1px, transparent 1px);
+    color: var(--toolbar-color);
+    border-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree] #calendar-task-details-container {
+    background-color: var(--toolbar-bgcolor);
+    background-image: none;
+    color: var(--toolbar-color);
+    border-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #task-addition-box,
+:root[lwt-tree-brighttext] #calendar-task-details-container {
+    border-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
 #calendar-task-details-description {
     -moz-appearance: textfield;
     border: 1px solid;
     margin: 0;
     font-family: serif;
     font-size: 16px;
 }
 
 .task-details-name {
     text-align: right;
-    background-color: transparent;
-    border: none;
+    color: windowtext;
+    opacity: 0.5; /* lower contrast */
 }
 
 .item-date-row > .selectable-label {
     margin-top: 1px !important;
     margin-bottom: 2px !important;
     margin-inline-start: 6px !important;
     margin-inline-end: 5px !important;
 }
 
 #calendar-task-details-grid > rows > .item-date-row > .headline {
     font-weight: normal;
+    color: windowtext;
+    opacity: 0.5; /* lower contrast */
 }
 
 #calendar-task-details-attachment-row {
     margin-top: 3px;
 }
 
 #calendar-task-details-attachment-rows {
     max-height: 60px;
 }
 
 .task-details-value {
     text-align: left;
-    background-color: transparent;
-    border: none;
+    color: WindowText;
+}
+
+:root[lwt-tree] .task-details-name,
+:root[lwt-tree] .task-details-value,
+:root[lwt-tree] .item-date-row > .selectable-label,
+:root[lwt-tree] #calendar-task-details-grid > rows > .item-date-row > .headline {
+    color: inherit;
 }
 
 #calendar-task-tree {
     min-height: 98px;
 }
 
 #calendar-task-tree-detail {
     border-top: 1px solid ThreeDShadow;
     margin: 3px 0;
 }
 
+:root[lwt-tree] #calendar-task-tree-detail {
+    border-top-color: var(--sidebar-border-color);
+}
+
 #view-task-edit-field {
     margin: 5px;
 }
 
 .task-edit-field[readonly="true"] {
     color: GrayText;
 }
 
@@ -131,16 +162,48 @@ window[toolboxId="task-actions-toolbox"]
     margin-inline-start: 5px;
     list-style-image: url(chrome://calendar-common/skin/icons/newtask.svg);
     -moz-image-region: rect(0 16px 16px 0);
     -moz-context-properties: fill, fill-opacity;
     fill: currentColor;
     fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
+:root[lwt-tree] #calendar-add-task-button {
+    -moz-appearance: none;
+    -moz-user-focus: normal;
+    border: 1px solid transparent;
+    border-radius: var(--toolbarbutton-border-radius);
+}
+
+:root[lwt-tree] #calendar-add-task-button:not([disabled="true"]):hover {
+    background: var(--toolbarbutton-hover-background);
+    border-color: var(--toolbarbutton-hover-bordercolor);
+    box-shadow: var(--toolbarbutton-hover-boxshadow);
+    color: inherit;
+}
+
+:root[lwt-tree-brighttext] #calendar-add-task-button:not([disabled="true"]):hover {
+    background: rgba(255, 255, 255, .25);
+    border-color: rgba(255, 255, 255, .5);
+}
+
+:root[lwt-tree] #calendar-add-task-button:not([disabled="true"]):hover:active {
+    background: var(--toolbarbutton-active-background);
+    border-color: var(--toolbarbutton-active-bordercolor);
+    box-shadow: var(--toolbarbutton-active-boxshadow);
+    transition-duration: 10ms;
+}
+
+:root[lwt-tree-brighttext] #calendar-add-task-button:not([disabled="true"]):hover:active {
+    background: rgba(255, 255, 255, .4);
+    border-color: rgba(255, 255, 255, .7);
+    box-shadow: rgba(255, 255, 255, .4) inset;
+}
+
 #calendar-add-task-button > .toolbarbutton-text {
     padding-inline-start: 5px;
 }
 
 #task-actions-category {
     list-style-image: url(chrome://calendar-common/skin/icons/category.svg);
 }
 
--- a/calendar/base/themes/common/calendar-unifinder.css
+++ b/calendar/base/themes/common/calendar-unifinder.css
@@ -14,8 +14,19 @@
 }
 
 /* workaround to avoid Window Flick */
 #unifinder-search-results-tree {
     -moz-appearance: none;
     min-height: 92px;
     margin: 0;
 }
+
+:root[lwt-tree] #unifinder-searchBox {
+    background-color: var(--toolbar-bgcolor);
+    background-image: linear-gradient(var(--sidebar-border-color) 1px, transparent 1px);
+    color: var(--toolbar-color);
+    border-bottom-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #unifinder-searchBox {
+    border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -74,16 +74,26 @@ window[systemcolors] {
     --viewTimeBoxColor: GrayText;
     --viewDayLabelSelectedColor: HighlightText;
     --viewDayLabelSelectedBackground: Highlight;
     --viewDragboxColor: GrayText;
     --viewDragboxBackground: Highlight;
     --viewDropshadowBackground: Highlight !important;
 }
 
+:root[lwt-tree] #calendar-nav-control {
+    background-color: var(--lwt-accent-color);
+    background-image: var(--lwt-header-image);
+    color: var(--lwt-text-color);
+
+    --calview-tabline-color: var(--tab-line-color, --calview-tabline-color);
+    --calview-border-color: var(--sidebar-border-color);
+    --calview-border-bottom-color: var(--sidebar-border-color);
+}
+
 /* Core */
 calendar-category-box:not([categories]) {
     display: none;
 }
 
 calendar-category-box[categories] + hbox,
 .multiday-view-main-box .calendar-event-box-container[categories] > .calendar-event-details {
     margin-inline-end: 8px;
@@ -901,43 +911,58 @@ radio[calview] {
     min-width: unset;
     border-left: 1px solid var(--calview-border-color);
     border-right: 1px solid var(--calview-border-color);
     border-bottom: 1px solid var(--calview-border-bottom-color);
     margin: 0;
     padding: 3px 6px;
     -moz-user-focus: normal;
     background-color: transparent;
+    color: inherit;
     font-size: 14px;
 }
 
 radio[calview]:not(:first-child) {
     margin-inline-start: -1px;
 }
 
 
 radio[calview][selected="true"] {
     background-image: linear-gradient(to bottom,
                       var(--calview-tabline-color) 2px, transparent 2px);
     border-bottom-width: 0;
     padding-bottom: 4px;
+    color: ButtonText;
 }
 
 radio[calview]:not([selected=true]):hover {
     background-color: rgba(0,0,0,.1);
 }
 
+:root[lwt-tree-brighttext] radio[calview]:not([selected=true]):hover {
+    background-color: rgba(249,249,250,.3);
+}
+
+:root[lwt-tree] #view-tabs > radio[calview][selected="true"] {
+    background-color: var(--toolbar-bgcolor);
+    color: var(--toolbar-color);
+}
+
+:root[lwt-tree] .navigation-bottombox {
+    background-color: var(--toolbar-bgcolor) !important;
+}
+
 radio[calview] > .tab-middle {
     text-align: center;
 }
 
 .view-header {
     font-weight: normal;
     font-size: 14px;
-    color: ButtonText;
+    color: inherit;
 }
 
 .view-header[type="end"] {
     text-align: right;
     margin-inline-end: 6px;
 }
 
 .navigation-inner-box {
@@ -957,20 +982,52 @@ radio[calview] > .tab-middle {
     min-width: 22px;
 }
 
 .today-navigation-button {
     -moz-user-focus: normal;
     -moz-appearance: toolbarbutton;
     margin-inline-start: 2px;
     margin-inline-end: 2px;
-    color: ButtonText;
+    color: inherit;
     font-size: 14px;
 }
 
+:root[lwt-tree] .today-navigation-button {
+  -moz-appearance: none;
+  -moz-user-focus: normal;
+  border: 1px solid transparent;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  color: inherit;
+}
+
+:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover {
+  background: rgba(255, 255, 255, .25);
+  border-color: rgba(255, 255, 255, .5);
+}
+
+:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover:active {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover:active {
+  background: rgba(255, 255, 255, .4);
+  border-color: rgba(255, 255, 255, .7);
+  box-shadow: rgba(255, 255, 255, .4) inset;
+}
+
 .view-navigation-button > .toolbarbutton-text {
     display: none;
 }
 
 .today-navigation-button > .toolbarbutton-icon {
     display: none;
 }
 
deleted file mode 100644
--- a/calendar/base/themes/common/icons/locked-selected.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="-moz-CellHighlightText" d="M8 1C5.793 1 4 2.792 4 5v2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V5c0-2.205-1.79-4-4-4zm0 2c1.102 0 2 .899 2 2v2H6V5c0-1.103.897-2 2-2zm0 6.062c.5 0 1 .311 1 .938v3c0 1.25-2 1.25-2 0v-3c0-.624.5-.937 1-.938z"/>
-</svg>
--- a/calendar/base/themes/common/icons/locked.svg
+++ b/calendar/base/themes/common/icons/locked.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="-moz-FieldText" d="M8 1C5.793 1 4 2.792 4 5v2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V5c0-2.205-1.79-4-4-4zm0 2c1.102 0 2 .899 2 2v2H6V5c0-1.103.897-2 2-2zm0 6.062c.5 0 1 .311 1 .938v3c0 1.25-2 1.25-2 0v-3c0-.624.5-.937 1-.938z"/>
+  <path fill="context-fill" d="M8 1C5.793 1 4 2.792 4 5v2H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V5c0-2.205-1.79-4-4-4zm0 2c1.102 0 2 .899 2 2v2H6V5c0-1.103.897-2 2-2zm0 6.062c.5 0 1 .311 1 .938v3c0 1.25-2 1.25-2 0v-3c0-.624.5-.937 1-.938z"/>
 </svg>
deleted file mode 100644
--- a/calendar/base/themes/common/icons/warn-selected.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="-moz-CellHighlightText" d="M13.74 11.11L9.79 3.2a2 2 0 0 0-3.58 0l-3.95 7.91A2 2 0 0 0 4.05 14h7.9a2 2 0 0 0 1.79-2.89zM7 5c0-1.33 2-1.33 2 0v4c0 1.33-2 1.33-2 0zm1 8.25a1.25 1.25 0 1 1 0 0z"/>
-</svg>
--- a/calendar/base/themes/common/icons/warn.svg
+++ b/calendar/base/themes/common/icons/warn.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="-moz-FieldText" d="M13.74 11.11L9.79 3.2a2 2 0 0 0-3.58 0l-3.95 7.91A2 2 0 0 0 4.05 14h7.9a2 2 0 0 0 1.79-2.89zM7 5c0-1.33 2-1.33 2 0v4c0 1.33-2 1.33-2 0zm1 8.25a1.25 1.25 0 1 1 0 0z"/>
+  <path fill="context-fill" d="M14.74 12.11L9.79 2.2a2 2 0 0 0-3.58 0l-4.95 9.91A2 2 0 0 0 3.05 15h9.9a2 2 0 0 0 1.79-2.89zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"/>
 </svg>
--- a/calendar/base/themes/common/today-pane.css
+++ b/calendar/base/themes/common/today-pane.css
@@ -1,12 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:root[lwt-tree-brighttext] #today-pane-panel {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+}
+
 .today-subpane {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   margin-bottom: 3px;
   padding: 0;
 }
 
 #buttonspacer {
@@ -32,37 +40,73 @@
   border-bottom: 1px solid var(--chrome-content-separator-color, ThreeDShadow);
 }
 
 #today-pane-panel:-moz-lwtheme > sidebarheader {
   color: inherit;
 }
 
 .today-pane-cycler {
+  -moz-appearance: none;
+  border-radius: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
   -moz-context-properties: fill;
   fill: currentColor;
   list-style-image: url("chrome://calendar-common/skin/view-cycler.svg");
 }
 
+.today-pane-cycler:hover {
+  background-color: hsla(0,0%,0%,.1);
+  color: inherit;
+}
+
+.today-pane-cycler:hover:active {
+  background-color: hsla(0,0%,0%,.2);
+}
+
+.today-pane-cycler:-moz-lwtheme-brighttext:hover {
+  background-color: hsla(0,0%,100%,.2);
+}
+
+.today-pane-cycler:-moz-lwtheme-brighttext:hover:active {
+  background-color: hsla(0,0%,100%,.3);
+}
+
 .today-pane-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon,
 .today-pane-cycler[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #agenda-panel:-moz-lwtheme > vbox,
 #today-pane-splitter:-moz-lwtheme,
 #todo-tab-panel:-moz-lwtheme {
   background-color: -moz-Dialog;
 }
 
 #today-pane-panel:-moz-lwtheme > vbox {
   text-shadow: none;
   background-color: -moz-Dialog;
 }
 
+:root[lwt-tree] #today-pane-panel > vbox {
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #agenda-panel > vbox,
+:root[lwt-tree] #today-pane-splitter,
+:root[lwt-tree] #todo-tab-panel {
+  background-color: var(--lwt-accent-color);
+}
+
+:root[lwt-tree] .today-subpane {
+  border-bottom-color: var(--sidebar-border-color);
+}
+
 #today-minimonth-box {
   background-color: -moz-field;
 }
 
 #weekdayNameContainer {
   font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica;
   padding-top: 4px;
   font-weight: bold;
@@ -86,69 +130,139 @@
 #dragCenter-image {
   list-style-image: url("chrome://calendar-common/skin/widgets/drag-center.svg");
 }
 
 .miniday-nav-buttons {
   margin-top: 2px;
   min-width: 19px;
   -moz-user-focus: normal;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url("chrome://calendar-common/skin/widgets/nav-arrow.svg");
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.miniday-nav-buttons,
+#miniday-dropdown-button {
+  -moz-appearance: none;
+  -moz-user-focus: normal;
+  border: 1px solid transparent;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+.miniday-nav-buttons:not([disabled="true"]):hover,
+#miniday-dropdown-button:not([disabled="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  color: inherit;
+}
+
+.miniday-nav-buttons:not([disabled="true"]):hover:active,
+#miniday-dropdown-button:not([disabled="true"]):hover:active {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+#previous-day-button:-moz-locale-dir(ltr),
+#next-day-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
 }
 
 #today-button {
   list-style-image: url("chrome://calendar-common/skin/widgets/nav-today.svg");
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .miniday-nav-buttons[disabled] {
   opacity: .3;
 }
 
 .miniday-nav-buttons > .toolbarbutton-icon {
   margin: 1px;
 }
 
 #miniday-dropdown-button {
+  max-width: 18px;
   margin: 2px;
   -moz-user-focus: normal;
 }
 
 #miniday-dropdown-button > .toolbarbutton-icon,
 #miniday-dropdown-button > .toolbarbutton-text,
-  .miniday-nav-buttons > .toolbarbutton-text  {
+.miniday-nav-buttons > .toolbarbutton-text {
   display: none;
 }
 
 #miniday-dropdown-button > .toolbarbutton-menu-dropmarker {
-    padding-inline-start: 0;
+  padding-inline-start: 0;
+  list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#miniday-dropdown-button > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
+  width: 9px;
+  height: 7px;
 }
 
 #agenda-toolbar {
   border: none;
   padding: 1px;
 }
 
 #todaypane-new-event-button {
   -moz-user-focus: normal;
   list-style-image: url(chrome://calendar-common/skin/icons/newevent.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+:root[lwt-tree] #todaypane-new-event-button {
+  -moz-appearance: none;
+  -moz-user-focus: normal;
+  border: 1px solid transparent;
+  border-radius: var(--toolbarbutton-border-radius);
+  margin: 2px 3px 1px;
+}
+
+:root[lwt-tree] #todaypane-new-event-button:not([disabled="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  color: inherit;
+}
+
+:root[lwt-tree] #todaypane-new-event-button:not([disabled="true"]):hover:active {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
 }
 
 #todaypane-new-event-button > .toolbarbutton-text {
  padding-inline-start: 5px;
 }
 
 #agenda-listbox {
   -moz-appearance: none;
   -moz-user-focus: normal;
   margin: 3px 0 0;
   border-top: 1px solid ThreeDShadow;
 }
 
+:root[lwt-tree] #agenda-listbox {
+  border-top-color: var(--sidebar-border-color);
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
 agenda-checkbox-richlist-item {
   -moz-binding: url("chrome://calendar/content/agenda-listbox.xml#agenda-checkbox-richlist-item");
   -moz-user-focus: normal;
 }
 
 agenda-richlist-item {
   -moz-binding: url("chrome://calendar/content/agenda-listbox.xml#agenda-richlist-item");
   -moz-user-focus: normal;
@@ -175,50 +289,46 @@ agenda-allday-richlist-item {
   margin-inline-start: 4px;
   margin-inline-end: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .agenda-container-box[selected="true"],
 .agenda-allday-container-box[selected="true"],
-.agenda-checkbox[selected="true"],
 .agenda-container-box[selected="true"][current="true"],
-.agenda-allday-container-box[selected="true"][current="true"],
-.agenda-checkbox[selected="true"][current="true"] {
+.agenda-allday-container-box[selected="true"][current="true"] {
   background-color: #FDF5A0;
   color: #000000;
 }
 
 .agenda-container-box[current="true"],
 .agenda-alldaycontainer-box[current="true"],
-.agenda-checkbox[current="true"],
 .agenda-container-box[selected="true"][current="true"][disabled="true"],
-.agenda-allday-container-box[selected="true"][current="true"][disabled="true"],
-.agenda-checkbox[selected="true"][current="true"][disabled="true"] {
+.agenda-allday-container-box[selected="true"][current="true"][disabled="true"] {
   background-color: #DFEAF4;
+  color: #000000;
 }
 
 .agenda-container-box[selected="true"][disabled="true"],
-.agenda-allday-container-box[selected="true"][disabled="true"],
-.agenda-checkbox[selected="true"][disabled="true"] {
+.agenda-allday-container-box[selected="true"][disabled="true"] {
   color: -moz-dialogText;
   background-color: -moz-dialog;
 }
 
 .agenda-allday-container-box .item-classification-box {
   display: none;
 }
 
 .agenda-event-title {
-  margin-top: 0px;
+  margin-top: 0;
 }
 
 .agenda-event-start {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .agenda-new-date {
   width: 15px;
   height: 15px;
   border: 1px solid grey;
   cursor: pointer;
 }
--- a/calendar/base/themes/common/widgets/calendar-widgets.css
+++ b/calendar/base/themes/common/widgets/calendar-widgets.css
@@ -48,16 +48,48 @@ checkbox.treenode-checkbox > .checkbox-l
 
 .view-navigation-button {
   -moz-context-properties: fill;
   fill: currentColor;
   list-style-image: url(chrome://calendar-common/skin/view-cycler.svg);
   -moz-user-focus: normal;
 }
 
+:root[lwt-tree] .view-navigation-button {
+  -moz-appearance: none;
+  -moz-user-focus: normal;
+  border: 1px solid transparent;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+:root[lwt-tree] .view-navigation-button:not([disabled="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  color: inherit;
+}
+
+:root[lwt-tree-brighttext] .view-navigation-button:not([disabled="true"]):hover {
+  background: rgba(255, 255, 255, .25);
+  border-color: rgba(255, 255, 255, .5);
+}
+
+:root[lwt-tree] .view-navigation-button:not([disabled="true"]):hover:active {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+:root[lwt-tree-brighttext] .view-navigation-button:not([disabled="true"]):hover:active {
+  background: rgba(255, 255, 255, .4);
+  border-color: rgba(255, 255, 255, .7);
+  box-shadow: rgba(255, 255, 255, .4) inset;
+}
+
 .view-navigation-button[disabled="true"] {
   opacity: .3;
 }
 
 .view-navigation-button:-moz-locale-dir(ltr)[type="prev"] > .toolbarbutton-icon,
 .view-navigation-button:-moz-locale-dir(rtl)[type="next"] > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
--- a/calendar/base/themes/common/widgets/minimonth.css
+++ b/calendar/base/themes/common/widgets/minimonth.css
@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 minimonth {
+  --mmMainColor: WindowText;
   --mmMainBackground: #fff;
   --mmHighlightColor: HighlightText;
   --mmHighlightBackground: Highlight;
   --mmHighlightBorderColor: Highlight;
   --mmBoxBackground: #f5f5f6;
   --mmBoxBorderColor: #c0c0c0;
   --mmDayColor: #2e4e73;
   --mmDayBorderColor: #fff;
@@ -38,17 +39,18 @@ minimonth {
   --mmDaySelectedBackground: Highlight;
   --mmDaySelectedBorderColor: ButtonFace;
   --mmDaySelectedTodayBackground: Highlight;
   --mmDaySelectedTodayBorderColor: ButtonFace;
 }
 
 minimonth {
   background-color: var(--mmMainBackground);
-  border: 0px;
+  border-width: 0;
+  color: var(--mmMainColor);
   padding: 4px;
 }
 
 .minimonth-month-box {
   background-color: var(--mmBoxBackground);
   border: 1px dotted var(--mmBoxBorderColor);
 }
 
--- a/calendar/base/themes/linux/calendar-task-view.css
+++ b/calendar/base/themes/linux/calendar-task-view.css
@@ -1,14 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url(chrome://calendar-common/skin/calendar-task-view.css);
 
+:root[lwt-tree-brighttext] #calendar-task-details-container {
+    --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+    --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+    --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+    --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+    --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+    --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+    --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+}
+
 #calendar-task-view-splitter {
      -moz-appearance: none;
     border-bottom: 1px solid ThreeDShadow;
     /* splitter grip area */
     height: 5px;
     /* make only the splitter border visible */
     margin-top: -5px;
     /* because of the negative margin needed to make the splitter visible */
@@ -23,30 +33,16 @@
 #calendar-task-details-container {
     padding-top: 1px;
 }
 
 #other-actions-box {
     margin-inline-end: -1px;
 }
 
-.task-details-name {
-    color: windowtext;
-    opacity: 0.5; /* lower contrast */
-}
-
-#calendar-task-details-grid > rows > .item-date-row > .headline {
-    color: windowtext;
-    opacity: 0.5; /* lower contrast */
-}
-
-.task-details-value {
-    color: WindowText;
-}
-
 #task-text-filter-field {
     margin: 5px;
 }
 
 /* ::::: task actions toolbar ::::: */
 
 #task-actions-toolbox {
     -moz-appearance: none;
--- a/calendar/base/themes/linux/calendar-unifinder.css
+++ b/calendar/base/themes/linux/calendar-unifinder.css
@@ -1,14 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url(chrome://calendar-common/skin/calendar-unifinder.css);
 
+:root[lwt-tree-brighttext] #unifinder-searchBox {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+  --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+}
+
 /* restyle splitter-border to match Thunderbird's layout */
 #calendar-view-splitter {
    -moz-appearance: none;
    border-bottom: 1px solid ThreeDShadow;
    /* splitter grip area */
    height: 5px;
    /* make only the splitter border visible */
    margin-top: -5px;
--- a/calendar/base/themes/linux/calendar-views.css
+++ b/calendar/base/themes/linux/calendar-views.css
@@ -17,17 +17,16 @@
     border-width: 0 0 1px 1px;
 }
 
 .navigation-inner-box {
     padding-top: 1px;
 }
 
 radio[calview] {
-    color: ButtonText;
     margin-bottom: 0;
 }
 
 radio[calview][selected="true"] {
     background-color: -moz-Field;
 }
 
 radio[calview] > .tab-middle {
--- a/calendar/base/themes/linux/today-pane.css
+++ b/calendar/base/themes/linux/today-pane.css
@@ -15,45 +15,31 @@
   position: relative;
   z-index: 10;
 }
 
 #today-pane-panel > sidebarheader {
   height: 33px;
 }
 
-.today-pane-cycler {
-  padding-inline-end: 0 !important;
-}
-
 .today-subpane {
   border-bottom-color: ThreeDShadow;
 }
 
 #mini-day-image {
   background-image: linear-gradient(transparent, rgba(0, 0, 0, .1));
 }
 
 .miniday-nav-buttons {
   max-width: 19px;
 }
 
-#next-day-button > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-next;
-}
-
-#previous-day-button > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-previous;
-}
-
 #today-button {
-  -moz-context-properties: fill;
-  fill: currentColor;
   max-width: none;
 }
 
-#miniday-dropdown-button {
-  max-width: 18px;
+#miniday-dropdown-button > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none;
 }
 
 #todaypane-new-event-button[disabled="true"] > .toolbarbutton-icon {
   opacity: 0.4;
 }
--- a/calendar/base/themes/osx/calendar-task-view.css
+++ b/calendar/base/themes/osx/calendar-task-view.css
@@ -14,31 +14,22 @@
     margin-inline-end: 3px;
 }
 
 #task-addition-box {
     background: linear-gradient(#eaeaea, #d1d1d1);
     border-bottom-color: #bebebe
 }
 
-.task-details-name {
-    color: #888a85; /* lower contrast */
-}
-
-#calendar-task-details-grid > rows > .item-date-row > .headline {
-    color: #888a85; /* lower contrast */
-}
-
-.task-details-value {
-    color: black;
-}
-
-#view-task-edit-field {
+/* Hide the search glass */
+.task-edit-field {
     margin-top: 0;
     margin-bottom: 0;
+    background-image: none;
+    padding-inline-start: 4px !important;
 }
 
 @media (-moz-mac-yosemite-theme) {
     #task-addition-box:-moz-window-inactive {
         border-bottom-color: hsl(0, 0%, 85%);
         background: -moz-mac-chrome-inactive;
     }
 
--- a/calendar/base/themes/osx/calendar-views.css
+++ b/calendar/base/themes/osx/calendar-views.css
@@ -68,23 +68,21 @@ agenda-richlist-item[status="CANCELLED"]
     -moz-box-align: stretch;
     padding-left: 0;
     padding-right: 0;
     margin-bottom: 0;
     position: static;
 }
 
 radio[calview] {
-    color: #2e4e73;
     padding-top: 4px;
 }
 
 radio[calview][selected="true"] {
     background-color: #fff;
-    color: inherit;
 }
 
 radio[calview] > .tab-middle {
     padding: 0;
 }
 
 .view-header {
     margin-top: 3px;
--- a/calendar/base/themes/osx/today-pane.css
+++ b/calendar/base/themes/osx/today-pane.css
@@ -7,71 +7,45 @@
 #today-pane-panel > sidebarheader {
   height: 32px;
 }
 
 #today-pane-panel:-moz-lwtheme > sidebarheader {
   text-shadow: none;
 }
 
-.today-pane-cycler {
-  border-radius: 2px;
-  margin: 1px;
-}
-
-.today-pane-cycler:hover {
-  background-color: hsla(0,0%,0%,0.1);
-}
-
-.today-pane-cycler:-moz-lwtheme:hover {
-  background-color: hsla(0,0%,100%,0.2);
-}
-
-.miniday-nav-buttons {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-arrow.svg");
-}
-
-#previous-day-button:-moz-locale-dir(ltr),
-#next-day-button:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
 .today-closebutton > .toolbarbutton-text {
    display: none;
 }
 
 .today-subpane {
   border-bottom-color: #b8b8b8;
 }
 
 .monthlabel {
   margin-bottom: 1px;
 }
 
 #mini-day-image {
   background: linear-gradient(hsl(0, 0%, 93%), hsl(0, 0%, 83%));
 }
 
-#agenda-toolbar {
-  background-color: -moz-dialog;
-  color: -moz-dialogtext;
-}
-
 @media (-moz-mac-yosemite-theme) {
   #today-pane-panel:not(:-moz-lwtheme):-moz-window-inactive {
     background-color: hsl(0, 0%, 97%);
   }
 
   #mini-day-image:-moz-window-inactive {
     background: linear-gradient(hsl(0, 0%, 97%), hsl(0, 0%, 95%));
   }
+}
 
-  #agenda-toolbar:-moz-window-inactive {
-    background-color: hsl(0, 0%, 97%);
-  }
+:root[lwt-tree] #mini-day-image,
+:root[lwt-tree] #mini-day-image:-moz-window-inactive {
+  background: none;
 }
 
 #todaypane-new-event-button[disabled="true"] > .toolbarbutton-icon {
   opacity: .5;
 }
 
 #todaypane-new-event-button > .toolbarbutton-text {
   margin-inline-start: 0;
@@ -80,8 +54,12 @@
 #agenda-listbox {
   border-top-color: #b8b8b8;
 }
 
 #today-pane-splitter {
   min-height: 9px;
   border-top: 1px solid #b8b8b8;
 }
+
+#miniday-dropdown-button > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none;
+}
--- a/calendar/base/themes/windows/calendar-task-tree.css
+++ b/calendar/base/themes/windows/calendar-task-tree.css
@@ -22,37 +22,30 @@
 }
 
 .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed, repeating) {
     -moz-image-region: rect(0 39px 13px 26px);
 }
 
 /* Use on Win7 and up default theme a dark text color when selected focus */
 @media (-moz-windows-default-theme) {
-    .calendar-task-tree > treechildren::-moz-tree-cell-text(selected, focus),
-    .calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday, selected, focus),
-    .calendar-task-tree > treechildren::-moz-tree-cell-text(future, selected, focus),
-    .calendar-task-tree > treechildren::-moz-tree-cell-text(completed, selected, focus) {
-        color: -moz-FieldText;
-    }
-
     .calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) {
-        border-color: green;
+        border-color: green !important;
     }
 
     .calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress, selected, focus) {
-        color: white;
+        color: white !important;
     }
 
     .calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) {
-        border-color: red;
+        border-color: red !important;
     }
 
     .calendar-task-tree > treechildren::-moz-tree-cell-text(overdue, selected, focus) {
-        color: white;
+        color: white !important;
     }
 
     @media (-moz-os-version: windows-win7) {
         .calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) {
             background: linear-gradient(rgba(0, 128, 0, .28), rgba(0, 128, 0, .5));
         }
 
         .calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) {
--- a/calendar/base/themes/windows/calendar-task-view.css
+++ b/calendar/base/themes/windows/calendar-task-view.css
@@ -1,14 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url(chrome://calendar-common/skin/calendar-task-view.css);
 
+:root[lwt-tree-brighttext] #calendar-task-details-container {
+    --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+    --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+    --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+    --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+    --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+    --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+    --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+}
+
 #calendar-task-view-splitter {
     border: none;
     min-height: 5px;
 }
 
 #calendar-task-details-container {
     border-top: 1px solid ThreeDShadow;
     border-left: 1px solid ThreeDShadow;
@@ -16,30 +26,16 @@
     border-bottom: 0;
     overflow: hidden;
 }
 
 #other-actions-box {
     margin-inline-end: -2px;
 }
 
-.task-details-name {
-    color: windowtext;
-    opacity: 0.5; /* lower contrast */
-}
-
-#calendar-task-details-grid > rows > .item-date-row > .headline {
-    color: windowtext;
-    opacity: 0.5; /* lower contrast */
-}
-
-.task-details-value {
-    color: WindowText;
-}
-
 #task-text-filter-field {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 #task-text-filter-field .textbox-search-icons {
     margin-bottom: -1px;
 }
--- a/calendar/base/themes/windows/calendar-unifinder.css
+++ b/calendar/base/themes/windows/calendar-unifinder.css
@@ -1,14 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url(chrome://calendar-common/skin/calendar-unifinder.css);
 
+:root[lwt-tree-brighttext] #unifinder-searchBox {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+  --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+}
+
 #bottom-events-box {
   border-inline-start: 1px solid ThreeDShadow;
 }
 
 #unifinder-searchBox {
   border-bottom: 1px solid ThreeDShadow;
 }
 
--- a/calendar/base/themes/windows/calendar-views.css
+++ b/calendar/base/themes/windows/calendar-views.css
@@ -18,20 +18,16 @@
     border-width: 0;
     border-inline-start: 1px;
 }
 
 .view-header {
     margin-bottom: 0;
 }
 
-radio[calview] {
-    color: ButtonText;
-}
-
 radio[calview][selected="true"] {
     background-color: -moz-Field;
 }
 
 .navigation-inner-box > hbox {
     padding-top: 1px;
 }
 
--- a/calendar/base/themes/windows/today-pane.css
+++ b/calendar/base/themes/windows/today-pane.css
@@ -31,49 +31,20 @@
 
 @media (-moz-os-version: windows-win8),
        (-moz-os-version: windows-win10) {
   #mini-day-image {
     background-image: none;
   }
 }
 
-.miniday-nav-buttons {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-arrow.svg");
-}
-
-#previous-day-button:-moz-locale-dir(ltr),
-#next-day-button:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-#miniday-dropdown-button {
-  max-width: 18px;
-}
-
-#miniday-dropdown-button > .toolbarbutton-menu-dropmarker {
-  list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-#miniday-dropdown-button > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
-  width: 9px;
-  height: 7px;
-}
-
 #today-none-box {
   border-top: 1px solid ThreeDShadow;
 }
 
-.today-pane-cycler {
-  padding-inline-start: 5px;
-  padding-inline-end: 5px;
-}
-
 #todaypane-new-event-button[disabled="true"] > .toolbarbutton-icon {
   opacity: 0.4;
 }
 
 @media (-moz-windows-default-theme) {
   sidebarheader > spacer {
     min-height: 25px;
   }
--- a/calendar/lightning/themes/common/lightning.css
+++ b/calendar/lightning/themes/common/lightning.css
@@ -23,32 +23,61 @@
 }
 
 .icon-holder[type="tasks"],
 .tabmail-tab[type="tasks"] {
     list-style-image: url(chrome://calendar-common/skin/icons/task-tab.svg);
     -moz-image-region: auto;
 }
 
+:root[lwt-tree] #ltnSidebar {
+    background-color: var(--sidebar-background-color);
+    color: var(--sidebar-text-color);
+}
+
 /* avoids contributing to the min width when Lightning is not selected */
 #calendarTabPanel:not([selected]) {
   visibility: collapse;
 }
 
 /* Today pane button in status bar */
 #calendar-status-todaypane-button,
 #calendar-status-todaypane-button[checked="true"] {
   min-width: 0;
   min-height: 0;
   margin: 1px 0 0;
   -moz-appearance: none;
   border-radius: var(--toolbarbutton-border-radius);
   border: 1px solid transparent;
 }
 
+#calendar-status-todaypane-button:hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+:root[lwthemetextcolor="bright"] #calendar-status-todaypane-button:hover {
+  background: rgba(255, 255, 255, .25);
+  border-color: rgba(255, 255, 255, .5);
+}
+
+#calendar-status-todaypane-button:hover:active {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+:root[lwthemetextcolor="bright"] #calendar-status-todaypane-button:hover:active {
+  background: rgba(255, 255, 255, .4);
+  border-color: rgba(255, 255, 255, .7);
+  box-shadow: rgba(255, 255, 255, .4) inset;
+}
+
 #calendar-status-todaypane-button > stack > .toolbarbutton-icon-begin {
     list-style-image: url(chrome://calendar-common/skin/icons/pane.svg);
     width: 16px;
     height: 16px;
     -moz-context-properties: fill, fill-opacity;
     fill: currentColor;
     fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
--- a/calendar/lightning/themes/linux/lightning.css
+++ b/calendar/lightning/themes/linux/lightning.css
@@ -60,20 +60,16 @@
 }
 
 /* Today pane button in status bar */
 #calendar-status-todaypane-button,
 #calendar-status-todaypane-button[checked="true"] {
   padding: 0 2px 1px !important;
 }
 
-#calendar-status-todaypane-button:hover {
-  border-color: ThreeDShadow;
-}
-
 #calendar-status-todaypane-button[hideLabel] > stack {
   margin-inline-start: 5px;
 }
 
 #calendar-status-todaypane-button > stack > .toolbarbutton-day-text {
   margin-top: 4px;
 }
 
--- a/calendar/lightning/themes/osx/lightning.css
+++ b/calendar/lightning/themes/osx/lightning.css
@@ -23,28 +23,26 @@
 /* iMIP notification bar */
 #imip-bar > image {
     margin-inline-end: 8px;
 }
 
 /* Lightning sidebar background in calendar and task mode */
 #ltnSidebar {
   background-color: -moz-field;
+  border-inline-end: 1px solid #8B8B8B;
+  margin-inline-end: -3px !important;
 }
 
 /* Today pane button in status bar */
 #calendar-status-todaypane-button,
 #calendar-status-todaypane-button[checked="true"] {
   padding: 0 2px !important;
 }
 
-#calendar-status-todaypane-button:hover {
-  border-color: ThreeDDarkShadow;
-}
-
 #calendar-status-todaypane-button > stack > .toolbarbutton-day-text {
   margin-top: 5px;
   margin-inline-end: 0;
 }
 
 /* shift the today pane button label up by one pixel to center it */
 #calendar-status-todaypane-button > .toolbarbutton-text {
   margin: 0 6px 1px !important;
@@ -91,21 +89,16 @@
 }
 
 #today-splitter {
   border-inline-start: 1px solid #8B8B8B;
   margin-inline-end: -2px;
   position: relative;
 }
 
-#ltnSidebar {
-  border-inline-end: 1px solid #8B8B8B;
-  margin-inline-end: -3px !important;
-}
-
 /* ::: imip button icons ::: */
 #imip-view-toolbar > .toolbarbutton-1.msgHeaderView-button,
 #imip-view-toolbar > .toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-button,
 #imip-view-toolbar > .toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-dropmarker {
   color: -moz-DialogText;
   background-color: white;
 }
 
--- a/calendar/lightning/themes/windows/lightning.css
+++ b/calendar/lightning/themes/windows/lightning.css
@@ -27,21 +27,18 @@
 }
 
 /* Today pane button in status bar */
 #calendar-status-todaypane-button,
 #calendar-status-todaypane-button[checked="true"] {
   padding: 1px 2px 0 !important;
 }
 
-#calendar-status-todaypane-button:hover {
-  border-color: ThreeDShadow;
-}
-
 #calendar-status-todaypane-button[hideLabel] > stack {
+  margin-top: -1px;
   margin-inline-start: 5px;
 }
 
 #calendar-status-todaypane-button > stack > .toolbarbutton-day-text {
   margin-top: 4px;
 }
 
 /* shift the today pane button label up by one pixel to center it */
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -698,17 +698,17 @@
      </tabbox>
     </tabmail>
     <vbox id="contentTab" collapsed="true">
       <vbox flex="1" class="contentTabInstance">
         <toolbox id="dummycontenttoolbox" class="contentTabToolbox">
           <toolbar id="dummycontenttoolbar" class="contentTabToolbar">
             <toolbarspacer/>
             <toolbaritem class="contentTabAddress" align="center">
-              <hbox class="themeableSearchBox searchBox" align="center">
+              <hbox class="themeableSearchBox" align="center">
                 <image class="contentTabSecurity"/>
                 <description class="contentTabUrlbar"/>
               </hbox>
             </toolbaritem>
           </toolbar>
         </toolbox>
         <notificationbox flex="1" notificationside="top">
           <browser id="dummycontentbrowser" type="content" flex="1"
--- a/mail/themes/linux/mail/searchBox.css
+++ b/mail/themes/linux/mail/searchBox.css
@@ -6,21 +6,23 @@
 :root {
   --toolbar-field-focus-border-color: Highlight;
 }
 
 .quick-search-textbox {
   padding-top: 1px;
 }
 
-.searchBox > hbox {
+.searchBox > hbox,
+.themeableSearchBox > hbox {
   -moz-box-ordinal-group: 1;
 }
 
-.searchBox > .textbox-input-box {
+.searchBox > .textbox-input-box,
+.themeableSearchBox > .textbox-input-box {
   -moz-box-ordinal-group: 2;
 }
 
 .gloda-search-icon {
   margin-inline-end: 5px;
 }
 
 .gloda-search-icon,
@@ -50,38 +52,35 @@ textbox:not([searchbutton]) > .textbox-i
 }
 
 .remote-gloda-search-container {
   padding-top: 3px;
   padding-bottom: 2px;
 }
 
 .searchBox,
-#view-task-edit-field,
-#unifinder-task-edit-field  {
+.themeableSearchBox {
   -moz-appearance: none;
   background-clip: padding-box;
   background-color: -moz-field;
   border: 1px solid ThreeDShadow;
   border-radius: 2px;
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
   padding: 3px;
   margin: 0 3px;
 }
 
 .searchBox:hover,
-#view-task-edit-field:hover,
-#unifinder-task-edit-field:hover {
+.themeableSearchBox:hover {
   border-color: hsla(240,5%,5%,.35);
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 .searchBox[focused="true"],
-#view-task-edit-field[focused="true"],
-#unifinder-task-edit-field[focused="true"]  {
+.themeableSearchBox[focused="true"] {
   border-color: Highlight;
 }
 
 /* special treatment because these boxes are on themable toolbars */
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
 #peopleSearchInput:-moz-lwtheme,
 .themeableSearchBox:-moz-lwtheme,
--- a/mail/themes/osx/mail/searchBox.css
+++ b/mail/themes/osx/mail/searchBox.css
@@ -3,17 +3,18 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
 :root {
   --toolbar-field-focus-border-color: -moz-mac-focusring;
 }
 
-.searchBox {
+.searchBox,
+.themeableSearchBox {
   margin-top: 3px;
   margin-bottom: 2px;
   -moz-appearance: none !important;
   border: 1px solid hsla(240,5%,5%,.25);
   border-radius: 3px;
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
   font: icon !important;
   height: 24px;
@@ -25,23 +26,23 @@
   background-clip: padding-box;
   background-image: url("chrome://global/skin/icons/search-textbox.svg");
   background-repeat: no-repeat;
   background-position: 5px center;
   -moz-box-align: center;
 }
 
 .searchBox:hover,
-#view-task-edit-field:hover,
-#unifinder-task-edit-field:hover {
+.themeableSearchBox:hover {
   border-color: hsla(240,5%,5%,.35);
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
-.searchBox[focused="true"] {
+.searchBox[focused="true"],
+.themeableSearchBox[focused="true"] {
   border-color: -moz-mac-focusring;
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 /* special treatment because these boxes are on themable toolbars */
 #searchInput,
 #IMSearchInput,
 #peopleSearchInput {
--- a/mail/themes/windows/mail/searchBox.css
+++ b/mail/themes/windows/mail/searchBox.css
@@ -18,21 +18,23 @@
 #searchInput {
   font-style: normal !important;
 }
 
 .quick-search-textbox {
   padding-top: 1px;
 }
 
-.searchBox > hbox {
+.searchBox > hbox,
+.themeableSearchBox > hbox {
   -moz-box-ordinal-group: 1;
 }
 
-.searchBox > .textbox-input-box {
+.searchBox > .textbox-input-box,
+.themeableSearchBox > .textbox-input-box {
   -moz-box-ordinal-group: 2;
 }
 
 .gloda-search-icon {
   margin-inline-end: 5px;
 }
 
 .gloda-search-icon,
@@ -67,57 +69,53 @@ textbox:not([searchbutton]) > .textbox-i
 }
 
 .remote-gloda-search-container {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 .searchBox,
-#view-task-edit-field,
-#unifinder-task-edit-field {
+.themeableSearchBox {
   -moz-appearance: none;
   background-clip: padding-box;
   border: 1px solid hsla(240,5%,5%,.25);
   border-radius: 2px;
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
   padding-inline-end: 2px;
   padding-inline-start: 2px;
   min-height: 24px;
   margin-top: 1px;
   margin-bottom: 1px;
   width: 25em;
 }
 
 @media (-moz-windows-default-theme: 0) {
   .searchBox:not(:-moz-lwtheme):not([focused="true"]),
-  #view-task-edit-field:not(:-moz-lwtheme):not([focused="true"]),
-  #unifinder-task-edit-field:not(:-moz-lwtheme):not([focused="true"]) {
+  .themeableSearchBox:not(:-moz-lwtheme):not([focused="true"]) {
     border-color: ThreeDShadow;
   }
 }
 
 /* Add margins to show the hover box-shadow */
 #searchInput,
 #IMSearchInput,
 #peopleSearchInput {
   margin-top: 3px;
   margin-bottom: 3px;
 }
 
 .searchBox:hover,
-#view-task-edit-field:hover,
-#unifinder-task-edit-field:hover {
+.themeableSearchBox:hover {
   border-color: hsla(240,5%,5%,.35);
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 .searchBox[focused="true"],
-#view-task-edit-field[focused="true"],
-#unifinder-task-edit-field[focused="true"]  {
+.themeableSearchBox[focused="true"] {
   border-color: Highlight;
 }
 
 /* special treatment because these boxes are on themable toolbars */
 #searchInput,
 #IMSearchInput,
 #peopleSearchInput,
 .remote-gloda-search {