@onemrvapublic/design-system-theme 20.7.0-develop.6 → 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 (7) hide show
  1. package/index.scss +1 -0
  2. package/overrides/_button.scss +1 -2
  3. package/overrides/_dialogs.scss +105 -117
  4. package/overrides/_form-field.scss +1 -0
  5. package/overrides/_tabs.scss +1 -1
  6. package/package.json +1 -1
  7. package/utilities/_tokens.scss +14 -0
package/index.scss CHANGED
@@ -107,6 +107,7 @@
107
107
  @include mat.theme(
108
108
  (
109
109
  color: (
110
+ use-system-variables: true,
110
111
  primary: palettes.$primary-palette,
111
112
  tertiary: palettes.$tertiary-palette,
112
113
  ),
package/overrides/_button.scss CHANGED
@@ -8,12 +8,12 @@
8
8
  outlined-label-text-color: var(--mat-sys-primary),
9
9
  outlined-outline-width: 2px,
10
10
  outlined-container-height: 2.25rem,
11
- outlined-label-text-font: Poppins,
12
11
  outlined-label-text-size: 1rem,
13
12
  outlined-label-text-weight: 500,
14
13
  outlined-hover-state-layer-opacity: 0,
15
14
  outlined-focus-state-layer-opacity: 0,
16
15
  outlined-pressed-state-layer-opacity: 0,
16
+
17
17
  filled-horizontal-padding: var(--double-spacer),
18
18
  filled-container-height: 2.25rem,
19
19
  filled-label-text-color: var(--on-background-gradient),
@@ -22,7 +22,6 @@
22
22
  protected-hover-container-elevation-shadow: -4px -4px 5px 0px
23
23
  rgba(200, 200, 200, 0.5),
24
24
  protected-container-shape: square,
25
- protected-label-text-color: green,
26
25
  )
27
26
  );
28
27
  .mdc-icon-button {
package/overrides/_dialogs.scss CHANGED
@@ -1,130 +1,118 @@
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(
5
6
  (
6
7
  container-shape: var(--half-border-radius),
7
- subhead-color: var(--mat-sys-primary),
8
- subhead-font: var(--),
9
8
  )
10
9
  );
11
10
 
12
- .close-dialog {
13
- position: absolute;
14
- top: var(--double-spacer);
15
- right: var(--double-spacer);
16
- mat-icon {
17
- font-size: 1.5rem;
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
+ }
18
25
  }
19
- &:hover {
20
- 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
+ );
45
+ }
46
+
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
+ }
65
+ }
66
+ .cdk-overlay-container.mat-error {
67
+ @include mat.dialog-overrides(
68
+ (
69
+ subhead-color: var(--mat-sys-error),
70
+ )
71
+ );
72
+ }
73
+
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
+ }
21
83
  }
22
- }
23
84
 
24
- //
25
- //.mdc-dialog__title::before {
26
- // height: auto;
27
- //}
28
- //
29
- //.mat-mdc-dialog-container {
30
- // border-radius: 8px;
31
- //
32
- // .mat-mdc-dialog-surface {
33
- // padding: 0;
34
- // }
35
- //
36
- // .mat-toolbar.mat-accent {
37
- // background: variables.$onemrva-accent-gradient;
38
- // color: white;
39
- // }
40
- //
41
- // .mat-mdc-dialog-title {
42
- // //styleName: Title/H4/Default;
43
- // font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
44
- // font-size: 18px;
45
- // font-weight: 700;
46
- // letter-spacing: 0;
47
- // text-align: left;
48
- // line-height: 26px;
49
- // padding: 3 * $spacer 6 * $spacer $spacer 3 * $spacer;
50
- // button.close-dialog {
51
- // margin-top: -12px;
52
- // }
53
- // }
54
- //
55
- // .mat-mdc-dialog-content {
56
- // padding: $spacer 3 * $spacer $spacer;
57
- // color: µ.grayscale($theme, 900);
58
- // }
59
- //
60
- // .mat-mdc-dialog-actions {
61
- // padding: $spacer 3 * $spacer 3 * $spacer;
62
- // align-items: end;
63
- // justify-content: end;
64
- // }
65
- //}
66
- //.xlarge {
67
- // .mat-mdc-dialog-container {
68
- // width: 996px;
69
- // }
70
- //}
71
- //.large {
72
- // .mat-mdc-dialog-container {
73
- // width: 812px;
74
- // }
75
- //}
76
- //.medium {
77
- // .mat-mdc-dialog-container {
78
- // width: 628px;
79
- // }
80
- //}
81
- //.small {
82
- // .mat-mdc-dialog-container {
83
- // width: 444px;
84
- // }
85
- //}
86
- //.mat-success,
87
- //.mat-error,
88
- //.mat-warn {
89
- // .mat-mdc-dialog-title {
90
- // &:before {
91
- // display: inline;
92
- // //noinspection CssNoGenericFontName
93
- // font-family: 'Material Icons';
94
- // font-variation-settings:
95
- // 'FILL' 1,
96
- // 'wght' 700,
97
- // 'GRAD' 0,
98
- // 'opsz' 20;
99
- // font-size: 24px;
100
- // top: 5px;
101
- // margin: 0 8px 0 0;
102
- // position: relative;
103
- // }
104
- // }
105
- //}
106
- //.mat-error {
107
- // .mat-mdc-dialog-title {
108
- // color: µ.error($theme);
109
- // &:before {
110
- // content: '\e000';
111
- // }
112
- // }
113
- //}
114
- //.mat-success {
115
- // .mat-mdc-dialog-title {
116
- // color: µ.success($theme, 600);
117
- // &:before {
118
- // content: '\e86c';
119
- // }
120
- // }
121
- //}
122
- //.mat-warn {
123
- // .mat-mdc-dialog-title {
124
- // color: µ.warn($theme, 600);
125
- // &:before {
126
- // content: '\e002';
127
- // }
128
- // }
129
- //}
85
+ .xlarge {
86
+ @include mat.dialog-overrides(
87
+ (
88
+ container-max-width: 1280px,
89
+ container-min-width: 996px,
90
+ )
91
+ );
92
+ }
93
+ .large {
94
+ @include mat.dialog-overrides(
95
+ (
96
+ container-max-width: 996px,
97
+ container-min-width: 812px,
98
+ )
99
+ );
100
+ }
101
+ .medium {
102
+ @include mat.dialog-overrides(
103
+ (
104
+ container-max-width: 812px,
105
+ container-min-width: 628px,
106
+ )
107
+ );
108
+ }
109
+ .small {
110
+ @include mat.dialog-overrides(
111
+ (
112
+ container-max-width: 628px,
113
+ container-min-width: 444px,
114
+ )
115
+ );
116
+ }
117
+ }
130
118
  }
package/overrides/_form-field.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  outlined-focus-outline-width: 2px,
17
17
  outlined-label-text-weight: var(--mat-sys-label-small-weight),
18
18
  outlined-input-text-placeholder-color: var(--mat-sys-outline),
19
+ container-text-weight: var(--mat-sys-label-small-weight),
19
20
  )
20
21
  );
21
22
 
package/overrides/_tabs.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  active-indicator-height: 3px,
10
10
  label-text-font: var(--mat-sys-title-medium-font),
11
11
  label-text-size: var(--mat-sys-title-medium-size),
12
- label-text-weight: var(--mat-sys-title-medium-weight),
12
+ //label-text-weight: var(--mat-sys-title-medium-weight),
13
13
  label-text-line-height: var(--mat-sys-title-medium-height),
14
14
  )
15
15
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v20.7.0-develop.6",
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;