@pega/angular-sdk-overrides 0.23.1 → 0.23.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 (50) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +3 -0
  3. package/SECURITY.md +10 -0
  4. package/lib/designSystemExtension/alert/alert.component.scss +12 -12
  5. package/lib/designSystemExtension/banner/banner.component.scss +1 -1
  6. package/lib/designSystemExtension/material-case-summary/material-case-summary.component.scss +7 -9
  7. package/lib/designSystemExtension/material-details/material-details.component.scss +5 -5
  8. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss +3 -3
  9. package/lib/designSystemExtension/material-summary-item/material-summary-item.component.html +2 -2
  10. package/lib/designSystemExtension/material-summary-item/material-summary-item.component.scss +7 -9
  11. package/lib/designSystemExtension/material-summary-list/material-summary-list.component.scss +0 -1
  12. package/lib/designSystemExtension/material-utility/material-utility.component.scss +3 -5
  13. package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.scss +1 -3
  14. package/lib/designSystemExtension/operator/operator.component.scss +7 -9
  15. package/lib/designSystemExtension/pulse/pulse.component.scss +2 -2
  16. package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.scss +2 -3
  17. package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.scss +3 -3
  18. package/lib/field/cancel-alert/cancel-alert.component.scss +4 -4
  19. package/lib/field/date-time/date-time.component.ts +3 -2
  20. package/lib/field/dropdown/dropdown.component.ts +1 -1
  21. package/lib/field/list-view-action-buttons/list-view-action-buttons.component.scss +0 -1
  22. package/lib/field/semantic-link/semantic-link.component.scss +1 -1
  23. package/lib/field/text/text.component.scss +1 -1
  24. package/lib/field/user-reference/user-reference.component.scss +1 -3
  25. package/lib/infra/Containers/flow-container/flow-container.component.scss +1 -33
  26. package/lib/infra/Containers/modal-view-container/modal-view-container.component.scss +1 -29
  27. package/lib/infra/Containers/view-container/view-container.component.scss +1 -7
  28. package/lib/infra/action-buttons/action-buttons.component.scss +0 -1
  29. package/lib/infra/assignment-card/assignment-card.component.scss +1 -3
  30. package/lib/infra/multi-step/multi-step.component.scss +23 -25
  31. package/lib/infra/navbar/navbar.component.scss +16 -18
  32. package/lib/infra/root-container/root-container.component.scss +1 -3
  33. package/lib/infra/stages/stages.component.scss +12 -13
  34. package/lib/template/app-shell/app-shell.component.scss +4 -6
  35. package/lib/template/case-summary/case-summary.component.scss +2 -4
  36. package/lib/template/case-view/case-view.component.scss +6 -8
  37. package/lib/template/default-form/default-form.component.scss +0 -2
  38. package/lib/template/field-group-list/field-group-list.component.scss +1 -1
  39. package/lib/template/list-view/list-view.component.scss +13 -15
  40. package/lib/template/one-column-tab/one-column-tab.component.scss +1 -3
  41. package/lib/template/simple-table-manual/simple-table-manual.component.scss +14 -16
  42. package/lib/template/wss-nav-bar/wss-nav-bar.component.scss +18 -20
  43. package/lib/widget/app-announcement/app-announcement.component.scss +2 -4
  44. package/lib/widget/attachment/attachment.component.scss +5 -7
  45. package/lib/widget/feed-container/feed-container.component.scss +10 -12
  46. package/lib/widget/file-utility/file-utility.component.scss +9 -11
  47. package/lib/widget/file-utility/file-utility.component.ts +10 -3
  48. package/lib/widget/list-utility/list-utility.component.scss +7 -9
  49. package/lib/widget/todo/todo.component.scss +10 -12
  50. package/package.json +1 -5
package/lib/field/semantic-link/semantic-link.component.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .psdk-label {
10
- color: rgba(0, 0, 0, 0.54);
10
+ color: var(--app-label-color);
11
11
  margin: 8px 0px;
12
12
  }
13
13
 
package/lib/field/text/text.component.scss CHANGED
@@ -25,6 +25,6 @@
25
25
  }
26
26
 
27
27
  .psdk-details-fields-label {
28
- color: rgba(0, 0, 0, 0.54);
28
+ color: var(--app-label-color);
29
29
  margin: 8px 0px;
30
30
  }
package/lib/field/user-reference/user-reference.component.scss CHANGED
@@ -1,8 +1,6 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-user-reference {
4
2
  font-size: 0.8rem;
5
- color: $app-neutral-color;
3
+ color: var(--app-neutral-color);
6
4
  }
7
5
  .psdk-single {
8
6
  flex: 1;
package/lib/infra/Containers/flow-container/flow-container.component.scss CHANGED
@@ -1,33 +1 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
- h2 {
4
- font-size: 1.1rem;
5
- }
6
-
7
- h5 {
8
- font-size: 0.8rem;
9
- }
10
-
11
- .psdk-case-view-divider {
12
- border-bottom: 0.0625rem solid $app-neutral-light-color;
13
- }
14
-
15
- .psdk-flow-container-top {
16
- background-color: $app-form-color;
17
- padding: 0rem 0.625rem;
18
- border-radius: 0.3125rem;
19
- }
20
- .psdk-flow-container {
21
- padding-left: 2.1875rem;
22
- }
23
-
24
- .psdk-message-card {
25
- margin: 10px;
26
- }
27
-
28
- .psdk-icon {
29
- width: 1.6rem;
30
- display: inline-block;
31
- padding: 0rem 0.6rem;
32
- filter: $app-primary-color-filter;
33
- }
1
+ /* moved the flow-conatiner component styles to containerStyles file */
package/lib/infra/Containers/modal-view-container/modal-view-container.component.scss CHANGED
@@ -1,29 +1 @@
1
- .psdk-dialog-background {
2
- display: flex;
3
- flex-direction: column;
4
- justify-content: center;
5
- align-items: center;
6
- height: 100%;
7
- width: 100%;
8
- background-color: rgba(100, 100, 100, 0.4);
9
- position: fixed;
10
- z-index: 999;
11
- top: 0px;
12
- left: 0px;
13
- }
14
-
15
- .psdk-modal-view-container-top {
16
- display: block;
17
- margin: auto;
18
- min-width: 650px;
19
- background-color: white;
20
- border: 1px solid black;
21
- border-radius: 10px;
22
- padding: 20px;
23
- box-shadow: 0 0 10px 3px #777;
24
- overflow-y: auto;
25
- }
26
-
27
- .psdk-dialog-float {
28
- position: absolute;
29
- }
1
+ /* moved the modal-view-container component styles to containerStyles file */
package/lib/infra/Containers/view-container/view-container.component.scss CHANGED
@@ -1,7 +1 @@
1
- h3 {
2
- margin-left: 0.8rem;
3
- }
4
-
5
- .psdk-view-container-top {
6
- padding: 0;
7
- }
1
+ /* moved the view-container component styles to containerStyles file */
package/lib/infra/action-buttons/action-buttons.component.scss CHANGED
@@ -1 +0,0 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
package/lib/infra/assignment-card/assignment-card.component.scss CHANGED
@@ -1,7 +1,5 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-case-view-divider {
4
- border-bottom: 0.0625rem solid $app-neutral-light-color;
2
+ border-bottom: 0.0625rem solid var(--app-neutral-light-color);
5
3
  }
6
4
 
7
5
  .psdk-flow-container {
package/lib/infra/multi-step/multi-step.component.scss CHANGED
@@ -1,7 +1,5 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-case-view-divider {
4
- border-bottom: 0.0625rem solid $app-neutral-light-color;
2
+ border-bottom: 0.0625rem solid var(--app-neutral-light-color);
5
3
  }
6
4
 
7
5
  .psdk-icon {
@@ -10,21 +8,21 @@
10
8
  }
11
9
 
12
10
  .psdk-icon-current {
13
- color: $app-primary-color;
11
+ color: var(--app-primary-color);
14
12
  }
15
13
 
16
14
  .psdk-icon-not-current {
17
- color: $app-neutral-color;
15
+ color: var(--app-neutral-color);
18
16
  }
19
17
 
20
18
  .psdk-current-svg-icon {
21
19
  width: 1rem;
22
- filter: $app-primary-color-filter;
20
+ filter: var(--app-primary-color-filter);
23
21
  }
24
22
 
25
23
  .psdk-not-current-svg-icon {
26
24
  width: 1rem;
27
- filter: $app-neutral-color-filter;
25
+ filter: var(--app-neutral-color-filter);
28
26
  }
29
27
 
30
28
  mat-vertical-stepper {
@@ -37,16 +35,16 @@ mat-horizontal-stepper {
37
35
  .psdk-sub-step-current {
38
36
  padding-left: 0.625rem;
39
37
  font-weight: bold;
40
- color: rgba(0, 0, 0, 0.87);
38
+ color: var(--app-label-selected-color);
41
39
  }
42
40
 
43
41
  .psdk-sub-step-not-current {
44
42
  padding-left: 0.625rem;
45
- color: rgba(0, 0, 0, 0.54);
43
+ color: var(--app-label-color);
46
44
  }
47
45
 
48
46
  .psdk-flow-container-top {
49
- background-color: $app-form-color;
47
+ background-color: var(--app-form-color);
50
48
  padding: 0rem 0.625rem;
51
49
  border-radius: 0.3125rem;
52
50
  }
@@ -83,8 +81,8 @@ mat-horizontal-stepper {
83
81
 
84
82
  .psdk-vertical-step-icon {
85
83
  margin-right: 12px;
86
- background-color: $app-neutral-color;
87
- color: #fff;
84
+ background-color: var(--app-neutral-color);
85
+ color: var(--app-form-color);
88
86
  border-radius: 50%;
89
87
  height: 24px;
90
88
  width: 24px;
@@ -97,13 +95,13 @@ mat-horizontal-stepper {
97
95
  top: 50%;
98
96
  left: 50%;
99
97
  transform: translate(-50%, -50%);
100
- color: #fff;
98
+ color: var(--app-form-color);
101
99
  }
102
100
 
103
101
  .psdk-vertical-step-icon-selected {
104
102
  margin-right: 12px;
105
- background-color: $app-primary-color;
106
- color: #fff;
103
+ background-color: var(--app-primary-color);
104
+ color: var(--app-form-color);
107
105
  border-radius: 50%;
108
106
  height: 24px;
109
107
  width: 24px;
@@ -112,7 +110,7 @@ mat-horizontal-stepper {
112
110
  }
113
111
 
114
112
  .psdk-vertical-step-label {
115
- color: rgba(0, 0, 0, 0.54);
113
+ color: var(--app-label-color);
116
114
  display: inline-block;
117
115
  white-space: nowrap;
118
116
  overflow: hidden;
@@ -124,7 +122,7 @@ mat-horizontal-stepper {
124
122
  }
125
123
 
126
124
  .psdk-vertical-step-label-selected {
127
- color: rgba(0, 0, 0, 0.87);
125
+ color: var(--app-label-selected-color);
128
126
  display: inline-block;
129
127
  white-space: nowrap;
130
128
  overflow: hidden;
@@ -154,7 +152,7 @@ mat-horizontal-stepper {
154
152
  border-left-style: solid;
155
153
  top: -16px;
156
154
  bottom: -16px;
157
- border-left-color: rgba(0, 0, 0, 0.12);
155
+ border-left-color: var(--app-multi-step-border-color);
158
156
  }
159
157
 
160
158
  .psdk-horizontal-stepper {
@@ -183,8 +181,8 @@ mat-horizontal-stepper {
183
181
  }
184
182
 
185
183
  .psdk-horizontal-step-icon {
186
- background-color: $app-neutral-color;
187
- color: #fff;
184
+ background-color: var(--app-neutral-color);
185
+ color: var(--app-form-color);
188
186
  border-radius: 50%;
189
187
  height: 24px;
190
188
  width: 24px;
@@ -204,8 +202,8 @@ mat-horizontal-stepper {
204
202
  }
205
203
 
206
204
  .psdk-horizontal-step-icon-selected {
207
- background-color: $app-primary-color;
208
- color: #fff;
205
+ background-color: var(--app-primary-color);
206
+ color: var(--app-form-color);
209
207
  border-radius: 50%;
210
208
  height: 24px;
211
209
  width: 24px;
@@ -217,7 +215,7 @@ mat-horizontal-stepper {
217
215
  }
218
216
 
219
217
  .psdk-horizontal-step-label {
220
- color: rgba(0, 0, 0, 0.54);
218
+ color: var(--app-label-color);
221
219
  display: inline-block;
222
220
  min-width: 50px;
223
221
  vertical-align: middle;
@@ -227,7 +225,7 @@ mat-horizontal-stepper {
227
225
  }
228
226
 
229
227
  .psdk-horizontal-step-label-selected {
230
- color: rgba(0, 0, 0, 0.87);
228
+ color: var(--app-label-selected-color);
231
229
  display: inline-block;
232
230
  min-width: 50px;
233
231
  vertical-align: middle;
@@ -237,7 +235,7 @@ mat-horizontal-stepper {
237
235
  }
238
236
 
239
237
  .psdk-horizontal-step-line {
240
- border-top-color: rgba(0, 0, 0, 0.12);
238
+ border-top-color: var(--app-multi-step-border-color);
241
239
  border-top-width: 1px;
242
240
  border-top-style: solid;
243
241
  flex: auto;
package/lib/infra/navbar/navbar.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  // Things related to movement
4
2
  $transition-slow: 0.5s !default;
5
3
  $transition-medium: 0.3s !default;
@@ -7,7 +5,7 @@ $transition-fast: 0.1s !default;
7
5
  $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
8
6
 
9
7
  .psdk-nav-divider {
10
- border-bottom: 0.0625rem solid invert($app-nav-bg, 15%);
8
+ border-bottom: 0.0625rem solid var(--app-divider-color);
11
9
  width: 100%;
12
10
  align-items: center;
13
11
  }
@@ -25,7 +23,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
25
23
 
26
24
  // background color white
27
25
  .psdk-nav-svg-icon {
28
- filter: $app-white-color-filter;
26
+ filter: var(--app-white-color-filter);
29
27
  width: 1.6rem;
30
28
  padding-right: 0.625rem;
31
29
  }
@@ -44,10 +42,10 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
44
42
  display: flex;
45
43
  flex-direction: column;
46
44
  justify-content: flex-start;
47
- background: $app-nav-bg;
48
- width: $app-nav-width;
45
+ background: var(--app-nav-bg);
46
+ width: var(--app-nav-width);
49
47
  height: 100%;
50
- color: invert($app-nav-bg, 100%);
48
+ color: var(--app-nav-color);
51
49
  overflow-y: auto;
52
50
  overflow-x: hidden;
53
51
  white-space: nowrap;
@@ -56,17 +54,17 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
56
54
  }
57
55
 
58
56
  .psdk-appshell-nav:hover {
59
- width: $app-nav-width-expanded;
57
+ width: var(--app-nav-width-expanded);
60
58
  }
61
59
 
62
60
  .psdk-appshell-topnav {
63
61
  display: flex;
64
62
  flex-direction: column;
65
63
  justify-content: flex-start;
66
- background: $app-nav-bg;
67
- width: $app-nav-width;
64
+ background: var(--app-nav-bg);
65
+ width: var(--app-nav-width);
68
66
  height: 15%;
69
- color: invert($app-nav-bg, 100%);
67
+ color: var(--app-nav-color);
70
68
  overflow: hidden;
71
69
  white-space: nowrap;
72
70
  transition: width $transition-medium $natural-ease;
@@ -77,10 +75,10 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
77
75
  display: flex;
78
76
  flex-direction: column;
79
77
  justify-content: space-between;
80
- background: $app-nav-bg;
81
- width: $app-nav-width;
78
+ background: var(--app-nav-bg);
79
+ width: var(--app-nav-width);
82
80
  height: 50%;
83
- color: invert($app-nav-bg, 100%);
81
+ color: var(--app-nav-color);
84
82
  overflow: hidden;
85
83
  white-space: nowrap;
86
84
  transition: width $transition-medium $natural-ease;
@@ -106,7 +104,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
106
104
 
107
105
  .psdk-nav-button-span {
108
106
  padding: 0 1rem;
109
- color: invert($app-nav-bg, 100%);
107
+ color: var(--app-nav-color);
110
108
  }
111
109
 
112
110
  .psdk-nav-oper-avatar {
@@ -121,8 +119,8 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
121
119
  align-items: center;
122
120
  text-align: center;
123
121
  display: inline-flex;
124
- background: $app-neutral-color;
125
- color: white;
122
+ background: var(--app-neutral-color);
123
+ color: var(--app-form-color);
126
124
  font-weight: normal;
127
125
  font-size: 1rem;
128
126
  }
@@ -142,7 +140,7 @@ mat-list-item {
142
140
  height: auto !important;
143
141
 
144
142
  &:hover {
145
- background-color: rgba(0, 0, 0, 0.5);
143
+ background-color: var(--app-label-color);
146
144
  }
147
145
 
148
146
  .flex-box {
package/lib/infra/root-container/root-container.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .progress-box {
4
2
  display: flex;
5
3
  flex-direction: column;
@@ -7,7 +5,7 @@
7
5
  align-items: center;
8
6
  height: 100%;
9
7
  width: 100%;
10
- background-color: whitesmoke;
8
+ background-color: var(--app-background-color);
11
9
  position: fixed;
12
10
  z-index: 99999;
13
11
  top: 0rem;
package/lib/infra/stages/stages.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-stages {
4
2
  padding: 0.625rem 0rem;
5
3
  }
@@ -15,21 +13,21 @@
15
13
  padding: 0.3125rem;
16
14
  font-weight: bold;
17
15
  font-size: 1.3rem;
18
- color: $app-neutral-color;
16
+ color: var(--app-neutral-color);
19
17
  }
20
18
 
21
19
  .psdk-stages-past {
22
- color: $app-primary-color;
20
+ color: var(--app-primary-color);
23
21
  padding-right: 0.3125rem;
24
22
  }
25
23
 
26
24
  .psdk-stages-present {
27
- color: $app-secondary-color;
25
+ color: var(--app-secondary-color);
28
26
  padding-right: 0.3125rem;
29
27
  }
30
28
 
31
29
  .psdk-stages-future {
32
- color: $app-neutral-color;
30
+ color: var(--app-neutral-color);
33
31
  padding-right: 0.3125rem;
34
32
  }
35
33
 
@@ -38,7 +36,7 @@
38
36
  }
39
37
 
40
38
  .psdk-stages-divider {
41
- border-bottom: 0.0625rem solid $app-neutral-light-color;
39
+ border-bottom: 0.0625rem solid var(--app-neutral-light-color);
42
40
  }
43
41
 
44
42
  .psdk-stages-full {
@@ -46,7 +44,7 @@
46
44
  }
47
45
 
48
46
  .psdk-stages-divider {
49
- border-bottom: 0.0625rem solid $app-neutral-light-color;
47
+ border-bottom: 0.0625rem solid var(--app-neutral-light-color);
50
48
  }
51
49
 
52
50
  .psdk-stages-icon {
@@ -57,9 +55,9 @@
57
55
 
58
56
  .psdk-stages-bar {
59
57
  margin: 1rem 0rem;
60
- background-color: rgb(255, 255, 255);
58
+ background-color: var(--app-form-color);
61
59
  border-radius: 0.5rem;
62
- border: 0.0625rem solid $app-neutral-light-color;
60
+ border: 0.0625rem solid var(--app-neutral-light-color);
63
61
  overflow: hidden;
64
62
  height: 2rem;
65
63
  display: flex;
@@ -94,16 +92,17 @@
94
92
  }
95
93
 
96
94
  .psdk-stages-inner-past {
97
- color: black;
95
+ color: var(--app-inverse-form-color);
98
96
  font-size: 1rem;
99
97
  }
100
98
 
101
99
  .psdk-stages-inner-present {
102
- color: $app-primary-color;
100
+ color: var(--app-primary-color);
103
101
  font-weight: bold;
104
102
  font-size: 1rem;
105
103
  }
104
+
106
105
  .psdk-stages-inner-future {
107
- color: $app-neutral-color;
106
+ color: var(--app-neutral-color);
108
107
  font-size: 1rem;
109
108
  }
package/lib/template/app-shell/app-shell.component.scss CHANGED
@@ -1,16 +1,14 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .appshell-top {
4
- background-color: $app-background-color;
2
+ background-color: var(--app-background-color);
5
3
  }
6
4
 
7
5
  .appshell-top-wss {
8
- background-color: $app-background-color;
6
+ background-color: var(--app-background-color);
9
7
  }
10
8
 
11
9
  .appshell-main {
12
10
  position: relative;
13
- margin-left: $app-nav-width;
11
+ margin-left: var(--app-nav-width);
14
12
  min-height: 100vh;
15
13
  display: block;
16
14
  }
@@ -34,7 +32,7 @@
34
32
  align-items: center;
35
33
  height: 100%;
36
34
  width: 100%;
37
- background-color: whitesmoke;
35
+ background-color: var(--app-background-color);
38
36
  position: fixed;
39
37
  z-index: 999;
40
38
  top: 0rem;
package/lib/template/case-summary/case-summary.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-case-summary-info-box {
4
2
  display: flex;
5
3
  flex-direction: row;
@@ -32,8 +30,8 @@
32
30
  }
33
31
 
34
32
  .psdk-status {
35
- background-color: $app-primary-color;
36
- color: white;
33
+ background-color: var(--app-primary-color);
34
+ color: var(--app-form-color);
37
35
  padding: 0;
38
36
  margin-top: 0.625rem;
39
37
  width: fit-content;
package/lib/template/case-view/case-view.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  h1 {
4
2
  font-size: 1.1rem;
5
3
  line-height: 1.3rem;
@@ -29,14 +27,14 @@ h1 {
29
27
  }
30
28
 
31
29
  .psdk-case-icon-div {
32
- background-color: $app-primary-dark-color;
30
+ background-color: var(--app-primary-dark-color);
33
31
  border-radius: 1rem;
34
32
  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
35
33
  }
36
34
  .psdk-case-svg-icon {
37
35
  width: 2rem;
38
36
  padding: 0rem 0.3125rem;
39
- filter: $app-white-color-filter;
37
+ filter: var(--app-white-color-filter);
40
38
  }
41
39
 
42
40
  .psdk-case-view-info-box {
@@ -51,7 +49,7 @@ h1 {
51
49
  float: left;
52
50
  padding: 0rem 0.3125rem 0rem 0rem;
53
51
  height: 100%; /* Should be removed. Only for demonstration */
54
- background-color: $app-form-color;
52
+ background-color: var(--app-form-color);
55
53
  }
56
54
 
57
55
  .psdk-case-view-main {
@@ -91,13 +89,13 @@ h1 {
91
89
  }
92
90
 
93
91
  .psdk-case-view-divider {
94
- border-bottom: 0.0625rem solid $app-neutral-light-color;
92
+ border-bottom: 0.0625rem solid var(--app-neutral-light-color);
95
93
  }
96
94
 
97
95
  .psdk-status {
98
96
  padding: 0.3125rem 0.3125rem;
99
- background-color: $app-primary-color;
100
- color: white;
97
+ background-color: var(--app-primary-color);
98
+ color: var(--app-form-color);
101
99
  width: fit-content;
102
100
  margin: 0.625rem;
103
101
  }
package/lib/template/default-form/default-form.component.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-default-form-one-column {
4
2
  display: grid;
5
3
  grid-template-columns: repeat(1, minmax(0, 1fr));
package/lib/template/field-group-list/field-group-list.component.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .psdk-details-fields-label {
2
- color: rgba(0, 0, 0, 0.54);
2
+ color: var(--app-label-color);
3
3
  margin: 8px 0px;
4
4
  }
5
5
 
package/lib/template/list-view/list-view.component.scss CHANGED
@@ -1,7 +1,5 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-list-header {
4
- background-color: white;
2
+ background-color: var(--app-form-color);
5
3
  padding: 1rem;
6
4
  margin: 0.5rem;
7
5
  border-radius: 0.6125rem;
@@ -91,32 +89,32 @@ td.mat-mdc-footer-cell {
91
89
  width: 1.4rem;
92
90
  display: inline-block;
93
91
  vertical-align: middle;
94
- filter: $app-primary-color-filter;
92
+ filter: var(--app-primary-color-filter);
95
93
  }
96
94
 
97
95
  .psdk-filter-svg-icon {
98
96
  width: 1rem;
99
97
  display: inline-block;
100
98
  vertical-align: middle;
101
- filter: $app-neutral-color-filter;
99
+ filter: var(--app-neutral-color-filter);
102
100
  }
103
101
 
104
102
  .psdk-arrow-svg-icon {
105
103
  width: 1rem;
106
104
  display: inline-block;
107
105
  vertical-align: middle;
108
- filter: $app-neutral-color-filter;
106
+ filter: var(--app-neutral-color-filter);
109
107
  }
110
108
 
111
109
  .psdk-filter-popover {
112
110
  display: table;
113
111
  margin: auto;
114
112
  min-width: 100px;
115
- background-color: white;
116
- border: 1px solid black;
113
+ background-color: var(--app-form-color);
114
+ border: 1px solid var(--app-inverse-form-color);
117
115
  border-radius: 10px;
118
116
  padding: 20px;
119
- box-shadow: 0 0 10px 3px #777;
117
+ box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
120
118
  position: absolute;
121
119
  z-index: 99;
122
120
  }
@@ -128,7 +126,7 @@ td.mat-mdc-footer-cell {
128
126
  align-items: center;
129
127
  height: 100%;
130
128
  width: 100%;
131
- background-color: rgba(100, 100, 100, 0.4);
129
+ background-color: var(--app-dialog-background-color);
132
130
  position: fixed;
133
131
  z-index: 999;
134
132
  top: 0px;
@@ -139,11 +137,11 @@ td.mat-mdc-footer-cell {
139
137
  display: table;
140
138
  margin: auto;
141
139
  min-width: 150px;
142
- background-color: white;
143
- border: 1px solid black;
140
+ background-color: var(--app-form-color);
141
+ border: 1px solid var(--app-inverse-form-color);
144
142
  border-radius: 10px;
145
143
  padding: 20px;
146
- box-shadow: 0 0 10px 3px #777;
144
+ box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
147
145
  }
148
146
 
149
147
  tr.mat-mdc-row {
@@ -155,12 +153,12 @@ tr.mat-mdc-row {
155
153
  justify-content: center;
156
154
  display: flex;
157
155
  align-items: center;
158
- border: 1px solid lightgray;
156
+ border: 1px solid var(--app-neutral-light-color);
159
157
  border-top: none;
160
158
  }
161
159
 
162
160
  .psdk-table-field-link {
163
- color: $app-primary-color;
161
+ color: var(--app-primary-color);
164
162
  padding: 0;
165
163
  cursor: pointer;
166
164
  border: 0;
package/lib/template/one-column-tab/one-column-tab.component.scss CHANGED
@@ -1,7 +1,5 @@
1
- @import '@pega/angular-sdk-components/_shared/styles.scss';
2
-
3
1
  .psdk-one-column-tab {
4
- background-color: $app-form-color;
2
+ background-color: var(--app-form-color);
5
3
  margin-top: 0.5rem;
6
4
  margin-bottom: 0.5rem;
7
5
  border-radius: 0.3125rem;