[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:
Bartosz Sekuła 2022-02-15 09:23:20 +01:00 committed by GitHub
parent 3afc4f4859
commit 94755c4756
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 53 additions and 9 deletions

View File

@ -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;
}

View 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;
}

View 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;
}

View File

@ -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);

View File

@ -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
View File

@ -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": {

View File

@ -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",