@ngx-stoui/core 12.0.6 → 12.0.7

package/ngx-stoui.css

@@ -2,7 +2,7 @@
 @import url("https://fonts.googleapis.com/css?family=Material+Icons");
 @import url("https://fonts.googleapis.com/css?family=Material+Icons+Outlined");
 body:not(.sto-dark-theme) .sto-action-footer {
-  background-color: whitesmoke;
+  background-color: white;
   border-top: 1px solid gainsboro;
 }
 
@@ -12,7 +12,7 @@ body.sto-dark-theme .sto-action-footer {
 }
 
 body:not(.sto-dark-theme) .sto-header {
-  background-color: white !important;
+  background-color: #FFFFFF !important;
 }
 body:not(.sto-dark-theme) .sto-header--test-environment {
   border: 4px solid #ff9200;
@@ -24,13 +24,13 @@ body:not(.sto-dark-theme) .sto-header button {
   color: #007079;
 }
 body:not(.sto-dark-theme) .sto-header button:focus {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .sto-header button:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-header__actions--small {
-  background: white;
+  background: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-breadcrumb__home {
   color: #007079;
@@ -61,7 +61,7 @@ body:not(.sto-dark-theme) .sto-breadcrumb .separator {
   color: #97cace;
 }
 .sto-dark-theme .sto-header button:focus {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .sto-header button:hover {
   background-color: rgba(255, 255, 255, 0.04);
@@ -208,7 +208,7 @@ body:not(.sto-dark-theme) .sto-mdl-table__actions {
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row {
   border-bottom: 1px solid gainsboro;
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell {
   color: #3d3d3d;
@@ -217,21 +217,21 @@ body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell__resize-handle span
   background: gainsboro;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row {
   border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row--selected {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):hover, body:not(.sto-dark-theme) .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):focus {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__footer__row {
   border-bottom: 1px solid gainsboro;
   border-top: 1px solid gainsboro;
-  background: #fafafa;
+  background: #FFFFFF;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable {
   background-color: transparent;
@@ -257,19 +257,19 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatabl
   border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-center {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell {
   border-left: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
-  background-color: rgba(0, 0, 0, 0.12) !important;
+  background-color: #f7f7f7 !important;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row.active {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
   background-color: transparent;
@@ -283,13 +283,13 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   text-decoration: none;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager a:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages {
   margin: 0 2px;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
-  background: rgba(0, 0, 0, 0.12);
+  background: #f7f7f7;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
   color: gainsboro;
@@ -325,7 +325,7 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }
 .sto-dark-theme .sto-mdl-table__body__row--selected {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):hover, .sto-dark-theme .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):focus {
   background-color: rgba(255, 255, 255, 0.04);
@@ -368,10 +368,10 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   border-left: 1px solid rgba(255, 255, 255, 0.12);
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  background-color: #212121 !important;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row.active {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
   background-color: transparent;
@@ -391,7 +391,7 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   margin: 0 2px;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
-  background: rgba(255, 255, 255, 0.12);
+  background: #212121;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
   color: rgba(255, 255, 255, 0.12);
@@ -467,7 +467,7 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
 }
 
 body:not(.sto-dark-theme) .sto-daterange {
-  background-color: whitesmoke;
+  background-color: white;
 }
 body:not(.sto-dark-theme) .sto-daterange .sto-daterange__error--container {
   background-color: #f44336;
@@ -479,7 +479,7 @@ body:not(.sto-dark-theme) .sto-daterange-wrapper .sto-form__field.mat-focused .m
   color: #565656;
 }
 body:not(.sto-dark-theme) .sto-date.sto-date__popout {
-  background: whitesmoke;
+  background: white;
 }
 
 .sto-dark-theme .sto-daterange {
@@ -502,15 +502,15 @@ body:not(.sto-dark-theme) .sto-drawer__overlay {
   background: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer {
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-drawer__footer {
   border-top: 1px solid gainsboro;
-  background-color: whitesmoke;
+  background-color: white;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer__content {
-  background-color: #fafafa;
+  background-color: #FFFFFF;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer__header__infix a, body:not(.sto-dark-theme) .sto-drawer__header__infix mat-icon {
@@ -520,12 +520,12 @@ body:not(.sto-dark-theme) .sto-drawer__header__infix a:hover, body:not(.sto-dark
   color: #bebebe;
 }
 body:not(.sto-dark-theme) .sto-drawer__header__wrapper {
-  background-color: whitesmoke;
+  background-color: white;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel {
   color: #3d3d3d;
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item {
   color: #3d3d3d;
@@ -841,17 +841,17 @@ body:not(.sto-dark-theme) sto-preference-manager .filter-title small {
   color: #565656;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item:hover:not(.selected) {
-  background-color: rgba(0, 0, 0, 0.04) !important;
+  background-color: #eaeaea !important;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item.selected {
-  background-color: rgba(0, 0, 0, 0.12) !important;
+  background-color: #f7f7f7 !important;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item .preference-manager-list-item-title small {
   color: #565656;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-footer {
   border-top: 1px solid gainsboro;
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 
 .sto-dark-theme sto-preference-manager .filter-title small {
@@ -861,7 +861,7 @@ body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-ma
   background-color: rgba(255, 255, 255, 0.04) !important;
 }
 .sto-dark-theme .mat-menu-panel.preference-manager-list .preference-manager-list-item.selected {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  background-color: #212121 !important;
 }
 .sto-dark-theme .mat-menu-panel.preference-manager-list .preference-manager-list-item .preference-manager-list-item-title small {
   color: rgba(255, 255, 255, 0.7);
@@ -872,7 +872,7 @@ body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-ma
 }
 
 body:not(.sto-dark-theme) .sto-select-filter {
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 
 .sto-dark-theme .sto-select-filter {
@@ -1128,13 +1128,13 @@ body:not(.sto-dark-theme) .mat-option {
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-option:hover:not(.mat-option-disabled), body:not(.sto-dark-theme) .mat-option:focus:not(.mat-option-disabled) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-option.mat-active {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-option.mat-option-disabled {
@@ -1159,7 +1159,7 @@ body:not(.sto-dark-theme) .mat-pseudo-checkbox {
   color: #565656;
 }
 body:not(.sto-dark-theme) .mat-pseudo-checkbox::after {
-  color: #fafafa;
+  color: white;
 }
 body:not(.sto-dark-theme) .mat-pseudo-checkbox-disabled {
   color: #b0b0b0;
@@ -1183,7 +1183,7 @@ body:not(.sto-dark-theme) .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox
   background: #b0b0b0;
 }
 body:not(.sto-dark-theme) .mat-app-background, body:not(.sto-dark-theme).mat-app-background {
-  background-color: #fafafa;
+  background-color: white;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-elevation-z0 {
@@ -1510,7 +1510,7 @@ body:not(.sto-dark-theme) .mat-flat-button.mat-warn, body:not(.sto-dark-theme) .
   background-color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-button-disabled.mat-button-disabled {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-raised-button.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-fab.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary .mat-ripple-element {
   background-color: rgba(255, 255, 255, 0.1);
@@ -1554,14 +1554,14 @@ body:not(.sto-dark-theme) .mat-button-toggle {
   color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-button-toggle .mat-button-toggle-focus-overlay {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-appearance-standard {
   color: #3d3d3d;
   background: white;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
-  background-color: black;
+  background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
   border-left: solid 1px gainsboro;
@@ -1576,7 +1576,7 @@ body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard.mat-butto
   border-top: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-checked {
-  background-color: #e0e0e0;
+  background-color: #f7f7f7;
   color: #565656;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
@@ -1584,13 +1584,13 @@ body:not(.sto-dark-theme) .mat-button-toggle-checked.mat-button-toggle-appearanc
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled {
   color: #bebebe;
-  background-color: #eeeeee;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
   background: white;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled.mat-button-toggle-checked {
-  background-color: #bdbdbd;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
 body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard {
@@ -1617,13 +1617,13 @@ body:not(.sto-dark-theme) .mat-checkbox-frame {
   border-color: #565656;
 }
 body:not(.sto-dark-theme) .mat-checkbox-checkmark {
-  fill: #fafafa;
+  fill: white;
 }
 body:not(.sto-dark-theme) .mat-checkbox-checkmark-path {
-  stroke: #fafafa !important;
+  stroke: white !important;
 }
 body:not(.sto-dark-theme) .mat-checkbox-mixedmark {
-  background-color: #fafafa;
+  background-color: white;
 }
 body:not(.sto-dark-theme) .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, body:not(.sto-dark-theme) .mat-checkbox-checked.mat-primary .mat-checkbox-background {
   background-color: #007079;
@@ -1659,7 +1659,7 @@ body:not(.sto-dark-theme) .mat-checkbox:active:not(.mat-checkbox-disabled).mat-w
   background: #f44336;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip {
-  background-color: #e0e0e0;
+  background-color: #f7f7f7;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip .mat-chip-remove {
@@ -1923,7 +1923,7 @@ body:not(.sto-dark-theme) .mat-action-row {
   border-top-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]), body:not(.sto-dark-theme) .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]), body:not(.sto-dark-theme) .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 @media (hover: none) {
   body:not(.sto-dark-theme) .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
@@ -2116,17 +2116,17 @@ body:not(.sto-dark-theme) .mat-list-base .mat-subheader {
   color: #565656;
 }
 body:not(.sto-dark-theme) .mat-list-item-disabled {
-  background-color: #eeeeee;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-list-option:hover, body:not(.sto-dark-theme) .mat-list-option:focus,
 body:not(.sto-dark-theme) .mat-nav-list .mat-list-item:hover,
 body:not(.sto-dark-theme) .mat-nav-list .mat-list-item:focus,
 body:not(.sto-dark-theme) .mat-action-list .mat-list-item:hover,
 body:not(.sto-dark-theme) .mat-action-list .mat-list-item:focus {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-list-single-selected-option, body:not(.sto-dark-theme) .mat-list-single-selected-option:hover, body:not(.sto-dark-theme) .mat-list-single-selected-option:focus {
-  background: rgba(0, 0, 0, 0.12);
+  background: rgba(234, 234, 234, 0.12);
 }
 body:not(.sto-dark-theme) .mat-menu-panel {
   background: white;
@@ -2150,7 +2150,7 @@ body:not(.sto-dark-theme) .mat-menu-item:hover:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item.cdk-program-focused:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item.cdk-keyboard-focused:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item-highlighted:not([disabled]) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-paginator {
   background: white;
@@ -2179,28 +2179,28 @@ body:not(.sto-dark-theme) .mat-icon-button[disabled] .mat-paginator-last {
 }
 
 body:not(.sto-dark-theme) .mat-progress-bar-background {
-  fill: #bcd8da;
+  fill: #bfdbde;
 }
 body:not(.sto-dark-theme) .mat-progress-bar-buffer {
-  background-color: #bcd8da;
+  background-color: #bfdbde;
 }
 body:not(.sto-dark-theme) .mat-progress-bar-fill::after {
   background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-background {
-  fill: #f1f6f9;
+  fill: #f5fafc;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-buffer {
-  background-color: #f1f6f9;
+  background-color: #f5fafc;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
   background-color: #d5eaf4;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-background {
-  fill: #f9ccc9;
+  fill: #fcd0cd;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-buffer {
-  background-color: #f9ccc9;
+  background-color: #fcd0cd;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
   background-color: #f44336;
@@ -2271,7 +2271,7 @@ body:not(.sto-dark-theme) .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);
 }
 body:not(.sto-dark-theme) .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
-  background: rgba(0, 0, 0, 0.12);
+  background: rgba(234, 234, 234, 0.12);
 }
 body:not(.sto-dark-theme) .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
   color: #007079;
@@ -2289,7 +2289,7 @@ body:not(.sto-dark-theme) .mat-form-field .mat-select.mat-select-disabled .mat-s
   color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-drawer-container {
-  background-color: #fafafa;
+  background-color: white;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-drawer {
@@ -2437,7 +2437,7 @@ body:not(.sto-dark-theme) .mat-slider-vertical .mat-slider-ticks {
   background-image: repeating-linear-gradient(to bottom, rgba(61, 61, 61, 0.7), rgba(61, 61, 61, 0.7) 2px, transparent 0, transparent);
 }
 body:not(.sto-dark-theme) .mat-step-header.cdk-keyboard-focused, body:not(.sto-dark-theme) .mat-step-header.cdk-program-focused, body:not(.sto-dark-theme) .mat-step-header:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 @media (hover: none) {
   body:not(.sto-dark-theme) .mat-step-header:hover {
@@ -2699,7 +2699,7 @@ body:not(.sto-dark-theme) .mat-tab-nav-bar.mat-background-warn > .mat-tab-header
   background-color: rgba(255, 255, 255, 0.12);
 }
 body:not(.sto-dark-theme) .mat-toolbar {
-  background: whitesmoke;
+  background: white;
   color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-toolbar.mat-primary {
@@ -2747,7 +2747,7 @@ body:not(.sto-dark-theme) .mat-toolbar .mat-input-element {
   }
 }
 body:not(.sto-dark-theme) .mat-tooltip {
-  background: rgba(97, 97, 97, 0.9);
+  background: rgba(0, 0, 0, 0.9);
 }
 body:not(.sto-dark-theme) .mat-tree {
   background: white;
@@ -6758,10 +6758,6 @@ Below styles overrides Angular Material defaults
   line-height: 13px;
 }
 
-.mat-button, .mat-raised-button, .mat-flat-button, .mat-stroked-button {
-  text-transform: uppercase;
-}
-
 .mat-menu-item.active {
   color: #3f51b5;
 }
@@ -7166,4 +7162,8 @@ body.sto-dark-theme .sto-form__field--disabled .mat-select.mat-select-disabled .
 
 .negative-number .mat-input-element:disabled {
   color: #cc1414;
+}
+
+.mat-typography .mat-calendar-body-cell-content.mat-focus-indicator {
+  position: absolute !important;
 }

package/package.json

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

package/style/grid.scss

@@ -0,0 +1,16 @@
+@mixin grid($col-count: 12, $child-selector: 'grid-column', $margin: 0 24px 40px) {
+  display: grid;
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  margin: $margin;
+  grid-template-columns: repeat($col-count, 1fr);
+  .#{$child-selector} {
+    display: block;
+    grid-column: span 1;
+  }
+  @for $i from 1 through $col-count {
+    .#{$child-selector}-#{$i} {
+      grid-column: span $i;
+    }
+  }
+}

package/style/theme/_colors.scss

@@ -1,4 +1,5 @@
 @use '~@angular/material' as mat;
+@use 'sass:map';
 
 $sto-warning-map: (
   highlight: #FFE7D6,
@@ -165,31 +166,64 @@ $eds-light-foreground: (
   divider: #DCDCDC,
 );
 
-@function my-mat-light-theme-foreground() {
+@function theme-foreground($foreground) {
   @return (
-    base: map-get($eds-light-foreground, primary),
-    divider: map-get($eds-light-foreground, divider),
-    dividers: map-get($eds-light-foreground, divider),
-    disabled: map-get($eds-light-foreground, disabled),
-    disabled-button: map-get($eds-light-foreground, disabled),
-    disabled-text: map-get($eds-light-foreground, disabled),
-    hint-text: map-get($eds-light-foreground, disabled),
-    secondary-text: map-get($eds-light-foreground, secondary),
-    icon: map-get($eds-light-foreground, secondary),
-    icons: map-get($eds-light-foreground, secondary),
-    text: map-get($eds-light-foreground, primary),
-    slider-min: map-get($eds-light-foreground, primary),
-    slider-off: map-get($eds-light-foreground, disabled),
-    slider-off-active: map-get($eds-light-foreground, disabled),
+    base: map-get($foreground, primary),
+    divider: map-get($foreground, divider),
+    dividers: map-get($foreground, divider),
+    disabled: map-get($foreground, disabled),
+    disabled-button: map-get($foreground, disabled),
+    disabled-text: map-get($foreground, disabled),
+    hint-text: map-get($foreground, disabled),
+    secondary-text: map-get($foreground, secondary),
+    icon: map-get($foreground, secondary),
+    icons: map-get($foreground, secondary),
+    text: map-get($foreground, primary),
+    slider-min: map-get($foreground, primary),
+    slider-off: map-get($foreground, disabled),
+    slider-off-active: map-get($foreground, disabled),
   );
-}
+};
+
+$eds-light-background: (
+  default: #FFFFFF,
+  semi-transparent: rgba(255, 255, 255, 0.2),
+  light: #F7F7F7,
+  medium: #DCDCDC,
+  info: #D5EAF4,
+  warning: #FFE7D6,
+  danger: #FFC1C1,
+  scrim: rgba(0, 0, 0, 0.4),
+  overlay: rgba(0, 0, 0, 0.8),
+  disabled: #EAEAEA,
+  hover: #EAEAEA,
+  focus: #007079
+);
 
-;
+@function theme-background($background) {
+  @return (
+    app-bar:    map-get($background, default),
+    background: map-get($background, default),
+    hover:      map-get($background, hover),
+    card:       map-get($background, default),
+    dialog:     map-get($background, default),
+    disabled-button: map-get($background, disabled),
+    raised-button: map-get($background, default),
+    focused-button: map-get($background, focus),
+    selected-button: map.get($background, light),
+    selected-disabled-button: map-get($background, disabled),
+    disabled-button-toggle: map-get($background, disabled),
+    unselected-chip: map.get($background, light),
+    disabled-list-option: map-get($background, disabled),
+    tooltip: map.get($background, overlay),
+  )
+};
 
-$sto-light-fg: my-mat-light-theme-foreground();
+$sto-light-fg: theme-foreground($eds-light-foreground);
 
 
 $sto-indicators: (
   indicators: $sto-indicators-map,
-  foreground: $sto-light-fg
+  foreground: $sto-light-fg,
+  background: theme-background($eds-light-background)
 );

package/style/theme/_theme-variables.scss

@@ -31,7 +31,7 @@
   $card-bg: map_get($background, card);
   $hover-bg-color: mat.get-color-from-palette($background, 'hover');
   $hover-color: mat.get-color-from-palette($foreground, slider-off-active);
-  $selected-color: mat.get-color-from-palette($background, hover, 0.12);
+  $selected-color: mat.get-color-from-palette($background, selected-button);
   $border-color: mat.get-color-from-palette($foreground, divider);
   $app-bar: mat.get-color-from-palette($background, 'app-bar');