Update angular material 18

This commit is contained in:
2025-04-13 21:20:12 +02:00
parent a0f51f74c8
commit e67ecf5ce4
4 changed files with 54 additions and 909 deletions

View File

@@ -15,19 +15,19 @@
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (
display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
display-4: mat.m2-define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
display-3: mat.m2-define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
display-2: mat.m2-define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
display-1: mat.m2-define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
headline: mat.m2-define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
title: mat.m2-define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
subheading-2: mat.m2-define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
subheading-1: mat.m2-define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
body-2: mat.m2-define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
body-1: mat.m2-define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
button: mat.m2-define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
caption: mat.m2-define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
input: mat.m2-define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
);
// Compute font config
@@ -170,7 +170,7 @@ $mat-primary: (
darker: $light-primary-text,
)
);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
$theme-primary: mat.m2-define-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #797979;
@@ -192,7 +192,7 @@ $mat-accent: (
darker: $light-primary-text,
)
);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
$theme-accent: mat.m2-define-palette($mat-accent, main, lighter, darker);
body {
--warn-color: #ff0000;
@@ -214,10 +214,10 @@ $mat-warn: (
darker: $light-primary-text,
)
);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);;
$theme-warn: mat.m2-define-palette($mat-warn, main, lighter, darker);;
$theme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
$theme: mat.m2-define-dark-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.m2-define-light-theme($theme-primary, $theme-accent, $theme-warn);
// Theme Init
@include mat.all-component-themes($theme);

View File

@@ -13,19 +13,19 @@
@import "Roboto";
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
title: mat.define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
button: mat.define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
$fontConfig: (display-4: mat.m2-define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
display-3: mat.m2-define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
display-2: mat.m2-define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
display-1: mat.m2-define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
headline: mat.m2-define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
title: mat.m2-define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
subheading-2: mat.m2-define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
subheading-1: mat.m2-define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
body-2: mat.m2-define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
body-1: mat.m2-define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
button: mat.m2-define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
caption: mat.m2-define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
input: mat.m2-define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
// Foreground Elements
@@ -159,7 +159,7 @@ $mat-primary: (main: #cc33ca,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
$theme-primary: mat.m2-define-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #797979;
@@ -178,7 +178,7 @@ $mat-accent: (main: #797979,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
$theme-accent: mat.m2-define-palette($mat-accent, main, lighter, darker);
body {
--warn-color: #ff0000;
@@ -197,11 +197,11 @@ $mat-warn: (main: #ff0000,
lighter: $dark-primary-text,
darker: $light-primary-text,
));
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
$theme-warn: mat.m2-define-palette($mat-warn, main, lighter, darker);
;
$theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
$theme: mat.m2-define-light-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat.m2-define-dark-theme($theme-primary, $theme-accent, $theme-warn);
// Theme Init
@include mat.all-component-themes($theme);