@softheon/armature 10.31.1 → 10.32.1

package/assets/styles/sof-styles.scss

@@ -161,8 +161,28 @@ mat-form-field {
   color: mat-color($arm-primary, 500);
 }
 
-.input-icon {
-  font-size: 1.5em !important;
+.color-accent {
+  color: mat-color($arm-accent, 500);
+}
+
+.color-warn {
+  color: mat-color($arm-warn, 500);
+}
+
+.color-info {
+  color: mat-color($arm-info, 500);
+}
+
+.color-success {
+  color: mat-color($arm-success, 500);
+}
+
+.color-error {
+  color: mat-color($arm-error, 500);
+}
+
+.color-neutral {
+  color: mat-color($arm-neutral, 500);
 }
 
 .full-width {
@@ -191,61 +211,113 @@ mat-form-field {
   text-align: center;
 }
 
-mat-button-toggle-group {
-  &.mat-button-toggle-group {
-    ::ng-deep &.sof-toggle-group {
-      width: 230px !important;
-      border: 1px solid mat-color($arm-primary, 500) !important;
-      border-radius: 6px !important;
-      mat-button-toggle {
-        flex: 1 1 100% !important;
-        box-sizing: border-box !important;
-        align-items: center !important;
-        flex-direction: row !important;
-        display: flex !important;
-        &.mat-button-toggle-checked {
-          background-color: mat-color($arm-primary, 100) !important;
-          color: mat-contrast($arm-primary, 500) !important;
-        }
-        button.mat-button-toggle-button {
-          .mat-button-toggle-label-content {
-            text-transform: uppercase !important;
-            font-weight: bold !important;
-            color: #000000de !important;
-          }
-        }
+::ng-deep mat-button-toggle-group {
+  &.sof-toggle-group {
+    height: 48px !important;
+    &.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
+      border: none !important;
+      border-radius: 0px !important;
+    }
+    &.full-width {
+      .toggle-left {
+        width: 100% !important;
+      }
+      .toggle-middle {
+        width: 100% !important;
+      }
+      .toggle-right {
+        width: 100% !important;
       }
     }
-  }
-}
 
-/** Material Overrides */
-
-button.mat-button {
-  &.sof-button {
-    padding: 0px 24px !important;
-    height: 48px !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-
-    &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
+    .mat-button-toggle-label-content {
+      text-transform: uppercase !important;
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      letter-spacing: 0.05em !important;
+      text-align: center !important;
+      color: black !important;
+    }
+    .mat-button-toggle-button {
+      height: 100% !important;
+    }
+    .mat-button-toggle-checked {
+      background-color: mat-color($arm-primary, 100) !important;
+    }
+    .toggle-left {
+      border-top: 2px solid mat-color($arm-primary, 500) !important;
+      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
+      border-left: 2px solid mat-color($arm-primary, 500) !important;
+      border-right: 1px solid mat-color($arm-primary, 500) !important;
+      border-radius: 6px 0px 0px 6px !important;
+      width: 120px !important;
+    }
+    .toggle-middle {
+      border-top: 2px solid mat-color($arm-primary, 500) !important;
+      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
+      border-left: 1px solid mat-color($arm-primary, 500) !important;
+      border-right: 1px solid mat-color($arm-primary, 500) !important;
+      border-radius: 0px 0px 0px 0px !important;
+      width: 120px !important;
+    }
+    .toggle-right {
+      border-top: 2px solid mat-color($arm-primary, 500) !important;
+      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
+      border-left: 1px solid mat-color($arm-primary, 500) !important;
+      border-right: 2px solid mat-color($arm-primary, 500) !important;
+      border-radius: 0px 6px 6px 0px !important;
+      width: 120px !important;
     }
 
-    &.full-width {
-      width: 100% !important; // Use this is button width will take size of flex percentage
+    .mat-button-toggle-disabled {
+      &.mat-button-toggle-checked {
+        background-color: mat-color($arm-neutral, 200) !important;
+      }
+      &.toggle-left {
+        border-top: 2px solid mat-color($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
+        border-left: 2px solid mat-color($arm-neutral, 400) !important;
+        border-right: 1px solid mat-color($arm-neutral, 400) !important;
+        border-radius: 6px 0px 0px 6px !important;
+        width: 120px !important;
+      }
+      &.toggle-middle {
+        border-top: 2px solid mat-color($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
+        border-left: 1px solid mat-color($arm-neutral, 400) !important;
+        border-right: 1px solid mat-color($arm-neutral, 400) !important;
+        border-radius: 0px 0px 0px 0px !important;
+        width: 120px !important;
+      }
+      &.toggle-right {
+        border-top: 2px solid mat-color($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
+        border-left: 1px solid mat-color($arm-neutral, 400) !important;
+        border-right: 2px solid mat-color($arm-neutral, 400) !important;
+        border-radius: 0px 6px 6px 0px !important;
+        width: 120px !important;
+      }
     }
   }
+
+  &.sof-toggle-group[size="small"] {
+    height: 36px !important;
+  }
+  &.sof-toggle-group[size="medium"] {
+    height: 48px !important;
+  }
+  &.sof-toggle-group[size="large"] {
+    height: 56px !important;
+  }
 }
 
-button.mat-flat-button {
-  &.sof-flat-button {
+/** Material Overrides */
+
+button.mat-button {
+  &.sof-button {
     padding: 0px 24px !important;
     height: 48px !important;
     border-radius: 6px !important;
@@ -266,98 +338,197 @@ button.mat-flat-button {
     }
 
     &:enabled {
-      color: #ffffff !important;
       &.mat-primary {
-        background: mat-color($arm-primary, 500);
+        color: mat-color($arm-primary, 500) !important;
         &:hover {
-          background-color: mat-color($arm-primary, 700);
+          background-color: mat-color($arm-primary, 50);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 900);
+          background-color: mat-color($arm-primary, 100);
         }
       }
       &.mat-accent {
-        background: mat-color($arm-accent, 500);
+        color: mat-color($arm-accent, 500) !important;
         &:hover {
-          background-color: mat-color($arm-accent, 700);
+          background-color: mat-color($arm-accent, 50);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 900);
+          background-color: mat-color($arm-accent, 100);
         }
       }
       &.mat-warn {
-        background: mat-color($arm-warn, 500);
+        color: mat-color($arm-warn, 500) !important;
         &:hover {
-          background-color: mat-color($arm-warn, 700);
+          background-color: mat-color($arm-warn, 50);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 900);
+          background-color: mat-color($arm-warn, 100);
         }
       }
-      i {
-        color: #ffffff !important;
+      &.mat-success {
+        color: mat-color($arm-success, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-success, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 100);
+        }
+      }
+      &.mat-error {
+        color: mat-color($arm-error, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-error, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 100);
+        }
+      }
+      &.mat-info {
+        color: mat-color($arm-info, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-info, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 100);
+        }
+      }
+      &.mat-neutral {
+        color: #000000de !important;
+        &:hover {
+          background-color: mat-color($arm-neutral, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 100);
+        }
       }
     }
 
     &:disabled {
-      background: #f7f7f7 !important;
       color: rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
+
+    i {
+      margin-left: -8px !important;
+      margin-right: 4px !important;
+    }
   }
-  &.sof-flat-button-large {
-    padding: 0px 24px !important;
+  &.sof-button[size="small"] {
+    height: 36px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-button[size="medium"] {
+    height: 48px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-button[size="large"] {
     height: 56px !important;
+    i {
+      font-size: 1.15em !important;
+    }
+  }
+
+  &.sof-icon-button {
     border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    padding: 0px !important;
 
     &:enabled {
-      color: #ffffff !important;
       &.mat-primary {
-        background: mat-color($arm-primary, 500);
+        color: mat-color($arm-primary, 500) !important;
         &:hover {
-          background-color: mat-color($arm-primary, 700);
+          background-color: mat-color($arm-primary, 50);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 900);
+          background-color: mat-color($arm-primary, 100);
         }
       }
       &.mat-accent {
-        background: mat-color($arm-accent, 500);
+        color: mat-color($arm-accent, 500) !important;
         &:hover {
-          background-color: mat-color($arm-accent, 700);
+          background-color: mat-color($arm-accent, 50);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 900);
+          background-color: mat-color($arm-accent, 100);
         }
       }
       &.mat-warn {
-        background: mat-color($arm-warn, 500);
+        color: mat-color($arm-warn, 500) !important;
         &:hover {
-          background-color: mat-color($arm-warn, 700);
+          background-color: mat-color($arm-warn, 50);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 900);
+          background-color: mat-color($arm-warn, 100);
         }
       }
-      i {
-        color: #ffffff !important;
+      &.mat-success {
+        color: mat-color($arm-success, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-success, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 100);
+        }
+      }
+      &.mat-error {
+        color: mat-color($arm-error, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-error, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 100);
+        }
+      }
+      &.mat-info {
+        color: mat-color($arm-info, 500) !important;
+        &:hover {
+          background-color: mat-color($arm-info, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 100);
+        }
+      }
+      &.mat-neutral {
+        color: #000000de !important;
+        &:hover {
+          background-color: mat-color($arm-neutral, 50);
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 100);
+        }
       }
     }
 
     &:disabled {
-      background: #f7f7f7 !important;
       color: rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
   }
-  &.sof-flat-button-medium {
+  &.sof-icon-button[size="small"] {
+    height: 36px !important;
+    width: 36px !important;
+    min-width: 36px !important;
+    font-size: 19px !important;
+  }
+  &.sof-icon-button[size="medium"] {
+    height: 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    font-size: 26px !important;
+  }
+  &.sof-icon-button[size="large"] {
+    height: 56px !important;
+    width: 56px !important;
+    min-width: 56px !important;
+    font-size: 26px !important;
+  }
+}
+
+button.mat-flat-button {
+  &.sof-flat-button {
     padding: 0px 24px !important;
     height: 48px !important;
     border-radius: 6px !important;
@@ -369,6 +540,14 @@ button.mat-flat-button {
     letter-spacing: 0.05em !important;
     text-transform: uppercase !important;
 
+    &.fixed-width {
+      width: 200px !important; // Use this is to match specific sizing
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+
     &:enabled {
       color: #ffffff !important;
       &.mat-primary {
@@ -398,6 +577,42 @@ button.mat-flat-button {
           background-color: mat-color($arm-warn, 900);
         }
       }
+      &.mat-success {
+        background: mat-color($arm-success, 500);
+        &:hover {
+          background-color: mat-color($arm-success, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 900);
+        }
+      }
+      &.mat-error {
+        background: mat-color($arm-error, 500);
+        &:hover {
+          background-color: mat-color($arm-error, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 900);
+        }
+      }
+      &.mat-info {
+        background: mat-color($arm-info, 500);
+        &:hover {
+          background-color: mat-color($arm-info, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 900);
+        }
+      }
+      &.mat-neutral {
+        background: #000000de;
+        &:hover {
+          background-color: mat-color($arm-neutral, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 900);
+        }
+      }
       i {
         color: #ffffff !important;
       }
@@ -408,18 +623,34 @@ button.mat-flat-button {
       color: rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
+
+    i {
+      margin-left: -8px !important;
+      margin-right: 4px !important;
+    }
   }
-  &.sof-flat-button-small {
-    padding: 0px 24px !important;
+  &.sof-flat-button[size="small"] {
     height: 36px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-flat-button[size="medium"] {
+    height: 48px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-flat-button[size="large"] {
+    height: 56px !important;
+    i {
+      font-size: 1.15em !important;
+    }
+  }
+
+  &.sof-flat-icon-button {
     border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    padding: 0px !important;
 
     &:enabled {
       color: #ffffff !important;
@@ -450,6 +681,42 @@ button.mat-flat-button {
           background-color: mat-color($arm-warn, 900);
         }
       }
+      &.mat-success {
+        background: mat-color($arm-success, 500);
+        &:hover {
+          background-color: mat-color($arm-success, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 900);
+        }
+      }
+      &.mat-error {
+        background: mat-color($arm-error, 500);
+        &:hover {
+          background-color: mat-color($arm-error, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 900);
+        }
+      }
+      &.mat-info {
+        background: mat-color($arm-info, 500);
+        &:hover {
+          background-color: mat-color($arm-info, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 900);
+        }
+      }
+      &.mat-neutral {
+        background: #000000de;
+        &:hover {
+          background-color: mat-color($arm-neutral, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 900);
+        }
+      }
       i {
         color: #ffffff !important;
       }
@@ -461,6 +728,24 @@ button.mat-flat-button {
       opacity: 1 !important;
     }
   }
+  &.sof-flat-icon-button[size="small"] {
+    height: 36px !important;
+    width: 36px !important;
+    min-width: 36px !important;
+    font-size: 19px !important;
+  }
+  &.sof-flat-icon-button[size="medium"] {
+    height: 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    font-size: 26px !important;
+  }
+  &.sof-flat-icon-button[size="large"] {
+    height: 56px !important;
+    width: 56px !important;
+    min-width: 56px !important;
+    font-size: 26px !important;
+  }
 }
 
 button.mat-stroked-button {
@@ -549,6 +834,82 @@ button.mat-stroked-button {
           }
         }
       }
+      &.mat-success {
+        background-color: mat-color($arm-success, 50) !important;
+        color: mat-color($arm-success, 500) !important;
+        i {
+          color: mat-color($arm-success, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-success, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-info {
+        background-color: mat-color($arm-info, 50) !important;
+        color: mat-color($arm-info, 500) !important;
+        i {
+          color: mat-color($arm-info, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-info, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-error {
+        background-color: mat-color($arm-error, 50) !important;
+        color: mat-color($arm-error, 500) !important;
+        i {
+          color: mat-color($arm-error, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-error, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-neutral {
+        background-color: mat-color($arm-neutral, 50) !important;
+        color: #000000de !important;
+        i {
+          color: #000000de !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-neutral, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 200) !important;
+        }
+      }
     }
 
     &:disabled {
@@ -556,11 +917,16 @@ button.mat-stroked-button {
       color: rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
+
+    i {
+      margin-left: -8px !important;
+      margin-right: 4px !important;
+    }
   }
-  &.sof-stroked-button-large {
+  &.sof-stroked-button-outline {
     padding: 0px 24px !important;
-    height: 56px !important;
-    border: none !important;
+    height: 48px !important;
+    background: #ffffff !important;
     border-radius: 6px !important;
     font-family: Poppins !important;
     font-style: normal !important;
@@ -570,68 +936,104 @@ button.mat-stroked-button {
     letter-spacing: 0.05em !important;
     text-transform: uppercase !important;
 
+    &.fixed-width {
+      width: 200px !important; // Use this is to match specific sizing
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+
     &:enabled {
       &.mat-primary {
-        background-color: mat-color($arm-primary, 50) !important;
+        border: 2px solid mat-color($arm-primary, 500) !important;
         color: mat-color($arm-primary, 500) !important;
         i {
           color: mat-color($arm-primary, 500) !important;
         }
         &:hover {
           background-color: mat-color($arm-primary, 100) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
         }
         &:focus {
           background-color: mat-color($arm-primary, 200) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
         }
       }
       &.mat-accent {
-        background-color: mat-color($arm-accent, 50) !important;
+        border: 2px solid mat-color($arm-accent, 500) !important;
         color: mat-color($arm-accent, 500) !important;
         i {
           color: mat-color($arm-accent, 500) !important;
         }
         &:hover {
           background-color: mat-color($arm-accent, 100) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
         }
         &:focus {
           background-color: mat-color($arm-accent, 200) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
         }
       }
       &.mat-warn {
-        background-color: mat-color($arm-warn, 50) !important;
+        border: 2px solid mat-color($arm-warn, 500) !important;
         color: mat-color($arm-warn, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat-color($arm-warn, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-warn, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-warn, 200) !important;
+        }
+      }
+      &.mat-success {
+        border: 2px solid mat-color($arm-success, 500) !important;
+        color: mat-color($arm-success, 500) !important;
+        i {
+          color: mat-color($arm-success, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-success, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-success, 200) !important;
+        }
+      }
+      &.mat-error {
+        border: 2px solid mat-color($arm-error, 500) !important;
+        color: mat-color($arm-error, 500) !important;
+        i {
+          color: mat-color($arm-error, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-error, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-error, 200) !important;
+        }
+      }
+      &.mat-info {
+        border: 2px solid mat-color($arm-info, 500) !important;
+        color: mat-color($arm-info, 500) !important;
+        i {
+          color: mat-color($arm-info, 500) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-info, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-info, 200) !important;
+        }
+      }
+      &.mat-neutral {
+        border: 2px solid #000000de !important;
+        color: #000000de !important;
+        i {
+          color: 000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
+          background-color: mat-color($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
-          color: white !important;
-          i {
-            color: white !important;
-          }
+          background-color: mat-color($arm-neutral, 200) !important;
         }
       }
     }
@@ -639,21 +1041,41 @@ button.mat-stroked-button {
     &:disabled {
       background: #f7f7f7 !important;
       color: rgba(0, 0, 0, 0.6) !important;
+      border: 2px solid rgba(0, 0, 0, 0.38) !important;
       opacity: 1 !important;
     }
+
+    i {
+      margin-left: -8px !important;
+      margin-right: 4px !important;
+    }
   }
-  &.sof-stroked-button-medium {
-    padding: 0px 24px !important;
+  &.sof-stroked-button[size="small"],
+  &.sof-stroked-button-outline[size="small"] {
+    height: 36px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-stroked-button[size="medium"],
+  &.sof-stroked-button-outline[size="medium"] {
     height: 48px !important;
+    i {
+      font-size: 1em !important;
+    }
+  }
+  &.sof-stroked-button[size="large"],
+  &.sof-stroked-button-outline[size="large"] {
+    height: 56px !important;
+    i {
+      font-size: 1.15em !important;
+    }
+  }
+
+  &.sof-stroked-icon-button {
     border: none !important;
     border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    padding: 0px !important;
 
     &:enabled {
       &.mat-primary {
@@ -719,150 +1141,80 @@ button.mat-stroked-button {
           }
         }
       }
-    }
-
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-button-small {
-    padding: 0px 24px !important;
-    height: 36px !important;
-    border: none !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-
-    &:enabled {
-      &.mat-primary {
-        background-color: mat-color($arm-primary, 50) !important;
-        color: mat-color($arm-primary, 500) !important;
+      &.mat-success {
+        background-color: mat-color($arm-success, 50) !important;
+        color: mat-color($arm-success, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat-color($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat-color($arm-success, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat-color($arm-success, 200) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
       }
-      &.mat-accent {
-        background-color: mat-color($arm-accent, 50) !important;
-        color: mat-color($arm-accent, 500) !important;
+      &.mat-info {
+        background-color: mat-color($arm-info, 50) !important;
+        color: mat-color($arm-info, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat-color($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat-color($arm-info, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat-color($arm-info, 200) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
       }
-      &.mat-warn {
-        background-color: mat-color($arm-warn, 50) !important;
-        color: mat-color($arm-warn, 500) !important;
+      &.mat-error {
+        background-color: mat-color($arm-error, 50) !important;
+        color: mat-color($arm-error, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat-color($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat-color($arm-error, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat-color($arm-error, 200) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
       }
-    }
-
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-button-large-outline {
-    padding: 0px 24px !important;
-    height: 56px !important;
-    background: #ffffff !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-
-    &:enabled {
-      &.mat-primary {
-        border: 2px solid mat-color($arm-primary, 500) !important;
-        color: mat-color($arm-primary, 500) !important;
-        i {
-          color: mat-color($arm-primary, 500) !important;
-        }
-        &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
-        }
-        &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
-        }
-      }
-      &.mat-accent {
-        border: 2px solid mat-color($arm-accent, 500) !important;
-        color: mat-color($arm-accent, 500) !important;
-        i {
-          color: mat-color($arm-accent, 500) !important;
-        }
-        &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
-        }
-        &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
-        }
-      }
-      &.mat-warn {
-        border: 2px solid mat-color($arm-warn, 500) !important;
-        color: mat-color($arm-warn, 500) !important;
+      &.mat-neutral {
+        background-color: mat-color($arm-neutral, 50) !important;
+        color: #000000de !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: #000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat-color($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat-color($arm-neutral, 200) !important;
         }
       }
     }
@@ -873,18 +1225,10 @@ button.mat-stroked-button {
       opacity: 1 !important;
     }
   }
-  &.sof-stroked-button-medium-outline {
-    padding: 0px 24px !important;
-    height: 48px !important;
+  &.sof-stroked-icon-button-outline {
     background: #ffffff !important;
     border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    padding: 0px !important;
 
     &:enabled {
       &.mat-primary {
@@ -926,65 +1270,56 @@ button.mat-stroked-button {
           background-color: mat-color($arm-warn, 200) !important;
         }
       }
-    }
-
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-button-small-outline {
-    padding: 0px 24px !important;
-    height: 36px !important;
-    background: #ffffff !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-
-    &:enabled {
-      &.mat-primary {
-        border: 2px solid mat-color($arm-primary, 500) !important;
-        color: mat-color($arm-primary, 500) !important;
+      &.mat-success {
+        border: 2px solid mat-color($arm-success, 500) !important;
+        color: mat-color($arm-success, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat-color($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat-color($arm-success, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat-color($arm-success, 200) !important;
         }
       }
-      &.mat-accent {
-        border: 2px solid mat-color($arm-accent, 500) !important;
-        color: mat-color($arm-accent, 500) !important;
+      &.mat-error {
+        border: 2px solid mat-color($arm-error, 500) !important;
+        color: mat-color($arm-error, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat-color($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat-color($arm-error, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat-color($arm-error, 200) !important;
         }
       }
-      &.mat-warn {
-        border: 2px solid mat-color($arm-warn, 500) !important;
-        color: mat-color($arm-warn, 500) !important;
+      &.mat-info {
+        border: 2px solid mat-color($arm-info, 500) !important;
+        color: mat-color($arm-info, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat-color($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat-color($arm-info, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat-color($arm-info, 200) !important;
+        }
+      }
+      &.mat-neutral {
+        border: 2px solid #000000de !important;
+        color: #000000de !important;
+        i {
+          color: 000000de !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-neutral, 100) !important;
+        }
+        &:focus {
+          background-color: mat-color($arm-neutral, 200) !important;
         }
       }
     }
@@ -992,49 +1327,30 @@ button.mat-stroked-button {
     &:disabled {
       background: #f7f7f7 !important;
       color: rgba(0, 0, 0, 0.6) !important;
+      border: 2px solid rgba(0, 0, 0, 0.38) !important;
       opacity: 1 !important;
     }
   }
-  &.action-btn {
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    padding: 0px 24px !important;
+  &.sof-stroked-icon-button[size="small"],
+  &.sof-stroked-icon-button-outline[size="small"] {
     height: 36px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-    background: white !important;
-    border: 2px solid black !important;
-    box-sizing: border-box !important;
-    border-radius: 6px !important;
-    color: black !important;
-    white-space: normal !important;
-    i {
-      color: black !important;
-    }
-    &.mat-primary {
-      color: mat-color($arm-primary, 500) !important;
-      border: 2px solid mat-color($arm-primary, 500) !important;
-      i {
-        color: mat-color($arm-primary, 500) !important;
-      }
-    }
-    &.mat-accent {
-      color: mat-color($arm-accent, 500) !important;
-      border: 2px solid mat-color($arm-accent, 500) !important;
-      i {
-        color: mat-color($arm-accent, 500) !important;
-      }
-    }
-    &.mat-warn {
-      color: mat-color($arm-warn, 500) !important;
-      border: 2px solid mat-color($arm-warn, 500) !important;
-      i {
-        color: mat-color($arm-warn, 500) !important;
-      }
-    }
+    width: 36px !important;
+    min-width: 36px !important;
+    font-size: 19px !important;
+  }
+  &.sof-stroked-icon-button[size="medium"],
+  &.sof-stroked-icon-button-outline[size="medium"] {
+    height: 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    font-size: 26px !important;
+  }
+  &.sof-stroked-icon-button[size="large"],
+  &.sof-stroked-icon-button-outline[size="large"] {
+    height: 56px !important;
+    width: 56px !important;
+    min-width: 56px !important;
+    font-size: 26px !important;
   }
 }
 
@@ -1110,6 +1426,7 @@ mat-card {
 }
 
 ::ng-deep mat-form-field.sof-form-field {
+  font-family: "Poppins" !important;
   &.mat-form-field-invalid {
     .mat-form-field-flex > div.mat-form-field-outline.mat-form-field-outline-thick {
       color: mat-color($arm-error, 500) !important;
@@ -1118,6 +1435,13 @@ mat-card {
       color: mat-color($arm-error, 500) !important;
     }
   }
+  &.mat-form-field-should-float {
+    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
+    input,
+    span.mat-select-value-text {
+      font-weight: 400 !important;
+    }
+  }
   .mat-form-field-flex > div.mat-form-field-outline.mat-form-field-outline-thick {
     color: mat-color($arm-primary, 500) !important;
   }
@@ -1131,10 +1455,15 @@ mat-card {
     top: 0em !important;
     color: mat-color($arm-neutral, 300) !important;
     padding-right: 0.5em !important;
+    font-size: 1.5em !important;
   }
   .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix {
     top: 0em !important;
-    color: mat-color($arm-error, 500) !important;
+    font-size: 1.5em !important;
+    color: mat-color($arm-neutral, 300) !important;
+    .error {
+      color: mat-color($arm-error, 500) !important;
+    }
   }
   .mat-form-field-flex div.mat-form-field-outline-start {
     border-radius: 6px 0 0 6px !important;
@@ -1149,7 +1478,7 @@ mat-card {
   mat-error {
     font-family: "Poppins" !important;
     font-style: normal !important;
-    font-weight: 400 !important;
+    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
     font-size: 12px !important;
     line-height: 18px !important;
     color: mat-color($arm-error, 500) !important;
@@ -1157,26 +1486,15 @@ mat-card {
   mat-hint {
     font-family: "Poppins" !important;
     font-style: normal !important;
-    font-weight: 400 !important;
+    font-weight: 600 !important; // Should be 500, but 400/500 are the same.
     font-size: 12px !important;
     line-height: 18px !important;
   }
 }
 
-.toggle-button-left {
-  border: 1px solid mat-color($arm-primary, 500);
-  border-radius: 3px 0px 0px 3px;
-  width: 120px;
-}
-
-.toggle-button-right {
-  border: 1px solid mat-color($arm-primary, 500);
-  border-radius: 0px 3px 3px 0px;
-  width: 120px;
-}
-
-::ng-deep .mat-button-toggle-checked {
-  background-color: mat-color($arm-primary, 100) !important;
+mat-optgroup label,
+mat-optgroup mat-option {
+  font-family: "Poppins" !important;
 }
 
 .mat-drawer-container.sof-ar-nav-sidenav-container {
@@ -1187,36 +1505,124 @@ mat-card {
 
 // MatSlideToggle class overrides [START]
 // https://material.angular.io/components/slide-toggle/api
-::ng-deep mat-slide-toggle.sof-slide-toggle {
-  .mat-slide-toggle-bar {
-    height: 20px !important;
-    width: 32px !important;
-    background: #cccccc !important;
-    border: 1px solid #cccccc !important;
-    border-radius: 24px !important;
-  }
-  .mat-slide-toggle-thumb {
-    height: 20px !important;
-    width: 20px !important;
-    border: 1px solid #cccccc !important;
-    border-radius: 24px !important;
-    top: -1px !important;
-    left: -3px !important;
+::ng-deep mat-slide-toggle {
+  &.sof-slide-toggle {
+    height: auto;
+    .mat-slide-toggle-bar {
+      height: 20px !important;
+      width: 32px !important;
+      background: #cccccc !important;
+      border: 1px solid #cccccc !important;
+      border-radius: 24px !important;
+    }
+    .mat-slide-toggle-thumb {
+      height: 20px !important;
+      width: 20px !important;
+      border: 1px solid #cccccc !important;
+      border-radius: 24px !important;
+      top: -1px !important;
+      left: -3px !important;
+    }
+    .mat-slide-toggle-thumb-container {
+      top: -1px !important;
+      left: -3px !important;
+    }
+    .mat-slide-toggle-content {
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      font-size: 14px !important;
+      line-height: 150% !important;
+      white-space: normal !important;
+    }
+    .mat-slide-toggle-label {
+      flex-direction: row;
+      align-items: start !important;
+    }
   }
-  .mat-slide-toggle-thumb-container {
-    top: -1px !important;
-    left: -3px !important;
+
+  &.sof-slide-toggle[size="large"] {
+    .mat-slide-toggle-content {
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      font-size: 16px !important;
+      line-height: 150% !important;
+      white-space: normal !important;
+    }
   }
 }
 
-::ng-deep mat-slide-toggle.sof-slide-toggle.mat-checked {
-  .mat-slide-toggle-thumb {
-    background-color: #ffffff !important;
-    border: 1px solid mat-color($arm-primary, 500) !important;
+::ng-deep mat-slide-toggle.sof-slide-toggle.mat-checked:not(.mat-disabled) {
+  &.mat-primary {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-primary, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-primary, 500) !important;
+      border: 1px solid mat-color($arm-primary, 500) !important;
+    }
   }
-  .mat-slide-toggle-bar {
-    background: mat-color($arm-primary, 500) !important;
-    border: 1px solid mat-color($arm-primary, 500) !important;
+  &.mat-accent {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-accent, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-accent, 500) !important;
+      border: 1px solid mat-color($arm-accent, 500) !important;
+    }
+  }
+  &.mat-warn {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-warn, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-warn, 500) !important;
+      border: 1px solid mat-color($arm-warn, 500) !important;
+    }
+  }
+  &.mat-success {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-success, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-success, 500) !important;
+      border: 1px solid mat-color($arm-success, 500) !important;
+    }
+  }
+  &.mat-error {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-error, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-error, 500) !important;
+      border: 1px solid mat-color($arm-error, 500) !important;
+    }
+  }
+  &.mat-info {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid mat-color($arm-info, 500) !important;
+    }
+    .mat-slide-toggle-bar {
+      background: mat-color($arm-info, 500) !important;
+      border: 1px solid mat-color($arm-info, 500) !important;
+    }
+  }
+  &.mat-neutral {
+    .mat-slide-toggle-thumb {
+      background-color: #ffffff !important;
+      border: 1px solid #000000de !important;
+    }
+    .mat-slide-toggle-bar {
+      background: #000000de !important;
+      border: 1px solid #000000de !important;
+    }
   }
 }