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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components/_checkbox.scss +1 -1
  2. package/components/_input.scss +0 -5
  3. package/components/_radio.scss +1 -1
  4. package/components/_slide-toggle.scss +1 -1
  5. package/components/_table.scss +5 -2
  6. package/components/_/302/265-typography.scss +2 -9
  7. package/esm2022/lib/theme.module.mjs +4 -4
  8. package/fesm2022/onemrvapublic-design-system-theme.mjs +4 -4
  9. package/index.scss +3 -6
  10. package/package.json +1 -1
  11. package/utilities/_fonts.scss +48 -34
  12. package/utilities/_variables.scss +30 -24
package/components/_checkbox.scss CHANGED
@@ -98,7 +98,7 @@
98
98
  @include µ.label-button($theme);
99
99
  font-family: mat.m2-font-family(
100
100
  map.get($theme, 'typography'),
101
- label-button
101
+ 'button'
102
102
  ); // HWKTMP For some reason, the font family is not taken into account from configuration
103
103
  }
104
104
 
package/components/_input.scss CHANGED
@@ -22,11 +22,6 @@
22
22
  }
23
23
 
24
24
  @mixin theme($theme) {
25
- & {
26
- --mat-form-field-container-height: 44px;
27
- --mat-form-field-outlined-label-text-populated-size: 12px;
28
- }
29
-
30
25
  @include mat.input-base($theme);
31
26
  @include mat.input-theme($theme);
32
27
 
package/components/_radio.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  @include µ.label-button($theme);
13
13
  font-family: mat.m2-font-family(
14
14
  map.get($theme, 'typography'),
15
- label-button
15
+ button
16
16
  ); // HWKTMP For some reason, the font family is not taken into account from configuration
17
17
  }
18
18
 
package/components/_slide-toggle.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  @include µ.label-button($theme);
53
53
  font-family: mat.m2-font-family(
54
54
  map.get($theme, 'typography'),
55
- label-button
55
+ 'button'
56
56
  ); // HWKTMP For some reason, the font family is not taken into account from configuration
57
57
  }
58
58
 
package/components/_table.scss CHANGED
@@ -19,9 +19,12 @@
19
19
  th.mat-mdc-header-cell {
20
20
  font-weight: 600;
21
21
  border-bottom: 2px solid µ.grayscale($theme, 200);
22
- font-size: 16px;
23
22
  color: µ.grayscale($theme, 700);
24
- font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
23
+ font-family: mat.get-theme-typography(
24
+ $theme,
25
+ 'headline-1',
26
+ 'font-family'
27
+ );
25
28
  font-style: normal;
26
29
  line-height: 16px; /* 162.5% */
27
30
  vertical-align: bottom;
package/components/_/302/265-typography.scss CHANGED
@@ -50,16 +50,9 @@
50
50
  }
51
51
 
52
52
  @mixin label-button($theme) {
53
- @include mat.m2-typography-level(map.get($theme, typography), 'label-button');
53
+ @include mat.m2-typography-level(map.get($theme, typography), 'button');
54
54
  }
55
55
 
56
56
  @mixin label-smallbutton($theme) {
57
- @include mat.m2-typography-level(
58
- map.get($theme, typography),
59
- 'label-smallbutton'
60
- );
61
- }
62
-
63
- @mixin mat-h4($theme) {
64
- @include mat.m2-typography-level(map.get($theme, typography), 'mat-h4');
57
+ @include mat.m2-typography-level(map.get($theme, typography), 'button');
65
58
  }
package/esm2022/lib/theme.module.mjs CHANGED
@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
2
2
  import { MAT_FORM_FIELD_DEFAULT_OPTIONS, } from '@angular/material/form-field';
3
3
  import * as i0 from "@angular/core";
4
4
  export class OnemrvaThemeModule {
5
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule }); }
7
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, providers: [
5
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule }); }
7
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, providers: [
8
8
  {
9
9
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
10
10
  useValue: {
@@ -14,7 +14,7 @@ export class OnemrvaThemeModule {
14
14
  },
15
15
  ] }); }
16
16
  }
17
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
18
18
  type: NgModule,
19
19
  args: [{
20
20
  providers: [
package/fesm2022/onemrvapublic-design-system-theme.mjs CHANGED
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
3
3
  import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
4
4
 
5
5
  class OnemrvaThemeModule {
6
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule }); }
8
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, providers: [
6
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule }); }
8
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, providers: [
9
9
  {
10
10
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
11
11
  useValue: {
@@ -15,7 +15,7 @@ class OnemrvaThemeModule {
15
15
  },
16
16
  ] }); }
17
17
  }
18
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: OnemrvaThemeModule, decorators: [{
19
19
  type: NgModule,
20
20
  args: [{
21
21
  providers: [
package/index.scss CHANGED
@@ -136,16 +136,13 @@
136
136
  @include mat.core();
137
137
  @include mat.core-theme(variables.$onemrva-theme);
138
138
  @include mat.core-base(variables.$onemrva-theme);
139
- // TODO: This should be the way to do it but it does not seem to work correctly when used via npm import
140
- //@include mat.typography-hierarchy(
141
- // variables.$onemrva-theme
142
- //);
139
+ @include mat.typography-hierarchy(variables.$onemrva-theme);
143
140
  }
144
141
 
145
142
  // Base for Web components
146
- @mixin base($production: true) {
143
+ @mixin base() {
147
144
  @include reset();
148
- @include fonts.theme(variables.$onemrva-theme, $production);
145
+ @include fonts.theme(variables.$onemrva-theme);
149
146
  @include links.theme(variables.$onemrva-theme);
150
147
  @include core();
151
148
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v18.2.4-develop.10",
3
+ "version": "v18.2.4-develop.11",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/utilities/_fonts.scss CHANGED
@@ -3,10 +3,56 @@
3
3
  @use '../components/µ';
4
4
 
5
5
  @mixin theme($onemrva-theme, $production: true) {
6
- $typography: map.get($onemrva-theme, 'typography');
7
6
  & {
7
+ --mat-form-field-container-text-size: 16px;
8
+ --mat-form-field-container-text-weight: 400;
9
+ --mdc-outlined-text-field-label-text-weight: 500;
10
+ --mat-form-field-container-height: 44px;
11
+ --mat-form-field-outlined-label-text-populated-size: 12px;
12
+
13
+ --mat-option-label-text-size: mat.m2-font-size(
14
+ map.get($onemrva-theme, 'typography'),
15
+ 'subtitle-2'
16
+ );
17
+ --mat-option-label-text-line-height: mat.m2-line-height(
18
+ map.get($onemrva-theme, 'typography'),
19
+ 'subtitle-2'
20
+ );
21
+ --mat-option-label-text-weight: mat.m2-font-weight(
22
+ map.get($onemrva-theme, 'typography'),
23
+ 'subtitle-2'
24
+ );
25
+
26
+ --mat-menu-item-label-text-font: mat.m2-font-family(
27
+ map.get($onemrva-theme, 'typography'),
28
+ 'button'
29
+ );
30
+ --mat-app-label-large-font: mat.m2-font-family(
31
+ map.get($onemrva-theme, 'typography'),
32
+ 'button'
33
+ );
34
+ --mat-menu-item-label-text-line-height: mat.m2-line-height(
35
+ map.get($onemrva-theme, 'typography'),
36
+ 'subtitle-2'
37
+ );
38
+ --mat-app-label-large-line-height: mat.m2-line-height(
39
+ map.get($onemrva-theme, 'typography'),
40
+ 'subtitle-2'
41
+ );
42
+ --mat-menu-item-label-text-size: mat.m2-font-size(
43
+ map.get($onemrva-theme, 'typography'),
44
+ 'subtitle-2'
45
+ );
46
+ --mat-app-label-large-size: mat.m2-font-size(
47
+ map.get($onemrva-theme, 'typography'),
48
+ 'subtitle-2'
49
+ );
50
+ --mat-menu-item-label-text-weight: mat.m2-font-weight(
51
+ map.get($onemrva-theme, 'typography'),
52
+ 'subtitle-2'
53
+ );
54
+
8
55
  color: µ.grayscale($onemrva-theme, 900);
9
- @include mat.m2-typography-level($typography, 'body-1');
10
56
  }
11
57
 
12
58
  @if ($production) {
@@ -22,36 +68,4 @@
22
68
  @import url('https://cdn.servicesval.rvaonem.fgov.be/font/material/import.css');
23
69
  }
24
70
  }
25
-
26
- .mat-small {
27
- @include mat.m2-typography-level($typography, 'body-2');
28
- }
29
-
30
- .mat-body-strong,
31
- .mat-semibold {
32
- font-weight: 600;
33
- }
34
-
35
- .heading {
36
- @include mat.m2-typography-level($typography, 'headline-1');
37
- }
38
-
39
- h1 {
40
- @include mat.m2-typography-level($typography, 'headline-1');
41
- }
42
- h2 {
43
- @include mat.m2-typography-level($typography, 'headline-2');
44
- }
45
- h3 {
46
- @include mat.m2-typography-level($typography, 'headline-3');
47
- }
48
- h4 {
49
- @include mat.m2-typography-level($typography, 'headline-4');
50
- }
51
- h5 {
52
- @include mat.m2-typography-level($typography, 'headline-5');
53
- }
54
- h6 {
55
- @include mat.m2-typography-level($typography, 'headline-6');
56
- }
57
71
  }
package/utilities/_variables.scss CHANGED
@@ -57,31 +57,37 @@ $onemrva-typography: mat.m2-define-typography-config(
57
57
 
58
58
  // Define h1 to h6 with mat.m2-define-typography-level(font-size, line-height, font-weight)
59
59
  $headline-1:
60
- mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
60
+ mat.m2-define-typography-level(140px, 160px, 700, $header-font-family),
61
61
  $headline-2:
62
- mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
62
+ mat.m2-define-typography-level(60px, 72px, 700, $header-font-family),
63
63
  $headline-3:
64
- mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
64
+ mat.m2-define-typography-level(48px, 60px, 700, $header-font-family),
65
65
  $headline-4:
66
- mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
66
+ mat.m2-define-typography-level(36px, 58px, 700, $header-font-family),
67
67
  $headline-5:
68
- mat.m2-define-typography-level(18px, 32px, 600, $header-font-family),
68
+ mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
69
+ // H1
69
70
  $headline-6:
70
- mat.m2-define-typography-level(16px, 28px, 600, $header-font-family),
71
+ mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
72
+ // H2
73
+ $subtitle-1:
74
+ mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
75
+ // H3
76
+ $subtitle-2:
77
+ mat.m2-define-typography-level(16px, 26px, 500, $default-font-family),
78
+ // body
71
79
  // Define body text
72
- $body-1: mat.m2-define-typography-level(
73
- 16px,
74
- 26px,
75
- 400,
76
- $default-font-family
77
- ),
80
+ $body-1: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
81
+ // H4
78
82
  // Regular body text
79
83
  $body-2: mat.m2-define-typography-level(
80
- 14px,
81
- 21px,
84
+ 16px,
85
+ 26px,
82
86
  400,
83
87
  $default-font-family
84
88
  ),
89
+ // body
90
+ // mat.m2-define-typography-level(18px, 32px, 600, $header-font-family), // H5 H6
85
91
  // Secondary body text
86
92
  // Optional: You can define other typography levels like caption, button, etc.
87
93
  $button: mat.m2-define-typography-level(16px, 21px, 500, $header-font-family),
@@ -89,16 +95,16 @@ $onemrva-typography: mat.m2-define-typography-config(
89
95
  $overline: mat.m2-define-typography-level(10px, 16px, 400),
90
96
  );
91
97
 
92
- $onemrva-typography: map.merge(
93
- $onemrva-typography,
94
- (
95
- label-button:
96
- mat.m2-define-typography-level(14px, 21px, 500, $header-font-family),
97
- label-smallbutton:
98
- mat.m2-define-typography-level(14px, 21px, 400, $header-font-family),
99
- mat-h4: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
100
- )
101
- );
98
+ //$onemrva-typography: map.merge(
99
+ // $onemrva-typography,
100
+ // (
101
+ // label-button:
102
+ // mat.m2-define-typography-level(14px, 21px, 500, $header-font-family),
103
+ // label-smallbutton:
104
+ // mat.m2-define-typography-level(14px, 21px, 400, $header-font-family),
105
+ // mat-h4: mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
106
+ // )
107
+ //);
102
108
 
103
109
  $onemrva-primary: mat.m2-define-palette(palettes.$primary-palette);
104
110
  $onemrva-accent: mat.m2-define-palette(palettes.$accent-palette);