@softheon/armature 10.29.3 → 10.31.1

package/assets/styles/_variables.scss

@@ -13,10 +13,4 @@ $mat-lt-sm: 599px;
 $mat-lt-md: 959px;
 $mat-lt-lg: 1279px;
 $mat-gt-sm: 960px;
-$mat-gt-md: 1280px;
-
-// Common static colors
-$main-dark-gray: #646464;
-$main-dark-disabled: #4f4f4f;
-$very-light-grey: #F8F8F8;
-$light-grey: #eee;
+$mat-gt-md: 1280px;

package/assets/styles/arm-theme.scss

@@ -1,18 +1,18 @@
 :root {
-    --primary-color-50-parts: #EDF4FF;
-    --primary-color-100-parts: #B9D4FC;
-    --primary-color-200-parts: #8AB7FB;
-    --primary-color-300-parts: #5B9AF9;
-    --primary-color-400-parts: #3784F7;
-    --primary-color-500-parts: #146EF6;
-    --primary-color-600-parts: #1266F5;
-    --primary-color-700-parts: #0E5BF3;
-    --primary-color-800-parts: #0B51F2;
-    --primary-color-900-parts: #063FEF;
+    --primary-color-50-parts: #edf4ff;
+    --primary-color-100-parts: #b9d4fc;
+    --primary-color-200-parts: #8ab7fb;
+    --primary-color-300-parts: #5b9af9;
+    --primary-color-400-parts: #3784f7;
+    --primary-color-500-parts: #146ef6;
+    --primary-color-600-parts: #1266f5;
+    --primary-color-700-parts: #0e5bf3;
+    --primary-color-800-parts: #0b51f2;
+    --primary-color-900-parts: #063fef;
     --primary-color-A100-parts: #ffffff;
-    --primary-color-A200-parts: #E4E9FF;
-    --primary-color-A400-parts: #B1C0FF;
-    --primary-color-A700-parts: #97ACFF;
+    --primary-color-A200-parts: #e4e9ff;
+    --primary-color-A400-parts: #b1c0ff;
+    --primary-color-A700-parts: #97acff;
     --primary-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
     --primary-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
     --primary-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
@@ -262,6 +262,50 @@
     --error-color-A200-parts-rgb: 255, 217, 215;
     --error-color-A400-parts-rgb: 255, 168, 164;
     --error-color-A700-parts-rgb: 255, 143, 139;
+
+    --neutral-color-50-parts: #fafafa;
+    --neutral-color-100-parts: #f5f5f5;
+    --neutral-color-200-parts: #eeeeee;
+    --neutral-color-300-parts: #e0e0e0;
+    --neutral-color-400-parts: #bdbdbd;
+    --neutral-color-500-parts: #9e9e9e;
+    --neutral-color-600-parts: #757575;
+    --neutral-color-700-parts: #616161;
+    --neutral-color-800-parts: #424242;
+    --neutral-color-900-parts: #212121;
+    --neutral-color-A100-parts: #ffffff;
+    --neutral-color-A200-parts: #ffffff;
+    --neutral-color-A400-parts: #ffffff;
+    --neutral-color-A700-parts: #ffffff;
+    --neutral-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-400-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);
+    --neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);
+    --neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);
+    --neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);
+    --neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);
+    --neutral-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --neutral-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --neutral-color-50-parts-rgb: 250, 250, 250;
+    --neutral-color-100-parts-rgb: 245, 245, 245;
+    --neutral-color-200-parts-rgb: 238, 238, 238;
+    --neutral-color-300-parts-rgb: 224, 224, 224;
+    --neutral-color-400-parts-rgb: 189, 189, 189;
+    --neutral-color-500-parts-rgb: 158, 158, 158;
+    --neutral-color-600-parts-rgb: 117, 117, 117;
+    --neutral-color-700-parts-rgb: 97, 97, 97;
+    --neutral-color-800-parts-rgb: 66, 66, 66;
+    --neutral-color-900-parts-rgb: 33, 33, 33;
+    --neutral-color-A100-parts-rgb: 255, 255, 255;
+    --neutral-color-A200-parts-rgb: 255, 255, 255;
+    --neutral-color-A400-parts-rgb: 255, 255, 255;
+    --neutral-color-A700-parts-rgb: 255, 255, 255;
 }
 
 $arm-primary: (
@@ -461,3 +505,36 @@ $arm-error: (
         A700: var(--error-color-contrast-A700-parts),
     ),
 );
+
+$arm-neutral: (
+    50: var(--neutral-color-50-parts),
+    100: var(--neutral-color-100-parts),
+    200: var(--neutral-color-200-parts),
+    300: var(--neutral-color-300-parts),
+    400: var(--neutral-color-400-parts),
+    500: var(--neutral-color-500-parts),
+    600: var(--neutral-color-600-parts),
+    700: var(--neutral-color-700-parts),
+    800: var(--neutral-color-800-parts),
+    900: var(--neutral-color-900-parts),
+    A100: var(--neutral-color-A100-parts),
+    A200: var(--neutral-color-A200-parts),
+    A400: var(--neutral-color-A400-parts),
+    A700: var(--neutral-color-A700-parts),
+    contrast: (
+        50: var(--neutral-color-contrast-50-parts),
+        100: var(--neutral-color-contrast-100-parts),
+        200: var(--neutral-color-contrast-200-parts),
+        300: var(--neutral-color-contrast-300-parts),
+        400: var(--neutral-color-contrast-400-parts),
+        500: var(--neutral-color-contrast-500-parts),
+        600: var(--neutral-color-contrast-600-parts),
+        700: var(--neutral-color-contrast-700-parts),
+        800: var(--neutral-color-contrast-800-parts),
+        900: var(--neutral-color-contrast-900-parts),
+        A100: var(--neutral-color-contrast-A100-parts),
+        A200: var(--neutral-color-contrast-A200-parts),
+        A400: var(--neutral-color-contrast-A400-parts),
+        A700: var(--neutral-color-contrast-A700-parts),
+    ),
+);

package/assets/styles/sof-styles.scss

@@ -221,6 +221,29 @@ mat-button-toggle-group {
 
 /** 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
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+  }
+}
+
 button.mat-flat-button {
   &.sof-flat-button {
     padding: 0px 24px !important;
@@ -1086,34 +1109,58 @@ mat-card {
   word-break: break-all !important;
 }
 
-// We want to avoid using ng-deep, but until we organize our css cascading and get a set override file,
-// it may need to be used or at the very least used with the combination of a custom class (to prevent it from bleeding into other components)
-// in this case we used ng-deep on 'sof-form-field'. Doing it on the mat-form-field level (i.e. ::ng-deep mat-form-field.sof-form-field,
-// still bleeds into other components
-mat-form-field {
-  ::ng-deep &.sof-form-field {
-    .mat-form-field-wrapper {
-      padding: 0px !important;
-    }
-    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
-      padding-left: 0.5em !important;
-      padding-right: 0.5em !important;
-    }
-    .mat-form-field-wrapper
-      .mat-form-field-flex
-      .mat-form-field-infix
-      .mat-form-field-label-wrapper
-      .mat-form-field-label {
-      padding-left: 0.5em !important;
-      padding-right: 0.5em !important;
+::ng-deep mat-form-field.sof-form-field {
+  &.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;
     }
-    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix {
-      top: 0em !important;
-    }
-    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix {
-      top: 0em !important;
+    .mat-form-field-label {
+      color: mat-color($arm-error, 500) !important;
     }
   }
+  .mat-form-field-flex > div.mat-form-field-outline.mat-form-field-outline-thick {
+    color: mat-color($arm-primary, 500) !important;
+  }
+  .mat-form-field-wrapper {
+    padding: 0px !important;
+  }
+  .mat-form-field-flex {
+    padding: 0 16px 0 16px !important;
+  }
+  .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix {
+    top: 0em !important;
+    color: mat-color($arm-neutral, 300) !important;
+    padding-right: 0.5em !important;
+  }
+  .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix {
+    top: 0em !important;
+    color: mat-color($arm-error, 500) !important;
+  }
+  .mat-form-field-flex div.mat-form-field-outline-start {
+    border-radius: 6px 0 0 6px !important;
+    min-width: 6px !important;
+  }
+  .mat-form-field-flex div.mat-form-field-outline-end {
+    border-radius: 0 6px 6px 0 !important;
+  }
+  .mat-form-field-subscript-wrapper {
+    padding: 14px 16px 0px 16px !important;
+  }
+  mat-error {
+    font-family: "Poppins" !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    line-height: 18px !important;
+    color: mat-color($arm-error, 500) !important;
+  }
+  mat-hint {
+    font-family: "Poppins" !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
 }
 
 .toggle-button-left {
@@ -1138,6 +1185,60 @@ mat-form-field {
   }
 }
 
+// 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;
+  }
+  .mat-slide-toggle-thumb-container {
+    top: -1px !important;
+    left: -3px !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;
+  }
+  .mat-slide-toggle-bar {
+    background: mat-color($arm-primary, 500) !important;
+    border: 1px solid mat-color($arm-primary, 500) !important;
+  }
+}
+
+::ng-deep mat-slide-toggle.sof-slide-toggle.mat-disabled {
+  .mat-slide-toggle-thumb {
+    background-color: #ffffff !important;
+    border: 1px solid #f7f7f7 !important;
+  }
+  .mat-slide-toggle-bar {
+    background: #e9e9e9 !important;
+    border: 1px solid #f7f7f7 !important;
+  }
+  .mat-slide-toggle-content {
+    color: rgba(0, 0, 0, 0.87) !important;
+  }
+}
+
+.mat-slide-toggle.mat-disabled {
+  opacity: 1 !important;
+}
+// MatSlideToggle class overrides [END]
+
 .mobile-sr-only {
   @media only screen and (max-width: $mat-lt-sm) {
     border: 0;
@@ -1286,7 +1387,7 @@ mat-form-field {
 }
 
 .mat-card-mobile-header-override {
-  background: $light-grey;
+  background: mat-color($arm-neutral, 300);
   padding: 16px;
   margin: 0 -16px;
 }
@@ -1425,7 +1526,7 @@ mat-form-field {
       text-align: initial;
 
       &.action-buttons {
-        border-top: 1px solid $light-grey;
+        border-top: 1px solid mat-color($arm-neutral, 300);
         margin-top: 24px;
         display: flex;
         flex-wrap: wrap;
@@ -1457,7 +1558,7 @@ mat-form-field {
         padding-left: 0;
         margin: -10px -20px 8px -20px;
         padding: 16px 20px 16px 20px;
-        background: $light-grey;
+        background: mat-color($arm-neutral, 300);
         box-sizing: border-box;
         height: auto;
       }