Skip to content

Commit ccba365

Browse files
steinwindesteinwinde
authored
fix: Implements themes for Angular 15 (#2443)
This fixes the start-up warnings regarding the legacy themes we got after going for Angular 15. This enables the default theme and the selection of other color schemes. FIXES: WEB-168
1 parent b7c77e3 commit ccba365

6 files changed

+78
-63
lines changed

‎src/theme/deeppurple-amber.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
@use '@angular/material' as mat;
22

3-
$deeppurple-amber-primary: mat.define-palette(mat.$deep-purple-palette, 500, 300, 700);
4-
$deeppurple-amber-accent: mat.define-palette(mat.$amber-palette, 400, 200, 600);
5-
$deeppurple-amber-warn: mat.define-palette(mat.$red-palette);
3+
$deeppurple-amber-color-config: (
4+
primary: mat.define-palette(mat.$deep-purple-palette, 500, 300, 700),
5+
accent: mat.define-palette(mat.$amber-palette, 400, 200, 600),
6+
warn: mat.define-palette(mat.$red-palette)
7+
);
68

79
$deeppurple-amber-theme: mat.define-light-theme(
8-
$deeppurple-amber-primary,
9-
$deeppurple-amber-accent,
10-
$deeppurple-amber-warn
10+
(
11+
color: $deeppurple-amber-color-config,
12+
density: 0
13+
)
1114
);
1215

1316
.deeppurple-amber-theme {
14-
@include mat.all-legacy-component-themes($deeppurple-amber-theme);
17+
@include mat.all-component-colors($deeppurple-amber-theme);
1518
}

‎src/theme/indigo-pink.scss

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
@use '@angular/material' as mat;
22

3-
$indigo-pink-primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700);
4-
$indigo-pink-accent: mat.define-palette(mat.$pink-palette, 400, 200, 600);
5-
$indigo-pink-warn: mat.define-palette(mat.$red-palette);
3+
$indigo-pink-color-config: (
4+
primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700),
5+
accent: mat.define-palette(mat.$pink-palette, 400, 200, 600),
6+
warn: mat.define-palette(mat.$red-palette)
7+
);
68

7-
$indigo-pink-theme: mat.define-light-theme($indigo-pink-primary, $indigo-pink-accent, $indigo-pink-warn);
9+
$indigo-pink-theme: mat.define-light-theme(
10+
(
11+
color: $indigo-pink-color-config
12+
)
13+
);
814

915
.indigo-pink-theme {
10-
@include mat.all-legacy-component-themes($indigo-pink-theme);
16+
@include mat.all-component-colors($indigo-pink-theme);
1117
}

‎src/theme/mifosx-theme.scss

+26-32
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,30 @@
1010
@use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
1111
@use 'content' as *;
1212
@use 'dark_content' as *;
13-
@use 'pictonblue-yellowgreen' as *;
1413

15-
// Include the common styles for Angular Material. We include this here so that you only
16-
// have to load a single css file for Angular Material in your app.
17-
// Be sure that you only ever include this mixin once!
18-
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
19-
// The following line adds:
20-
// 1. Default typography styles for all components
21-
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
22-
// If you specify typography styles for the components you use elsewhere, you should delete this line.
23-
// If you don't need the default component typographies but still want the hierarchy styles,
24-
// you can delete this line and instead use:
25-
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
2614
@include mat.all-component-typographies();
2715
@include mat.core();
2816

2917
/* ################################## Light theme ################################### */
3018

31-
// Define the palettes for your theme using the Material Design palettes available in palette.scss
32-
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
33-
// hue. Available color palettes: https://material.io/design/color/
34-
$mifosx-app-primary: mat.define-palette($primary-palette);
35-
$mifosx-app-accent: mat.define-palette($accent-palette);
19+
$mifosx-color-config: (
20+
primary: mat.define-palette($primary-palette),
21+
accent: mat.define-palette($accent-palette),
22+
warn: mat.define-palette(mat.$red-palette)
23+
);
3624

37-
// The warn palette is optional (defaults to red).
38-
$mifosx-app-warn: mat.define-palette(mat.$red-palette);
25+
$mifosx-typography: mat.define-typography-config();
26+
$mifosx-density: 0;
3927

40-
// Create the theme object (a Sass map containing all of the palettes).
41-
$mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
28+
$mifosx-app-theme: mat.define-light-theme(
29+
(
30+
color: $mifosx-color-config,
31+
typography: $mifosx-typography,
32+
density: $mifosx-density
33+
)
34+
);
4235

43-
// Include theme styles for core and each component used in your app.
44-
// Alternatively, you can import and @include the theme mixins for each component
45-
// that you are using.
36+
@include mat.typography-hierarchy($mifosx-typography);
4637
@include mat.all-component-themes($mifosx-app-theme);
4738
@include groups-view-component-theme($mifosx-app-theme);
4839
@include centers-view-component-theme($mifosx-app-theme);
@@ -52,17 +43,20 @@ $mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accen
5243

5344
/* ################################## Dark theme ################################### */
5445

55-
// Define the palettes for your theme using the Material Design palettes available in palette.scss
56-
$mifosx-app-dark-primary: mat.define-palette($dark-primary-palette);
57-
$mifosx-app-dark-accent: mat.define-palette($dark-accent-palette);
58-
$mifosx-app-dark-warn: mat.define-palette(mat.$red-palette);
46+
$mifosx-dark-color-config: (
47+
primary: mat.define-palette($dark-primary-palette),
48+
accent: mat.define-palette($dark-accent-palette),
49+
warn: mat.define-palette(mat.$red-palette)
50+
);
5951

60-
// Create the theme object (a Sass map containing all of the palettes).
61-
$mifosx-app-dark-theme: mat.define-dark-theme($mifosx-app-dark-primary, $mifosx-app-dark-accent, $mifosx-app-dark-warn);
52+
$mifosx-app-dark-theme: mat.define-dark-theme(
53+
(
54+
color: $mifosx-dark-color-config
55+
)
56+
);
6257

63-
// Include theme styles for core and each component used in your app.
6458
.dark-theme {
65-
@include mat.all-component-themes($mifosx-app-dark-theme);
59+
@include mat.all-component-colors($mifosx-app-dark-theme);
6660
@include groups-view-component-theme($mifosx-app-dark-theme);
6761
@include centers-view-component-theme($mifosx-app-dark-theme);
6862
@include dashboard-component-theme($mifosx-app-dark-theme);

‎src/theme/pictonblue-yellowgreen.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
@use '@angular/material' as mat;
22

3-
$pictonblue-yellowgreen-primary: mat.define-palette(mat.$blue-palette, 400, 200, 600);
4-
5-
$pictonblue-yellowgreen-accent: mat.define-palette(mat.$light-green-palette, 400, 200, 600);
6-
7-
$pictonblue-yellowgreen-warn: mat.define-palette(mat.$red-palette);
3+
$pictonblue-yellowgreen-color-config: (
4+
primary: mat.define-palette(mat.$blue-palette, 400, 200, 600),
5+
accent: mat.define-palette(mat.$light-green-palette, 400, 200, 600),
6+
warn: mat.define-palette(mat.$red-palette)
7+
);
88

99
$pictonblue-yellowgreen-theme: mat.define-light-theme(
10-
$pictonblue-yellowgreen-primary,
11-
$pictonblue-yellowgreen-accent,
12-
$pictonblue-yellowgreen-warn
10+
(
11+
color: $pictonblue-yellowgreen-color-config
12+
)
1313
);
1414

1515
.pictonblue-yellowgreen-theme {
16-
@include mat.all-legacy-component-themes($pictonblue-yellowgreen-theme);
16+
@include mat.all-component-colors($pictonblue-yellowgreen-theme);
1717
}

‎src/theme/pink-bluegrey.scss

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
@use '@angular/material' as mat;
22

3-
$pink-bluegrey-primary: mat.define-palette(mat.$pink-palette, 500, 300, 700);
4-
$pink-bluegrey-accent: mat.define-palette(mat.$blue-grey-palette, 400, 200, 600);
5-
$pink-bluegrey-warn: mat.define-palette(mat.$red-palette);
3+
$pink-bluegrey-color-config: (
4+
primary: mat.define-palette(mat.$pink-palette, 500, 300, 700),
5+
accent: mat.define-palette(mat.$blue-grey-palette, 400, 200, 600),
6+
warn: mat.define-palette(mat.$red-palette)
7+
);
68

7-
$pink-bluegrey-theme: mat.define-light-theme($pink-bluegrey-primary, $pink-bluegrey-accent, $pink-bluegrey-warn);
9+
$pink-bluegrey-theme: mat.define-light-theme(
10+
(
11+
color: $pink-bluegrey-color-config
12+
)
13+
);
814

915
.pink-bluegrey-theme {
10-
@include mat.all-legacy-component-themes($pink-bluegrey-theme);
16+
@include mat.all-component-colors($pink-bluegrey-theme);
1117
}

‎src/theme/purple-green.scss

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
@use '@angular/material' as mat;
22

3-
$purple-green-primary: mat.define-palette(mat.$purple-palette, 500, 300, 700);
4-
$purple-green-accent: mat.define-palette(mat.$green-palette, 400, 200, 600);
5-
$purple-green-warn: mat.define-palette(mat.$red-palette);
3+
$purple-green-color-config: (
4+
primary: mat.define-palette(mat.$purple-palette, 500, 300, 700),
5+
accent: mat.define-palette(mat.$green-palette, 400, 200, 600),
6+
warn: mat.define-palette(mat.$red-palette)
7+
);
68

7-
$purple-green-theme: mat.define-light-theme($purple-green-primary, $purple-green-accent, $purple-green-warn);
9+
$purple-green-theme: mat.define-light-theme(
10+
(
11+
color: $purple-green-color-config
12+
)
13+
);
814

915
.purple-green-theme {
10-
@include mat.all-legacy-component-themes($purple-green-theme);
16+
@include mat.all-component-colors($purple-green-theme);
1117
}

0 commit comments

Comments
 (0)