@onemrvapublic/design-system-theme 18.2.4-develop.1 → 18.2.4-develop.11

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;
@@ -99,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/_expansion.scss

@@ -3,6 +3,11 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
+  & {
+    --mat-app-body-large-font: 16px;
+    --mat-expansion-container-text-size: 16px;
+    --mat-expansion-header-text-size: 16px;
+  }
   @include mat.expansion-base($theme);
   @include mat.expansion-theme($theme);
 

package/components/_input.scss

@@ -22,9 +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,18 +19,24 @@
     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;
       padding-bottom: 16px;
     }
 
-    .mat-mdc-row:last-child {
-      .mat-mdc-cell {
-        border-bottom: none;
+    .mat-mdc-row {
+      --mat-table-row-item-label-text-size: 16px;
+      &:last-child {
+        .mat-mdc-cell {
+          border-bottom: none;
+        }
       }
     }
 
@@ -54,10 +60,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/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

@@ -136,14 +136,15 @@
   @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
+  @include mat.typography-hierarchy(variables.$onemrva-theme);
 }
 
 // Base for Web components
 @mixin base() {
-  @include core();
+  @include reset();
   @include fonts.theme(variables.$onemrva-theme);
   @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.1",
+    "version": "v18.2.4-develop.11",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_fonts.scss

@@ -3,6 +3,58 @@
 @use '../components/µ';
 
 @mixin theme($onemrva-theme, $production: true) {
+  & {
+    --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);
+  }
+
   @if ($production) {
     @at-root {
       @import url('https://cdn.services.rvaonem.fgov.be/font/poppins/import.css');
@@ -16,30 +68,4 @@
       @import url('https://cdn.servicesval.rvaonem.fgov.be/font/material/import.css');
     }
   }
-
-  $typography: map.get($onemrva-theme, 'typography');
-  @include mat.m2-typography-level($typography, 'body-1');
-
-  .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);