@beacon-interactive-systems-llc/beacon-platform-ui 17.7.0 → 17.7.1

package/package.json

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

package/styles/_buttons.scss

@@ -4,19 +4,19 @@ $platform_button_contrasts: (
     buttonBlueHover: $beacon-blue-300,
     buttonBlueActive: $beacon-blue-100,
     buttonBlueText: $beacon-white,
-    buttonBlueTextInvert: $beacon-gray-600,
+    buttonBlueTextInvert: $beacon-blue-200,
 
     buttonGreen: $beacon-green-500,
     buttonGreenHover: $beacon-green-600,
     buttonGreenActive: $beacon-green-400,
     buttonGreenText: $beacon-white,
-    buttonGreenTextInvert: $beacon-gray-600,
+    buttonGreenTextInvert: $beacon-green-500,
 
     buttonRed: $beacon-orange-600,
     buttonRedHover: $beacon-orange-500,
     buttonRedActive: $beacon-orange-400,
     buttonRedText: $beacon-white,
-    buttonRedTextInvert: $beacon-gray-600,
+    buttonRedTextInvert: $beacon-orange-600,
 
     buttonAmbient: $beacon-white,
     buttonAmbientHover: $beacon-gray-200,
@@ -88,7 +88,7 @@ $platform_button_contrasts: (
   )
 );
 
-@mixin button-color-styles($main-color, $hover, $active, $text, $text-invert) {
+@mixin button-color-styles($main-color, $hover, $active, $text) {
   background: $main-color;
   color: $text;
 
@@ -102,15 +102,19 @@ $platform_button_contrasts: (
 
   &--invert {
     background: apply('buttonAmbient');
-    color: $text-invert;
+    color: $main-color;
     border: 1px solid $main-color;
 
     &:hover {
       border-color: $hover;
+      color: $hover;
+      background: apply('buttonAmbient');
     }
 
     &:active {
       border-color: $active;
+      color: $active;
+      background: apply('buttonAmbient');
     }
 
     &.dashed {
@@ -164,19 +168,19 @@ button.platform-btn {
 
   &--bg-blue {
     @include themify($platform_button_contrasts) {
-      @include button-color-styles(apply('buttonBlue'), apply('buttonBlueHover'), apply('buttonBlueActive'), apply('buttonBlueText'), apply('buttonBlueTextInvert'));
+      @include button-color-styles(apply('buttonBlue'), apply('buttonBlueHover'), apply('buttonBlueActive'), apply('buttonBlueText'));
     }
   }
 
   &--bg-green {
     @include themify($platform_button_contrasts) {
-      @include button-color-styles(apply('buttonGreen'), apply('buttonGreenHover'), apply('buttonGreenActive'), apply('buttonGreenText'), apply('buttonGreenTextInvert'));
+      @include button-color-styles(apply('buttonGreen'), apply('buttonGreenHover'), apply('buttonGreenActive'), apply('buttonGreenText'));
     }
   }
 
   &--bg-red {
     @include themify($platform_button_contrasts) {
-      @include button-color-styles(apply('buttonRed'), apply('buttonRedHover'), apply('buttonRedActive'), apply('buttonRedText'), apply('buttonRedTextInvert'));
+      @include button-color-styles(apply('buttonRed'), apply('buttonRedHover'), apply('buttonRedActive'), apply('buttonRedText'));
     }
   }
 

package/styles/_tables.scss

@@ -5,8 +5,8 @@ $platform_table_contrasts: (
     tableBorder: $beacon-gray-border,
     tableHeader: $beacon-dark-blue-100,
     tableHeaderText: $beacon-black,
-    tableHeaderSortingColor: $beacon-white,
-    tableHeaderSortingBackground: $beacon-dark-blue-400,
+    tableSortArrow: $beacon-gray-300,
+    tableSortArrowActive: $beacon-blue-200,
     tableHeaderFiltering: $beacon-green-300,
     tableBody: $beacon-white,
     tableBodyAlt: $beacon-gray-100,
@@ -14,31 +14,46 @@ $platform_table_contrasts: (
     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),
+    tableDotGray: $beacon-gray-300,
+    tableDotGreen: $beacon-green-400,
+    tableDotYellow: $beacon-yellow-400,
+    tableDotRed: $beacon-orange-500,
+    tableDotDarkRed: $beacon-orange-700
   ),
   dark: (
     tableBorder: $beacon-dark-blue-200,
     tableHeader: $beacon-dark-blue-500,
     tableHeaderText: $beacon-dark-blue-200,
-    tableHeaderSortingColor: $beacon-white,
-    tableHeaderSortingBackground: $beacon-dark-blue-400,
+    tableSortArrow: $beacon-gray-400,
+    tableSortArrowActive: $beacon-blue-100,
     tableHeaderFiltering: $beacon-green-400,
     tableBody: $beacon-black,
     tableBodyAlt: $beacon-gray-700,
     tableBodyText: $beacon-gray-300,
-    tableShadow: none
+    tableShadow: none,
+    tableDotGray: $beacon-gray-300,
+    tableDotGreen: $beacon-green-400,
+    tableDotYellow: $beacon-yellow-400,
+    tableDotRed: $beacon-orange-500,
+    tableDotDarkRed: $beacon-orange-700
   ),
   highcontrast: (
     tableBorder: $beacon-white,
     tableHeader: $beacon-gray-700,
     tableHeaderText: $beacon-white,
-    tableHeaderSortingColor: $beacon-black,
-    tableHeaderSortingBackground: $highcontrast-bright-blue-200,
+    tableSortArrow: $beacon-white,
+    tableSortArrowActive: $highcontrast-bright-blue-200,
     tableHeaderFiltering: $highcontrast-bright-green-300,
     tableBody: $beacon-black,
     tableBodyAlt: $beacon-gray-700,
     tableBodyText: $beacon-white,
-    tableShadow: none
+    tableShadow: none,
+    tableDotGray: $beacon-gray-300,
+    tableDotGreen: $beacon-green-400,
+    tableDotYellow: $beacon-yellow-400,
+    tableDotRed: $beacon-orange-500,
+    tableDotDarkRed: $beacon-orange-700
   )
 );
 
@@ -89,31 +104,29 @@ table.platform-table {
         padding-left: 32px !important;
       }
 
-      mat-icon.columnsort {
-        @include themify($platform_table_contrasts) {
-          color: apply('tableHeaderText');
-        }
-        background-color: transparent;
-        font-size: 13px;
-        border-radius: 9px;
-        padding: 2px 0 0 2px;
-        height: 17px;
-        width: 17px;
+      div.sort-icon-container {
+        display: flex;
+        flex-direction: column;
         position: relative;
-        top: 2px;
+        top: 8px;
 
-        &:hover {
-          cursor: pointer;
-        }
-
-        &.selected {
+        mat-icon.sort-arrow {
           @include themify($platform_table_contrasts) {
-            color: apply('tableHeaderSortingColor');
-            background-color: apply('tableHeaderSortingBackground');
+            color: apply('tableSortArrow');
+          }
+          height: 10px;
+          width: 16px;
+          font-size: 16px;
+
+          &--active {
+            @include themify($platform_table_contrasts) {
+              color: apply('tableSortArrowActive');
+            }
           }
 
-          &.ascending {
-            transform: scaleY(-1);
+          &--down {
+            position: relative;
+            top: -3px;
           }
         }
       }
@@ -280,3 +293,59 @@ table.platform-table {
     }
   }
 }
+
+@mixin status-dot-positioning() {
+  font-family: "Material Icons";
+  content: "circle";
+  font-size: 12px;
+  position: relative;
+  top: 1px;
+}
+
+.with-status-dot {
+  &.gray {
+    &::before {
+      @include status-dot-positioning();
+      font-family: "Material Icons Outlined";
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotGray');
+      }
+    }
+  }
+
+  &.green {
+    &::before {
+      @include status-dot-positioning();
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotGreen');
+      }
+    }
+  }
+
+  &.yellow {
+    &::before {
+      @include status-dot-positioning();
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotYellow');
+      }
+    }
+  }
+
+  &.red {
+    &::before {
+      @include status-dot-positioning();
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotRed');
+      }
+    }
+  }
+
+  &.dark-red {
+    &::before {
+      @include status-dot-positioning();
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotDarkRed');
+      }
+    }
+  }
+}

package/styles/_theming.scss

@@ -28,7 +28,7 @@ $platform_contrasts: (
     accentLightOrange: $beacon-orange-100,
     accentLightOrangeText: $beacon-black,
     accentCyan: $beacon-cyan-300,
-    accentCyanText: $beacon-black
+    accentCyanText: $beacon-black,
   ),
   dark: (
     primaryBackground: $beacon-black,
@@ -44,8 +44,8 @@ $platform_contrasts: (
     accentYellowText: $beacon-black,
     accentGreen: $beacon-green-700,
     accentGreenText: $beacon-gray-300,
-    accentGray: $beacon-gray-300,
-    accentGrayText: $beacon-white,
+    accentGray: $beacon-gray-400,
+    accentGrayText: $beacon-gray-200,
     accentLightGray: $beacon-gray-700,
     accentLightGrayText: $beacon-gray-200,
     accentLightRed: $beacon-orange-50,
@@ -75,7 +75,7 @@ $platform_contrasts: (
     accentYellowText: $beacon-black,
     accentGreen: $highcontrast-bright-green-200,
     accentGreenText: $beacon-black,
-    accentGray: $beacon-gray-300,
+    accentGray: $beacon-gray-500,
     accentGrayText: $beacon-white,
     accentLightGray: $beacon-black,
     accentLightGrayText: $beacon-white,

package/styles/_typography.scss

@@ -8,7 +8,7 @@ $platform_text_contrasts: (
     textDefaultInvert: $beacon-white,
     textBlue: $beacon-dark-blue-500,
     textBlueDark: $beacon-dark-blue-600,
-    textBlueHighlight: $beacon-dark-blue-400,
+    textBlueHighlight: $beacon-dark-blue-300,
     textCyan: $beacon-cyan-500,
     textCyanDark: $beacon-cyan-600,
     textGreen: $beacon-green-500,

package/styles/_widgets.scss

@@ -50,6 +50,12 @@ $platform_widget_contrasts: (
     border-radius: 10px;
   }
 
+  &.highlight-on-hover:hover {
+    @include themify($platform_widget_contrasts) {
+      background-color: apply('widgetHighlight') !important;
+    }
+  }
+
   &__header {
     @include font-weight--bold;
 
@@ -105,6 +111,78 @@ $platform_widget_contrasts: (
     }
   }
 
+  mat-icon.expand-widget-icon {
+    @include font-color--cyan;
+
+    position: relative;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.expanded {
+      transform: rotate(90deg);
+    }
+  }
+
+  &.accent-left {
+    &--red {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentRed');
+      }
+    }
+    &--yellow {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentYellow');
+      }
+    }
+    &--green {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentGreen');
+      }
+    }
+    &--gray {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentGray');
+      }
+    }
+    &--orange {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentOrange');
+      }
+    }
+    &--cyan {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentCyan');
+      }
+    }
+    &--light-gray {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentLightGray');
+      }
+    }
+    &--light-red {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentLightRed');
+      }
+    }
+    &--light-yellow {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentLightYellow');
+      }
+    }
+    &--light-green {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentLightGreen');
+      }
+    }
+    &--light-orange {
+      @include themify($platform_contrasts) {
+        border-left: 7px solid apply('accentLightOrange');
+      }
+    }
+  }
+
   &.platform-equipment-card {
     width: 261px;
     min-height: 326px;