Skip to content

Commit

Permalink
add m3, dark mode and density
Browse files Browse the repository at this point in the history
  • Loading branch information
@eneajaho
eneajaho committed Jan 24, 2024
1 parent 30a22b3 commit 3f8e742
Show file tree
Hide file tree
Showing 9 changed files with 2,169 additions and 342 deletions.
5 changes: 5 additions & 0 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
},
"scripts": []
},
"configurations": {
Expand Down
1,699 changes: 1,697 additions & 2 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
},
"private": true,
"dependencies": {
"@angular/cdk": "angular/cdk-builds",
"@angular/material": "angular/material-builds",
"@angular/material-experimental": "angular/material-experimental-builds",
"material-components-web": "^14.0.0",
"@angular/animations": "^17.1.0",
"@angular/common": "^17.1.0",
"@angular/compiler": "^17.1.0",
Expand Down
473 changes: 139 additions & 334 deletions src/app/app.component.html
View file

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
button,
a {
margin: 8px;
text-transform: uppercase;
}

section {
display: flex;
align-items: center;
margin: 8px;
}

p {
padding: 5px 15px;
}

.demo-section-header {
font-weight: 500;
margin: 0;
}

.demo-no-flex {
display: block;
}
47 changes: 42 additions & 5 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,50 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Component, effect, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatOption } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
styleUrl: './app.component.scss',
imports: [
MatButtonModule,
MatDivider,
MatIcon,
MatCheckbox,
MatFormField,
MatSelectModule,
MatLabel,
MatOption,
],
})
export class AppComponent {
title = 'material-3-demo';
darkTheme = signal(false);

DENSITY_LEVELS = ['maximum', 0, '-1', '-2', '-3', '-4', 'minimum'];

density = signal(1);

constructor() {
effect(() => {
document.body.classList.toggle('dark', this.darkTheme());
});

effect(() => {
// remove density-* classes
document.body.classList.forEach((className) => {
if (className.startsWith('density-')) {
document.body.classList.remove(className);
}
});

// add density-* class
document.body.classList.add(`density-${this.density()}`);
});
}
}
3 changes: 2 additions & 1 deletion src/app/app.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

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

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
providers: [provideRouter(routes), provideAnimationsAsync()],
};
3 changes: 3 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</head>
<body>
<app-root></app-root>
Expand Down
253 changes: 253 additions & 0 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,254 @@
/* You can add global styles to this file, and also import other style files */
@use "sass:map";
@use "@angular/material" as mat;
@use "@angular/material-experimental" as matx;

@mixin color-variant-styles($theme, $color-variant) {
@include mat.option-color($theme, $color-variant: $color-variant);
@include mat.progress-spinner-color($theme, $color-variant: $color-variant);
@include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);

&.mat-icon {
@include mat.icon-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-checkbox {
@include mat.checkbox-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-slider {
@include mat.slider-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-tab-group,
&.mat-mdc-tab-nav-bar {
@include mat.tabs-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-slide-toggle {
@include mat.slide-toggle-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-form-field {
@include mat.select-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-radio-button {
@include mat.radio-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-progress-bar {
@include mat.progress-bar-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-form-field {
@include mat.form-field-color($theme, $color-variant: $color-variant);
}

&.mat-datepicker-content {
@include mat.datepicker-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-button-base {
@include mat.button-color($theme, $color-variant: $color-variant);
}

&.mat-mdc-standard-chip {
@include mat.chips-color($theme, $color-variant: $color-variant);
}

.mdc-list-item__start,
.mdc-list-item__end {
@include mat.checkbox-color($theme, $color-variant: $color-variant);
@include mat.radio-color($theme, $color-variant: $color-variant);
}

// M3 dropped support for warn/error color FABs.
@if $color-variant != error {
&.mat-mdc-fab,
&.mat-mdc-mini-fab {
@include mat.fab-color($theme, $color-variant: $color-variant);
}
}
}

// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
// a demo thing.
@mixin color-variants-back-compat($theme) {
.mat-primary {
@include color-variant-styles($theme, primary);
}
.mat-badge {
@include mat.badge-color($theme, $color-variant: primary);
}

.mat-accent {
@include color-variant-styles($theme, secondary);
}
.mat-badge-accent {
@include mat.badge-color($theme, $color-variant: secondary);
}

.mat-warn {
@include color-variant-styles($theme, error);
}
.mat-badge-warn {
@include mat.badge-color($theme, $color-variant: error);
}
}

// Emit Angular Material core styles.
@include mat.core();

// Base theme configuration for our M3 theme.
$m3-base-config: (
color: (
primary: matx.$m3-green-palette,
secondary: matx.$m3-blue-palette,
tertiary: matx.$m3-yellow-palette,
),
);

// Our M3 light theme.
$light-theme: matx.define-theme($m3-base-config);

// Our M3 dark theme.
$dark-theme: matx.define-theme(
map.set($m3-base-config, color, theme-type, dark)
);

// Emit default theme styles.
html {
@include mat.autocomplete-theme($light-theme);
@include mat.badge-theme($light-theme);
@include mat.bottom-sheet-theme($light-theme);
@include mat.button-theme($light-theme);
@include mat.button-toggle-theme($light-theme);
@include mat.card-theme($light-theme);
@include mat.checkbox-theme($light-theme);
@include mat.chips-theme($light-theme);
@include mat.core-theme($light-theme);
@include mat.datepicker-theme($light-theme);
@include mat.dialog-theme($light-theme);
@include mat.divider-theme($light-theme);
@include mat.expansion-theme($light-theme);
@include mat.fab-theme($light-theme);
@include mat.form-field-theme($light-theme);
@include mat.grid-list-theme($light-theme);
@include mat.icon-button-theme($light-theme);
@include mat.icon-theme($light-theme);
@include mat.input-theme($light-theme);
@include mat.list-theme($light-theme);
@include mat.menu-theme($light-theme);
@include mat.paginator-theme($light-theme);
@include mat.progress-bar-theme($light-theme);
@include mat.progress-spinner-theme($light-theme);
@include mat.radio-theme($light-theme);
@include mat.select-theme($light-theme);
@include mat.sidenav-theme($light-theme);
@include mat.slide-toggle-theme($light-theme);
@include mat.slider-theme($light-theme);
@include mat.snack-bar-theme($light-theme);
@include mat.sort-theme($light-theme);
@include mat.stepper-theme($light-theme);
@include mat.table-theme($light-theme);
@include mat.tabs-theme($light-theme);
@include mat.toolbar-theme($light-theme);
@include mat.tooltip-theme($light-theme);
@include mat.tree-theme($light-theme);
}

@include color-variants-back-compat($light-theme);

// Emit dark theme styles.
.dark {
background: black;
color: white;

@include mat.autocomplete-color($dark-theme);
@include mat.badge-color($dark-theme);
@include mat.bottom-sheet-color($dark-theme);
@include mat.button-color($dark-theme);
@include mat.button-toggle-color($dark-theme);
@include mat.card-color($dark-theme);
@include mat.checkbox-color($dark-theme);
@include mat.chips-color($dark-theme);
@include mat.core-color($dark-theme);
@include mat.datepicker-color($dark-theme);
@include mat.dialog-color($dark-theme);
@include mat.divider-color($dark-theme);
@include mat.expansion-color($dark-theme);
@include mat.fab-color($dark-theme);
@include mat.form-field-color($dark-theme);
@include mat.grid-list-color($dark-theme);
@include mat.icon-button-color($dark-theme);
@include mat.icon-color($dark-theme);
@include mat.input-color($dark-theme);
@include mat.list-color($dark-theme);
@include mat.menu-color($dark-theme);
@include mat.paginator-color($dark-theme);
@include mat.progress-bar-color($dark-theme);
@include mat.progress-spinner-color($dark-theme);
@include mat.radio-color($dark-theme);
@include mat.select-color($dark-theme);
@include mat.sidenav-color($dark-theme);
@include mat.slide-toggle-color($dark-theme);
@include mat.slider-color($dark-theme);
@include mat.snack-bar-color($dark-theme);
@include mat.sort-color($dark-theme);
@include mat.stepper-color($dark-theme);
@include mat.table-color($dark-theme);
@include mat.tabs-color($dark-theme);
@include mat.toolbar-color($dark-theme);
@include mat.tooltip-color($dark-theme);
@include mat.tree-color($dark-theme);

@include color-variants-back-compat($dark-theme);
}

// Emit density styles for each scale.
@each $scale in (maximum, 0, -1, -2, -3, -4, minimum) {
$scale-theme: matx.define-theme(
map.set($m3-base-config, density, scale, $scale)
);

.density-#{$scale} {
@include mat.autocomplete-density($scale-theme);
@include mat.badge-density($scale-theme);
@include mat.bottom-sheet-density($scale-theme);
@include mat.button-density($scale-theme);
@include mat.button-toggle-density($scale-theme);
@include mat.card-density($scale-theme);
@include mat.checkbox-density($scale-theme);
@include mat.chips-density($scale-theme);
@include mat.core-density($scale-theme);
@include mat.datepicker-density($scale-theme);
@include mat.dialog-density($scale-theme);
@include mat.divider-density($scale-theme);
@include mat.expansion-density($scale-theme);
@include mat.fab-density($scale-theme);
@include mat.form-field-density($scale-theme);
@include mat.grid-list-density($scale-theme);
@include mat.icon-button-density($scale-theme);
@include mat.icon-density($scale-theme);
@include mat.input-density($scale-theme);
@include mat.list-density($scale-theme);
@include mat.menu-density($scale-theme);
@include mat.paginator-density($scale-theme);
@include mat.progress-bar-density($scale-theme);
@include mat.progress-spinner-density($scale-theme);
@include mat.radio-density($scale-theme);
@include mat.select-density($scale-theme);
@include mat.sidenav-density($scale-theme);
@include mat.slide-toggle-density($scale-theme);
@include mat.slider-density($scale-theme);
@include mat.snack-bar-density($scale-theme);
@include mat.sort-density($scale-theme);
@include mat.stepper-density($scale-theme);
@include mat.table-density($scale-theme);
@include mat.tabs-density($scale-theme);
@include mat.toolbar-density($scale-theme);
@include mat.tooltip-density($scale-theme);
@include mat.tree-density($scale-theme);
}
}

0 comments on commit 3f8e742

Please sign in to comment.