@onemrvapublic/design-system-theme 18.2.1 → 18.2.3-develop.1

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 +1 -8
  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
@@ -107,7 +107,6 @@
107
107
 
108
108
  body {
109
109
  margin: 0;
110
- // font-family: sans-serif;
111
110
  }
112
111
 
113
112
  mat-drawer-container {
@@ -142,19 +141,13 @@
142
141
 
143
142
  // Base for Web components
144
143
  @mixin base() {
144
+ @include core();
145
145
  @include fonts.theme(variables.$onemrva-theme);
146
146
  @include links.theme(variables.$onemrva-theme);
147
- @include core();
148
147
  }
149
148
 
150
149
  // Load everything (size does not matter)
151
150
  @mixin onemrva($production: true) {
152
- //@include mat.core-theme(variables.$onemrva-theme);
153
- //@include mat.all-component-themes(variables.$onemrva-theme);
154
- //@include mat.all-component-typographies(
155
- // map.get(variables.$onemrva-theme, typography)
156
- //);
157
-
158
151
  @include reset();
159
152
  @include fonts.theme(variables.$onemrva-theme, $production);
160
153
  @include links.theme(variables.$onemrva-theme);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v18.2.1",
3
+ "version": "v18.2.3-develop.1",
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(