@softheon/armature 19.5.0 → 19.8.0

package/assets/styles/_arm-theme.scss

@@ -390,6 +390,62 @@
   --neutral-color-700-parts-rgb: 51, 51, 51;
   --neutral-color-800-parts-rgb: 33, 33, 33;
   --neutral-color-900-parts-rgb: 20, 20, 20;
+
+
+  --help-color-50-parts: #EFE3FE;
+  --help-color-100-parts: #E0CAFD;
+  --help-color-200-parts: #C194FB;
+  --help-color-300-parts: #994FF8;
+  --help-color-400-parts: #8831F7;
+  --help-color-500-parts: #7714F6;
+  --help-color-600-parts: #6809E3;
+  --help-color-700-parts: #5B08C5;
+  --help-color-800-parts: #4D06A8;
+  --help-color-900-parts: #40058A;
+
+  --help-color-A50-parts: rgba(119, 20, 246, 0.04);
+  --help-color-A100-parts: rgba(119, 20, 246, 0.08);
+  --help-color-A200-parts: rgba(119, 20, 246, 0.16);
+  --help-color-A300-parts: rgba(119, 20, 246, 0.24);
+  --help-color-A400-parts: rgba(119, 20, 246, 0.32);
+  --help-color-A500-parts: rgba(119, 20, 246, 0.40);
+  --help-color-A600-parts: rgba(119, 20, 246, 0.48);
+  --help-color-A700-parts: rgba(119, 20, 246, 0.56);
+  --help-color-A800-parts: rgba(119, 20, 246, 0.64);
+  --help-color-A900-parts: rgba(119, 20, 246, 0.72);
+
+  --help-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-300-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-400-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-500-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-600-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-700-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-800-parts: rgba(255, 255, 255, 1);
+  --help-color-contrast-900-parts: rgba(255, 255, 255, 1);
+
+  --help-color-contrast-A50-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A300-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A500-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A600-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A800-parts: rgba(0, 0, 0, 0.87);
+  --help-color-contrast-A900-parts: rgba(0, 0, 0, 0.87);
+
+  --help-color-50-parts-rgb: 239, 227, 254;
+  --help-color-100-parts-rgb: 224, 202, 253;
+  --help-color-200-parts-rgb: 193, 148, 251;
+  --help-color-300-parts-rgb: 153, 79, 248;
+  --help-color-400-parts-rgb: 136, 49, 247;
+  --help-color-500-parts-rgb: 119, 20, 246;
+  --help-color-600-parts-rgb: 104, 9, 227;
+  --help-color-700-parts-rgb: 91, 8, 197;
+  --help-color-800-parts-rgb: 77, 6, 168;
+  --help-color-900-parts-rgb: 64, 5, 138;
 }
 
 
@@ -707,3 +763,48 @@ $arm-neutral: (
     A900: var(--neutral-color-contrast-A900-parts)
   )
 );
+
+$arm-help: (
+  50: var(--help-color-50-parts),
+  100: var(--help-color-100-parts),
+  200: var(--help-color-200-parts),
+  300: var(--help-color-300-parts),
+  400: var(--help-color-400-parts),
+  500: var(--help-color-500-parts),
+  600: var(--help-color-600-parts),
+  700: var(--help-color-700-parts),
+  800: var(--help-color-800-parts),
+  900: var(--help-color-900-parts),
+  A50: var(--help-color-A50-parts),
+  A100: var(--help-color-A100-parts),
+  A200: var(--help-color-A200-parts),
+  A300: var(--help-color-A300-parts),
+  A400: var(--help-color-A400-parts),
+  A500: var(--help-color-A500-parts),
+  A600: var(--help-color-A600-parts),
+  A700: var(--help-color-A700-parts),
+  A800: var(--help-color-A800-parts),
+  A900: var(--help-color-A900-parts),
+  contrast: (
+    50: var(--help-color-contrast-50-parts),
+    100: var(--help-color-contrast-100-parts),
+    200: var(--help-color-contrast-200-parts),
+    300: var(--help-color-contrast-300-parts),
+    400: var(--help-color-contrast-400-parts),
+    500: var(--help-color-contrast-500-parts),
+    600: var(--help-color-contrast-600-parts),
+    700: var(--help-color-contrast-700-parts),
+    800: var(--help-color-contrast-800-parts),
+    900: var(--help-color-contrast-900-parts),
+    A50: var(--help-color-contrast-A50-parts),
+    A100: var(--help-color-contrast-A100-parts),
+    A200: var(--help-color-contrast-A200-parts),
+    A300: var(--help-color-contrast-A300-parts),
+    A400: var(--help-color-contrast-A400-parts),
+    A500: var(--help-color-contrast-A500-parts),
+    A600: var(--help-color-contrast-A600-parts),
+    A700: var(--help-color-contrast-A700-parts),
+    A800: var(--help-color-contrast-A800-parts),
+    A900: var(--help-color-contrast-A900-parts)
+  )
+);

package/assets/styles/_typography.scss

@@ -189,3 +189,11 @@ fieldset {
 .text-inverse {
   color: vars.$text-inverse;
 }
+
+.text-overflow-ellipsis,
+[text-overflow-ellipsis] {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -19,9 +19,8 @@ mat-button-toggle-group {
       height: 40px !important;
 
       &:focus-within {
-        outline: 3px solid !important;
+        outline: 3px solid map.get(theme.$arm-primary, A500) !important;
         outline-offset: 2px !important;
-        outline-color: map.get(theme.$arm-primary, 300) !important;
       }
 
       &.toggle-left {
@@ -125,9 +124,8 @@ mat-button-toggle-group {
     .error {
 
       &:focus-within {
-        outline: 3px solid !important;
+        outline: 3px solid map.get(theme.$arm-primary, A500);
         outline-offset: 2px !important;
-        outline-color: map.get(theme.$arm-error, 300) !important;
       }
 
       &.toggle-left, &.toggle-middle, &.toggle-right, &.mat-button-toggle-checked {

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

@@ -14,6 +14,7 @@
   line-height: normal !important;
   letter-spacing: 0px !important;
   text-transform: capitalize !important;
+  min-width: unset !important;
 
   .mdc-button__label {
     display: flex !important;
@@ -33,6 +34,21 @@
   &.full-width {
     width: 100% !important;
   }
+
+  &.mini {
+    height: 24px !important;
+    font-size: 12px !important;
+    padding: 0px 4px !important;
+    border-radius: 4px !important;
+
+    .mdc-button__label {
+      gap: 4px !important;
+
+      i {
+        font-size: 16px !important;
+      }
+    }
+  }
 }
 
 // Base 'sof-button-icon-v2'
@@ -200,14 +216,13 @@
   // focus ring for all
   &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
     &:focus {
-      outline: 3px solid !important;
+      outline: 3px solid map.get(theme.$arm-primary, A500) !important;
       outline-offset: 2px !important;
-      outline-color: map.get(theme.$arm-primary, 300) !important;
     }
   }
   &[theme="destroy"] {
     &:focus {
-      outline-color: map.get(theme.$arm-error, 300) !important;
+      outline-color: map.get(theme.$arm-error, A500) !important;
     }
   }
   // Remove mat-ripple effects

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

@@ -33,9 +33,8 @@
     }
 
     .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background {
-      outline: 3px solid !important;
+      outline: 3px solid map.get(theme.$arm-primary, A500) !important;
       outline-offset: 2px !important;
-      outline-color: map.get(theme.$arm-primary, 300) !important;
     }
 
     .mdc-checkbox__background {

package/assets/styles/material-override/_expansion-panel.scss

@@ -13,9 +13,8 @@
   }
 
   &:focus-within {
-    outline: 3px solid !important;
+    outline: 3px solid map.get(theme.$arm-primary, A500) !important;
     outline-offset: 2px !important;
-    outline-color: map.get(theme.$arm-primary, 300) !important;
   }
 
   &:not(.mat-expanded) {

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

@@ -13,20 +13,34 @@
   display: none !important;
 }
 
-::ng-deep .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-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;
 
-  i {
-    margin-right: 8px !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;
+      }
+    }
   }
 }
 
+
 ::ng-deep .mat-mdc-menu-content {
   white-space: nowrap !important;
+  padding: 0 !important;
 } 

package/assets/styles/material-override/_radio-button.scss

@@ -97,9 +97,8 @@
     }
 
     .mdc-radio__native-control:focus ~ .mdc-radio__background {
-      outline: 3px solid !important;
+      outline: 3px solid map.get(theme.$arm-primary, A500) !important;
       outline-offset: 2px !important;
-      outline-color: map.get(theme.$arm-primary, 300) !important;
     }
 
     .mdc-radio__background {

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

@@ -199,6 +199,6 @@ mat-slide-toggle.sof-slide-toggle {
 
 mat-slide-toggle.sof-slide-toggle {
   &:has(.mdc-switch--disabled) label {
-    color: vars.$text-high-emphasis !important;
+    color: vars.$text-low-emphasis !important;
   }
 }

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

@@ -147,9 +147,8 @@
           background-color: rgba(255, 255, 255, 0.16) !important;
         }
         &:focus {
-          outline: 3px solid !important;
+          outline: 3px solid map.get(theme.$arm-primary, A500) !important;
           outline-offset: 2px !important;
-          outline-color: map.get(theme.$arm-primary, 300) !important;
         }
 
         .mdc-button__label {
@@ -186,8 +185,7 @@
 
   &:focus {
     border-radius: 4px !important;
-    outline: 3px solid !important;
+    outline: 3px solid map.get(theme.$arm-primary, A500) !important;
     outline-offset: 2px !important;
-    outline-color: map.get(theme.$arm-primary, 300) !important;
   }
 }