@beacon-interactive-systems-llc/beacon-platform-ui 19.2.20 → 19.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.2.20",
+  "version": "19.3.0",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_fullcalendar.scss

@@ -12,12 +12,13 @@ $platform_fullcalendar_contrasts: (
     fullcalendarOutsideDateLabel: $beacon-gray-300,
     fullcalendarWeekendDateBackground: $beacon-gray-200,
     fullcalendarWeekendDateLabel: $beacon-gray-300,
-    fullcalendarTopEventBackground: $beacon-cyan-100,
+    fullcalendarTopEventBackground: $beacon-dark-blue-200,
     fullcalendarTopEventAccent: $beacon-cyan-600,
     fullcalendarTopEventList: $beacon-gray-50,
     fullcalendarSubEventBackground: $beacon-orange-100,
     fullcalendarSubEventAccent: $beacon-orange-500,
     fullcalendarSubEventList: $beacon-gray-50,
+    fullcalendarEventText: $beacon-black,
     fullcalendarAddButton: $beacon-blue-200,
     fullcalendarAddButtonText: $beacon-white
   ),
@@ -37,9 +38,10 @@ $platform_fullcalendar_contrasts: (
     fullcalendarTopEventBackground: $beacon-dark-blue-300,
     fullcalendarTopEventAccent: $beacon-dark-blue-500,
     fullcalendarTopEventList: $beacon-gray-700,
-    fullcalendarSubEventBackground: $beacon-orange-400,
+    fullcalendarSubEventBackground: $beacon-orange-200,
     fullcalendarSubEventAccent: $beacon-orange-600,
     fullcalendarSubEventList: $beacon-gray-600,
+    fullcalendarEventText: $beacon-black,
     fullcalendarAddButton: $beacon-blue-200,
     fullcalendarAddButtonText: $beacon-gray-300
   ),
@@ -62,6 +64,7 @@ $platform_fullcalendar_contrasts: (
     fullcalendarSubEventBackground: $highcontrast-bright-orange-100,
     fullcalendarSubEventAccent: $highcontrast-bright-orange-300,
     fullcalendarSubEventList: $beacon-gray-700,
+    fullcalendarEventText: $beacon-black,
     fullcalendarAddButton: $highcontrast-bright-blue-200,
     fullcalendarAddButtonText: $beacon-white
   )
@@ -154,9 +157,11 @@ $platform_fullcalendar_contrasts: (
     }
 
     &--label {
+      @include font-color--blue;
       @include themify($platform_fullcalendar_contrasts) {
         border: 0.5px solid apply('fullcalendarBorder');
       }
+      font-weight: bold;
       padding: 0px 12px;
     }
 
@@ -185,7 +190,7 @@ $platform_fullcalendar_contrasts: (
 }
 
 // Styling for text header day labels (SUN, MON, etc) and date numbers
-.fc-col-header-cell-cushion, .fc-daygrid-day-number {
+.fc-col-header-cell-cushion, .fc-daygrid-day-number, .fc-timegrid-slot-label-cushion, .fc-timegrid-axis-cushion {
   @include themify($platform_fullcalendar_contrasts) {
     color: apply('fullcalendarDateLabel');
   }
@@ -202,7 +207,7 @@ $platform_fullcalendar_contrasts: (
 }
 
 // Style the date boxes
-.fc .fc-daygrid-day {
+.fc .fc-daygrid .fc-daygrid-day {
   height: 116px !important;
   .fc-daygrid-day-frame {
     padding: 8px;
@@ -278,25 +283,8 @@ $platform_fullcalendar_contrasts: (
   margin-bottom: 8px;
 }
 
-.fc .fc-event.is-subevent {
-  margin-left: 12px;
-}
-
 .fc-daygrid-event {
-  @include themify($platform_fullcalendar_contrasts) {
-    background: apply('fullcalendarTopEventBackground');
-    border: 1px solid apply('fullcalendarTopEventAccent');
-
-    &.is-subevent {
-      background: apply('fullcalendarSubEventBackground');
-      border: 1px solid apply('fullcalendarSubEventAccent');
-
-      span {
-        color: $beacon-black;
-      }
-    }
-  }
-  padding: 2px 8px;
+  min-height: 22px;
 
   &:not(.fc-daygrid-block-event) {
     display: flex;
@@ -317,9 +305,39 @@ $platform_fullcalendar_contrasts: (
     top: -6px;
   }
 
+  .fc-event-main {
+    @include themify($platform_fullcalendar_contrasts) {
+      color: apply('fullcalendarTopEventAccent');
+    }
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+  }
+
+  &.fc-event.is-subevent {
+    margin-left: 16px;
+  }
+}
+
+.fc-daygrid-event, .fc-timegrid-event {
+  @include themify($platform_fullcalendar_contrasts) {
+    background: apply('fullcalendarTopEventBackground');
+
+    &.is-subevent {
+      background: apply('fullcalendarSubEventBackground');
+
+      span {
+        color: apply('fullcalendarEventText');
+      }
+    }
+  }
+  border: none;
+  border-radius: 5px;
+  padding: 2px 8px;
+
   span {
     @include themify($platform_fullcalendar_contrasts) {
-      color: $beacon-black;
+      color: apply('fullcalendarEventText');
     }
     font-size: 12px;
 
@@ -331,14 +349,26 @@ $platform_fullcalendar_contrasts: (
       justify-self: start;
     }
   }
+}
 
-  .fc-event-main {
+.fc-timegrid-event {
+  box-shadow: none !important;
+  margin-right: 4px;
+
+  .fc-timegrid-slot-label-cushion {
     @include themify($platform_fullcalendar_contrasts) {
-      color: apply('fullcalendarTopEventAccent');
+      color: apply('fullcalendarDateLabel');
     }
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
+  }
+
+  .timegrid-time {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: clip;
+  }
+
+  &.fc-timegrid-event-short .timegrid-time{
+    display: none;
   }
 }
 

package/styles/_typography.scss

@@ -46,8 +46,8 @@ $platform_text_contrasts: (
     textDefaultMuted: $beacon-white,
     textDefaultSemiMuted: $beacon-white,
     textDefaultInvert: $beacon-black,
-    textBlue: $beacon-dark-blue-300,
-    textBlueLight: $beacon-blue-200,
+    textBlue: $highcontrast-bright-blue-200,
+    textBlueLight: $highcontrast-bright-blue-100,
     textBlueDark: $highcontrast-bright-blue-300,
     textBlueHighlight: $highcontrast-bright-blue-200,
     textBlueDarkHighlight: $beacon-dark-blue-400,