@beacon-interactive-systems-llc/beacon-platform-ui 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",

package/styles/_calendar.scss

@@ -5,9 +5,9 @@ $platform_calendar_contrasts: (
     calendarDateLabel: $beacon-gray-500,
     calendarGreen: $beacon-green-500,
     calendarGreenText: $beacon-white,
-    calendarRed: $beacon-orange-500
+    calendarRed: $beacon-orange-500,
     calendarRedText: $beacon-white,
-    calendarBlue: $beacon-cyan-500
+    calendarBlue: $beacon-cyan-500,
     calendarBlueText: $beacon-white,
     calendarYellow: $beacon-yellow-400,
     calendarYellowText: $beacon-black,
@@ -22,9 +22,9 @@ $platform_calendar_contrasts: (
     calendarDateLabel: $beacon-gray-300,
     calendarGreen: $beacon-green-600,
     calendarGreenText: $beacon-gray-300,
-    calendarRed: $beacon-orange-700
+    calendarRed: $beacon-orange-700,
     calendarRedText: $beacon-gray-300,
-    calendarBlue: $beacon-cyan-600
+    calendarBlue: $beacon-cyan-600,
     calendarBlueText: $beacon-gray-300,
     calendarYellow: $beacon-yellow-600,
     calendarYellowText: $beacon-gray-600,
@@ -39,9 +39,9 @@ $platform_calendar_contrasts: (
     calendarDateLabel: $beacon-white,
     calendarGreen: $highcontrast-bright-green-300,
     calendarGreenText: $beacon-black,
-    calendarRed: $highcontrast-bright-orange-300
+    calendarRed: $highcontrast-bright-orange-300,
     calendarRedText: $beacon-black,
-    calendarBlue: $highcontrast-bright-blue-100
+    calendarBlue: $highcontrast-bright-blue-100,
     calendarBlueText: $beacon-black,
     calendarYellow: $highcontrast-bright-yellow-100,
     calendarYellowText: $beacon-black,
@@ -161,7 +161,7 @@ $platform_calendar_contrasts: (
           padding: 0 0.25rem;
           margin-bottom: 0.25rem;
 
-          @include themify($platform_calendar_constrasts) {
+          @include themify($platform_calendar_contrasts) {
             &.green {
               @include event-tile-styles(apply('calendarGreen'), apply('calendarGreenText'));
             }
@@ -213,7 +213,7 @@ $platform_calendar_contrasts: (
       margin-top: 1rem;
       padding: 0.5rem;
 
-      @include themify($platform_calendar_constrasts) {
+      @include themify($platform_calendar_contrasts) {
         &.green {
           @include weekly-preview-styles(apply('calendarGreen'));
         }

package/styles/_forms.scss

@@ -24,7 +24,7 @@ $platform_form_contrasts: (
   highcontrast: (
     formText: $beacon-white,
     formInputBackground: $beacon-gray-700,
-    formInputBottomBorder: $highcontrast-bright-yellow-300,
+    formInputBottomBorder: $highcontrast-bright-yellow-200,
     formInputSurroundBorder: $beacon-white,
     formControlFocus: $highcontrast-bright-blue-100,
     formInvalid: $highcontrast-bright-orange-300,

package/styles/_keyframes.scss

@@ -13,18 +13,17 @@ $platform_keyframe_contrasts: (
   )
 );
 
+
 @keyframes pulse {
-  @include themify($platform_keyframe_contrasts) {
-    0% {
-      background-color: apply('pulsePrimary');
-    }
+  0% {
+    background-color: $beacon-green-500;
+  }
 
-    50% {
-      background-color: apply('pulseSecondary');
-    }
+  50% {
+    background-color: $beacon-green-400;
+  }
 
-    100% {
-      background-color: apply('pulsePrimary');
-    }
+  100% {
+    background-color: $beacon-green-500;
   }
 }

package/styles/_material-tabs.scss

@@ -2,21 +2,21 @@ $platform_tab_contrasts: (
   light: (
     tabBackground: $beacon-gray-100,
     tabAccent: $beacon-cyan-600,
-    tabBorderBottom: $beacon-dark-blue-300
+    tabBorderBottom: $beacon-dark-blue-300,
     tabLabel: $beacon-dark-blue-300,
     tabLabelActive: $beacon-dark-blue-400
   ),
   dark: (
     tabBackground: $beacon-gray-600,
     tabAccent: $beacon-cyan-400,
-    tabBorderBottom: $beacon-dark-blue-400
+    tabBorderBottom: $beacon-dark-blue-400,
     tabLabel: $beacon-dark-blue-400,
     tabLabelActive: $beacon-dark-blue-200
   ),
   highcontrast: (
     tabBackground: $beacon-gray-600,
     tabAccent: $beacon-cyan-400,
-    tabBorderBottom: $beacon-dark-blue-400
+    tabBorderBottom: $beacon-dark-blue-400,
     tabLabel: $beacon-dark-blue-400,
     tabLabelActive: $beacon-dark-blue-200
   )

package/styles/_palette.scss

@@ -146,20 +146,3 @@ $platform-graytone-300: #C4C4C4;
 $platform-graytone-400: #707070;
 $platform-graytone-500: #4B4A48;
 $platform-graytone-600: #2D2926;
-
-$platform-border-light: $platform-graytone-300;
-$platform-border-dark: $platform-graytone-400;
-$platform-bg-light-blue: $platform-blue-100;
-$platform-bg-white: #FCFCFC;
-
-.platform-bg--light {
-  background: $platform-graytone-100;
-}
-
-.platform-bg--dark {
-  background: $platform-graytone-200;
-}
-
-.platform-bg--light-blue {
-  background: $platform-bg-light-blue;
-}

package/styles/_tables.scss

@@ -9,10 +9,10 @@ $platform_table_contrasts: (
     tableBody: $beacon-white,
     tableBodyAlt: $beacon-gray-100,
     tableBodyText: $beacon-black,
-    tableShadow: 0 0px 10px 0px $beacon-white,
+    tableShadow: (0 0px 10px 0px $beacon-white,
                   0 20px 0px 0px $beacon-white,
                   0 0 0 0 $beacon-white,
-                  0 20px 8px -2px $beacon-dark-blue-300
+                  0 20px 8px -2px $beacon-dark-blue-300)
   ),
   dark: (
     tableBorder: $beacon-dark-blue-200,

package/styles/_toast.scss

@@ -1,7 +1,7 @@
 $platform_notification_contrasts: (
   light: (
     notificationClose: $beacon-gray-400,
-    notificationShadow: 0px 2px 4px $beacon-gray-300
+    notificationShadow: 0px 2px 4px $beacon-gray-300,
     notificationSuccess: $beacon-green-100,
     notificationSuccessText: $beacon-black,
     notificationSuccessBorder: $beacon-green-300,
@@ -21,7 +21,7 @@ $platform_notification_contrasts: (
   ),
   dark: (
     notificationClose: $beacon-gray-300,
-    notificationShadow: none
+    notificationShadow: none,
     notificationSuccess: $beacon-green-500,
     notificationSuccessText: $beacon-black,
     notificationSuccessBorder: $beacon-green-700,
@@ -41,7 +41,7 @@ $platform_notification_contrasts: (
   ),
   highcontrast: (
     notificationClose: $beacon-black,
-    notificationShadow: none
+    notificationShadow: none,
     notificationSuccess: $beacon-black,
     notificationSuccessText: $highcontrast-bright-green-200,
     notificationSuccessBorder: $highcontrast-bright-green-200,
@@ -82,7 +82,6 @@ $platform_notification_contrasts: (
 .toast-container .ngx-toastr {
   background-image: none;
   border-radius: 0;
-  color: $platform-black;
   display: flex;
   flex-direction: column;
   width: 500px;
@@ -168,6 +167,5 @@ $platform_notification_contrasts: (
   @include themify($platform_notification_contrasts) {
     color: apply('notificationWarningAccent');
   }
-  color: $platform-orange-500;
   content: "error";
 }

package/styles/_typography.scss

@@ -42,7 +42,7 @@ $platform_text_contrasts: (
     textCyan: $highcontrast-bright-blue-100,
     textCyanDark: $highcontrast-bright-blue-200,
     textGreen: $highcontrast-bright-green-200,
-    textGreenDark: $hicontrast-bright-green-300,
+    textGreenDark: $highcontrast-bright-green-300,
     textRed: $highcontrast-bright-orange-300,
     textYellow: $highcontrast-bright-yellow-200,
     textOrange: $highcontrast-bright-orange-100

package/styles/styles.scss

@@ -11,7 +11,6 @@
 @import "buttons";
 @import "calendar";
 @import "checkboxes";
-@import "darkmode";
 @import "filters";
 @import "forms";
 @import "layout";
@@ -68,13 +67,3 @@ button, a {
     filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(88deg) brightness(100%) contrast(100%);
   }
 }
-
-.bg-light { background-color: $platform-graytone-100 }
-.bg-green { background-color: $platform-green-100 !important }
-.bg-dark-green { background-color: $platform-green-500 !important}
-.bg-yellow { background-color: $platform-yellow-100 !important}
-.bg-warn { background-color: $platform-yellow-200 !important}
-.bg-crit {
-  background-color: $platform-red-600 !important;
-  color: white !important;
-}