From 3fc59b235849eaa2a134d518a9cba631f681738d Mon Sep 17 00:00:00 2001 From: Ehsan Rezaei Date: Tue, 5 May 2026 10:33:09 +0200 Subject: [PATCH] AAE-45216 Removing custom theme from core (#11862) * AAE-45216 Removing custom theme from core * AAE-45216 Removing custom theme from assets --- lib/core/custom-theme/README.md | 3 - lib/core/custom-theme/material-theme.scss | 36 ---- .../theme/custom-background-color.scss | 27 --- .../theme/custom-palette-creator.scss | 154 ------------------ .../custom-theme/theme/custom-text-color.scss | 17 -- .../theme/custom-theme-palettes.scss | 27 --- .../custom-theme/theme/default-colors.scss | 26 --- .../theme/theme-configuration.scss.tpl | 20 --- lib/core/custom-theme/theme/theme-data.scss | 18 -- lib/core/custom-theme/theme/typography.scss | 78 --------- .../custom-theme/variables/font-family.scss | 1 - lib/core/ng-package.json | 5 - 12 files changed, 412 deletions(-) delete mode 100644 lib/core/custom-theme/README.md delete mode 100644 lib/core/custom-theme/material-theme.scss delete mode 100644 lib/core/custom-theme/theme/custom-background-color.scss delete mode 100644 lib/core/custom-theme/theme/custom-palette-creator.scss delete mode 100644 lib/core/custom-theme/theme/custom-text-color.scss delete mode 100644 lib/core/custom-theme/theme/custom-theme-palettes.scss delete mode 100644 lib/core/custom-theme/theme/default-colors.scss delete mode 100644 lib/core/custom-theme/theme/theme-configuration.scss.tpl delete mode 100644 lib/core/custom-theme/theme/theme-data.scss delete mode 100644 lib/core/custom-theme/theme/typography.scss delete mode 100644 lib/core/custom-theme/variables/font-family.scss diff --git a/lib/core/custom-theme/README.md b/lib/core/custom-theme/README.md deleted file mode 100644 index d145bb275a..0000000000 --- a/lib/core/custom-theme/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# 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). diff --git a/lib/core/custom-theme/material-theme.scss b/lib/core/custom-theme/material-theme.scss deleted file mode 100644 index a791d7945a..0000000000 --- a/lib/core/custom-theme/material-theme.scss +++ /dev/null @@ -1,36 +0,0 @@ -@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 { - font-size: theme.$base-font-size; - } -} - -@if theme.$font-family { - body, - html { - font-family: theme.$font-family; - } -} diff --git a/lib/core/custom-theme/theme/custom-background-color.scss b/lib/core/custom-theme/theme/custom-background-color.scss deleted file mode 100644 index 96b6118fd7..0000000000 --- a/lib/core/custom-theme/theme/custom-background-color.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:map'; -@use 'sass:color'; - -@function get-custom-background-color($background-color, $theme) { - $background: map.get($theme, background); - $card: map.get($background, card); - - $new-card-color: color.adjust($background-color, $lightness: 10%); - $new-app-bar: color.adjust($background-color, $lightness: 5%); - $new-selected-button: color.adjust($background-color, $lightness: 7%); - - $background: map.merge($background, (background: $background-color)); - $background: map.merge($background, (card: $new-card-color)); - $background: map.merge($background, (modal: $new-card-color)); - $background: map.merge($background, (dialog: $new-card-color)); - $background: map.merge($background, (app-bar: $new-app-bar)); - $background: map.merge($background, (selected-button: $new-selected-button)); - - $theme-with-new-background: map.merge($theme, (background: $background)); - - $theme-color: map.get($theme-with-new-background, color); - $theme-color-background: map.merge($theme-color, (background: $background)); - - $theme-with-new-background: map.merge($theme-with-new-background, (color: $theme-color-background)); - - @return $theme-with-new-background; -} diff --git a/lib/core/custom-theme/theme/custom-palette-creator.scss b/lib/core/custom-theme/theme/custom-palette-creator.scss deleted file mode 100644 index 5a77dac366..0000000000 --- a/lib/core/custom-theme/theme/custom-palette-creator.scss +++ /dev/null @@ -1,154 +0,0 @@ -@use 'sass:map'; -@use 'sass:math'; -@use 'sass:color'; -@use '@angular/material' as mat; - -@function multiply($fore, $back) { - $red: math.div(color.red($back) * color.red($fore), 255); - $green: math.div(color.green($back) * color.green($fore), 255); - $blue: math.div(color.blue($back) * color.blue($fore), 255); - - @return rgb($red, $green, $blue); -} - -@function get-color-luminance($color) { - $colors: ( - red: color.red($color), - green: color.green($color), - blue: color.blue($color) - ); - - @each $name, $value in $colors { - $adjusted: 0; - $value: math.div($value, 255); - - @if ($value < 0.0393) { - $value: math.div($value, 12.92); - } @else { - $value: math.div($value + 0.055, 1.055); - $value: math.pow($value, 2.4); - } - - $colors: map.merge( - $colors, - ( - $name: $value - ) - ); - } - - @return (map.get($colors, red) * 0.2126) + (map.get($colors, green) * 0.7152) + (map.get($colors, blue) * 0.0722); -} - -@function create-text-color($color, $colorType: 'primary') { - $red: color.red($color); - $green: color.green($color); - $blue: color.blue($color); - - $light-text: map.get(mat.$light-theme-foreground-palette, text); - $light-secondary-text: map.get(mat.$light-theme-foreground-palette, secondary-text); - - $dark-text: map.get(mat.$dark-theme-foreground-palette, text); - $dark-secondary-text: map.get(mat.$dark-theme-foreground-palette, secondary-text); - - @if $colorType == 'accent' { - $light-text: $light-secondary-text; - $dark-text: $dark-secondary-text; - } - - $light-text-luminance: get-color-luminance($light-text); - $dark-text-luminance: get-color-luminance($dark-text); - $background-color-luminance: get-color-luminance($color); - - $light-text-luminance: $light-text-luminance + 0.5; - $dark-text-luminance: $dark-text-luminance + 0.5; - $background-color-luminance: $background-color-luminance + 0.5; - - $luminance-contrast-for-light-text: math.div($light-text-luminance, $background-color-luminance); - $luminance-contrast-for-dark-text: math.div($background-color-luminance, $dark-text-luminance); - $text-colour: $light-text; - - @if $luminance-contrast-for-dark-text > $luminance-contrast-for-light-text { - $text-colour: $dark-text; - } - - @return $text-colour; -} - -@function create-color-palette($color, $colorType: 'primary') { - $light: #fff; - $dark: multiply($color, $color); - - $color50: color.mix($light, $color, 88%); - $color100: color.mix($light, $color, 70%); - $color200: color.mix($light, $color, 65%); - $color300: color.mix($light, $color, 60%); - $color400: color.mix($light, $color, 15%); - $color500: color.mix($light, $color, 0%); - $color600: color.mix($dark, $color, 13%); - $color700: color.mix($dark, $color, 30%); - $color800: color.mix($dark, $color, 46%); - $color900: color.mix($dark, $color, 75%); - - /* stylelint-disable scss/dollar-variable-pattern */ - $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); - $contrast100: create-text-color($color100, $colorType); - $contrast200: create-text-color($color200, $colorType); - $contrast300: create-text-color($color300, $colorType); - $contrast400: create-text-color($color400, $colorType); - $contrast500: create-text-color($color500, $colorType); - $contrast600: create-text-color($color600, $colorType); - $contrast700: create-text-color($color700, $colorType); - $contrast800: create-text-color($color800, $colorType); - $contrast900: create-text-color($color900, $colorType); - - /* stylelint-disable scss/dollar-variable-pattern */ - $contrastA100: create-text-color($colorA100, $colorType); - $contrastA200: create-text-color($colorA200, $colorType); - $contrastA400: create-text-color($colorA400, $colorType); - $contrastA700: create-text-color($colorA700, $colorType); - /* stylelint-enable scss/dollar-variable-pattern */ - - $palette: ( - 50: $color50, - 100: $color100, - 200: $color200, - 300: $color300, - 400: $color400, - 500: $color500, - 600: $color600, - 700: $color700, - 800: $color800, - 900: $color900, - /* 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 */ - ) - ); - - @return $palette; -} diff --git a/lib/core/custom-theme/theme/custom-text-color.scss b/lib/core/custom-theme/theme/custom-text-color.scss deleted file mode 100644 index becd6fecdc..0000000000 --- a/lib/core/custom-theme/theme/custom-text-color.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use 'sass:map'; - -@function get-custom-text-color($text-color, $theme) { - $foreground: map.get($theme, foreground); - - $foreground: map.merge($foreground, (text: $text-color)); - $foreground: map.merge($foreground, (secondary-text: $text-color)); - - $theme-with-new-foreground: map.merge($theme, (foreground: $foreground)); - - $theme-foreground-color: map.get($theme-with-new-foreground, color); - $theme-color-foreground: map.merge($theme-foreground-color, (foreground: $foreground)); - - $theme-with-new-foreground: map.merge($theme-with-new-foreground, (color: $theme-color-foreground)); - - @return $theme-with-new-foreground; -} diff --git a/lib/core/custom-theme/theme/custom-theme-palettes.scss b/lib/core/custom-theme/theme/custom-theme-palettes.scss deleted file mode 100644 index bcca3b6ba8..0000000000 --- a/lib/core/custom-theme/theme/custom-theme-palettes.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use '@angular/material' as mat; -@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: 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); - } - - $mat-accent-palette: null; - - @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); - } - - $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/default-colors.scss b/lib/core/custom-theme/theme/default-colors.scss deleted file mode 100644 index 07731745cd..0000000000 --- a/lib/core/custom-theme/theme/default-colors.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* - 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; diff --git a/lib/core/custom-theme/theme/theme-configuration.scss.tpl b/lib/core/custom-theme/theme/theme-configuration.scss.tpl deleted file mode 100644 index b7d578ce03..0000000000 --- a/lib/core/custom-theme/theme/theme-configuration.scss.tpl +++ /dev/null @@ -1,20 +0,0 @@ -/* - 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 - - e.g. - - $theme-config: ( - primaryColor: #5175d2, - backgroundColor: #FAFAFA, - textColor: #793942, - accentColor: #C64F73, - baseFontSize: 26px, - fontFamily: Cursive - ); -*/ - -${THEME_CONFIGURATION} diff --git a/lib/core/custom-theme/theme/theme-data.scss b/lib/core/custom-theme/theme/theme-data.scss deleted file mode 100644 index 07ccb77120..0000000000 --- a/lib/core/custom-theme/theme/theme-data.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use 'sass:map'; -@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); diff --git a/lib/core/custom-theme/theme/typography.scss b/lib/core/custom-theme/theme/typography.scss deleted file mode 100644 index 5490bf4339..0000000000 --- a/lib/core/custom-theme/theme/typography.scss +++ /dev/null @@ -1,78 +0,0 @@ -@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. - ); - - @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 - ); - } - - @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 - ) - ); - } - - @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 - ); -} diff --git a/lib/core/custom-theme/variables/font-family.scss b/lib/core/custom-theme/variables/font-family.scss deleted file mode 100644 index 5d03830b89..0000000000 --- a/lib/core/custom-theme/variables/font-family.scss +++ /dev/null @@ -1 +0,0 @@ -$default-font-family: 'Open Sans'; diff --git a/lib/core/ng-package.json b/lib/core/ng-package.json index 2de872955e..761244a6c4 100644 --- a/lib/core/ng-package.json +++ b/lib/core/ng-package.json @@ -7,11 +7,6 @@ "input": "./assets/pdfjs", "output": "assets/pdfjs" }, - { - "glob": "custom-theme/**/*", - "input": "./", - "output": "/" - }, { "glob": "assets/**/*", "input": "./src/lib",