@onemrvapublic/design-system-theme 18.2.4-develop.5 → 18.2.4-develop.7

package/components/_expansion.scss

@@ -5,6 +5,8 @@
 @mixin theme($theme) {
   @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/index.scss

@@ -136,14 +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.5",
+    "version": "v18.2.4-develop.7",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_fonts.scss

@@ -3,6 +3,10 @@
 @use '../components/µ';
 
 @mixin theme($onemrva-theme, $production: true) {
+  color: µ.grayscale($onemrva-theme, 900);
+  $typography: map.get($onemrva-theme, 'typography');
+  @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,8 +21,14 @@
     }
   }
 
-  $typography: map.get($onemrva-theme, 'typography');
-  @include mat.m2-typography-level($typography, 'body-1');
+  .mat-small {
+    @include mat.m2-typography-level($typography, 'body-2');
+  }
+
+  .mat-body-strong,
+  .mat-semibold {
+    font-weight: 600;
+  }
 
   .heading {
     @include mat.m2-typography-level($typography, 'headline-1');