From 43622266cee3bd93e4bd28df8ce53bd36f7e0c0f Mon Sep 17 00:00:00 2001 From: Amedeo Lepore Date: Fri, 7 Nov 2025 10:28:26 +0100 Subject: [PATCH] AAE-21565 Replace deprecated @import with @use in all scss files (#11273) --- lib/core/custom-theme/material-theme.scss | 26 +++++----- .../theme/custom-palette-creator.scss | 48 +++++++++---------- .../theme/custom-theme-palettes.scss | 14 +++--- lib/core/custom-theme/theme/theme-data.scss | 26 +++++----- lib/core/custom-theme/theme/typography.scss | 10 ++-- .../dynamic-table/dynamic-table.widget.scss | 4 +- 6 files changed, 63 insertions(+), 65 deletions(-) diff --git a/lib/core/custom-theme/material-theme.scss b/lib/core/custom-theme/material-theme.scss index 9ca4089f63..a791d7945a 100644 --- a/lib/core/custom-theme/material-theme.scss +++ b/lib/core/custom-theme/material-theme.scss @@ -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; } } diff --git a/lib/core/custom-theme/theme/custom-palette-creator.scss b/lib/core/custom-theme/theme/custom-palette-creator.scss index ed815e3870..c9aec44caf 100644 --- a/lib/core/custom-theme/theme/custom-palette-creator.scss +++ b/lib/core/custom-theme/theme/custom-palette-creator.scss @@ -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; diff --git a/lib/core/custom-theme/theme/custom-theme-palettes.scss b/lib/core/custom-theme/theme/custom-theme-palettes.scss index b6de55c2b3..bcca3b6ba8 100644 --- a/lib/core/custom-theme/theme/custom-theme-palettes.scss +++ b/lib/core/custom-theme/theme/custom-theme-palettes.scss @@ -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); } diff --git a/lib/core/custom-theme/theme/theme-data.scss b/lib/core/custom-theme/theme/theme-data.scss index f6b79f69ee..07ccb77120 100644 --- a/lib/core/custom-theme/theme/theme-data.scss +++ b/lib/core/custom-theme/theme/theme-data.scss @@ -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); diff --git a/lib/core/custom-theme/theme/typography.scss b/lib/core/custom-theme/theme/typography.scss index 996ac64965..5490bf4339 100644 --- a/lib/core/custom-theme/theme/typography.scss +++ b/lib/core/custom-theme/theme/typography.scss @@ -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, ( diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss b/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss index dcd750693f..46e4503d1d 100644 --- a/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss +++ b/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss @@ -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 {