diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 4f6d677a1cb..6bf55bb787a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -101,7 +101,7 @@ const ColorPaletteWidget = Widget.extend({
}
// Compute class colors
- const compatibilityColorNames = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
+ const compatibilityColorNames = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger'];
this.colorNames = [...compatibilityColorNames];
this.colorToColorNames = {};
this.el.querySelectorAll('button[data-color]').forEach(elem => {
diff --git a/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss
new file mode 100644
index 00000000000..4fb5d42c0da
--- /dev/null
+++ b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss
@@ -0,0 +1 @@
+$o-support-13-0-color-system: true;
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index 142cf2438d9..6d975a1fecd 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -24,13 +24,16 @@ $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;
-$-main-color: map-get($o-theme-color-palette, 'alpha');
+@if not $o-support-13-0-color-system {
+ $o-theme-color-palette: map-remove($o-theme-color-palette, 'alpha', 'beta', 'gamma', 'delta', 'epsilon');
+}
+$-main-color: map-get($o-color-palette, 'o-color-1');
$-main-color-lightness: lightness($-main-color);
$o-theme-color-palette: map-merge((
- // alpha and beta colors are used to override primary and secondary BS4
+ // color 1 and 2 are used to override primary and secondary BS4
// colors by default, so that theme colors affect the default Odoo layouts
'primary': $-main-color,
- 'secondary': map-get($o-theme-color-palette, 'beta'),
+ 'secondary': map-get($o-color-palette, 'o-color-2'),
// BS light and dark colors are not used for any BS component, just
// for color utilities. By default, we set them to a very light and
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index c0355ff6d9c..370baed9db9 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -42,24 +42,6 @@
}
}
-// FIX (to improve in next versions)
-// ---------------------------------
-// The web_editor.colorpicker defines a series of color buttons which toggle the bg-* and text-* classes.
-// The problem is that themes can define new buttons whose bg-* and text-* classes only exist in the frontend.
-// So these buttons should not be displayed in the backend. Only solution for the current implementation is
-// to add this ugly rule (in this backend file) which hides every button and redisplayed the default ones.
-.note-editor {
- .colorpicker .o_colorpicker_section > button {
- display: none;
-
- &[data-color="alpha"], &[data-color="beta"], &[data-color="gamma"], &[data-color="delta"], &[data-color="epsilon"],
- &[data-color="white"], &[data-color="gray-lighter"], &[data-color="gray-light"], &[data-color="gray"], &[data-color="gray-dark"], &[data-color="gray-darker"], &[data-color="black"],
- &[data-color="primary"], &[data-color="success"], &[data-color="info"], &[data-color="warning"], &[data-color="danger"] {
- display: block;
- }
- }
-}
-
.o_field_widgetTextHtml_fullscreen {
.oe_form_field_html.o_form_fullscreen_ancestor iframe {
position: absolute !important;
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 89fde8cba22..0eb6ee9fd1b 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -641,3 +641,12 @@ blockquote {
}
}
}
+
+// Extend bootstrap to create background and text utilities for some colors
+// outside of the $theme-colors too (but not btn-, alert-, etc).
+@for $index from 1 through 5 {
+ $-color-name: 'o-color-#{$index}';
+ $-color: color($-color-name);
+ @include bg-variant(".bg-#{$-color-name}", $-color);
+ @include text-emphasis-variant(".text-#{$-color-name}", $-color);
+}
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 3be0284d254..ab240268f62 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,6 +2,8 @@
/// This files regroups the variables and mixins which are specific to the editor.
///
+$o-support-13-0-color-system: false !default;
+
$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$o-we-font-size: 13px;
@@ -310,21 +312,37 @@ $o-we-toolbar-height: 32px;
// palette once selected to ensure it works.
// Colors
-$o-base-color-palette: () !default;
+$o-base-color-palette: (
+ 'o-color-1': transparent,
+ 'o-color-2': transparent,
+ 'o-color-3': transparent,
+ 'o-color-4': transparent,
+ 'o-color-5': transparent,
+) !default;
$o-color-palettes: (
- (),
+ (
+ 'o-color-1': $o-enterprise-primary-color,
+ 'o-color-2': $o-enterprise-color,
+ 'o-color-3': #F6F6F6,
+ 'o-color-4': #FFFFFF,
+ 'o-color-5': #383E45,
+ ),
+ (
+ 'o-color-1': #337ab7,
+ 'o-color-2': #e9ecef,
+ 'o-color-3': #F8F9FA,
+ 'o-color-4': #FFFFFF,
+ 'o-color-5': #343a40,
+ ),
) !default;
$o-color-palette-number: 1 !default;
// Theme colors
-$o-base-theme-color-palette: (
- 'alpha': white,
- 'beta': white,
- 'gamma': white,
- 'delta': white,
- 'epsilon': white,
-) !default;
+$o-base-theme-color-palette: () !default;
$o-theme-color-palettes: (
+ // alpha -> epsilon are old color names kept for compatibility.
+ // They should not be used in the code base anymore and ideally they will
+ // not generate any classes for >= 13.4 databases.
(
'alpha': $o-enterprise-primary-color,
'beta': $o-enterprise-color,
@@ -332,6 +350,7 @@ $o-theme-color-palettes: (
'delta': #5B899E,
'epsilon': #E46F78,
),
+ (),
) !default;
$o-theme-color-palette-number: 1 !default;
@@ -366,7 +385,7 @@ $o-transparent-grays: (
'white-85': rgba(white, 0.85),
) !default;
$o-gray-color-palettes: (
- (),
+ (), (),
) !default;
$o-gray-color-palette-number: 1 !default;
@@ -389,26 +408,26 @@ $o-base-color-combination: (
$o-color-combinations-presets: (
(
(
- // See $o-base-color-combination
+ 'bg': 'o-color-4',
),
(
- 'bg': 'gamma',
- 'headings': 'alpha',
+ 'bg': 'o-color-3',
+ 'headings': 'o-color-1',
),
(
- 'bg': 'beta',
- 'btn-secondary': 'gamma',
+ 'bg': 'o-color-2',
+ 'btn-secondary': 'o-color-3',
),
(
- 'bg': 'alpha',
- 'link': 'epsilon',
- 'btn-primary': 'epsilon',
- 'btn-secondary': 'gamma',
+ 'bg': 'o-color-1',
+ 'link': 'o-color-5',
+ 'btn-primary': 'o-color-5',
+ 'btn-secondary': 'o-color-3',
),
(
- 'bg': 'epsilon',
- 'headings': 'delta',
- 'btn-secondary': 'gamma',
+ 'bg': 'o-color-5',
+ 'headings': 'o-color-4',
+ 'btn-secondary': 'o-color-3',
),
),
) !default;
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index d1e83c32393..eb62efa8a48 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -227,10 +227,10 @@ QUnit.module('web_editor', {}, function () {
// text is selected
await openColorpicker('.note-toolbar .note-back-color-preview');
- await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-gamma'));
+ await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-o-color-3'));
assert.strictEqual($field.find('.note-editable').html(),
- '
toto toto toto
tata
',
+ '
toto toto toto
tata
',
"should have rendered the field correctly in edit");
form.destroy();
@@ -361,7 +361,7 @@ QUnit.module('web_editor', {}, function () {
mockRPC: function (route, args) {
if (args.method === "write") {
assert.strictEqual(args.args[1].body,
- '
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5bde2b6d1c8..b1e98e1b874 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -618,16 +618,22 @@ options.registry.Theme = options.Class.extend({
* @override
*/
start: async function () {
- // The normal configuration of Odoo is to have two colors named 'alpha'
- // and 'beta' which generate their own BS CSS classes but which are also
- // used as 'primary' and 'secondary' BS values (to customize standard BS
- // used in Odoo). However, some themes are still going against that
- // system and do not link alpha-primary and beta-secondary at all.
+ // Checks for support of the old color system
const style = window.getComputedStyle(document.documentElement);
- this._alphaEqualsPrimary = style.getPropertyValue('--is-alpha-primary').trim() == 'true';
- this._betaEqualsSecondary = style.getPropertyValue('--is-beta-secondary').trim() == 'true';
+ const supportOldColorSystem = style.getPropertyValue('--support-13-0-color-system').trim() === 'true';
+ const hasCustomizedOldColorSystem = style.getPropertyValue('--has-customized-13-0-color-system').trim() === 'true';
+ this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem;
+
return this._super(...arguments);
},
+ /**
+ * @override
+ */
+ updateUIVisibility: async function () {
+ await this._super(...arguments);
+ const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning');
+ oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning);
+ },
//--------------------------------------------------------------------------
// Options
@@ -776,18 +782,6 @@ options.registry.Theme = options.Class.extend({
if (widgetName === 'theme_color_suggestions') {
return false;
}
- if (widgetName === 'primary_color_opt' || widgetName === 'alpha_as_extra_color_opt') {
- return !this._alphaEqualsPrimary;
- }
- if (widgetName === 'secondary_color_opt' || widgetName === 'beta_as_extra_color_opt') {
- return !this._betaEqualsSecondary;
- }
- if (widgetName === 'alpha_as_primary_color_opt') {
- return this._alphaEqualsPrimary;
- }
- if (widgetName === 'beta_as_secondary_color_opt') {
- return this._betaEqualsSecondary;
- }
return this._super(...arguments);
},
/**
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index a6292647ba6..37851eb576e 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -44,6 +44,15 @@ $o-website-values: map-merge($o-base-website-values-palette, o-map-omit($o-websi
// Colors
//------------------------------------------------------------------------------
+$o-has-customized-13-0-color-system:
+ not not (map-get($o-user-theme-color-palette, 'primary')
+ or map-get($o-user-theme-color-palette, 'secondary')
+ or map-get($o-user-theme-color-palette, 'alpha')
+ or map-get($o-user-theme-color-palette, 'beta')
+ or map-get($o-user-theme-color-palette, 'gamma')
+ or map-get($o-user-theme-color-palette, 'delta')
+ or map-get($o-user-theme-color-palette, 'epsilon'));
+
// Color palette
// -------------
@@ -57,14 +66,8 @@ $o-color-palettes: append($o-color-palettes, $-actual-user-color-palette);
// Theme color palette
// -------------------
-// Proper themes have to enforce primary = alpha and secondary = beta.
-// Exceptions to this rule are made for compatibility reasons
-$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
-
-// Generate default theme color scheme if alpha is set
-$-is-alpha-primary: not map-has-key($-palette-default, 'primary');
-$-is-beta-secondary: not map-has-key($-palette-default, 'secondary');
-
+// alpha -> epsilon colors are from the old color system, this is kept for
+// compatibility: Generate default theme color scheme if alpha is set
$-alpha: map-get($o-user-theme-color-palette, 'alpha');
@if ($-alpha) {
$o-user-theme-color-palette: map-merge((
@@ -78,7 +81,15 @@ $-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);
$-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
+// Odoo color system as the first two ones are mapped to primary/secondary.
+$-actual-user-theme-color-palette: map-remove($-actual-user-theme-color-palette,
+ 'primary',
+ 'secondary'
+);
$o-theme-color-palettes: append($o-theme-color-palettes, $-actual-user-theme-color-palette);
// ---
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 78334459a4d..bf2e0b01353 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -25,9 +25,8 @@ $-font-numbers: (
// customized by themes, the user or anything else (so there is no file to
// parse to get them). Those will be printed here as CSS variables.
- // 0) does this theme enforce primary = alpha or secondary = beta
- --is-alpha-primary: #{$-is-alpha-primary};
- --is-beta-secondary: #{$-is-beta-secondary};
+ --support-13-0-color-system: #{$o-support-13-0-color-system};
+ --has-customized-13-0-color-system: #{$o-has-customized-13-0-color-system};
// 1) Handle default values
--header-font-size: #{$font-size-base};
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index 021a326be3c..7819d0eac1d 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -25,7 +25,7 @@ options.registry.InnerChart = options.Class.extend({
*/
init: function () {
this._super.apply(this, arguments);
- this.themeArray = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'];
+ this.themeArray = ['o-color-1', 'o-color-2', 'o-color-3', 'o-color-4', 'o-color-5'];
this.style = window.getComputedStyle(document.documentElement);
},
/**
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index aecbd6da8d9..e1d4aeafafc 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -143,7 +143,7 @@
Color blocks are a simple and effective way to present and highlight your content. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
Color blocks are a simple and effective way to present and highlight your content. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
Switch Theme
-
-
-
-
-
-
-
-
-
-
-
-
+
+ It appears your website is still using the old color system of
+ Odoo 13.0 in some places. We made sure it is still working but
+ we recommend you to try to use the new color system, which is
+ still customizable.
+
+
+
+
+
+
+
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 8c6a5c0143b..1289b11512e 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -126,7 +126,7 @@ list of filtered posts (by date or tag).
-
Latest
+
Latest
@@ -161,7 +161,7 @@ list of filtered posts (by date or tag).
