@softheon/armature 19.23.2 → 21.0.1

package/assets/styles/_utility.scss

@@ -22,11 +22,27 @@ $spacing-directions: (
         $selector: ".#{$type}-#{$dir}-#{$i}, [#{$type}-#{$dir}-#{$i}]";
         #{$selector} {
           @if $dir == a {
-            #{if($type == m, margin, padding)}: #{$i}px !important;
+            @if $type == m {
+              margin: #{$i}px !important;
+            } @else {
+              padding: #{$i}px !important;
+            }
           } @else {
-            $prop-list: if(meta.type-of($props) == 'list', $props, ($props));
-            @each $prop in $prop-list {
-              #{if($type == m, margin, padding)}-#{$prop}: #{$i}px !important;
+            // Handle the case where $props might be a list or single value
+            @if meta.type-of($props) == 'list' {
+              @each $prop in $props {
+                @if $type == m {
+                  margin-#{$prop}: #{$i}px !important;
+                } @else {
+                  padding-#{$prop}: #{$i}px !important;
+                }
+              }
+            } @else {
+              @if $type == m {
+                margin-#{$props}: #{$i}px !important;
+              } @else {
+                padding-#{$props}: #{$i}px !important;
+              }
             }
           }
         }
@@ -37,9 +53,12 @@ $spacing-directions: (
           @if $dir == a {
             margin: auto !important;
           } @else {
-            $prop-list: if(meta.type-of($props) == 'list', $props, ($props));
-            @each $prop in $prop-list {
-              margin-#{$prop}: auto !important;
+            @if meta.type-of($props) == 'list' {
+              @each $prop in $props {
+                margin-#{$prop}: auto !important;
+              }
+            } @else {
+              margin-#{$props}: auto !important;
             }
           }
         }

package/assets/styles/b2b/_b2b-inputs-override.scss

@@ -1,8 +1,8 @@
 /** Input Mat CSS Override  */
 
 :root {
-  --mdc-outlined-text-field-outline-color: var(--sftn-b2b-input-border-color, #f3f3f3); // Default border color
-  --mdc-outlined-text-field-outline-width: 1px; // Border thickness
+  --mat-form-field-outlined-outline-color: var(--sftn-b2b-input-border-color, #f3f3f3); // Default border color
+  --mat-form-field-outlined-outline-width: 1px; // Border thickness
 }
 
 .mat-mdc-form-field:not(.table-search-field) {
@@ -45,12 +45,12 @@
 .mdc-notched-outline > .mdc-notched-outline__notch {
   margin-left: -9px !important;
   border-top: 1px solid transparent !important;
-  border-top-color: var(--mdc-outlined-text-field-outline-color, #f3f3f3) !important;
+  border-top-color: var(--mat-form-field-outlined-outline-color, #f3f3f3) !important;
   border-top-width: 1px !important;
 }
 
 .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):hover .mdc-notched-outline > .mdc-notched-outline__notch {
-  border-top-color: var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface)) !important;
+  border-top-color: var(--mat-form-field-outlined-hover-outline-color, var(--mat-sys-on-surface)) !important;
 }
 
 .mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--outlined {
@@ -59,7 +59,7 @@
   &:not(.mdc-text-field--invalid).mdc-text-field--focused {
     .mdc-notched-outline > .mdc-notched-outline__notch {
       border-top-color: var(--primary-color-500-parts) !important;
-      border-top-width: var(--mdc-outlined-text-field-focus-outline-width, 2px) !important;
+      border-top-width: var(--mat-form-field-outlined-focus-outline-width, 2px) !important;
 
       > .mat-mdc-floating-label {
         translate: -1px -11px !important;
@@ -78,9 +78,9 @@ mat-form-field.sof-form-field.mat-form-field-invalid div.mdc-notched-outline > .
 // Date Picker Override
 .mat-datepicker-toggle {
   .mat-mdc-icon-button.mat-mdc-button-base {
-    --mdc-icon-button-state-layer-size: var(--sftn-input-suffix-icon-height, 36px) !important;
-    width: var(--mdc-icon-button-state-layer-size);
-    height: var(--mdc-icon-button-state-layer-size);
+    --mat-icon-button-state-layer-size: var(--sftn-input-suffix-icon-height, 36px) !important;
+    width: var(--mat-icon-button-state-layer-size);
+    height: var(--mat-icon-button-state-layer-size);
     padding: 12px;
     display: flex;
     align-items: center;

package/assets/styles/b2b/_b2b-tabs.scss

@@ -1,10 +1,10 @@
 .mat-mdc-tab-group.sof-tabs-b2b {
   .mat-mdc-tab-header {
-    --mat-tab-header-label-text-font: var(--sftn-font-family);
-    --mat-tab-header-label-text-size: 14px;
-    --mat-tab-header-label-text-tracking: 0.5px;
-    --mat-tab-header-label-text-line-height: 36px;
-    --mat-tab-header-label-text-weight: 500;
+    --mat-tab-label-text-font: var(--sftn-font-family);
+    --mat-tab-label-text-size: 14px;
+    --mat-tab-label-text-tracking: 0.5px;
+    --mat-tab-label-text-line-height: 36px;
+    --mat-tab-label-text-weight: 500;
   }
 
   .mat-mdc-tab-label-container {
@@ -28,7 +28,7 @@
 
   &.narrow {
     .mat-mdc-tab-header {
-      --mdc-secondary-navigation-tab-container-height: 36px;
+      --mat-tab-container-height: 36px;
     }
 
     .mdc-tab {

package/assets/styles/deprecated/_button-deprecated.scss

@@ -5,8 +5,8 @@
 
 button.mat-mdc-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-text-button-label-text-color: none !important;
-  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
+  --mat-button-text-label-text-color: none !important;
+  --mat-button-text-ripple-color: rgba(0, 0, 0, 0.05) !important;
 
   &.sof-button {
     padding: 0px 24px !important;
@@ -278,8 +278,8 @@ button.mat-mdc-button {
 
 button.mat-mdc-unelevated-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-filled-button-label-text-color: none !important;
-  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1) !important;
+  --mat-button-filled-label-text-color: none !important;
+  --mat-button-filled-ripple-color: rgba(255, 255, 255, 0.1) !important;
 
 
   &.sof-flat-button {
@@ -585,8 +585,8 @@ button.mat-mdc-unelevated-button {
 
 button.mat-mdc-outlined-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-outlined-button-label-text-color: none !important;
-  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
+  --mat-button-outlined-label-text-color: none !important;
+  --mat-button-outlined-ripple-color: rgba(0, 0, 0, 0.05) !important;
 
   &.sof-stroked-button {
     padding: 0px 24px !important;

package/assets/styles/material-override/_checkbox.scss

@@ -13,7 +13,7 @@
   $sof-checkbox-size: 20px;
 
   .mdc-checkbox {
-    --mdc-checkbox-state-layer-size: #{$sof-checkbox-size} !important;
+    --mat-checkbox-state-layer-size: #{$sof-checkbox-size} !important;
     margin: 0 !important;
     padding: 0 !important;
     width: calc($sof-checkbox-size + 2px) !important;

package/assets/styles/material-override/_radio-button.scss

@@ -8,19 +8,19 @@
 
   $sof-radio-size: 20px;
 
-  --mdc-radio-disabled-selected-icon-color: #{map.get(theme.$arm-neutral, 300)} !important;
-  --mdc-radio-disabled-unselected-icon-color: #{map.get(theme.$arm-neutral, 300)} !important;
-  --mdc-radio-disabled-selected-icon-opacity: 1 !important;
-  --mdc-radio-disabled-unselected-icon-opacity: 1 !important;
+  --mat-radio-disabled-selected-icon-color: #{map.get(theme.$arm-neutral, 300)} !important;
+  --mat-radio-disabled-unselected-icon-color: #{map.get(theme.$arm-neutral, 300)} !important;
+  --mat-radio-disabled-selected-icon-opacity: 1 !important;
+  --mat-radio-disabled-unselected-icon-opacity: 1 !important;
 
-  --mdc-radio-unselected-icon-color: #{map.get(theme.$arm-neutral, 500)} !important;
-  --mdc-radio-unselected-hover-icon-color: #{map.get(theme.$arm-neutral, 700)} !important;
-  --mdc-radio-unselected-pressed-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
+  --mat-radio-unselected-icon-color: #{map.get(theme.$arm-neutral, 500)} !important;
+  --mat-radio-unselected-hover-icon-color: #{map.get(theme.$arm-neutral, 700)} !important;
+  --mat-radio-unselected-pressed-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
 
-  --mdc-radio-selected-icon-color: #{map.get(theme.$arm-primary, 500)} !important;
-  --mdc-radio-selected-hover-icon-color: #{map.get(theme.$arm-primary, 700)} !important;
-  --mdc-radio-selected-focus-icon-color: #{map.get(theme.$arm-primary, 800)} !important;
-  --mdc-radio-selected-pressed-icon-color: #{map.get(theme.$arm-primary, 800)} !important;
+  --mat-radio-selected-icon-color: #{map.get(theme.$arm-primary, 500)} !important;
+  --mat-radio-selected-hover-icon-color: #{map.get(theme.$arm-primary, 700)} !important;
+  --mat-radio-selected-focus-icon-color: #{map.get(theme.$arm-primary, 800)} !important;
+  --mat-radio-selected-pressed-icon-color: #{map.get(theme.$arm-primary, 800)} !important;
 
   --mat-radio-ripple-color: transparent !important;
   --mat-radio-checked-ripple-color: transparent !important;
@@ -54,10 +54,10 @@
   }
 
   &[color="neutral"] {
-    --mdc-radio-selected-icon-color: #{map.get(theme.$arm-neutral, 500)} !important;
-    --mdc-radio-selected-hover-icon-color: #{map.get(theme.$arm-neutral, 700)} !important;
-    --mdc-radio-selected-focus-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
-    --mdc-radio-selected-pressed-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
+    --mat-radio-selected-icon-color: #{map.get(theme.$arm-neutral, 500)} !important;
+    --mat-radio-selected-hover-icon-color: #{map.get(theme.$arm-neutral, 700)} !important;
+    --mat-radio-selected-focus-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
+    --mat-radio-selected-pressed-icon-color: #{map.get(theme.$arm-neutral, 800)} !important;
 
     &:hover {
       .mdc-radio:not(.mdc-radio--disabled) {
@@ -77,7 +77,7 @@
   }
 
   .mdc-radio {
-    --mdc-radio-state-layer-size: #{$sof-radio-size};
+    --mat-radio-state-layer-size: #{$sof-radio-size};
     margin: 0 !important;
     padding: 0 !important;
     width: calc($sof-radio-size) !important;

package/assets/styles/material-override/_slider.scss

@@ -4,91 +4,91 @@
 
 mat-slider.sof-slider {
   &[color="primary"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-primary, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-primary, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-primary, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-primary, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-primary, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-primary, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-primary, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-primary, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-primary, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-primary, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-primary, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
   }
 
   &[color="accent"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-accent, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-accent, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-accent, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-accent, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-accent, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-accent, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-accent, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-accent, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-accent, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-accent, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-accent, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
   }
 
   &[color="warn"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-warn, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-warn, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-warn, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-warn, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-warn, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-warn, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-warn, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-warn, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-warn, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-warn, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-warn, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
   }
 
   &[color="success"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-success, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-success, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-success, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-success, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-success, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-success, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-success, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-success, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-success, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-success, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-success, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
   }
 
   &[color="info"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-info, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-info, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-info, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-info, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-info, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-info, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-info, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-info, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-info, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-info, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-info, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
   }
 
   &[color="error"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-error, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-error, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-error, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-error, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-error, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-error, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-error, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-error, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-error, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-error, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-error, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
   }
 
   &[color="neutral"] {
-    --mdc-slider-handle-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-focus-handle-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-hover-handle-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-active-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-handle-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-focus-handle-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-hover-handle-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-active-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-inactive-track-color: #{map.get(theme.$arm-neutral, 500)};
+    --mat-slider-with-tick-marks-inactive-container-color: #{map.get(theme.$arm-neutral, 500)};
     --mat-mdc-slider-ripple-color: #{map.get(theme.$arm-neutral, 500)};
     --mat-mdc-slider-hover-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.05);
     --mat-mdc-slider-focus-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.2);
   }
 
-  --mdc-slider-active-track-height: 10px;
-  --mdc-slider-inactive-track-height: 10px;
+  --mat-slider-active-track-height: 10px;
+  --mat-slider-inactive-track-height: 10px;
 
   &.mat-mdc-slider {
     max-width: 300px;

package/assets/styles/material-override/_switch.scss

@@ -57,17 +57,17 @@ mat-slide-toggle {
 
 mat-slide-toggle.sof-slide-toggle {
   &.mat-primary {
-    --mdc-switch-selected-focus-state-layer-color: var(--primary-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--primary-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--primary-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--primary-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--primary-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--primary-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--primary-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--primary-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--primary-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--primary-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--primary-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--primary-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--primary-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--primary-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--primary-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--primary-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--primary-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--primary-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--primary-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--primary-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -77,17 +77,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-accent {
-    --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--accent-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--accent-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--accent-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--accent-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--accent-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--accent-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--accent-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--accent-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--accent-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--accent-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--accent-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--accent-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--accent-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--accent-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--accent-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--accent-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--accent-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--accent-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--accent-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -97,17 +97,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-warn {
-    --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--warn-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--warn-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--warn-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--warn-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--warn-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--warn-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--warn-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--warn-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--warn-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--warn-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--warn-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--warn-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--warn-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--warn-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--warn-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--warn-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--warn-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--warn-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--warn-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -117,17 +117,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-success {
-    --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--success-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--success-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--success-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--success-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--success-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--success-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--success-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--success-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--success-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--success-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--success-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--success-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--success-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--success-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--success-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--success-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--success-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--success-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--success-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--success-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -137,17 +137,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-error {
-    --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--error-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--error-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--error-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--error-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--error-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--error-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--error-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--error-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--error-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--error-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--error-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--error-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--error-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--error-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--error-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--error-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--error-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--error-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--error-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--error-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -157,17 +157,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-info {
-    --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--info-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--info-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--info-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--info-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--info-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--info-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--info-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--info-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--info-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--info-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--info-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--info-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--info-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--info-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--info-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--info-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--info-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--info-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--info-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--info-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {
@@ -177,17 +177,17 @@ mat-slide-toggle.sof-slide-toggle {
   }
 
   &.mat-neutral {
-    --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts) !important;
-    --mdc-switch-selected-handle-color: var(--neutral-color-300-parts) !important;
-    --mdc-switch-selected-hover-state-layer-color: var(--neutral-color-300-parts) !important;
-    --mdc-switch-selected-pressed-state-layer-color: var(--neutral-color-300-parts) !important;
-    --mdc-switch-selected-focus-handle-color: var(--neutral-color-600-parts) !important;
-    --mdc-switch-selected-hover-handle-color: var(--neutral-color-600-parts) !important;
-    --mdc-switch-selected-pressed-handle-color: var(--neutral-color-600-parts) !important;
-    --mdc-switch-selected-focus-track-color: var(--neutral-color-500-parts) !important;
-    --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts) !important;
-    --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts) !important;
-    --mdc-switch-selected-track-color: var(--neutral-color-500-parts) !important;
+    --mat-slide-toggle-selected-focus-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mat-slide-toggle-selected-handle-color: var(--neutral-color-300-parts) !important;
+    --mat-slide-toggle-selected-hover-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mat-slide-toggle-selected-pressed-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mat-slide-toggle-selected-focus-handle-color: var(--neutral-color-600-parts) !important;
+    --mat-slide-toggle-selected-hover-handle-color: var(--neutral-color-600-parts) !important;
+    --mat-slide-toggle-selected-pressed-handle-color: var(--neutral-color-600-parts) !important;
+    --mat-slide-toggle-selected-focus-track-color: var(--neutral-color-500-parts) !important;
+    --mat-slide-toggle-selected-hover-track-color: var(--neutral-color-500-parts) !important;
+    --mat-slide-toggle-selected-pressed-track-color: var(--neutral-color-500-parts) !important;
+    --mat-slide-toggle-selected-track-color: var(--neutral-color-500-parts) !important;
 
     .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
       .mdc-switch__handle {