@softheon/armature 17.17.1 → 17.18.0

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

@@ -0,0 +1,102 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+@use "../variables" as vars;
+
+mat-slider.sof-slider {
+  &.mat-primary {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-accent {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-warn {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-success {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-info {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-error {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
+  }
+
+  &.mat-neutral {
+    --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
+    --mat-mdc-slider-hover-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.05);
+    --mat-mdc-slider-focus-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.2);
+  }
+
+  --mdc-slider-active-track-height: 10px;
+  --mdc-slider-inactive-track-height: 10px;
+
+  &.mat-mdc-slider {
+    max-width: 300px;
+    width: 100%;
+  }
+
+  .mdc-slider__thumb-knob {
+    border-width: 2px !important;
+    background-color: vars.$surface-color-default-light !important;
+  }
+}

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

@@ -0,0 +1,204 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+@use "../variables" as vars;
+
+// @todo: update the use of 'var()' to use '#{mat.get-color-from-palette()}'
+
+mat-slide-toggle {
+  &.sof-slide-toggle {
+    height: auto;
+
+    .mdc-switch__track {
+      height: 22px !important;
+      width: 32px !important;
+      border-radius: 24px !important;
+    }
+
+    .mdc-switch__handle {
+      height: 20px !important;
+      width: 20px !important;
+      border-radius: 20px !important;
+      left: -3px !important;
+      border: 1px solid var(--neutral-color-300-parts) !important;
+
+      .mdc-switch__shadow {
+        background: vars.$surface-color-default-light !important;
+      }
+    }
+
+    .mdc-switch__ripple {
+      height: 0px !important;
+      width: 0px !important;
+    }
+
+    label {
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      font-size: 14px !important;
+      line-height: 150% !important;
+      white-space: normal !important;
+      flex-direction: row;
+      align-items: start !important;
+    }
+  }
+
+  &.sof-slide-toggle[size="large"] {
+    label {
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      font-size: 16px !important;
+      line-height: 150% !important;
+      white-space: normal !important;
+    }
+  }
+}
+
+mat-slide-toggle.sof-slide-toggle {
+  &.mat-primary {
+    --mdc-switch-selected-focus-state-layer-color: var(--primary-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--primary-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--primary-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--primary-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--primary-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--primary-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--primary-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--primary-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--primary-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      }
+    }
+  }
+
+  &.mat-accent {
+    --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--accent-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--accent-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--accent-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--accent-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--accent-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--accent-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--accent-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--accent-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+      }
+    }
+  }
+
+  &.mat-warn {
+    --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--warn-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--warn-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--warn-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--warn-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--warn-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--warn-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--warn-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--warn-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+      }
+    }
+  }
+
+  &.mat-success {
+    --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--success-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--success-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--success-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--success-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--success-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--success-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--success-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--success-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--success-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
+      }
+    }
+  }
+
+  &.mat-error {
+    --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--error-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--error-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--error-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--error-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--error-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--error-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--error-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--error-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--error-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      }
+    }
+  }
+
+  &.mat-info {
+    --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--info-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--info-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--info-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--info-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--info-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--info-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--info-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--info-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--info-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
+      }
+    }
+  }
+
+  &.mat-neutral {
+    --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mdc-switch-selected-handle-color: var(--neutral-color-300-parts) !important;
+    --mdc-switch-selected-hover-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mdc-switch-selected-pressed-state-layer-color: var(--neutral-color-300-parts) !important;
+    --mdc-switch-selected-focus-handle-color: var(--neutral-color-600-parts) !important;
+    --mdc-switch-selected-hover-handle-color: var(--neutral-color-600-parts) !important;
+    --mdc-switch-selected-pressed-handle-color: var(--neutral-color-600-parts) !important;
+    --mdc-switch-selected-focus-track-color: var(--neutral-color-500-parts) !important;
+    --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts) !important;
+    --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts) !important;
+    --mdc-switch-selected-track-color: var(--neutral-color-500-parts) !important;
+
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid vars.$text-high-emphasis !important;
+      }
+    }
+  }
+}
+
+mat-slide-toggle.sof-slide-toggle {
+  &:has(.mdc-switch--disabled) label {
+    color: vars.$text-high-emphasis !important;
+  }
+}

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

@@ -0,0 +1,2 @@
+
+// placeholder for upcoming tippy.js styles ...