@softheon/armature 17.17.1 → 17.18.0

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

@@ -0,0 +1,1123 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+
+// @deprecated replace with "/material-override/button"
+
+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;
+
+  &.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
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+
+    &:enabled {
+      &.mat-primary {
+        color: mat.get-color-from-palette(theme.$arm-primary, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        color: mat.get-color-from-palette(theme.$arm-accent, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        color: mat.get-color-from-palette(theme.$arm-warn, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        color: mat.get-color-from-palette(theme.$arm-success, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        color: mat.get-color-from-palette(theme.$arm-error, 900);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        color: mat.get-color-from-palette(theme.$arm-info, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !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;
+    padding: 0px !important;
+
+    &:enabled {
+      &.mat-primary {
+        color: mat.get-color-from-palette(theme.$arm-primary, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        color: mat.get-color-from-palette(theme.$arm-accent, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        color: mat.get-color-from-palette(theme.$arm-warn, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        color: mat.get-color-from-palette(theme.$arm-success, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        color: mat.get-color-from-palette(theme.$arm-error, 900);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        color: mat.get-color-from-palette(theme.$arm-info, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+
+  &.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-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;
+
+
+  &.sof-flat-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
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+
+    &:enabled {
+
+      &.mat-primary {
+        background: mat.get-color-from-palette(theme.$arm-primary, 500);
+        color: map-get(theme.$arm-primary, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 700);
+          color: map-get(theme.$arm-primary, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        background: mat.get-color-from-palette(theme.$arm-accent, 500);
+        color: map-get(theme.$arm-accent, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 700);
+          color: map-get(theme.$arm-accent, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        background: mat.get-color-from-palette(theme.$arm-warn, 500);
+        color: map-get(theme.$arm-warn, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 700);
+          color: map-get(theme.$arm-warn, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        background: mat.get-color-from-palette(theme.$arm-success, 500);
+        color: map-get(theme.$arm-success, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 700);
+          color: map-get(theme.$arm-success, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        background: mat.get-color-from-palette(theme.$arm-error, 900);
+        color: map-get(theme.$arm-error, contrast, 900);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 700);
+          color: map-get(theme.$arm-error, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        background: mat.get-color-from-palette(theme.$arm-info, 500);
+        color: map-get(theme.$arm-info, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 700);
+          color: map-get(theme.$arm-info, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        background: mat.get-color-from-palette(theme.$arm-neutral, 500);
+        color: map-get(theme.$arm-neutral, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 700);
+          color: map-get(theme.$arm-neutral, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !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;
+    padding: 0px !important;
+
+    &:enabled {
+
+      &.mat-primary {
+        background: mat.get-color-from-palette(theme.$arm-primary, 500);
+        color: map-get(theme.$arm-primary, contrast, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 700);
+          color: map-get(theme.$arm-primary, contrast, 700);
+        }
+      }
+
+      &.mat-accent {
+        background: mat.get-color-from-palette(theme.$arm-accent, 500);
+        color: map-get(theme.$arm-accent, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 700);
+          color: map-get(theme.$arm-accent, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        background: mat.get-color-from-palette(theme.$arm-warn, 500);
+        color: map-get(theme.$arm-warn, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 700);
+          color: map-get(theme.$arm-warn, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        background: mat.get-color-from-palette(theme.$arm-success, 500);
+        color: map-get(theme.$arm-success, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 700);
+          color: map-get(theme.$arm-success, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        background: mat.get-color-from-palette(theme.$arm-error, 900);
+        color: map-get(theme.$arm-error, contrast, 900);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 700);
+          color: map-get(theme.$arm-error, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        background: mat.get-color-from-palette(theme.$arm-info, 500);
+        color: map-get(theme.$arm-info, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 700);
+          color: map-get(theme.$arm-info, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        background: mat.get-color-from-palette(theme.$arm-neutral, 500);
+        color: map-get(theme.$arm-neutral, contrast, 500);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 700);
+          color: map-get(theme.$arm-neutral, contrast, 700);
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      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-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;
+
+  &.sof-stroked-button {
+    padding: 0px 24px !important;
+    height: 48px !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;
+
+    &.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.get-color-from-palette(theme.$arm-primary, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+
+  &.sof-stroked-button-outline {
+    padding: 0px 24px !important;
+    height: 48px !important;
+    background-color: #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;
+
+    &.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 {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-error, 900) !important;
+        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &: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;
+    }
+  }
+
+  &.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;
+    padding: 0px !important;
+
+    &:enabled {
+      &.mat-primary {
+        background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 100) !important
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 100) !important
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 100) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+
+  &.sof-stroked-icon-button-outline {
+    background-color: #ffffff !important;
+    border-radius: 6px !important;
+    padding: 0px !important;
+
+    &:enabled {
+      &.mat-primary {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-accent {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-warn {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-success {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-error {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-error, 900) !important;
+        color: mat.get-color-from-palette(theme.$arm-error, 900);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-info {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+
+      &.mat-neutral {
+        border: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+
+        &:hover {
+          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+        }
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline-offset: 2px !important;
+        }
+      }
+    }
+
+    &: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;
+    }
+  }
+
+  &.sof-stroked-icon-button[size="small"],
+  &.sof-stroked-icon-button-outline[size="small"] {
+    height: 36px !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: 24px !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;
+  }
+}