@ngx-stoui/core 12.1.1 → 12.1.2

package/ngx-stoui.css

@@ -2,12 +2,12 @@
 @import url("https://fonts.googleapis.com/css?family=Material+Icons");
 @import url("https://fonts.googleapis.com/css?family=Material+Icons+Outlined");
 body .sto-action-footer {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
   border-top: 1px solid var(--divider);
 }
 
 body .sto-header {
-  background-color: var(--bg-default) !important;
+  background-color: var(--bg-card) !important;
   border-bottom-color: var(--divider);
 }
 body .sto-header--test-environment {
@@ -26,7 +26,7 @@ body .sto-header button:hover {
   background-color: var(--bg-hover);
 }
 body .sto-header__actions--small {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .sto-breadcrumb__home {
   color: var(--primary-resting);
@@ -190,7 +190,7 @@ body .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):hover, b
 body .sto-mdl-table__footer__row {
   border-bottom: 1px solid var(--divider);
   border-top: 1px solid var(--divider);
-  background: var(--bg-default);
+  background: var(--bg-app);
 }
 body .ngx-datatable.sto-datatable {
   background-color: transparent;
@@ -324,7 +324,7 @@ body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.p
 }
 
 body .sto-daterange {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
 }
 body .sto-daterange .sto-daterange__error--container {
   background-color: #f44336;
@@ -336,22 +336,22 @@ body .sto-daterange-wrapper .sto-form__field.mat-focused .mat-form-field-suffix
   color: var(--text-secondary);
 }
 body .sto-date.sto-date__popout {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 
 body .sto-drawer__overlay {
   background: var(--text);
 }
 body .sto-drawer {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
 }
 body .sto-drawer__footer {
   border-top: 1px solid var(--divider);
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
   color: var(--text);
 }
 body .sto-drawer__content {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
   color: var(--text);
 }
 body .sto-drawer__header__infix a, body .sto-drawer__header__infix mat-icon {
@@ -361,12 +361,12 @@ body .sto-drawer__header__infix a:hover, body .sto-drawer__header__infix mat-ico
   color: var(--text-disabled);
 }
 body .sto-drawer__header__wrapper {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
   color: var(--text);
 }
 body .sto-drawer .sto-slide-panel {
   color: var(--text);
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
 }
 body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item {
   color: var(--text);
@@ -381,9 +381,37 @@ body .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .sto-n
   color: var(--text);
 }
 
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header {
+  background-color: var(--bg-card);
+}
 body .sto-filter.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] {
   color: var(--text);
 }
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button, body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button {
+  color: var(--text-secondary);
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button:hover, body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button:hover {
+  color: rgba(var(--text-secondary), 0.8);
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
+  background-color: transparent;
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+  background-color: var(--bg-light);
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header:not(.mat-expanded) {
+  border-bottom: solid 1px var(--divider);
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover {
+  background-color: var(--bg-card);
+}
+body .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:focus {
+  background-color: var(--bg-card);
+}
+body .sto-filter.mat-expansion-panel .separator {
+  background-color: var(--divider);
+}
+
 .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-filter .mat-expansion-panel-header {
   font-size: 20px;
   line-height: 28px;
@@ -420,7 +448,7 @@ body .mat-option.sto-option--clear {
 }
 
 body .sto-form__field .mat-form-field-flex, body .sto-form__field.mat-form-field .mat-form-field-flex {
-  background-color: rgba(102, 135, 184, 0.1);
+  background-color: var(--bg-light);
 }
 body .sto-form__field .mat-form-field-flex .mat-input, body .sto-form__field.mat-form-field .mat-form-field-flex .mat-input {
   color: var(--text);
@@ -434,9 +462,6 @@ body .sto-form__field.sto-form__field--readonly .mat-form-field-flex .mat-select
 body .sto-form__field.sto-form__field--readonly .mat-form-field-flex, body .sto-form__field.mat-form-field.sto-form__field--readonly .mat-form-field-flex {
   background-color: transparent;
 }
-body .sto-form__field .mat-form-field-flex:hover + .mat-form-field-underline, body .sto-form__field.mat-form-field .mat-form-field-flex:hover + .mat-form-field-underline {
-  background-color: rgba(0, 0, 0, 0.12);
-}
 body .sto-form__field.mat-focused .mat-form-field-infix .mat-form-field-label, body .sto-form__field.mat-form-field.mat-focused .mat-form-field-infix .mat-form-field-label {
   color: var(--text);
 }
@@ -565,7 +590,7 @@ body .mat-menu-panel.preference-manager-list .preference-manager-list-footer {
 }
 
 body .sto-select-filter {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
 }
 
 body .mat-card.mat-primary {
@@ -663,7 +688,7 @@ body .mat-pseudo-checkbox {
   color: var(--text-secondary);
 }
 body .mat-pseudo-checkbox::after {
-  color: var(--bg-default);
+  color: var(--bg-app);
 }
 body .mat-pseudo-checkbox-disabled {
   color: #b0b0b0;
@@ -687,7 +712,7 @@ body .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
   background: #b0b0b0;
 }
 body .mat-app-background, body.mat-app-background {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
   color: var(--text);
 }
 body .mat-elevation-z0 {
@@ -770,14 +795,14 @@ body .mat-elevation-z24 {
 }
 
 body .mat-autocomplete-panel {
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-autocomplete-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }
 body .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
   color: var(--text);
@@ -947,7 +972,7 @@ body .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
 }
 body .mat-bottom-sheet-container {
   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-button, body .mat-icon-button, body .mat-stroked-button {
@@ -990,7 +1015,7 @@ body .mat-stroked-button:not(.mat-button-disabled) {
 }
 body .mat-flat-button, body .mat-raised-button, body .mat-fab, body .mat-mini-fab {
   color: var(--text);
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
 }
 body .mat-flat-button.mat-primary, body .mat-raised-button.mat-primary, body .mat-fab.mat-primary, body .mat-mini-fab.mat-primary {
   color: var(--primary-contrast-resting);
@@ -1064,7 +1089,7 @@ body .mat-button-toggle .mat-button-toggle-focus-overlay {
 }
 body .mat-button-toggle-appearance-standard {
   color: var(--text);
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
   background-color: var(--bg-focus);
@@ -1093,7 +1118,7 @@ body .mat-button-toggle-disabled {
   background-color: var(--bg-disabled);
 }
 body .mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-button-toggle-disabled.mat-button-toggle-checked {
   background-color: var(--bg-disabled);
@@ -1107,7 +1132,7 @@ body .mat-button-toggle-group-appearance-standard {
 }
 
 body .mat-card {
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-card:not([class*=mat-elevation-z]) {
@@ -1123,13 +1148,13 @@ body .mat-checkbox-frame {
   border-color: var(--text-secondary);
 }
 body .mat-checkbox-checkmark {
-  fill: var(--bg-default);
+  fill: var(--bg-app);
 }
 body .mat-checkbox-checkmark-path {
-  stroke: var(--bg-default) !important;
+  stroke: var(--bg-app) !important;
 }
 body .mat-checkbox-mixedmark {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
 }
 body .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, body .mat-checkbox-checked.mat-primary .mat-checkbox-background {
   background-color: var(--primary-resting);
@@ -1220,7 +1245,7 @@ body .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-elemen
   opacity: 0.1;
 }
 body .mat-table {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-table thead, body .mat-table tbody, body .mat-table tfoot,
 body mat-header-row, body mat-row, body mat-footer-row,
@@ -1315,7 +1340,7 @@ body .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-co
 }
 body .mat-datepicker-content {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
   color: var(--text);
 }
 body .mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {
@@ -1411,7 +1436,7 @@ body .mat-date-range-input-inner[disabled] {
 }
 body .mat-dialog-container {
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-divider {
@@ -1421,7 +1446,7 @@ body .mat-divider-vertical {
   border-right-color: var(--divider);
 }
 body .mat-expansion-panel {
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-expansion-panel:not([class*=mat-elevation-z]) {
@@ -1435,7 +1460,7 @@ body .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([
 }
 @media (hover: none) {
   body .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
-    background: var(--bg-default);
+    background: var(--bg-card);
   }
 }
 body .mat-expansion-panel-header-title {
@@ -1637,7 +1662,7 @@ body .mat-list-single-selected-option, body .mat-list-single-selected-option:hov
   background: var(--bg-hover);
 }
 body .mat-menu-panel {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-menu-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
@@ -1661,7 +1686,7 @@ body .mat-menu-item-highlighted:not([disabled]) {
   background: var(--bg-hover);
 }
 body .mat-paginator {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-paginator,
 body .mat-paginator-page-size .mat-select-trigger {
@@ -1773,7 +1798,7 @@ body .mat-select-arrow {
   color: var(--text-secondary);
 }
 body .mat-select-panel {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-select-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
@@ -1797,15 +1822,15 @@ body .mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
   color: var(--text-disabled);
 }
 body .mat-drawer-container {
-  background-color: var(--bg-default);
+  background-color: var(--bg-app);
   color: var(--text);
 }
 body .mat-drawer {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
   color: var(--text);
 }
 body .mat-drawer.mat-drawer-push {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
 }
 body .mat-drawer:not(.mat-drawer-side) {
   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
@@ -1826,7 +1851,7 @@ body [dir=rtl] .mat-drawer-side.mat-drawer-end {
   border-right: solid 1px var(--divider);
 }
 body .mat-drawer-backdrop.mat-drawer-shown {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
   opacity: 0.6;
 }
 body .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
@@ -2002,7 +2027,7 @@ body .mat-step-header .mat-step-label.mat-step-label-error {
   color: #f44336;
 }
 body .mat-stepper-horizontal, body .mat-stepper-vertical {
-  background-color: var(--bg-default);
+  background-color: var(--bg-card);
 }
 body .mat-stepper-vertical-line::before {
   border-left-color: var(--divider);
@@ -2214,7 +2239,7 @@ body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-ripp
   background-color: rgba(255, 255, 255, 0.12);
 }
 body .mat-toolbar {
-  background: var(--bg-default);
+  background: var(--bg-card);
   color: var(--text);
 }
 body .mat-toolbar.mat-primary {
@@ -2265,7 +2290,7 @@ body .mat-tooltip {
   background: var(--bg-overlay);
 }
 body .mat-tree {
-  background: var(--bg-default);
+  background: var(--bg-card);
 }
 body .mat-tree-node,
 body .mat-nested-tree-node {
@@ -4529,27 +4554,12 @@ mat-form-field {
   background: inherit;
 }
 
-body .sto-form__field .mat-form-field-flex:hover {
-  background-color: rgba(102, 135, 184, 0.15);
-}
 body .sto-form__field .mat-form-field-wrapper .mat-form-field-underline {
   background-color: var(--divider);
 }
-body .sto-form__field--readonly .mat-form-field-flex:hover {
-  background-color: transparent;
-}
-body .sto-form__field--readonly .mat-form-field-flex:hover + .mat-form-field-underline {
-  background-color: transparent;
-}
 body .sto-form__field--disabled {
   color: var(--text-disabled);
 }
-body .sto-form__field--disabled .mat-form-field-flex:hover {
-  background-color: var(--text-disabled);
-}
-body .sto-form__field--disabled .mat-form-field-flex:hover + .mat-form-field-underline {
-  background-color: transparent;
-}
 body .sto-form__field--disabled .mat-form-field-flex {
   color: var(--text-disabled);
 }
@@ -4636,7 +4646,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 .sto-form__field .mat-form-field-flex {
   padding: 6px;
   border-radius: 4px;
-  background-color: rgba(102, 135, 184, 0.1);
+  background-color: var(--bg-light);
   align-items: center;
 }
 .sto-form__field .mat-form-field-flex .mat-icon-button .mat-datepicker-toggle-default-icon {
@@ -4819,6 +4829,8 @@ body:not(.sto-dark-theme) {
   --text-disabled: #BEBEBE;
   --divider: #DCDCDC;
   --bg-default: #FFFFFF;
+  --bg-app: #F7F7F7;
+  --bg-card: #FFFFFF;
   --bg-semi-transparent: rgba(255, 255, 255, 0.2);
   --bg-light: #F7F7F7;
   --bg-medium: #DCDCDC;
@@ -4879,6 +4891,8 @@ body.sto-dark-theme {
   --text-disabled: #637583;
   --divider: #3E4F5C;
   --bg-default: #132634;
+  --bg-app: #132634;
+  --bg-card: #243746;
   --bg-semi-transparent: rgba(255, 255, 255, 0.16);
   --bg-light: #2E3F4D;
   --bg-medium: #243746;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "peerDependencies": {
     "@angular/common": "^12.0.2",
     "@angular/core": "^12.0.2",

package/style/form/sto-form.scss

@@ -1,18 +1,6 @@
 @import "../theme/theme";
 @import "../theme/typography";
 
-@mixin mat-input-hover-effect($background-color, $underline-color) {
-  .mat-form-field-flex {
-    &:hover {
-      background-color: $background-color;
-    }
-
-    &:hover + .mat-form-field-underline {
-      background-color: $underline-color;
-    }
-  }
-}
-
 @mixin sto-form-theme($theme, $variables) {
   $color: map_get($variables, color);
   $secondary-color: map_get($variables, secondary);
@@ -23,19 +11,12 @@
 
   .sto-form {
     &__field {
-      @include mat-input-hover-effect(rgba(#6687B8, 0.15), $border-hover);
-
       .mat-form-field-wrapper .mat-form-field-underline {
         background-color: $border;
       }
     }
 
-    &__field--readonly {
-      @include mat-input-hover-effect(transparent, transparent);
-    }
-
     &__field--disabled {
-      @include mat-input-hover-effect($disabled-color, transparent);
       color: $disabled-color;
 
       .mat-form-field-flex {
@@ -56,7 +37,7 @@ body {
   @include sto-form-theme($sto-theme, $variables);
 }
 
-$form-field-bg: rgba(#6687B8, 0.1);
+$form-field-bg: var(--bg-light);
 $border-radius: 4px;
 $height: 72px;
 

package/style/theme/_action-footer.scss

@@ -3,7 +3,7 @@
 
 @mixin sto-action-footer-theme($theme, $variables) {
   $border-color: map_get($variables, border-color);
-  $background-color: map_get($variables, app-bar);
+  $background-color: map_get($variables, background);
 
   .sto-action-footer {
     background-color: $background-color;

package/style/theme/_colors.scss

@@ -147,13 +147,13 @@ $theme-fg: (
 );
 
 $theme-bg: (
-  app-bar: var(--bg-default),
-  background: var(--bg-default),
+  app-bar: var(--bg-card),
+  background: var(--bg-app),
   hover: var(--bg-hover),
-  card: var(--bg-default),
-  dialog: var(--bg-default),
+  card: var(--bg-card),
+  dialog: var(--bg-card),
   disabled-button: var(--bg-disabled),
-  raised-button: var(--bg-default),
+  raised-button: var(--bg-card),
   focused-button: var(--bg-focus),
   selected-button: var(--bg-light),
   selected-disabled-button: var(--bg-disabled),

package/style/theme/_filterpanel.scss

@@ -15,17 +15,48 @@
 
   .sto-filter.mat-expansion-panel {
     .mat-expansion-panel-header {
+      background-color: $background-color;
 
       &[aria-disabled=true] {
         color: $color;
       }
-    }
 
+      .mat-icon-button, .mat-button {
+        color: $icon-color;
+
+        &:hover {
+          color: $icon-hover;
+        }
+      }
+
+      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
+        background-color: transparent;
+      }
+
+      .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+        background-color: $selected-color;
+      }
 
-    &:not(.mat-expanded) {
-      // border-bottom: solid 1px $border-color;
+      &:not(.mat-expanded) {
+        border-bottom: solid 1px $border-color;
+      }
+
+      &.mat-expanded:hover {
+        // Y THO? Looks shit.
+        //background-color: $hover-color;
+        background-color: $background-color;
+      }
+
+      &.mat-expanded:focus {
+        // Y THO? Looks shit.
+        //background-color: $selected-color;
+        background-color: $background-color;
+      }
     }
 
+    .separator {
+      background-color: $border-color;
+    }
   }
 
 }

package/style/theme/_input-overrides.scss

@@ -1,18 +1,10 @@
 @use '~@angular/material' as mat;
 @import "theme";
 @import "typography";
-$ship-cove: #6687B8;
-$ship-cove-10: rgba($ship-cove, 0.1);
-$black: #000000;
-$black-4: rgba($black, 0.04);
-$black-8: rgba($black, 0.08);
-$black-12: rgba($black, 0.12);
+
 @mixin sto-input-override-theme($theme, $variables) {
   $color: map_get($variables, color);
-  $accent: map_get($variables, primary);
-  $form-field-bg: $ship-cove-10;
-  $underline-color: $black-12;
-  $hover-bg: map_get($variables, hover-color);
+  $form-field-bg: var(--bg-light);
   $border-radius: 4px;
   $icon-color: map_get($variables, icon);
   $icon-hover: map_get($variables, icon-hover);
@@ -47,8 +39,7 @@ $black-12: rgba($black, 0.12);
       background-color: transparent;
     }
 
-    .mat-form-field-flex:hover + .mat-form-field-underline {
-      background-color: $black-12;
+    .mat-form-field-flex:hover ~ .mat-form-field-underline {
     }
 
     &.mat-focused .mat-form-field-infix .mat-form-field-label {