Skip to content

Commit e39cd37

Browse files
shhdharmenshhdharmen
committed
feat: add support for M3 with angular material 18
1 parent 9aeb529 commit e39cd37

File tree

10 files changed

+82
-105
lines changed

10 files changed

+82
-105
lines changed

‎package-lock.json‎

Lines changed: 17 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
"private": true,
1212
"dependencies": {
1313
"@angular/animations": "^18.0.0",
14-
"@angular/cdk": "^17.3.10",
14+
"@angular/cdk": "^18.0.0",
1515
"@angular/common": "^18.0.0",
1616
"@angular/compiler": "^18.0.0",
1717
"@angular/core": "^18.0.0",
1818
"@angular/forms": "^18.0.0",
19-
"@angular/material": "^17.3.10",
19+
"@angular/material": "^18.0.0",
2020
"@angular/platform-browser": "^18.0.0",
2121
"@angular/platform-browser-dynamic": "^18.0.0",
2222
"@angular/router": "^18.0.0",

‎src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h2>Custom Theme</h2>
3030
<button mat-raised-button color="warn">Warn</button>
3131
</div>
3232
<div class="demo-buttons">
33-
<h2>Rounded Buttons</h2>
33+
<h2>Custom Border Radius Buttons</h2>
3434
<button mat-raised-button color="primary" class="button-rounded">Raised</button>
3535
<button mat-raised-button color="accent" class="button-rounded">Accent</button>
3636
<button mat-raised-button color="warn" class="button-rounded">Warn</button>

‎src/app/ui/alert/_alert-theme.scss‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,46 @@
44
@use "@angular/material" as mat;
55

66
@mixin color($theme) {
7-
// Get the color config from the theme.
8-
$color-config: mat.get-color-config($theme);
9-
10-
// Get the primary color palette from the color-config.
11-
$primary-palette: map.get($color-config, "primary");
12-
$is-dark-theme: map.get($theme, is-dark);
13-
$exportBackgroundOpacity: if($is-dark-theme, 0.12, 0.06);
14-
157
.alert {
16-
color: mat.get-color-from-palette($primary-palette, if($is-dark-theme, 50, default));
17-
background: mat.get-color-from-palette(
18-
$primary-palette,
19-
300,
20-
$exportBackgroundOpacity
21-
);
22-
border-color: mat.get-color-from-palette($primary-palette, 100);
8+
color: mat.get-theme-color($theme, on-primary-container);
9+
background: mat.get-theme-color($theme, primary-container);
10+
border-color: mat.get-theme-color($theme, primary);
2311

2412
.alert-link {
25-
color: mat.get-color-from-palette($primary-palette, if($is-dark-theme, 200, 500));
13+
color: mat.get-theme-color($theme, on-primary-container);
2614
}
2715
}
2816
}
2917

30-
@mixin typography($typography-config) {
18+
@mixin typography($theme) {
3119
.alert {
32-
font-family: mat.font-family($typography-config);
20+
font: mat.get-theme-typography($theme, "body-medium", "font");
21+
letter-spacing: mat.get-theme-typography(
22+
$theme,
23+
"body-medium",
24+
"letter-spacing"
25+
);
3326

3427
.alert-heading {
35-
@include mat.typography-level($typography-config, "headline-6");
28+
font: mat.get-theme-typography($theme, "headline-small", "font");
29+
letter-spacing: mat.get-theme-typography(
30+
$theme,
31+
"headline-small",
32+
"letter-spacing"
33+
);
3634
}
3735
.alert-footer {
38-
@include mat.typography-level($typography-config, "caption");
36+
font: mat.get-theme-typography($theme, "label-small", "font");
37+
letter-spacing: mat.get-theme-typography(
38+
$theme,
39+
"label-small",
40+
"letter-spacing"
41+
);
3942
}
4043
}
4144
}
4245

4346
@mixin theme($theme) {
44-
$color-config: mat.get-color-config($theme);
45-
@if $color-config != null {
46-
@include color($theme);
47-
}
48-
49-
$typography-config: mat.get-typography-config($theme);
50-
@if $typography-config != null {
51-
@include typography($typography-config);
52-
}
47+
@include color($theme);
48+
@include typography($theme);
5349
}

‎src/styles.scss‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@
99

1010
@include mat.core();
1111

12-
@include mat.typography-hierarchy(config.$my-app-typography);
13-
@include mat.core-theme(themes.$my-app-light-theme);
14-
@include mat.button-theme(themes.$my-app-light-theme);
15-
@include mat.icon-theme(themes.$my-app-light-theme);
16-
@include mat.menu-theme(themes.$my-app-light-theme);
12+
html {
13+
@include mat.core-theme(themes.$my-app-light-theme);
14+
@include mat.button-theme(themes.$my-app-light-theme);
15+
@include mat.icon-theme(themes.$my-app-light-theme);
16+
@include mat.menu-theme(themes.$my-app-light-theme);
1717

18-
@include components.theme(themes.$my-app-light-theme);
18+
@include components.theme(themes.$my-app-light-theme);
19+
}
1920

2021
html,
2122
body {
@@ -27,10 +28,5 @@ body {
2728
}
2829

2930
.button-rounded {
30-
&.mat-mdc-button,
31-
&.mat-mdc-raised-button,
32-
&.mdc-button--unelevated,
33-
&.mdc-button--outlined {
34-
border-radius: 25% / 50%;
35-
}
36-
}
31+
--mdc-protected-button-container-shape: 16px;
32+
}

‎src/styles/sizes/_index.scss‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
11
@use "@angular/material" as mat;
22

3-
$regular-font-family: "'Inter', sans-serif";
4-
5-
$sm-typography: mat.define-typography-config(
6-
$font-family: $regular-font-family,
7-
$button:
8-
mat.define-typography-level(
9-
$font-size: 14px,
10-
),
11-
);
12-
13-
$sm-theme: mat.define-light-theme(
3+
$sm-theme: mat.define-theme(
144
(
15-
typography: $sm-typography,
16-
density: -2,
5+
density: (
6+
scale: -2,
7+
),
178
)
189
);
1910

‎src/styles/themes/_all.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,28 @@
44
@use "@angular/material" as mat;
55
@use "../typography/config" as config;
66

7-
$my-app-light-primary: mat.define-palette(mat.$indigo-palette);
8-
$my-app-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
7+
$my-app-light-primary: mat.$azure-palette;
8+
$my-app-light-tertiary: mat.$blue-palette;
99

10-
$my-app-light-warn: mat.define-palette(mat.$red-palette);
11-
12-
$my-app-light-theme: mat.define-light-theme(
10+
$my-app-light-theme: mat.define-theme(
1311
(
1412
color: (
13+
theme-type: light,
1514
primary: $my-app-light-primary,
16-
accent: $my-app-light-accent,
17-
warn: $my-app-light-warn,
15+
tertiary: $my-app-light-tertiary,
1816
),
1917
typography: config.$my-app-typography,
2018
)
2119
);
2220

2321
// Define a dark theme
24-
$my-app-dark-theme: mat.define-dark-theme(
22+
$my-app-dark-theme: mat.define-theme(
2523
(
2624
color: (
27-
primary: mat.define-palette(mat.$pink-palette),
28-
accent: mat.define-palette(mat.$blue-grey-palette),
25+
theme-type: dark,
26+
primary: mat.$cyan-palette,
27+
tertiary: mat.$orange-palette,
2928
),
29+
typography: config.$my-app-typography,
3030
)
3131
);

‎src/styles/themes/_custom-theme.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
@use "@angular/material" as mat;
22

3-
$custom-primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
4-
$custom-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
3+
$custom-primary: mat.$magenta-palette;
4+
$custom-tertiary: mat.$violet-palette;
55

6-
$custom-theme: mat.define-dark-theme(
6+
$custom-theme: mat.define-theme(
77
(
88
color: (
99
primary: $custom-primary,
10-
accent: $custom-accent,
10+
tertiary: $custom-tertiary,
1111
),
1212
)
1313
);

‎src/styles/themes/dark.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@
44

55
.dark-theme {
66
@include mat.core-color(themes.$my-app-dark-theme);
7+
@include mat.core-typography(themes.$my-app-dark-theme);
78
@include mat.button-color(themes.$my-app-dark-theme);
9+
@include mat.button-typography(themes.$my-app-dark-theme);
810
@include mat.icon-color(themes.$my-app-dark-theme);
11+
@include mat.icon-typography(themes.$my-app-dark-theme);
912
@include mat.menu-color(themes.$my-app-dark-theme);
13+
@include mat.menu-typography(themes.$my-app-dark-theme);
1014
@include components.theme(themes.$my-app-dark-theme);
1115
}

‎src/styles/typography/_config.scss‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
11
// src/styles/typography/_config.scss
2-
@use '@angular/material' as mat;
32

4-
$heading-font-family: "'Poppins', sans-serif";
5-
$regular-font-family: "'Inter', sans-serif";
3+
$heading-font-family: 'Poppins', sans-serif;
4+
$regular-font-family: 'Inter', sans-serif;
65

7-
$my-app-typography: mat.define-typography-config(
8-
$font-family: $regular-font-family,
9-
$headline-1: mat.define-typography-level($font-family: $heading-font-family, $font-size: 112px),
10-
$headline-2: mat.define-typography-level($font-family: $heading-font-family, $font-size: 56px),
11-
$headline-3: mat.define-typography-level($font-family: $heading-font-family, $font-size: 45px, $line-height: 48px),
12-
$headline-4: mat.define-typography-level($font-family: $heading-font-family, $font-size: 34px, $line-height: 40px),
13-
$headline-5: mat.define-typography-level($font-family: $heading-font-family, $font-size: 24px, $line-height: 32px),
14-
$headline-6: mat.define-typography-level($font-family: $heading-font-family, $font-size: 20px, $line-height: 32px),
15-
$subtitle-1: mat.define-typography-level($font-family: $heading-font-family, $font-size: 18px, $line-height: 28px),
16-
$subtitle-2: mat.define-typography-level($font-family: $heading-font-family, $font-size: 18px, $line-height: 24px),
17-
$body-2: mat.define-typography-level($font-size: 16px),
18-
$body-1: mat.define-typography-level($font-size: 16px),
19-
$button: mat.define-typography-level($font-size: 16px),
20-
);
6+
$my-app-typography: (
7+
plain-family: $regular-font-family,
8+
brand-family: $heading-font-family,
9+
);

0 commit comments

Comments
 (0)