mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
[AAE-6822] Customize background and text colors (#2431)
* [AAE-6822] Customize background and text colors * [AAE-6822] Quick fix for search control * Reverted dotenv-expand
This commit is contained in:
parent
3afc4f4859
commit
94755c4756
@ -7,6 +7,10 @@ $top-margin: 12px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
16
app/src/app/ui/dynamic-theme/custom-background-color.scss
Normal file
16
app/src/app/ui/dynamic-theme/custom-background-color.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@function get-custom-backgrond-color($background-color, $theme) {
|
||||
$background: map-get($theme, background);
|
||||
|
||||
$card: map-get($background, card);
|
||||
|
||||
$new-card-color: lighten($background-color, 10%);
|
||||
$new-selected-button: lighten($background-color, 5%);
|
||||
|
||||
$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, (selected-button: $new-selected-button));
|
||||
|
||||
@return $background;
|
||||
}
|
8
app/src/app/ui/dynamic-theme/custom-text-color.scss
Normal file
8
app/src/app/ui/dynamic-theme/custom-text-color.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@function get-custom-text-color($text-color, $theme) {
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
|
||||
$foreground: map_merge($foreground, (text: $text-color));
|
||||
$foreground: map_merge($foreground, (secondary-text: $text-color));
|
||||
|
||||
@return $foreground;
|
||||
}
|
@ -3,9 +3,13 @@
|
||||
@import "./dynamic-theme/theme-configuration";
|
||||
@import "./dynamic-theme/typography";
|
||||
@import "./dynamic-theme/custom-theme-palettes";
|
||||
@import "./dynamic-theme/custom-background-color";
|
||||
@import "./dynamic-theme/custom-text-color";
|
||||
|
||||
$primary-color: map-get($theme-config, 'primary-color');
|
||||
$accent-color: map-get($theme-config, 'accent-color');
|
||||
$background-color: map-get($theme-config, 'background-color');
|
||||
$text-color: map-get($theme-config, 'text-color');
|
||||
$base-font-size: map-get($theme-config, 'base-font-size');
|
||||
$font-family: map-get($theme-config, 'font-family');
|
||||
|
||||
@ -24,6 +28,16 @@ $custom-theme: mat-light-theme(
|
||||
map-get($palettes, warning),
|
||||
);
|
||||
|
||||
@if $background-color {
|
||||
$custom-background: get-custom-backgrond-color($background-color, $custom-theme);
|
||||
$custom-theme: map_merge($custom-theme, (background: $custom-background));
|
||||
}
|
||||
|
||||
@if $text-color {
|
||||
$custom-foreground: get-custom-text-color($text-color, $custom-theme);
|
||||
$custom-theme: map_merge($custom-theme, (foreground: $custom-foreground));
|
||||
}
|
||||
|
||||
@mixin custom-theme($theme) {
|
||||
@include angular-material-theme($theme);
|
||||
|
||||
|
@ -2,11 +2,13 @@
|
||||
Specify theme parameters e.g.:
|
||||
|
||||
$theme-config: (
|
||||
primary-color: #5a9d6b,
|
||||
accent-color: #d14ceb,
|
||||
base-font-size: 20px,
|
||||
font-family: Cursive
|
||||
);
|
||||
primary-color: #5175d2,
|
||||
background-color: #FAFAFA,
|
||||
text-color: #793942,
|
||||
accent-color: #C64F73,
|
||||
base-font-size: 26px,
|
||||
font-family: Cursive
|
||||
);
|
||||
*/
|
||||
|
||||
${THEME_CONFIGURATION}
|
||||
|
6
package-lock.json
generated
6
package-lock.json
generated
@ -7418,9 +7418,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"dotenv-expand": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.1.tgz",
|
||||
"integrity": "sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
|
||||
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
|
||||
"dev": true
|
||||
},
|
||||
"duplexify": {
|
||||
|
@ -87,7 +87,7 @@
|
||||
"connect-history-api-fallback": "^1.6.0",
|
||||
"cspell": "^5.16.0",
|
||||
"dotenv": "8.2.0",
|
||||
"dotenv-expand": "8.0.1",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"envsub": "^4.0.7",
|
||||
"eslint": "^7.6.0",
|
||||
"eslint-plugin-import": "^2.25.4",
|
||||
|
Loading…
x
Reference in New Issue
Block a user