inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-45132] - Make style MD3 compliant

Browse Source
This commit is contained in:
VitoAlbano
2026-04-29 23:22:36 +01:00
parent d1d06a68bc
commit 5ea3506876
7 changed files with 61 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/custom-theme/README.md
+3 -1
View File
@@ -1,3 +1,5 @@
# DEPRECATION WARNING
The custom theme is deprecated and will be removed in the future. To generate a custom theme, please refer to the Angular Material [Custom Theme section](https://v18.material.angular.dev/guide/theming#custom-theme).
The custom theme is deprecated and will be removed in the future. To generate a custom theme, please refer to the Angular Material [Custom Theme section](https://material.angular.dev/guide/theming#custom-theme).
This theme has been migrated to Material Design 3 (M3) using `mat.theme()`.
lib/core/custom-theme/material-theme.scss
+31 -27
View File
@@ -1,36 +1,40 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use './theme/theme-data' as theme;
$custom-theme: mat.m2-define-light-theme(
(
color: (
primary: map.get(theme.$palettes, primary),
accent: map.get(theme.$palettes, accent),
warn: map.get(theme.$palettes, warning)
),
typography: theme.$app-typography
)
);
@if theme.$background-color {
$custom-theme: theme.get-custom-background-color(theme.$background-color, $custom-theme);
}
@if theme.$text-color {
$custom-theme: theme.get-custom-text-color(theme.$text-color, $custom-theme);
}
@if theme.$base-font-size {
body,
html {
html {
@if theme.$base-font-size {
font-size: theme.$base-font-size;
}
}
@if theme.$font-family {
body,
html {
@if theme.$font-family {
font-family: theme.$font-family;
}
@include mat.theme(
(
color: (
primary: theme.$primary-palette,
tertiary: theme.$tertiary-palette,
theme-type: light
),
typography: theme.$typography-config,
density: 0
)
);
@if theme.$background-color {
& {
--mat-sys-surface: #{theme.$background-color};
--mat-sys-surface-container: #{theme.$background-color};
--mat-sys-surface-container-low: #{theme.$background-color};
--mat-sys-surface-container-lowest: #{theme.$background-color};
}
}
@if theme.$text-color {
& {
--mat-sys-on-surface: #{theme.$text-color};
--mat-sys-on-surface-variant: #{theme.$text-color};
}
}
}
lib/core/custom-theme/theme/custom-theme-palettes.scss
+7 -16
View File
@@ -1,27 +1,18 @@
@use '@angular/material' as mat;
@use 'default-colors';
@use 'custom-palette-creator';
@function get-mat-palettes($primary-color, $accent-color) {
$mat-primary-palette: null;
@function get-palette($primary-color) {
@if ($primary-color) {
$custom-theme-primary-palette: custom-palette-creator.create-color-palette($primary-color, 'primary');
$mat-primary-palette: mat.m2-define-palette($custom-theme-primary-palette, 500);
} @else {
$mat-primary-palette: mat.m2-define-palette(default-colors.$default-primary, A100);
@return $primary-color;
}
$mat-accent-palette: null;
@return default-colors.$default-primary;
}
@function get-tertiary-palette($accent-color) {
@if ($accent-color) {
$custom-theme-accent-palette: custom-palette-creator.create-color-palette($accent-color, 'accent');
$mat-accent-palette: mat.m2-define-palette($custom-theme-accent-palette, 500);
} @else {
$mat-accent-palette: mat.m2-define-palette(default-colors.$default-accent);
@return $accent-color;
}
$mat-warn-palette: mat.m2-define-palette(default-colors.$default-warn, A100);
@return (primary: $mat-primary-palette, accent: $mat-accent-palette, warning: $mat-warn-palette);
@return default-colors.$default-tertiary;
}
lib/core/custom-theme/theme/default-colors.scss
+2 -24
View File
@@ -1,26 +1,4 @@
/*
This file can be replaced by file with your default palettes.
In order to generate material theme, we need to provide three palettes, 'primary', 'accent' and 'warnign'.
If user would like to dynamically create only one palette, e.g. 'primary', in that case we need to provide
remaining palettes.
e.g.
@use '@angular/material' as mat;
$default-primary: mat.$indigo-palette;
$default-accent: $my-custom-palette;
$default-warn: (
50: #35041e,
100: #dd68a8,
contrast: (
...
),
*/
@use '@angular/material' as mat;
$default-primary: mat.$indigo-palette;
$default-accent: mat.$pink-palette;
$default-warn: mat.$red-palette;
$default-primary: mat.$azure-palette;
$default-tertiary: mat.$rose-palette;
lib/core/custom-theme/theme/theme-configuration.scss.tpl
+10 -6
View File
@@ -1,18 +1,22 @@
/*
Replace 'THEME_CONFIGURATION' placeholder with your theme configuration using '$theme-config' variable map.
Specify colors for palettes generation, e.g. if for 'primaryColor' the color is going to be 'red'(#fc0313).
Then, we are going to generate 'primary' palette based on the 'red' color.
Geenerated pallete is going to be used to create material design theme
Color values (primaryColor, accentColor) must be Angular Material M3 palette objects.
Available built-in palettes: mat.$azure-palette, mat.$blue-palette, mat.$cyan-palette,
mat.$green-palette, mat.$magenta-palette, mat.$orange-palette, mat.$red-palette,
mat.$rose-palette, mat.$violet-palette, mat.$yellow-palette, mat.$chartreuse-palette,
mat.$spring-green-palette.
e.g.
@use '@angular/material' as mat;
$theme-config: (
primaryColor: #5175d2,
primaryColor: mat.$azure-palette,
accentColor: mat.$rose-palette,
backgroundColor: #FAFAFA,
textColor: #793942,
accentColor: #C64F73,
baseFontSize: 26px,
baseFontSize: 16px,
fontFamily: Cursive
);
*/
lib/core/custom-theme/theme/theme-data.scss
+3 -6
View File
@@ -2,17 +2,14 @@
@use 'theme-configuration';
@use 'typography';
@use 'custom-theme-palettes';
@use 'custom-background-color';
@use 'custom-text-color';
$primary-color: map.get(theme-configuration.$theme-config, 'primaryColor');
$accent-color: map.get(theme-configuration.$theme-config, 'accentColor');
$background-color: map.get(theme-configuration.$theme-config, 'backgroundColor');
$text-color: map.get(theme-configuration.$theme-config, 'textColor');
$base-font-size: map.get(theme-configuration.$theme-config, 'baseFontSize');
$font-family: map.get(theme-configuration.$theme-config, 'fontFamily');
$app-typography: typography.get-mat-typography($base-font-size, $font-family);
$palettes: custom-theme-palettes.get-mat-palettes($primary-color, $accent-color);
$primary-palette: custom-theme-palettes.get-palette($primary-color);
$tertiary-palette: custom-theme-palettes.get-tertiary-palette($accent-color);
$typography-config: typography.get-typography-config($font-family);
lib/core/custom-theme/theme/typography.scss
+5 -70
View File
@@ -1,78 +1,13 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use 'sass:meta';
@use '../variables/font-family';
@function get-mat-typography($base-font-size, $font-family) {
$custom-typography: mat.m2-define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
$headline-6: mat.m2-define-typography-level(20px, 32px, 500),
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
$body-1: mat.m2-define-typography-level(15px, 24px, 400),
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
$caption: mat.m2-define-typography-level(12px, 20px, 400),
$button: mat.m2-define-typography-level(14px, 14px, 500) // Line-height must be unit-less fraction of the font-size.
);
$default-plain-family: font-family.$default-font-family, Roboto, 'Helvetica Neue', sans-serif;
@if $base-font-size {
$custom-typography: mat.m2-define-typography-config(
$headline-1: mat.m2-define-typography-level(8rem, 8rem, 300),
$headline-2: mat.m2-define-typography-level(4rem, 4rem, 400),
$headline-3: mat.m2-define-typography-level(3.21rem, 3.21rem, 400),
$headline-4: mat.m2-define-typography-level(2.42rem, 2.85rem, 400),
$headline-5: mat.m2-define-typography-level(1.71rem, 2.28rem, 400),
$headline-6: mat.m2-define-typography-level(1.42rem, 2.28rem, 500),
$subtitle-1: mat.m2-define-typography-level(1.14rem, 2rem, 400),
$body-1: mat.m2-define-typography-level(1.07rem, 1.71rem, 400),
$subtitle-2: mat.m2-define-typography-level(1rem, 1.71rem, 500),
$body-2: mat.m2-define-typography-level(1rem, 1.42rem, 400),
$caption: mat.m2-define-typography-level(0.86rem, 1.42rem, 400),
$button: mat.m2-define-typography-level(1rem, 1rem, 500),
$font-family: font-family.$default-font-family
);
}
@function get-typography-config($font-family) {
$plain: $default-plain-family;
@if $font-family {
@each $key, $level in $custom-typography {
/* stylelint-disable-next-line scss/no-global-function-names */
@if meta.type-of($level) == 'map' {
$new-level: map.merge(
$level,
(
font-family: $font-family
)
);
$custom-typography: map.merge(
$custom-typography,
(
$key: $new-level
)
);
}
}
$custom-typography: map.merge(
$custom-typography,
(
font-family: $font-family
)
);
$plain: $font-family;
}
@return $custom-typography;
}
@function get-custom-adf-font-sizes() {
@return (
'theme-adf-icon-1-font-size': 1.2rem,
'theme-adf-picture-1-font-size': 1.28rem,
'theme-adf-task-footer-font-size': 1.28rem,
'theme-adf-task-title-font-size': 1.28rem
);
@return (plain-family: $plain, brand-family: $plain, bold-weight: 700, medium-weight: 500, regular-weight: 400);
}