@onemrvapublic/design-system-theme 18.2.4-develop.6 → 18.2.4-develop.8

package/components/_button.scss

@@ -83,6 +83,8 @@
     &:not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
       border-radius: $onemrva-button-border-radius;
       padding: $spacer 2 * $spacer;
+      vertical-align: middle;
+      text-decoration: none;
 
       &.mat-mdc-outlined-button {
         padding: $spacer 2 * $spacer;
@@ -90,9 +92,6 @@
           --mat-outlined-button-state-layer-color: µ.primary('500-contrast');
         }
       }
-
-      vertical-align: middle;
-      text-decoration: none;
       .mat-icon {
         padding: 0;
         margin: 0 $spacer 0 -8px;

package/components/_cards.scss

@@ -40,11 +40,10 @@
       }
 
       &:hover {
+        cursor: pointer;
         mat-mdc-card-title {
           text-decoration: underline;
         }
-
-        cursor: pointer;
       }
 
       .mat-mdc-card-title + .mat-mdc-card-content {

package/components/_checkbox.scss

@@ -70,6 +70,7 @@
     }
 
     .mdc-checkbox {
+      padding: 12px;
       .mdc-checkbox__native-control:enabled:checked,
       .mdc-checkbox__native-control:enabled:indeterminate {
         ~ .mdc-checkbox__background {
@@ -87,8 +88,6 @@
         }
       }
 
-      padding: 12px;
-
       .mdc-checkbox__background {
         width: 20px;
         height: 20px;

package/components/_expansion.scss

@@ -3,10 +3,12 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
+  & {
+    --mat-app-body-large-font: 16px;
+    --mat-expansion-container-text-size: 16px;
+  }
   @include mat.expansion-base($theme);
   @include mat.expansion-theme($theme);
-  --mat-app-body-large-font: 16px;
-  --mat-expansion-container-text-size: 16px;
 
   .mat-expansion-panel {
     &:not([class*='mat-elevation-z']) {

package/components/_input.scss

@@ -22,8 +22,10 @@
 }
 
 @mixin theme($theme) {
-  --mat-form-field-container-height: 44px;
-  --mat-form-field-outlined-label-text-populated-size: 12px;
+  & {
+    --mat-form-field-container-height: 44px;
+    --mat-form-field-outlined-label-text-populated-size: 12px;
+  }
 
   @include mat.input-base($theme);
   @include mat.input-theme($theme);

package/components/_table.scss

@@ -54,10 +54,10 @@
         line-height: 22px;
         padding-top: 8px;
         padding-bottom: 8px;
+        border-bottom: 1px solid µ.primary($theme, 100);
         &:not(:last-child) {
           padding-right: 12px;
         }
-        border-bottom: 1px solid µ.primary($theme, 100);
         mat-error {
           line-height: 48px;
           color: µ.error($theme, 500);

package/index.scss

@@ -136,16 +136,18 @@
   @include mat.core();
   @include mat.core-theme(variables.$onemrva-theme);
   @include mat.core-base(variables.$onemrva-theme);
-  @include mat.typography-hierarchy(
-    variables.$onemrva-theme
-  ); // this breaks the font styles
+  // TODO: This should be the way to do it but it does not seem to work correctly when used via npm import
+  //@include mat.typography-hierarchy(
+  //  variables.$onemrva-theme
+  //);
 }
 
 // Base for Web components
-@mixin base() {
-  @include core();
-  @include fonts.theme(variables.$onemrva-theme);
+@mixin base($production: true) {
+  @include reset();
+  @include fonts.theme(variables.$onemrva-theme, $production);
   @include links.theme(variables.$onemrva-theme);
+  @include core();
 }
 
 // Load everything (size does not matter)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v18.2.4-develop.6",
+    "version": "v18.2.4-develop.8",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_fonts.scss

@@ -3,6 +3,12 @@
 @use '../components/µ';
 
 @mixin theme($onemrva-theme, $production: true) {
+  $typography: map.get($onemrva-theme, 'typography');
+  & {
+    color: µ.grayscale($onemrva-theme, 900);
+    @include mat.m2-typography-level($typography, 'body-1');
+  }
+
   @if ($production) {
     @at-root {
       @import url('https://cdn.services.rvaonem.fgov.be/font/poppins/import.css');
@@ -17,10 +23,6 @@
     }
   }
 
-  $typography: map.get($onemrva-theme, 'typography');
-  @include mat.m2-typography-level($typography, 'body-1');
-  color: µ.grayscale($onemrva-theme, 900);
-
   .mat-small {
     @include mat.m2-typography-level($typography, 'body-2');
   }