@onemrvapublic/design-system-theme 16.2.15 → 16.2.46

package/README.md

@@ -1,24 +1 @@
-# Theme
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project theme` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project theme`.
-> Note: Don't forget to add `--project theme` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build theme` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build theme`, go to the dist folder `cd dist/theme` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test theme` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# Design System Theme

package/components/_autocomplete.scss

@@ -1,4 +1,11 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
 @mixin theme($theme) {
+
+  @include mat.autocomplete-base($theme);
+  @include mat.autocomplete-theme($theme);
+
   .mdc-menu-surface.mat-mdc-autocomplete-panel {
     padding: 0;
   }

package/components/_badge.scss

@@ -0,0 +1,7 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin theme($theme) {
+  @include mat.badge-base($theme);
+  @include mat.badge-theme($theme);
+}

package/components/_bottom-sheet.scss

@@ -0,0 +1,7 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin theme($theme) {
+  @include mat.bottom-sheet-base($theme);
+  @include mat.bottom-sheet-theme($theme);
+}

package/components/_button-toggle.scss

@@ -0,0 +1,37 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "./µ";
+@import "../utilities/variables";
+
+@mixin theme($theme) {
+
+  @include mat.button-toggle-base($theme);
+  @include mat.button-toggle-theme($theme);
+
+  $spacer: map-get($theme, "spacer");
+  $accent400: µ.accent($theme, 400);
+  $accent500: µ.accent($theme, 500);
+
+  mat-button-toggle-group {
+
+    --mat-standard-button-toggle-shape : #{$onemrva-button-border-radius};
+    --mat-standard-button-toggle-divider-color: #{µ.grayscale($theme, 300)};
+    --mat-standard-button-toggle-selected-state-background-color: #{µ.primary($theme, 500)};
+    --mat-standard-button-toggle-selected-state-text-color:  #{µ.accent($theme, "500-contrast")};
+
+    mat-button-toggle {
+      font: mat.get-theme-typography($theme,'button');
+      // padding: $spacer 2 * $spacer;
+      font-weight: 600;
+      color: µ.grayscale($theme, 900);
+      .mat-button-toggle-button {
+        padding: $spacer 2 * $spacer;
+        width: auto;
+      }
+      .mat-button-toggle-label-content {
+        line-height: 21px !important;
+        padding: 0;
+      }
+    }
+  }
+}

package/components/{_buttons.scss → _button.scss}

@@ -1,41 +1,19 @@
-@use "@angular/material" as mat;
-@use "./µ";
-@import "@angular/material/theming";
-@import "../utilities/variables";
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use './µ';
+@import '../utilities/variables';
 
 @mixin theme($theme) {
-  $spacer: map-get($theme, "spacer");
-
-  mat-button-toggle-group {
-    border-radius: $onemrva-button-border-radius;
-    border-color: µ.grayscale($theme, 300);
-    mat-button-toggle {
-      // padding: $spacer 2 * $spacer;
-      font-weight: 600;
-      color: µ.grayscale($theme, 900);
-
-      .mat-button-toggle-button {
-        padding: $spacer 2 * $spacer;
-        width: auto;
-      }
-
-      .mat-button-toggle-label-content {
-        line-height: 21px !important;
-        font-size: 14px;
-        font-family: "Poppins", sans-serif;
-        padding: 0;
-      }
-      &.mat-button-toggle-checked {
-        background-color: µ.primary($theme, 500);
-        .mat-button-toggle-label-content {
-          color: µ.accent($theme, "500-contrast");
-        }
-      }
-    }
-  }
+  @include mat.button-base($theme);
+  @include mat.button-theme($theme);
+
+  $spacer: map-get($theme, 'spacer');
+  $accent400: µ.accent($theme, 400);
+  $accent500: µ.accent($theme, 500);
+  $accent-gradient: transparent
+    linear-gradient(90deg, $accent400 0%, $accent500 100%) 0% 0% no-repeat
+    padding-box;
   .mat-mdc-button-base {
-    font-size: 14px;
-
     &.mat-error {
       color: µ.error($theme);
     }
@@ -53,10 +31,11 @@
     }
     &:hover:not(:disabled):not(.mdc-icon-button) {
       mat-icon {
-        font-variation-settings: "FILL" 1;
+        font-variation-settings: 'FILL' 1;
       }
     }
   }
+
   .mat-mdc-icon-button.onemrva-icon-button {
     outline: 1px solid µ.primary($theme);
     border: 3px solid white;
@@ -87,7 +66,7 @@
 
     &:hover {
       outline: none;
-      box-shadow: 0px 3px 3px rgba(49, 47, 59, 0.32);
+      box-shadow: 0 3px 3px rgba(49, 47, 59, 0.32);
     }
 
     .mat-ripple-element {
@@ -98,9 +77,7 @@
   .mat-mdc-button-base:not(.mat-mdc-icon-button):not(
       .mat-mdc-datepicker-close-button
     ):not(.mat-mdc-mini-fab) {
-    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-    -moz-box-sizing: border-box; /* Firefox, other Gecko */
-    box-sizing: border-box; /* Opera/IE 8+ */
+    box-sizing: border-box;
     position: relative;
 
     &:not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
@@ -109,25 +86,33 @@
 
       &.mat-mdc-outlined-button {
         padding: $spacer 2 * $spacer;
+        .mat-mdc-button-persistent-ripple::before {
+          --mat-outlined-button-state-layer-color: µ.primary('500-contrast');
+        }
       }
 
-      line-height: 21px;
-      font-weight: 500;
-      font-family: "Poppins", sans-serif;
       vertical-align: middle;
       text-decoration: none;
       .mat-icon {
         padding: 0;
-        margin: 0 $spacer 0 0;
+        margin: 0 $spacer 0 -8px;
         line-height: 21px;
         height: 21px;
-        width: 2 * $spacer;
         vertical-align: top;
         text-align: center;
       }
+      &.onemrva-icon-right {
+        padding-right: 4 * $spacer;
+        mat-icon:last-of-type {
+          position: absolute;
+          float: right;
+          display: inline-block;
+          right: 0;
+        }
+      }
       &.small {
         border-radius: 500px;
-        padding: 2px 8px;
+        padding: 2px 12px;
         font-size: 14px;
         line-height: 21px;
         font-weight: 400;
@@ -137,9 +122,15 @@
           font-size: 14px;
           line-height: 21px;
           height: 21px;
-          width: 2 * $spacer;
+          width: 12px;
           padding: 0;
         }
+        &.onemrva-icon-right {
+          padding-right: 28px;
+          mat-icon {
+            padding-right: 4px;
+          }
+        }
       }
       &.choice-btn {
         height: 36px;
@@ -153,8 +144,9 @@
           color: white;
 
           > :first-child::before {
-            font-family: "Material Icons";
-            content: "\e876";
+            //noinspection CssNoGenericFontName
+            font-family: 'Material Icons';
+            content: '\e876';
             font-size: 16px;
             margin-right: 8px;
             vertical-align: bottom;
@@ -169,7 +161,6 @@
 
     &:hover:not(:disabled):not(.choice-btn) {
       box-shadow: $box-shadow;
-
       .mat-button-focus-overlay {
         background: transparent;
         opacity: 0;
@@ -280,27 +271,27 @@
     &.mat-mdc-fab,
     &.mat-mdc-mini-fab {
       &.mat-accent {
-        background: $onemrva-accent-gradient;
+        background: $accent-gradient;
       }
 
       &.mat-error {
         background: µ.error($theme);
-        color: µ.error($theme, "500-contrast");
+        color: µ.error($theme, '500-contrast');
       }
 
       &.mat-success {
         background: µ.success($theme);
-        color: µ.success($theme, "500-contrast");
+        color: µ.success($theme, '500-contrast');
       }
 
       &.mat-info {
         background: µ.info($theme);
-        color: µ.info($theme, "500-contrast");
+        color: µ.info($theme, '500-contrast');
       }
 
       &.mat-grayscale {
         background: µ.grayscale($theme);
-        color: µ.grayscale($theme, "500-contrast");
+        color: µ.grayscale($theme, '500-contrast');
       }
 
       &:disabled {
@@ -314,7 +305,7 @@
 @mixin nsOutline($shift) {
   &:after {
     position: absolute;
-    content: "";
+    content: '';
     top: $shift;
     left: $shift;
     right: $shift;

package/components/_cards.scss

@@ -5,9 +5,21 @@
 @mixin theme($theme) {
   $border-radius: 20px;
 
+  @include mat.card-base($theme);
+  @include mat.card-theme($theme);
+
+  .onemrva-shadow-highlight {
+    &:hover {
+      box-shadow: 0 2px 6px #00000026 !important;
+    }
+  }
+
+  .mat-mdc-card-outlined, .mat-mdc-card {
+    --mdc-outlined-card-container-shape: #{$border-radius};
+  }
+
   .mat-mdc-card {
     box-shadow: none !important;
-    border-radius: $border-radius;
     outline: 1px solid µ.grayscale($theme, 200);
     padding: 0;
     display: inline-block;

package/components/_checkbox.scss

@@ -4,30 +4,85 @@
 @import "../utilities/variables";
 
 @mixin theme($theme) {
-  .mat-mdc-checkbox .mdc-checkbox {
-    .mdc-checkbox__native-control:enabled:checked,
-    .mdc-checkbox__native-control:enabled:indeterminate {
-      ~ .mdc-checkbox__background {
-        background: $onemrva-accent-gradient-vertical;
-        border: none;
-
-        .mdc-checkbox__checkmark {
-          width: calc(100% - 4px);
-          top: 2px;
-          left: 2px;
-        }
 
-        .mdc-checkbox__mixedmark {
-          width: calc(100% - 6px);
-          top: 2px;
-          left: 2px;
+  @include mat.checkbox-base($theme);
+  @include mat.checkbox-theme($theme);
+
+  .mat-mdc-checkbox {
+    &.mat-accent {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: $onemrva-accent-gradient-vertical;
+          border: µ.accent($theme, 500);
+        }
+      }
+    }
+    &.mat-primary {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: µ.primary($theme, 500);
+          border: µ.primary($theme, 500);
+        }
+      }
+    }
+    &.mat-warn {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          .mdc-checkbox__checkmark {
+            color: white;
+          }
+        }
+      }
+    }
+    &.mat-success {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: µ.success($theme, 600);
+          border: µ.success($theme, 600);
+        }
+      }
+    }
+    &.mat-error {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: µ.error($theme, 500);
+          border: µ.error($theme, 500);
+        }
+      }
+    }
+    &.mat-info {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+          background: µ.info($theme, 500);
+          border: µ.info($theme, 500);
         }
       }
     }
-  }
-
-  .mat-mdc-checkbox {
     .mdc-checkbox {
+      .mdc-checkbox__native-control:enabled:checked,
+      .mdc-checkbox__native-control:enabled:indeterminate {
+        ~ .mdc-checkbox__background {
+
+          .mdc-checkbox__checkmark {
+            width: calc(100% - 4px);
+            top: 2px;
+            left: 2px;
+          }
+
+          .mdc-checkbox__mixedmark {
+            width: calc(100% - 6px);
+            top: 2px;
+            left: 2px;
+          }
+        }
+      }
+
       padding: 12px;
       .mdc-checkbox__background {
         width: 20px;

package/components/_chips.scss

@@ -1,4 +1,5 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 @use "./µ";
 @import "../utilities/variables";
 
@@ -6,171 +7,99 @@
   $primary: µ.primary($theme);
   $color: mat.get-color-from-palette(map-get($theme, "grayscale"));
 
+  @include mat.chips-base($theme);
+  @include mat.chips-theme($theme);
+
   .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
     background: none;
   }
+  .mat-mdc-chip {
+    &.mat-mdc-standard-chip {
+      --mdc-chip-container-shape-radius: 500px 500px 500px 500px ;
+      --mdc-chip-container-height: 22px;
+    }
+  }
 
-  mat-chip,
-  mat-chip-row {
+  mat-chip-option {
     transition: none;
     box-shadow: none;
-    &.mat-mdc-standard-chip {
-      &:active {
-        box-shadow: none !important;
-      }
-
-      &:hover,
-      &:active,
-      &:focus {
-        .mat-mdc-chip-focus-overlay {
-          display: none;
-        }
+    opacity: 1;
+    background: #f1f0fc 0 0 no-repeat padding-box !important;
+    color: $color;
+    border: 2px solid $color;
+    height: 22px;
+    padding: 8px 16px;
+    font-family: mat.get-theme-typography($theme,'button', font-family);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 21px; /* 131.25% */
+    .mat-mdc-chip-graphic {
+      width: 0;
+      padding: 0 !important;
+    }
+    &.mat-mdc-chip-selected {
+      .mat-mdc-chip-graphic {
+        width: var(--mdc-chip-with-avatar-avatar-size);
       }
-
+    }
+    .mat-mdc-chip-action {
+      padding-right: 0 !important;
+    }
+    .mat-icon {
+      line-height: 14px;
+    }
+    &.mat-primary {
+      --mdc-chip-label-text-color: #{$primary};
+      background: µ.primary($theme, 50) !important;
+      border: 1px solid µ.primary($theme, 300);
+    }
+    &.mat-accent {
+      --mdc-chip-label-text-color: #{ µ.accent($theme, "500-contrast")};
+      background: $onemrva-accent-gradient-vertical !important;
+      border: none !important;
+    }
+    &.mat-error {
+      --mdc-chip-label-text-color: #{ µ.error($theme, 500)};
+      background: µ.error($theme, 50) !important;
+      border: 1px solid µ.error($theme, 500);
+    }
+    &.mat-warn {
+      --mdc-chip-label-text-color: #{ µ.warn($theme, 500)};
+      background: µ.warn($theme, 50) !important;
+      border: 1px solid µ.warn($theme, 200);
+    }
+    &.mat-success {
+      --mdc-chip-label-text-color: #{ µ.success($theme, 500)};
+      background: µ.success($theme, 50) !important;
+      border: 1px solid µ.success($theme, 200);
+    }
+    &.mat-error {
+      --mdc-chip-label-text-color: #{ µ.error($theme, 500)};
+      background: µ.error($theme, 50) !important;
+      border: 1px solid µ.error($theme, 500);
+      display: inline-flex;
+    }
+    &.mat-info {
+      --mdc-chip-label-text-color: #{ µ.info($theme, 500)};
+      background: µ.info($theme, 50) !important;
+      border: 1px solid µ.info($theme, 200);
+    }
+    &.mat-mdc-chip-disabled {
+      --mdc-chip-label-text-color: #{ µ.grayscale($theme, 700)};
       opacity: 1;
-      background: #f1f0fc 0% 0% no-repeat padding-box !important;
-      color: $color;
-      border: 2px solid $color;
-      padding: 4px 16px;
-      height: 22px;
-      font: normal normal 400 14px Poppins;
-
-      .mat-mdc-chip-action-label {
-        display: flex;
-        align-items: center;
-      }
-      .mat-mdc-chip-action-label {
-        .mat-icon {
-          line-height: 18px;
-          font-size: 18px;
-          height: 18px;
-          width: 22px;
-        }
-      }
-      &.mat-primary {
-        background: µ.primary($theme, 50) !important;
-        border: 1px solid µ.primary($theme, 300);
-        .mat-mdc-chip-action-label {
-          color: $primary;
-        }
-      }
-      &.mat-accent {
-        $color: µ.accent($theme, "500-contrast");
-        background: $onemrva-accent-gradient-vertical !important;
-        border: none;
-        .mat-mdc-chip-action-label {
-          color: $color;
-        }
-      }
-      &.mat-warn {
-        background: µ.warn($theme, 50) !important;
-        border: 1px solid µ.warn($theme, 200);
-        .mat-mdc-chip-action-label {
-          color: µ.warn($theme, 600);
-        }
-      }
-      &.mat-success {
-        background: µ.success($theme, 50) !important;
-        border: 1px solid µ.success($theme, 200);
-        .mat-mdc-chip-action-label {
-          color: µ.success($theme);
-        }
-      }
-      &.mat-error {
-        background: µ.error($theme, 50) !important;
-        border: 1px solid µ.error($theme, 500);
-        display: inline-flex;
-        .mat-mdc-chip-action-label {
-          color: µ.error($theme);
-        }
-      }
-      &.mat-info {
-        background: µ.info($theme, 50) !important;
-        border: 1px solid µ.info($theme, 200);
-        .mat-mdc-chip-action-label {
-          color: µ.info($theme);
-        }
-      }
-      &.mat-mdc-chip-disabled {
-        background: µ.grayscale($theme, 50) !important;
-        border: 1px solid µ.grayscale($theme, 400);
-        .mat-mdc-chip-action-label {
-          color: µ.grayscale($theme);
-        }
-      }
-      &.sticker {
-        height: 18px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        cursor: default;
-        background: #ffffff !important;
-        opacity: 1;
-        border-radius: 4px;
-        padding: 4px 16px;
-        font-size: 12px;
-        font-weight: 500;
-        &.mat-primary {
-          border: 2px solid $primary;
-          color: $primary;
-        }
-        &.mat-accent {
-          $color: µ.accent($theme, "500-contrast");
-          background: $onemrva-accent-gradient-vertical !important;
-          height: 22px;
-          border: none;
-          color: $color;
-        }
-        &.mat-warn {
-          $color: µ.warn($theme, 600);
-          border: 2px solid $color;
-          color: $color;
-        }
-        &.mat-success {
-          $color: µ.success($theme);
-          border: 2px solid $color;
-          color: $color;
-        }
-        &.mat-error {
-          $color: µ.error($theme);
-          border: 2px solid $color;
-          color: $color;
-          display: inline-flex;
-        }
-        &.mat-info {
-          $color: µ.info($theme);
-          border: 2px solid $color;
-          color: $color;
-        }
-        &.mat-grayscale {
-          $color: µ.grayscale($theme);
-          border: 2px solid $color;
-          color: $color;
-        }
-      }
-
-      .mat-mdc-chip-action {
-        padding: 0;
-      }
-
-      .mat-mdc-chip-remove {
-        opacity: 0.4;
-        height: 16px;
-        width: 16px;
-        margin-left: 8px;
+      background: µ.grayscale($theme, 50) !important;
+      border: 1px solid µ.grayscale($theme, 400);
+    }
+    &.mdc-evolution-chip--selected {
+      background: µ.primary($theme, 500) !important;
+    }
+    .mat-mdc-chip-remove {
+      margin-top: 6px;
+    }
 
-        &:hover {
-          opacity: 0.54;
-        }
-        .mat-icon {
-          color: $primary;
-          opacity: 1;
-          font-weight: bold;
-          font-size: 16px;
-        }
-      }
+    .mdc-evolution-chip__action--trailing {
+      padding: 0 0 0 8px !important;
     }
   }
-}
+}

package/components/{_choice-button.scss → _choice-chips.scss}

@@ -4,11 +4,10 @@
 
 @mixin theme($theme) {
   .mat-mdc-checkbox.onemrva-choice-btn {
+    font: mat.get-theme-typography($theme,'button');
     border: 1px solid µ.primary($theme);
     border-radius: 500px;
     color: µ.primary($theme);
-    font-family: "Poppins", sans-serif;
-    font-size: 14px;
     padding: 0;
 
     .mdc-checkbox__ripple {