@sumaris-net/ngx-components 2.18.0-beta9 → 2.21.0-rc1

package/src/theme/_material.scss

@@ -1,9 +1,12 @@
 @use '@angular/material' as mat;
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
 
 // --------------------------------------------------
 // Standard material style
 // --------------------------------------------------
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 @include mat.all-component-themes($candy-light-theme);
 
 // --------------------------------------------------
@@ -11,32 +14,41 @@
 // --------------------------------------------------
 .mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
   background-color: var(--ion-color-secondary, $secondary);
+
   .mat-mdc-tab-link {
     color: var(--ion-color-secondary-contrast);
-    --mat-tab-header-label-text-tracking: normal;
+    --mat-tab-label-text-tracking: normal;
   }
 }
+
 .mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
   background-color: var(--ion-color-primary, $primary);
 }
-// Keep some style element that have changed after angular 15 migration
-.mdc-tab {
-  min-width: 160px !important;
-}
+
 .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-focus-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-hover-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
-  --mat-tab-header-pagination-icon-color: $text-color;
+  --mat-tab-active-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-active-focus-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-active-hover-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
+  --mat-tab-pagination-icon-color: $text-color;
 }
+
 .mat-mdc-tab-header {
-  --mat-tab-header-label-text-tracking: 0.0178571429em;
+  --mat-tab-label-text-tracking: 0.0178571429em;
 }
+
+// Fix height of the mat-latlong-field, otherwise there is one more pixel (because of the sign that use a mat-select)
 .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
-  transform: translateY(0px) !important;
+  height: auto;
+}
+
+// Allow to hidden the down arrow of the mat-select (e.g. used in autocomplete - desktop + multiple )
+.mat-mdc-select.mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper {
+  display: none;
+  visibility: hidden;
 }
 
+
 // Icon, Button
 .mat-button.mat-primary,
 .mat-icon.mat-primary,
@@ -46,6 +58,7 @@
 .mat-stroked-button.mat-primary {
   color: var(--ion-color-tertiary, $tertiary);
 }
+
 .mat-button.mat-secondary,
 .mat-icon.mat-secondary,
 .mat-icon-button.mat-secondary,
@@ -54,6 +67,7 @@
 .mat-stroked-button.mat-secondary {
   color: var(--ion-color-secondary, $secondary);
 }
+
 .mat-button.mat-accent,
 .mat-icon.mat-accent,
 .mat-icon-button.mat-accent,
@@ -62,20 +76,24 @@
 .mat-stroked-button.mat-accent {
   color: var(--ion-color-accent, $accent);
 }
+
 .mdc-button {
-  --mdc-typography-button-letter-spacing: normal;
-  --mdc-text-button-label-text-tracking: normal;
+  --mat-typography-button-letter-spacing: normal;
+  --mat-button-text-label-text-tracking: normal;
 }
+
 .mat-mdc-menu-item {
   --mat-menu-item-label-text-tracking: normal;
   --mat-menu-item-label-text-size: 14px;
   --mat-menu-item-icon-color: #0000008a;
 }
+
 .mat-mdc-option {
   --mat-option-label-text-tracking: normal;
   --mat-option-label-text-size: 16px;
   min-height: var(--mat-option-min-height, 48px);
 }
+
 .mat-mdc-select {
   --mat-select-trigger-text-font: inherit;
   --mat-select-trigger-text-tracking: normal;
@@ -88,10 +106,12 @@
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
 }
+
 .mat-badge-accent .mat-badge-content {
   background-color: var(--ion-color-accent);
   color: var(--ion-color-accent-contrast);
 }
+
 .mat-badge-warn .mat-badge-content {
   background-color: var(--ion-color-warning);
   color: var(--ion-color-warning-contrast);
@@ -107,9 +127,11 @@
   .mat-progress-bar-buffer {
     background-color: var(--background-color);
   }
-  .mat-progress-bar-primary.mat-progress-bar-fill:after  {
+
+  .mat-progress-bar-primary.mat-progress-bar-fill:after {
     background-color: var(--progress-primary-color);
   }
+
   .mat-progress-bar-secondary.mat-progress-bar-fill:after {
     background-color: var(--progress-secondary-color);
   }
@@ -160,7 +182,7 @@ mat-icon[slot] {
   mat-hint,
   .mat-hint,
   mat-error,
-  .mat-error{
+  .mat-error {
     font-size: 75%;
   }
 }
@@ -168,8 +190,29 @@ mat-icon[slot] {
 .mat-mdc-form-field-infix {
   label {
     width: 100% !important;
+
     mat-label {
       text-overflow: ellipsis;
     }
   }
 }
+
+// Latitude/Longitude component
+.mat-latlong-field {
+
+  .mat-mdc-select-value {
+    text-align: right;
+    padding-right: 0.25em;
+  }
+  .mat-mdc-select-placeholder {
+    transition: none !important;
+    color: var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color));
+  }
+
+}
+
+// Mat dialog (e.g. timepicker)
+.mat-mdc-dialog-container {
+  --mat-dialog-container-color: var(--ion-background-color);
+  --mat-dialog-supporting-text-color: var(--ion-text-color);
+}

package/src/theme/_mixins.scss

@@ -1,5 +1,11 @@
+@use 'functions' as *;
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use 'ngx-components.globals' as *;
 @use '@angular/material' as mat;
 
+@forward "functions";
+
 @mixin font-size($size) {
   font-size: calculateRem($size);
 }
@@ -45,9 +51,9 @@
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
   --ion-color-base: var(--ion-color-#{""+$color-name}, #{$base}) !important;
-  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
+  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb, #{color-to-rgb-list($base)});
   --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)});
   --ion-color-shade: var(--ion-color-#{""+$color-name}-shade, #{$shade}) !important;
   --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
@@ -118,12 +124,16 @@
 
   --expansion-panel-padding: var(--ion-padding);
   --expansion-panel-header-padding: var(--ion-padding);
+  --mat-expansion-container-background-color: var(--ion-background-color);
+  --mat-expansion-container-text-color: var(--ion-text-color);
 
   --mat-tab-link-height: #{$mat-tab-link-height};
   --mat-tab-bar-height: #{$mat-tab-bar-height};
 
   --mat-toolbar-height: #{$mat-toolbar-height-desktop};
-  --mat-paginator-height: mat.$paginator-height;
+  --mat-toolbar-standard-height: #{$mat-toolbar-height-desktop};
+  --mat-toolbar-mobile-height: #{$mat-toolbar-height-mobile};
+  --mat-paginator-height: $paginator-height;
   --mat-option-min-height: #{$mat-option-min-height};
   --mat-option-max-height: #{$mat-option-max-height};
   --mat-toolbar-background-color: var(--ion-toolbar-background);
@@ -131,6 +141,8 @@
   --mat-toolbar-container-text-color: var(--ion-text-color);
   --mat-table-background-color: var(--ion-background-color);
 
+  --as-gutter-background-color: var(--ion-toolbar-background);
+
   --app-table-header-height: #{$app-table-header-height};
   --app-paginator-height: #{$app-paginator-height};
   --app-toolbar-height: #{$app-toolbar-height};
@@ -141,17 +153,39 @@
   --app-form-color-disabled: #{$app-form-color-disabled};
   --app-form-color-computed: #{$app-form-color-computed};
   --app-form-field-background-color: #{$app-form-field-background-color};
-  --app-form-field-background-color-shade: #{$app-form-color-background-color-shade};
+  --app-form-field-background-color-rgb: #{$app-form-field-background-color-rgb};
+  --app-form-field-background-color-shade: #{$app-form-field-background-color-shade};
   --app-form-field-focus-background-color: #{$app-form-field-focus-background-color};
   --app-form-field-disabled-background-color: #{$app-form-field-disabled-background-color};
   --app-form-field-label-color: #{$app-form-field-label-color};
   --app-form-field-disabled-label-color: #{$app-form-field-disabled-label-color};
   --app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
   --app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
+
+  --ion-color-step-50: #f3f3f3;
+  --ion-color-step-100: #e7e7e7;
+  --ion-color-step-150: #dbdbdb;
+  --ion-color-step-200: #d0d0d0;
+  --ion-color-step-250: #c4c4c4;
+  --ion-color-step-300: #b8b8b8;
+  --ion-color-step-350: #acacac;
+  --ion-color-step-400: #a0a0a0;
+  --ion-color-step-450: #949494;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #7d7d7d;
+  --ion-color-step-600: #666666;
+  --ion-color-step-650: #646464;
+  --ion-color-step-700: #595959;
+  --ion-color-step-750: #4d4d4d;
+  --ion-color-step-800: #414141;
+  --ion-color-step-850: #363636;
+  --ion-color-step-900: #2a2a2a;
+  --ion-color-step-950: #1e1e1e;
 }
 
 @mixin css-variables-to-root-mobile() {
   --mat-toolbar-height: #{$mat-toolbar-height-mobile};
+  --mat-toolbar-standard-height: #{$mat-toolbar-height-mobile};
 
   // Disable form footer, in mobile
   --app-form-buttons-bar-height: 0px;
@@ -174,6 +208,7 @@
   // Inverse background/text color
   --ion-background-color: #{$text-color-value};
   --ion-background-color-rgb: #{$text-color-rgb-value};
+  --ion-card-background-color: #{$text-color-value};
   --ion-text-color: #{$background-color-value};
   --ion-text-color-rgb: #{$background-color-rgb-value};
   --app-form-color: #{$background-color-value};

package/src/theme/_ngx-components.forms.scss

@@ -1,3 +1,6 @@
+@use "mixins" as *;
+@use "ionic.globals" as *;
+@use "ngx-components.globals" as *;
 
 // --------------------------------------------------
 // Material Forms
@@ -6,35 +9,35 @@
 form.form-container {
   @include font-size(16px);
 
-  --mdc-icon-button-icon-color: var(--app-form-field-label-color);
-
-  --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
-  --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
-  --mdc-filled-text-field-input-text-color: var(--ion-text-color);
-  --mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-caret-color: var(--ion-text-color);
-  --mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-label-text-tracking: normal;
-  --mdc-filled-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
-  --mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
-  --mdc-filled-text-field-active-indicator-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-active-indicator-color: var(--ion-text-color);
-  --mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
-
-  --mdc-outlined-text-field-input-text-color: var(--ion-text-color);
-  --mdc-outlined-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-caret-color: var(--ion-text-color);
-  --mdc-outlined-text-field-label-text-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-label-text-tracking: normal;
-  --mdc-outlined-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
-  --mdc-outlined-text-field-disabled-input-text-color: var(--app-form-color-disabled);
-  --mdc-outlined-text-field-outline-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-hover-outline-color: var(--ion-text-color);
-  --mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
+  --mat-icon-button-icon-color: var(--app-form-field-label-color);
+
+  --mat-form-field-filled-container-color: var(--app-form-field-background-color);
+  --mat-form-field-filled-disabled-container-color: var(--app-form-field-disabled-background-color);
+  --mat-form-field-filled-input-text-color: var(--ion-text-color);
+  --mat-form-field-filled-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-caret-color: var(--ion-text-color);
+  --mat-form-field-filled-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-label-text-tracking: normal;
+  --mat-form-field-filled-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mat-form-field-filled-disabled-input-text-color: var(--app-form-color-disabled);
+  --mat-form-field-filled-active-indicator-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-active-indicator-color: var(--ion-text-color);
+  --mat-form-field-filled-focus-label-text-color: var(--ion-color-primary);
+  --mat-form-field-filled-focus-active-indicator-color: var(--ion-color-primary);
+
+  --mat-form-field-outlined-input-text-color: var(--ion-text-color);
+  --mat-form-field-outlined-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-caret-color: var(--ion-text-color);
+  --mat-form-field-outlined-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-label-text-tracking: normal;
+  --mat-form-field-outlined-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mat-form-field-outlined-disabled-input-text-color: var(--app-form-color-disabled);
+  --mat-form-field-outlined-outline-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-hover-outline-color: var(--ion-text-color);
+  --mat-form-field-outlined-focus-label-text-color: var(--ion-color-primary);
+  --mat-form-field-outlined-focus-outline-color: var(--ion-color-primary);
 
   --mat-checkbox-label-text-color: var(--ion-text-color);
   --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
@@ -49,12 +52,12 @@ form.form-container {
   --mat-select-enabled-trigger-text-color: var(--ion-text-color);
   --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
 
-  --mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-selected-focus-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-hover-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-focus-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-focus-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-focus-track-color: var(--app-form-field-background-color-shade);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
@@ -84,21 +87,21 @@ form.form-container {
     mat-icon[matPrefix],
     .mat-mdc-form-field-icon-prefix {
 
-      --mdc-icon-button-icon-size: 24px;
-      --mdc-icon-button-icon-color: inherit;
-      --mdc-icon-button-state-layer-size: 48px;
-      --mdc-icon-button-margin-vertical: 12px;
+      --mat-icon-button-icon-size: 24px;
+      --mat-icon-button-icon-color: inherit;
+      --mat-icon-button-state-layer-size: 48px;
+      --mat-icon-button-margin-vertical: 12px;
 
       ion-icon, .mat-icon {
-        font-size: var(--mdc-icon-button-icon-size) !important;
+        font-size: var(--mat-icon-button-icon-size) !important;
         line-height: 1.125;
-        height: var(--mdc-icon-button-icon-size);
-        width: var(--mdc-icon-button-icon-size);
-        margin-left: var(--mdc-icon-button-margin-vertical);
-        margin-right: var(--mdc-icon-button-margin-vertical);
+        height: var(--mat-icon-button-icon-size);
+        width: var(--mat-icon-button-icon-size);
+        margin-left: var(--mat-icon-button-margin-vertical);
+        margin-right: var(--mat-icon-button-margin-vertical);
         position: relative;
-        color: var(--mdc-icon-button-icon-color);
-        fill: var(--mdc-icon-button-icon-color);
+        color: var(--mat-icon-button-icon-color);
+        fill: var(--mat-icon-button-icon-color);
       }
     }
 
@@ -108,25 +111,25 @@ form.form-container {
       white-space: nowrap;
 
       .mat-mdc-icon-button {
-        --mdc-icon-button-state-layer-size: 24px;
-        --mdc-icon-button-icon-size: 16px;
-        --mdc-icon-button-padding: 4px;
-        padding: var(--mdc-icon-button-padding);
+        --mat-icon-button-state-layer-size: 24px;
+        --mat-icon-button-icon-size: 16px;
+        --mat-icon-button-padding: 4px;
+        padding: var(--mat-icon-button-padding);
 
         &.large {
-          --mdc-icon-button-state-layer-size: 48px;
-          --mdc-icon-button-icon-size: 24px;
-          --mdc-icon-button-padding: 12px;
+          --mat-icon-button-state-layer-size: 48px;
+          --mat-icon-button-icon-size: 24px;
+          --mat-icon-button-padding: 12px;
         }
 
         ion-icon, .mat-icon {
-          height: var(--mdc-icon-button-icon-size);
-          width: var(--mdc-icon-button-icon-size);
-          font-size: var(--mdc-icon-button-icon-size);
+          height: var(--mat-icon-button-icon-size);
+          width: var(--mat-icon-button-icon-size);
+          font-size: var(--mat-icon-button-icon-size);
         }
 
         .mat-mdc-button-touch-target {
-          width: var(--mdc-icon-button-state-layer-size);
+          width: var(--mat-icon-button-state-layer-size);
         }
       }
 
@@ -149,12 +152,18 @@ form.form-container {
       white-space: normal;
     }
 
+
     // Used to customize mat-boolean-field
     &.mat-boolean-field-checkbox {
-      --mdc-checkbox-state-layer-size: 20px;
+      --mat-checkbox-state-layer-size: 20px;
+
+      .mdc-text-field--outlined .mat-mdc-form-field-infix,
+      .mdc-text-field--no-label .mat-mdc-form-field-infix{
+        padding-top: var(--mat-form-field-container-vertical-padding);
+      }
 
       .mat-mdc-form-field-infix {
-        padding-top: 16px;
+        padding-top: var(--mat-form-field-filled-with-label-container-padding-top);
       }
 
       .mdc-floating-label {
@@ -165,14 +174,14 @@ form.form-container {
     }
 
     &.mat-boolean-field-radio {
-      --mdc-radio-state-layer-size: 20px;
-      --mdc-radio-radio-touch-target-size: 24px;
+      --mat-radio-state-layer-size: 20px;
+      --mat-radio-radio-touch-target-size: 24px;
       --mat-mdc-form-field-label-offset-x: 0px;
 
       // Fix outline appearance
       &.mat-mdc-form-field-has-icon-prefix {
         .mat-mdc-text-field-wrapper {
-          --mat-mdc-form-field-label-offset-x: var(--mdc-icon-button-icon-size, 24px);
+          --mat-mdc-form-field-label-offset-x: var(--mat-icon-button-icon-size, 24px);
         }
       }
 
@@ -184,8 +193,8 @@ form.form-container {
         }
 
         .mat-mdc-radio-touch-target {
-          height: var(--mdc-radio-radio-touch-target-size, 48px);
-          width: var(--mdc-radio-radio-touch-target-size, 48px);
+          height: var(--mat-radio-radio-touch-target-size, 48px);
+          width: var(--mat-radio-radio-touch-target-size, 48px);
         }
       }
 
@@ -194,6 +203,13 @@ form.form-container {
     // Increase padding top, when having buttons
     &:has(.mat-form-field-buttons),
     &.mat-boolean-field-button {
+
+      .mdc-text-field--outlined .mat-mdc-form-field-infix,
+      .mdc-text-field--no-label .mat-mdc-form-field-infix {
+        padding-top: calc(var(--mat-form-field-container-vertical-padding, 0px) + 1px);
+        --mat-form-field-container-vertical-padding: 2px;
+      }
+
       .mat-mdc-form-field-infix {
         padding-top: calc(var(--mat-form-field-filled-with-label-container-padding-top, 0px) + 4px);
       }
@@ -216,7 +232,7 @@ form.form-container {
   .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
   .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
   .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
-    --mdc-filled-text-field-input-text-color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
+    --mat-form-field-filled-input-text-color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
     color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
     font-style: italic;
   }
@@ -232,26 +248,27 @@ form.form-container {
   // Ckeckbox
   .mat-mdc-checkbox {
     --mat-checkbox-label-text-color: var(--app-form-color);
-    --mdc-checkbox-unselected-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-focus-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-hover-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-pressed-icon-color: var(--app-form-color);
   }
 
   // Radio
   .mat-mdc-radio-button {
     --mat-checkbox-label-text-color: var(--app-form-color);
-
-    --mdc-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
-    --mdc-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
-    --mdc-radio-unselected-hover-icon-color: var(--app-form-color);
-    --mdc-radio-unselected-focus-icon-color: var(--app-form-color);
-    --mdc-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-    --mdc-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-    --mdc-radio-selected-hover-icon-color: var(--ion-color-accent);
-    --mdc-radio-selected-icon-color: var(--ion-color-accent);
-    --mdc-radio-selected-focus-icon-color: var(--ion-color-primary);
-    --mdc-radio-selected-pressed-icon-color: var(--ion-color-accent);
+    --mat-radio-label-text-color: var(--app-form-color);
+
+    --mat-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mat-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mat-radio-unselected-hover-icon-color: var(--app-form-color);
+    --mat-radio-unselected-focus-icon-color: var(--app-form-color);
+    --mat-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mat-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mat-radio-selected-hover-icon-color: var(--ion-color-accent);
+    --mat-radio-selected-icon-color: var(--ion-color-accent);
+    --mat-radio-selected-focus-icon-color: var(--ion-color-primary);
+    --mat-radio-selected-pressed-icon-color: var(--ion-color-accent);
     --mat-radio-ripple-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);;
     --mat-radio-checked-ripple-color: var(--ion-color-accent);
     --mat-radio-disabled-label-color: var(--app-form-color-disabled, rgba(black, 0.38));
@@ -259,13 +276,13 @@ form.form-container {
 
   // Slide
   .mat-mdc-slide-toggle {
-    --mdc-switch-selected-focus-handle-color: var(--ion-color-accent);
-    --mdc-switch-selected-icon-color: var(--ion-color-accent-contrast);
-    --mdc-switch-selected-hover-handle-color: var(--ion-color-accent-contrast);
-    --mdc-switch-selected-pressed-handle-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-focus-handle-color: var(--ion-color-accent);
+    --mat-slide-toggle-selected-icon-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-hover-handle-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-pressed-handle-color: var(--ion-color-accent-contrast);
 
     &.mat-mdc-slide-toggle-checked:not(.cdk-focused){
-      --mdc-switch-selected-icon-color: var(--ion-color-accent);
+      --mat-slide-toggle-selected-icon-color: var(--ion-color-accent);
     }
   }
 
@@ -280,9 +297,18 @@ ion-grid.form-container {
     padding: 0;
 
     & > ion-col {
-      // No top/bottom padding between grid cell
-      padding-bottom: 0;
-      padding-top: 0;
+      // No top/bottom padding between grid cell (by default). Can be overridden
+      --padding-top: 0px;
+      --padding-bottom: 0px;
+      padding-top: var(--padding-top, 0px);
+      padding-bottom: var(--padding-bottom, 0px);
+
+      &.ion-padding-top {
+        --padding-top: var(--ion-padding, 16px);
+      }
+      &.ion-padding-bottom {
+        --padding-bottom: var(--ion-padding, 16px);
+      }
 
       & > ion-label {
         color: var(--ion-color-primary100);
@@ -347,7 +373,7 @@ html.dark {
     .mat-mdc-option {
       --mat-option-label-text-color: var(--ion-text-color);
       --mat-option-selected-state-label-text-color: var(--ion-color-primary);
-      --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
+      --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--ion-color-primary);
       color: var(--mat-option-label-text-color) !important;
     }
   }

package/src/theme/_ngx-components.globals.scss

@@ -1,3 +1,5 @@
+@use "ionic/ionic.theme.default" as *;
+
 $app-menu-width: 300px !default;
 
 $app-toolbar-height: 60px !default; // = $mat-toolbar-height-mobile + 4 (progress bar);
@@ -21,7 +23,8 @@ $app-form-field-disabled-label-color: rgba(#{$text-color-rgb}, 0.38) !default;
 
 // Form's field background
 $app-form-field-background-color: #f5f5f5 !default; // Field background
-$app-form-color-background-color-shade: #b9b9b9 !default; // Darker color (e.g. for toggle slide bar - see settings field 'dark mode')
+$app-form-field-background-color-rgb: 245, 245, 245 !default; // Field background (RGB)
+$app-form-field-background-color-shade: #b9b9b9 !default; // Darker color (e.g. for toggle slide bar - see settings field 'dark mode')
 $app-form-field-focus-background-color: transparent !default; // Focused field background
 $app-form-field-disabled-background-color: #fafafa !default;