@onemrvapublic/design-system-theme 18.2.4-develop.10 → 18.2.4-develop.12

package/components/_checkbox.scss

@@ -98,7 +98,7 @@
       @include µ.label-button($theme);
       font-family: mat.m2-font-family(
         map.get($theme, 'typography'),
-        label-button
+        'button'
       ); // HWKTMP For some reason, the font family is not taken into account from configuration
     }
 

package/components/_hacks.scss

@@ -0,0 +1,5 @@
+@mixin theme($theme) {
+  mat-drawer {
+    position: fixed;
+  }
+}

package/components/_input.scss

@@ -22,11 +22,6 @@
 }
 
 @mixin theme($theme) {
-  & {
-    --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/_radio.scss

@@ -12,7 +12,7 @@
       @include µ.label-button($theme);
       font-family: mat.m2-font-family(
         map.get($theme, 'typography'),
-        label-button
+        button
       ); // HWKTMP For some reason, the font family is not taken into account from configuration
     }
 

package/components/_slide-toggle.scss

@@ -52,7 +52,7 @@
       @include µ.label-button($theme);
       font-family: mat.m2-font-family(
         map.get($theme, 'typography'),
-        label-button
+        'button'
       ); // HWKTMP For some reason, the font family is not taken into account from configuration
     }
 

package/components/_table.scss

@@ -19,9 +19,12 @@
     th.mat-mdc-header-cell {
       font-weight: 600;
       border-bottom: 2px solid µ.grayscale($theme, 200);
-      font-size: 16px;
       color: µ.grayscale($theme, 700);
-      font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
+      font-family: mat.get-theme-typography(
+        $theme,
+        'headline-1',
+        'font-family'
+      );
       font-style: normal;
       line-height: 16px; /* 162.5% */
       vertical-align: bottom;

package/components/_/302/265-typography.scss

@@ -50,16 +50,9 @@
 }
 
 @mixin label-button($theme) {
-  @include mat.m2-typography-level(map.get($theme, typography), 'label-button');
+  @include mat.m2-typography-level(map.get($theme, typography), 'button');
 }
 
 @mixin label-smallbutton($theme) {
-  @include mat.m2-typography-level(
-    map.get($theme, typography),
-    'label-smallbutton'
-  );
-}
-
-@mixin mat-h4($theme) {
-  @include mat.m2-typography-level(map.get($theme, typography), 'mat-h4');
+  @include mat.m2-typography-level(map.get($theme, typography), 'button');
 }

package/esm2022/lib/theme.module.mjs

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

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: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.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: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [

package/index.scss

@@ -63,6 +63,7 @@
 @use './components/expansion' as expansion;
 @use './components/form-field' as form-field;
 @use './components/links';
+@use './components/hacks';
 @use './components/lists';
 @use './components/menu';
 @use './components/progress-bar' as progress-bar;
@@ -136,17 +137,15 @@
   @include mat.core();
   @include mat.core-theme(variables.$onemrva-theme);
   @include mat.core-base(variables.$onemrva-theme);
-  // 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
-  //);
+  @include mat.typography-hierarchy(variables.$onemrva-theme);
 }
 
 // Base for Web components
-@mixin base($production: true) {
+@mixin base() {
   @include reset();
-  @include fonts.theme(variables.$onemrva-theme, $production);
+  @include fonts.theme(variables.$onemrva-theme);
   @include links.theme(variables.$onemrva-theme);
+  @include hacks.theme(variables.$onemrva-theme);
   @include core();
 }
 
@@ -155,6 +154,7 @@
   @include reset();
   @include fonts.theme(variables.$onemrva-theme, $production);
   @include links.theme(variables.$onemrva-theme);
+  @include hacks.theme(variables.$onemrva-theme);
   @include core();
 
   @include cards.theme(variables.$onemrva-theme);

package/package.json

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

package/utilities/_fonts.scss

@@ -3,10 +3,56 @@
 @use '../components/µ';
 
 @mixin theme($onemrva-theme, $production: true) {
-  $typography: map.get($onemrva-theme, 'typography');
   & {
+    --mat-form-field-container-text-size: 16px;
+    --mat-form-field-container-text-weight: 400;
+    --mdc-outlined-text-field-label-text-weight: 500;
+    --mat-form-field-container-height: 44px;
+    --mat-form-field-outlined-label-text-populated-size: 12px;
+
+    --mat-option-label-text-size: mat.m2-font-size(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-option-label-text-line-height: mat.m2-line-height(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-option-label-text-weight: mat.m2-font-weight(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+
+    --mat-menu-item-label-text-font: mat.m2-font-family(
+      map.get($onemrva-theme, 'typography'),
+      'button'
+    );
+    --mat-app-label-large-font: mat.m2-font-family(
+      map.get($onemrva-theme, 'typography'),
+      'button'
+    );
+    --mat-menu-item-label-text-line-height: mat.m2-line-height(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-app-label-large-line-height: mat.m2-line-height(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-menu-item-label-text-size: mat.m2-font-size(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-app-label-large-size: mat.m2-font-size(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+    --mat-menu-item-label-text-weight: mat.m2-font-weight(
+      map.get($onemrva-theme, 'typography'),
+      'subtitle-2'
+    );
+
     color: µ.grayscale($onemrva-theme, 900);
-    @include mat.m2-typography-level($typography, 'body-1');
   }
 
   @if ($production) {
@@ -22,36 +68,4 @@
       @import url('https://cdn.servicesval.rvaonem.fgov.be/font/material/import.css');
     }
   }
-
-  .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');
-  }
-
-  h1 {
-    @include mat.m2-typography-level($typography, 'headline-1');
-  }
-  h2 {
-    @include mat.m2-typography-level($typography, 'headline-2');
-  }
-  h3 {
-    @include mat.m2-typography-level($typography, 'headline-3');
-  }
-  h4 {
-    @include mat.m2-typography-level($typography, 'headline-4');
-  }
-  h5 {
-    @include mat.m2-typography-level($typography, 'headline-5');
-  }
-  h6 {
-    @include mat.m2-typography-level($typography, 'headline-6');
-  }
 }

package/utilities/_variables.scss

@@ -57,31 +57,37 @@ $onemrva-typography: mat.m2-define-typography-config(
 
   // Define h1 to h6 with mat.m2-define-typography-level(font-size, line-height, font-weight)
   $headline-1:
-    mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
+    mat.m2-define-typography-level(140px, 160px, 700, $header-font-family),
   $headline-2:
-    mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
+    mat.m2-define-typography-level(60px, 72px, 700, $header-font-family),
   $headline-3:
-    mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
+    mat.m2-define-typography-level(48px, 60px, 700, $header-font-family),
   $headline-4:
-    mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
+    mat.m2-define-typography-level(36px, 58px, 700, $header-font-family),
   $headline-5:
-    mat.m2-define-typography-level(18px, 32px, 600, $header-font-family),
+    mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
+  // H1
   $headline-6:
-    mat.m2-define-typography-level(16px, 28px, 600, $header-font-family),
+    mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
+  // H2
+  $subtitle-1:
+    mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
+  // H3
+  $subtitle-2:
+    mat.m2-define-typography-level(16px, 26px, 500, $default-font-family),
+  // body
   // Define body text
-  $body-1: mat.m2-define-typography-level(
-      16px,
-      26px,
-      400,
-      $default-font-family
-    ),
+  $body-1: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
+  // H4
   // Regular body text
   $body-2: mat.m2-define-typography-level(
-      14px,
-      21px,
+      16px,
+      26px,
       400,
       $default-font-family
     ),
+  // body
+  // mat.m2-define-typography-level(18px, 32px, 600, $header-font-family), // H5 H6
   // Secondary body text
   // Optional: You can define other typography levels like caption, button, etc.
   $button: mat.m2-define-typography-level(16px, 21px, 500, $header-font-family),
@@ -89,16 +95,16 @@ $onemrva-typography: mat.m2-define-typography-config(
   $overline: mat.m2-define-typography-level(10px, 16px, 400),
 );
 
-$onemrva-typography: map.merge(
-  $onemrva-typography,
-  (
-    label-button:
-      mat.m2-define-typography-level(14px, 21px, 500, $header-font-family),
-    label-smallbutton:
-      mat.m2-define-typography-level(14px, 21px, 400, $header-font-family),
-    mat-h4: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
-  )
-);
+//$onemrva-typography: map.merge(
+//    $onemrva-typography,
+//    (
+//      label-button:
+//      mat.m2-define-typography-level(14px, 21px, 500, $header-font-family),
+//      label-smallbutton:
+//      mat.m2-define-typography-level(14px, 21px, 400, $header-font-family),
+//      mat-h4: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
+//    )
+//);
 
 $onemrva-primary: mat.m2-define-palette(palettes.$primary-palette);
 $onemrva-accent: mat.m2-define-palette(palettes.$accent-palette);