Skip to content

Commit 3f8e742

Browse files
eneajahoeneajaho
committed
add m3, dark mode and density
1 parent 30a22b3 commit 3f8e742

9 files changed

+2169
-342
lines changed

‎angular.json

+5
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@
3535
"styles": [
3636
"src/styles.scss"
3737
],
38+
"stylePreprocessorOptions": {
39+
"includePaths": [
40+
"node_modules/"
41+
]
42+
},
3843
"scripts": []
3944
},
4045
"configurations": {

‎package-lock.json

+1,697-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
},
1111
"private": true,
1212
"dependencies": {
13+
"@angular/cdk": "angular/cdk-builds",
14+
"@angular/material": "angular/material-builds",
15+
"@angular/material-experimental": "angular/material-experimental-builds",
16+
"material-components-web": "^14.0.0",
1317
"@angular/animations": "^17.1.0",
1418
"@angular/common": "^17.1.0",
1519
"@angular/compiler": "^17.1.0",

‎src/app/app.component.html

+139-334
Large diffs are not rendered by default.

‎src/app/app.component.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
button,
2+
a {
3+
margin: 8px;
4+
text-transform: uppercase;
5+
}
6+
7+
section {
8+
display: flex;
9+
align-items: center;
10+
margin: 8px;
11+
}
12+
13+
p {
14+
padding: 5px 15px;
15+
}
16+
17+
.demo-section-header {
18+
font-weight: 500;
19+
margin: 0;
20+
}
21+
22+
.demo-no-flex {
23+
display: block;
24+
}

‎src/app/app.component.ts

+42-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,50 @@
1-
import { Component } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
1+
import { Component, effect, signal } from '@angular/core';
2+
import { MatButtonModule } from '@angular/material/button';
3+
import { MatDivider } from '@angular/material/divider';
4+
import { MatIcon } from '@angular/material/icon';
5+
import { MatCheckbox } from '@angular/material/checkbox';
6+
import { MatFormField, MatLabel } from '@angular/material/form-field';
7+
import { MatOption } from '@angular/material/core';
8+
import { MatSelectModule } from '@angular/material/select';
39

410
@Component({
511
selector: 'app-root',
612
standalone: true,
7-
imports: [RouterOutlet],
813
templateUrl: './app.component.html',
9-
styleUrl: './app.component.scss'
14+
styleUrl: './app.component.scss',
15+
imports: [
16+
MatButtonModule,
17+
MatDivider,
18+
MatIcon,
19+
MatCheckbox,
20+
MatFormField,
21+
MatSelectModule,
22+
MatLabel,
23+
MatOption,
24+
],
1025
})
1126
export class AppComponent {
12-
title = 'material-3-demo';
27+
darkTheme = signal(false);
28+
29+
DENSITY_LEVELS = ['maximum', 0, '-1', '-2', '-3', '-4', 'minimum'];
30+
31+
density = signal(1);
32+
33+
constructor() {
34+
effect(() => {
35+
document.body.classList.toggle('dark', this.darkTheme());
36+
});
37+
38+
effect(() => {
39+
// remove density-* classes
40+
document.body.classList.forEach((className) => {
41+
if (className.startsWith('density-')) {
42+
document.body.classList.remove(className);
43+
}
44+
});
45+
46+
// add density-* class
47+
document.body.classList.add(`density-${this.density()}`);
48+
});
49+
}
1350
}

‎src/app/app.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ApplicationConfig } from '@angular/core';
22
import { provideRouter } from '@angular/router';
3+
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
34

45
import { routes } from './app.routes';
56

67
export const appConfig: ApplicationConfig = {
7-
providers: [provideRouter(routes)]
8+
providers: [provideRouter(routes), provideAnimationsAsync()],
89
};

‎src/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<base href="/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
<link
10+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
11+
rel="stylesheet" />
912
</head>
1013
<body>
1114
<app-root></app-root>

‎src/styles.scss

+253
Original file line numberDiff line numberDiff line change
@@ -1 +1,254 @@
11
/* You can add global styles to this file, and also import other style files */
2+
@use "sass:map";
3+
@use "@angular/material" as mat;
4+
@use "@angular/material-experimental" as matx;
5+
6+
@mixin color-variant-styles($theme, $color-variant) {
7+
@include mat.option-color($theme, $color-variant: $color-variant);
8+
@include mat.progress-spinner-color($theme, $color-variant: $color-variant);
9+
@include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
10+
11+
&.mat-icon {
12+
@include mat.icon-color($theme, $color-variant: $color-variant);
13+
}
14+
15+
&.mat-mdc-checkbox {
16+
@include mat.checkbox-color($theme, $color-variant: $color-variant);
17+
}
18+
19+
&.mat-mdc-slider {
20+
@include mat.slider-color($theme, $color-variant: $color-variant);
21+
}
22+
23+
&.mat-mdc-tab-group,
24+
&.mat-mdc-tab-nav-bar {
25+
@include mat.tabs-color($theme, $color-variant: $color-variant);
26+
}
27+
28+
&.mat-mdc-slide-toggle {
29+
@include mat.slide-toggle-color($theme, $color-variant: $color-variant);
30+
}
31+
32+
&.mat-mdc-form-field {
33+
@include mat.select-color($theme, $color-variant: $color-variant);
34+
}
35+
36+
&.mat-mdc-radio-button {
37+
@include mat.radio-color($theme, $color-variant: $color-variant);
38+
}
39+
40+
&.mat-mdc-progress-bar {
41+
@include mat.progress-bar-color($theme, $color-variant: $color-variant);
42+
}
43+
44+
&.mat-mdc-form-field {
45+
@include mat.form-field-color($theme, $color-variant: $color-variant);
46+
}
47+
48+
&.mat-datepicker-content {
49+
@include mat.datepicker-color($theme, $color-variant: $color-variant);
50+
}
51+
52+
&.mat-mdc-button-base {
53+
@include mat.button-color($theme, $color-variant: $color-variant);
54+
}
55+
56+
&.mat-mdc-standard-chip {
57+
@include mat.chips-color($theme, $color-variant: $color-variant);
58+
}
59+
60+
.mdc-list-item__start,
61+
.mdc-list-item__end {
62+
@include mat.checkbox-color($theme, $color-variant: $color-variant);
63+
@include mat.radio-color($theme, $color-variant: $color-variant);
64+
}
65+
66+
// M3 dropped support for warn/error color FABs.
67+
@if $color-variant != error {
68+
&.mat-mdc-fab,
69+
&.mat-mdc-mini-fab {
70+
@include mat.fab-color($theme, $color-variant: $color-variant);
71+
}
72+
}
73+
}
74+
75+
// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
76+
// a demo thing.
77+
@mixin color-variants-back-compat($theme) {
78+
.mat-primary {
79+
@include color-variant-styles($theme, primary);
80+
}
81+
.mat-badge {
82+
@include mat.badge-color($theme, $color-variant: primary);
83+
}
84+
85+
.mat-accent {
86+
@include color-variant-styles($theme, secondary);
87+
}
88+
.mat-badge-accent {
89+
@include mat.badge-color($theme, $color-variant: secondary);
90+
}
91+
92+
.mat-warn {
93+
@include color-variant-styles($theme, error);
94+
}
95+
.mat-badge-warn {
96+
@include mat.badge-color($theme, $color-variant: error);
97+
}
98+
}
99+
100+
// Emit Angular Material core styles.
101+
@include mat.core();
102+
103+
// Base theme configuration for our M3 theme.
104+
$m3-base-config: (
105+
color: (
106+
primary: matx.$m3-green-palette,
107+
secondary: matx.$m3-blue-palette,
108+
tertiary: matx.$m3-yellow-palette,
109+
),
110+
);
111+
112+
// Our M3 light theme.
113+
$light-theme: matx.define-theme($m3-base-config);
114+
115+
// Our M3 dark theme.
116+
$dark-theme: matx.define-theme(
117+
map.set($m3-base-config, color, theme-type, dark)
118+
);
119+
120+
// Emit default theme styles.
121+
html {
122+
@include mat.autocomplete-theme($light-theme);
123+
@include mat.badge-theme($light-theme);
124+
@include mat.bottom-sheet-theme($light-theme);
125+
@include mat.button-theme($light-theme);
126+
@include mat.button-toggle-theme($light-theme);
127+
@include mat.card-theme($light-theme);
128+
@include mat.checkbox-theme($light-theme);
129+
@include mat.chips-theme($light-theme);
130+
@include mat.core-theme($light-theme);
131+
@include mat.datepicker-theme($light-theme);
132+
@include mat.dialog-theme($light-theme);
133+
@include mat.divider-theme($light-theme);
134+
@include mat.expansion-theme($light-theme);
135+
@include mat.fab-theme($light-theme);
136+
@include mat.form-field-theme($light-theme);
137+
@include mat.grid-list-theme($light-theme);
138+
@include mat.icon-button-theme($light-theme);
139+
@include mat.icon-theme($light-theme);
140+
@include mat.input-theme($light-theme);
141+
@include mat.list-theme($light-theme);
142+
@include mat.menu-theme($light-theme);
143+
@include mat.paginator-theme($light-theme);
144+
@include mat.progress-bar-theme($light-theme);
145+
@include mat.progress-spinner-theme($light-theme);
146+
@include mat.radio-theme($light-theme);
147+
@include mat.select-theme($light-theme);
148+
@include mat.sidenav-theme($light-theme);
149+
@include mat.slide-toggle-theme($light-theme);
150+
@include mat.slider-theme($light-theme);
151+
@include mat.snack-bar-theme($light-theme);
152+
@include mat.sort-theme($light-theme);
153+
@include mat.stepper-theme($light-theme);
154+
@include mat.table-theme($light-theme);
155+
@include mat.tabs-theme($light-theme);
156+
@include mat.toolbar-theme($light-theme);
157+
@include mat.tooltip-theme($light-theme);
158+
@include mat.tree-theme($light-theme);
159+
}
160+
161+
@include color-variants-back-compat($light-theme);
162+
163+
// Emit dark theme styles.
164+
.dark {
165+
background: black;
166+
color: white;
167+
168+
@include mat.autocomplete-color($dark-theme);
169+
@include mat.badge-color($dark-theme);
170+
@include mat.bottom-sheet-color($dark-theme);
171+
@include mat.button-color($dark-theme);
172+
@include mat.button-toggle-color($dark-theme);
173+
@include mat.card-color($dark-theme);
174+
@include mat.checkbox-color($dark-theme);
175+
@include mat.chips-color($dark-theme);
176+
@include mat.core-color($dark-theme);
177+
@include mat.datepicker-color($dark-theme);
178+
@include mat.dialog-color($dark-theme);
179+
@include mat.divider-color($dark-theme);
180+
@include mat.expansion-color($dark-theme);
181+
@include mat.fab-color($dark-theme);
182+
@include mat.form-field-color($dark-theme);
183+
@include mat.grid-list-color($dark-theme);
184+
@include mat.icon-button-color($dark-theme);
185+
@include mat.icon-color($dark-theme);
186+
@include mat.input-color($dark-theme);
187+
@include mat.list-color($dark-theme);
188+
@include mat.menu-color($dark-theme);
189+
@include mat.paginator-color($dark-theme);
190+
@include mat.progress-bar-color($dark-theme);
191+
@include mat.progress-spinner-color($dark-theme);
192+
@include mat.radio-color($dark-theme);
193+
@include mat.select-color($dark-theme);
194+
@include mat.sidenav-color($dark-theme);
195+
@include mat.slide-toggle-color($dark-theme);
196+
@include mat.slider-color($dark-theme);
197+
@include mat.snack-bar-color($dark-theme);
198+
@include mat.sort-color($dark-theme);
199+
@include mat.stepper-color($dark-theme);
200+
@include mat.table-color($dark-theme);
201+
@include mat.tabs-color($dark-theme);
202+
@include mat.toolbar-color($dark-theme);
203+
@include mat.tooltip-color($dark-theme);
204+
@include mat.tree-color($dark-theme);
205+
206+
@include color-variants-back-compat($dark-theme);
207+
}
208+
209+
// Emit density styles for each scale.
210+
@each $scale in (maximum, 0, -1, -2, -3, -4, minimum) {
211+
$scale-theme: matx.define-theme(
212+
map.set($m3-base-config, density, scale, $scale)
213+
);
214+
215+
.density-#{$scale} {
216+
@include mat.autocomplete-density($scale-theme);
217+
@include mat.badge-density($scale-theme);
218+
@include mat.bottom-sheet-density($scale-theme);
219+
@include mat.button-density($scale-theme);
220+
@include mat.button-toggle-density($scale-theme);
221+
@include mat.card-density($scale-theme);
222+
@include mat.checkbox-density($scale-theme);
223+
@include mat.chips-density($scale-theme);
224+
@include mat.core-density($scale-theme);
225+
@include mat.datepicker-density($scale-theme);
226+
@include mat.dialog-density($scale-theme);
227+
@include mat.divider-density($scale-theme);
228+
@include mat.expansion-density($scale-theme);
229+
@include mat.fab-density($scale-theme);
230+
@include mat.form-field-density($scale-theme);
231+
@include mat.grid-list-density($scale-theme);
232+
@include mat.icon-button-density($scale-theme);
233+
@include mat.icon-density($scale-theme);
234+
@include mat.input-density($scale-theme);
235+
@include mat.list-density($scale-theme);
236+
@include mat.menu-density($scale-theme);
237+
@include mat.paginator-density($scale-theme);
238+
@include mat.progress-bar-density($scale-theme);
239+
@include mat.progress-spinner-density($scale-theme);
240+
@include mat.radio-density($scale-theme);
241+
@include mat.select-density($scale-theme);
242+
@include mat.sidenav-density($scale-theme);
243+
@include mat.slide-toggle-density($scale-theme);
244+
@include mat.slider-density($scale-theme);
245+
@include mat.snack-bar-density($scale-theme);
246+
@include mat.sort-density($scale-theme);
247+
@include mat.stepper-density($scale-theme);
248+
@include mat.table-density($scale-theme);
249+
@include mat.tabs-density($scale-theme);
250+
@include mat.toolbar-density($scale-theme);
251+
@include mat.tooltip-density($scale-theme);
252+
@include mat.tree-density($scale-theme);
253+
}
254+
}

0 commit comments

Comments
 (0)