Skip to content

Commit f866818

Browse files
tammy-a11ytumms2021389
tammy-a11y
and
tumms2021389
authored
Theming support for both portal and embedded mode (#321)
* Implemented theme support in Angular SDK --------- Co-authored-by: Siva Rama Krishna <[email protected]> Co-authored-by: tumms2021389 <[email protected]>
1 parent 5444499 commit f866818

File tree

63 files changed

+573
-386
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+573
-386
lines changed

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/alert/alert.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
}
1515

1616
.psdk-alert-error {
17-
color: var(--app-alert-error-color);
18-
border: 1px solid var(--app-alert-error-border-color);
17+
color: var(--mat-sys-error);
18+
border: 1px solid var(--mat-sys-error);
1919
.mat-icon {
20-
color: var(--app-alert-error-border-color);
20+
color: var(--mat-sys-error);
2121
}
2222
}
2323

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333

3434
.background-style {
3535
background-color: transparent;
36-
color: var(--app-inverse-form-color);
3736
width: 100%;
3837
height: 100%;
3938
text-align: center;

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<dd class="psdk-csf-primary-field-data" [ngSwitch]="field.type.toLowerCase()">
1515
<span *ngSwitchCase="'textinput'" class="psdk-csf-text-style">{{ field.config.value }}</span>
1616
<span *ngSwitchCase="'status'" class="psdk-csf-status-style">{{ field.config.value }}</span>
17-
<a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ field.config.value }}</a>
18-
<a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
17+
<a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ field.config.value }}</a>
18+
<a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
1919
<span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value }}</span>
2020
<label *ngSwitchCase="'caseoperator'">operator</label>
2121
<span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value }}</span>

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.scss‎

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,36 +18,6 @@
1818
margin-bottom: 0.75rem;
1919
}
2020

21-
.psdk-case-summary-status-data {
22-
display: block;
23-
background-color: var(--app-primary-lightest-color);
24-
color: var(--app-primary-color);
25-
padding: 0rem 0.625rem;
26-
display: inline;
27-
font-size: 0.75rem;
28-
font-weight: 700;
29-
text-transform: uppercase;
30-
line-height: 1.5rem;
31-
}
32-
33-
.psdk-case-summary-primary .label {
34-
font-weight: 600;
35-
}
36-
37-
.psdk-case-summary-primary .data {
38-
font-weight: 600;
39-
font-size: 1.625rem;
40-
}
41-
42-
.psdk-case-summary-secondary .label {
43-
font-weight: 600;
44-
}
45-
.psdk-case-summary-secondary .data {
46-
font-weight: 600;
47-
// color: $app-primary-color;
48-
padding-left: 1.25rem;
49-
}
50-
5121
.psdk-case-summary-fields {
5222
// padding: calc(2 * 0.5rem);
5323
display: grid;
@@ -74,7 +44,6 @@
7444
max-width: max-content;
7545
font-size: 0.8125rem;
7646
font-weight: 400;
77-
color: var(--app-field-header-color);
7847
}
7948

8049
.psdk-csf-primary-field-data {
@@ -106,7 +75,6 @@
10675
max-width: max-content;
10776
font-size: 0.8125rem;
10877
font-weight: 400;
109-
color: var(--app-field-header-color);
11078
align-items: center;
11179
display: flex;
11280
}
@@ -124,9 +92,8 @@ span.psdk-csf-text-style {
12492
}
12593

12694
span.psdk-csf-status-style {
127-
background-color: var(--app-details-status-background);
95+
background-color: var(--mat-sys-surface-container-highest);
12896
border-radius: calc(0.25 * 0.5rem);
129-
color: var(--app-details-status-color);
13097
display: inline-block;
13198
font-size: 0.75rem;
13299
font-weight: bold;
@@ -139,3 +106,7 @@ span.psdk-csf-status-style {
139106
.psdk-secondary-value {
140107
font-size: 1rem;
141108
}
109+
110+
.psdk-primary-color {
111+
color: var(--mat-sys-primary);
112+
}

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
1818
<span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
1919
<span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
20-
<a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
21-
<a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
20+
<a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
21+
<a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
2222
<span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
2323
<span *ngSwitchCase="'caseoperator'"></span>
2424
<span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.psdk-details-fields-label {
2-
color: var(--app-label-color);
32
margin: 8px 0px;
43
}
54

@@ -8,9 +7,7 @@ span.psdk-details-text-style-hf {
87
}
98

109
span.psdk-details-status-style-hf {
11-
background-color: var(--app-details-status-background);
1210
border-radius: calc(0.25 * 0.5rem);
13-
color: var(--app-details-status-color);
1411
display: inline-block;
1512
font-size: 0.75rem;
1613
font-weight: bold;
@@ -31,3 +28,7 @@ span.psdk-details-status-style-hf {
3128
.psdk-csf-primary-field-value {
3229
margin: 8px 0;
3330
}
31+
32+
.psdk-primary-color {
33+
color: var(--mat-sys-primary);
34+
}

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
}
2424

2525
.psdk-details-fields-label {
26-
color: var(--app-label-color);
2726
margin: 8px 0px;
2827
}
2928

@@ -43,9 +42,7 @@ span.psdk-details-text-style {
4342
}
4443

4544
span.psdk-details-status-style {
46-
background-color: var(--app-details-status-background);
4745
border-radius: calc(0.25 * 0.5rem);
48-
color: var(--app-details-status-color);
4946
display: inline-block;
5047
font-size: 0.75rem;
5148
font-weight: bold;
@@ -68,9 +65,7 @@ span.psdk-details-status-style {
6865
}
6966

7067
span.psdk-details-status-style-hf {
71-
background-color: var(--app-details-status-background);
7268
border-radius: calc(0.25 * 0.5rem);
73-
color: var(--app-details-status-color);
7469
display: inline-block;
7570
font-size: 1.25rem;
7671
font-weight: 500;

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-summary-item/material-summary-item.component.scss‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.psdk-utility-divider {
7-
border-bottom: 0.0625rem solid var(--app-neutral-light-color);
7+
border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
88
}
99

1010
.psdk-utility-view-all {
@@ -13,20 +13,6 @@
1313
justify-content: center;
1414
}
1515

16-
.psdk-utility-count {
17-
background: var(--app-primary-light-color);
18-
border-radius: calc(1.125 * 0.5rem);
19-
color: var(--app-inverse-form-color);
20-
display: inline-block;
21-
font-size: 0.75rem;
22-
font-weight: bold;
23-
text-align: center;
24-
width: 1.125rem;
25-
26-
vertical-align: top;
27-
margin: 0 0 0.313rem 1rem;
28-
}
29-
3016
.psdk-utility .header-text {
3117
font-size: 1rem;
3218
font-weight: bold;
@@ -43,7 +29,6 @@
4329
width: 100%;
4430
padding: 0.625rem 0rem;
4531
text-align: left;
46-
background-color: var(--app-form-color);
4732
border-radius: 0.6125rem;
4833
margin: 0.3125rem 0rem;
4934
}
@@ -90,7 +75,6 @@
9075
}
9176

9277
.psdk-utility-card-main-primary-url {
93-
color: var(--app-primary-color);
9478
}
9579

9680
.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
@@ -109,6 +93,7 @@
10993
.psdk-utility-card-action-svg-icon {
11094
width: 1.4rem;
11195
display: inline-block;
96+
filter: var(--app-primary-color-filter);
11297
}
11398

11499
.psdk-utility-card-actions-svg-icon {

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-utility/material-utility.component.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.psdk-case-view-divider {
7-
border-bottom: 0.0625rem solid var(--app-neutral-light-color);
7+
border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
88
}
99

1010
.psdk-utility .header-text {
@@ -24,7 +24,6 @@
2424
height: 6.25rem;
2525
padding: 0.625rem 0rem;
2626
text-align: left;
27-
background-color: var(--app-form-color);
2827
border-radius: 0.6125rem;
2928
margin: 0.3125rem 0rem;
3029
}

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard {
99

1010
mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
1111
background-color: transparent;
12-
border-right: 0.1875rem solid var(--app-primary-color);
12+
border-right: 0.1875rem solid var(--mat-sys-primary);
1313
}
1414

1515
mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard {

0 commit comments

Comments
 (0)