@onemrvapublic/design-system-theme 0.0.0-semantically-released

package/overrides/_input.scss

@@ -0,0 +1,237 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  &.mat-focused,
+  &:hover {
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing {
+        border-width: 2px;
+      }
+
+      .mdc-notched-outline__notch {
+        border-width: 2px;
+      }
+    }
+  }
+}
+
+//@mixin theme($theme) {
+//  @include mat.input-base($theme);
+//  @include mat.input-theme($theme);
+//
+//  .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+//    .mdc-notched-outline--upgraded {
+//      .mdc-floating-label--float-above {
+//        --mat-mdc-form-field-label-transform: translateY(
+//          calc(calc(10px + var(--mat-form-field-container-height) / 2) * -1)
+//        );
+//      }
+//    }
+//  }
+//
+//  .mat-mdc-form-field {
+//    line-height: 26px;
+//    padding: 8px;
+//    --mat-mdc-form-field-floating-label-scale: 1;
+//
+//    .mat-mdc-form-field-required-marker {
+//      color: µ.error($theme, 500);
+//    }
+//
+//    .mat-mdc-text-field-wrapper {
+//      padding: 0 8px;
+//    }
+//
+//    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
+//      color: µ.grayscale($theme, 900);
+//    }
+//
+//    .mat-mdc-form-field-hint-spacer {
+//      display: none;
+//    }
+//
+//    .mat-mdc-form-field-hint-wrapper {
+//      padding: 4px 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;
+//            line-height: 16px;
+//          }
+//        }
+//      }
+//    }
+//
+//    mat-hint.with-counter {
+//      position: relative;
+//      height: 21px;
+//      width: 100%;
+//
+//      .counter {
+//        position: absolute;
+//        right: 0;
+//        top: 0;
+//      }
+//    }
+//
+//    &.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: µ.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;
+//            line-height: 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
+//      ) {
+//      .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 {
+//      padding: 7px 0 4px 0;
+//      display: flex;
+//      align-items: center;
+//    }
+//  }
+//}

package/overrides/_layout.scss

@@ -0,0 +1,35 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  &:not(.light-theme) {
+    @media (prefers-color-scheme: dark) {
+      header {
+        .logo {
+          filter: brightness(0) invert(1);
+        }
+        .application-title {
+          color: var(--mat-sys-on-surface) !important;
+        }
+      }
+    }
+  }
+
+  &.dark-theme {
+    header {
+      .logo {
+        filter: brightness(0) invert(1);
+      }
+      .application-title {
+        color: var(--mat-sys-on-surface);
+      }
+    }
+  }
+
+  .bkg {
+    .mat-drawer-content {
+      background-image: var(--background-error-page);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+}

package/overrides/_menu.scss

@@ -0,0 +1,25 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.menu-overrides(
+    (
+      item-label-text-weight: 500,
+    )
+  );
+  .cdk-overlay-container {
+    .mat-mdc-menu-content {
+      .menu-header {
+        font-weight: bold;
+        font-size: 1.1rem;
+        color: var(--mat-sys-on-surface);
+      }
+      .mat-mdc-menu-item {
+        &:active,
+        &.active {
+          border-left: 4px solid var(--mat-sys-secondary);
+          font-weight: bold !important;
+        }
+      }
+    }
+  }
+}

package/overrides/_panel.scss

@@ -0,0 +1,66 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  &:not(.light-theme) {
+    onemrva-mat-panel {
+      &[class^='mat-'] {
+        @media (prefers-color-scheme: dark) {
+          @include mat.form-field-overrides(
+            (
+              outlined-label-text-color: var(--mat-sys-on-background),
+              outlined-outline-color: var(--mat-sys-on-background),
+              outlined-focus-label-text-color: var(--mat-sys-on-background),
+              outlined-focus-outline-color: var(--mat-sys-on-background),
+              outlined-hover-label-text-color: var(--mat-sys-on-background),
+              outlined-hover-outline-color: var(--mat-sys-on-background),
+              outlined-input-text-color: var(--mat-sys-on-background),
+              outlined-input-text-placeholder-color: var(
+                  --mat-sys-on-background
+                ),
+            )
+          );
+          @include mat.select-overrides(
+            (
+              enabled-arrow-color: var(--mat-sys-on-background),
+              focused-arrow-color: var(--mat-sys-on-background),
+              placeholder-text-color: var(--mat-sys-on-background),
+              enabled-trigger-text-color: var(--mat-sys-on-background),
+            )
+          );
+        }
+      }
+    }
+  }
+  &.dark-theme {
+    onemrva-mat-panel {
+      onemrva-mat-panel {
+        &[class^='mat-'] {
+          @media (prefers-color-scheme: dark) {
+            @include mat.form-field-overrides(
+              (
+                outlined-label-text-color: var(--mat-sys-on-background),
+                outlined-outline-color: var(--mat-sys-on-background),
+                outlined-focus-label-text-color: var(--mat-sys-on-background),
+                outlined-focus-outline-color: var(--mat-sys-on-background),
+                outlined-hover-label-text-color: var(--mat-sys-on-background),
+                outlined-hover-outline-color: var(--mat-sys-on-background),
+                outlined-input-text-color: var(--mat-sys-on-background),
+                outlined-input-text-placeholder-color: var(
+                    --mat-sys-on-background
+                  ),
+              )
+            );
+            @include mat.select-overrides(
+              (
+                enabled-arrow-color: var(--mat-sys-on-background),
+                focused-arrow-color: var(--mat-sys-on-background),
+                placeholder-text-color: var(--mat-sys-on-background),
+                enabled-trigger-text-color: var(--mat-sys-on-background),
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/overrides/_progress-bar.scss

@@ -0,0 +1,29 @@
+@use '@angular/material' as mat;
+@use '../utilities/palettes' as palettes;
+
+@mixin override() {
+  @include mat.progress-bar-overrides(
+    (
+      track-height: 0.25rem,
+    )
+  );
+  //
+  //.mat-mdc-progress-bar {
+  //  border-radius: var(--button-border-radius);
+  //
+  //  .mdc-linear-progress__bar-inner {
+  //    border-radius: var(--button-border-radius);
+  //  }
+  //  &[aria-valuenow='100'] {
+  //    .mdc-linear-progress__bar-inner {
+  //      @include mat.theme(
+  //          (
+  //            color: (
+  //              primary: palettes.$success-palette,
+  //            ),
+  //          )
+  //      );
+  //    }
+  //  }
+  //}
+}

package/overrides/_radio.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.radio-overrides(
+    (
+      selected-icon-color: var(--mat-sys-secondary),
+      selected-hover-icon-color: var(--mat-sys-secondary),
+      selected-focus-icon-color: var(--mat-sys-secondary),
+      label-text-font: var(--mat-sys-label-large-font),
+      label-text-size: var(--mat-sys-label-large-size),
+      label-text-weight: var(--mat-sys-label-large-weight),
+    )
+  );
+  .mat-radio-inner-circle {
+    background: var(--background-gradient);
+  }
+}

package/overrides/_select.scss

@@ -0,0 +1,75 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  mat-select {
+    &.mat-mdc-select-multiple {
+      .mat-mdc-select-value-text {
+        padding-right: calc(7 * var(--spacer));
+        display: block;
+      }
+    }
+  }
+  .cdk-overlay-container {
+    .mat-mdc-select-panel {
+      //overflow: hidden;
+      padding: 0;
+      .selection-choice {
+        background: var(--mat-sys-surface-container-high);
+        font: var(--mat-sys-body-small);
+        width: 98%;
+        a {
+          text-decoration: underline;
+        }
+        span {
+          &.grey {
+            color: var(--mat-sys-neutral10);
+          }
+        }
+        .mat-disabled {
+          pointer-events: none;
+          font-weight: 400;
+          cursor: default;
+          // color: var(--mat-sys-neutral10);
+          text-decoration: none;
+        }
+      }
+      .option-list {
+        overflow-y: auto;
+        height: auto;
+        max-height: 226px;
+      }
+    }
+    .mat-mdc-option[aria-disabled='true'].contains-mat-select-search {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      opacity: 1;
+      margin-top: calc(-1 * var(--spacer));
+      pointer-events: all;
+
+      .mat-icon {
+        margin-right: 0;
+        margin-left: 0;
+      }
+      mat-pseudo-checkbox {
+        display: none;
+      }
+      .mdc-list-item__primary-text {
+        opacity: 1;
+      }
+    }
+    .mat-select-search-toggle-all-checkbox {
+      padding-left: var(--half-spacer);
+    }
+  }
+
+  //.mat-mdc-select {
+  //  padding: 0;
+  //  --mat-select-invalid-arrow-color: #{µ.error($theme, 500)};
+  //  //.mat-mdc-text-field-wrapper.mdc-text-field--outlined
+  //  //  .mat-mdc-form-field-infix {
+  //  //  padding: 12px 0;
+  //  //}
+  //}
+}

package/overrides/_slide-toggle.scss

@@ -0,0 +1,23 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.slide-toggle-overrides(
+    (
+      track-outline-color: var(--mat-sys-surface-variant),
+      selected-track-outline-color: var(--mat-sys-secondary),
+      //label-text-font: var(--brand-font),
+      //label-text-size: 1rem,
+       //label-text-weight: 500
+    )
+  );
+
+  .mat-mdc-slide-toggle {
+    .mdc-switch:enabled:hover:not(:active),
+    .mdc-switch:enabled:focus:not(:active),
+    .mdc-switch:enabled {
+      .mdc-switch__track:after {
+        background: var(--background-gradient);
+      }
+    }
+  }
+}

package/overrides/_stepper.scss

@@ -0,0 +1,196 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.stepper-overrides(
+    (
+      header-icon-foreground-color: var(--mat-sys-outline-variant),
+      header-icon-background-color: var(--mat-sys-background),
+      header-selected-state-icon-background-color: var(--mat-sys-primary),
+      header-done-state-icon-background-color: var(--mat-sys-primary),
+      header-edit-state-icon-background-color: var(--mat-sys-primary),
+      header-selected-state-icon-foreground-color: var(--mat-sys-on-primary),
+      header-done-state-icon-foreground-color: var(--mat-sys-on-primary),
+      header-edit-state-icon-foreground-color: var(--mat-sys-on-primary),
+    )
+  );
+
+  mat-stepper,
+  mat-vertical-stepper,
+  onemrva-mat-vertical-stepper {
+    .mat-vertical-stepper-header {
+      .mat-step-icon {
+        border: 2px solid var(--mat-sys-outline-variant);
+        height: 2.5rem;
+        width: 2.5rem;
+        margin-right: 1rem;
+        .mat-step-icon-content {
+          mat-icon {
+            height: 1.6rem;
+            width: 1.6rem;
+            line-height: 1.6rem;
+            font-size: 1.6rem;
+          }
+          span {
+            font-size: 1.2rem;
+          }
+        }
+      }
+      .mat-step-icon-selected {
+        border: 2px solid var(--mat-sys-background);
+        outline: 2px solid var(--mat-sys-primary);
+      }
+      .mat-step-icon-state-done {
+        border: 2px solid var(--mat-sys-primary);
+      }
+      .mat-step-icon-state-error {
+        border: 2px solid var(--mat-sys-error);
+      }
+    }
+
+    .mat-vertical-content-container {
+      .mat-vertical-stepper-content {
+        .mat-vertical-content {
+          margin: var(--spacer);
+          padding: 0 1.5rem 1.5rem 1.5rem;
+
+          .mat-step-summary {
+            height: auto;
+            opacity: 1;
+            overflow: inherit;
+            transition:
+              height 0s 1s,
+              opacity 1s linear;
+          }
+
+          .mat-step-form {
+            height: 0;
+            opacity: 0;
+            overflow: hidden;
+            transition: none;
+
+            mat-form-field {
+              opacity: 0;
+            }
+          }
+        }
+
+        &[aria-expanded='true'] {
+          .mat-vertical-content {
+            .mat-step-summary {
+              height: 0;
+              opacity: 0;
+              overflow: hidden;
+              transition: none;
+            }
+
+            .mat-step-form {
+              height: auto;
+              opacity: 1;
+              transition:
+                height 0s 1s,
+                opacity 1s linear;
+              overflow: inherit;
+
+              mat-form-field {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+      &.mat-stepper-vertical-line {
+        &:before {
+          --mat-stepper-header-height: 3rem;
+          left: var(--spacer);
+        }
+      }
+    }
+  }
+
+  //mat-stepper,
+  //mat-vertical-stepper,
+  //onemrva-mat-vertical-stepper {
+  //  .mat-step-header {
+  //    .mat-step-icon {
+  //      background-color: white;
+  //      border: 2px solid white;
+  //      color: var(--mat-sys-background);
+  //      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: var(--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';
+  //}
+}