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-21565 Replace deprecated @import with @use in all scss files (#11273)

Browse Source
This commit is contained in:
Amedeo Lepore
2025-11-07 10:28:26 +01:00
committed by GitHub
parent 38d98200a6
commit 43622266ce
6 changed files with 63 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/custom-theme/material-theme.scss
+13 -13
View File
@@ -1,36 +1,36 @@
@use 'sass:map';
@use '@angular/material' as mat;
@import './theme/theme-data';
@use './theme/theme-data' as theme;
$custom-theme: mat.m2-define-light-theme(
(
color: (
primary: map.get($palettes, primary),
accent: map.get($palettes, accent),
warn: map.get($palettes, warning)
primary: map.get(theme.$palettes, primary),
accent: map.get(theme.$palettes, accent),
warn: map.get(theme.$palettes, warning)
),
typography: $app-typography
typography: theme.$app-typography
)
);
@if $background-color {
$custom-theme: get-custom-background-color($background-color, $custom-theme);
@if theme.$background-color {
$custom-theme: theme.get-custom-background-color(theme.$background-color, $custom-theme);
}
@if $text-color {
$custom-theme: get-custom-text-color($text-color, $custom-theme);
@if theme.$text-color {
$custom-theme: theme.get-custom-text-color(theme.$text-color, $custom-theme);
}
@if $base-font-size {
@if theme.$base-font-size {
body,
html {
font-size: $base-font-size;
font-size: theme.$base-font-size;
}
}
@if $font-family {
@if theme.$font-family {
body,
html {
font-family: $font-family;
font-family: theme.$font-family;
}
}
lib/core/custom-theme/theme/custom-palette-creator.scss
+23 -25
View File
@@ -15,7 +15,7 @@
$colors: (
red: color.red($color),
green: color.green($color),
blue: color.blue($color),
blue: color.blue($color)
);
@each $name, $value in $colors {
@@ -32,7 +32,7 @@
$colors: map.merge(
$colors,
(
$name: $value,
$name: $value
)
);
}
@@ -91,10 +91,10 @@
$color900: color.mix($dark, $color, 75%);
/* stylelint-disable scss/dollar-variable-pattern */
$colorA100: color.adjust(saturate(color.mix($dark, $color, 15%), 80%), $lightness: 45.6%);
$colorA200: color.adjust(saturate(color.mix($dark, $color, 15%), 80%), $lightness: 35.6%);
$colorA400: color.adjust(saturate(color.mix($dark, $color, 15%), 100%), $lightness: 25.6%);
$colorA700: color.adjust(saturate(color.mix($dark, $color, 15%), 100%), $lightness: 20.5%);
$colorA100: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 80%), $lightness: 45.6%);
$colorA200: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 80%), $lightness: 35.6%);
$colorA400: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 100%), $lightness: 25.6%);
$colorA700: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 100%), $lightness: 20.5%);
/* stylelint-enable scss/dollar-variable-pattern */
$contrast50: create-text-color($color50, $colorType);
@@ -126,30 +126,28 @@
700: $color700,
800: $color800,
900: $color900,
/* stylelint-disable value-keyword-case */
A100: $colorA100,
/* stylelint-disable value-keyword-case */ A100: $colorA100,
A200: $colorA200,
A400: $colorA400,
A700: $colorA700,
/* stylelint-enable value-keyword-case */
contrast: (
50: $contrast50,
100: $contrast100,
200: $contrast200,
300: $contrast300,
400: $contrast400,
500: $contrast500,
600: $contrast600,
700: $contrast700,
800: $contrast800,
900: $contrast900,
/* stylelint-disable value-keyword-case */
A100: $contrastA100,
A200: $contrastA200,
A400: $contrastA400,
A700: $contrastA700,
/* stylelint-enable value-keyword-case */
),
50: $contrast50,
100: $contrast100,
200: $contrast200,
300: $contrast300,
400: $contrast400,
500: $contrast500,
600: $contrast600,
700: $contrast700,
800: $contrast800,
900: $contrast900,
/* stylelint-disable value-keyword-case */ A100: $contrastA100,
A200: $contrastA200,
A400: $contrastA400,
A700: $contrastA700,
/* stylelint-enable value-keyword-case */
)
);
@return $palette;
lib/core/custom-theme/theme/custom-theme-palettes.scss
+7 -7
View File
@@ -1,27 +1,27 @@
@use '@angular/material' as mat;
@import './default-colors';
@import './custom-palette-creator';
@use 'default-colors';
@use 'custom-palette-creator';
@function get-mat-palettes($primary-color, $accent-color) {
$mat-primary-palette: null;
@if ($primary-color) {
$custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
$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-primary, A100);
$mat-primary-palette: mat.m2-define-palette(default-colors.$default-primary, A100);
}
$mat-accent-palette: null;
@if ($accent-color) {
$custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
$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-accent);
$mat-accent-palette: mat.m2-define-palette(default-colors.$default-accent);
}
$mat-warn-palette: mat.m2-define-palette($default-warn, A100);
$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);
}
lib/core/custom-theme/theme/theme-data.scss
+13 -13
View File
@@ -1,18 +1,18 @@
@use 'sass:map';
@import './theme-configuration';
@import './typography';
@import './custom-theme-palettes';
@import './custom-background-color';
@import './custom-text-color';
@use 'theme-configuration';
@use 'typography';
@use 'custom-theme-palettes';
@use 'custom-background-color';
@use 'custom-text-color';
$primary-color: map.get($theme-config, 'primaryColor');
$accent-color: map.get($theme-config, 'accentColor');
$background-color: map.get($theme-config, 'backgroundColor');
$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-config, 'textColor');
$base-font-size: map.get($theme-config, 'baseFontSize');
$font-family: map.get($theme-config, 'fontFamily');
$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: get-mat-typography($base-font-size, $font-family);
$app-typography: typography.get-mat-typography($base-font-size, $font-family);
$palettes: get-mat-palettes($primary-color, $accent-color);
$palettes: custom-theme-palettes.get-mat-palettes($primary-color, $accent-color);
lib/core/custom-theme/theme/typography.scss
+5 -5
View File
@@ -1,6 +1,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
@import '../variables/font-family';
@use 'sass:meta';
@use '../variables/font-family';
@function get-mat-typography($base-font-size, $font-family) {
$custom-typography: mat.m2-define-typography-config(
@@ -16,8 +17,7 @@
$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.
$button: mat.m2-define-typography-level(14px, 14px, 500) // Line-height must be unit-less fraction of the font-size.
);
@if $base-font-size {
@@ -34,14 +34,14 @@
$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: $default-font-family
$font-family: font-family.$default-font-family
);
}
@if $font-family {
@each $key, $level in $custom-typography {
/* stylelint-disable-next-line scss/no-global-function-names */
@if type-of($level) == 'map' {
@if meta.type-of($level) == 'map' {
$new-level: map.merge(
$level,
(
lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss
+2 -2
View File
@@ -1,5 +1,5 @@
/* stylelint-disable no-descending-specificity */
@import '../../../../../../core/src/lib/styles/mixins';
@use '../../../../../../core/src/lib/styles/mixins' as *;
$dynamic-table-font-size: var(--theme-body-1-font-size) !default;
$dynamic-table-header-font-size: var(--theme-caption-font-size) !default;
@@ -65,7 +65,7 @@ dynamic-table-widget .adf-label {
td,
th {
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
padding: 0 $dynamic-table-column-padding 12px;
text-align: center;
&:first-of-type {