diff options
40 files changed, 217 insertions, 230 deletions
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss index 784fd39e228..6b68e537299 100644 --- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss +++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss @@ -3,31 +3,31 @@ // ============================ // ===== Default Theme palette ===== -$o-mm-def-color-alpha: #f5f5f5; -$o-mm-def-color-beta: #ffffff; -$o-mm-def-color-gamma: #706482; -$o-mm-def-color-delta: #464646; -$o-mm-def-color-epsilon: darken($o-mm-def-color-gamma, 5%); -$o-mm-def-color-zeta: #706482; -$o-mm-def-color-eta: #87a6b5; +$o-mm-def-color-1: #f5f5f5; +$o-mm-def-color-2: #ffffff; +$o-mm-def-color-3: #706482; +$o-mm-def-color-4: #464646; +$o-mm-def-color-5: darken($o-mm-def-color-3, 5%); +$o-mm-def-color-6: #706482; +$o-mm-def-color-7: #87a6b5; // ===== Default Theme variables ===== $o-mm-def-body-width : 600px; $o-mm-def-body-bobile : 480px; $o-mm-def-b-radius : 2px; -$o-mm-def-body-bg : $o-mm-def-color-beta; +$o-mm-def-body-bg : $o-mm-def-color-2; $o-mm-def-font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$o-mm-def-text-color : $o-mm-def-color-delta; +$o-mm-def-text-color : $o-mm-def-color-4; -$o-mm-def-btn-bg : $o-mm-def-color-gamma; -$o-mm-def-btn-text : $o-mm-def-color-beta; +$o-mm-def-btn-bg : $o-mm-def-color-3; +$o-mm-def-btn-text : $o-mm-def-color-2; // ===== Colors ===== -@include bg-variant(".bg-beta", $o-mm-def-color-zeta); -@include text-emphasis-variant(".text-beta", $o-mm-def-color-zeta); -@include bg-variant(".bg-delta", $o-mm-def-color-eta); -@include bg-variant(".bg-gray-lighter", $o-mm-def-color-alpha); +@include bg-variant(".bg-o-color-2", $o-mm-def-color-6); +@include text-emphasis-variant(".text-o-color-2", $o-mm-def-color-6); +@include bg-variant(".bg-o-color-4", $o-mm-def-color-7); +@include bg-variant(".bg-gray-lighter", $o-mm-def-color-1); td:not([align]) { // Default browser style but needed so that alignment works on some mail @@ -41,7 +41,7 @@ td:not([align]) { box-sizing: content-box; width: 94%; min-height: 100%; - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; padding: 0 3%; // Forces on <p/> and <hx/> elements as several mail clients does not @@ -61,8 +61,8 @@ td:not([align]) { .o_mail_wrapper_td { width: $o-mm-def-body-width; - border: 1px solid darken($o-mm-def-color-alpha, 2%); - background-color: $o-mm-def-color-beta; + border: 1px solid darken($o-mm-def-color-1, 2%); + background-color: $o-mm-def-color-2; } } } @@ -89,7 +89,7 @@ td:not([align]) { } a, .btn.btn-link { - color: $o-mm-def-color-epsilon; + color: $o-mm-def-color-5; font-weight: bold; text-decoration: none !important; @@ -106,20 +106,20 @@ td:not([align]) { .separator { height: 2px; - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; } - .bg-beta { + .bg-o-color-2 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: $o-mm-def-color-beta; + color: $o-mm-def-color-2; } .btn.btn-primary { - background-color: $o-mm-def-color-eta; + background-color: $o-mm-def-color-7; } a, .btn.btn-link { - color: $o-mm-def-color-eta; + color: $o-mm-def-color-7; } } @@ -153,7 +153,7 @@ td:not([align]) { } .o_mail_block_steps .o_mail_snippet_general{ - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; } .o_mail_block_two_cols, .o_mail_block_three_cols { @@ -184,7 +184,7 @@ td:not([align]) { margin-left: 20px; margin-right: 20px; .o_mail_snippet_general{ - background: darken($o-mm-def-color-alpha, 2%); + background: darken($o-mm-def-color-1, 2%); } } @@ -196,7 +196,7 @@ td:not([align]) { .o_mail_block_comparison_table { .separator { height: 1px; - background-color: darken($o-mm-def-color-alpha, 15%); + background-color: darken($o-mm-def-color-1, 15%); } table table { td, th { @@ -215,7 +215,7 @@ td:not([align]) { .o_mail_block_discount2 { .o_code { padding: 5px 10px; - background: $o-mm-def-color-alpha; + background: $o-mm-def-color-1; border-radius: 3px; font-family: monospace; } @@ -223,7 +223,7 @@ td:not([align]) { .o_mail_block_footer_social { .o_mail_table_styles { - border-top: 2px solid $o-mm-def-color-alpha; + border-top: 2px solid $o-mm-def-color-1; padding-top: 20px; padding-bottom: 20px; } diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml index 9da535d7480..3a57e1656cb 100644 --- a/addons/mass_mailing/views/snippets_themes.xml +++ b/addons/mass_mailing/views/snippets_themes.xml @@ -242,7 +242,7 @@ <table cellspacing="0" cellpadding="0" class="o_mail_table_styles"> <thead> <tr> - <th class="bg-beta o_mail_v_padding o_mail_col_mv"> + <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv"> <h2 class="text-center o_mail_no_margin">DEFAULT</h2> </th> </tr> @@ -298,7 +298,7 @@ <table cellspacing="0" cellpadding="0" class="o_mail_table_styles"> <thead> <tr> - <th class="bg-beta o_mail_v_padding o_mail_col_mv"> + <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv"> <h2 class="text-center o_mail_no_margin">PRO</h2> </th> </tr> @@ -509,7 +509,7 @@ <tr> <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding"> <table> - <td class="bg-beta o_mail_v_padding"> + <td class="bg-o-color-2 o_mail_v_padding"> <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p> </td> </table> @@ -543,12 +543,12 @@ <table class="o_mail_table_styles o_mail_full_width_padding" align="center" cellpadding="0" cellspacing="0"> <tbody> <tr> - <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta"> + <td class="text-center o_mail_h_padding o_mail_v_padding bg-o-color-2"> <h3 style="margin:10px 0;">Apps That Help You Grow Your Business</h3> </td> </tr> <tr> - <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;"> + <td class="text-center o_mail_h_padding o_mail_v_padding bg-o-color-2" style="padding:10px;"> &nbsp; <a role="button" href="#" class="btn btn-primary">My Account</a> &nbsp; @@ -556,7 +556,7 @@ </tr> <tr> <td> - <div class="bg-beta"> + <div class="bg-o-color-2"> &nbsp; </div> </td> @@ -575,7 +575,7 @@ <tr> <td class="o_mail_v_padding"> <div class="text-center d-block mx-auto"> - <p class="o_mail_display_coupon o_mail_no_margin text-center text-beta" style="font-weight:800;"> + <p class="o_mail_display_coupon o_mail_no_margin text-center text-o-color-2" style="font-weight:800;"> $20 </p> <h3 class="o_mail_no_margin">OFF YOUR NEXT ORDER!</h3> @@ -616,8 +616,8 @@ <table class="o_mail_table_styles"> <tr> <td> - <p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p> - <h4 class="text-beta text-center mt0 mb16" style="font-weight:800;">OFF</h4> + <p class="o_mail_display_coupon text-o-color-2 text-center o_mail_no_margin" style="font-weight:800;">20%</p> + <h4 class="text-o-color-2 text-center mt0 mb16" style="font-weight:800;">OFF</h4> </td> </tr> <tr> @@ -648,13 +648,13 @@ <div class="o_mail_snippet_general"> <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles"> <tr> - <td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-beta text-center o_mail_col_mv"> + <td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-o-color-2 text-center o_mail_col_mv"> <div class="o_mail_h_padding o_mail_v_padding"> <h3 class="o_mail_no_margin">21 Jul</h3> <p class="o_mail_no_margin">ALL DAY</p> </div> </td> - <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv"> + <td style="width:25%;min-height: 150px;" class="text-center bg-o-color-4 o_mail_col_mv"> <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="d-block mx-auto" alt="Your Picture" /> </td> <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" style="min-height: 150px;"> @@ -687,7 +687,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-compass fa-2x text-delta" role="img" aria-label="Choose" title="Choose"></span> + <span class="fa fa-compass fa-2x text-o-color-4" role="img" aria-label="Choose" title="Choose"></span> &nbsp; </td> <td style="padding-left:10px;"> @@ -702,7 +702,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-credit-card fa-2x text-delta" role="img" aria-label="Order" title="Order"></span> + <span class="fa fa-credit-card fa-2x text-o-color-4" role="img" aria-label="Order" title="Order"></span> &nbsp; </td> <td style="padding-left:10px;"> @@ -717,7 +717,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-smile-o fa-2x text-delta" role="img" aria-label="Enjoy" title="Enjoy"></span> + <span class="fa fa-smile-o fa-2x text-o-color-4" role="img" aria-label="Enjoy" title="Enjoy"></span> &nbsp; </td> <td style="padding-left:10px;"> 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(), - '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-gamma">oto </font><font class="bg-gamma" style="">to</font>to</p><p>tata</p>', + '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-o-color-3">oto </font><font class="bg-o-color-3" style="">to</font>to</p><p>tata</p>', "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, - '<p>t<font class="bg-gamma">oto toto </font>toto</p><p>tata</p>', + '<p>t<font class="bg-o-color-3">oto toto </font>toto</p><p>tata</p>', "should save the content"); } @@ -386,7 +386,7 @@ QUnit.module('web_editor', {}, function () { } 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')); await testUtils.form.clickSave(form); diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js index b8dd9040fc7..8b28e292438 100644 --- a/addons/web_editor/static/tests/test_utils.js +++ b/addons/web_editor/static/tests/test_utils.js @@ -12,11 +12,11 @@ const COLOR_PICKER_TEMPLATE = ` <t t-name="web_editor.colorpicker"> <colorpicker> <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask"> - <button data-color="alpha"/> - <button data-color="beta"/> - <button data-color="gamma"/> - <button data-color="delta"/> - <button data-color="epsilon"/> + <button data-color="o-color-1"/> + <button data-color="o-color-2"/> + <button data-color="o-color-3"/> + <button data-color="o-color-4"/> + <button data-color="o-color-5"/> </div> <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash"> <button class="o_btn_transparent"/> diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index 2ebd3ff40b5..2769509a927 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -120,6 +120,12 @@ </xpath> </template> +<template id="_assets_13_0_color_system_support_primary_variables" inherit_id="web_editor._assets_primary_variables" active="False"> + <xpath expr="//link[last()]" position="after"> + <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss"/> + </xpath> +</template> + <template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables"> <xpath expr="//link" position="before"> <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/secondary_variables.scss"/> @@ -212,11 +218,7 @@ <template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user"> <colorpicker> <div class="o_colorpicker_section" data-name="theme"> - <button data-color="alpha"></button> - <button data-color="beta"></button> - <button data-color="gamma"></button> - <button data-color="delta"></button> - <button data-color="epsilon"></button> + <button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button> </div> <div class="o_colorpicker_section" data-name="common"> <button data-color="black"></button> diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml index 8efebf26764..47a5ef073d0 100644 --- a/addons/website/data/website_demo.xml +++ b/addons/website/data/website_demo.xml @@ -8,10 +8,9 @@ <field name="arch" type="xml"> <t name="Debug" t-name="website.bs_debug_page_view"> <t t-call="website.layout"> - <t t-set="odoo_theme_colors" t-value="[['alpha', 'Alpha'], ['beta', 'Beta'], ['gamma', 'Gamma'], ['delta', 'Delta'], ['epsilon', 'Epsilon']]"/> + <t t-set="odoo_theme_colors" t-value="[['o-color-1', 'Color 1'], ['o-color-2', 'Color 2'], ['o-color-3', 'Color 3'], ['o-color-4', 'Color 4'], ['o-color-5', 'Color 5']]"/> <t t-set="bs_theme_colors" t-value="[['primary', 'Primary'], ['secondary', 'Secondary'], ['success', 'Success'], ['info', 'Info'], ['warning', 'Warning'], ['danger', 'Danger'], ['light', 'Light'], ['dark', 'Dark']]"/> <t t-set="bs_gray_colors" t-value="[['white', 'White'], ['100', '100'], ['200', '200'], ['300', '300'], ['400', '400'], ['500', '500'], ['600', '600'], ['700', '700'], ['800', '800'], ['900', '900'], ['black', 'Black']]"/> - <t t-set="all_theme_colors" t-value="odoo_theme_colors + bs_theme_colors"/> <div id="wrap" class="oe_structure"> <section class="py-2"> <div class="container"> @@ -19,69 +18,37 @@ <div class="row"> <div class="col-md"> <h2>Badge</h2> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> <h3 class="mt-2 h6">Pill</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> <h3 class="mt-2 h6">Link</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a> </t> <h3 class="mt-2 h6">Autosizing</h3> <div class="h3"> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> </div> <h2 class="mt-4">Button</h2> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Outline</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Small</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Large</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> @@ -156,7 +123,7 @@ </div> <div class="col-md-auto"> <h2>Alert</h2> - <t t-foreach="all_theme_colors" t-as="color"> + <t t-foreach="bs_theme_colors" t-as="color"> <div t-attf-class="alert alert-#{color[0]}"> This is a "<t t-esc="color[1]"/>" alert with a <a href="#" class="alert-link">link</a>. </div> 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 @@ <div class="card-header">Social Preview</div> <img class="card-img-top o_meta_active_img" t-att-src="widget.activeMetaImg"/> <div class="card-body px-3 py-2"> - <h6 class="text-alpha card-title mb0"><t t-esc="widget.metaTitle"/></h6> + <h6 class="text-primary card-title mb0"><t t-esc="widget.metaTitle"/></h6> <small class="card-subtitle text-muted"><t t-esc="widget.serverUrl"/></small> <p t-esc="widget.metaDescription"/> </div> diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml index 01e638b78f9..fc63291d44b 100644 --- a/addons/website/views/snippets/s_badge.xml +++ b/addons/website/views/snippets/s_badge.xml @@ -2,7 +2,7 @@ <odoo> <template name="Badge" id="s_badge"> - <span class="s_badge badge bg-gamma o_animable" data-name="Badge"> + <span class="s_badge badge bg-secondary o_animable" data-name="Badge"> <i class="fa fa-1x fa-fw fa-folder o_not-animable"/>Category </span> </template> diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml index 66602d9943a..4aab0d34606 100644 --- a/addons/website/views/snippets/s_banner.xml +++ b/addons/website/views/snippets/s_banner.xml @@ -10,7 +10,7 @@ <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p> <p class="lead"><br/></p> - <a href="#" class="btn btn-alpha">Do something</a> + <a href="#" class="btn btn-primary">Do something</a> </div> </div> </div> diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml index 75e7808a340..e8252c4965b 100644 --- a/addons/website/views/snippets/s_blockquote.xml +++ b/addons/website/views/snippets/s_blockquote.xml @@ -3,7 +3,7 @@ <template name="Blockquote" id="s_blockquote"> <blockquote class="s_blockquote s_blockquote_classic blockquote o_animable" style="background-color: rgba(239,239,239);"> - <i class="fa fa-quote-left fa-1x bg-beta rounded-0 s_blockquote_icon"/> + <i class="fa fa-quote-left fa-1x bg-secondary rounded-0 s_blockquote_icon"/> <div class="s_blockquote_content"> <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p> <footer class="blockquote-footer text-muted"> diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml index 8564998a4b9..0ae9198733b 100644 --- a/addons/website/views/snippets/s_carousel.xml +++ b/addons/website/views/snippets/s_carousel.xml @@ -20,7 +20,7 @@ <h2><font style="font-size: 62px;">Slide Title</font></h2> <p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p> <p> - <a href="/contactus" class="btn btn-beta">Contact us</a> + <a href="/contactus" class="btn btn-primary">Contact us</a> </p> </div> </div> @@ -33,10 +33,10 @@ <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40"> <h2 style="font-size: 62px;">Clever Slogan</h2> <div class="s_hr pt8 pb32" data-snippet="s_hr"> - <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/> + <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-o-color-5 mx-auto text-center"/> </div> <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p> - <p><a href="/" class="btn btn-alpha">Start your journey</a></p> + <p><a href="/" class="btn btn-primary">Start your journey</a></p> </div> </div> </div> diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml index cca0473204c..f8cbed914b6 100644 --- a/addons/website/views/snippets/s_chart.xml +++ b/addons/website/views/snippets/s_chart.xml @@ -9,8 +9,8 @@ { "label":"One", "data":["12","24","18","17","10"], - "backgroundColor":"alpha", - "borderColor":"alpha" + "backgroundColor":"o-color-1", + "borderColor":"o-color-1" } ] }"> diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml index 13bed209ef9..fbc39fcae2e 100644 --- a/addons/website/views/snippets/s_color_blocks_2.xml +++ b/addons/website/views/snippets/s_color_blocks_2.xml @@ -5,13 +5,13 @@ <section class="s_color_blocks_2"> <div class="container-fluid"> <div class="row"> - <div class="col-lg-6 bg-beta text-center"> + <div class="col-lg-6 bg-secondary text-center"> <i class="fa fa-shield fa-5x m-3"/> <h2>A color block</h2> <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. 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.</p> <a href="#" class="btn btn-primary">More Details</a> </div> - <div class="col-lg-6 bg-delta text-center"> + <div class="col-lg-6 bg-o-color-4 text-center"> <i class="fa fa-cube fa-5x m-3"/> <h2>An other color block</h2> <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. 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.</p> diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml index 28cb6a0b070..693d29bf20b 100644 --- a/addons/website/views/snippets/s_comparisons.xml +++ b/addons/website/views/snippets/s_comparisons.xml @@ -29,7 +29,7 @@ </div> </div> <div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box"> - <div class="card bg-gamma"> + <div class="card bg-primary"> <h4 class="card-header">Professional</h4> <div class="card-body"> <h2 class="card-title"> diff --git a/addons/website/views/snippets/s_countdown.xml b/addons/website/views/snippets/s_countdown.xml index 2e077469b31..95a1f1e3a69 100644 --- a/addons/website/views/snippets/s_countdown.xml +++ b/addons/website/views/snippets/s_countdown.xml @@ -7,7 +7,7 @@ t-att-data-end-time="datetime.datetime.now().timestamp() + 228307" data-layout="circle" data-layout-background="none" data-progress-bar-style="surrounded" data-progress-bar-weight="thin" - data-text-color="alpha" data-layout-background-color="400" data-progress-bar-color="alpha"> + data-text-color="o-color-1" data-layout-background-color="400" data-progress-bar-color="o-color-1"> <div class="container"> <div class="s_countdown_canvas_wrapper text-center"/> </div> diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml index 24226f734e3..6b17f4875cb 100644 --- a/addons/website/views/snippets/s_cover.xml +++ b/addons/website/views/snippets/s_cover.xml @@ -8,7 +8,7 @@ <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1> <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p> <p style="text-align: center;"> - <a href="/contactus" class="btn btn-beta">Contact us</a> + <a href="/contactus" class="btn btn-primary">Contact us</a> </p> </div> </section> diff --git a/addons/website/views/snippets/s_features.xml b/addons/website/views/snippets/s_features.xml index b8ec968934a..5979aea9afe 100644 --- a/addons/website/views/snippets/s_features.xml +++ b/addons/website/views/snippets/s_features.xml @@ -6,17 +6,17 @@ <div class="container"> <div class="row"> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-gear rounded bg-beta m-3"/> + <i class="fa fa-3x fa-gear rounded bg-secondary m-3"/> <h3>First Feature</h3> <p>Tell what's the value for the <br/>customer for this feature.</p> </div> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-photo rounded bg-gamma m-3"/> + <i class="fa fa-3x fa-photo rounded bg-o-color-3 m-3"/> <h3>Second Feature</h3> <p>Write what the customer would like to know, <br/>not what you want to show.</p> </div> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-leaf rounded bg-delta m-3"/> + <i class="fa fa-3x fa-leaf rounded bg-o-color-4 m-3"/> <h3>Third Feature</h3> <p>A small explanation of this great <br/>feature, in clear words.</p> </div> diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml index 45446abc53c..9a0099ba9bf 100644 --- a/addons/website/views/snippets/s_masonry_block.xml +++ b/addons/website/views/snippets/s_masonry_block.xml @@ -12,7 +12,7 @@ </div> <div class="col-lg-6"> <div class="row h-100"> - <div class="col-lg-6 text-center bg-alpha" data-name="Block"> + <div class="col-lg-6 text-center bg-primary" data-name="Block"> <h3>A great title</h3> <p>And a great subtitle</p> </div> @@ -24,7 +24,7 @@ <h3>A great title</h3> <p>And a great subtitle</p> </div> - <div class="col-lg-6 text-center bg-beta" data-name="Block"> + <div class="col-lg-6 text-center bg-secondary" data-name="Block"> <h3>A great title</h3> <p>And a great subtitle</p> </div> diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml index d75431b304f..86f62f58f51 100644 --- a/addons/website/views/snippets/s_media_list.xml +++ b/addons/website/views/snippets/s_media_list.xml @@ -30,10 +30,10 @@ </div> <div class="col-lg-8 s_media_list_body"> <h3>Post heading</h3> - <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge"> + <span class="s_badge badge bg-o-color-3" data-name="Badge" data-snippet="s_badge"> <i class="fa fa-1x fa-fw fa-clock-o"/>3 months ago </span> - <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge"> + <span class="s_badge badge bg-o-color-3" data-name="Badge" data-snippet="s_badge"> <i class="fa fa-1x fa-fw fa-user"/>by John DOE </span> <p>Use this component for creating a list of featured elements to which you want to bring attention.</p> diff --git a/addons/website/views/snippets/s_numbers.xml b/addons/website/views/snippets/s_numbers.xml index 9b115e200d9..ce434e53dd2 100644 --- a/addons/website/views/snippets/s_numbers.xml +++ b/addons/website/views/snippets/s_numbers.xml @@ -6,19 +6,19 @@ <div class="container"> <div class="row"> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">12</span> + <span class="s_number display-4 text-secondary">12</span> <h6>Useful options</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">45</span> + <span class="s_number display-4 text-secondary">45</span> <h6>Beautiful snippets</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">8</span> + <span class="s_number display-4 text-secondary">8</span> <h6>Amazing pages</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">37</span> + <span class="s_number display-4 text-secondary">37</span> <h6>Outstanding images</h6> </div> </div> diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml index 2e9950f3e73..03596d8957b 100644 --- a/addons/website/views/snippets/s_popup.xml +++ b/addons/website/views/snippets/s_popup.xml @@ -19,7 +19,7 @@ <font style="font-size: 62px;">Win 20$</font> </h1> <p class="lead">Order now, and get 20$ discount on your first order with the coupon:<br/></p> - <p><button class="btn btn-alpha rounded-circle">NEWCUSTOMER</button></p> + <p><button class="btn btn-primary rounded-circle">NEWCUSTOMER</button></p> </div> </div> </div> diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml index 85b3a7e6977..25bbeb9850c 100644 --- a/addons/website/views/snippets/s_process_steps.xml +++ b/addons/website/views/snippets/s_process_steps.xml @@ -8,7 +8,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/> + <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-primary"/> </span> </div> <div class="s_process_step_content text-center"> @@ -19,7 +19,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/> + <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-secondary"/> </span> </div> <div class="s_process_step_content text-center"> @@ -30,7 +30,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/> + <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-o-color-3"/> </span> </div> <div class="s_process_step_content text-center"> @@ -41,7 +41,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/> + <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-o-color-4"/> </span> </div> <div class="s_process_step_content text-center"> diff --git a/addons/website/views/snippets/s_product_list.xml b/addons/website/views/snippets/s_product_list.xml index b2890db4bf1..95feacb42d0 100644 --- a/addons/website/views/snippets/s_product_list.xml +++ b/addons/website/views/snippets/s_product_list.xml @@ -10,7 +10,7 @@ <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -18,7 +18,7 @@ <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -26,7 +26,7 @@ <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -34,7 +34,7 @@ <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -42,7 +42,7 @@ <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -50,7 +50,7 @@ <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> </div> diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml index 592245cc9e6..765c7f91829 100644 --- a/addons/website/views/snippets/s_showcase.xml +++ b/addons/website/views/snippets/s_showcase.xml @@ -10,14 +10,14 @@ <div class="row"> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2"> - <i class="s_showcase_icon fa fa-2x fa-desktop text-beta mr-3 mr-lg-0 ml-3"/> + <i class="s_showcase_icon fa fa-2x fa-desktop text-secondary mr-3 mr-lg-0 ml-3"/> <h3>First feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> </div> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2"> - <i class="s_showcase_icon fa fa-2x fa-paint-brush text-beta mr-3 mr-lg-0 ml-3"/> + <i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary mr-3 mr-lg-0 ml-3"/> <h3>Second feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> @@ -31,14 +31,14 @@ <div class="row"> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex mb-2"> - <i class="s_showcase_icon fa fa-2x fa-heart text-beta mr-3"/> + <i class="s_showcase_icon fa fa-2x fa-heart text-secondary mr-3"/> <h3>Another feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> </div> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex mb-2"> - <i class="s_showcase_icon fa fa-2x fa-gift text-beta mr-3"/> + <i class="s_showcase_icon fa fa-2x fa-gift text-secondary mr-3"/> <h3>Last Feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml index 55aef4a33a4..07fe1d99ee9 100644 --- a/addons/website/views/snippets/s_text_highlight.xml +++ b/addons/website/views/snippets/s_text_highlight.xml @@ -2,7 +2,7 @@ <odoo> <template name="Text Highlight" id="s_text_highlight"> - <div class="s_text_highlight bg-beta my-3 text-center w-100"> + <div class="s_text_highlight bg-secondary my-3 text-center w-100"> <div class="container"> <h3>Text Highlight</h3> <p>Put the focus on what you have to say!</p> diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml index 32e58729116..52f531a702b 100644 --- a/addons/website/views/snippets/s_timeline.xml +++ b/addons/website/views/snippets/s_timeline.xml @@ -13,7 +13,7 @@ <p class="card-text">A timeline is a graphical representation on which important events are marked.</p> </div> </div> - <i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-child bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content"/> </div> @@ -25,10 +25,10 @@ <p class="card-text">You can edit, duplicate...</p> </div> </div> - <i class="fa fa-1x fa-graduation-cap bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-graduation-cap bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content d-flex"> - <i class="fa fa-1x fa-asterisk bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-asterisk bg-secondary rounded-circle s_timeline_icon"/> <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card"> <div class="card-body"> <p class="card-text">...and switch the timeline contents to fit your needs.</p> @@ -44,7 +44,7 @@ <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p> </div> </div> - <i class="fa fa-1x fa-bolt bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-bolt bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content"/> </div> diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 904d855565c..42ce9562f9a 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -639,18 +639,18 @@ <!-- Theme options --> <div data-js="Theme" data-selector="theme" data-no-check="true"> <we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button> - <we-row string="Main Colors"> - <we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="primary"/> - <we-colorpicker data-name="alpha_as_primary_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/> - <we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="secondary"/> - <we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="beta"/> - </we-row> - <we-row string="Extra Colors"> - <we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/> - <we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="beta"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="gamma"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="delta"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="epsilon"/> + <we-alert class="o_old_color_system_warning d-none"> + 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. + </we-alert> + <we-row string="Theme colors"> + <we-colorpicker title="Primary" data-customize-website-color="" data-color="o-color-1"/> + <we-colorpicker title="Secondary" data-customize-website-color="" data-color="o-color-2"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-3"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-4"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-5"/> </we-row> <we-row string="Status Colors"> <we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/> 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). <div t-field="blog.subtitle" class="h4" placeholder="Subtitle"/> </t> <t t-else="first_post"> - <div t-if="not date and not tag" class="h4 mb-3 bg-gamma px-2 rounded-sm d-inline-block mr-auto">Latest</div> + <div t-if="not date and not tag" class="h4 mb-3 bg-o-color-3 px-2 rounded-sm d-inline-block mr-auto">Latest</div> <a t-attf-href="/blog/#{slug(first_post.blog_id)}/post/#{slug(first_post)}" t-field="first_post.name" class="h1 d-block" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/> <div t-field="first_post.subtitle" class="h4" placeholder="Subtitle"/> @@ -161,7 +161,7 @@ list of filtered posts (by date or tag). <div class="container position-relative h-100 d-flex flex-column justify-content-around"> <div t-attf-class="o_wblog_post_title #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}"> - <div t-if="not date and not tag and not blog" class="h4 bg-gamma px-2 d-inline-block rounded-sm">Latest</div> + <div t-if="not date and not tag and not blog" class="h4 bg-o-color-3 px-2 d-inline-block rounded-sm">Latest</div> <a t-if="not blog and first_post" t-attf-href="/blog/#{slug(first_post.blog_id)}/post/#{slug(first_post)}" t-att-title="first_post.name" class="text-white text-decoration-none"> <div t-field="first_post.name" id="o_wblog_post_name" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/> <div t-field="first_post.subtitle" id="o_wblog_post_subtitle" placeholder="Subtitle"/> @@ -412,7 +412,7 @@ list of filtered posts (by date or tag). <hr/> <div class="d-flex text-right py-4"> <div class="flex-grow-1 pr-3"> - <span class="bg-gamma h6 d-inline-block py-1 px-2 rounded-sm">Read Next</span> + <span class="bg-o-color-3 h6 d-inline-block py-1 px-2 rounded-sm">Read Next</span> <a t-att-href="'/blog/' + slug(next_post.blog_id) + '/post/' + slug(next_post)" t-att-title="'Read next' + next_post.name"> <div t-field="next_post.name" id="o_wblog_post_name" t-att-data-blog-id="next_post.id" placeholder="Blog Post Title" class="h2"/> <div t-field="next_post.subtitle" id="o_wblog_post_subtitle" placeholder="Subtitle" class="lead"/> diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml index 20e3bfc301c..e94790873ee 100644 --- a/addons/website_forum/views/website_forum.xml +++ b/addons/website_forum/views/website_forum.xml @@ -1212,11 +1212,11 @@ <div id="post_reply" class="collapse answer_collapse" t-if="(not question.uid_has_answered or question.forum_id.mode == 'discussions')"> <t t-call="website_forum.post_answer"/> </div> - <div t-elif="uid and request.env.user.forum_waiting_posts_count" class="alert alert-gamma text-center"> + <div t-elif="uid and request.env.user.forum_waiting_posts_count" class="alert alert-info text-center"> <b class="d-block">You have a pending post</b> Please wait for a moderator to validate your previous post to be allowed replying questions. </div> - <div t-elif="not uid" class="alert alert-gamma text-center"> + <div t-elif="not uid" class="alert alert-info text-center"> <a class="btn btn-primary forum_register_url" href="/web/login">Sign in</a> to partecipate </div> </t> diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml index 84e8ab22824..025dab7925a 100644 --- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml +++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml @@ -383,7 +383,7 @@ <div> <h5>Our Product</h5> <p>Discover our products.</p> - <p><a href="/" class="btn btn-outline-alpha" target="_blank"><small><b>READ</b></small></a></p> + <p><a href="/" class="btn btn-primary" target="_blank"><small><b>READ</b></small></a></p> </div> </div> </div> |