@onemrvapublic/design-system-theme 20.6.3-develop.4 → 20.7.0-develop.2

package/fesm2022/onemrvapublic-design-system-theme.mjs

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 class OnemrvaThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaThemeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaThemeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaThemeModule, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: {
@@ -15,7 +15,7 @@ class OnemrvaThemeModule {
             },
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [

package/index.scss

@@ -27,10 +27,6 @@
 @forward './overrides/sidenav' as sidenav-*;
 @forward './overrides/fab' as fab-*;
 
-@forward './utilities/variables' show $onemrva-theme;
-@forward './utilities/variables' show $breakpoints;
-@forward './utilities/variables' show $onemrva-accent-gradient;
-
 @forward './utilities/spacing' show spacing;
 @forward './utilities/grid' show grid;
 @forward './utilities/utilities' show utilities;

package/overrides/_button.scss

@@ -17,25 +17,39 @@
       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,
+      protected-label-text-color: green,
     )
   );
-  button.mdc-button {
+  .mdc-button,
+  .mdc-icon-button {
     // transition: all 1s ease;  // has issues with WAVE when used in dialod, should be removed ?
 
     &:focus-visible:not(:active) {
       &:not(.mat-mdc-outlined-button) {
-        @include nsOutline(-1px);
+        --shift: -1px;
       }
-
       &.mat-mdc-outlined-button {
-        @include nsOutline(-3px);
+        --shift: -3px;
 
         &.small {
-          @include nsOutline(-2px);
+          --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) {
@@ -113,16 +127,3 @@
     }
   }
 }
-
-@mixin nsOutline($shift) {
-  &:after {
-    position: absolute;
-    content: '';
-    top: $shift;
-    left: $shift;
-    right: $shift;
-    bottom: $shift;
-    border: 1px solid transparent;
-    border-radius: 500px;
-  }
-}

package/overrides/_form-field.scss

@@ -15,6 +15,7 @@
       outlined-outline-width: 1px,
       outlined-focus-outline-width: 2px,
       outlined-label-text-weight: var(--mat-sys-label-small-weight),
+      outlined-input-text-placeholder-color: var(--mat-sys-outline),
     )
   );
 

package/overrides/_icon-button.scss

@@ -2,15 +2,6 @@
 @use '../utilities/variables' as variables;
 
 @mixin override() {
-  --mat-menu-container-color: var(--mat-sys-surface);
-  --mat-menu-item-with-icon-leading-spacing: 8px;
-  --mat-menu-item-with-icon-trailing-spacing: 8px;
-  --mat-menu-item-label-text-font: Source Sans Pro;
-
-  .mat-mdc-menu-item {
-    min-height: var(--quad-spacer);
-  }
-
   button {
     &.mdc-icon-button {
       &.small {
@@ -28,21 +19,6 @@
       .mat-mdc-button-persistent-ripple::before {
         --mat-icon-button-state-layer-color: var(--mat-sys-surface);
       }
-
-      &:hover {
-        box-shadow: 0 3px 3px 0 rgba(49, 47, 59, 0.32);
-      }
-
-      &:active {
-        border: 1px solid var(--mat-sys-outline);
-      }
-
-      &:focus {
-        border: 1px solid var(--mat-sys-outline);
-        box-shadow:
-          0 0 0 1px #fff,
-          0 0 0 5px #d7d5ed;
-      }
     }
   }
 }

package/overrides/_menu.scss

@@ -3,23 +3,13 @@
 @mixin override() {
   @include mat.menu-overrides(
     (
-      item-label-text-weight: 500,
+      container-color: var(--mat-sys-surface),
+      item-with-icon-leading-spacing: var(--spacer),
+      item-with-icon-trailing-spacing: var
+        (
+          --spacer,
+        ),
+      item-label-text-line-height: var(--quad-spacer),
     )
   );
-  .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

@@ -13,10 +13,7 @@
               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
-                ),
+              outlined-input-text-placeholder-color: var(--mat-sys-outline),
             )
           );
           @include mat.select-overrides(
@@ -45,9 +42,7 @@
                 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
-                  ),
+                outlined-input-text-placeholder-color: var(--mat-sys-outline),
               )
             );
             @include mat.select-overrides(

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v20.6.3-develop.4",
+    "version": "v20.7.0-develop.2",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_fonts.scss

@@ -103,14 +103,14 @@
       headline-large-line-height: 2.75rem,
       headline-large-weight: 600,
 
-      label-large: 500 1rem/1.3125rem Poppins,
-      label-large-font: Poppins,
+      label-large: 500 1rem/1.3125rem Source Sans Pro,
+      label-large-font: Source Sans Pro,
       label-large-size: 1rem,
       label-large-line-height: 1.3125rem,
       label-large-weight: 500,
 
-      label-medium: 400 0.875rem/1.3125rem Poppins,
-      label-medium-font: Poppins,
+      label-medium: 400 0.875rem/1.3125rem Source Sans Pro,
+      label-medium-font: Source Sans Pro,
       label-medium-size: 0.875rem,
       label-medium-line-height: 1.3125rem,
       label-medium-weight: 400,

package/utilities/_variables.scss

@@ -2,15 +2,6 @@
 @use '@angular/material' as mat;
 @use './palettes';
 
-$onemrva-accent-gradient: var(--background-gradient);
-$onemrva-accent-gradient-vertical: var(--background-gradient);
-$onemrva-button-outline-opacity: 0.3;
-$box-shadow: 0px 3px 3px #312f3a29;
-$gap: 8px;
-
-$default-font-family: 'Source Sans Pro', sans-serif;
-$header-font-family: 'Poppins', sans-serif;
-
 $spacer: 8px !default;
 $spacers:
   '-0' 0,