mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-26 17:24:45 +00:00
[AAE-6826] Create SCSS template (#2385)
* [AAE-6826] Create SCSS template * [AAE-6826] Revert proper name for colours vars.
This commit is contained in:
Bartosz Sekuła
GitHub
parent
e8d4cba4b1
commit
0ba1e1606e
@ -25,11 +25,11 @@
|
||||
|
||||
&:not(.app-create-menu-secondary-button) {
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
margin-top: 0px;
|
||||
|
||||
.mat-icon {
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
}
|
||||
|
||||
.main-action-menu-icon {
|
||||
|
||||
6
app/src/app/ui/custom-theme-palettes.scss
Normal file
6
app/src/app/ui/custom-theme-palettes.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@use '~@angular/material/theming';
|
||||
@import './colors';
|
||||
|
||||
$mat-primary-palette: mat-palette($aca-primary-blue, A100);
|
||||
$mat-accent-palette: mat-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat-palette($aca-warn, A100);
|
||||
@ -1,13 +1,15 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import './overrides/adf-style-fixes.theme';
|
||||
@import 'colors';
|
||||
@import './custom-theme-palettes';
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$custom-theme-primary: mat-palette($aca-primary-blue, A100);
|
||||
$custom-theme-accent: mat-palette($aca-accent-green, A200);
|
||||
$custom-theme-warn: mat-palette($aca-warn, A100);
|
||||
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
|
||||
$custom-theme: mat-light-theme(
|
||||
$mat-primary-palette,
|
||||
$mat-accent-palette,
|
||||
$mat-warn-palette
|
||||
);
|
||||
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
$background: map-get($custom-theme, background);
|
||||
$warn: map-get($custom-theme, warn);
|
||||
|
||||
138
app/src/app/ui/dynamic-theme/custom-palette-creator.scss
Normal file
138
app/src/app/ui/dynamic-theme/custom-palette-creator.scss
Normal file
@ -0,0 +1,138 @@
|
||||
@import '~sass-math-pow/sass/index';
|
||||
|
||||
@function multiply($fore, $back) {
|
||||
$red: red($back) * red($fore) / 255;
|
||||
$green: green($back) * green($fore) / 255;
|
||||
$blue: blue($back) * blue($fore) / 255;
|
||||
|
||||
@return rgb($red, $green, $blue);
|
||||
}
|
||||
|
||||
@function getColorLuminance($color) {
|
||||
$colors: (
|
||||
'red': red($color),
|
||||
'green': green($color),
|
||||
'blue': blue($color)
|
||||
);
|
||||
|
||||
@each $name, $value in $colors {
|
||||
$adjusted: 0;
|
||||
$value: $value / 255;
|
||||
|
||||
@if $value < 0.03928 {
|
||||
$value: $value / 12.92;
|
||||
} @else {
|
||||
$value: ($value + .055) / 1.055;
|
||||
$value: poly-pow($value, 2.4);
|
||||
}
|
||||
|
||||
$colors: map-merge($colors, ($name: $value));
|
||||
}
|
||||
|
||||
@return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
|
||||
}
|
||||
|
||||
@function createTextColor($color, $colorType: 'primary') {
|
||||
$red: red($color);
|
||||
$green: green($color);
|
||||
$blue: blue($color);
|
||||
|
||||
$lightText: $light-primary-text;
|
||||
$darkText: $dark-primary-text;
|
||||
|
||||
@if ($colorType == 'accent') {
|
||||
$lightText: $light-secondary-text;
|
||||
$darkText: $dark-secondary-text;
|
||||
}
|
||||
|
||||
$lightTextLuminance: getColorLuminance($lightText);
|
||||
$darkTextLuminance: getColorLuminance($darkText);
|
||||
$backgroundColorLuminance: getColorLuminance($color);
|
||||
|
||||
$lightTextLuminance: $lightTextLuminance + 0.5;
|
||||
$darkTextLuminance: $darkTextLuminance + 0.5;
|
||||
$backgroundColorLuminance: $backgroundColorLuminance + 0.5;
|
||||
|
||||
$luminanceContrastForLightText: $lightTextLuminance / $backgroundColorLuminance;
|
||||
$luminanceContrastForDarkText: $backgroundColorLuminance / $darkTextLuminance;
|
||||
|
||||
$textColour: $lightText;
|
||||
|
||||
@if ($luminanceContrastForDarkText > $luminanceContrastForLightText) {
|
||||
$textColour: $darkText;
|
||||
}
|
||||
|
||||
@return $textColour;
|
||||
}
|
||||
|
||||
@function createColorPalette($color, $colorType: 'primary') {
|
||||
$light: #fff;
|
||||
$dark: multiply($color, $color);
|
||||
|
||||
$color50: mix($light, $color, 88%);
|
||||
$color100: mix($light, $color, 70%);
|
||||
$color200: mix($light, $color, 50%);
|
||||
$color300: mix($light, $color, 30%);
|
||||
$color400: mix($light, $color, 15%);
|
||||
$color500: mix($light, $color, 0%);
|
||||
$color600: mix($dark, $color, 13%);
|
||||
$color700: mix($dark, $color, 30%);
|
||||
$color800: mix($dark, $color, 46%);
|
||||
$color900: mix($dark, $color, 75%);
|
||||
|
||||
$colorA100: lighten(saturate(mix($dark, $color, 15%), 80%), 45.6%);
|
||||
$colorA200: lighten(saturate(mix($dark, $color, 15%), 80%), 35.6%);
|
||||
$colorA400: lighten(saturate(mix($dark, $color, 15%), 100%), 25.6%);
|
||||
$colorA700: lighten(saturate(mix($dark, $color, 15%), 100%), 20.5%);
|
||||
|
||||
$contrast50: createTextColor($color50, $colorType);
|
||||
$contrast100: createTextColor($color100, $colorType);
|
||||
$contrast200: createTextColor($color200, $colorType);
|
||||
$contrast300: createTextColor($color300, $colorType);
|
||||
$contrast400: createTextColor($color400, $colorType);
|
||||
$contrast500: createTextColor($color500, $colorType);
|
||||
$contrast600: createTextColor($color600, $colorType);
|
||||
$contrast700: createTextColor($color700, $colorType);
|
||||
$contrast800: createTextColor($color800, $colorType);
|
||||
$contrast900: createTextColor($color900, $colorType);
|
||||
|
||||
$contrastA100: createTextColor($colorA100, $colorType);
|
||||
$contrastA200: createTextColor($colorA200, $colorType);
|
||||
$contrastA400: createTextColor($colorA400, $colorType);
|
||||
$contrastA700: createTextColor($colorA700, $colorType);
|
||||
|
||||
$palette: (
|
||||
50: $color50,
|
||||
100: $color50,
|
||||
200: $color50,
|
||||
300: $color50,
|
||||
400: $color400,
|
||||
500: $color500,
|
||||
600: $color600,
|
||||
700: $color700,
|
||||
800: $color800,
|
||||
900: $color900,
|
||||
A100: $colorA100,
|
||||
A200: $colorA200,
|
||||
A400: $colorA400,
|
||||
A700: $colorA700,
|
||||
contrast: (
|
||||
50: $contrast50,
|
||||
100: $contrast100,
|
||||
200: $contrast200,
|
||||
300: $contrast300,
|
||||
400: $contrast400,
|
||||
500: $contrast500,
|
||||
600: $contrast600,
|
||||
700: $contrast700,
|
||||
800: $contrast800,
|
||||
900: $contrast900,
|
||||
A100: $contrastA100,
|
||||
A200: $contrastA200,
|
||||
A400: $contrastA400,
|
||||
A700: $contrastA700
|
||||
)
|
||||
);
|
||||
|
||||
@return $palette;
|
||||
}
|
||||
12
app/src/app/ui/dynamic-theme/custom-theme-palettes.scss.tpl
Normal file
12
app/src/app/ui/dynamic-theme/custom-theme-palettes.scss.tpl
Normal file
@ -0,0 +1,12 @@
|
||||
@import './colors';
|
||||
@import './dynamic-theme/custom-palette-creator.scss';
|
||||
|
||||
$primary: ${PRIMARY_COLOR};
|
||||
$accent: ${ACCENT_COLOR};
|
||||
|
||||
$custom-theme-primary-palette: createColorPalette($primary, 'primary');
|
||||
$custom-theme-accent-palette: createColorPalette($accent, 'accent');
|
||||
|
||||
$mat-primary-palette: mat-palette($custom-theme-primary-palette, 500);
|
||||
$mat-accent-palette: mat-palette($custom-theme-accent-palette, 500);
|
||||
$mat-warn-palette: mat-palette($aca-warn, A100);
|
||||
3
app/src/app/ui/dynamic-theme/index.scss
Normal file
3
app/src/app/ui/dynamic-theme/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@use '~@angular/material/theming';
|
||||
|
||||
@import '../theme.scss';
|
||||
Loading…
x
Reference in New Issue
Block a user