feat: add sass mixins for easier theming

Closes #858

.prettierignore

@@ -3,3 +3,4 @@
 *.css
 CHANGELOG.md
 build-tool-examples
+projects/angular-calendar/src/variables.scss

.stylelintrc

@@ -1,6 +1,10 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier"
+  ],
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "at-rule-no-unknown": null
   }
 }

package.json

@@ -116,6 +116,7 @@
     "sinon-chai": "^3.3.0",
     "standard-version": "^5.0.0",
     "stylelint": "^9.10.1",
+    "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.2.0",
     "ts-node": "^8.0.2",
     "tsickle": "0.34.0",

projects/angular-calendar/src/angular-calendar.scss

@@ -2,3 +2,10 @@
 @import './modules/week/calendar-week-view';
 @import './modules/day/calendar-day-view';
 @import './modules/common/calendar-tooltip';
+
+@mixin cal-theme($overrides) {
+  @include cal-month-view-theme($overrides);
+  @include cal-week-view-theme($overrides);
+  @include cal-day-view-theme($overrides);
+  @include cal-tooltip-theme($overrides);
+}

projects/angular-calendar/src/modules/common/calendar-tooltip.scss

@@ -1,3 +1,33 @@
+@import '../../variables';
+
+$cal-tooltip-vars: () !default;
+$cal-tooltip-vars: map-merge($cal-vars, $cal-tooltip-vars);
+
+@mixin cal-tooltip-theme($overrides) {
+  $theme: map-merge($cal-tooltip-vars, $overrides);
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    border-top-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    border-right-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    border-bottom-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    border-left-color: map-get($theme, black);
+  }
+
+  .cal-tooltip-inner {
+    color: map-get($theme, white);
+    background-color: map-get($theme, black);
+  }
+}
+
 .cal-tooltip {
   position: absolute;
   z-index: 1070;
@@ -29,7 +59,6 @@
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
-  border-top-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-right {
@@ -42,7 +71,6 @@
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-bottom {
@@ -55,7 +83,6 @@
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-left {
@@ -68,15 +95,12 @@
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000;
 }
 
 .cal-tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: #fff;
   text-align: center;
-  background-color: #000;
   border-radius: 0.25rem;
 }
 
@@ -87,3 +111,5 @@
   border-color: transparent;
   border-style: solid;
 }
+
+@include cal-tooltip-theme($cal-tooltip-vars);

projects/angular-calendar/src/modules/day/calendar-day-view.scss

@@ -1,15 +1,48 @@
+@import '../../variables';
+
+$cal-day-view-vars: () !default;
+$cal-day-view-vars: map-merge($cal-vars, $cal-day-view-vars);
+
+@mixin cal-day-view-theme($overrides) {
+  $theme: map-merge($cal-day-view-vars, $overrides);
+
+  .cal-day-view {
+    background-color: map-get($theme, bg-primary);
+
+    .cal-hour-rows {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-hour:nth-child(odd) {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-hour-segment:hover,
+    .cal-drag-over .cal-hour-segment {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-color-secondary);
+      border-color: map-get($theme, event-color-primary);
+      color: map-get($theme, event-color-primary);
+    }
+  }
+}
+
 .cal-day-view {
   .cal-hour-rows {
     width: 100%;
-    border: solid 1px #e1e1e1;
-    overflow-x: scroll;
+    border: solid 1px;
+    overflow-x: auto;
     position: relative;
   }
 
-  .cal-hour:nth-child(odd) {
-    background-color: #fafafa;
-  }
-
   /* stylelint-disable-next-line selector-type-no-unknown */
   mwl-calendar-day-view-hour-segment, /* fix for https://github.com/mattlewis92/angular-calendar/issues/260*/
   .cal-hour-segment {
@@ -22,14 +55,16 @@
 
   .cal-hour:not(:last-child) .cal-hour-segment,
   .cal-hour:last-child :not(:last-child) .cal-hour-segment {
-    border-bottom: thin dashed #e1e1e1;
+    border-bottom: thin dashed;
   }
 
   .cal-time {
     font-weight: bold;
-    padding-top: 5px;
     width: 70px;
-    text-align: center;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .cal-hour-segment.cal-after-hour-start {
@@ -38,11 +73,6 @@
     }
   }
 
-  .cal-hour-segment:hover,
-  .cal-drag-over .cal-hour-segment {
-    background-color: #ededed;
-  }
-
   .cal-drag-active .cal-hour-segment {
     pointer-events: none;
   }
@@ -60,9 +90,7 @@
   .cal-event {
     padding: 5px;
     font-size: 12px;
-    background-color: #d1e8ff;
-    border: 1px solid #1e90ff;
-    color: #1e90ff;
+    border: 1px solid;
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -107,3 +135,5 @@
     }
   }
 }
+
+@include cal-day-view-theme($cal-day-view-vars);

projects/angular-calendar/src/modules/month/calendar-month-view.scss

@@ -1,13 +1,72 @@
+@import '../../variables';
+
+$cal-month-view-vars: () !default;
+$cal-month-view-vars: map-merge($cal-vars, $cal-month-view-vars);
+
+@mixin cal-month-view-theme($overrides) {
+  $theme: map-merge($cal-month-view-vars, $overrides);
+
+  .cal-month-view {
+    background-color: map-get($theme, bg-primary);
+
+    .cal-cell-row:hover {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-cell-row .cal-cell:hover,
+    .cal-cell.cal-has-events.cal-open {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-days {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-day-cell:not(:last-child) {
+      border-right-color: map-get($theme, border-color);
+    }
+
+    .cal-days .cal-cell-row {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-day-badge {
+      background-color: map-get($theme, badge-color);
+      color: map-get($theme, white);
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-color-primary);
+      border-color: map-get($theme, event-color-secondary);
+      color: map-get($theme, white);
+    }
+
+    .cal-day-cell.cal-weekend .cal-day-number {
+      color: map-get($theme, weekend-color);
+    }
+
+    .cal-day-cell.cal-today {
+      background-color: map-get($theme, today-bg);
+    }
+
+    .cal-day-cell.cal-drag-over {
+      background-color: darken(map-get($theme, bg-active), 5%) !important;
+    }
+
+    .cal-open-day-events {
+      color: map-get($theme, white);
+      background-color: map-get($theme, gray);
+      box-shadow: inset 0 0 15px 0 rgba(map-get($theme, black), 0.5);
+    }
+  }
+}
+
 .cal-month-view {
   .cal-header {
     text-align: center;
     font-weight: bolder;
   }
 
-  .cal-cell-row:hover {
-    background-color: #fafafa;
-  }
-
   .cal-header .cal-cell {
     padding: 5px 0;
     overflow: hidden;
@@ -16,13 +75,8 @@
     white-space: nowrap;
   }
 
-  .cal-cell-row .cal-cell:hover,
-  .cal-cell.cal-has-events.cal-open {
-    background-color: #ededed;
-  }
-
   .cal-days {
-    border: 1px solid #e1e1e1;
+    border: 1px solid;
     border-bottom: 0;
   }
 
@@ -53,24 +107,22 @@
   }
 
   .cal-day-cell:not(:last-child) {
-    border-right: 1px solid #e1e1e1;
+    border-right: 1px solid;
   }
 
   .cal-days .cal-cell-row {
-    border-bottom: 1px solid #e1e1e1;
+    border-bottom: 1px solid;
   }
 
   .cal-day-badge {
     margin-top: 18px;
     margin-left: 10px;
-    background-color: #b94a48;
     display: inline-block;
     min-width: 10px;
     padding: 3px 7px;
     font-size: 12px;
     font-weight: 700;
     line-height: 1;
-    color: white;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -102,9 +154,6 @@
     border-radius: 50%;
     display: inline-block;
     margin: 2px;
-    background-color: #1e90ff;
-    border-color: #d1e8ff;
-    color: #fff;
   }
 
   .cal-day-cell.cal-in-month.cal-has-events {
@@ -116,27 +165,12 @@
     cursor: default;
   }
 
-  .cal-day-cell.cal-weekend .cal-day-number {
-    color: darkred;
-  }
-
-  .cal-day-cell.cal-today {
-    background-color: #e8fde7;
-  }
-
   .cal-day-cell.cal-today .cal-day-number {
     font-size: 1.9em;
   }
 
-  .cal-day-cell.cal-drag-over {
-    background-color: darken(#ededed, 5%) !important;
-  }
-
   .cal-open-day-events {
     padding: 15px;
-    color: white;
-    background-color: #555;
-    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
   }
 
   .cal-open-day-events .cal-event {
@@ -167,3 +201,5 @@
     }
   }
 }
+
+@include cal-month-view-theme($cal-month-view-vars);