@onemrvapublic/design-system-theme 20.6.1-develop.1 → 20.6.1-develop.10

package/index.scss

@@ -182,7 +182,7 @@
       )
     );
   }
-  @include container.theme(variables.$breakpoints);
+  @include container.theme();
 
   @include button.override();
   @include button-toggle.override();

package/overrides/_checkbox.scss

@@ -10,7 +10,6 @@
       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-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),
       label-text-line-height: var(--mat-sys-label-large-height),
@@ -18,6 +17,10 @@
   );
 
   .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 {

package/overrides/_icon-button.scss

@@ -2,6 +2,15 @@
 @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 {
@@ -14,5 +23,26 @@
         }
       }
     }
+
+    &.onemrva-icon-button.mat-mdc-icon-button {
+      .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/_radio.scss

@@ -6,7 +6,6 @@
       selected-icon-color: var(--mat-sys-tertiary),
       selected-hover-icon-color: var(--mat-sys-tertiary),
       selected-focus-icon-color: var(--mat-sys-tertiary),
-      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),
     )

package/overrides/_sidenav.scss

@@ -7,4 +7,7 @@
       container-elevation-shadow: var(--mat-sys-level2),
     )
   );
+  .mat-drawer-inner-container {
+    overflow: hidden;
+  }
 }

package/overrides/_slide-toggle.scss

@@ -5,9 +5,10 @@
     (
       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
+      label-text-font: var(--mat-sys-body-medium-font),
+      label-text-size: var(--mat-sys-body-medium-size),
+      label-text-weight: var(--mat-sys-body-medium-weight),
+      label-text-line-height: var(--mat-sys-body-medium-line-height),
     )
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v20.6.1-develop.1",
+    "version": "v20.6.1-develop.10",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_container.scss

@@ -1,46 +1,14 @@
 @use './media' as media;
 @use 'sass:map';
 
-@mixin theme($breakpoints) {
-  //.onemrva-layout-content {
-  //  display: flex;
-  //}
-
-  .onemrva-layout-container {
-    width: 100%;
-    padding-right: var(--spacer);
-    padding-left: var(--spacer);
-    margin-right: auto;
-    margin-left: auto;
-    box-sizing: border-box;
-
-    @include media.media($breakpoints, small) {
-      padding-right: var(--double-spacer);
-      padding-left: var(--double-spacer);
-    }
-    @include media.media($breakpoints, medium) {
-      padding-right: var(--triple-spacer);
-      padding-left: var(--triple-spacer);
-    }
-    @include media.media($breakpoints, large) {
-      padding-right: calc(6 * var(--spacer));
-      padding-left: calc(6 * var(--spacer));
+@mixin theme() {
+  .content-container {
+    width: 95%;
+    max-width: 1400px;
+    padding: var(--double-spacer);
+    margin: auto;
+    h1 {
+      margin-top: 0;
     }
-    @include media.media($breakpoints, xlarge) {
-      padding-right: calc(7 * var(--spacer));
-      padding-left: calc(7 * var(--spacer));
-    }
-    @include media.media($breakpoints, xxlarge) {
-      margin-right: auto;
-      margin-left: auto;
-      max-width: #{map.get(map.get($breakpoints, xxlarge), min) - 112}px;
-    }
-
-    //
-    // DO NOT UNCOMMENT
-    //
-    // @include media.media(xlarge) {
-    //    max-width: #{map.get(map.get($breakpoints, xlarge), min) - 16}px;
-    // }
   }
 }

package/utilities/_fonts.scss

@@ -51,9 +51,9 @@
     (
       body-large: 400 1.125rem/1.625rem Source Sans Pro,
       body-large-font: Source Sans Pro,
-      body-large-size: 1.125rem,
+      body-large-size: 1rem,
       body-large-line-height: 1.625rem,
-      body-large-weight: 400,
+      body-large-weight: 600,
 
       body-medium: 400 1rem/1.625rem Source Sans Pro,
       body-medium-font: Source Sans Pro,

package/utilities/_tokens.scss

@@ -11,7 +11,7 @@
     --icon-size-xxlarge: 4rem;
 
     --layout-header-height: 90px;
-    --layout-content-padding-top: 106px;
+    --layout-content-padding-top: 92px;
     --layout-footer-height: 30px;
 
     --box-shadow: 0 2px 6px #00000026;