@softheon/armature 17.31.2 → 17.31.4

package/assets/styles/_b2b-variables.scss

@@ -0,0 +1,78 @@
+@use "./variables" as vars;
+
+// Fonts - B2B
+$sof-b2b-font-family-heading: 'Inter', sans-serif !important;
+$sof-b2b-font-family-body: 'Inter', sans-serif !important;
+$sof-b2b-font-family: 'Inter', sans-serif !important;
+$sof-b2b-base-font-size: 14px;
+$sof-b2b-base-font-size-body-1: 14px;
+$sof-b2b-base-font-size-body-2: 12px;
+
+// Component - Dialog
+$sof-b2b-dialog-header-font-weight: 300 !important;
+$sof-b2b-dialog-header-letter-spacing: 0.25;
+
+// Component - Input
+$sof-b2b-input-height-default: 36px;
+$sof-b2b-input-icon-font-size: 1.3em;
+$sof-b2b-input-icon-font-size: #{$sof-b2b-input-height-default} - 4px;
+
+// Component - Button
+$sof-b2b-btn-font-size: 16px;
+$sof-b2b-btn-height: 36px;
+$sof-b2b-btn-height-sm: 28px;
+$sof-b2b-btn-height-md: 36px;
+$sof-b2b-btn-height-lg: 56px;
+
+// Component - Input Stepper
+$sof-b2b-input-stepper-height: #{$sof-b2b-input-height-default};
+$sof-b2b-input-focused-border-width: 2px;
+$sof-b2b-input-border-color-light-theme: #f3f3f3;
+$sof-b2b-input-bg-color-light-theme: #FAFAFA;
+$sof-b2b-input-bg-color-dark-theme: #424242;
+$sof-b2b-input-bg-color: #{$sof-b2b-input-bg-color-light-theme};
+
+:root {
+  // common base variables
+  --sftn-font-family: #{$sof-b2b-font-family};
+  --sftn-font-family-heading: #{$sof-b2b-font-family-heading};
+  --sftn-font-family-body: #{$sof-b2b-font-family-body};
+  --sftn-base-font-size: #{$sof-b2b-base-font-size};
+  --sftn-base-font-size-body-1: #{$sof-b2b-base-font-size-body-1};
+  --sftn-base-font-size-body-2: #{$sof-b2b-base-font-size-body-2};
+  --sftn-btn-height: #{$sof-b2b-btn-height};
+  --sftn-btn-font-size: #{$sof-b2b-btn-font-size};
+
+    // component - dialog
+    --sftn-dialog-header-fw: #{sof-b2b-dialog-header-font-weight};
+    --sftn-dialog-header-ls: #{$sof-b2b-dialog-header-letter-spacing};
+    --sftn-b2b-dialog-body-padding: 8px 24px 24px 24px;
+
+    // component - button
+    --sftn-btn-height-sm: #{$sof-b2b-btn-height-sm};
+    --sftn-btn-height-md: #{$sof-b2b-btn-height-md};
+    --sftn-btn-height-lg: #{$sof-b2b-btn-height-lg};
+    --sftn-btn-font-size-sm: 14px;
+    --sftn-btn-font-size-md: 14px;
+    --sftn-btn-font-size-lg: 16px;
+
+    // component -input
+    --sftn-input-icon-font-size: #{$sof-b2b-input-icon-font-size};
+    --sftn-input-height-default: #{$sof-b2b-input-height-default};
+    --sftn-input-height-sm: 28px;
+    --sftn-input-height-md: 36px;
+    --sftn-input-height-lg: 56px;
+    --sftn-input-suffix-icon-height: #{$sof-b2b-input-icon-font-size};
+    --sftn-input-bg-color: #{$sof-b2b-input-bg-color};
+    --sftn-input-border-width: #{$sof-b2b-input-focused-border-width};
+    --sftn-input-stepper-height: #{$sof-b2b-input-stepper-height};
+    --sftn-b2b-input-border-color: #{$sof-b2b-input-border-color-light-theme};
+
+    // component - tabs
+    --sftn-b2b-tabs-header-bg-color: transparent;
+    --sftn-b2b-tabs-active-bg-color: transparent;
+    --sftn-b2b-tabs-inactive-bg-color: transparent;
+
+    // component - spinner
+    --sftn-b2b-spinner-font-size: 12px;
+  }

package/assets/styles/_b2c-variables.scss

@@ -0,0 +1,43 @@
+@use "./variables" as vars;
+
+// Fonts - B2C
+$sof-b2c-font-family-heading: "Merriweather", serif !important;
+$sof-b2c-font-family-body: 'Poppins', sans-serif !important;
+$sof-b2c-font-family: 'Poppins', monospace !important;
+$sof-b2c-base-font-size: 16px;
+$sof-b2c-base-font-size-body-1: 16px;
+$sof-b2c-base-font-size-body-2: 14px;
+$sof-b2c-btn-height: 40px;
+$sof-b2c-btn-font-size: 16px;
+
+// Component - Dialog
+$sof-b2c-dialog-header-font-weight: 500;
+$sof-b2c-dialog-header-letter-spacing: unset;
+
+// Component - Input
+$sof-b2c-input-stepper-height: 56px;
+$sof-b2c-input-focused-border-width: 3px;
+$sof-b2c-input-bg-color: transparent;
+$sof-b2c-input-icon-font-size: 1.5em;
+
+:root {
+  // base variables
+  --sftn-font-family: #{$sof-b2c-font-family};
+  --sftn-font-family-heading: #{$sof-b2c-font-family-heading};
+  --sftn-font-family-body: #{$sof-b2c-font-family-body};
+  --sftn-base-font-size: #{$sof-b2c-base-font-size};
+  --sftn-base-font-size-body-1: #{$sof-b2c-base-font-size-body-1};
+  --sftn-base-font-size-body-2: #{$sof-b2c-base-font-size-body-2};
+  --sftn-btn-height: #{$sof-b2c-btn-height};
+  --sftn-btn-font-size: #{$sof-b2c-btn-font-size};
+
+  // component - dialog
+  --sftn-dialog-header-fw: #{$sof-b2c-dialog-header-font-weight};
+  --sftn-dialog-header-ls: #{$sof-b2c-dialog-header-letter-spacing};
+
+  // component - input
+  --sftn-input-stepper-height: #{$sof-b2c-input-stepper-height};
+  --sftn-input-border-width: #{$sof-b2c-input-focused-border-width};
+  --sftn-input-bg-color: #{$sof-b2c-input-bg-color};
+  --sftn-input-icon-font-size: #{$sof-b2c-input-icon-font-size};
+}

package/assets/styles/_typography.scss

@@ -3,9 +3,9 @@
 @use "./variables" as vars;
 
 body {
-  font-family: "Poppins", sans-serif !important;
+  font-family: var(--sftn-font-family-body, sans-serif) !important;
   letter-spacing: 0px !important;
-  font-size: 14px;
+  font-size: var(--sftn-base-font-size);
   margin: 0 !important;
 }
 
@@ -18,18 +18,18 @@ body {
 }
 
 .merriweather {
-  font-family: "Merriweather", serif !important;
+  font-family: var(--sftn-font-family-heading, sans-serif) !important;
 }
 
 .poppins {
-  font-family: "Poppins", sans-serif !important;
+  font-family: var(--sftn-font-family, sans-serif) !important;
 }
 
 .h1, [h1], h1,
 .h2, [h2], h2,
 .h3, [h3], h3,
 .h4, [h4], h4 {
-  font-family: "Poppins", sans-serif;
+  font-family: var(--sftn-font-family, sans-serif);
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0px;
@@ -60,7 +60,7 @@ body {
 
 
 .body1, .body2 {
-  font-family: "Poppins", sans-serif;
+  font-family: var(--sftn-font-family-body, sans-serif);
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0px;
@@ -68,16 +68,16 @@ body {
 }
 
 .body1 {
-  font-size: 16px;
+  font-size: var(--sftn-base-font-size-body-1);
 }
 
 .body2 {
-  font-size: 14px;
+  font-size: var(--sftn-base-font-size-body-2);
 }
 
 mat-form-field {
   &.body1, &.body2 {
-    font-family: "Poppins", sans-serif;
+    font-family: var(--sftn-font-family-body, sans-serif) !important;
     font-style: normal;
     font-weight: normal;
     letter-spacing: 0px;
@@ -85,11 +85,11 @@ mat-form-field {
   }
 
   &.body1 {
-    font-size: 16px;
+    font-size: var(--sftn-base-font-size-body-1);
   }
 
   &.body2 {
-    font-size: 14px;
+    font-size: var(--sftn-base-font-size-body-2);
   }
 }
 

package/assets/styles/_variables.scss

@@ -3,7 +3,7 @@ $screen-xs-start: 0px;
 $screen-xs-end: 599px;
 $screen-sm-start: 600px;
 $screen-sm-end: 959px;
-$screen-md-start: 960px; 
+$screen-md-start: 960px;
 $screen-md-end: 1279px;
 $screen-lg-start: 1280px;
 $screen-lg-end: 1919px;
@@ -18,6 +18,7 @@ $mat-gt-md: 1280px;
 
 // text emphasis (per design)
 $text-high-emphasis: rgba(0, 0, 0, 0.87);
+$text-medium-high-emphasis: rgba(0, 0, 0, 0.8); //#333333
 $text-medium-emphasis: rgba(0, 0, 0, 0.6);
 $text-low-emphasis: rgba(0, 0, 0, 0.38);
 $text-inverse: #ffffff;

package/assets/styles/b2b/_b2b-buttons.scss

@@ -0,0 +1,16 @@
+/** Buttons size attribute */
+.sof-button-v2,
+.sof-button-icon-v2 {
+  &.sof-button-v2[size="sm"] {
+    height: var(--sftn-btn-height-sm) !important;
+    font-size: var(--sftn-btn-font-size-sm) !important;
+  }
+  &.sof-button-v2[size="md"] {
+    height: var(--sftn-btn-height-md) !important;
+    font-size: var(--sftn-btn-font-size-md) !important;
+  }
+  &.sof-button-v2[size="lg"] {
+    height: var(--sftn-btn-height-lg) !important;
+    font-size: var(--sftn-btn-font-size-lg) !important;
+  }
+}

package/assets/styles/b2b/_b2b-inputs-override.scss

@@ -0,0 +1,174 @@
+/** Input Mat CSS Override  */
+
+:root {
+  --mdc-outlined-text-field-outline-color: var(--sftn-b2b-input-border-color, #f3f3f3); // Default border color
+  --mdc-outlined-text-field-outline-width: 1px; // Border thickness
+}
+
+.mat-mdc-form-field:not(.table-search-field) {
+  padding-top: 16px;
+}
+
+.mat-mdc-form-field.table-search-field {
+  --mat-form-field-container-height: 56px !important;
+}
+
+.mat-mdc-form-field-infix {
+  min-height: var(--sftn-input-height-default) !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  display: flex;
+  align-items: center;
+}
+
+.mat-mdc-input-element {
+  height: var(--sftn-input-height-default) !important;
+  line-height: var(--sftn-input-height-default) !important;
+}
+
+.mat-mdc-form-field-error-wrapper {
+  padding-left: 6px !important;
+}
+
+.mat-mdc-floating-label {
+  translate: 0 -8px;
+  scale: 1;
+  margin-left: -4px;
+  padding-left: 8px;
+
+  &.mdc-floating-label--float-above {
+    translate: 0 -10px !important;
+    padding-left: 0;
+  }
+}
+
+.mdc-notched-outline > .mdc-notched-outline__notch {
+  margin-left: -9px !important;
+  border-top: 1px solid transparent !important;
+  border-top-color: var(--mdc-outlined-text-field-outline-color, #f3f3f3) !important;
+  border-top-width: 1px !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):hover .mdc-notched-outline > .mdc-notched-outline__notch {
+  border-top-color: var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface)) !important;
+}
+
+.mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--outlined {
+  height: var(--sftn-input-height-default, 36px) !important;
+
+  &:not(.mdc-text-field--invalid).mdc-text-field--focused {
+    .mdc-notched-outline > .mdc-notched-outline__notch {
+      border-top-color: var(--primary-color-500-parts) !important;
+      border-top-width: var(--mdc-outlined-text-field-focus-outline-width, 2px) !important;
+
+      > .mat-mdc-floating-label {
+        translate: -1px -11px !important;
+      }
+    }
+  }
+}
+
+mat-form-field.sof-form-field.mat-form-field-invalid div.mdc-notched-outline > .mdc-notched-outline__notch {
+  border-top-color: var(--error-color-500-parts) !important;
+    > .mat-mdc-floating-label {
+      translate: 1px -11px !important;
+    }
+}
+
+// Date Picker Override
+.mat-datepicker-toggle {
+  .mat-mdc-icon-button.mat-mdc-button-base {
+    --mdc-icon-button-state-layer-size: var(--sftn-input-suffix-icon-height, 36px) !important;
+    width: var(--mdc-icon-button-state-layer-size);
+    height: var(--mdc-icon-button-state-layer-size);
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 2px;
+  }
+}
+
+// Input Stepper Override
+div.input-stepper-container {
+  > button.sof-flat-icon-button.mdc-button {
+    margin-top: 16px;
+    height: var(--sftn-b2b-input-stepper-height) !important;
+    width: var(--sftn-b2b-input-stepper-height) !important;
+    min-width:  var(--sftn-b2b-input-stepper-height) !important;
+  }
+}
+
+// Dynamic Sof-Input heights
+.sof-input-sm {
+  .mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--outlined {
+    height: var(--sftn-input-height-sm) !important;
+    max-height: var(--sftn-input-height-sm) !important;
+  }
+  .mat-mdc-form-field-infix {
+    min-height: var(--sftn-input-height-sm) !important;
+  }
+  .mat-mdc-input-element {
+    height: var(--sftn-input-height-sm) !important;
+    line-height: var(--sftn-input-height-sm) !important;
+  }
+}
+
+.sof-input-md {
+  .mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--outlined {
+    height: var(--sftn-input-height-md) !important;
+    max-height: var(--sftn-input-height-md) !important;
+  }
+  .mat-mdc-form-field-infix {
+    min-height: var(--sftn-input-height-md) !important;
+  }
+  .mat-mdc-input-element {
+    height: var(--sftn-input-height-md) !important;
+    line-height: var(--sftn-input-height-md) !important;
+  }
+}
+
+.sof-input-lg {
+  .mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--outlined {
+    height: var(--sftn-input-height-lg) !important;
+    max-height: var(--sftn-input-height-lg) !important;
+  }
+  .mat-mdc-form-field-infix {
+    min-height: var(--sftn-input-height-lg) !important;
+  }
+  .mat-mdc-input-element {
+    height: var(--sftn-input-height-lg) !important;
+    line-height: var(--sftn-input-height-lg) !important;
+  }
+}
+
+// Experimental - Inline label
+.sof-inline-label {
+  display: flex;
+  align-items: center;
+
+  &:before {
+    padding-left: 16px;
+    padding-right: 8px;
+    content: attr(data-text);
+    font-size: 12px;
+    line-height: reset;
+  }
+}
+
+/** TODO - Example html for experimental inline input:
+<div>
+  <mat-form-field appearance="outline">
+    <span
+      matPrefix
+      class="sof-inline-label"
+      data-text="Tenant"
+      aria-label="Tenant"
+    >
+      <i class="ph ph-database"></i>
+    </span>
+    <input matInput />
+  </mat-form-field>
+</div>
+*/

package/assets/styles/b2b/_b2b-override.scss

@@ -0,0 +1,23 @@
+/** Sof Modal Override */
+
+.sof-dialog-container,
+.mat-mdc-dialog-panel {
+  .dialog-buttons-container {
+    align-items: end !important;
+    place-content: end !important;
+    gap: 8px;
+
+    button {
+      min-width: 100px;
+      margin-right: 0 !important;
+    }
+  }
+
+  .dialog-header-container {
+    border-bottom-color: transparent !important;
+  }
+
+  .dialog-body-container {
+    padding: var(--sftn-b2b-dialog-body-padding, 24px) !important;
+  }
+}

package/assets/styles/b2b/_b2b-spinner.scss

@@ -0,0 +1,29 @@
+.sftn-b2b-loading-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 10;
+
+  .sftn-b2b-loading-spinner {
+    width: 25px;
+    height: 25px;
+    border: 2px solid var(--neutral-color-200-parts, rgba(0, 0, 0, 0.2));
+    border-top: 2px solid var(--primary-color-500-parts, #0078D4);
+    border-radius: 50%;
+    animation: spin 1.2s cubic-bezier(0.2, 0.1, 0.2, 0.7) infinite;
+    margin-bottom: 1px;
+  }
+  .sftn-b2b-loading-text {
+    color: var(--primary-color-500-parts, #0078D4);
+    font-size: var(--sftn-b2b-spinner-font-size);
+    font-weight: 500;
+    font-family: var(--sftn-font-family);
+  }
+}
+

package/assets/styles/b2b/_b2b-tabs.scss

@@ -0,0 +1,116 @@
+.mat-mdc-tab-group.sof-tabs-b2b {
+  .mat-mdc-tab-header {
+    --mat-tab-header-label-text-font: var(--sftn-font-family);
+    --mat-tab-header-label-text-size: 14px;
+    --mat-tab-header-label-text-tracking: 0.5px;
+    --mat-tab-header-label-text-line-height: 36px;
+    --mat-tab-header-label-text-weight: 500;
+  }
+
+  .mat-mdc-tab-label-container {
+    background: var(--sftn-b2b-tabs-header-bg-color);
+  }
+
+  .mdc-tab {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    min-width: 48px !important;
+    background: var(--sftn-b2b-tabs-inactive-bg-color);
+
+    &.mat-mdc-tab.mdc-tab--active {
+      background: var(--sftn-b2b-tabs-active-bg-color);
+      .sof-tabs-b2b--text {
+        font-weight: 600 !important;
+        letter-spacing: .4px !important;
+      }
+    }
+  }
+
+  &.narrow {
+    .mat-mdc-tab-header {
+      --mdc-secondary-navigation-tab-container-height: 36px;
+    }
+
+    .mdc-tab {
+      padding-left: 16px !important;
+      padding-right: 16px !important;
+    }
+  }
+
+  &:not(.no-animation) {
+    .mat-mdc-tab-body {
+      animation: sof-animation-fade-out 0.4s ease-in;
+      opacity: 0;
+    }
+
+    .mat-mdc-tab-body.mat-mdc-tab-body-active {
+      animation: sof-animation-fade-in 0.4s ease-out;
+      opacity: 1;
+    }
+  }
+
+  .sof-tabs-b2b--label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    .sof-tabs-b2b--icon {
+      font-size: 16px;
+    }
+  }
+
+  &.icons-only-inactive {
+    .mdc-tab.mat-mdc-tab:not(.mdc-tab--active) {
+      .hidden-not-active {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        margin-left: calc(8px * -1);
+      }
+
+      .sof-tabs-b2b--text {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        margin-left: calc(8px * -1);
+      }
+    }
+
+    .mat-mdc-tab.mdc-tab.mdc-tab--active {
+      .sof-tabs-b2b--text {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@keyframes sof-animation-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes sof-animation-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -61,7 +61,7 @@ mat-button-toggle-group {
 
           .mat-button-toggle-label-content {
             text-transform: capitalize !important;
-            font-family: "Poppins" !important;
+            font-family: var(--sftn-font-family, sans-serif) !important;
             font-weight: 600 !important;
             font-size: 16px !important;
             line-height: 24px !important;

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

@@ -2,15 +2,15 @@
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
 
-// Base 'sof-button-v2' 
+// Base 'sof-button-v2'
 .sof-button-v2 {
   padding: 8px 16px !important;
-  height: 40px !important;
+  height: var(--sftn-btn-height) !important;
   border-radius: 8px !important;
-  font-family: Poppins !important;
+  font-family: var(--sftn-font-family, sans-serif) !important;
   font-style: normal !important;
   font-weight: 500 !important;
-  font-size: 16px !important;
+  font-size: var(--sftn-btn-font-size) !important;
   line-height: normal !important;
   letter-spacing: 0px !important;
   text-transform: capitalize !important;
@@ -35,7 +35,7 @@
   }
 }
 
-// Base 'sof-button-icon-v2' 
+// Base 'sof-button-icon-v2'
 .sof-button-icon-v2 {
   border-radius: 8px !important;
   height: 40px !important;
@@ -55,7 +55,7 @@
   }
 }
 
-/** 
+/**
   Button v2 variations -
   3 [theme] ( 'primary', 'neutral', 'destroy' )
   Each [theme] has 4 [emphasis] ( 'solid', 'secondary', 'floating', 'contained' )
@@ -63,7 +63,7 @@
 */
 .sof-button-v2,
 .sof-button-icon-v2 {
-  // solid 
+  // solid
   &[emphasis="solid"] {
     &[theme="primary"] {
       background: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
@@ -112,7 +112,7 @@
       }
     }
   }
-  // secondary 
+  // secondary
   &[emphasis="secondary"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       background: vars.$surface-color-level-one-light !important;
@@ -202,7 +202,7 @@
       }
     }
   }
-  // contained 
+  // contained
   &[emphasis="contained"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       box-sizing: border-box !important;
@@ -226,7 +226,7 @@
       }
     }
   }
-  // focus ring for all 
+  // focus ring for all
   &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
     &:focus {
       outline: 3px solid !important;
@@ -239,7 +239,7 @@
       outline-color: mat.get-color-from-palette(theme.$arm-error, 300) !important;
     }
   }
-  // Remove mat-ripple effects 
+  // Remove mat-ripple effects
   span.mat-mdc-button-persistent-ripple {
     display: none !important;
   }
@@ -248,7 +248,7 @@
   }
 }
 
-// Mat Notification badge 
+// Mat Notification badge
 button .mat-badge-content {
   background: vars.$surface-color-inverse-light !important;
   background-color: vars.$surface-color-inverse-light !important;