@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/theme/index.scss

@@ -0,0 +1,230 @@
+@forward './overrides/autocomplete' as autocomplete-*;
+@forward './overrides/button' as button-*;
+@forward './overrides/button-toggle' as button-toggle-*;
+@forward './overrides/card' as cards-*;
+@forward './overrides/checkbox' as checkbox-*;
+@forward './overrides/chips' as chips-*;
+@forward './overrides/datepicker' as datepicker-*;
+@forward './overrides/drag-and-drop' as drag-and-drop-*;
+@forward './overrides/dialogs' as dialogs-*;
+@forward './overrides/divider' as divider-*;
+@forward './overrides/expansion' as expansion-*;
+@forward './overrides/form-field' as form-field-*;
+@forward './overrides/icon' as icon-*;
+@forward './overrides/icon-button' as icon-button-*;
+@forward './overrides/menu' as menu-*;
+@forward './overrides/option' as option-*;
+@forward './overrides/progress-bar' as progress-bar-*;
+@forward './overrides/radio' as radio-*;
+@forward './overrides/slide-toggle' as slide-toggle-*;
+@forward './overrides/table' as tables-*;
+@forward './overrides/tabs' as tabs-*;
+@forward './overrides/input' as input-*;
+@forward './overrides/stepper' as stepper-*;
+@forward './overrides/icon' as icon-*;
+@forward './overrides/tooltip' as tooltip-*;
+@forward './overrides/toolbar' as toolbar-*;
+@forward './overrides/select' as select-*;
+@forward './overrides/sidenav' as sidenav-*;
+@forward './overrides/fab' as fab-*;
+
+@forward './utilities/spacing' show spacing;
+@forward './utilities/grid' show grid;
+@forward './utilities/utilities' show utilities;
+
+// ------------------------------------------------------------
+@use '@angular/material' as mat;
+
+@use './utilities/palettes' as palettes;
+@use './utilities/tokens' as tokens;
+@use './utilities/variables' as variables;
+@use './utilities/utilities';
+@use './utilities/animations';
+@use './utilities/fonts';
+@use './utilities/spacing';
+@use './utilities/grid';
+@use './utilities/container' as container;
+
+@use './overrides/autocomplete';
+@use './overrides/button-toggle';
+@use './overrides/button';
+@use './overrides/checkbox';
+@use './overrides/card';
+@use './overrides/carousel';
+@use './overrides/chips';
+@use './overrides/datepicker';
+@use './overrides/dialogs';
+@use './overrides/divider';
+@use './overrides/drag-and-drop';
+@use './overrides/expansion';
+@use './overrides/fab';
+@use './overrides/icon';
+@use './overrides/icon-button';
+@use './overrides/form-field';
+@use './overrides/menu';
+@use './overrides/option';
+@use './overrides/progress-bar';
+@use './overrides/panel';
+@use './overrides/tabs';
+@use './overrides/radio';
+@use './overrides/select';
+@use './overrides/sidenav';
+@use './overrides/slide-toggle';
+@use './overrides/table';
+@use './overrides/layout';
+@use './overrides/tooltip';
+@use './overrides/toast';
+@use './overrides/toolbar';
+@use './overrides/toc';
+@use './overrides/stepper';
+@use './overrides/stickers';
+
+@mixin onemrva($colorScheme: light) {
+  // Force light mode only
+  color-scheme: light;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  margin: 0;
+  padding: 0;
+
+  // &.dark-theme {
+  //   color-scheme: dark !important;
+  //   @media (prefers-color-scheme: light) {
+  //     color-scheme: dark !important;
+  //   }
+  // }
+
+  // Dark theme disabled - always use light mode
+  &.light-theme {
+    color-scheme: light !important;
+    @media (prefers-color-scheme: dark) {
+      color-scheme: light !important;
+    }
+  }
+
+  // The overlay for datepicker needs to be able to go above the
+  // top navbar of Wave
+  .cdk-overlay-container {
+    z-index: 1500;
+  }
+
+  @include fonts.theme();
+  @include layout.override();
+  @include utilities.utilities();
+  @include animations.animations();
+  @include spacing.spacing();
+  @include grid.grid();
+
+  @include mat.theme(
+    (
+      color: (
+        use-system-variables: true,
+        primary: palettes.$primary-palette,
+        tertiary: palettes.$tertiary-palette,
+      ),
+      //typography: (
+      //  use-system-variables: false,
+      //  plain-family: Source Sans Pro,
+      //  brand-family: Poppins,
+      //  bold-weight: 900,
+      //  medium-weight: 600,
+      //  regular-weight: 400,
+      //),
+       //density: 0,
+    )
+  );
+  .mat-accent {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$tertiary-palette,
+        ),
+      )
+    );
+  }
+  .mat-success {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$success-palette,
+        ),
+      )
+    );
+  }
+  .mat-error {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$error-palette,
+        ),
+      )
+    );
+  }
+  .mat-warn {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$warn-palette,
+        ),
+      )
+    );
+  }
+  .mat-info {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$info-palette,
+        ),
+      )
+    );
+  }
+  .mat-grayscale,
+  .mat-disabled,
+  .mdc-checkbox--disabled,
+  .mat-neutral {
+    @include mat.theme(
+      (
+        color: (
+          primary: palettes.$neutral-palette,
+        ),
+      )
+    );
+  }
+  @include container.theme();
+
+  @include autocomplete.override();
+  @include button.override();
+  @include button-toggle.override();
+  @include checkbox.override();
+  @include card.override();
+  @include chips.override();
+  @include carousel.override();
+  @include datepicker.override();
+  @include dialogs.override();
+  @include divider.override();
+  @include drag-and-drop.override();
+  @include expansion.override();
+  @include form-field.override();
+  @include fab.override();
+  @include icon.override();
+  @include icon-button.override();
+  @include menu.override();
+  @include option.override();
+  @include panel.override();
+  @include progress-bar.override();
+  @include radio.override();
+  @include select.override();
+  @include slide-toggle.override();
+  @include table.override();
+  @include tabs.override();
+  @include toast.override();
+  @include toolbar.override();
+  @include tooltip.override();
+  @include toc.override();
+  @include toolbar.override();
+  @include stepper.override();
+  @include sidenav.override();
+  @include stickers.override();
+
+  @include tokens.theme();
+}

package/theme/overrides/_autocomplete.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.autocomplete-overrides(
+    (
+      background-color: var(--mat-sys-surface),
+    )
+  );
+}

package/theme/overrides/_button-toggle.scss

@@ -0,0 +1,14 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.button-toggle-overrides(
+    (
+      selected-state-background-color: var(--mat-sys-primary),
+      selected-state-text-color: var(--mat-sys-on-primary),
+      height: 36px,
+      label-text-font: var(--brand-font),
+      label-text-size: 1rem,
+      label-text-weight: 600,
+    )
+  );
+}

package/theme/overrides/_button.scss

@@ -0,0 +1,140 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.button-overrides(
+    (
+      filled-label-text-font: var(--brand-font),
+      outlined-label-text-font: var(--brand-font),
+      text-label-text-font: var(--brand-font),
+      outlined-outline-color: var(--mat-sys-primary),
+      outlined-label-text-color: var(--mat-sys-primary),
+      outlined-outline-width: 2px,
+      outlined-container-height: 2.25rem,
+      outlined-label-text-size: 1rem,
+      outlined-label-text-weight: 500,
+      outlined-hover-state-layer-opacity: 0,
+      outlined-focus-state-layer-opacity: 0,
+      outlined-pressed-state-layer-opacity: 0,
+
+      filled-horizontal-padding: var(--double-spacer),
+      filled-container-height: 2.25rem,
+      filled-label-text-color: var(--on-background-gradient),
+      protected-focus-container-elevation-shadow: -4px -4px 5px 0px
+        rgba(200, 200, 200, 0.5),
+      protected-hover-container-elevation-shadow: -4px -4px 5px 0px
+        rgba(200, 200, 200, 0.5),
+      protected-container-shape: square,
+    )
+  );
+  .mdc-icon-button {
+    &:hover {
+      box-shadow: var(--mat-sys-level2);
+    }
+  }
+  .mdc-button,
+  .mdc-icon-button {
+    // transition: all 1s ease;  // has issues with WAVE when used in dialod, should be removed ?
+
+    &[mat-stroked-button]:hover {
+      box-shadow: var(--mat-sys-level2);
+    }
+
+    &:focus-visible:not(:active) {
+      &:not(.mat-mdc-outlined-button) {
+        --shift: -1px;
+      }
+      &.mat-mdc-outlined-button {
+        --shift: -3px;
+
+        &.small {
+          --shift: -2px;
+        }
+      }
+      &:after {
+        outline: 5px solid var(--mat-sys-primary-fixed-dim);
+        position: absolute;
+        content: '';
+        top: var(--shift);
+        left: var(--shift);
+        right: var(--shift);
+        bottom: var(--shift);
+        border: 1px solid transparent;
+        border-radius: 500px;
+      }
+    }
+    &.mat-mdc-unelevated-button:not(:disabled) {
+      background: var(--background-gradient);
+      .onemrva-spinner {
+        svg {
+          fill: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
+        }
+      }
+      &.mat-accent {
+        .onemrva-spinner {
+          svg {
+            fill: var(--on-background-gradient);
+          }
+        }
+      }
+
+      &:hover,
+      &:active {
+        box-shadow: var(--mat-sys-level2);
+      }
+    }
+    &.mdc-button--outlined {
+      background: var(--mat-sys-surface);
+    }
+    &.mat-mdc-button-disabled {
+      .onemrva-spinner {
+        svg {
+          fill: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
+        }
+      }
+    }
+    onemrva-mat-spinner {
+      display: none;
+    }
+
+    &.has-spinner {
+      .mdc-button__label {
+        margin-left: 20px;
+      }
+      onemrva-mat-spinner {
+        display: inline-block;
+      }
+    }
+    onemrva-mat-spinner {
+      .onemrva-spinner {
+        svg {
+          height: 18px !important;
+          width: 18px !important;
+          margin-left: 8px;
+
+          top: 17px !important;
+          left: 37px !important;
+          transform: none;
+        }
+      }
+    }
+    &.small {
+      @include mat.button-overrides(
+        (
+          outlined-outline-width: 1px,
+          outlined-container-height: 24px,
+          outlined-label-text-size: 0.8rem,
+          outlined-horizontal-padding: 12px,
+          filled-container-height: 24px,
+          filled-label-text-size: 0.8rem,
+          text-horizontal-padding: 12px,
+          text-container-height: 24px,
+          text-label-text-size: 0.8rem,
+        )
+      );
+      mat-icon {
+        height: auto;
+      }
+    }
+  }
+}

package/theme/overrides/_card.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.card-overrides(
+    (
+      title-text-font: var(--mat-sys-title-large-font),
+      title-text-line-height: var(--mat-sys-title-large-height),
+      title-text-size: var(--mat-sys-title-large-size),
+      title-text-weight: var(--mat-sys-title-large-weight),
+      subtitle-text-font: var(--mat-sys-label-small-font),
+      subtitle-text-line-height: var(--mat-sys-label-small-height),
+      subtitle-text-size: var(--mat-sys-label-small-size),
+      subtitle-text-weight: var(--mat-sys-label-small-weight),
+      elevated-container-shape: var(--border-radius),
+      elevated-container-elevation: none,
+      elevated-container-color: var(--mat-sys-surface),
+    )
+  );
+  mat-card {
+    img.mat-mdc-card-image {
+      border-radius: var(--border-radius);
+    }
+    mat-card-content {
+      p {
+        margin: var(--spacer) 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/theme/overrides/_carousel.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  onemrva-mat-carousel {
+    onemrva-mat-carousel-item {
+      onemrva-mat-panel {
+        height: calc(100% - 50px);
+      }
+    }
+  }
+}

package/theme/overrides/_checkbox.scss

@@ -0,0 +1,49 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.checkbox-overrides(
+    (
+      selected-checkmark-color: var(--on-background-gradient),
+      selected-icon-color: var(--mat-sys-primary),
+      selected-pressed-icon-color: var(--mat-sys-primary),
+      selected-focus-icon-color: var(--mat-sys-primary),
+      selected-focus-state-layer-color: var(--mat-sys-primary),
+      selected-hover-state-layer-color: var(--mat-sys-primary),
+      selected-pressed-state-layer-color: var(--mat-sys-primary),
+      label-text-size: var(--mat-sys-label-large-size),
+      label-text-weight: var(--mat-sys-label-large-weight),
+      label-text-line-height: var(--mat-sys-label-large-height),
+    )
+  );
+
+  .mat-mdc-checkbox {
+    .mat-internal-form-field > label {
+      padding-left: 0;
+    }
+
+    .mdc-checkbox__native-control:enabled:checked,
+    .mdc-checkbox__native-control:enabled:indeterminate {
+      ~ .mdc-checkbox__background {
+        background: var(--background-gradient);
+        border: 2px solid var(--mat-sys-tertiary);
+      }
+    }
+
+    &.mat-success {
+      @include mat.checkbox-overrides(
+        (
+          selected-checkmark-color: var(--mat-sys-on-primary),
+        )
+      );
+
+      // strangely, the overrides don't work when it's pre-checked
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: var(--mat-sys-primary);
+          border: 2px solid var(--mat-sys-primary);
+        }
+      }
+    }
+  }
+}

package/theme/overrides/_chips.scss

@@ -0,0 +1,42 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.chips-overrides(
+    (
+      container-shape-radius: var(--button-border-radius),
+      outline-color: var(--mat-sys-primary),
+      elevated-container-color: var(--mat-sys-primary-container),
+      container-height: 38px,
+      label-text-color: var(--mat-sys-primary),
+      label-text-font: var(--mat-sys-label-large-font),
+      label-text-size: var(--mat-sys-label-large-size),
+      label-text-line-height: var(--mat-sys-label-large-height),
+      with-trailing-icon-trailing-icon-color: var(--mat-sys-primary),
+    )
+  );
+  mat-chip-option,
+  mat-chip-row,
+  mat-chip {
+    &.mat-accent:not(.mat-mdc-chip-disabled) {
+      background: var(--background-gradient);
+      @include mat.chips-overrides(
+        (
+          outline-color: var(--mat-sys-tertiary),
+          with-trailing-icon-trailing-icon-color: var(--on-background-gradient),
+          label-text-color: var(--on-background-gradient),
+        )
+      );
+    }
+    &.mat-error:not(.mat-mdc-chip-disabled) {
+      @include mat.chips-overrides(
+        (
+          elevated-container-color: var(--mat-sys-error-container),
+          outline-color: var(--mat-sys-on-error-container),
+          with-trailing-icon-trailing-icon-color: var(--mat-sys-primary),
+          label-text-color: var(--mat-sys-primary),
+        )
+      );
+    }
+  }
+}

package/theme/overrides/_datepicker.scss

@@ -0,0 +1,10 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-background-color: var(--mat-sys-surface),
+      calendar-container-elevation-shadow: var(--mat-sys-level2),
+    )
+  );
+}

package/theme/overrides/_dialogs.scss

@@ -0,0 +1,118 @@
+@use '@angular/material' as mat;
+@use '../utilities/palettes' as palettes;
+
+@mixin override() {
+  @include mat.dialog-overrides(
+    (
+      container-shape: var(--half-border-radius),
+    )
+  );
+
+  .cdk-overlay-container {
+    .mat-mdc-dialog-title {
+      padding: var(--triple-spacer);
+      &:before {
+        display: none;
+        font-family: var(--icon-font);
+        font-size: 1.23rem;
+        font-variation-settings:
+          'FILL' 1,
+          'wght' 400,
+          'GRAD' 0,
+          'opsz' 24;
+        position: absolute;
+      }
+    }
+    .mat-mdc-dialog-actions {
+      @include mat.theme(
+        (
+          color: (
+            use-system-variables: true,
+            primary: palettes.$primary-palette,
+            tertiary: palettes.$tertiary-palette,
+          ),
+          //typography: (
+          //  use-system-variables: false,
+          //  plain-family: Source Sans Pro,
+          //  brand-family: Poppins,
+          //  bold-weight: 900,
+          //  medium-weight: 600,
+          //  regular-weight: 400,
+          //),
+           //density: 0,
+        )
+      );
+    }
+
+    .cdk-overlay-pane.mat-warn,
+    .cdk-overlay-pane.mat-success,
+    .cdk-overlay-pane.mat-error {
+      @include mat.dialog-overrides(
+        (
+          subhead-color: var(--mat-sys-primary),
+        )
+      );
+      .mat-mdc-dialog-title {
+        margin-left: var(--quad-spacer);
+        position: relative;
+        &:before {
+          display: inline-block;
+          margin-left: calc(-1 * var(--quad-spacer));
+          content: var(--message-icon);
+          /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+        }
+      }
+    }
+    .cdk-overlay-container.mat-error {
+      @include mat.dialog-overrides(
+        (
+          subhead-color: var(--mat-sys-error),
+        )
+      );
+    }
+
+    .close-dialog {
+      float: right;
+      mat-icon {
+        color: var(--mat-sys-primary);
+        font-size: 1.7rem;
+      }
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .xlarge {
+      @include mat.dialog-overrides(
+        (
+          container-max-width: 1280px,
+          container-min-width: 996px,
+        )
+      );
+    }
+    .large {
+      @include mat.dialog-overrides(
+        (
+          container-max-width: 996px,
+          container-min-width: 812px,
+        )
+      );
+    }
+    .medium {
+      @include mat.dialog-overrides(
+        (
+          container-max-width: 812px,
+          container-min-width: 628px,
+        )
+      );
+    }
+    .small {
+      @include mat.dialog-overrides(
+        (
+          container-max-width: 628px,
+          container-min-width: 444px,
+        )
+      );
+    }
+  }
+}

package/theme/overrides/_divider.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.divider-overrides(
+    (
+      color: var(--mat-sys-outline-variant),
+    )
+  );
+}