From aa867ba70255b958e2bafc49f5533befd182547a Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Thu, 28 May 2020 10:04:53 +0000 Subject: [PATCH] [IMP] website, *: define 17 generic color palettes *: web_editor Those will be shared by all themes. Part of https://github.com/odoo/odoo/pull/52224 task-2197038 closes odoo/odoo#52224 Related: odoo/design-themes#290 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/scss/secondary_variables.scss | 8 +- .../static/src/scss/web_editor.variables.scss | 5 +- .../static/src/scss/primary_variables.scss | 202 ++++++++++++++++++ .../static/src/scss/secondary_variables.scss | 9 +- 4 files changed, 213 insertions(+), 11 deletions(-) diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss index 6d975a1fecd..ad3fae0db28 100644 --- a/addons/web_editor/static/src/scss/secondary_variables.scss +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -4,7 +4,7 @@ //------------------------------------------------------------------------------ // Color combinations -$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default; +$o-color-combinations: if($o-color-combinations-preset-number <= length($o-color-combinations-presets), nth($o-color-combinations-presets, $o-color-combinations-preset-number), ()) !default; $-combination-additions: (); @for $index from 1 through length($o-color-combinations) { $combination: map-merge($o-base-color-combination, nth($o-color-combinations, $index)); @@ -17,13 +17,13 @@ $-combination-additions: (); } // Colors -$o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default; +$o-color-palette: if($o-color-palette-number <= length($o-color-palettes), nth($o-color-palettes, $o-color-palette-number), ()) !default; // Original color palette can contain override of the default combinations (so keep 'null' values for this merge) $o-color-palette: map-merge($-combination-additions, $o-color-palette); $o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette)); // Theme colors -$o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default; +$o-theme-color-palette: if($o-theme-color-palette-number <= length($o-theme-color-palettes), nth($o-theme-color-palettes, $o-theme-color-palette-number), ()) !default; @if not $o-support-13-0-color-system { $o-theme-color-palette: map-remove($o-theme-color-palette, 'alpha', 'beta', 'gamma', 'delta', 'epsilon'); } @@ -46,7 +46,7 @@ $o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-the // Gray colors // Extend grays with transparent ones (for some reason, BS4 create black-50 and // white-50 but does not allow overridding that with variables). -$o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default; +$o-gray-color-palette: if($o-gray-color-palette-number <= length($o-gray-color-palettes), nth($o-gray-color-palettes, $o-gray-color-palette-number), ()) !default; $o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette)); $o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette)); diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 864413a9dd7..b8eb74167cf 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -359,7 +359,6 @@ $o-theme-color-palettes: ( 'delta': #5B899E, 'epsilon': #E46F78, ), - (), ) !default; $o-theme-color-palette-number: 1 !default; @@ -393,9 +392,7 @@ $o-transparent-grays: ( 'white-75': rgba(white, 0.75), 'white-85': rgba(white, 0.85), ) !default; -$o-gray-color-palettes: ( - (), (), -) !default; +$o-gray-color-palettes: () !default; $o-gray-color-palette-number: 1 !default; // Color combinations diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 9c387d884b5..a3c4cbba5dd 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -34,6 +34,208 @@ $o-social-colors: ( $o-theme-figcaption-opacity: 0.6; +$o-theme-generic-color-palettes: ( + ( + 'o-color-1': #984c46, + 'o-color-2': #23323b, + 'o-color-3': #eceae4, + 'o-color-4': #FFFFFF, + 'o-color-5': #16121f, + + 'menu': 3, + 'footer': 3, + ), + ( + 'o-color-1': #B99932, + 'o-color-2': #DED1C1, + 'o-color-3': #F5F5F5, + 'o-color-4': #FFFFFF, + 'o-color-5': #373737, + + 'menu': 5, + 'copyright': 4, + ), + ( + 'o-color-1': #f8882f, + 'o-color-2': #6a7c8f, + 'o-color-3': #fdf8ef, + 'o-color-4': #FFFFFF, + 'o-color-5': #212c39, + ), + ( + 'o-color-1': #6E7993, + 'o-color-2': #96848C, + 'o-color-3': #8F9AA2, + 'o-color-4': #D5D5D5, + 'o-color-5': #313347, + + 'menu': 5, + ), + ( + 'o-color-1': #F7CF41, + 'o-color-2': #1A2930, + 'o-color-3': #989898, + 'o-color-4': #FFFFFF, + 'o-color-5': #0B1612, + + 'menu': 3, + 'footer': 3, + ), + ( + 'o-color-1': #45859A, + 'o-color-2': #B57D4D, + 'o-color-3': #F5F5F5, + 'o-color-4': #FFFFFF, + 'o-color-5': #10273C, + + 'menu': 2, + 'footer': 2, + 'copyright': 5, + ), + ( + 'o-color-1': #1a547a, + 'o-color-2': #ddc76a, + 'o-color-3': #D6E6F1, + 'o-color-4': #FFFFFF, + 'o-color-5': #2b3442, + + 'o-cc5-link': 'o-color-4', + 'o-cc5-text': #9b9ba0, + + 'menu': 5, + 'footer': 5, + 'copyright': 3, + ), + ( + 'o-color-1': #763240, + 'o-color-2': #C19F7F, + 'o-color-3': #FFFFFF, + 'o-color-4': #EAEAEA, + 'o-color-5': #2F2F2F, + + 'o-cc4-headings': 'o-color-3', + 'o-cc4-link': 'o-color-3', + 'o-cc4-text': rgba(#fff, .8), + + 'o-cc5-headings': 'o-color-3', + 'o-cc5-link': 'o-color-3', + 'o-cc5-text': rgba(#fff, .8), + + 'footer': 1, + 'copyright': 4, + ), + ( + 'o-color-1': #4DC5C1, + 'o-color-2': #EC576B, + 'o-color-3': #E5E337, + 'o-color-4': #FFFFFF, + 'o-color-5': #000000, + + 'menu': 5, + ), + ( + 'o-color-1': #b56355, + 'o-color-2': #6ba17a, + 'o-color-3': #ebe6ea, + 'o-color-4': #FFFFFF, + 'o-color-5': #343733, + + 'footer': 2, + ), + ( + 'o-color-1': #01ACAB, + 'o-color-2': #FEDC3D, + 'o-color-3': #FAE8E0, + 'o-color-4': #FFFFFF, + 'o-color-5': #000000, + + 'footer': 1, + ), + ( + 'o-color-1': #926190, + 'o-color-2': #F3E0CD, + 'o-color-3': #F9EFE9, + 'o-color-4': #FFFFFF, + 'o-color-5': #291528, + + 'o-cc4-headings': 'o-color-4', + 'o-cc4-link': 'o-color-4', + 'o-cc4-text': rgba(#fff, .8), + + 'o-cc5-headings': 'o-color-4', + 'o-cc5-link': 'o-color-4', + 'o-cc5-text': rgba(#fff, .6), + ), + ( + 'o-color-1': #478FA2, + 'o-color-2': #CECECE, + 'o-color-3': #E8E9E9, + 'o-color-4': #FFFFFF, + 'o-color-5': #173F54, + + 'footer': 1, + 'copyright': 1, + ), + ( + 'o-color-1': #3CC37C, + 'o-color-2': #E9C893, + 'o-color-3': #F5F5F5, + 'o-color-4': #FFFFFF, + 'o-color-5': #1F3A2A, + + 'footer': 1, + 'copyright': 5, + ), + ( + 'o-color-1': #01524B, + 'o-color-2': #1993A3, + 'o-color-3': #dddde6, + 'o-color-4': #FFFFFF, + 'o-color-5': #011D1B, + + 'o-cc4-btn-primary': 'o-color-4', + 'o-cc4-link': 'o-color-4', + 'o-cc4-text': rgba(#fff, .8), + + 'o-cc5-btn-primary': 'o-color-4', + 'o-cc5-link': 'o-color-4', + 'o-cc5-text': rgba(#fff, .6), + + 'footer': 2, + 'copyright': 5, + ), + ( + 'o-color-1': #464D77, + 'o-color-2': #36827f, + 'o-color-3': #f2f0ec, + 'o-color-4': #FFFFFF, + 'o-color-5': #22263c, + + 'o-cc4-btn-primary': 'o-color-4', + 'o-cc4-link': 'o-color-4', + 'o-cc4-text': rgba(#fff, .8), + + 'o-cc5-btn-primary': 'o-color-4', + 'o-cc5-btn-secondary': #d6d4d0, + 'o-cc5-link': 'o-color-4', + 'o-cc5-text': rgba(#fff, .6), + + 'menu': 2, + 'footer': 2, + 'copyright': 5, + ), + ( + 'o-color-1': #4717f6, + 'o-color-2': #A43ACB, + 'o-color-3': #FAFAFA, + 'o-color-4': #FFFFFF, + 'o-color-5': #0F0A19, + + 'menu': 5, + 'footer': 5, + ), +); + //------------------------------------------------------------------------------ // Website customizations //------------------------------------------------------------------------------ diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index 5fb97a53b82..2b1d2ff8aaa 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -24,7 +24,7 @@ // By default, most website palette values are null. Each null value is // automatically replaced with corresponsing values in chosen default values // palette. -$-website-values-default: nth($o-website-values-palettes, $o-website-values-palette-number); +$-website-values-default: if($o-website-values-palette-number <= length($o-website-values-palettes), nth($o-website-values-palettes, $o-website-values-palette-number), ()); $-actual-user-website-values-palette: map-merge($-website-values-default, o-map-omit($o-user-website-values)); // Default font selection + User font selection have been merged, now need to // add the right associated font config while still forcing any user override @@ -71,10 +71,13 @@ $o-has-customized-colors: // Color palette // ------------- +// Add generic color palettes +$o-color-palettes: join($o-color-palettes, $o-theme-generic-color-palettes); + // By default, most user color palette values are null. Each null value is // automatically replaced with corresponsing colors in chosen default color // palette. -$-palette-default: nth($o-color-palettes, $o-color-palette-number); +$-palette-default: if($o-color-palette-number <= length($o-color-palettes), nth($o-color-palettes, $o-color-palette-number), ()); $-actual-user-color-palette: map-merge($-palette-default, o-map-omit($o-user-color-palette)); $o-color-palettes: append($o-color-palettes, $-actual-user-color-palette); @@ -96,7 +99,7 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha'); // By default, all user theme color palette values are null. Each null value is // automatically replaced with corresponsing colors in chosen default theme // color palette. -$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number); +$-palette-default: if($o-theme-color-palette-number <= length($o-theme-color-palettes), nth($o-theme-color-palettes, $o-theme-color-palette-number), ()); $-actual-user-theme-color-palette: map-merge($-palette-default, o-map-omit($o-user-theme-color-palette)); // Always remove the primary/secondary which were customizable in some theme // in Odoo <= 13.3. The customer can always rechoose the right color in the