@softheon/armature 17.5.3 → 17.5.4

package/assets/styles/sof-styles.scss

@@ -256,6 +256,10 @@ mat-button-toggle-group {
       letter-spacing: 0.05em !important;
       text-align: center !important;
       color: black !important;
+      // remove selected check indicator 
+      .mat-pseudo-checkbox {
+        display: none!important;
+      }
     }
 
     .mat-button-toggle-button {
@@ -377,11 +381,11 @@ button.mat-mdc-button {
     font-size: 16px !important;
     line-height: 24px !important;
     letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    text-transform: uppercase !important; 
 
 
     &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
+     width: 200px !important;  // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -393,7 +397,7 @@ button.mat-mdc-button {
         color: mat.get-color-from-palette($arm-primary, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50);
+          background-color: mat.get-color-from-palette($arm-primary, 500);
         }
 
         &:focus {
@@ -520,7 +524,7 @@ button.mat-mdc-button {
         color: mat.get-color-from-palette($arm-primary, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50);
+          background-color: mat.get-color-from-palette($arm-primary, 500);
         }
 
         &:focus {
@@ -634,6 +638,8 @@ button.mat-mdc-button {
     min-width: 56px !important;
     font-size: 26px !important;
   }
+// Secondary Button Styles 
+
 }
 
 button.mat-mdc-unelevated-button {
@@ -641,8 +647,9 @@ button.mat-mdc-unelevated-button {
   --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;
+    padding:  0px 24px !important;
     height: 48px !important;
     border-radius: 6px !important;
     font-family: Poppins !important;
@@ -651,7 +658,8 @@ button.mat-mdc-unelevated-button {
     font-size: 16px !important;
     line-height: 24px !important;
     letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
+    text-transform: uppercase  !important;
+    
 
     &.fixed-width {
       width: 200px !important; // Use this is to match specific sizing
@@ -666,27 +674,24 @@ button.mat-mdc-unelevated-button {
       &.mat-primary {
         background: mat.get-color-from-palette($arm-primary, 500);
         color: map-get($arm-primary, contrast, 500);
-
-        &:hover {
+        
+        &:hover{
           background-color: mat.get-color-from-palette($arm-primary, 700);
           color: map-get($arm-primary, contrast, 700);
         }
-
+        
         &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
-
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
         color: map-get($arm-accent, contrast, 500);
-
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 700);
           color: map-get($arm-accent, contrast, 700);
         }
-
         &:focus {
           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
@@ -703,7 +708,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -718,7 +723,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -733,7 +738,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -748,7 +753,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -810,17 +815,15 @@ button.mat-mdc-unelevated-button {
         background: mat.get-color-from-palette($arm-primary, 500);
         color: map-get($arm-primary, contrast, 500);
 
+        &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline-offset: 2px !important;
+        }
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 700);
           color: map-get($arm-primary, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
       }
-
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
         color: map-get($arm-accent, contrast, 500);
@@ -844,9 +847,8 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-warn, 700);
           color: map-get($arm-warn, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+    &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -859,9 +861,8 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-success, 700);
           color: map-get($arm-success, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+    &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -874,9 +875,8 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-error, 700);
           color: map-get($arm-error, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+    &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -889,9 +889,8 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-info, 700);
           color: map-get($arm-info, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+    &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -904,9 +903,8 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-neutral, 700);
           color: map-get($arm-neutral, contrast, 700);
         }
-
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+    &:focus {
+           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -914,7 +912,7 @@ button.mat-mdc-unelevated-button {
 
     &:disabled {
       background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
+      color:rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
   }
@@ -960,7 +958,7 @@ button.mat-mdc-outlined-button {
     text-transform: uppercase !important;
 
     &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
+     width: 200px !important;  // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -1088,7 +1086,7 @@ button.mat-mdc-outlined-button {
     text-transform: uppercase !important;
 
     &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
+     width: 200px !important; // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -1468,7 +1466,7 @@ button.mat-mdc-outlined-button {
     height: 48px !important;
     width: 48px !important;
     min-width: 48px !important;
-    font-size: 26px !important;
+    font-size: 24px !important;
   }
 
   &.sof-stroked-icon-button[size="large"],
@@ -1480,6 +1478,197 @@ button.mat-mdc-outlined-button {
   }
 }
 
+// Button Redesign
+
+button.sof-button-v2{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding:8px!important;
+  height: 40px !important;
+  border-radius: 8px !important;
+  font-family: Poppins !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: normal !important;
+  letter-spacing: 0.05em !important; 
+  text-transform: capitalize  !important;
+  &.mat-button-focus-overlay{
+  pointer-events: none !important;
+}
+&.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly !important;
+  width: 100% !important;
+}
+&.fixed-width {
+  width: 120px !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:white;
+
+    &:hover{
+      background-color: mat.get-color-from-palette($arm-primary, 500);
+    }
+    &:focus{
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+    
+  }
+  &.mat-secondary{
+    background: #FAFAFA !important;
+    color: var(--primary-color-contrast-50-parts);
+    &:hover{
+      background-color: #FAFAFA !important;
+    }
+    &:focus{
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+
+  }
+  &.mat-tertiary{
+    color: var(--primary-color-contrast-50-parts);
+    background: none !important;    
+    &:hover{
+      background-color: mat.get-color-from-palette($arm-primary, 500);
+    }
+    &:focus{
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    } 
+  }
+  &.mat-error{
+    background: mat.get-color-from-palette($arm-error, 900);
+    color: map-get($arm-error, contrast, 900);
+
+    &:hover {
+      background-color: mat.get-color-from-palette($arm-error, 700);
+      color: map-get($arm-error, contrast, 700);
+    }
+
+    &:focus {
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+  }
+  
+ }
+ 
+ &:disabled {
+  background: #f7f7f7 !important;
+  color:rgba(0, 0, 0, 0.6) !important;
+  opacity: 1 !important;
+  &:hover{
+    background-color: mat.get-color-from-palette($arm-primary, 500);
+  }
+  &:focus{
+    outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+    outline-offset: 2px !important;
+  } 
+}
+
+}
+button.soft-button-icon-v2{
+  display: flex !important;
+  padding: 8px 16px !important;
+  border-radius: 8px !important;
+  height: 40px !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: 8px !important;
+  flex: 1 0 0 !important;
+  
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+  }
+  
+  
+  &.fixed-width {
+    max-width: 36px !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:white;
+      border-radius: 8px !important;
+  
+      &:hover{
+        background-color: mat.get-color-from-palette($arm-primary, 500);
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+      
+    }
+    &.mat-secondary{
+      background: #FAFAFA !important;
+      color: var(--primary-color-contrast-50-parts);
+      &:hover{
+        background-color: mat.get-color-from-palette($arm-primary, 500);
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+  
+    }
+    &.mat-tertiary{
+      color: var(--primary-color-contrast-50-parts);
+      background: none !important;   
+      &:hover{
+        background-color: mat.get-color-from-palette($arm-primary, 500);
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+    &.mat-error{
+    background: mat.get-color-from-palette($arm-error, 900);
+    color: map-get($arm-error, contrast, 900);
+
+    &:hover {
+      background-color: mat.get-color-from-palette($arm-error, 700);
+      color: map-get($arm-error, contrast, 700);
+    }
+
+    &:focus {
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+    }
+   }
+
+   &:disabled {
+    background: #f7f7f7 !important;
+    color:rgba(0, 0, 0, 0.6) !important;
+    opacity: 1 !important;
+
+    &:hover{
+      background-color: mat.get-color-from-palette($arm-primary, 500);
+    }
+    &:focus{
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    } 
+  }
+}
+
+
 mat-card {
   &.mat-mdc-card.item-list {
     box-shadow: 0px 1px 7px rgb(166 159 159 / 25%) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softheon/armature",
-  "version": "17.5.3",
+  "version": "17.5.4",
   "dependencies": {
     "tslib": "^2.5.0"
   },