@onemrvapublic/design-system-theme 16.2.5

package/components/_slide-toggle.scss

@@ -0,0 +1,107 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+  .mat-mdc-slide-toggle {
+    &.mat-primary {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background-color: µ.primary($theme, 500) !important;
+        background: µ.primary($theme, 500) !important;
+      }
+    }
+    &.mat-accent {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background: $onemrva-accent-gradient !important;
+      }
+    }
+    &.mat-warn {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background-color: µ.warn($theme, 500) !important;
+        background: µ.warn($theme, 500) !important;
+      }
+    }
+    &.mat-success {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background-color: µ.success($theme, 500) !important;
+        background: µ.success($theme, 500) !important;
+      }
+    }
+    &.mat-info {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background-color: µ.info($theme, 500) !important;
+        background: µ.info($theme, 500) !important;
+      }
+    }
+    &.mat-error {
+      .mdc-switch:enabled .mdc-switch__track:after {
+        background-color: µ.error($theme, 500) !important;
+        background: µ.error($theme, 500) !important;
+      }
+    }
+
+    label {
+      @include µ.label-button($theme);
+      font-family: mat.font-family(
+        map.get($theme, "typography"),
+        label-button
+      ); // HWKTMP For some reason, the font family is not taken into account from configuration
+    }
+
+    .mdc-switch {
+      width: 40px;
+
+      &:enabled .mdc-switch__track {
+        &:before {
+          background-color: µ.grayscale($theme, 500);
+        }
+        &:after {
+          border: none;
+        }
+      }
+
+      &.mdc-switch--disabled {
+        .mdc-switch__track {
+          opacity: 1;
+
+          &:before {
+            background-color: µ.grayscale($theme, 400);
+          }
+
+          &:after {
+            background-color: µ.grayscale($theme, 400);
+          }
+        }
+        .mdc-switch__icons {
+          background-color: white !important;
+          opacity: 1 !important;
+        }
+      }
+
+      .mdc-switch__track {
+        height: 24px;
+        border-radius: 500px;
+      }
+      .mdc-switch__handle-track {
+        left: 3px;
+
+        .mdc-switch__handle {
+          width: 18px;
+          height: 18px;
+
+          .mdc-switch__icons {
+            background-color: white;
+            border-radius: 500px;
+          }
+        }
+      }
+    }
+
+    .mdc-switch--checked {
+      .mdc-switch__handle {
+        left: -4px;
+      }
+    }
+  }
+}

package/components/_snackbar.scss

@@ -0,0 +1,35 @@
+@use "@angular/material" as mat;
+@use "./µ";
+
+@mixin theme($theme) {
+  .mat-mdc-snack-bar-container {
+    box-shadow: none;
+
+    &.mat-error {
+      color: µ.error($theme, "contrast-500");
+      background: µ.error($theme);
+    }
+    &.mat-warn {
+      color: µ.warn($theme, "contrast-500");
+      background: µ.warn($theme);
+    }
+    &.mat-accent {
+      color: µ.accent($theme, "contrast-500");
+      background: µ.accent($theme);
+    }
+    &.mat-success {
+      color: µ.success($theme, "contrast-500");
+      background: µ.success($theme);
+    }
+    &.mat-info {
+      color: µ.info($theme, "contrast-500");
+      background: µ.info($theme);
+    }
+    &.mat-primary {
+      color: µ.primary($theme);
+      background: white;
+      border: 2px solid µ.primary($theme);
+      border-radius: 4px;
+    }
+  }
+}

package/components/_stepper.scss

@@ -0,0 +1,92 @@
+@use "@angular/material" as mat;
+@use "./µ";
+
+@mixin theme($theme) {
+  $spacer: map-get($theme, "spacer");
+
+  mat-stepper,
+  mat-vertical-stepper,
+  onemrva-mat-vertical-stepper {
+    .mat-step-header {
+      .mat-step-icon {
+        background-color: white;
+        border: 2px solid white;
+        color: µ.grayscale($theme);
+        height: 38px;
+        width: 38px;
+
+        &:not(.mat-step-icon-state-done):not(.mat-step-icon-state-edit):not(
+            .mat-step-icon-selected
+          ):not(.mat-step-icon-state-error) {
+          border: 2px solid µ.grayscale($theme);
+        }
+
+        .mat-icon {
+          height: inherit;
+        }
+      }
+      .mat-step-icon-selected,
+      .mat-step-icon-state-done,
+      .mat-step-icon-state-edit {
+        background-color: µ.primary($theme);
+        color: white;
+        border: none;
+        border: 2px solid white;
+      }
+
+      .mat-step-icon-selected {
+        border: 2px solid white;
+        outline: 2px solid µ.primary($theme);
+      }
+      .mat-step-icon-state-error {
+        background-color: µ.warn($theme, 600);
+        color: white;
+        outline: none;
+        border: none;
+        mat-icon {
+          font-size: 16px;
+          height: 16px;
+          width: 16px;
+        }
+      }
+
+      .mat-step-label.mat-step-label-error {
+        color: µ.warn($theme, 600);
+      }
+    }
+    .mat-step-icon-state-done + .mat-stepper-horizontal-line {
+      border-top-color: µ.primary($theme);
+    }
+
+    .mat-stepper-horizontal-line {
+      margin: unset;
+    }
+
+    .mat-stepper-vertical-line:before {
+      top: 0;
+      bottom: 0;
+    }
+
+    .mat-step-text-label {
+      font-weight: 600;
+      font-family: "Source Sans Pro";
+    }
+
+    .mat-horizontal-content-container {
+      padding-top: $spacer;
+    }
+
+    .mat-horizontal-stepper-header {
+      padding: 0 16px;
+      height: 58px;
+    }
+
+    .mat-vertical-stepper-header {
+      padding: 16px;
+    }
+  }
+
+  .mat-step-icon-content {
+    font-family: "Source Sans Pro";
+  }
+}

package/components/_tables.scss

@@ -0,0 +1,93 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+  .mat-mdc-table {
+    th.mat-mdc-header-cell {
+      color: black;
+      font-weight: 600;
+      border-bottom: 2px solid µ.grayscale($theme, 200);
+      font-size: 16px;
+    }
+
+    .mat-mdc-row:last-child {
+      .mat-mdc-cell {
+        border-bottom: none;
+      }
+    }
+
+    td.mat-mdc-cell {
+      border: none;
+      line-height: 22px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      &:not(:last-child) {
+        padding-right: 12px;
+      }
+    }
+    &.mat-card-table {
+      border-spacing: 0 8px !important;
+      .mat-divider {
+        color: µ.grayscale($theme, 200);
+        &.mat-divider-vertical {
+          display: inline-flex;
+          height: 1.5em;
+        }
+      }
+    }
+    tr {
+      transition: background-color 400ms ease-out;
+
+      &:not([mat-header-row]):hover {
+        background-color: µ.grayscale($theme, 50);
+      }
+
+      &.onemrva-clickable-row {
+        background: µ.grayscale($theme, 50) 0% 0% no-repeat padding-box;
+        color: µ.grayscale($theme, 900);
+        cursor: pointer;
+        border-radius: 10px;
+        td:first-child {
+          border-radius: 10px 0 0 10px;
+        }
+        td:last-child {
+          border-radius: 0 10px 10px 0;
+          padding-right: 10px;
+        }
+
+        padding: 24px;
+        line-height: 22px;
+        &:hover,
+        &:active {
+          box-shadow: $box-shadow;
+        }
+
+        &.mat-primary {
+          background: µ.primary($theme, 50);
+        }
+
+        &.mat-accent {
+          background: $onemrva-accent-gradient;
+          color: white;
+        }
+
+        &.mat-warn {
+          background: µ.warn($theme, 50);
+        }
+
+        &.mat-error {
+          background: µ.error($theme, 50);
+        }
+
+        &.mat-success {
+          background: µ.success($theme, 50);
+        }
+
+        &.mat-info {
+          background: µ.info($theme, 50);
+        }
+      }
+    }
+  }
+}

package/components/_tabs.scss

@@ -0,0 +1,62 @@
+@use "@angular/material" as mat;
+@use "./µ";
+
+@mixin theme($theme) {
+  .mat-mdc-tab-link {
+    text-decoration: none;
+  }
+
+  //
+  // TAB GROUP
+  //
+  .mat-mdc-tab-group:not(.language-tabs) {
+    .mat-mdc-tab-header:after {
+      content: "";
+      display: block;
+      position: absolute;
+      height: 1px;
+      background: rgba(0, 0, 0, 0.12);
+      bottom: 3px;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .mat-mdc-tab-group {
+    .mat-mdc-tab-header {
+      border-bottom: none;
+      margin-bottom: 16px;
+    }
+
+    .mat-mdc-tab-labels {
+      gap: 60px;
+
+      .mat-mdc-tab {
+        min-width: 24px;
+        padding: 0;
+        font-weight: normal;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: µ.grayscale($theme, 900);
+        font-family: Poppins, sans-serif;
+
+        &.mdc-tab--active {
+          text-shadow: 0px 0px 1px µ.grayscale($theme, 900); // THC HACK
+          //font-weight: 700; // HWKTMP For now, this breaks the animation underlining active tab
+          opacity: 1;
+
+          .mdc-tab__text-label {
+            color: µ.grayscale($theme, 900);
+          }
+        }
+      }
+    }
+
+    .mdc-tab-indicator {
+      .mdc-tab-indicator__content {
+        border: 2px solid µ.accent($theme);
+      }
+    }
+  }
+}

package/components/_text-inputs.scss

@@ -0,0 +1,266 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin inputStyle($color) {
+  &.mat-focused,
+  &:hover {
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing {
+        border-width: 2px;
+        border-color: $color;
+      }
+      .mdc-notched-outline__notch {
+        border-width: 2px;
+        border-bottom-color: $color;
+      }
+    }
+  }
+}
+
+@mixin theme($theme) {
+  .mat-mdc-form-field {
+    line-height: 1.125;
+
+    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
+      color: µ.grayscale($theme, 900);
+    }
+
+    .mat-mdc-text-field-wrapper
+      .mat-mdc-form-field-flex
+      .mat-mdc-floating-label {
+      top: 25px;
+    }
+
+    .mat-mdc-form-field-hint-spacer {
+      display: none;
+    }
+
+    .mat-mdc-form-field-hint-wrapper {
+      padding: 0;
+    }
+
+    .mat-mdc-form-field-icon-suffix {
+      mat-icon {
+        height: auto;
+      }
+    }
+
+    &:not(.mat-form-field-onemrva-warning) {
+      .mat-mdc-form-field-error-wrapper {
+        padding: 0;
+        position: static;
+
+        .mat-mdc-form-field-error {
+          margin-bottom: 8px;
+          padding: 8px 1em;
+          background-color: #ffebe6;
+          border-bottom: 1px solid µ.error($theme, 500);
+          color: µ.error($theme, 500);
+          display: flex;
+          line-height: 1.125;
+
+          .mat-icon {
+            float: left;
+            font-size: 16px;
+            font-variation-settings: "FILL" 1;
+            margin-right: 8px;
+            vertical-align: baseline;
+            flex: 0 0 16px;
+          }
+        }
+      }
+    }
+
+    mat-hint.with-counter {
+      position: relative;
+      height: 21px;
+      width: 100%;
+
+      .counter {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
+    &.mat-form-field-onemrva-warning {
+      &.mat-focused,
+      &:hover {
+        .mat-mdc-text-field-wrapper
+          .mat-mdc-form-field-flex
+          .mat-mdc-floating-label {
+          left: 3px;
+        }
+      }
+
+      .mat-mdc-form-field-error-wrapper {
+        padding: 0;
+        position: static;
+
+        .mat-mdc-form-field-error {
+          margin-bottom: 8px;
+          padding: 8px 1em;
+          background-color: µ.warn($theme, 50);
+          border-bottom: 1px solid µ.warn($theme, 600);
+          color: µ.warn($theme, 600);
+          display: flex;
+          line-height: 1.125;
+
+          .mat-icon {
+            float: left;
+            font-size: 16px;
+            font-variation-settings: "FILL" 1;
+            margin-right: 8px;
+            vertical-align: baseline;
+            flex: 0 0 16px;
+          }
+        }
+      }
+
+      .mat-mdc-form-field-hint-wrapper {
+        padding: 0;
+        position: static;
+        .mat-warn {
+          margin-bottom: 8px;
+          padding: 8px 1em;
+          background-color: µ.warn($theme, 50);
+          border-bottom: 1px solid µ.warn($theme, 600);
+          color: µ.warn($theme, 600);
+          display: flex;
+          line-height: 1.125;
+
+          .mat-icon {
+            float: left;
+            font-size: 16px;
+            font-variation-settings: "FILL" 1;
+            margin-right: 8px;
+            vertical-align: baseline;
+            flex: 0 0 16px;
+          }
+        }
+      }
+    }
+
+    &:not(.mat-form-field-invalid):not(.mat-form-field-onemrva-warning):not(
+        .mat-form-field-disabled
+      ) {
+      &.mat-focused,
+      &:hover {
+        .mat-mdc-text-field-wrapper
+          .mat-mdc-form-field-flex
+          .mat-mdc-floating-label {
+          left: 3px;
+        }
+      }
+
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+          border-color: µ.grayscale($theme, 200);
+          outline: 1px solid transparent;
+        }
+        .mdc-notched-outline__notch {
+          border-bottom-color: µ.grayscale($theme, 200);
+          outline: 1px solid transparent;
+        }
+      }
+
+      @include inputStyle(µ.grayscale($theme, 800));
+    }
+
+    &.mat-form-field-invalid:not(.mat-form-field-onemrva-warning):not(
+        .mat-form-field-disabled
+      ) {
+      mat-label,
+      .mat-mdc-form-field-required-marker {
+        color: µ.error($theme);
+      }
+
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+          border-width: 2px;
+          border-color: µ.error($theme);
+        }
+        .mdc-notched-outline__notch {
+          border-width: 2px;
+          border-bottom-color: µ.error($theme);
+        }
+      }
+
+      .mdc-text-field__input {
+        caret-color: µ.error($theme, 500);
+      }
+
+      @include inputStyle(µ.error($theme));
+    }
+
+    &.mat-form-field-onemrva-warning:not(.mat-form-field-disabled) {
+      .mdc-notched-outline {
+        mat-label,
+        .mat-mdc-form-field-required-marker {
+          color: µ.warn($theme, 600);
+        }
+
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+          border-width: 2px;
+          border-color: µ.warn($theme, 600);
+        }
+        .mdc-notched-outline__notch {
+          border-width: 2px;
+          border-bottom-color: µ.warn($theme, 600);
+        }
+      }
+
+      @include inputStyle(µ.warn($theme, 600));
+    }
+
+    .mat-mdc-form-field-bottom-align::before {
+      display: initial;
+      order: 99;
+    }
+  }
+
+  .mat-mdc-text-field-wrapper.mdc-text-field--outlined
+    .mat-mdc-form-field-infix {
+    min-height: 46px;
+    padding: 1em 0;
+  }
+}
+
+// @mixin theme($theme) {
+
+//     // vertical alignment of the select arrow
+//     .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
+//         transform: translateY(20%);
+//     }
+
+//     mat-option {
+//         .mat-pseudo-checkbox {
+//             border: 2px solid µ.grayscale($theme);
+//         }
+//         .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
+//             background: $onemrva-accent-gradient !important;
+//             border: none !important;
+//         }
+//         .mat-option-text {
+
+//             color: µ.grayscale($theme, 700) !important;
+//         }
+//         .mat-pseudo-checkbox-checked::after {
+//             top: 4.4px;
+//             left: 3px;
+//         }
+//     }
+
+//     // mat-date-range-input .mat-date-range-input-separator {
+//     //     border-left: 1px solid red;
+//     //     height: 48px;
+//     //     margin: -11px 5px -15px;
+//     //     width: 0;
+//     //     overflow: hidden;
+//     // }
+// }

package/components/_toolbar.scss

@@ -0,0 +1,18 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  .mat-toolbar{
+    &.sticky {
+      position: sticky !important;
+      bottom: 0 !important;
+      top:90px !important;
+      background-color: µ.primary($theme, 50);
+      .spacer {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}

package/components/_tooltip.scss

@@ -0,0 +1,27 @@
+@use "@angular/material" as mat;
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+  .mat-mdc-tooltip {
+    font-size: 12px;
+    background: #ffffff;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+    margin: 0 -1px -2px -2px;
+    padding: $gap;
+
+    .mdc-tooltip__surface {
+      color: inherit;
+      background-color: inherit;
+    }
+  }
+
+  .mdc-tooltip__surface {
+    background-color: white;
+    color: µ.grayscale($theme, 900);
+    line-height: normal;
+    max-width: fit-content;
+    white-space: pre-wrap;
+  }
+}