@onemrvapublic/design-system-theme 18.2.2 → 18.2.3-develop.2

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 (6) hide show
  1. package/components/_cards.scss +1 -1
  2. package/components/_dialogs.scss +2 -2
  3. package/index.scss +2 -2
  4. package/package.json +1 -1
  5. package/utilities/_fonts.scss +15 -17
  6. package/utilities/_variables.scss +30 -28
package/components/_cards.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  .mat-mdc-card {
23
23
  box-shadow: none !important;
24
24
  outline: 1px solid µ.grayscale($theme, 200);
25
+ border-radius: 20px;
25
26
  padding: 0;
26
27
  display: inline-block;
27
28
 
@@ -79,7 +80,6 @@
79
80
  h6 {
80
81
  font-weight: 500;
81
82
  color: µ.grayscale($theme, 900);
82
- @include µ.subtitle-1($theme);
83
83
  font-family: mat.m2-font-family(
84
84
  map.get($theme, 'typography'),
85
85
  subtitle-1
package/components/_dialogs.scss CHANGED
@@ -14,6 +14,8 @@
14
14
  }
15
15
 
16
16
  .mat-mdc-dialog-container {
17
+ border-radius: 8px;
18
+
17
19
  .mat-mdc-dialog-surface {
18
20
  padding: 0;
19
21
  }
@@ -23,8 +25,6 @@
23
25
  color: white;
24
26
  }
25
27
 
26
- border-radius: 8px;
27
-
28
28
  .mat-mdc-dialog-title {
29
29
  //styleName: Title/H4/Default;
30
30
  font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
package/index.scss CHANGED
@@ -136,14 +136,14 @@
136
136
  @include mat.core();
137
137
  @include mat.core-theme(variables.$onemrva-theme);
138
138
  @include mat.core-base(variables.$onemrva-theme);
139
- @include mat.typography-hierarchy(variables.$onemrva-theme);
139
+ //@include mat.typography-hierarchy(variables.$onemrva-theme); // this breaks the font styles
140
140
  }
141
141
 
142
142
  // Base for Web components
143
143
  @mixin base() {
144
+ @include core();
144
145
  @include fonts.theme(variables.$onemrva-theme);
145
146
  @include links.theme(variables.$onemrva-theme);
146
- @include core();
147
147
  }
148
148
 
149
149
  // Load everything (size does not matter)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v18.2.2",
3
+ "version": "v18.2.3-develop.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/utilities/_fonts.scss CHANGED
@@ -19,31 +19,29 @@
19
19
 
20
20
  $typography: map.get($onemrva-theme, 'typography');
21
21
 
22
+ .heading {
23
+ @include mat.m2-typography-level($typography, 'headline-1');
24
+ }
25
+
22
26
  h1 {
23
- @include mat.m2-typography-level($typography, 'headline-4');
27
+ @include mat.m2-typography-level($typography, 'headline-1');
24
28
  }
25
29
  h2 {
26
- @include mat.m2-typography-level($typography, 'headline-5');
30
+ @include mat.m2-typography-level($typography, 'headline-2');
27
31
  }
28
32
  h3 {
29
- @include mat.m2-typography-level($typography, 'headline-6');
33
+ @include mat.m2-typography-level($typography, 'headline-3');
30
34
  }
31
35
  h4 {
32
- @include mat.m2-typography-level($typography, 'mat-h4');
33
- color: µ.grayscale($onemrva-theme, 900);
36
+ @include mat.m2-typography-level($typography, 'headline-4');
34
37
  }
35
38
  h5 {
36
- font-family: mat.m2-font-family($typography, 'mat-h4');
37
- font-size: 18px;
38
- font-style: normal;
39
- font-weight: 600;
40
- line-height: 32px;
41
- }
42
- h6 /* always the case bu makes this rule more specific than the default one */ {
43
- font-family: mat.m2-font-family($typography, 'mat-h4');
44
- font-weight: 600;
45
- font-size: 16px;
46
- font-style: normal;
47
- line-height: 28px; /* 175% */
39
+ @include mat.m2-typography-level($typography, 'headline-5');
40
+ }
41
+ h6 {
42
+ @include mat.m2-typography-level($typography, 'headline-6');
43
+ }
44
+ body {
45
+ @include mat.m2-typography-level($typography, 'body-1');
48
46
  }
49
47
  }
package/utilities/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:map';
2
2
  @use '@angular/material' as mat;
3
- @use 'palettes';
3
+ @use './palettes';
4
4
 
5
5
  $onemrva-accent-gradient: transparent
6
6
  linear-gradient(90deg, #de2174 0%, #eb142a 100%) 0% 0% no-repeat padding-box;
@@ -9,6 +9,7 @@ $onemrva-button-outline-opacity: 0.3;
9
9
  $onemrva-button-border-radius: 500px;
10
10
  $box-shadow: 0px 3px 3px #312f3a29;
11
11
  $gap: 8px;
12
+
12
13
  $default-font-family: 'Source Sans Pro', sans-serif;
13
14
  $header-font-family: 'Poppins', sans-serif;
14
15
 
@@ -52,39 +53,40 @@ $breakpoints: (
52
53
  );
53
54
 
54
55
  $onemrva-typography: mat.m2-define-typography-config(
55
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-1
56
+ $font-family: $default-font-family,
57
+
58
+ // Define h1 to h6 with mat.m2-define-typography-level(font-size, line-height, font-weight)
56
59
  $headline-1:
57
- mat.m2-define-typography-level(150px, 180px, 700, $header-font-family),
58
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-2
60
+ mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
59
61
  $headline-2:
60
- mat.m2-define-typography-level(70px, 105px, 700, $header-font-family),
61
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-3
62
+ mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
62
63
  $headline-3:
63
- mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
64
- // One-off header, usually at the top of the page (e.g. a hero header). CSS: .mat-headline-4
64
+ mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
65
65
  $headline-4:
66
- mat.m2-define-typography-level(29px, 51px, 600, $header-font-family),
67
- // Section heading corresponding to the <h1> tag. CSS: .mat-h1 or .mat-headline-5 Native element: <h1>
66
+ mat.m2-define-typography-level(20px, 35px, 700, $header-font-family),
68
67
  $headline-5:
69
- mat.m2-define-typography-level(26px, 46px, 600, $header-font-family),
70
- // Section heading corresponding to the <h2> tag. CSS: .mat-h2 or .mat-headline-6 Native element: <h2>
68
+ mat.m2-define-typography-level(18px, 32px, 600, $header-font-family),
71
69
  $headline-6:
72
- mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
73
- // Section heading corresponding to the <h3> tag. CSS: .mat-h3 or .mat-subtitle-1 Native element: <h3>
74
- $subtitle-1:
75
- mat.m2-define-typography-level(23px, 40px, 600, $header-font-family),
76
- // Body strong CSS: .mat-body-strong or .mat-subtitle-2
77
- $subtitle-2:
78
- mat.m2-define-typography-level(16px, 26px, 600, $default-font-family),
79
- // Why would angular map body-1 and h4 on the same typography??? Work around: mat-h4 (see below) CSS: .mat-h4 or .mat-body-1 Native element: <h4>
80
- $body-1: mat.m2-define-typography-level(16px, 26px, 400, $default-font-family),
81
- // Bolder body text. CSS: .mat-body or .mat-body-2
82
- $body-2: mat.m2-define-typography-level(16px, 26px, 400, $default-font-family),
83
- // Smaller body and hint text. CSS: .mat-small or .mat-caption
84
- $caption:
85
- mat.m2-define-typography-level(14px, 21px, 400, $default-font-family),
86
- // Buttons and anchors.
87
- $button: mat.m2-define-typography-level(14px, 21px, 500, $header-font-family)
70
+ mat.m2-define-typography-level(16px, 28px, 600, $header-font-family),
71
+ // Define body text
72
+ $body-1: mat.m2-define-typography-level(
73
+ 16px,
74
+ 26px,
75
+ 400,
76
+ $default-font-family
77
+ ),
78
+ // Regular body text
79
+ $body-2: mat.m2-define-typography-level(
80
+ 14px,
81
+ 21px,
82
+ 400,
83
+ $default-font-family
84
+ ),
85
+ // Secondary body text
86
+ // Optional: You can define other typography levels like caption, button, etc.
87
+ $button: mat.m2-define-typography-level(16px, 21px, 500, $header-font-family),
88
+ $caption: mat.m2-define-typography-level(12px, 16px, 400),
89
+ $overline: mat.m2-define-typography-level(10px, 16px, 400),
88
90
  );
89
91
 
90
92
  $onemrva-typography: map.merge(