@softheon/armature 19.12.0 → 19.14.1

package/assets/styles/_b2c-variables.scss

@@ -1,4 +1,7 @@
-@use "./variables" as vars;
+/*
+  ⚠️ NOTE: do not reference these variables, for internal use only ( do use './_variables.scss' )
+  * try not to add anything to this file ... 
+*/
 
 // Fonts - B2C
 $sof-b2c-font-family-heading: 'Poppins', sans-serif;

package/assets/styles/_typography.scss

@@ -2,35 +2,15 @@
 @use "./arm-theme" as theme;
 @use "./variables" as vars;
 
-body {
-  font-family: var(--sftn-font-family-body, sans-serif) !important;
-  letter-spacing: 0px !important;
-  font-size: var(--sftn-base-font-size);
-  margin: 0 !important;
-}
-
 /* 
-  disable ripple effects globally 
-  @note: this may not work in all cases due to scope ... 
+  Heading Styles 
+  * please use semantic html, styles will be applied per tag ex: <h1>
 */
-.mat-ripple {
-  display: none !important;
-}
-
-/* @deprecated */
-.merriweather {
-  font-family: var(--sftn-font-family-heading, sans-serif) !important;
-}
-
-.poppins {
-  font-family: var(--sftn-font-family, sans-serif) !important;
-}
-
 .h1, [h1], h1,
 .h2, [h2], h2,
 .h3, [h3], h3,
 .h4, [h4], h4 {
-  font-family: var(--sftn-font-family, sans-serif);
+  font-family: var(--sftn-font-family, sans-serif); // Consumer = 'Poppins'
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0px;
@@ -59,66 +39,61 @@ body {
   font-size: 18px;
 }
 
-
+/* 
+  Text Body/Emphasis
+*/
 .body1, .body2, .body3 {
-  font-family: var(--sftn-font-family-body, sans-serif);
+  font-family: var(--sftn-font-family-body, sans-serif); // Consumer = 'Poppins'
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0px;
   line-height: 150%;
 }
 
+/* Body/Emphasis 1 */
 .body1 {
-  font-size: var(--sftn-base-font-size-body-1);
+  font-size: var(--sftn-base-font-size-body-1); // Consumer = 16px
 }
 
+/* Body/Emphasis 2 */
 .body2 {
-  font-size: var(--sftn-base-font-size-body-2);
+  font-size: var(--sftn-base-font-size-body-2); // Consumer = 14px
 }
 
+/* Body/Emphasis 3 */
 .body3 {
   font-size: 12px;
 }
 
+/* 
+  Text Body/Emphasis for mat-form-field's
+*/
 mat-form-field {
   &.body1, &.body2, &.body3 {
-    font-family: var(--sftn-font-family-body, sans-serif) !important;
-    font-style: normal;
-    font-weight: normal;
-    letter-spacing: 0px;
-    line-height: 150%;
+    font-family: var(--sftn-font-family-body, sans-serif) !important; // Consumer = 'Poppins'
+    font-style: normal !important;
+    font-weight: normal !important;
+    letter-spacing: 0px !important;
+    line-height: 150% !important;
   }
 
+  /* Body/Emphasis 1 */
   &.body1 {
-    font-size: var(--sftn-base-font-size-body-1);
+    font-size: var(--sftn-base-font-size-body-1) !important; // Consumer = 16px
   }
 
+  /* Body/Emphasis 2 */
   &.body2 {
-    font-size: var(--sftn-base-font-size-body-2);
+    font-size: var(--sftn-base-font-size-body-2) !important; // Consumer = 14px
   }
 
+  /* Body/Emphasis 3 */
   &.body3 {
-    font-size: 12px;
-  }
-}
-
-fieldset {
-  border: none;
-  padding: 0px;
-  margin: 0px;
-
-  legend {
-    padding: 0;
+    font-size: 12px !important;
   }
 }
 
-.ls-half {
-  letter-spacing: 0.5px !important;
-}
-
-.ls-quarter {
-  letter-spacing: 0.25px !important;
-}
+/* Font Weight's */
 
 .fw-400 {
   font-weight: 400 !important;
@@ -132,6 +107,28 @@ fieldset {
   font-weight: 600 !important;
 }
 
+/* Text Color's */
+
+[text-high-emphasis],
+.text-high-emphasis {
+  color: vars.$text-high-emphasis;
+}
+
+[text-medium-emphasis],
+.text-medium-emphasis {
+  color: vars.$text-medium-emphasis;
+}
+
+[text-low-emphasis],
+.text-low-emphasis {
+  color: vars.$text-low-emphasis;
+}
+
+[text-inverse],
+.text-inverse {
+  color: vars.$text-inverse;
+}
+
 .color-primary {
   color: map.get(theme.$arm-primary, 500);
 }
@@ -160,48 +157,86 @@ fieldset {
   color: map.get(theme.$arm-neutral, 500);
 }
 
-.left-align {
-  text-align: left;
+.color-help {
+  color: map.get(theme.$arm-help, 500);
 }
 
-.center-align {
-  text-align: center;
-}
+/* Text Alignment's */
 
-.text-left,
-[text-left] {
+[text-left],
+.text-left {
   text-align: left !important;
 }
 
-.text-center,
-[text-center] {
+[text-center],
+.text-center {
   text-align: center !important;
 }
 
-[text-high-emphasis],
-.text-high-emphasis {
-  color: vars.$text-high-emphasis;
+[text-right],
+.text-right {
+  text-align: right !important;
 }
 
-[text-medium-emphasis],
-.text-medium-emphasis {
-  color: vars.$text-medium-emphasis;
+/* Text Overflow Ellipsis ... */
+
+[text-overflow-ellipsis],
+.text-overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-[text-low-emphasis],
-.text-low-emphasis {
-  color: vars.$text-low-emphasis;
+
+/* __OVERRIDES__ */
+
+/* <body> override */
+body {
+  font-family: var(--sftn-font-family-body, sans-serif) !important; // Consumer = 'Poppins'
+  letter-spacing: 0px !important;
+  font-size: var(--sftn-base-font-size); // Consumer = 16px
+  margin: 0 !important;
 }
 
-[text-inverse],
-.text-inverse {
-  color: vars.$text-inverse;
+/* 
+  disable ripple effects globally 
+  @note: this may not work in all cases due to scope ... 
+*/
+.mat-ripple {
+  display: none !important;
 }
 
-.text-overflow-ellipsis,
-[text-overflow-ellipsis] {
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+/* font-family for Consumer apps = 'Poppins' */
+.poppins {
+  font-family: var(--sftn-font-family, sans-serif) !important; // Consumer = 'Poppins'
+}
+
+/* <fieldset> override */
+fieldset {
+  border: none;
+  padding: 0px;
+  margin: 0px;
+
+  legend {
+    padding: 0;
+  }
+}
+
+
+/* __DEPRECATED__ */
+
+/* @deprecated */
+.merriweather {
+  font-family: var(--sftn-font-family-heading, sans-serif) !important;
+}
+
+/* @deprecated */
+.ls-half {
+  letter-spacing: 0.5px !important;
+}
+
+/* @deprecated */
+.ls-quarter {
+  letter-spacing: 0.25px !important;
+}

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

@@ -1,6 +1,6 @@
 @use "sass:map";
-@use "../arm-theme" as theme;
 @use "../variables" as vars;
+@use "../mixins/button-theme-emphasis-mixin" as button-mixin;
 
 // Base 'sof-button-v2'
 .sof-button-v2 {
@@ -51,7 +51,7 @@
   }
 }
 
-// Base 'sof-button-icon-v2'
+// Base 'sof-button-icon-v2' (icon only button)
 .sof-button-icon-v2 {
   border-radius: 8px !important;
   height: 40px !important;
@@ -72,169 +72,18 @@
 }
 
 /**
-  Button v2 variations -
+  Button v2 variations - (see mixin) 
   3 [theme] ( 'primary', 'neutral', 'destroy' )
   Each [theme] has 4 [emphasis] ( 'solid', 'secondary', 'floating', 'contained' )
   Each [emphasis] has 4 states ( 'hover', 'pressed', 'disabled', 'focus )
 */
 .sof-button-v2,
 .sof-button-icon-v2 {
-  // solid
-  &[emphasis="solid"] {
-    &[theme="primary"] {
-      background: map.get(theme.$arm-primary, 500) !important;
-      color: map.get(theme.$arm-primary, contrast, 500) !important;
-      &:hover {
-        background: map.get(theme.$arm-primary, 700) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-primary, 800) !important;
-      }
-    }
-    &[theme="neutral"] {
-      background: map.get(theme.$arm-neutral, 500) !important;
-      color: map.get(theme.$arm-neutral, contrast, 500) !important;
-      &:hover {
-        background: map.get(theme.$arm-neutral, 700) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-neutral, 800) !important;
-      }
-    }
-    &[theme="destroy"] {
-      background: map.get(theme.$arm-error, 500) !important;
-      color: map.get(theme.$arm-error, contrast, 500) !important;
-      &:hover {
-        background: map.get(theme.$arm-error, 700) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-error, 800) !important;
-      }
-    }
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      &:disabled {
-        background: map.get(theme.$arm-neutral, A50) !important;
-        color: vars.$text-low-emphasis !important;
-      }
-    }
-  }
-  // secondary
-  &[emphasis="secondary"] {
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      background: vars.$surface-color-level-one-light !important;
-      &:hover {
-        background: linear-gradient(
-          0deg, 
-          map.get(theme.$arm-neutral, A100) 0%, 
-          map.get(theme.$arm-neutral, A100) 100%
-        ), vars.$surface-color-level-one-light !important;
-      }
-      &:active {
-        background: linear-gradient(
-          0deg, 
-          map.get(theme.$arm-neutral, A200) 0%, 
-          map.get(theme.$arm-neutral, A200) 100%
-        ), vars.$surface-color-level-one-light !important;
-      }
-      &:disabled {
-        background: map.get(theme.$arm-neutral, A50) !important;
-        color: vars.$text-low-emphasis !important;
-      }
-    }
-    &[theme="primary"] {
-      color: map.get(theme.$arm-primary, 500) !important;
-    }
-    &[theme="neutral"] {
-      color: vars.$text-high-emphasis !important;
-    }
-    &[theme="destroy"] {
-      color: map.get(theme.$arm-error, 500) !important;
-    }
-  }
-  // floating, contained
-  &[emphasis="floating"], &[emphasis="contained"] {
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      background: transparent !important;
-    }
-    &[theme="primary"] {
-      color: map.get(theme.$arm-primary, 500) !important;
-      &:hover {
-        background: map.get(theme.$arm-primary, A100) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-primary, A200) !important;
-      }
-    }
-    &[theme="neutral"] {
-      color: vars.$text-high-emphasis !important;
-      &:hover {
-        background: map.get(theme.$arm-neutral, A100) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-neutral, A200) !important;
-      }
-    }
-    &[theme="destroy"] {
-      color: map.get(theme.$arm-error, 500) !important;
-      &:hover {
-        background: map.get(theme.$arm-error, A100) !important;
-      }
-      &:active {
-        background: map.get(theme.$arm-error, A200) !important;
-      }
-    }
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      &:disabled {
-        color: vars.$text-low-emphasis !important;
-      }
-    }
-  }
-  // contained
-  &[emphasis="contained"] {
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      box-sizing: border-box !important;
-      border: 2px solid !important;
-    }
-    &[theme="primary"] {
-      border-color: map.get(theme.$arm-primary, 500) !important;
-      color: map.get(theme.$arm-primary, 500) !important;
-    }
-    &[theme="neutral"] {
-      border-color: map.get(theme.$arm-neutral, 500) !important;
-      color: vars.$text-high-emphasis !important;
-    }
-    &[theme="destroy"] {
-      border-color: map.get(theme.$arm-error, 500) !important;
-      color: map.get(theme.$arm-error, 500) !important;
-    }
-    &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-      &:disabled {
-        border-color: vars.$text-low-emphasis !important;
-      }
-    }
-  }
-  // focus ring for all
-  &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
-    &:focus {
-      outline: 3px solid map.get(theme.$arm-primary, A500) !important;
-      outline-offset: 2px !important;
-    }
-  }
-  &[theme="destroy"] {
-    &:focus {
-      outline-color: map.get(theme.$arm-error, A500) !important;
-    }
-  }
-  // Remove mat-ripple effects
-  span.mat-mdc-button-persistent-ripple {
-    display: none !important;
-  }
-  span.mat-mdc-button-ripple {
-    display: none !important;
-  }
+  @include button-mixin.button-theme-emphasis-variations;
 }
 
 // Mat Notification badge
-button .mat-badge-content {
+.mat-badge-content {
   background: vars.$surface-color-inverse-light !important;
+  background-color: vars.$surface-color-inverse-light !important;
 }

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

@@ -2,45 +2,73 @@
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
 
-::ng-deep .mat-mdc-menu-panel {
-  background-color: vars.$surface-color-level-one-light !important;
-  box-shadow: 0px 4px 8px 0px map.get(theme.$arm-neutral, A300) !important;
-  border-radius: 8px !important;
-  max-width: unset !important;
-}
-
-::ng-deep .mat-mdc-menu-ripple {
-  display: none !important;
-}
+/** 
+  NOTE: due to the Angular Material menu's component scope, 
+  we need to '@use' this file directly in the component or page using it,
+  * using in a global file like the main 'styles.scss' will not take effect.
+*/
 
-::ng-deep .mat-mdc-menu-item {
-  .mat-mdc-menu-item-text {
-    font-weight: 500 !important;
-    color: vars.$text-high-emphasis !important;
-    font-family: var(--sftn-font-family, sans-serif) !important;
-    display: flex !important;
-    align-items: center !important;
-    letter-spacing: 0px !important;
-    white-space: nowrap !important;
+::ng-deep {
+  .mat-mdc-menu-panel {
+    background-color: vars.$surface-color-level-one-light !important;
+    box-shadow: 0px 4px 8px 0px map.get(theme.$arm-neutral, A300) !important;
+    border-radius: 8px !important;
+    max-width: unset !important;
+  }
 
-    i {
-      margin-right: 8px !important;
-    }
+  .mat-mdc-menu-ripple {
+    display: none !important;
   }
 
-  &.delete {
+  .mat-mdc-menu-item {
     .mat-mdc-menu-item-text {
-      color: map.get(theme.$arm-error, 500) !important;
+      font-weight: 500 !important;
+      color: vars.$text-high-emphasis !important;
+      font-family: var(--sftn-font-family, sans-serif) !important;
+      display: flex !important;
+      align-items: center !important;
+      letter-spacing: 0px !important;
+      white-space: nowrap !important;
 
       i {
+        margin-right: 8px !important;
+      }
+    }
+
+    &.delete {
+      .mat-mdc-menu-item-text {
         color: map.get(theme.$arm-error, 500) !important;
+
+        i {
+          color: map.get(theme.$arm-error, 500) !important;
+        }
       }
     }
   }
+
+  .mat-mdc-menu-content {
+    white-space: nowrap !important;
+    padding: 0 !important;
+  } 
+
+  .mat-mdc-menu-item:not([disabled]):hover {
+      background-color: map.get(theme.$arm-neutral, A50) !important;
+  }
+
+  .mat-mdc-menu-item:not([disabled]):focus {
+      background-color: map.get(theme.$arm-neutral, A50) !important;
+  }
 }
 
+.menu-title {
+  height: 20px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+}
 
-::ng-deep .mat-mdc-menu-content {
-  white-space: nowrap !important;
-  padding: 0 !important;
-} 
+.menu-option-label {
+  margin-left: 8px;
+  flex: 1;
+  text-align: end;
+}