@onemrvapublic/design-system-theme 20.7.0-develop.7 → 20.7.0-develop.8

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 (4) hide show
  1. package/overrides/_button.scss +0 -4
  2. package/overrides/_dialogs.scss +95 -133
  3. package/package.json +1 -1
  4. package/utilities/_tokens.scss +14 -0
package/overrides/_button.scss CHANGED
@@ -4,10 +4,6 @@
4
4
  @mixin override() {
5
5
  @include mat.button-overrides(
6
6
  (
7
- filled-label-text-font: Poppins,
8
- outlined-label-text-font: Poppins,
9
- text-label-text-font: Poppins,
10
-
11
7
  outlined-outline-color: var(--mat-sys-primary),
12
8
  outlined-label-text-color: var(--mat-sys-primary),
13
9
  outlined-outline-width: 2px,
package/overrides/_dialogs.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '@angular/material' as mat;
2
+ @use '../utilities/palettes' as palettes;
2
3
 
3
4
  @mixin override() {
4
5
  @include mat.dialog-overrides(
@@ -7,150 +8,111 @@
7
8
  )
8
9
  );
9
10
 
10
- .close-dialog {
11
- position: absolute;
12
- top: var(--double-spacer);
13
- right: var(--double-spacer);
14
- mat-icon {
15
- color: var(--mat-sys-primary);
16
- font-size: 1.7rem;
11
+ .cdk-overlay-container {
12
+ .mat-mdc-dialog-title {
13
+ padding: var(--triple-spacer);
14
+ &:before {
15
+ display: none;
16
+ font-family: var(--icon-font);
17
+ font-size: 1.23rem;
18
+ font-variation-settings:
19
+ 'FILL' 1,
20
+ 'wght' 400,
21
+ 'GRAD' 0,
22
+ 'opsz' 24;
23
+ position: absolute;
24
+ }
17
25
  }
18
- &:hover {
19
- cursor: pointer;
26
+ .mat-mdc-dialog-actions {
27
+ @include mat.theme(
28
+ (
29
+ color: (
30
+ use-system-variables: true,
31
+ primary: palettes.$primary-palette,
32
+ tertiary: palettes.$tertiary-palette,
33
+ ),
34
+ //typography: (
35
+ // use-system-variables: false,
36
+ // plain-family: Source Sans Pro,
37
+ // brand-family: Poppins,
38
+ // bold-weight: 900,
39
+ // medium-weight: 600,
40
+ // regular-weight: 400,
41
+ //),
42
+ //density: 0,
43
+ )
44
+ );
20
45
  }
21
- }
22
46
 
23
- .cdk-overlay-container {
24
- .panel-size-xlarge {
25
- --mat-dialog-container-max-width: 996px;
26
- --mat-dialog-container-min-width: 996px;
47
+ .cdk-overlay-pane.mat-warn,
48
+ .cdk-overlay-pane.mat-success,
49
+ .cdk-overlay-pane.mat-error {
50
+ @include mat.dialog-overrides(
51
+ (
52
+ subhead-color: var(--mat-sys-primary),
53
+ )
54
+ );
55
+ .mat-mdc-dialog-title {
56
+ margin-left: var(--quad-spacer);
57
+ position: relative;
58
+ &:before {
59
+ display: inline-block;
60
+ margin-left: calc(-1 * var(--quad-spacer));
61
+ content: var(--message-icon);
62
+ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
63
+ }
64
+ }
27
65
  }
28
-
29
- .panel-size-large {
30
- --mat-dialog-container-max-width: 812px;
31
- --mat-dialog-container-min-width: 812px;
66
+ .cdk-overlay-container.mat-error {
67
+ @include mat.dialog-overrides(
68
+ (
69
+ subhead-color: var(--mat-sys-error),
70
+ )
71
+ );
32
72
  }
33
73
 
34
- .panel-size-medium {
35
- --mat-dialog-container-max-width: 628px;
36
- --mat-dialog-container-min-width: 628px;
74
+ .close-dialog {
75
+ float: right;
76
+ mat-icon {
77
+ color: var(--mat-sys-primary);
78
+ font-size: 1.7rem;
79
+ }
80
+ &:hover {
81
+ cursor: pointer;
82
+ }
37
83
  }
38
84
 
39
- .panel-size-small {
40
- --mat-dialog-container-max-width: 444px;
41
- --mat-dialog-container-min-width: 444px;
85
+ .xlarge {
86
+ @include mat.dialog-overrides(
87
+ (
88
+ container-max-width: 1280px,
89
+ container-min-width: 996px,
90
+ )
91
+ );
42
92
  }
43
- }
44
-
45
- *[mat-dialog-title] {
46
- display: flex;
47
- padding-top: 24px;
48
- //--mat-dialog-subhead-color: #{map-get(map-get($palette, success), 40)};
49
- }
50
-
51
- .panel-type-success {
52
- *[mat-dialog-title] {
53
- --mat-dialog-subhead-color: var(--mat-sys-on-surface);
93
+ .large {
94
+ @include mat.dialog-overrides(
95
+ (
96
+ container-max-width: 996px,
97
+ container-min-width: 812px,
98
+ )
99
+ );
54
100
  }
55
- }
56
-
57
- .panel-type-warn {
58
- *[mat-dialog-title] {
59
- --mat-dialog-subhead-color: var(--mat-sys-on-surface);
101
+ .medium {
102
+ @include mat.dialog-overrides(
103
+ (
104
+ container-max-width: 812px,
105
+ container-min-width: 628px,
106
+ )
107
+ );
60
108
  }
61
- }
62
-
63
- .panel-type-error {
64
- *[mat-dialog-title] {
65
- --mat-dialog-subhead-color: var(--mat-sys-on-surface);
109
+ .small {
110
+ @include mat.dialog-overrides(
111
+ (
112
+ container-max-width: 628px,
113
+ container-min-width: 444px,
114
+ )
115
+ );
66
116
  }
67
117
  }
68
-
69
- //
70
- //.mdc-dialog__title::before {
71
- // height: auto;
72
- //}
73
- //
74
- //.mat-mdc-dialog-container {
75
- // border-radius: 8px;
76
- //
77
- // .mat-mdc-dialog-surface {
78
- // padding: 0;
79
- // }
80
- //
81
- // .mat-toolbar.mat-accent {
82
- // background: variables.$onemrva-accent-gradient;
83
- // color: white;
84
- // }
85
- //
86
- // .mat-mdc-dialog-title {
87
- // //styleName: Title/H4/Default;
88
- // font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
89
- // font-size: 18px;
90
- // font-weight: 700;
91
- // letter-spacing: 0;
92
- // text-align: left;
93
- // line-height: 26px;
94
- // padding: 3 * $spacer 6 * $spacer $spacer 3 * $spacer;
95
- // button.close-dialog {
96
- // margin-top: -12px;
97
- // }
98
- // }
99
- //
100
- // .mat-mdc-dialog-content {
101
- // padding: $spacer 3 * $spacer $spacer;
102
- // color: µ.grayscale($theme, 900);
103
- // }
104
- //
105
- // .mat-mdc-dialog-actions {
106
- // padding: $spacer 3 * $spacer 3 * $spacer;
107
- // align-items: end;
108
- // justify-content: end;
109
- // }
110
- //}
111
-
112
- //.mat-success,
113
- //.mat-error,
114
- //.mat-warn {
115
- // .mat-mdc-dialog-title {
116
- // &:before {
117
- // display: inline;
118
- // //noinspection CssNoGenericFontName
119
- // font-family: 'Material Icons';
120
- // font-variation-settings:
121
- // 'FILL' 1,
122
- // 'wght' 700,
123
- // 'GRAD' 0,
124
- // 'opsz' 20;
125
- // font-size: 24px;
126
- // top: 5px;
127
- // margin: 0 8px 0 0;
128
- // position: relative;
129
- // }
130
- // }
131
- //}
132
- //.mat-error {
133
- // .mat-mdc-dialog-title {
134
- // color: µ.error($theme);
135
- // &:before {
136
- // content: '\e000';
137
- // }
138
- // }
139
- //}
140
- //.mat-success {
141
- // .mat-mdc-dialog-title {
142
- // color: µ.success($theme, 600);
143
- // &:before {
144
- // content: '\e86c';
145
- // }
146
- // }
147
- //}
148
- //.mat-warn {
149
- // .mat-mdc-dialog-title {
150
- // color: µ.warn($theme, 600);
151
- // &:before {
152
- // content: '\e002';
153
- // }
154
- // }
155
- //}
156
118
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v20.7.0-develop.7",
3
+ "version": "v20.7.0-develop.8",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/utilities/_tokens.scss CHANGED
@@ -46,6 +46,20 @@
46
46
 
47
47
  --toc-width: 280px;
48
48
 
49
+ --message-icon: '';
50
+ .mat-info {
51
+ --message-icon: '\e88e';
52
+ }
53
+ .mat-success {
54
+ --message-icon: '\e86c';
55
+ }
56
+ .mat-error {
57
+ --message-icon: '\e000';
58
+ }
59
+ .mat-warn {
60
+ --message-icon: '\e002';
61
+ }
62
+
49
63
  --avatar-size: 3.5rem;
50
64
  --avatar-font-size: 1.5rem;
51
65
  --avatar-resize: 0.75rem;