More on System Variables

Angular Material does not only provide system variables for colors and typography, but also for other properties like shape, and shadow.

Shape

Let’s try to modify the shape of the dialog and buttons & form fields inside the dialog. We want to make them look sharper.

Create a new file _shape.scss in the styles folder and add the following code:

1
@use "@angular/material" as mat;
2

3
$sharp-radius: 0;
4

5
.sharp {
6
  @include mat.theme-overrides(
7
    (
8
      // for mat-buttons
9
      corner-full: $sharp-radius,
10
      // for dialog container
11
      corner-extra-large: $sharp-radius,
12
      // for form fields
13
      corner-extra-small: $sharp-radius
14
    )
15
  );
16
}

Next, add shape styles in src/styles.scss file.

1
@use "./styles/shape";

And lastly, add the sharp class as panelClass to the dialog.

1
@Component({})
2
export class AppComponent {
3
  openAddTodoDialog(): void {
4
    const dialogRef = this.dialog.open(TodoFormDialogComponent, {
5
      disableClose: true,
6
      panelClass: 'sharp',
7
    });
8

9
    // rest remains same
10
  }
11
}

Below is the list of system variables for shape:

• corner-extra-large
• corner-extra-large-top
• corner-extra-small
• corner-extra-small-top
• corner-full
• corner-large
• corner-large-end
• corner-large-start
• corner-large-top
• corner-medium
• corner-none
• corner-small

Shadow

Next, let’s try to modify the shadow of the add todo fab button.

Go to src/app/app.component.scss and add the following code:

1
.add-todo-fab {
2
  @include mat.theme-overrides((
3
    level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
4
  ));
5
}

Below is the list of system variables for shadow:

• level0
• level1
• level2
• level3
• level4
• level5