pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web_editor: add a function to create odoo palettes

Browse Source 
This commit adds a sass function that, given one or two colors, returns
an odoo palette in sass-map format.

The palette will be generated using the safest values possible, setting
'o-color-4' always  to '#FFF' and shifting predefined colors' HUE to
match the primary color passed to the function.

Overrides (eg. 'menu': 4) are supported trough the '$-overrides-map'
method.

The commit will also allows to customize the "has-enough-contrast"
function threshold. Indeed, prior to this commit, the threshold value
was locked to '500' in order to spot contrast issues against the tiniest
elements (eg. small text).

Using a more forgiving '300' value, for example, allows to verify
readability of a solid button against a bg.

task-2656337

X-original-commit: 61f014a955ed9b9d33e7289c2a8a273a4179b088
Part-of: odoo/odoo#77857
This commit is contained in:
stefanorigano (SRI)
2021-10-05 14:17:48 +00:00
committed by qsm-odoo
parent 48b87b4c7f
commit 0ce66837ae
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/web_editor.variables.scss
+35 -2
View File
@@ -602,12 +602,12 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
// Function which returns if a color has contrast enough in comparaison to
// another given color.
@function has-enough-contrast($color1, $color2) {
@function has-enough-contrast($color1, $color2, $threshold: 500) {
$r: (max(red($color1), red($color2))) - (min(red($color1), red($color2)));
$g: (max(green($color1), green($color2))) - (min(green($color1), green($color2)));
$b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2)));
$sum-rgb: $r + $g + $b;
@return ($sum-rgb >= 500);
@return ($sum-rgb >= $threshold);
}
// Function which transforms a color to increase its contrast in comparison to
@@ -630,6 +630,39 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
@return $color1;
}
// Given a primary color (and eventually a secondary one), the function returns
// a basic odoo palette in sass-map format. The palette will be generated using
// the safest readability values possible.
@function o-make-palette($-primary, $-secondary: null, $-overrides-map: null) {
$-o-color-2: $-secondary or increase-contrast(desaturate(mix(complement($-primary), #FFFFFF, 80%), 20%), $-primary);
$-palette: (
'o-color-1': $-primary,
'o-color-2': $-o-color-2,
'o-color-3': change-color(#F5F0F0, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#F5F0F0))),
'o-color-4': #FFFFFF,
'o-color-5': change-color(#2e1414, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#2e1414))),
);
// Check if primary/dark contrast is enough. If not adapt cc4 & cc5 schemes accordingly
@if not (has-enough-contrast(map-get($-palette, 'o-color-5'), map-get($-palette, 'o-color-1'), 300)) {
@each $-cc in (4, 5) {
$-palette: map-merge($-palette, (
'o-cc#{$-cc}-btn-primary': 'o-color-4',
'o-cc#{$-cc}-btn-secondary': 'o-color-2',
'o-cc#{$-cc}-text': 'o-color-3',
'o-cc#{$-cc}-link': 'o-color-4'
));
}
}
@if $-overrides-map {
$-palette: map-merge($-palette, $-overrides-map);
}
@return $-palette;
}
// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
$o-bg-shapes: ('web_editor': (
'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1)),