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

AAE-45216 Removing custom theme from core (#11862)

Browse Source 
* AAE-45216 Removing custom theme from core

* AAE-45216 Removing custom theme from assets
This commit is contained in:
Ehsan Rezaei
2026-05-05 10:33:09 +02:00
committed by GitHub
parent d7487e30bd
commit 3fc59b2358
12 changed files with 0 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/custom-theme/README.md
-3
View File
@@ -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).
lib/core/custom-theme/material-theme.scss
-36
View File
@@ -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;
}
}
lib/core/custom-theme/theme/custom-background-color.scss
-27
View File
@@ -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;
}
lib/core/custom-theme/theme/custom-palette-creator.scss
-154
View File
@@ -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;
}
lib/core/custom-theme/theme/custom-text-color.scss
-17
View File
@@ -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;
}
lib/core/custom-theme/theme/custom-theme-palettes.scss
-27
View File
@@ -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);
}
lib/core/custom-theme/theme/default-colors.scss
-26
View File
@@ -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;
lib/core/custom-theme/theme/theme-configuration.scss.tpl
-20
View File
@@ -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}
lib/core/custom-theme/theme/theme-data.scss
-18
View File
@@ -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);
lib/core/custom-theme/theme/typography.scss
-78
View File
@@ -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
);
}
lib/core/custom-theme/variables/font-family.scss
-1
View File
@@ -1 +0,0 @@
$default-font-family: 'Open Sans';
lib/core/ng-package.json
-5
View File
@@ -7,11 +7,6 @@
"input": "./assets/pdfjs",
"output": "assets/pdfjs"
},
{
"glob": "custom-theme/**/*",
"input": "./",
"output": "/"
},
{
"glob": "assets/**/*",
"input": "./src/lib",