@beacon-interactive-systems-llc/beacon-platform-ui 17.9.3 → 17.10.0

package/package.json

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

package/styles/_bootstrap-datepicker.scss

@@ -11,7 +11,7 @@ $platform_datepicker_contrasts: (
     datepickerHighlighted: $beacon-gray-200
   ),
   dark: (
-    datepickerHeader: $beacon-dark-blue-600,
+    datepickerHeader: $beacon-green-700,
     datepickerHeaderText: $beacon-gray-300,
     datepickerBackground: $beacon-gray-700,
     datepickerBorder: $beacon-gray-500,

package/styles/_buttons.scss

@@ -32,7 +32,7 @@ $platform_button_contrasts: (
     buttonBorder: $beacon-gray-border
   ),
   dark: (
-    buttonBlue: $beacon-blue-200,
+    buttonBlue: $beacon-dark-blue-400,
     buttonBlueHover: $beacon-blue-300,
     buttonBlueActive: $beacon-blue-100,
     buttonBlueText: $beacon-gray-300,
@@ -82,7 +82,7 @@ $platform_button_contrasts: (
     buttonRedText: $beacon-black,
     buttonRedTextInvert: $beacon-white,
 
-    buttonAmbient: $beacon-black,
+    buttonAmbient: $beacon-gray-600,
     buttonAmbientHover: $beacon-black,
     buttonAmbientActive: $beacon-black,
     buttonAmbientText: $beacon-white,

package/styles/_filters.scss

@@ -8,18 +8,20 @@ $platform_filter_contrasts: (
     filterChipText: $beacon-black,
     filterDropdownFocus: $beacon-dark-blue-200,
     filterDropdownText: $beacon-cyan-600,
-    showingRowBg: $beacon-white
+    showingRowBg: $beacon-white,
+    showingRowColor: $beacon-green-500
   ),
   dark: (
-    filterBackground: $beacon-gray-600,
-    filterBorder: $beacon-dark-blue-200,
+    filterBackground: $beacon-gray-700,
+    filterBorder: $beacon-gray-400,
     filterShadow: none,
-    filterSearchIcon: $beacon-gray-400,
-    filterChip: $beacon-green-700,
+    filterSearchIcon: $beacon-gray-300,
+    filterChip: $beacon-dark-blue-400,
     filterChipText: $beacon-gray-300,
-    filterDropdownFocus: $beacon-dark-blue-400,
-    filterDropdownText: $beacon-cyan-300,
-    showingRowBg: $beacon-gray-600
+    filterDropdownFocus: $beacon-gray-600,
+    filterDropdownText: $beacon-green-650,
+    showingRowBg: $beacon-gray-700,
+    showingRowColor: $beacon-green-650
   ),
   highcontrast: (
     filterBackground: $beacon-black,
@@ -30,7 +32,8 @@ $platform_filter_contrasts: (
     filterChipText: $beacon-black,
     filterDropdownFocus: $highcontrast-bright-blue-200,
     filterDropdownText: $beacon-white,
-    showingRowBg: $beacon-black
+    showingRowBg: $beacon-black,
+    showingRowColor: $beacon-green-500
   )
 );
 
@@ -108,6 +111,9 @@ $date-filter-width: calc(1em * 8);
 
       .showing-label {
         @include font-size--default-md;
+        @include themify($platform_filter_contrasts) {
+          color: apply('showingRowColor');
+        }
 
         &:first-of-type {
           padding-left: 8px;

package/styles/_forms.scss

@@ -34,9 +34,9 @@ $platform_form_contrasts: (
     formSelectOpened: $beacon-blue-100,
     formSelectOptionHover: $beacon-dark-blue-400,
     formSelectShadow: none,
-    formHighlightOrange: $beacon-orange-400,
+    formHighlightOrange: $beacon-green-700,
     formHighlightOrangeText: $beacon-gray-200,
-    quillToolbar: $beacon-dark-blue-600,
+    quillToolbar: $beacon-green-700,
     quillButton: $beacon-gray-300
   ),
   highcontrast: (
@@ -55,7 +55,7 @@ $platform_form_contrasts: (
     formSelectShadow: none,
     formHighlightOrange: $highcontrast-bright-orange-100,
     formHighlightOrangeText: $beacon-black,
-    quillToolbar: $beacon-dark-blue-700,
+    quillToolbar: $beacon-dark-blue-400,
     quillButton: $beacon-white
   )
 );

package/styles/_layout.scss

@@ -9,31 +9,43 @@ $platform_layout_contrasts: (
     headerBackground: linear-gradient(180deg, $beacon-dark-blue-700, $beacon-dark-blue-500),
     headerText: $beacon-white,
     headerModule: $beacon-dark-blue-400,
-    headerIconHover: $beacon-dark-blue-200
+    headerIconHover: $beacon-dark-blue-200,
+    headerShadow: 0px 3px 6px #00000040,
+    platformLinkColor: $beacon-dark-blue-200,
+    platformLinkColorLight: $beacon-blue-100,
+    platformLinkColorMuted: $beacon-dark-blue-300
   ),
   dark: (
-    containerBackground: $beacon-gray-500,
-    containerHeaderBackground: $beacon-gray-600,
+    containerBackground: $beacon-gray-700,
+    containerHeaderBackground: $beacon-gray-500,
     containerInfoBackground: $beacon-black,
-    containerSidebarBackground: $beacon-gray-600,
-    containerBorder: $beacon-dark-blue-400,
+    containerSidebarBackground: $beacon-gray-700,
+    containerBorder: $beacon-gray-400,
     containerShadow: none,
-    headerBackground: $beacon-dark-blue-500,
+    headerBackground: $beacon-gray-600,
     headerText: $beacon-gray-300,
-    headerModule: $beacon-dark-blue-600,
-    headerIconHover: $beacon-dark-blue-500
+    headerModule: $beacon-gray-500,
+    headerIconHover: $beacon-dark-blue-400,
+    headerShadow: none,
+    platformLinkColor: $beacon-gray-300,
+    platformLinkColorLight: $beacon-green-550,
+    platformLinkColorMuted: $beacon-gray-200,
   ),
   highcontrast: (
     containerBackground: $beacon-gray-600,
     containerHeaderBackground: $beacon-gray-700,
     containerInfoBackground: $beacon-black,
     containerSidebarBackground: $beacon-gray-700,
-    containerBorder: $highcontrast-bright-blue-300,
+    containerBorder: $beacon-white,
     containerShadow: none,
     headerBackground: $beacon-gray-700,
     headerText: $beacon-white,
     headerModule: $beacon-gray-600,
-    headerIconHover: $beacon-white
+    headerIconHover: $beacon-white,
+    headerShadow: none,
+    platformLinkColor: $highcontrast-bright-blue-300,
+    platformLinkColorLight: $highcontrast-bright-blue-200,
+    platformLinkColorMuted: $beacon-dark-blue-300
   )
 );
 
@@ -71,8 +83,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     @include themify($platform_layout_contrasts) {
       background: apply('headerBackground');
       color: apply('headerText');
+      box-shadow: apply('headerShadow');
     }
-    box-shadow: 0px 3px 6px #00000040;
+
     height: $header-height;
     line-height: $header-height;
     position: fixed;
@@ -87,6 +100,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         color: apply('headerText');
       }
       text-transform: uppercase;
+      height: 51px;
     }
 
     .justify-content-start {
@@ -106,7 +120,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         width: 24px;
         font-size: 24px;
         position: relative;
-        top: 10px;
+        top: 7px;
 
         &:hover {
           @include themify($platform_layout_contrasts) {
@@ -350,12 +364,16 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     padding: 0px !important;
     width: 100%;
     height: calc(100vh - ($header-height + $detail-header-height + 1rem));  // Container fluid padding: 1rem
+    transition: none;
   }
 }
 
 .platform-link {
   @include font-weight--semibold;
-  @include font-color--cyan;
+
+  @include themify($platform_layout_contrasts) {
+    color: apply('platformLinkColor');
+  }
 
   &:hover {
     cursor: pointer;
@@ -364,11 +382,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   }
 
   &--light {
-    @include font-color--blue--light;
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkColorLight');
+    }
   }
 
   &--muted {
-    @include font-color--blue--muted;
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkColorMuted');
+    }
   }
 
   &--underlined {

package/styles/_leftnav.scss

@@ -13,39 +13,45 @@ $platform_leftnav_contrasts: (
     navListItemHover: lighten($beacon-dark-blue-500, 3%),
     navListItemSupport: $beacon-dark-blue-700,
     navListItemSbir: $beacon-cyan-600,
-    navListItemActive: $beacon-cyan-500
+    navListItemActive: $beacon-cyan-500,
+    collapseBtnBg: $beacon-white,
+    collapseBtnColor: $beacon-cyan-500
   ),
   dark: (
-    navLevelOne: $beacon-dark-blue-600,
-    navLevelTwo: $beacon-dark-blue-500,
+    navLevelOne: $beacon-black,
+    navLevelTwo: $beacon-black,
     navText: $beacon-gray-300,
-    navCollapseGradient: linear-gradient(90deg, $beacon-dark-blue-700, $beacon-dark-blue-600),
-    navActiveBackground: $beacon-dark-blue-700,
-    navActiveIcon: $beacon-orange-500,
-    navBarLight: $beacon-gray-700,
+    navCollapseGradient: $beacon-gray-600,
+    navActiveBackground: $beacon-dark-blue-400,
+    navActiveIcon: $beacon-orange-300,
+    navBarLight: $beacon-black,
     navBarLightShadow: none,
-    navBarLightBrand: $beacon-dark-blue-700,
-    navBarLightIcon: $beacon-gray-300,
-    navListItemHover: lighten($beacon-dark-blue-600, 3%),
-    navListItemSupport: $beacon-dark-blue-700,
-    navListItemSbir: $beacon-cyan-600,
-    navListItemActive: $beacon-cyan-500
+    navBarLightBrand: $beacon-gray-600,
+    navBarLightIcon: $beacon-white,
+    navListItemHover: $beacon-dark-blue-700,
+    navListItemSupport: $beacon-black,
+    navListItemSbir: $beacon-black,
+    navListItemActive: $beacon-dark-blue-400,
+    collapseBtnBg: $beacon-dark-blue-400,
+    collapseBtnColor: $beacon-gray-300,
   ),
   highcontrast: (
-    navLevelOne: $highcontrast-bright-blue-300,
-    navLevelTwo: $highcontrast-bright-blue-300,
-    navText: $beacon-black,
-    navCollapseGradient: $highcontrast-bright-blue-300,
+    navLevelOne: $beacon-gray-700,
+    navLevelTwo: $beacon-gray-700,
+    navText: $beacon-white,
+    navCollapseGradient: $beacon-black,
     navActiveBackground: $highcontrast-bright-blue-200,
-    navActiveIcon: $highcontrast-bright-orange-200,
-    navBarLight: $beacon-black,
+    navActiveIcon: $beacon-orange-300,
+    navBarLight: $beacon-gray-700,
     navBarLightShadow: none,
-    navBarLightBrand: $highcontrast-bright-blue-200,
+    navBarLightBrand: $beacon-black,
     navBarLightIcon: $beacon-white,
-    navListItemHover: lighten($highcontrast-bright-blue-300, 5%),
-    navListItemSupport: $highcontrast-bright-blue-300,
-    navListItemSbir: $highcontrast-bright-blue-200,
-    navListItemActive: $highcontrast-bright-blue-200
+    navListItemHover: $beacon-dark-blue-500,
+    navListItemSupport: $beacon-black,
+    navListItemSbir: $beacon-black,
+    navListItemActive: $highcontrast-bright-blue-200,
+    collapseBtnBg: $highcontrast-bright-blue-200,
+    collapseBtnColor: $beacon-black
   )
 );
 
@@ -191,17 +197,27 @@ $icon-container-width: 50px;
       }
 
       .collapse-box {
-        background: $beacon-white;
+        @include themify($platform_leftnav_contrasts) {
+          background: apply('collapseBtnBg');
+        }
         border-radius: 5px;
         height: 36px;
         width: 36px;
 
         mat-icon {
+          @include themify($platform_leftnav_contrasts) {
+            color: apply('collapseBtnColor');
+          }
           font-size: 24px;
           height: 24px;
 
-          &.collapsed { width: 20px; }
-          &.open { width: 24px; }
+          &.collapsed { 
+            width: 20px;
+          }
+
+          &.open { 
+            width: 24px;
+          }
         }
       }
     }

package/styles/_material-tabs.scss

@@ -7,17 +7,17 @@ $platform_tab_contrasts: (
     tabLabelActive: $beacon-cyan-600
   ),
   dark: (
-    tabBackground: $beacon-gray-600,
-    tabAccent: $beacon-cyan-400,
-    tabBorderBottom: $beacon-dark-blue-400,
-    tabLabel: $beacon-dark-blue-300,
-    tabLabelActive: $beacon-dark-blue-200
+    tabBackground: $beacon-gray-500,
+    tabAccent: $beacon-green-550,
+    tabBorderBottom: $beacon-green-550,
+    tabLabel: $beacon-gray-300,
+    tabLabelActive: $beacon-green-550,
   ),
   highcontrast: (
-    tabBackground: $beacon-gray-600,
-    tabAccent: $beacon-cyan-400,
-    tabBorderBottom: $highcontrast-bright-blue-300,
-    tabLabel: $highcontrast-bright-blue-300,
+    tabBackground: $beacon-gray-700,
+    tabAccent:$highcontrast-bright-blue-200,
+    tabBorderBottom: $highcontrast-bright-blue-200,
+    tabLabel: $beacon-gray-300,
     tabLabelActive: $highcontrast-bright-blue-200
   )
 );

package/styles/_modals.scss

@@ -4,8 +4,8 @@ $platform_modal_contrasts: (
     modalFooter: $beacon-gray-200
   ),
   dark: (
-    modalBody: $beacon-gray-600,
-    modalFooter: $beacon-gray-500
+    modalBody: $beacon-black,
+    modalFooter: $beacon-gray-600
   ),
   highcontrast: (
     modalBody: $beacon-black,
@@ -62,15 +62,13 @@ $platform_modal_contrasts: (
 
 .modal-content {
   @include font-color--default;
+  border-radius: 12px;
 }
 
 .modal-body {
   @include themify($platform_modal_contrasts) {
     background-color: apply('modalBody');
   }
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  padding: 16px 16px 24px 16px;
 }
 
 .modal-footer {

package/styles/_popover.scss

@@ -1,9 +1,13 @@
 $platform_popover_contrasts: (
   light: (
     popoverBackground: $beacon-dark-blue-50,
+    popoverBorder: none,
+    popoverColor: $beacon-gray-600
   ),
   dark: (
-    popoverBackground: $beacon-gray-700,
+    popoverBackground: $beacon-black,
+    popoverBorder: 1px solid $beacon-gray-300,
+    popoverColor: $beacon-gray-300
   ),
   highcontrast: (
     popoverBackground: $beacon-black,
@@ -19,6 +23,13 @@ $platform_popover_contrasts: (
                0 2px 6px -2px rgba(0, 0, 0, 0.2);
   max-width: 100%;
   position: absolute;
+
+  .popover-content {
+    @include themify($platform_popover_contrasts) {
+      border: apply('popoverBorder');
+      color: apply('popoverColor');
+    }
+  }
 }
 
 .popover-arrow {

package/styles/_tables.scss

@@ -22,13 +22,13 @@ $platform_table_contrasts: (
     tableDotDarkRed: $beacon-orange-700
   ),
   dark: (
-    tableBorder: $beacon-dark-blue-200,
-    tableHeader: $beacon-dark-blue-500,
-    tableHeaderText: $beacon-dark-blue-200,
-    tableSortArrow: $beacon-gray-400,
-    tableSortArrowActive: $beacon-blue-100,
-    tableHeaderFiltering: $beacon-green-400,
-    tableBody: $beacon-black,
+    tableBorder: $beacon-gray-400,
+    tableHeader: $beacon-gray-600,
+    tableHeaderText: $beacon-gray-300,
+    tableSortArrow: $beacon-gray-300,
+    tableSortArrowActive: $beacon-dark-blue-400,
+    tableHeaderFiltering: $beacon-gray-300,
+    tableBody: $beacon-gray-700,
     tableBodyAlt: $beacon-gray-700,
     tableBodyText: $beacon-gray-300,
     tableShadow: none,

package/styles/_theming.scss

@@ -39,7 +39,7 @@ $platform_contrasts: (
     cyanBackground: $beacon-cyan-600,
     blueBackground: $beacon-dark-blue-400,
     blueDarkBackground: $beacon-dark-blue-500,
-    grayBackground: $beacon-gray-500,
+    grayBackground: $beacon-gray-700,
     accentRed: $beacon-orange-700,
     accentRedText: $beacon-gray-300,
     accentYellow: $beacon-yellow-600,

package/styles/_widgets.scss

@@ -6,21 +6,24 @@ $platform_widget_contrasts: (
     widgetBackground: $beacon-dark-blue-50,
     widgetBackgroundSecondary: $beacon-dark-blue-50,
     widgetBorder: $beacon-dark-blue-200,
-    widgetHighlight: $beacon-dark-blue-200
+    widgetHighlight: $beacon-dark-blue-200,
+    widgetHeaderColor: $beacon-black
   ),
   dark: (
     widgetText: $beacon-gray-200,
     widgetBackground: $beacon-gray-600,
     widgetBackgroundSecondary: $beacon-gray-700,
-    widgetBorder: $beacon-gray-500,
-    widgetHighlight: $beacon-dark-blue-500
+    widgetBorder: $beacon-gray-400,
+    widgetHighlight: $beacon-dark-blue-500,
+    widgetHeaderColor: $beacon-gray-300
   ),
   highcontrast: (
     widgetText: $beacon-white,
     widgetBackground: $beacon-black,
     widgetBackgroundSecondary: $beacon-black,
     widgetBorder: $beacon-white,
-    widgetHighlight: $beacon-dark-blue-600
+    widgetHighlight: $beacon-dark-blue-600,
+    widgetHeaderColor: $beacon-white
   )
 );
 
@@ -67,6 +70,9 @@ $platform_widget_contrasts: (
 
   &__header {
     @include font-weight--bold;
+    @include themify($platform_widget_contrasts) {
+      background-color: apply('widgetHeaderColor') !important;
+    }
 
     &__title-bar {
       height: 20px;

package/styles/styles.scss

@@ -93,6 +93,9 @@ button, a {
     &.orange {
       @include color-chip(apply('accentOrange'), apply('accentOrangeText'));
     }
+    &.dark-orange {
+      @include color-chip(apply('accentDarkOrange'), apply('accentDarkOrangeText'));
+    }
 
     // Selected items
     &.light-orange {
@@ -194,3 +197,10 @@ $icon-sizes: 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px;
     width: $size;
   }
 }
+
+
+.bg-light {
+   @include themify($platform_contrasts) {
+     background: apply('grayBackground') !important;
+   }
+}