feat: added dbxCalendar Styling

- Now styled with relation to the rest of the dbx-web styling

apps/demo/project.json

@@ -40,7 +40,7 @@
         "stylePreprocessorOptions": {
           "includePaths": ["packages"]
         },
-        "styles": ["apps/demo/src/styles.scss", "node_modules/angular-calendar/css/angular-calendar.css"],
+        "styles": ["apps/demo/src/styles.scss"],
         "scripts": []
       },
       "configurations": {

apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts

@@ -21,41 +21,46 @@ export class DocExtensionCalendarComponent implements OnInit {
   constructor(readonly calendarStore: DbxCalendarStore<TestCalendarEventData>) {}
 
   ngOnInit(): void {
-    const now = new Date();
-    const days = 90;
-    const startsAt = setHours(addMonths(now, -1), 12);
-
-    const timing = dateBlockTiming({ startsAt, duration: 10 }, days);
-    const eventData: TestCalendarEventData[] = range(0, days).map((i) => {
-      const event: TestCalendarEventData = {
-        i,
-        value: `${i}`
-      };
+    function makeEvents(name: string, iFilter = 1, minutes = 90) {
+      const now = new Date();
+      const days = 90;
+      const startsAt = setHours(addMonths(now, -1), 12);
 
-      return event;
-    });
-
-    const dateBlockCollection: DateBlockCollection<TestCalendarEventData> = {
-      timing,
-      blocks: eventData
-    };
-
-    const spans = expandDateBlockCollection(dateBlockCollection);
-    const events: CalendarEvent<TestCalendarEventData>[] = spans
-      .filter((x) => x.i % 2)
-      .map((x) => {
-        const { start, end } = durationSpanToDateRange(x);
-        const title = `Event ${x.i}`;
-
-        return {
-          id: x.i,
-          title,
-          start,
-          end,
-          meta: x
+      const timing = dateBlockTiming({ startsAt, duration: minutes }, days);
+      const eventData: TestCalendarEventData[] = range(0, days).map((i) => {
+        const event: TestCalendarEventData = {
+          i,
+          value: `${i}`
         };
+
+        return event;
       });
 
+      const dateBlockCollection: DateBlockCollection<TestCalendarEventData> = {
+        timing,
+        blocks: eventData
+      };
+
+      const spans = expandDateBlockCollection(dateBlockCollection);
+      const events: CalendarEvent<TestCalendarEventData>[] = spans
+        .filter((x) => x.i % iFilter)
+        .map((x) => {
+          const { start, end } = durationSpanToDateRange(x);
+          const title = `Event ${name} ${x.i}`;
+
+          return {
+            id: x.i,
+            title,
+            start,
+            end,
+            meta: x
+          };
+        });
+
+      return events;
+    }
+
+    const events = [...makeEvents('A', 1), ...makeEvents('B', 2, 120), ...makeEvents('C', 3, 200), ...makeEvents('D', 5, 360), ...makeEvents('E', 5, 600), ...makeEvents('F', 6, 30), ...makeEvents('G', 7, 30)];
     this.calendarStore.setEvents(events);
   }
 }

apps/demo/src/style/_doc.scss

@@ -84,6 +84,7 @@ $doc-mat-theme: mat.define-light-theme(
     typography: null
   )
 ); // NOTE: setting density and typography to null is important!
+
 $doc-dbx-theme-with-banner-config: dbx.quick-define-dbx-config-via-banners(variables.$app-top-banner-height);
 $doc-theme: dbx.define-dbx-theme-config($doc-mat-theme, $doc-dbx-theme-with-banner-config);
 $doc-form-theme: dbx-form.define-dbx-form-theme-config($doc-theme);
@@ -96,17 +97,22 @@ This mixin creates the doc-theme components and elements for @angular/material a
   @include dbx-form.theme($root-selector, $doc-form-theme);
 }
 
+$dark-doc-primary: mat.define-palette(mat.$purple-palette);
+$dark-doc-accent: mat.define-palette(mat.$green-palette);
+$dark-doc-warn: mat.define-palette(mat.$red-palette);
 $dark-doc-mat-theme: mat.define-dark-theme(
   (
     color: (
-      primary: $doc-primary,
-      accent: $doc-accent,
-      warn: $doc-warn
+      primary: $dark-doc-primary,
+      accent: $dark-doc-accent,
+      warn: $dark-doc-warn
     ),
     density: null,
     typography: null
   )
-); // NOTE: setting density and typography to null is important!
+);
+
+// NOTE: setting density and typography to null is important!
 $dark-doc-theme: dbx.define-dbx-theme-config($dark-doc-mat-theme, $doc-dbx-theme-with-banner-config);
 $dark-doc-form-theme: dbx-form.define-dbx-form-theme-config($dark-doc-theme);
 

packages/dbx-web/src/lib/extension/calendar/_calendar.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../style/theming';
+@use './style/angular-calendar' as calendar;
 
 // MARK: Variables
 $calendar-header-height: theming.$content-navbar-height;
@@ -8,6 +10,9 @@ $calendar-scrollable-content-bottom-padding: 12px;
 
 // MARK: Mixin
 @mixin core() {
+  @include calendar.cal-core();
+  @include calendar.cal-theme(());
+
   .dbx-calendar {
     .dbx-calendar-title {
       font-weight: bold;
@@ -34,13 +39,50 @@ $calendar-scrollable-content-bottom-padding: 12px;
 }
 
 @mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+
+  $background-color: theming.get-color-from-palette($background, 'background');
+  $hover-color: theming.get-color-from-palette($background, 'hover');
+  $focused-color: theming.get-color-from-palette($background, 'focused-button');
+  $border-color: theming.get-color-from-palette($foreground, 'divider');
+  $text-color: theming.get-color-from-palette($foreground, 'text');
+
+  $event-icon-color: theming.get-color-from-palette($primary, 600);
+  $event-bg-color: theming.get-color-from-palette($primary, 800);
+  $event-text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $weekend-color: theming.get-color-from-palette($accent, 500);
+  $badge-color: theming.get-color-from-palette($accent, 500);
+  $current-time-marker-color: theming.get-color-from-palette($accent, 400);
+
+  // @debug $foreground;
+  @debug $background;
+
+  #{calendar.$cal-event-icon-color-var}: $event-icon-color; // text/border color
+  #{calendar.$cal-event-color-primary-var}: $event-text-color; // text/border color
+  #{calendar.$cal-event-color-secondary-var}: $event-bg-color; // event background color
+  #{calendar.$cal-border-color-var}: $border-color;
+  #{calendar.$cal-bg-primary-var}: $background-color;
+  #{calendar.$cal-bg-secondary-var}: $hover-color;
+  #{calendar.$cal-bg-active-var}: $hover-color;
+  #{calendar.$cal-today-bg-var}: $hover-color;
+  #{calendar.$cal-weekend-color-var}: $weekend-color;
+  #{calendar.$cal-badge-color-var}: $badge-color;
+  #{calendar.$cal-current-time-marker-color-var}: $current-time-marker-color;
+  #{calendar.$cal-white-var}: #fff;
+  #{calendar.$cal-gray-var}: #555;
+  #{calendar.$cal-black-var}: #000;
+  #{calendar.$cal-gradient-var}: inset 0 0 10px 0 rgba($background-color, 0.2);
 }
 
 @mixin typography($typography-config) {
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action-snackbar') {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-calendar') {
     $color: theming.get-color-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 

packages/dbx-web/src/lib/extension/calendar/style/_angular-calendar.scss

@@ -0,0 +1,23 @@
+@forward './variables';
+
+@use './common/calendar-tooltip' as tooltip;
+@use './day/calendar-day-view' as day;
+@use './week/calendar-week-view' as week;
+@use './month/calendar-month-view' as month;
+
+@mixin cal-core() {
+  @include tooltip.cal-tooltip-core();
+  @include day.cal-day-view-core();
+  @include week.cal-week-view-core();
+  @include month.cal-month-view-core();
+}
+
+@mixin cal-theme($overrides: null) {
+  @if ($overrides == null) {
+    $overrides: ();
+  }
+
+  @include tooltip.cal-tooltip-theme($overrides);
+  @include month.cal-month-view-theme($overrides);
+  @include week.cal-week-view-theme($overrides);
+}

packages/dbx-web/src/lib/extension/calendar/style/_variables.scss

@@ -0,0 +1,72 @@
+$cal-event-icon-color-var: --cal-event-icon-color;
+$cal-event-color-primary-var: --cal-event-color-primary;
+$cal-event-color-secondary-var: --cal-event-color-secondary;
+$cal-border-color-var: --cal-border-color;
+$cal-bg-primary-var: --cal-bg-primary;
+$cal-bg-secondary-var: --cal-bg-secondary;
+$cal-bg-active-var: --cal-bg-active;
+$cal-bg-active-dragover-var: --cal-bg-active-dragover;
+$cal-today-bg-var: --cal-today-bg;
+$cal-weekend-color-var: --cal-weekend-color;
+$cal-badge-color-var: --cal-badge-color;
+$cal-current-time-marker-color-var: --cal-current-time-marker-color;
+$cal-white-var: --cal-white;
+$cal-gray-var: --cal-gray;
+$cal-black-var: --cal-black;
+$cal-gradient-var: --cal-gradient;
+
+$cal-event-icon-color: var($cal-event-icon-color-var);
+$cal-event-color-primary: var($cal-event-color-primary-var);
+$cal-event-color-secondary: var($cal-event-color-secondary-var);
+$cal-border-color: var($cal-border-color-var);
+$cal-bg-primary: var($cal-bg-primary-var);
+$cal-bg-secondary: var($cal-bg-secondary-var);
+$cal-bg-active: var($cal-bg-active-var);
+$cal-bg-active-dragover: var($cal-bg-active-dragover-var);
+$cal-today-bg: var($cal-today-bg-var);
+$cal-weekend-color: var($cal-weekend-color-var);
+$cal-badge-color: var($cal-badge-color-var);
+$cal-current-time-marker-color: var($cal-current-time-marker-color-var);
+$cal-white: var($cal-white-var);
+$cal-gray: var($cal-gray-var);
+$cal-black: var($cal-black-var);
+$cal-gradient: var($cal-gradient-var);
+
+$cal-hint-opacity: 0.7;
+$cal-out-month-hint-opacity: 0.3;
+
+$cal-vars: () !default;
+$cal-vars: map-merge(
+  (
+    event-icon-color: $cal-event-icon-color,
+    // the default event primary color if not set on the event color object
+    event-color-primary: $cal-event-color-primary,
+    // the default event secondary color if not set on the event color object
+    event-color-secondary: $cal-event-color-secondary,
+    // the border color used between cells
+    border-color: $cal-border-color,
+    // the primary background of each component
+    bg-primary: $cal-bg-primary,
+    // the secondary background, used for alternating rows on the day and week views
+    bg-secondary: $cal-bg-secondary,
+    // the color used when hovering over cells and headers
+    bg-active: $cal-bg-active,
+    // the background color to mark today in the week view header
+    today-bg: $cal-today-bg,
+    // the color used to indicate a day is a weekend
+    weekend-color: $cal-weekend-color,
+    // the badge background color on the month view
+    badge-color: $cal-badge-color,
+    // the current time marker color on the week and day view
+    current-time-marker-color: $cal-current-time-marker-color,
+    // a standard white color used for tooltip text and month view event titles
+    white: $cal-white,
+    // a standard gray color used for the background color of the open month view events box
+    gray: $cal-gray,
+    // a standard black color used as the tooltip background and the gradient color of the open month view events
+    black: $cal-black,
+    // box shadow
+    gradient: $cal-gradient
+  ),
+  $cal-vars
+);