Bug 985114 - Use CSS variables for [systemcolors]. r=Philipp,a=starred
authorRichard Marti <richard.marti@gmail.com>
Sun, 04 Jan 2015 09:41:34 +0100
changeset 21579 e0d2a43ab539edb919b7bfa11f5113ea31dd16a6
parent 21578 c72f18c8c60441ffbda36ac4219cdc17f5304cd4
child 21580 d5b310aab11531eff440f9f2fa28c61eeb4a7528
push id1305
push usermbanner@mozilla.com
push dateMon, 23 Feb 2015 19:48:12 +0000
treeherdercomm-beta@3ae4f13858fd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersPhilipp, starred
bugs985114
Bug 985114 - Use CSS variables for [systemcolors]. r=Philipp,a=starred
calendar/base/jar.mn
calendar/base/themes/common/calendar-views.css
calendar/base/themes/common/dialogs/calendar-event-dialog.css
calendar/base/themes/common/widgets/minimonth.css
calendar/base/themes/linux/widgets/minimonth.css
calendar/base/themes/osx/widgets/minimonth.css
calendar/base/themes/windows/widgets/minimonth.css
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -139,16 +139,17 @@ calendar.jar:
     ../skin/common/calendar-task-tree.css             (themes/common/calendar-task-tree.css)
     ../skin/common/calendar-task-view.css             (themes/common/calendar-task-view.css)
     ../skin/common/calendar-unifinder.css             (themes/common/calendar-unifinder.css)
     ../skin/common/calendar-views.css                 (themes/common/calendar-views.css)
     ../skin/common/today-pane.css                     (themes/common/today-pane.css)
     ../skin/common/dialogs/calendar-alarm-dialog.css  (themes/common/dialogs/calendar-alarm-dialog.css)
     ../skin/common/dialogs/calendar-event-dialog.css  (themes/common/dialogs/calendar-event-dialog.css)
     ../skin/common/widgets/calendar-widgets.css       (themes/common/widgets/calendar-widgets.css)
+    ../skin/common/widgets/minimonth.css              (themes/common/widgets/minimonth.css)
 
 # Linux theme files
     ../skin/linux/calendar/calendar-alarms.css                            (themes/common/calendar-alarms.css)
     ../skin/linux/calendar/calendar-attendees.css                         (themes/common/calendar-attendees.css)
     ../skin/linux/calendar/calendar-creation-wizard.css                   (themes/common/calendar-creation-wizard.css)
     ../skin/linux/calendar/calendar-occurrence-prompt.css                 (themes/common/calendar-occurrence-prompt.css)
     ../skin/linux/calendar/calendar-timezone-highlighter.css              (themes/common/dialogs/calendar-timezone-highlighter.css)
     ../skin/linux/calendar/calendar-properties-dialog.css                 (themes/common/dialogs/calendar-properties-dialog.css)
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -1,12 +1,83 @@
 /* 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/. */
 
+window {
+    --viewColor: #000;
+    --viewBackground: #fff;
+    --viewBorderColor: #d2d2d2;
+    --viewDoubleBorderColor: var(--viewBackground) var(--viewBorderColor);
+    --viewHighlightBorderColor: #67acd8;
+    --viewTodayBorderColor: #7fb9ee;
+    --viewTodayBackground: #e1f0fd;
+    --viewTodayLabelBackground: #d2e3f3;
+    --viewTodayOffBackground: #d7e8f8;
+    --viewTodayDayLabelBackground: #d2e3f3;
+    --viewTodayWeekendBackground: #e1f0fd;
+    --viewWeekendBackground: #f7ffe3;
+    --viewHeaderSelectedBackground: #fffcd8;
+    --viewDayBoxSelectedBackground: #fffcd8;
+    --viewDayBoxOffSelectedBackground: #fffcd8;
+    --viewDayBoxOffSelectedBackground: #fffcd8;
+    --viewMonthCurrentBackground: #f7f7f7;
+    --viewMonthOtherBackground: #f3f3f3;
+    --viewMonthDayBoxSelectedColor: -moz-dialogtext;
+    --viewMonthDayBoxSelectedBackground: #f2edb2;
+    --viewMonthDayBoxLabelColor: #616163;
+    --viewMonthDayBoxLabelTexture: none;
+    --viewMonthDayOtherColor: -moz-dialogtext;
+    --viewMonthDayOtherBackground: #e8e8e8;
+    --viewMonthDayOtherLabelBackground: #ddd;
+    --viewMonthDayOffLabelBackground: #eaf7ca;
+    --viewOffTimeBackground: #f0f0f0;
+    --viewTimeBoxColor: #6a6969;
+    --viewDayLabelSelectedColor: #000;
+    --viewDayLabelSelectedBackground: #fffabc;
+    --viewDragboxColor: -moz-dialogtext;
+    --viewDragboxBackground: linear-gradient(#fe4b22, #feb822);
+    --viewDropshadowBackground: #ffa47d;
+}
+
+window[systemcolors] {
+    --viewColor: WindowText;
+    --viewBackground: -moz-Field;
+    --viewBorderColor: ThreeDShadow;
+    --viewHighlightBorderColor: Highlight;
+    --viewTodayBorderColor: Highlight;
+    --viewTodayBackground: -moz-Field;
+    --viewTodayLabelBackground: Highlight;
+    --viewTodayOffBackground: ButtonFace;
+    --viewTodayDayLabelBackground: ButtonFace;
+    --viewTodayWeekendBackground: ButtonFace;
+    --viewWeekendBackground: rgba(0, 0, 0, .1);
+    --viewHeaderSelectedBackground: ButtonFace;
+    --viewDayBoxSelectedBackground: -moz-Field;
+    --viewDayBoxOffSelectedBackground: rgba(0, 0, 0, .1);
+    --viewDayBoxOffSelectedBackground: ThreeDLightShadow;
+    --viewMonthCurrentBackground: -moz-Field;
+    --viewMonthOtherBackground: ButtonFace;
+    --viewMonthDayBoxSelectedColor: HighlightText;
+    --viewMonthDayBoxSelectedBackground: Highlight;
+    --viewMonthDayBoxLabelColor: WindowText;
+    --viewMonthDayBoxLabelTexture: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
+    --viewMonthDayOtherColor: GrayText;
+    --viewMonthDayOtherBackground: ButtonFace;
+    --viewMonthDayOtherLabelBackground: ButtonFace;
+    --viewMonthDayOffLabelBackground: rgba(0, 0, 0, .1);
+    --viewOffTimeBackground: rgba(0, 0, 0, .1);
+    --viewTimeBoxColor: GrayText;
+    --viewDayLabelSelectedColor: HighlightText;
+    --viewDayLabelSelectedBackground: Highlight;
+    --viewDragboxColor: GrayText;
+    --viewDragboxBackground: Highlight;
+    --viewDropshadowBackground: Highlight !important;
+}
+
 /* Core */
 calendar-category-box:not([categories]) {
   display: none;
 }
 
 .calendar-category-box-gradient {
     width: 7px;
     background-image: linear-gradient(rgba(255, 255, 255, 0.38), transparent) !important;
@@ -65,323 +136,193 @@ calendar-header-container:not([rotated])
 }
 /* ... and on the bottom in rotated view. */
 calendar-header-container[rotated] {
     padding-top: 1px;
     padding-bottom: 5px;
 }
 
 calendar-event-column {
-    background-color: #FFFFFF;
-}
-
-window[systemcolors] calendar-event-column {
-    background-color: -moz-Field;
+    background-color: var(--viewBackground);
 }
 
 calendar-event-column[orient="horizontal"] {
-    border-top: 1px solid #D2D2D2;
-}
-
-window[systemcolors] calendar-event-column[orient="horizontal"] {
-    border-top: 1px solid ThreeDShadow;
+    border-top: 1px solid var(--viewBorderColor);
 }
 
 calendar-event-column[orient="vertical"] {
-    border-left: 1px solid #D2D2D2;
-}
-
-window[systemcolors] calendar-event-column[orient="vertical"] {
-    border-left: 1px solid ThreeDShadow;
+    border-left: 1px solid var(--viewBorderColor);
 }
 
 calendar-event-column[orient="horizontal"][relation="today"] {
-    border-top: 1px solid #67ACD8;
-    border-bottom: 1px solid #67ACD8;
+    border-top: 1px solid var(--viewHighlightBorderColor);
+    border-bottom: 1px solid var(--viewHighlightBorderColor);
     margin-bottom: -1px;
     position: relative;
 }
 
-window[systemcolors] calendar-event-column[orient="horizontal"][relation="today"] {
-    border-top: 1px solid Highlight;
-    border-bottom: 1px solid Highlight;
-}
-
 calendar-event-column[orient="vertical"][relation="today"] {
-    border-left: 1px solid #67ACD8;
-    border-right: 1px solid #67ACD8;
+    border-left: 1px solid var(--viewHighlightBorderColor);
+    border-right: 1px solid var(--viewHighlightBorderColor);
     -moz-margin-end: -1px;
     position: relative;
 }
 
-window[systemcolors] calendar-event-column[orient="vertical"][relation="today"] {
-    border-left: 1px solid Highlight;
-    border-right: 1px solid Highlight;
-}
-
 calendar-header-container {
-    background-color: #FFFFFF;
-    border-left: 1px solid #D2D2D2;
-}
-
-window[systemcolors] calendar-header-container {
-    background-color: -moz-Field;
-    border-left: 1px solid ThreeDShadow;
+    background-color: var(--viewBackground);
+    border-left: 1px solid var(--viewBorderColor);
 }
 
 calendar-header-container[rotated] {
     max-width: 150px;
 }
 
 calendar-header-container[weekend="true"],
 .calendar-event-column-linebox[weekend="true"] {
-    background-color: #F7FFE3;
+    background-color: var(--viewWeekendBackground);
 }
 
 .calendar-event-column-linebox[off-time="true"] {
-    background-color: #F3F3F3;
+    background-color: var(--viewOffTimeBackground);
 }
 
 .calendar-event-column-linebox[off-time="true"][weekend="true"] {
-    background-color: #EAF7CA;
+    background-color: var(--viewMonthDayOffLabelBackground);
 }
 
 calendar-header-container[relation="today"],
 .calendar-event-column-linebox[relation="today"],
 calendar-day-label[orient][relation="today"] {
-    background-color: #E1F0FD;
-}
-
-window[systemcolors] calendar-header-container[relation="today"],
-window[systemcolors] .calendar-event-column-linebox[relation="today"],
-window[systemcolors] calendar-day-label[orient][relation="today"] {
-    background-color: -moz-Field;
-}
-
-window[systemcolors] calendar-header-container[weekend="true"],
-window[systemcolors] .calendar-event-column-linebox[weekend="true"],
-window[systemcolors] .calendar-event-column-linebox[off-time="true"] {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: var(--viewTodayBackground);
 }
 
 calendar-header-container[relation="today"] {
-    border-left: 1px solid #7FB9EE;
-    border-right: 1px solid #7FB9EE;
+    border-left: 1px solid var(--viewTodayBorderColor);
+    border-right: 1px solid var(--viewTodayBorderColor);
     -moz-margin-end: -1px;
     position: relative;
 }
 
-window[systemcolors] calendar-header-container[relation="today"] {
-    border-left: 1px solid Highlight;
-    border-right: 1px solid Highlight;
-}
-
 calendar-header-container[relation="today"][rotated="true"] {
-    border-top: 1px solid #7FB9EE;
-    border-bottom: 1px solid #7FB9EE !important;
-    border-right: 1px solid #D2D2D2;
+    border-top: 1px solid var(--viewTodayBorderColor);
+    border-bottom: 1px solid var(--viewTodayBorderColor) !important;
+    border-right: 1px solid var(--viewBorderColor);
     margin-top: -1px;
     position: relative;
 }
 
-window[systemcolors] calendar-header-container[relation="today"][rotated="true"] {
-    border-top: 1px solid Highlight;
-    border-bottom: 1px solid Highlight !important;
-    border-right: 1px solid ThreeDShadow;
-}
-
 calendar-header-container[selected="true"],
 .calendar-event-column-linebox[selected="true"] {
-    background-color: #FFFCD8;
+    background-color: var(--viewHeaderSelectedBackground);
 }
 
 calendar-header-container[weekend="true"][relation="today"],
 .calendar-event-column-linebox[weekend="true"][relation="today"] {
-    background-color: #E1F0FD;
+    background-color: var(--viewTodayWeekendBackground);
 }
 
 .calendar-event-column-linebox[off-time="true"][relation="today"] {
-    background-color: #D7E8F8;
-}
-
-window[systemcolors] calendar-header-container[selected="true"],
-window[systemcolors] .calendar-event-column-linebox[selected="true"],
-window[systemcolors] calendar-header-container[weekend="true"][relation="today"],
-window[systemcolors] .calendar-event-column-linebox[weekend="true"][relation="today"],
-window[systemcolors] .calendar-event-column-linebox[off-time="true"][relation="today"],
-window[systemcolors] calendar-header-container[weekend="true"][selected="true"],
-window[systemcolors] .calendar-event-column-linebox[weekend="true"][selected="true"],
-window[systemcolors] .calendar-event-column-linebox[off-time="true"][selected="true"] {
-    background-color: ButtonFace;
+    background-color: var(--viewTodayOffBackground);
 }
 
 .multiday-view-header-day-box[orient="vertical"] .calendar-event-column-header {
-    border-bottom: 1px solid #D2D2D2;
+    border-bottom: 1px solid var(--viewBorderColor);
     min-width: 100px;
 }
 
-window[systemcolors] .multiday-view-header-day-box[orient="vertical"] .calendar-event-column-header {
-    border-bottom: 1px solid ThreeDShadow;
-}
-
 calendar-header-container[weekend="true"][selected="true"],
 .calendar-event-column-linebox[weekend="true"][selected="true"] {
-    background-color: #FFFCD8;
+    background-color: var(--viewHeaderSelectedBackground);
 }
 
 .calendar-event-column-linebox[off-time="true"][selected="true"] {
-    background-color: #F2EDB2;
+    background-color: var(--viewTodayOffBackground);
 }
 
 .calendar-event-column-linebox[orient="horizontal"] {
-    border-right: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .calendar-event-column-linebox[orient="horizontal"] {
-    border-right: 1px solid ThreeDShadow;
+    border-right: 1px solid var(--viewBorderColor);
 }
 
 .calendar-event-column-linebox[orient="vertical"] {
-    border-bottom: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .calendar-event-column-linebox[orient="vertical"] {
-    border-bottom: 1px solid ThreeDShadow;
+    border-bottom: 1px solid var(--viewBorderColor);
 }
 
 .calendar-event-column-linebox[orient="horizontal"][relation="today"]:last-child {
-    border-right: 1px solid #67ACD8;
-}
-
-window[systemcolors] .calendar-event-column-linebox[orient="horizontal"][relation="today"]:last-child {
-    border-right: 1px solid Highlight;
+    border-right: 1px solid var(--viewHighlightBorderColor);
 }
 
 .calendar-event-column-linebox[orient="vertical"][relation="today"]:last-child {
-    border-bottom: 1px solid #67ACD8;
-}
-
-window[systemcolors] .calendar-event-column-linebox[orient="vertical"][relation="today"]:last-child {
-    border-bottom: 1px solid Highlight;
+    border-bottom: 1px solid var(--viewHighlightBorderColor);
 }
 
 /* Make sure we extend the bold line separating scrollable and non-scrollable
    areas over the timebar. */
 .multiday-view-header-time-spacer[orient="horizontal"] {
-    border-bottom: 2px solid #D2D2D2;
-    border-right: 2px solid #D2D2D2;
-    -moz-border-right-colors: #FFFFFF #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-header-time-spacer[orient="horizontal"] {
-    border-bottom: 2px solid ThreeDShadow;
-    border-right: 2px solid ThreeDShadow;
-    -moz-border-right-colors: -moz-Field ThreeDShadow;
+    border-bottom: 2px solid var(--viewBorderColor);
+    border-right: 2px solid;
+    -moz-border-right-colors: var(--viewDoubleBorderColor);
 }
 
 .multiday-view-header-time-spacer[orient="vertical"] {
-    border-right: 2px solid #D2D2D2;
-    -moz-border-right-colors: #D2D2D2 #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-header-time-spacer[orient="vertical"] {
-    border-right: 2px solid ThreeDShadow;
-    -moz-border-right-colors: -moz-Field ThreeDShadow;
+    border-right: 2px solid;
+    -moz-border-right-colors: var(--viewDoubleBorderColor);
 }
 
 .multiday-view-label-box[orient="horizontal"] > .multiday-view-label-time-spacer {
-    border-right: 2px solid #D2D2D2;
-    -moz-border-right-colors: #FFFFFF #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-label-box[orient="horizontal"] > .multiday-view-label-time-spacer {
-    border-right: 2px solid ThreeDShadow;
-    -moz-border-right-colors: -moz-Field ThreeDShadow;
+    border-right: 2px solid;
+    -moz-border-right-colors: var(--viewDoubleBorderColor);
 }
 
 .multiday-view-header-day-box[orient="horizontal"] {
-    border-right: 1px solid #D2D2D2;
-    border-bottom: 2px solid #D2D2D2;
+    border-right: 1px solid var(--viewBorderColor);
+    border-bottom: 2px solid var(--viewBorderColor);
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 120px;
 }
 
-window[systemcolors] .multiday-view-header-day-box[orient="horizontal"] {
-    border-right: 1px solid ThreeDShadow;
-    border-bottom: 2px solid ThreeDShadow;
-}
-
 .multiday-view-header-day-box[orient="horizontal"][todaylastinview="true"] {
-    border-right: 1px solid #67ACD8;
-}
-
-window[systemcolors] .multiday-view-header-day-box[orient="horizontal"][todaylastinview="true"] {
-    border-right: 1px solid Highlight;
+    border-right: 1px solid var(--viewHighlightBorderColor);
 }
 
 /* Make sure the box for day-labels appears to end before the scrollbar. */
 .multiday-view-label-day-box[orient="horizontal"] {
-    border-top: 1px solid #D2D2D2;
-    border-right: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-label-day-box[orient="horizontal"] {
-    border-top: 1px solid ThreeDShadow;
-    border-right: 1px solid ThreeDShadow;
+    border-top: 1px solid var(--viewBorderColor);
+    border-right: 1px solid var(--viewBorderColor);
 }
 
 .multiday-view-label-day-box[orient="vertical"] {
-    border-top: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-label-day-box[orient="vertical"] {
-    border-top: 1px solid ThreeDShadow;
+    border-top: 1px solid var(--viewBorderColor);
 }
 
 .multiday-view-header-day-box[orient="vertical"] {
-    border-top: 1px solid #D2D2D2;
-    border-right: 2px solid #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-header-day-box[orient="vertical"] {
-    border-top: 1px solid ThreeDShadow;
-    border-right: 2px solid ThreeDShadow;
+    border-top: 1px solid var(--viewBorderColor);
+    border-right: 2px solid var(--viewBorderColor);
 }
 
 /* Make sure to have a border between the edge of the views and the scrollbar. */
 .multiday-view-day-box {
-    border-right: 1px solid #D2D2D2;
-    border-bottom: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .multiday-view-day-box {
-    border-right: 1px solid ThreeDShadow;
-    border-bottom: 1px solid ThreeDShadow;
+    border-right: 1px solid var(--viewBorderColor);
+    border-bottom: 1px solid var(--viewBorderColor);
 }
 
 .fgdragbox {
     -moz-box-orient: inherit;
     display: none;
 }
 
 .fgdragbox[dragging="true"] {
     display: -moz-box;
-    background-image: linear-gradient(#fe4b22, #feb822);
-    border: 5px #ffffff;
+    background: var(--viewDragboxBackground);
+    border: 5px var(--viewBackground);
     opacity: 0.5;
     min-height: 2px;
     min-width: 2px;
 }
 
-window[systemcolors] .fgdragbox[dragging="true"] {
-    background-image: linear-gradient(Highlight, Highlight);
-    border: 5px -moz-Field;
-}
-
 .fgdragcontainer {
     -moz-box-orient: inherit;
     display: none;
 }
 
 .fgdragcontainer[dragging="true"] {
     display: -moz-box;
   /* This is a workaround for a stack bug and display: hidden in underlying
@@ -390,20 +331,17 @@ window[systemcolors] .fgdragbox[dragging
    */
     opacity: 0.9999;
 }
 
 .fgdragbox-label {
     font-weight: bold;
     text-align: center;
     overflow: hidden;
-}
-
-window[systemcolors] .fgdragbox-label {
-	color: GrayText;
+    color: var(--viewDragboxColor);
 }
 
 .timeIndicator[orient="vertical"] {
     min-width: 1px;
     -moz-margin-start: -1px;
     -moz-margin-end: -1px;
     border-top: 2px solid red;
     opacity: 0.7;
@@ -465,17 +403,17 @@ window[systemcolors] .fgdragbox-label {
 
 calendar-event-box {
     border: 1px solid transparent;
 }
 
 calendar-month-day-box-item[selected="true"] .calendar-color-box,
 calendar-event-box[selected="true"] .calendar-color-box,
 calendar-editable-item[selected="true"] .calendar-color-box {
-    color: #000000 !important;
+    color: var(--viewColor) !important;
     background-color: #FDF5A0 !important;
     box-shadow: 1px 2px 5px rgba(30, 20, 0, 0.6);
 }
 
 
 /* RTL styles for the main box and children */
 .multiday-view-main-box {
     direction: ltr;
@@ -521,140 +459,84 @@ calendar-time-bar[orient="horizontal"] {
 /** Start time bar **/
 
 .calendar-time-bar-label {
     font-size: 1em;
 }
 
 .calendar-time-bar-box-odd,
 .calendar-time-bar-box-even {
-    color: #6A6969;
-    background-color: #FFFFFF;
+    color: var(--viewTimeBoxColor);
+    background-color: var(--viewBackground);
     text-align: right;
     overflow: hidden;
 }
 
-window[systemcolors] .calendar-time-bar-box-odd,
-window[systemcolors] .calendar-time-bar-box-even {
-    color: GrayText;
-    background-color: -moz-Field;
-}
-
 .calendar-time-bar-box-odd[off-time="true"] ,
 .calendar-time-bar-box-even[off-time="true"] {
-    background-color: #F0F0F0;
-    border-right: 2px solid #D2D2D2;
-    -moz-border-right-colors:  #FFFFFF #D2D2D2;
-}
-
-window[systemcolors] .calendar-time-bar-box-odd[off-time="true"] ,
-window[systemcolors] .calendar-time-bar-box-even[off-time="true"] {
-    background-color: rgba(0, 0, 0, .1);
-    border-right: 2px solid ThreeDShadow;
-    -moz-border-right-colors: -moz-Field ThreeDShadow;
+    background-color: var(--viewOffTimeBackground);
+    border-right: 2px solid;
+    -moz-border-right-colors: var(--viewDoubleBorderColor);
 }
 
 .calendar-time-bar-box-odd[orient="horizontal"],
 .calendar-time-bar-box-even[orient="horizontal"] {
-    border-right: 1px solid #D2D2D2;
-    border-top: 1px solid #D2D2D2;
+    border-right: 1px solid var(--viewBorderColor);
+    border-top: 1px solid var(--viewBorderColor);
     -moz-border-right-colors: none;
     height: 40px; /* the same as the calendar-time-bar element */
 }
 
-window[systemcolors] .calendar-time-bar-box-odd[orient="horizontal"],
-window[systemcolors] .calendar-time-bar-box-even[orient="horizontal"] {
-    border-right: 1px solid ThreeDShadow;
-    border-top: 1px solid ThreeDShadow;
-    -moz-border-right-colors: none;
-}
-
 .calendar-time-bar-box-odd[orient="vertical"],
 .calendar-time-bar-box-even[orient="vertical"] {
     border-bottom: 1px  transparent !important;
-    border-right: 2px solid #D2D2D2;
-    -moz-border-right-colors:  #FFFFFF #D2D2D2;
+    border-right: 2px solid;
+    -moz-border-right-colors:  var(--viewDoubleBorderColor);
     width: 10ex; /* the same as the calendar-time-bar element */
 }
 
-window[systemcolors] .calendar-time-bar-box-odd[orient="vertical"],
-window[systemcolors] .calendar-time-bar-box-even[orient="vertical"] {
-    border-right: 2px solid ThreeDShadow;
-    -moz-border-right-colors: -moz-Field ThreeDShadow;
-}
-
 /** End time bar **/
 
 calendar-multiday-view {
-    background-color: #FFFFFF;
+    background-color: var(--viewBackground);
     padding: 0px;
 }
 
-window[systemcolors] calendar-multiday-view {
-    background-color: -moz-Field;
-}
-
 calendar-multiday-view[hidden="true"] {
     display: none;
 }
 
 calendar-day-label {
-    color: #000000;
-    background-color: white;
-    background-image: linear-gradient(#fafafa, #eeeeee);
-    border-left: 1px solid #D2D2D2;
-    border-bottom: 1px solid #D2D2D2;
-}
-
-window[systemcolors] calendar-day-label {
-    color: WindowText;
-    background-color: -moz-Field;
-    background-image: linear-gradient(transparent, transparent 48%, rgba(0, 0, 0, 0.02) 52%, rgba(0, 0, 0, 0.1));
-    border-left: 1px solid ThreeDShadow;
-    border-bottom: 1px solid ThreeDShadow;
+    color: var(--viewColor);
+    background-color: var(--viewBackground);
+    background-image: linear-gradient(transparent, transparent 48%,
+                                      rgba(0, 0, 0, 0.02) 52%, rgba(0, 0, 0, 0.1));
+    border-left: 1px solid var(--viewBorderColor);
+    border-bottom: 1px solid var(--viewBorderColor);
 }
 
 calendar-day-label[selected="true"] {
-    background-color: #FFFABC !important;
-}
-
-window[systemcolors] calendar-day-label[selected="true"] {
-    color: HighlightText;
-    background-color: Highlight !important;
+    color: var(--viewDayLabelSelectedColor);
+    background-color: var(--viewDayLabelSelectedBackground) !important;
 }
 
 calendar-day-label[orient="vertical"] {
     background-image: none !important;
     min-width: 100px;
 }
 
-calendar-day-label[orient="vertical"][relation="today"],
-calendar-day-label[orient="vertical"][relation="today1day"] {
-    background-color: #D2E3F3;
-}
-
-window[systemcolors] calendar-day-label[orient="vertical"][relation="today"],
-window[systemcolors] calendar-day-label[orient="vertical"][relation="today1day"] {
-    background-color: ButtonFace;
-}
-
 calendar-day-label[relation="today"],
 calendar-day-label[relation="today1day"] {
-    border: 1px solid #67ACD8;
+    background-color: var(--viewTodayDayLabelBackground);
+    border: 1px solid var(--viewHighlightBorderColor);
     -moz-margin-end: -1px;
     margin-top: -1px;
     position: relative;
 }
 
-window[systemcolors] calendar-day-label[relation="today"],
-window[systemcolors] calendar-day-label[relation="today1day"] {
-    background-color: ButtonFace;
-    border: 1px solid Highlight;
-}
-
 .calendar-day-label-name {
     text-align: center;
 }
 
 .calendar-day-label-name[relation="today"],
 .calendar-day-label-name[relation="today1day"] {
     font-weight: bold;
 }
@@ -668,180 +550,109 @@ calendar-multiweek-view {
 .calendar-month-view-grid-column {
     min-width: 1px;
     width: 1px;
 }
 
 .calendar-month-view-grid-row {
     min-height: 1px;
     height: 1px;
-    border-right: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .calendar-month-view-grid-row {
-    border-right: 1px solid ThreeDShadow;
+    border-right: 1px solid var(--viewBorderColor);
 }
 
 calendar-month-day-box {
     border:none !important;
-    border-left: 1px solid #D2D2D2 !important;
-    border-bottom: 1px solid #D2D2D2 !important;
-}
-
-window[systemcolors] calendar-month-day-box {
-    border-left: 1px solid ThreeDShadow !important;
-    border-bottom: 1px solid ThreeDShadow !important;
+    border-left: 1px solid var(--viewBorderColor) !important;
+    border-bottom: 1px solid var(--viewBorderColor) !important;
 }
 
 .calendar-month-day-box-items-box {
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 .calendar-month-day-box-current-month {
-    background-color: #FFFFFF;
-}
-
-window[systemcolors] .calendar-month-day-box-current-month {
-    background-color: -moz-Field;
+    background-color: var(--viewBackground);
 }
 
 .calendar-month-day-box-current-month .calendar-month-day-box-date-label {
-    background-color: #F7F7F7;
-}
-
-window[systemcolors] .calendar-month-day-box-current-month .calendar-month-day-box-date-label {
-    background-color: -moz-Field;
+    background-color: var(--viewMonthCurrentBackground);
 }
 
 .calendar-month-day-box-day-off {
-    background-color: #F7FFE3;
-}
-
-window[systemcolors] .calendar-month-day-box-day-off {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: var(--viewWeekendBackground);
 }
 
 .calendar-month-day-box-day-off .calendar-month-day-box-date-label {
-    background-color: #EAF7CA;
-}
-
-window[systemcolors] .calendar-month-day-box-day-off .calendar-month-day-box-date-label {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: var(--viewMonthDayOffLabelBackground);
 }
 
 .calendar-month-day-box-other-month {
-    background-color: #F3F3F3;
-}
-
-window[systemcolors] .calendar-month-day-box-other-month {
-    background-color: ButtonFace;
+    background-color: var(--viewMonthOtherBackground);
 }
 
 .calendar-month-day-box-other-month .calendar-month-day-box-date-label {
-    background-color: #E8E8E8;
-}
-
-window[systemcolors] .calendar-month-day-box-other-month .calendar-month-day-box-date-label {
-    color: GrayText;
-    background-color: ButtonFace;
+    color: var(--viewMonthDayOtherColor);
+    background-color: var(--viewMonthDayOtherBackground);
 }
 
 .calendar-month-day-box-other-month.calendar-month-day-box-day-off {
-    background-color: #E8E8E8;
-}
-
-window[systemcolors] .calendar-month-day-box-other-month.calendar-month-day-box-day-off {
-    background-color: ButtonFace;
+    background-color: var(--viewMonthDayOtherBackground);
 }
 
 .calendar-month-day-box-other-month.calendar-month-day-box-day-off .calendar-month-day-box-date-label {
-    background-color: #DDDDDD;
-}
-
-window[systemcolors] .calendar-month-day-box-other-month.calendar-month-day-box-day-off .calendar-month-day-box-date-label {
-    color: GrayText;
-    background-color: ButtonFace;
+    color: var(--viewMonthDayOtherColor);
+    background-color: var(--viewMonthDayOtherLabelBackground);
 }
 
 .calendar-month-day-box-current-month[relation="today"],
 .calendar-month-day-box-day-off[relation="today"],
 .calendar-month-day-box-other-month[relation="today"] {
-    background-color: #E1F0FD;
-    border: 1px solid #7FB9EE !important;
+    background-color: var(--viewTodayBackground);
+    border: 1px solid var(--viewTodayBorderColor) !important;
     -moz-margin-end: -1px !important;
     margin-top: -1px !important;
     position: relative;
 }
 
-window[systemcolors] .calendar-month-day-box-current-month[relation="today"],
-window[systemcolors] .calendar-month-day-box-day-off[relation="today"],
-window[systemcolors] .calendar-month-day-box-other-month[relation="today"] {
-    background-color: -moz-Field;
-    border: 1px solid Highlight !important;
-}
-
 .calendar-month-day-box-date-label[relation="today"] {
-    background-color: #D2E3F3;
+    background-color: var(--viewTodayLabelBackground);
     font-weight: bold;
 }
 
-window[systemcolors] .calendar-month-day-box-date-label[relation="today"] {
-    color: Highlight;
-}
-
-.calendar-month-day-box-current-month[selected="true"],
-.calendar-month-day-box-day-off[selected="true"],
-.calendar-month-day-box-other-month[selected="true"] {
-    background-color: #FFFCD8;
+.calendar-month-day-box-current-month[selected="true"] {
+    background-color: var(--viewDayBoxSelectedBackground);
 }
 
-window[systemcolors] .calendar-month-day-box-current-month[selected="true"] {
-    background-color: -moz-Field;
+.calendar-month-day-box-day-off[selected="true"] {
+    background-color: var(--viewDayBoxOffSelectedBackground);
 }
 
-window[systemcolors] .calendar-month-day-box-day-off[selected="true"] {
-    background-color: rgba(0, 0, 0, .1);
-}
-
-window[systemcolors] .calendar-month-day-box-other-month[selected="true"] {
-    background-color: ThreeDLightShadow;
+.calendar-month-day-box-other-month[selected="true"] {
+    background-color: var(--dayBoxOtherSelectedBackground);
 }
 
 .calendar-month-day-box-date-label[selected="true"] {
-    background-color: #F2EDB2;
-}
-
-window[systemcolors] .calendar-month-day-box-date-label[selected="true"] {
-    color: HighlightText;
-    background-color: Highlight;
+    color: var(--viewMonthDayBoxSelectedColor);
+    background-color: var(--viewMonthDayBoxSelectedBackground);
 }
 
 .calendar-month-day-box-date-label[relation="today"][selected="true"] {
-    background-color: #D2E3F3;
-}
-
-window[systemcolors] .calendar-month-day-box-date-label[relation="today"][selected="true"] {
-    color: HighlightText;
-    background-color: Highlight;
+    background-color: var(--viewTodayLabelBackground);
 }
 
 .calendar-month-day-box-date-label {
-    color: #616163;
+    color: var(--viewMonthDayBoxLabelColor);
     font-size: 0.9em;
     text-align: right;
     margin: 0px;
     padding-top: 1px;
     -moz-padding-end: 2px;
     padding-bottom: 1px;
-}
-
-window[systemcolors] .calendar-month-day-box-date-label {
-    color: WindowText;
-    background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
+    background-image: var(--viewMonthDayBoxLabelTexture);
 }
 
 calendar-month-day-box-item {
     margin: 1px;
     padding: 1px 1px;
 }
 
 .calendar-color-box {
@@ -862,37 +673,28 @@ calendar-month-day-box calendar-month-da
     margin: 0px;
 }
 
 .calendar-month-day-box-item-label[time="true"] {
     -moz-margin-end: 4px;
 }
 
 .labeldaybox-container {
-    border-right: 1px solid #D2D2D2;
-    border-top: 1px solid #D2D2D2;
-}
-
-window[systemcolors] .labeldaybox-container {
-    border-right: 1px solid ThreeDShadow;
-    border-top: 1px solid ThreeDShadow;
+    border-right: 1px solid var(--viewBorderColor);
+    border-top: 1px solid var(--viewBorderColor);
 }
 
 .dropshadow {
     height: 1.2em;
     margin: 1px;
     padding: 0px 1px;
-    background-color: #FFA47D;
+    background-color: var(--viewDropshadowBackground);
     box-shadow: 1px 1px 3px rgba(68, 35, 0, 0.7) inset;
 }
 
-window[systemcolors] .dropshadow {
-    background-color: Highlight !important;
-}
-
 calendar-event-gripbar {
     -moz-box-align: center;
     -moz-box-pack: center;
     min-height: 4px;
     min-width: 4px;
     overflow: hidden;
 }
 
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -1,12 +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/. */
 
+dialog {
+    --eventBorderColor: #8d8e90;
+    --eventWidgetBorderColor: #cacaff;
+    --eventGridStartBorderColor: #bdbec0;
+}
+
+dialog[systemcolors] {
+    --eventBorderColor: ThreeDShadow;
+    --eventWidgetBorderColor: ThreeDShadow;
+    --eventGridStartBorderColor: ThreeDShadow;
+}
+
 #calendar-event-dialog,
 #calendar-task-dialog {
     padding: 0px;
 }
 
 #yearly-period-of-label,
 label.label {
     text-align: right;
@@ -171,21 +183,17 @@ daypicker-monthday {
 
 /*--------------------------------------------------------------------
  *   Attendees Dialog
  *-------------------------------------------------------------------*/
 
 .listbox-noborder {
     -moz-appearance: none;
     margin: 0px 0px;
-    border: 1px solid #8D8E90;
-}
-
-dialog[systemcolors] .listbox-noborder {
-    border: 1px solid ThreeDShadow;
+    border: 1px solid var(--eventBorderColor);
 }
 
 #timebar > .listbox-noborder {
     border-bottom-style: none;
 }
 
 #freebusy-grid > .listbox-noborder {
     border-top-color: transparent;
@@ -215,34 +223,26 @@ dialog[systemcolors] .listbox-noborder {
 }
 
 .freebusy-listitem {
     border-width: 0px;
 }
 
 freebusy-day {
     -moz-margin-end: 2px;
-    -moz-border-start: 1px solid #8D8E90;
-    -moz-border-end: 1px solid #8D8E90;
-    border-bottom: 1px solid #8D8E90;
+    -moz-border-start: 1px solid var(--eventBorderColor);
+    -moz-border-end: 1px solid var(--eventBorderColor);
+    border-bottom: 1px solid var(--eventBorderColor);
 }
 
-dialog[systemcolors] freebusy-day {
-    -moz-border-start: 1px solid ThreeDShadow;
-    -moz-border-end: 1px solid ThreeDShadow;
-    border-bottom: 1px solid ThreeDShadow;
-}
-
-freebusy-day:first-child,
-dialog[systemcolors] freebusy-day:first-child {
+freebusy-day:first-child {
     -moz-border-start: 1px solid transparent;
 }
 
-freebusy-day:last-child,
-dialog[systemcolors] freebusy-day:last-child {
+freebusy-day:last-child {
     -moz-border-end: 1px solid transparent;
 }
 
 /* negative margins to clear freebusy-day's border and margin */
 freebusy-day > box {
     -moz-margin-start: -1px;
     -moz-margin-end: -3px;
 }
@@ -271,27 +271,23 @@ freebusy-day > box {
      since we added the selection-bar this is no longer necessary
      but we keep the possibity to decorate those hours if it should
      become beneficial.
      text-decoration: underline;
    */
 }
 
 .freebusy-grid {
-    -moz-border-start: 1px solid #BDBEC0;
+    -moz-border-start: 1px solid var(--eventGridStartBorderColor);
     background-color: #E09EBD;
     color: #E09EBD;
     min-height: 16px;
     -moz-padding-start: 1px;
 }
 
-dialog[systemcolors] .freebusy-grid {
-    -moz-border-start: 1px solid ThreeDShadow;
-}
-
 .freebusy-grid[state="busy"] {
     background-color: #153E7E;
     color: #153E7E;
 }
 
 .freebusy-grid[state="busy_tentative"] {
     background-color: #1589FF;
     color: #1589FF;
@@ -302,44 +298,39 @@ dialog[systemcolors] .freebusy-grid {
     color: #4E387E;
 }
 
 .freebusy-grid[state="free"] {
     background-color: #EBEBE4;
     color: #EBEBE4;
 }
 
-.freebusy-grid:first-child,
-dialog[systemcolors] .freebusy-grid:first-child {
+.freebusy-grid:first-child {
     -moz-border-start: 1px solid transparent;
 }
 
 .freebusy-grid.last-in-day {
-    -moz-border-end: 1px solid #8D8E90;
+    -moz-border-end: 1px solid var(--eventBorderColor);
     -moz-margin-end: 2px;
 }
 
-dialog[systemcolors] .freebusy-grid.last-in-day {
-    -moz-border-end: 1px solid ThreeDShadow;
-}
-
 #dialog-box {
     padding-top: 8px;
     padding-bottom: 10px;
     -moz-padding-start: 8px;
     -moz-padding-end: 10px;
 }
 
 #addressingWidget {
     -moz-user-focus: none;
 }
 
 #typecol-addressingWidget {
     min-width: 9em;
-    border-right: 1px solid #CACAFF;
+    border-right: 1px solid var(--eventWidgetBorderColor);
 }
 
 /* This applies to rows of the attendee-list and the freebusy-grid */
 .addressingWidgetItem,
 .dummy-row {
     border: none !important;
     background-color: inherit !important;
     color: inherit !important;
@@ -348,24 +339,20 @@ dialog[systemcolors] .freebusy-grid.last
      largest icon [the usertype-icon in this case] to
      ensure that the rows of the freebusy-grid and
      the attendee-list always have the same height,
      regardless of the font size. */
     min-height: 16px;
 }
 
 .addressingWidgetCell {
-    border-bottom: 1px solid #CACAFF;
+    border-bottom: 1px solid var(--eventWidgetBorderColor);
     padding: 0px;
 }
 
-dialog[systemcolors] .addressingWidgetCell {
-    border-bottom: 1px solid ThreeDShadow;
-}
-
 .addressingWidgetCell:first-child {
     border-top: none;
 }
 
 .dummy-row-cell:first-child {
     border-top: none;
 }
 
copy from calendar/base/themes/windows/widgets/minimonth.css
copy to calendar/base/themes/common/widgets/minimonth.css
--- a/calendar/base/themes/windows/widgets/minimonth.css
+++ b/calendar/base/themes/common/widgets/minimonth.css
@@ -1,32 +1,60 @@
 /* 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 {
-  background-color: #FFFFFF;
+  --mmMainBackground: #fff;
+  --mmHighlightColor: HighlightText;
+  --mmHighlightBackground: Highlight;
+  --mmHighlightBorderColor: Highlight;
+  --mmBoxBackground: #f5f5f6;
+  --mmBoxBorderColor: #c0c0c0;
+  --mmDayColor: #2e4e73;
+  --mmDayBorderColor: #fff;
+  --mmDayOtherColor: #b2b2b2;
+  --mmDayOtherBackground: #f0f0f0;
+  --mmDayOtherBorderColor: #f0f0f0;
+  --mmDayTodayBackground: #dfeaf4;
+  --mmDayTodayBorderColor: #67acd8;
+  --mmDaySelectedColor: #2e4e73;
+  --mmDaySelectedBackground: #fffabc;
+  --mmDaySelectedBorderColor: #d9c585;
+  --mmDaySelectedTodayBackground: #f2edb2;
+  --mmDaySelectedTodayBorderColor: #67acd8;
+}
+
+:root[systemcolors] minimonth {
+  --mmMainBackground: -moz-field;
+  --mmBoxBackground: -moz-Dialog;
+  --mmBoxBorderColor: ThreeDShadow;
+  --mmDayColor: WindowText;
+  --mmDayBorderColor: Window;
+  --mmDayOtherColor: GrayText;
+  --mmDayOtherBackground: ButtonFace;
+  --mmDayOtherBorderColor: Transparent;
+  --mmDayTodayBackground: -moz-field;
+  --mmDayTodayBorderColor: Highlight;
+  --mmDaySelectedColor: HighlightText;
+  --mmDaySelectedBackground: Highlight;
+  --mmDaySelectedBorderColor: ButtonFace;
+  --mmDaySelectedTodayBackground: Highlight;
+  --mmDaySelectedTodayBorderColor: ButtonFace;
+}
+
+minimonth {
+  background-color: var(--mmMainBackground);
   border: 0px;
   padding: 4px;
 }
 
-dialog[systemcolors] minimonth,
-window[systemcolors] minimonth {
-  background-color: -moz-field;
-}
-
 .minimonth-month-box {
-  background-color: #F5F5F6;
-  border: 1px dotted #C0C0C0;
-}
-
-dialog[systemcolors] .minimonth-month-box,
-window[systemcolors] .minimonth-month-box {
-  background-color: -moz-Dialog;
-  border-color: ThreeDShadow;
+  background-color: var(--mmBoxBackground);
+  border: 1px dotted var(--mmBoxBorderColor);
 }
 
 .minimonth-month-name {
   font-weight: bold;
   padding: 0px;
   -moz-user-focus: normal;
 }
 
@@ -85,104 +113,65 @@ window[systemcolors] .minimonth-month-bo
   list-style-image: url("chrome://calendar-common/skin/widgets/nav-today.svg");
 }
 
 .minimonth-row-header {
   text-align: center;
 }
 
 .minimonth-day {
-  color: #2E4E73;
+  color: var(--mmDayColor);
   text-align: center;
-  border: 1px solid #FFFFFF;
-  background-color: #FFFFFF;
+  border: 1px solid var(--mmDayBorderColor);
+  background-color: var(--mmMainBackground);
   min-height: 16px;
 }
 
-dialog[systemcolors] .minimonth-day,
-window[systemcolors] .minimonth-day {
-  color: WindowText;
-  border: 1px solid Window;
-  background-color: -moz-field;
-}
-
 .minimonth-day[othermonth="true"] {
-  color: #b2b2b2;
-  background-color: #F0F0F0;
-  border: 1px solid #F0F0F0;
-}
-
-dialog[systemcolors] .minimonth-day[othermonth="true"],
-window[systemcolors] .minimonth-day[othermonth="true"] {
-  color: GrayText;
-  background-color: ButtonFace;
-  border: 1px solid transparent;
+  color: var(--mmDayOtherColor);
+  background-color: var(--mmDayOtherBackground);
+  border: 1px solid var(--mmDayOtherBorderColor);
 }
 
 .minimonth-day[today="true"] {
-  background-color: #dfeaf4;
-  border: 1px solid #67ACD8;
-}
-
-dialog[systemcolors] .minimonth-day[today="true"],
-window[systemcolors] .minimonth-day[today="true"] {
-  background-color: -moz-field;
-  border: 1px solid Highlight;
+  background-color: var(--mmDayTodayBackground);
+  border: 1px solid var(--mmDayTodayBorderColor);
 }
 
 .minimonth-day[selected="true"] {
-  background-color: #FFFABC;
-  color: #2E4E73;
-  border: 1px solid #D9C585;
+  background-color: var(--mmDaySelectedBackground);
+  color: var(--mmDaySelectedColor);
+  border: 1px solid var(--mmDaySelectedBorderColor);
 }
 
 .minimonth-day[selected="true"][today="true"] {
-  background-color: #F2EDB2;
-  border: 1px solid #67ACD8;
- }
-
-dialog[systemcolors] .minimonth-day[selected="true"],
-window[systemcolors] .minimonth-day[selected="true"],
-dialog[systemcolors] .minimonth-day[selected="true"][today="true"],
-window[systemcolors] .minimonth-day[selected="true"][today="true"] {
-  background-color: Highlight;
-  color: HighlightText;
-  border: 1px solid ButtonFace;
+  background-color: var(--mmDaySelectedTodayBackground);
+  border: 1px solid var(--mmDaySelectedTodayBorderColor);
 }
 
 .minimonth-day[busy] {
   font-weight: bold;
 }
 
 .minimonth-day:hover[interactive] {
   cursor: pointer;
-  border: 1px solid Highlight;
+  border: 1px solid var(--mmHighlightBorderColor);
 }
 
 .minimonth-day:active[interactive] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-dialog[systemcolors] .minimonth-day:hover[interactive],
-window[systemcolors] .minimonth-day:hover[interactive],
-dialog[systemcolors] .minimonth-day:active[interactive],
-window[systemcolors] .minimonth-day:active[interactive] {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-  background-clip: padding-box;
+  background-color: var(--mmHighlightBackground);
+  color: var(--mmHighlightColor);
 }
 
 .minimonth-list {
   -moz-padding-start: 1em;
   -moz-padding-end: 1em;
 }
 
 .minimonth-list[current="true"] {
   font-weight: bold;
 }
 
 .minimonth-list:hover {
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: var(--mmHighlightBackground);
+  color: var(--mmHighlightColor);
   cursor: pointer;
 }
--- a/calendar/base/themes/linux/widgets/minimonth.css
+++ b/calendar/base/themes/linux/widgets/minimonth.css
@@ -1,196 +1,5 @@
 /* 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 {
-  background-color: #FFFFFF;
-  border: 0px;
-  padding: 4px;
-}
-
-dialog[systemcolors] minimonth,
-window[systemcolors] minimonth {
-  background-color: -moz-field;
-}
-
-.minimonth-month-box {
-  background-color: #F5F5F6;
-  border: 1px dotted #C0C0C0;
-}
-
-dialog[systemcolors] .minimonth-month-box,
-window[systemcolors] .minimonth-month-box {
-  background-color: -moz-Dialog;
-  border: 1px dotted -moz-Dialog;
-}
-
-.minimonth-month-name {
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-month-name-readonly {
-  text-align: right;
-  font-weight: bold;
-}
-
-.minimonth-year-name {
-  min-width: 4em;
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-year-name-readonly {
-  min-width: 4em;
-  font-weight: bold;
-  -moz-padding-start: 4px;
-}
-
-.minimonth-month-name > .toolbarbutton-text {
-  text-align: right;
-}
-
-.minimonth-month-name > .toolbarbutton-icon,
-.minimonth-year-name > .toolbarbutton-icon {
-  display: none;
-}
-
-.minimonth-nav-btns > .toolbarbutton-icon {
-  margin: 1px;
-}
-
-.minimonth-nav-btns {
-  padding: 0px;
-  max-width: 19px;
-  min-width: 19px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-nav-btns > .toolbarbutton-text  {
-  display: none;
-}
-
-.minimonth-nav-btns[disabled] {
-  opacity: .3;
-}
-
-.minimonth-nav-btns[dir="1"] > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-next;
-}
-
-.minimonth-nav-btns[dir="-1"] > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-previous;
-}
-
-.minimonth-nav-btns[dir="0"] {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-today.svg");
-  max-width: none;
-}
-
-.minimonth-nav-btns[dir="0"]:hover {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-today-hov.svg");
-}
-
-.minimonth-row-header {
-  text-align: center;
-}
-
-.minimonth-day {
-  color: #2E4E73;
-  text-align: center;
-  border: 1px solid #FFFFFF;
-  background-color: #FFFFFF;
-  min-height: 16px;
-}
-
-dialog[systemcolors] .minimonth-day,
-window[systemcolors] .minimonth-day {
-  color: WindowText;
-  border: 1px solid Window;
-  background-color: -moz-field;
-}
-
-.minimonth-day[othermonth="true"] {
-  color: #b2b2b2;
-  background-color: #F0F0F0;
-  border: 1px solid #F0F0F0;
-}
-
-dialog[systemcolors] .minimonth-day[othermonth="true"],
-window[systemcolors] .minimonth-day[othermonth="true"] {
-  color: GrayText;
-  background-color: ButtonFace;
-  border: 1px solid transparent;
-}
-
-.minimonth-day[today="true"] {
-  background-color: #dfeaf4;
-  border: 1px solid #67ACD8;
-}
-
-dialog[systemcolors] .minimonth-day[today="true"],
-window[systemcolors] .minimonth-day[today="true"] {
-  background-color: -moz-field;
-  border: 1px solid Highlight;
-}
-
-.minimonth-day[selected="true"] {
-  background-color: #FFFABC;
-  color: #2E4E73;
-  border: 1px solid #D9C585;
-}
-
-.minimonth-day[selected="true"][today="true"] {
-  background-color: #F2EDB2;
-  border: 1px solid #67ACD8;
- }
- 
-dialog[systemcolors] .minimonth-day[selected="true"],
-window[systemcolors] .minimonth-day[selected="true"],
-dialog[systemcolors] .minimonth-day[selected="true"][today="true"],
-window[systemcolors] .minimonth-day[selected="true"][today="true"] {
-  background-color: Highlight;
-  color: HighlightText;
-  border: 1px solid ButtonFace;
-}
-
-.minimonth-day[busy] {
-  font-weight: bold;
-}
-
-.minimonth-day:hover[interactive] {
-  cursor: pointer;
-  border: 1px solid Highlight;
-}
-
-.minimonth-day:active[interactive] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-dialog[systemcolors] .minimonth-day:hover[interactive],
-window[systemcolors] .minimonth-day:hover[interactive],
-dialog[systemcolors] .minimonth-day:active[interactive],
-window[systemcolors] .minimonth-day:active[interactive] {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-  background-clip: padding-box;
-}
-
-.minimonth-list {
-  -moz-padding-start: 1em;
-  -moz-padding-end: 1em;
-}
-
-.minimonth-list[current="true"] {
-  font-weight: bold;
-}
-
-.minimonth-list:hover {
-  background-color: Highlight;
-  color: HighlightText;
-  cursor: pointer;
-}
+@import url(chrome://calendar-common/skin/widgets/minimonth.css);
--- a/calendar/base/themes/osx/widgets/minimonth.css
+++ b/calendar/base/themes/osx/widgets/minimonth.css
@@ -1,138 +1,5 @@
 /* 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 {
-  background-color: #FFFFFF;
-  border: 0px;
-  padding: 4px;
-}
-
-.minimonth-month-box {
-  background-color: #F5F5F6;
-  border: 1px dotted #C0C0C0;
-}
-
-.minimonth-month-name {
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-month-name-readonly {
-  text-align: right;
-  font-weight: bold;
-}
-
-.minimonth-year-name {
-  min-width: 4em;
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-year-name-readonly {
-  min-width: 4em;
-  font-weight: bold;
-  -moz-padding-start: 4px;
-}
-
-.minimonth-month-name > .toolbarbutton-text {
-  text-align: right;
-}
-
-.minimonth-month-name > .toolbarbutton-icon,
-.minimonth-year-name > .toolbarbutton-icon {
-  display: none;
-}
-
-.minimonth-nav-btns > .toolbarbutton-icon {
-  margin: 1px;
-}
-
-.minimonth-nav-btns {
-  padding: 0px;
-  min-width: 19px;
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-arrow.svg");
-  -moz-user-focus: normal;
-}
-
-.minimonth-nav-btns > .toolbarbutton-text  {
-  display: none;
-}
-
-.minimonth-nav-btns[disabled] {
-  opacity: .3;
-}
-
-.minimonth-nav-btns:-moz-locale-dir(ltr)[dir="-1"],
-.minimonth-nav-btns:-moz-locale-dir(rtl)[dir="1"] {
-  transform: scaleX(-1);
-}
-
-.minimonth-nav-btns[dir="0"] {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-today.svg");
-}
-
-.minimonth-row-header {
-  text-align: center;
-}
-
-.minimonth-day {
-  color: #2E4E73;
-  text-align: center;
-  border: 1px solid #FFFFFF;
-  background-color: #FFFFFF;
-  min-height: 16px;
-}
-
-.minimonth-day[othermonth="true"] {
-  color: #b2b2b2;
-  background-color: #F0F0F0;
-  border: 1px solid #F0F0F0;
-}
-
-.minimonth-day[today="true"] {
-  background-color: #dfeaf4;
-  border: 1px solid #67ACD8;
-}
-
-.minimonth-day[selected="true"] {
-  background-color: #FFFABC;
-  color: #2E4E73;
-  border: 1px solid #D9C585;
-}
-
-.minimonth-day[selected="true"][today="true"] {
-  background-color: #F2EDB2;
-  border: 1px solid #67ACD8;
- }
-
-.minimonth-day[busy] {
-  font-weight: bold;
-}
-
-.minimonth-day:hover[interactive] {
-  cursor: pointer;
-  border: 1px solid Highlight;
-}
-
-.minimonth-day:active[interactive] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-.minimonth-list {
-  -moz-padding-start: 1em;
-  -moz-padding-end: 1em;
-}
-
-.minimonth-list[current="true"] {
-  font-weight: bold;
-}
-
-.minimonth-list:hover {
-  background-color: Highlight;
-  color: HighlightText;
-  cursor: pointer;
-}
+@import url(chrome://calendar-common/skin/widgets/minimonth.css);
--- a/calendar/base/themes/windows/widgets/minimonth.css
+++ b/calendar/base/themes/windows/widgets/minimonth.css
@@ -1,188 +1,5 @@
 /* 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 {
-  background-color: #FFFFFF;
-  border: 0px;
-  padding: 4px;
-}
-
-dialog[systemcolors] minimonth,
-window[systemcolors] minimonth {
-  background-color: -moz-field;
-}
-
-.minimonth-month-box {
-  background-color: #F5F5F6;
-  border: 1px dotted #C0C0C0;
-}
-
-dialog[systemcolors] .minimonth-month-box,
-window[systemcolors] .minimonth-month-box {
-  background-color: -moz-Dialog;
-  border-color: ThreeDShadow;
-}
-
-.minimonth-month-name {
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-month-name-readonly {
-  text-align: right;
-  font-weight: bold;
-}
-
-.minimonth-year-name {
-  min-width: 4em;
-  font-weight: bold;
-  padding: 0px;
-  -moz-user-focus: normal;
-}
-
-.minimonth-year-name-readonly {
-  min-width: 4em;
-  font-weight: bold;
-  -moz-padding-start: 4px;
-}
-
-.minimonth-month-name > .toolbarbutton-text {
-  text-align: right;
-}
-
-.minimonth-month-name > .toolbarbutton-icon,
-.minimonth-year-name > .toolbarbutton-icon {
-  display: none;
-}
-
-.minimonth-nav-btns > .toolbarbutton-icon {
-  margin: 1px;
-}
-
-.minimonth-nav-btns {
-  padding: 0px;
-  min-width: 19px;
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-arrow.svg");
-  -moz-user-focus: normal;
-}
-
-.minimonth-nav-btns > .toolbarbutton-text  {
-  display: none;
-}
-
-.minimonth-nav-btns[disabled] {
-  opacity: .3;
-}
-
-.minimonth-nav-btns:-moz-locale-dir(ltr)[dir="-1"],
-.minimonth-nav-btns:-moz-locale-dir(rtl)[dir="1"] {
-  transform: scaleX(-1);
-}
-
-.minimonth-nav-btns[dir="0"] {
-  list-style-image: url("chrome://calendar-common/skin/widgets/nav-today.svg");
-}
-
-.minimonth-row-header {
-  text-align: center;
-}
-
-.minimonth-day {
-  color: #2E4E73;
-  text-align: center;
-  border: 1px solid #FFFFFF;
-  background-color: #FFFFFF;
-  min-height: 16px;
-}
-
-dialog[systemcolors] .minimonth-day,
-window[systemcolors] .minimonth-day {
-  color: WindowText;
-  border: 1px solid Window;
-  background-color: -moz-field;
-}
-
-.minimonth-day[othermonth="true"] {
-  color: #b2b2b2;
-  background-color: #F0F0F0;
-  border: 1px solid #F0F0F0;
-}
-
-dialog[systemcolors] .minimonth-day[othermonth="true"],
-window[systemcolors] .minimonth-day[othermonth="true"] {
-  color: GrayText;
-  background-color: ButtonFace;
-  border: 1px solid transparent;
-}
-
-.minimonth-day[today="true"] {
-  background-color: #dfeaf4;
-  border: 1px solid #67ACD8;
-}
-
-dialog[systemcolors] .minimonth-day[today="true"],
-window[systemcolors] .minimonth-day[today="true"] {
-  background-color: -moz-field;
-  border: 1px solid Highlight;
-}
-
-.minimonth-day[selected="true"] {
-  background-color: #FFFABC;
-  color: #2E4E73;
-  border: 1px solid #D9C585;
-}
-
-.minimonth-day[selected="true"][today="true"] {
-  background-color: #F2EDB2;
-  border: 1px solid #67ACD8;
- }
-
-dialog[systemcolors] .minimonth-day[selected="true"],
-window[systemcolors] .minimonth-day[selected="true"],
-dialog[systemcolors] .minimonth-day[selected="true"][today="true"],
-window[systemcolors] .minimonth-day[selected="true"][today="true"] {
-  background-color: Highlight;
-  color: HighlightText;
-  border: 1px solid ButtonFace;
-}
-
-.minimonth-day[busy] {
-  font-weight: bold;
-}
-
-.minimonth-day:hover[interactive] {
-  cursor: pointer;
-  border: 1px solid Highlight;
-}
-
-.minimonth-day:active[interactive] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-dialog[systemcolors] .minimonth-day:hover[interactive],
-window[systemcolors] .minimonth-day:hover[interactive],
-dialog[systemcolors] .minimonth-day:active[interactive],
-window[systemcolors] .minimonth-day:active[interactive] {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-  background-clip: padding-box;
-}
-
-.minimonth-list {
-  -moz-padding-start: 1em;
-  -moz-padding-end: 1em;
-}
-
-.minimonth-list[current="true"] {
-  font-weight: bold;
-}
-
-.minimonth-list:hover {
-  background-color: Highlight;
-  color: HighlightText;
-  cursor: pointer;
-}
+@import url(chrome://calendar-common/skin/widgets/minimonth.css);