diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss index 531c1cbf06d..b93e2d35c55 100644 --- a/addons/account/static/src/scss/account_dashboard.scss +++ b/addons/account/static/src/scss/account_dashboard.scss @@ -35,26 +35,26 @@ font-weight: 500; .o_account_dashboard_index { - color: $gray-dark; + color: gray('900'); } &.o_action_done { - color: $gray-dark; - background-color: $gray-lighter; + color: gray('900'); + background-color: gray('200'); &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } .fa-check { - color: $brand-success; + color: theme-color('success'); } } &:last-of-type { margin-left: $o-horizontal-padding; padding-left: $o-horizontal-padding*.5; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } } } diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss index 1b87a6363a6..1bff7ba9057 100644 --- a/addons/account/static/src/scss/account_journal_dashboard.scss +++ b/addons/account/static/src/scss/account_journal_dashboard.scss @@ -58,7 +58,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $o-brand-primary; + // stroke: $o-brand-odoo; line { display: none; @@ -72,13 +72,13 @@ g.nv-linesWrap { g.nv-group.nv-series-0 { fill-opacity: 0.3 !important; - fill: $o-brand-primary !important; - stroke: $o-brand-primary !important; + fill: $o-brand-odoo !important; + stroke: $o-brand-odoo !important; .nv-point { visibility: hidden; r: 3; - stroke: $o-brand-primary !important; + stroke: $o-brand-odoo !important; fill: white; stroke-width: 2; } @@ -99,11 +99,11 @@ g.nv-group.nv-series-0 { g.past { opacity: 0.5; - fill: $o-brand-primary !important; + fill: $o-brand-odoo !important; } g.future { opacity: 0.5; - fill: $o-brand-optional !important; + fill: $o-brand-primary !important; } } } diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss index e80febc05bb..baae6a584f1 100644 --- a/addons/account/static/src/scss/account_reconciliation.scss +++ b/addons/account/static/src/scss/account_reconciliation.scss @@ -8,7 +8,7 @@ &.statement_name { @include o-text-overflow; &.editable:hover { - outline: 1px dashed $o-brand-optional; + outline: 1px dashed $o-brand-primary; outline-offset: -1px; cursor: pointer; } @@ -25,7 +25,7 @@ position: relative; display: inline-block; .progress-bar { - background-color: #7c7bad; + background-color: $o-community-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? } .progress-text { text-align: center; @@ -59,7 +59,7 @@ padding-right: 5px; } .do_partial_reconcile_true { - color: #7c7bad; + color: $o-community-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? padding-right: 5px; } .do_partial_reconcile_false { @@ -128,7 +128,7 @@ .cell_action { width: 15px; - color: $gray; + color: gray('700'); background: #fff; border: 0; text-align: center; diff --git a/addons/account_asset/static/src/scss/account_asset.scss b/addons/account_asset/static/src/scss/account_asset.scss index f80cb658718..bff97fa20d9 100644 --- a/addons/account_asset/static/src/scss/account_asset.scss +++ b/addons/account_asset/static/src/scss/account_asset.scss @@ -1,9 +1,9 @@ .o_web_client .o_deprec_lines_toggler { - color: $brand-danger; + color: theme-color('danger'); &.o_is_posted { - color: $brand-success; + color: theme-color('success'); } &.o_unposted { - color: $brand-warning; + color: theme-color('warning'); } } diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index 49198688112..c54179dccd8 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -5,7 +5,7 @@ border-radius: 5px; &.accepted { - background-color: $brand-success; + background-color: theme-color('success'); } &.needsAction { @@ -13,7 +13,7 @@ } &.declined { - background-color: $brand-danger; + background-color: theme-color('danger'); } } @@ -71,10 +71,10 @@ } .o_accepted { - color: $brand-success; + color: theme-color('success'); } .o_declined { - color: $brand-danger; + color: theme-color('danger'); } } .o_meeting_filter { @@ -84,7 +84,7 @@ display: inline-block; vertical-align: top; &:hover { - color: $o-brand-optional; + color: $o-brand-primary; } &.o_meeting_bold { font-weight: bold; diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss index fcbdb009b65..563f70b6e21 100644 --- a/addons/event/static/src/scss/event.scss +++ b/addons/event/static/src/scss/event.scss @@ -10,7 +10,7 @@ flex: 1 1 25%; text-align: center; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; padding: 8px; .o_day { diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss index 5260fd99eb5..aadb78de52a 100644 --- a/addons/hr_attendance/static/src/scss/hr_attendance.scss +++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss @@ -7,10 +7,10 @@ #oe_hr_attendance_status { color: $o-brand-secondary; &.oe_hr_attendance_status_green { - color: $brand-success; + color: theme-color('success'); } &.oe_hr_attendance_status_red { - color: $brand-danger; + color: theme-color('danger'); } } @@ -95,13 +95,13 @@ box-shadow: inset 0 -3px 0 fade-out(black, 0.7); &.btn-secondary:hover { - color: $o-brand-optional; + color: $o-brand-primary; } } .o_hr_attendance_back_button { .visible-xs{ - background: $gray-lighter; + background: gray('200'); margin: 0 -2em; .fa { @include o-position-absolute(0.75em); diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss index ce1de55db0e..3d8b3e54933 100644 --- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss +++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss @@ -25,7 +25,7 @@ border-left: 1px solid $o-hr-org-chart-border-color; .o_org_chart_title { - color: $gray-light + color: gray('600') } } } @@ -141,12 +141,12 @@ float: right; cursor: pointer; margin-right: 5px; - color: $gray-light; + color: gray('600'); background: $o-hr-org-chart-bg; - border: 1px solid $gray-light; + border: 1px solid gray('600'); &:hover { - color: $o-brand-optional; - border-color: $o-brand-optional; + color: $o-brand-primary; + border-color: $o-brand-primary; } &:focus { outline: none; @@ -157,7 +157,7 @@ display: block; line-height: 1.2; font-size: 11px; - color: lighten($gray-light, 15%); + color: lighten(gray('600'), 15%); } } @@ -183,7 +183,7 @@ &:hover { border-color: $o-hr-org-chart-entry-border-color; - color:$o-brand-optional; + color:$o-brand-primary; } } } @@ -198,21 +198,21 @@ display: block; .media-heading { - color: lighten($gray-light, 5%); + color: lighten(gray('600'), 5%); font-size: 13px; } } &:hover { .media-object { - box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-optional, 0.6); + box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6); } .media-body > a { .media-heading { - color: $o-brand-optional; + color: $o-brand-primary; } strong { - color: lighten($gray-light, 5%); + color: lighten(gray('600'), 5%); } } } @@ -231,7 +231,7 @@ width: $o-hr-org-chart-entry-pic-size; height: $o-hr-org-chart-entry-pic-size; margin: 0; - border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-optional; + border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-primary; box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white; } diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss index 14751937d9a..f01d7259805 100644 --- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss +++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss @@ -1,6 +1,6 @@ .text-muted { - color: $gray-light; + color: gray('600'); } .text-center { diff --git a/addons/im_support/static/src/scss/systray.scss b/addons/im_support/static/src/scss/systray.scss index eb82d2b559d..bee87733dfe 100644 --- a/addons/im_support/static/src/scss/systray.scss +++ b/addons/im_support/static/src/scss/systray.scss @@ -1,7 +1,7 @@ .o_mail_systray_item { .o_mail_systray_dropdown { .o_mail_systray_dropdown_bottom { - border-top: 1px solid $gray-lighter-darker; + border-top: 1px solid gray('400'); box-sizing: content-box; .o_preview_info { diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss index 39de4fc9c51..02d41948f12 100644 --- a/addons/mail/static/src/scss/abstract_thread_window.scss +++ b/addons/mail/static/src/scss/abstract_thread_window.scss @@ -33,8 +33,8 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; color: white; padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap; border-radius: 3px 3px 0 0; - border-bottom: 1px solid $gray-lighter-dark; - background-color: $o-brand-primary; + border-bottom: 1px solid gray('300'); + background-color: $o-brand-odoo; padding: 8px; @include media-breakpoint-down(sm) { @@ -97,7 +97,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; width: auto; height: 28px; color: white; - background-color: $gray-dark; + background-color: gray('900'); cursor: pointer; box-shadow: none; @@ -114,7 +114,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; .o_total_unread_counter { @include o-position-absolute(-10px, 0, auto, auto); - background-color: $o-brand-optional; + background-color: $o-brand-primary; padding: 0 2px; font-size: smaller; } @@ -134,7 +134,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; border-top: 1px solid white; } &:hover { - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } } diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss index 1a804bfd4ea..b870eb06c50 100644 --- a/addons/mail/static/src/scss/chatter.scss +++ b/addons/mail/static/src/scss/chatter.scss @@ -32,12 +32,12 @@ > .btn, > .o_followers{ border-radius: $border-radius-sm $border-radius-sm 0 0; border-width: 0 0 1px; - border-bottom-color: $gray-lighter-dark; + border-bottom-color: gray('300'); &.o_active { - color: $o-brand-primary; - background-color: $gray-lighter; - border-color: $gray-lighter-dark; + color: $o-brand-odoo; + background-color: gray('200'); + border-color: gray('300'); border-width: 1px 1px 0; } } diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index a9c6a216efa..443213ae37e 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -18,7 +18,7 @@ display: flex; margin: 1px 0; border-top: none; - background: $gray-lighter; + background: gray('200'); .o_composer, .o_composer_subject { position: relative; @@ -69,15 +69,15 @@ } @include media-breakpoint-down(sm) { .o_composer_button_send { - color: $o-brand-optional; + color: $o-brand-primary; } } .o_mail_emoji_container { padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0; - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); border-width: 1px 0 0 0; - background-color: $gray-lighter; + background-color: gray('200'); .o_mail_emoji { margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap; @@ -92,7 +92,7 @@ &:not(.o_chat_mini_composer) { padding: $o-mail-thread-avatar-size*0.5; padding-left: $grid-gutter-width*0.5 + $o-mail-thread-avatar-size + $o-mail-chatter-gap; - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); border-top: none; .o_chatter_avatar { @@ -120,7 +120,7 @@ } .o_composer, .o_composer_subject { - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); textarea, input { padding: 0 0 $o-mail-chatter-gap; @@ -133,7 +133,7 @@ } .o_chatter_composer_tools { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); } &:not(.o_chat_inline_composer) { @@ -182,7 +182,7 @@ .o_chatter_composer_tools { border: none; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); padding-left: $o-mail-chatter-gap*0.5; transform: translateY(-$o-mail-chatter-gap*0.5); } @@ -191,7 +191,7 @@ border-radius: 0 3px 3px 0; // Make the button appear as the same size as the subject input padding: 10px $input-btn-padding-x; - border: 1px solid darken($o-brand-optional, 5%); + border: 1px solid darken($o-brand-primary, 5%); border-left-width: 0; } } @@ -200,7 +200,7 @@ // Mini-composer enabled &.o_chat_mini_composer { .o_composer_container { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); width: 100%; } .o_composer { @@ -318,7 +318,7 @@ $o-mail-attachment-margin: 5px; } .o_attachment_delete { - background: desaturate($brand-primary, 50%); + background: desaturate(theme-color('primary'), 50%); color: white; cursor: pointer; font-size: 20px; @@ -326,7 +326,7 @@ $o-mail-attachment-margin: 5px; transition: all 0.3s ease 0s; &:hover { - background: $brand-primary; + background: theme-color('primary'); } } @@ -371,7 +371,7 @@ $o-mail-attachment-margin: 5px; .o_attachment_wrap { padding: 0; border-radius: 2px; - border: 1px solid $gray-lighter-darker; + border: 1px solid gray('400'); } .o_image_box { @@ -415,7 +415,7 @@ $o-mail-attachment-margin: 5px; @mixin o-viewer-black-btn { background-color: rgba(black, 0.4); - color: rgba($gray-lighter, 0.7); + color: rgba(gray('200'), 0.7); &:hover { background-color: rgba(black, 0.6); @@ -423,7 +423,7 @@ $o-mail-attachment-margin: 5px; } &.disabled { - color: $gray-light; + color: gray('600'); background: none; } } @@ -444,7 +444,7 @@ $o-mail-attachment-margin: 5px; color: #FFFFFF; a { - @include o-hover-text-color(rgba($gray-lighter, 0.6), white); + @include o-hover-text-color(rgba(gray('200'), 0.6), white); } .o_close_btn { diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 392b09e0a43..1a9995c68d7 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -136,7 +136,7 @@ padding-top: 10px; padding-bottom: 10px; cursor: pointer; - background-color: darken($gray, 8%); + background-color: darken(gray('700'), 8%); color: white; } } @@ -148,14 +148,14 @@ .o_mail_discuss { .o_mail_discuss_sidebar { - background-color: $gray-dark; - color: $gray-lighter-dark; + background-color: gray('900'); + color: gray('300'); .o_mail_discuss_item { cursor: pointer; &:hover { - background-color: darken($gray-dark,2%); + background-color: darken(gray('900'),2%); .o_mail_partner_unpin, .o_mail_channel_settings { opacity: $o-mail-sidebar-icon-opacity; @@ -163,8 +163,8 @@ } &.o_active { - background-color: $gray-darker; - box-shadow: inset 3px 0 0 $o-brand-optional; + background-color: gray('900'); + box-shadow: inset 3px 0 0 $o-brand-primary; } .o_mail_hash { @@ -181,7 +181,7 @@ > .badge { color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; font-size: 10px; line-height: 16px; height: 18px; @@ -191,14 +191,14 @@ font-size: $font-size-base; &.o_mail_mailbox_title_starred > .badge { - background-color: $gray-light; - border-color: $gray-light; + background-color: gray('600'); + border-color: gray('600'); } } } > hr { - border-color: $gray; + border-color: gray('700'); } .o_mail_add_thread { @@ -216,7 +216,7 @@ margin: 0; font-size: $font-size-sm; text-transform: uppercase; - color: $gray-light; + color: gray('600'); &.o_mail_open_channels:hover { color: white; } @@ -224,7 +224,7 @@ .o_add { cursor: pointer; @include o-hover-opacity($o-mail-sidebar-icon-opacity, 1); - @include o-hover-text-color($gray-light, white); + @include o-hover-text-color(gray('600'), white); } } } @@ -249,10 +249,10 @@ font-size: 1em; position: relative; &.o_user_online { - color: $o-brand-optional; + color: $o-brand-primary; } &.o_user_idle { - color: $brand-warning; + color: theme-color('warning'); } } @@ -270,7 +270,7 @@ display: flex; flex: 0 0 auto; z-index: 2; - box-shadow: 0 2px 4px $gray-lighter-darker; + box-shadow: 0 2px 4px gray('400'); .o_mailbox_inbox_item { flex: 1 1 auto; @@ -278,7 +278,7 @@ padding: 2%; &.btn-secondary { - border-bottom: 1px solid $gray-lighter-darker + border-bottom: 1px solid gray('400') } } } @@ -321,13 +321,13 @@ .o_mail_preview { display: flex; - background-color: $gray-lighter; + background-color: gray('200'); color: $o-main-text-color; cursor: pointer; overflow: hidden; position: relative; &:hover { - background-color: $gray-lighter-dark; + background-color: gray('300'); .o_preview_name { color: $headings-color; } @@ -336,7 +336,7 @@ } } &:not(:last-child) { - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); } .o_mail_preview_image { flex: 0 0 auto; @@ -384,7 +384,7 @@ &.o_preview_unread { background-color: transparent; &:hover { - background-color: $gray-lighter; + background-color: gray('200'); } .o_preview_info { .o_preview_title { @@ -392,7 +392,7 @@ font-weight: 700; } .o_last_message_date { - color: $o-brand-optional; + color: $o-brand-primary; } } } @@ -431,7 +431,7 @@ .o_mail_mobile_tabs { display: flex; - box-shadow: 0 0 8px $gray-lighter-darker; + box-shadow: 0 0 8px gray('400'); .o_mail_mobile_tab { display: flex; @@ -440,7 +440,7 @@ flex-flow: column nowrap; justify-content: space-between; padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2; - box-shadow: 1px 0 0 $gray-lighter-darker; + box-shadow: 1px 0 0 gray('400'); text-align: center; > span { @@ -455,7 +455,7 @@ } &.active > span { - color: $o-brand-optional; + color: $o-brand-primary; } } } diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss index c0748f67a56..635e37c902c 100644 --- a/addons/mail/static/src/scss/followers.scss +++ b/addons/mail/static/src/scss/followers.scss @@ -62,10 +62,10 @@ .fa { &.fa-times { - color: $brand-warning; + color: theme-color('warning'); } &.fa-check { - color: $brand-success; + color: theme-color('success'); } } } diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index c9763a025be..d3c4dec0dfc 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -66,7 +66,7 @@ .o_activity_info { vertical-align: baseline; padding: 4px 6px; - background: $gray-lighter; + background: gray('200'); border-radius: 2px 2px 0 0; @include o-hover-opacity(1, 1); @@ -113,13 +113,13 @@ } .o_activity_color_planned { - color: $brand-success; + color: theme-color('success'); } .o_activity_color_overdue { - color: $brand-danger; + color: theme-color('danger'); } .o_activity_color_today { - color: $brand-warning; + color: theme-color('warning'); } } @@ -157,7 +157,7 @@ & > li:last-child { background-color: $o-brand-lightsecondary; - color: $gray-dark; + color: gray('900'); line-height: 3em; } li > ul.o_activity_log { @@ -179,7 +179,7 @@ padding: 8px 10px 8px 0px; vertical-align: middle; &:hover { - background-color: $gray-lighter; + background-color: gray('200'); .o_activity_link_kanban { visibility: visible; } diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss index d52add73ec4..1383d462a38 100644 --- a/addons/mail/static/src/scss/systray.scss +++ b/addons/mail/static/src/scss/systray.scss @@ -21,7 +21,7 @@ } .o_notification_counter { @include o-position-absolute($top: 20%, $right: 1px); - background: $o-brand-optional; + background: $o-brand-primary; color: white; padding: 0em 0.3em; font-size: 0.7em; @@ -42,15 +42,15 @@ display: flex; flex: 0 0 auto; justify-content: space-between; - border-bottom: 1px solid $gray-lighter-darker; - box-shadow: 0 0 2px $gray-lighter-darker; + border-bottom: 1px solid gray('400'); + box-shadow: 0 0 2px gray('400'); .o_filter_button, .o_new_message { padding: 5px; } .o_filter_button { color: $o-main-color-muted; &:hover, &.active { - color: $o-brand-optional; + color: $o-brand-primary; } &.active { cursor: default; @@ -119,7 +119,7 @@ padding: 5px; height: 44px; border-bottom: 1px solid #ebebeb; - box-shadow: 0 0 2px $gray-lighter-darker; + box-shadow: 0 0 2px gray('400'); } .o_mail_systray_dropdown_items { max-height: none; diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss index 14ff5c09bba..6376fff217e 100644 --- a/addons/mail/static/src/scss/thread.scss +++ b/addons/mail/static/src/scss/thread.scss @@ -10,7 +10,7 @@ margin-top: 0px; margin-bottom: 15px; } - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); text-align: center; .o_thread_date { @@ -25,14 +25,14 @@ .o_thread_new_messages_separator { margin-bottom: 15px; - border-bottom: solid lighten($o-brand-primary, 15%) 1px; + border-bottom: solid lighten($o-brand-odoo, 15%) 1px; text-align: right; .o_thread_separator_label { position: relative; top: 8px; padding: 0 10px; background: white; - color: lighten($o-brand-primary, 15%); + color: lighten($o-brand-odoo, 15%); font-size: smaller; } } @@ -43,8 +43,8 @@ margin-bottom: 0px; &.o_mail_not_discussion { - background-color: rgba($gray-lighter-dark, 0.5); - border-bottom: 1px solid $gray-lighter-darker; + background-color: rgba(gray('300'), 0.5); + border-bottom: 1px solid gray('400'); } .o_thread_message_sidebar { @@ -181,9 +181,9 @@ .o_thread_tooltip_content { top: 10px; - background: $gray-lighter; + background: gray('200'); padding: 4px; - border: solid $gray-lighter 1px; + border: solid gray('200') 1px; border-radius: 5px; color: gray; width: 300px; diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index daaf956fc68..ed4584cb61b 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -64,7 +64,7 @@ } &.selected .o_thumb { - border: 2px solid $o-brand-primary; + border: 2px solid $o-brand-odoo; background-color: $o-we-color-dark; } } diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss index 2d282b7a2dc..a1d4227e182 100644 --- a/addons/note/static/src/scss/note.scss +++ b/addons/note/static/src/scss/note.scss @@ -19,7 +19,7 @@ &.o_form_readonly { .oe_memo { padding: $input-btn-padding-x-lg; - border-bottom: 1px solid $legend-border-color; + border-bottom: 1px solid gray('900'); } } } diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss index 9348c497e95..cdeb21009c1 100644 --- a/addons/portal/static/src/scss/portal.scss +++ b/addons/portal/static/src/scss/portal.scss @@ -390,7 +390,7 @@ img.o_we_custom_image { } .o_portal_signature_form .o_portal_sign_error_msg { - color: $brand-danger; + color: $danger; } .label-optional { @@ -409,7 +409,7 @@ img.o_we_custom_image { height: 3.7em; } .o_portal_html_view { - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); border-radius: 5px; padding-right: 1px; } diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss index 221f91fc8a9..edc1faca887 100644 --- a/addons/project/static/src/scss/project_dashboard.scss +++ b/addons/project/static/src/scss/project_dashboard.scss @@ -66,7 +66,7 @@ outline: 2px solid transparent; box-shadow: 0px 0px 1px 1px #ccc; &.o_selected { - outline-color: $o-brand-optional; + outline-color: $o-brand-primary; } > img { @include o-position-absolute($top: 0, $left: 0, $right: 0, $bottom: 0); diff --git a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss index 00d16e8e325..e4eec1d5909 100644 --- a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss +++ b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss @@ -2,7 +2,7 @@ .o_timesheet_plan_sale_timesheet { [type='action'] { - color: $o-brand-optional; + color: $o-brand-primary; cursor: pointer; } @@ -47,7 +47,7 @@ cursor: pointer; } .o_progress_non_billable_project { - background-color: $brand-primary; + background-color: theme-color('primary'); color: white; cursor: pointer; } @@ -82,14 +82,14 @@ text-align: center; } th.o_right_bordered, td.o_right_bordered { - border-right: 2px solid $o-brand-optional; + border-right: 2px solid $o-brand-primary; text-align: center; } .o_timesheet_forecast_sale_order{ font-weight: bold; & > td:first-child { - color: $o-brand-optional; + color: $o-brand-primary; } } .o_timesheet_forecast_sale_order_line{ diff --git a/addons/sales_team/static/src/scss/sales_team_dashboard.scss b/addons/sales_team/static/src/scss/sales_team_dashboard.scss index a57003b8285..9f8c01fac03 100644 --- a/addons/sales_team/static/src/scss/sales_team_dashboard.scss +++ b/addons/sales_team/static/src/scss/sales_team_dashboard.scss @@ -24,7 +24,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $o-brand-primary; + // stroke: $o-brand-odoo; line { display: none; diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss index b396442df02..172790fc0b7 100644 --- a/addons/theme_default/static/src/scss/bootstrap_overridden.scss +++ b/addons/theme_default/static/src/scss/bootstrap_overridden.scss @@ -1,5 +1,7 @@ -$gray-darker: lighten(#000, 20%); -$gray-dark: lighten(#000, 40%); -$gray: lighten(#000, 55%); -$gray-light: lighten(#000, 70%); -$gray-lighter: lighten(#000, 80%); + +// TODO review BS4 gray palette for theme default +// $gray-900: lighten(#000, 20%); +// $gray-800: lighten(#000, 40%); +// $gray-700: lighten(#000, 55%); +// $gray-600: lighten(#000, 70%); +// $gray-200: lighten(#000, 80%); diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss index a5c9dbbac11..790d345ece7 100644 --- a/addons/theme_default/static/src/scss/option_color_amethyst.scss +++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ +// TODO review BS4 custo for theme default -.bg-primary { - background-color: $color-clouds; -} -.bg-success { - background-color: $color-purple; -} -.bg-info { - background-color: $color-twilight; -} -.bg-warning { - background-color: $color-purple-dark; -} -.bg-danger { - background-color: $color-midnight; -} +// /* COLORED BG -------------------------------------------------------- */ -.btn .fa { - color: white;} +// .bg-primary { +// background-color: $color-clouds; +// } +// .bg-success { +// background-color: $color-purple; +// } +// .bg-info { +// background-color: $color-twilight; +// } +// .bg-warning { +// background-color: $color-purple-dark; +// } +// .bg-danger { +// background-color: $color-midnight; +// } -.btn-secondary .fa { - color: $gray-dark;} +// .btn .fa { +// color: white;} -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ +// .btn-secondary .fa { +// color: gray('900');} -.bg-transparent-color { background: $color-twilight; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- -/* Footer ----------------------------------------------------------- */ +// .bg-transparent-color { background: $color-twilight; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} -#wrapwrap footer { - background-color: $color-concrete-dark; - color: $gray-light; - } -footer ul li a { - color: $color-clouds; - } -footer ul li a:hover { - color: white; - text-decoration: none; - } -footer h4 { - color: $gray-lighter; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-concrete; - } +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-concrete-dark; +// color: gray('600'); +// } +// footer ul li a { +// color: $color-clouds; +// } +// footer ul li a:hover { +// color: white; +// text-decoration: none; +// } +// footer h4 { +// color: gray('200'); +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-concrete; +// } diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss index a50fa8aaf78..5c35da75b02 100644 --- a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss @@ -1,17 +1,19 @@ -/* GRAYS --------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$gray-darker: lighten(#000, 30%); +// /* GRAYS --------------------------------------------------------- */ -/* TEXTS & LINKS --------------------------------------------------- */ +// $gray-900: lighten(#000, 30%); -$text-muted: $color-primary; -$link-color: $color-primary; -$link-hover-color: $color-success; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-primary; +// $link-color: $color-primary; +// $link-hover-color: $color-success; -$btn-primary-bg: $color-silver; -$btn-success-bg: $color-concrete; -$btn-info-bg: $color-purple; -$btn-warning-bg: $color-purple-light; -$btn-danger-bg: $color-red; +// /* BUTTONS --------------------------------------------------------- */ + +// $btn-primary-bg: $color-silver; +// $btn-success-bg: $color-concrete; +// $btn-info-bg: $color-purple; +// $btn-warning-bg: $color-purple-light; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss index 74d4f5cf00e..25fda624a32 100644 --- a/addons/theme_default/static/src/scss/option_color_cobalt.scss +++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss @@ -1,52 +1,54 @@ -/* COLORED BG -------------------------------------------------------- */ +// TODO review BS4 custo for theme default -.bg-primary { - background-color: $color-wind; -} -.bg-success { - background-color: $color-silver; -} -.bg-info { - background-color: $color-blue; -} -.bg-warning { - background-color: $color-blue-dark; -} -.bg-danger { - background-color: $color-asphalt; -} +// /* COLORED BG -------------------------------------------------------- */ -.btn .fa { - color: white;} +// .bg-primary { +// background-color: $color-wind; +// } +// .bg-success { +// background-color: $color-silver; +// } +// .bg-info { +// background-color: $color-blue; +// } +// .bg-warning { +// background-color: $color-blue-dark; +// } +// .bg-danger { +// background-color: $color-asphalt; +// } -.btn-secondary .fa { - color: $gray-dark;} +// .btn .fa { +// color: white;} -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ +// .btn-secondary .fa { +// color: gray('900');} -.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;} -.bg-transparent-shade { background: black; opacity: 0.5;} +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- -/* Footer ----------------------------------------------------------- */ +// .bg-transparent-color { background: $color-blue-dark; opacity: 0.9;} +// .bg-transparent-shade { background: black; opacity: 0.5;} -#wrapwrap footer { - background-color: $color-midnight; - color: $gray; -} -footer ul li a { - color: $color-silver; -} +// /* Footer ----------------------------------------------------------- */ -footer ul li a:hover { - color: $color-clouds; - text-decoration: none; -} -footer h4 { - color: $color-stone; - padding-bottom: 12px; - text-transform: uppercase; -} -footer .fa { - color: $gray-light; -} +// #wrapwrap footer { +// background-color: $color-midnight; +// color: gray('700'); +// } +// footer ul li a { +// color: $color-silver; +// } + +// footer ul li a:hover { +// color: $color-clouds; +// text-decoration: none; +// } +// footer h4 { +// color: $color-stone; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: gray('600'); +// } diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss index ab87820cddb..a5faaf2411c 100644 --- a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS --------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $color-primary; -$link-color: $color-primary; -$link-hover-color: $color-info; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-primary; +// $link-color: $color-primary; +// $link-hover-color: $color-info; -$btn-primary-bg: $color-blue; -$btn-success-bg: $color-turquoise; -$btn-info-bg: $color-green; -$btn-warning-bg: $color-orange; -$btn-danger-bg: $color-red; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-blue; +// $btn-success-bg: $color-turquoise; +// $btn-info-bg: $color-green; +// $btn-warning-bg: $color-orange; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss index 0c9fc0b47db..f1dba7d287f 100644 --- a/addons/theme_default/static/src/scss/option_color_emerald.scss +++ b/addons/theme_default/static/src/scss/option_color_emerald.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ +// TODO review BS4 custo for theme default -.bg-primary { - background-color: $color-wind; -} -.bg-success { - background-color: $color-silver; -} -.bg-info { - background-color: $color-green-dark; -} -.bg-warning { - background-color: $color-green; -} -.bg-danger { - background-color: $color-forest; -} +// /* COLORED BG -------------------------------------------------------- */ -.btn .fa { - color: white;} +// .bg-primary { +// background-color: $color-wind; +// } +// .bg-success { +// background-color: $color-silver; +// } +// .bg-info { +// background-color: $color-green-dark; +// } +// .bg-warning { +// background-color: $color-green; +// } +// .bg-danger { +// background-color: $color-forest; +// } -.btn-secondary .fa { - color: $gray-dark;} +// .btn .fa { +// color: white;} -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ +// .btn-secondary .fa { +// color: gray('900');} -.bg-transparent-color { background: $color-green-dark; opacity: 0.9;} -.bg-transparent-shade { background: black; opacity: 0.5;} +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- -/* Footer ----------------------------------------------------------- */ +// .bg-transparent-color { background: $color-green-dark; opacity: 0.9;} +// .bg-transparent-shade { background: black; opacity: 0.5;} -#wrapwrap footer { - background-color: $color-concrete-dark; - color: $gray; - } -footer ul li a { - color: $color-clouds; - } -footer ul li a:hover { - color: white; - text-decoration: none; - } -footer h4 { - color: $color-silver; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-clouds; - } +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-concrete-dark; +// color: gray('700'); +// } +// footer ul li a { +// color: $color-clouds; +// } +// footer ul li a:hover { +// color: white; +// text-decoration: none; +// } +// footer h4 { +// color: $color-silver; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-clouds; +// } diff --git a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss index 9b8dec0f38e..4ff78669b81 100644 --- a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS --------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $color-success; -$link-color: $color-success; -$link-hover-color: $color-primary; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-success; +// $link-color: $color-success; +// $link-hover-color: $color-primary; -$btn-primary-bg: $color-green; -$btn-success-bg: $color-turquoise; -$btn-info-bg: $color-blue; -$btn-warning-bg: $color-orange; -$btn-danger-bg: $color-red; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-green; +// $btn-success-bg: $color-turquoise; +// $btn-info-bg: $color-blue; +// $btn-warning-bg: $color-orange; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss index 9f27adff25f..ee3b64c3de5 100644 --- a/addons/theme_default/static/src/scss/option_color_gold.scss +++ b/addons/theme_default/static/src/scss/option_color_gold.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ +// TODO review BS4 custo for theme default -.bg-primary { - background-color: $color-sand; -} -.bg-success { - background-color: $color-yellow; -} -.bg-info { - background-color: $color-orange; -} -.bg-warning { - background-color: $color-yellow-dark; -} -.bg-danger { - background-color: $color-orange-dark; -} +// /* COLORED BG -------------------------------------------------------- */ -.btn .fa { - color: white;} +// .bg-primary { +// background-color: $color-sand; +// } +// .bg-success { +// background-color: $color-yellow; +// } +// .bg-info { +// background-color: $color-orange; +// } +// .bg-warning { +// background-color: $color-yellow-dark; +// } +// .bg-danger { +// background-color: $color-orange-dark; +// } -.btn-secondary .fa { - color: $gray-dark;} +// .btn .fa { +// color: white;} -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ +// .btn-secondary .fa { +// color: gray('900');} -.bg-transparent-color { background: $color-orange-dark; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- -/* Footer ----------------------------------------------------------- */ +// .bg-transparent-color { background: $color-orange-dark; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} -#wrapwrap footer { - background-color: $color-orange-dark; - color: white; - } -footer ul li a { - color: $color-beach; - } -footer ul li a:hover { - color: $color-yellow; - text-decoration: none; - } -footer h4 { - color: $color-beach; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-beach; - } +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-orange-dark; +// color: white; +// } +// footer ul li a { +// color: $color-beach; +// } +// footer ul li a:hover { +// color: $color-yellow; +// text-decoration: none; +// } +// footer h4 { +// color: $color-beach; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-beach; +// } diff --git a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss index eb10f308be8..21a94e8ffe1 100644 --- a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS ------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $gray; -$link-color: $color-info; -$link-hover-color: $color-primary; +// /* TEXTS & LINKS ------------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: gray('700'); +// $link-color: $color-info; +// $link-hover-color: $color-primary; -$btn-primary-bg: $color-yellow; -$btn-success-bg: $color-orange; -$btn-info-bg: $color-yellow-dark; -$btn-warning-bg: $color-orange-dark; -$btn-danger-bg: $color-red-dark; +// /* BUTTONS --------------------------------------------------------- */ + +// $btn-primary-bg: $color-yellow; +// $btn-success-bg: $color-orange; +// $btn-info-bg: $color-yellow-dark; +// $btn-warning-bg: $color-orange-dark; +// $btn-danger-bg: $color-red-dark; diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss index f1883a2e60f..d652a80518e 100644 --- a/addons/theme_default/static/src/scss/option_color_ruby.scss +++ b/addons/theme_default/static/src/scss/option_color_ruby.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ +// TODO review BS4 custo for theme default -.bg-primary { - background-color: $color-sand; -} -.bg-success { - background-color: $color-red; -} -.bg-info { - background-color: $color-red-dark; -} -.bg-warning { - background-color: $color-orange; -} -.bg-danger { - background-color: $color-orange-dark; -} +// /* COLORED BG -------------------------------------------------------- */ -.btn .fa { - color: white;} +// .bg-primary { +// background-color: $color-sand; +// } +// .bg-success { +// background-color: $color-red; +// } +// .bg-info { +// background-color: $color-red-dark; +// } +// .bg-warning { +// background-color: $color-orange; +// } +// .bg-danger { +// background-color: $color-orange-dark; +// } -.btn-secondary .fa { - color: $gray-dark;} +// .btn .fa { +// color: white;} -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ +// .btn-secondary .fa { +// color: gray('900');} -.bg-transparent-color { background: $color-red-dark; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- -/* Footer ----------------------------------------------------------- */ +// .bg-transparent-color { background: $color-red-dark; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} -#wrapwrap footer { - background-color: $color-burgundy; - color: $gray-lighter; - } -footer ul li a { - color: white; - } -footer ul li a:hover { - color: $color-orange; - text-decoration: none; - } -footer h4 { - color: $color-sand; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-red; - } +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-burgundy; +// color: gray('200'); +// } +// footer ul li a { +// color: white; +// } +// footer ul li a:hover { +// color: $color-orange; +// text-decoration: none; +// } +// footer h4 { +// color: $color-sand; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-red; +// } diff --git a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss index 7fd168c8bd7..174bedbb4ec 100644 --- a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss @@ -1,17 +1,19 @@ -/* GRAYS --------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$gray: lighten(#000, 50%); +// /* GRAYS --------------------------------------------------------- */ -/* TEXT & LINKS -------------------------------------------------------- */ +// $gray-700: lighten(#000, 50%); -$text-muted: $gray; -$link-color: $color-primary; -$link-hover-color: $color-success; +// /* TEXT & LINKS -------------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: gray('700'); +// $link-color: $color-primary; +// $link-hover-color: $color-success; -$btn-primary-bg: $color-red; -$btn-success-bg: $color-orange; -$btn-info-bg: $color-yellow-dark; -$btn-warning-bg: $color-orange-dark; -$btn-danger-bg: $color-red-dark; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-red; +// $btn-success-bg: $color-orange; +// $btn-info-bg: $color-yellow-dark; +// $btn-warning-bg: $color-orange-dark; +// $btn-danger-bg: $color-red-dark; diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss index b6615a39f80..436298872da 100644 --- a/addons/web/static/src/scss/base_settings.scss +++ b/addons/web/static/src/scss/base_settings.scss @@ -41,15 +41,15 @@ height: 28px; padding: 0px; border: 0px; - border-bottom: 1px solid $gray-lighter-darker; - border-color: $gray; + border-bottom: 1px solid gray('400'); + border-color: gray('700'); box-shadow: none; font-weight: 500; } .searchIcon { @include o-position-absolute(4px, 0); - color: $gray; + color: gray('700'); } } } @@ -83,7 +83,7 @@ display: flex; flex: 0 0 auto; flex-flow: column nowrap; - background: $gray-dark; + background: gray('900'); overflow: auto; padding-top: $o-horizontal-padding*0.5; @@ -96,8 +96,8 @@ } .selected { - background-color: $gray-darker; - box-shadow: inset 3px 0 0 $o-brand-optional; + background-color: gray('900'); + box-shadow: inset 3px 0 0 $o-brand-primary; .app_name { color: white; @@ -108,7 +108,7 @@ display: flex; padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding; height: 40px; - color: $gray-lighter-darker; + color: gray('400'); font-size: 13px; line-height: 40px; cursor: pointer; @@ -138,7 +138,7 @@ &:after { content: ''; - background: $o-brand-optional; + background: $o-brand-primary; opacity: 0; @include o-position-absolute(auto, 0, 0, 0); @include size(100%, 3px); @@ -179,7 +179,7 @@ h2 { margin-bottom: 0; @include o-base-settings-horizontal-padding; - background-color: $gray-lighter; + background-color: gray('200'); font-size: 15px; font-weight: bold; @@ -199,7 +199,7 @@ display: flex; margin: 30px 0 10px; @include o-base-settings-horizontal-padding; - background-color: $gray-lighter; + background-color: gray('200'); .icon { width: 25px; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 9c26fa886eb..a96775ee837 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -13,13 +13,14 @@ $gray-200: $o-color-silver; // FIXME keep this or use bootstrap default ? (also $gray-300: #dee2e6 !default; // This is BS default $gray-400: #ced4da !default; // This is BS default $gray-500: #adb5bd !default; // This is BS default -$gray-600: $o-color-gray-light !default; // This is BS default +$gray-600: #6c757d !default; // This is BS default $gray-700: #495057 !default; // This is BS default $gray-800: #343a40 !default; // This is BS default $gray-900: #212529 !default; // This is BS default $black: #000 !default; // This is BS default $primary: $o-brand-primary; +$secondary: $white; // Body // @@ -32,7 +33,6 @@ $body-color: $o-main-text-color; // // Style anchor elements. -$link-color: $o-brand-optional; $link-hover-decoration: none; // Grid columns @@ -47,7 +47,7 @@ $grid-gutter-width: $o-horizontal-padding * 2; $border-radius: 3px; -$component-active-color: $o-brand-optional; +$component-active-color: $o-brand-primary; $component-active-bg: $gray-200; // Fonts @@ -105,7 +105,7 @@ $nav-tabs-link-active-bg: $white; $nav-pills-border-radius: 0; $nav-pills-link-active-color: $white; -$nav-pills-link-active-bg: $o-brand-optional; +$nav-pills-link-active-bg: $o-brand-primary; // Navbar diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index 25d4a725604..144b5f7bbde 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/addons/web/static/src/scss/control_panel.scss @@ -55,7 +55,7 @@ } .o_form_binary_form span { padding: 3px 25px; - color: $btn-secondary-color; + color: $o-brand-primary; } .o_form_binary_form:hover { background-color: $table-bg-hover; diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss index ab2635657ad..c03d13b355b 100644 --- a/addons/web/static/src/scss/data_export.scss +++ b/addons/web/static/src/scss/data_export.scss @@ -52,7 +52,7 @@ user-select: none; &.o_selected > .o_tree_column { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; } diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss index b8902541734..68a839d8fd8 100644 --- a/addons/web/static/src/scss/datepicker.scss +++ b/addons/web/static/src/scss/datepicker.scss @@ -43,13 +43,13 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{ .table-condensed { > thead { color: white; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; > tr { &:first-child { th:hover { color: white; - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } @@ -67,12 +67,12 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{ > tr { > td { &.active, .active { - background-color: $o-brand-optional; + background-color: $o-brand-primary; border-radius: 100px; } &.today:before { - border-bottom-color: $o-brand-optional; + border-bottom-color: $o-brand-primary; } } } diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss index ed4ed956a9e..b35934973b9 100644 --- a/addons/web/static/src/scss/domain_selector.scss +++ b/addons/web/static/src/scss/domain_selector.scss @@ -35,7 +35,7 @@ padding-left: 5px; &:hover { - color: $brand-danger; + color: theme-color('danger'); } } } @@ -74,7 +74,7 @@ display: block; margin-top: 16px; padding: 8px 10px 12px; - background: $gray-dark; + background: gray('900'); color: rgba(white, 0.5); font-family: monospace; font-weight: normal; @@ -172,7 +172,7 @@ display: block; height: $o-domain-animation-bar-height; max-height: 0; - background-image: linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1)); + background-image: linear-gradient(45deg, rgba($o-brand-primary, 0.4), rgba($o-brand-primary, 0.1)); transition: max-height .05s ease .05s; } diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss index 8287e098b32..90deb20083f 100644 --- a/addons/web/static/src/scss/dropdown.scss +++ b/addons/web/static/src/scss/dropdown.scss @@ -21,7 +21,7 @@ &.ui-state-focus { background-image: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; border: none; font-weight: normal; margin: 0; @@ -29,7 +29,7 @@ &.o_m2o_dropdown_option { padding-left: 20px; > a { - color: $o-brand-primary; + color: $o-brand-odoo; } } } diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss index cc51876d017..ca57d9561f2 100644 --- a/addons/web/static/src/scss/dropdown_extra.scss +++ b/addons/web/static/src/scss/dropdown_extra.scss @@ -1,9 +1,9 @@ .ui-autocomplete .ui-menu-item { &.ui-state-focus { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; } &.o_m2o_dropdown_option > a { - color: $o-brand-primary; + color: $o-brand-odoo; } &.ui-state-focus > a, &.ui-state-focus.o_m2o_dropdown_option > a { diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index 22a392b762b..f869e0f37fe 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -6,8 +6,8 @@ // Invalid .o_field_invalid { &.o_input, .o_input, &.o_form_label { - color: $brand-danger!important; - border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important + color: theme-color('danger')!important; + border-color: theme-color('danger')!important; // enterprise o_required_modifier rule overrides this without !important } } @@ -119,7 +119,7 @@ display: inline-block; margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion border: 1px solid white; - box-shadow: 0 0 0 1px $gray-lighter-dark; + box-shadow: 0 0 0 1px gray('300'); > a { display: block; @@ -225,7 +225,7 @@ // Specific success color for toggle_button widget .fa.o_toggle_button_success { - color: $brand-success; + color: theme-color('success'); } // Handle widget @@ -239,15 +239,15 @@ margin: 0px 0px 4px 4px; padding: 1px 6px; color: $o-main-color-muted; - border: 1px solid $o-color-silver-dark; + border: 1px solid gray('300'); cursor: pointer; &.active { - color: $o-brand-optional; - border-color: $o-brand-optional; + color: $o-brand-primary; + border-color: $o-brand-primary; } &:hover:not(.active) { - color: darken($o-color-silver-dark, 30%); - border-color: darken($o-color-silver-dark, 30%); + color: darken(gray('300'), 30%); + border-color: darken(gray('300'), 30%); } } } @@ -299,7 +299,7 @@ margin-right: 10px; border-radius: 100%; overflow: hidden; - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:after { // Outside pie border to go over border-radius irregularities content: " "; @@ -328,7 +328,7 @@ border-radius: 100%; font-weight: 700; - color: $o-brand-primary; + color: $o-brand-odoo; } } } @@ -351,7 +351,7 @@ width: 100%; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; opacity: 0; transition: opacity ease 400ms; @@ -375,10 +375,10 @@ margin: 0px; text-align: center; &.o_select_file_button{ - background: $o-brand-optional; + background: $o-brand-primary; } &.o_clear_file_button{ - background: $brand-danger; + background: theme-color('danger'); } } } @@ -389,7 +389,7 @@ } &.o_field_invalid > img { - border: 1px solid $brand-danger; + border: 1px solid theme-color('danger'); } } @@ -417,9 +417,9 @@ &.o_field_copy { position: relative; border-radius: 5px; - border: 1px solid $btn-primary-border; + border: 1px solid $primary; font-size: $font-size-sm; - color: $o-brand-optional; + color: $o-brand-primary; font-weight: $badge-font-weight; text-align: center; .o_clipboard_button { diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss index 7e45291305f..47fca992eb5 100644 --- a/addons/web/static/src/scss/fields_extra.scss +++ b/addons/web/static/src/scss/fields_extra.scss @@ -43,7 +43,7 @@ margin-left: 5px; &:after { // Outside pie border to go over border-radius irregularities - border: 1px solid $o-brand-primary; + border: 1px solid $o-brand-odoo; } .o_pie_value { diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index 26431b969e6..730f5b9521b 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -143,7 +143,7 @@ display: flex; justify-content: space-between; padding-left: $o-horizontal-padding; - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); background-color: $o-view-background-color; > .o_statusbar_buttons, > .o_statusbar_status { @@ -182,7 +182,7 @@ font-weight: bold; position: relative; padding-left: $o-statusbar-arrow-width*2; - color: $gray; + color: gray('700'); border-width: 0 0 0; border-radius: 0; transition: all 0.1s ease 0s; @@ -192,7 +192,7 @@ } &:last-child { padding-left: $o-horizontal-padding - 1; - border-left: 1px solid $gray-lighter-darker; + border-left: 1px solid gray('400'); } &:active { @@ -203,7 +203,7 @@ opacity: 1.0; color: $text-muted; pointer-events: none; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } &:before, &:after { @@ -221,28 +221,28 @@ &:not(.disabled) { &:hover, &:active, &:focus { - color: $o-brand-optional; - background-color: $gray-lighter; + color: $o-brand-primary; + background-color: gray('200'); &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } } } &:before { right: -$o-statusbar-arrow-width; - border-left-color: $gray-lighter-dark; + border-left-color: gray('300'); } &.btn-primary.disabled { - color: $o-brand-primary; + color: $o-brand-odoo; font-size: 11px; - background-color: $gray-lighter; + background-color: gray('200'); cursor: default; &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } } @@ -475,7 +475,7 @@ .oe_subtotal_footer_separator { width: 100%; text-align: right; - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); font-weight: bold; font-size: 1.3em; } @@ -559,7 +559,7 @@ // Timezone widget warning .o_tz_warning { - color: $brand-danger; + color: theme-color('danger'); cursor: help; position: absolute; margin-left: -40px; diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index 29c2512c1ab..cadce3f6809 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -75,7 +75,7 @@ .o_stat_value { @include o-text-overflow(block); font-weight: 700; - color: $o-brand-primary; + color: $o-brand-odoo; } .o_stat_text { @include o-text-overflow(block); @@ -144,7 +144,7 @@ // Separators .o_horizontal_separator { - color: $o-brand-optional; + color: $o-brand-primary; font-weight: bold; } diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss index e6a62f5230f..5f16a222736 100644 --- a/addons/web/static/src/scss/kanban_column_progressbar.scss +++ b/addons/web/static/src/scss/kanban_column_progressbar.scss @@ -65,7 +65,7 @@ width: 76%; height: $font-size-sm; margin-bottom: 0; - background-color: $gray-lighter-dark; + background-color: gray('300'); box-shadow: none; .progress-bar { @@ -112,9 +112,9 @@ } .o_kanban_view .o_kanban_group { - @include o-kanban-css-filter(success, $brand-success); - @include o-kanban-css-filter(warning, $brand-warning); - @include o-kanban-css-filter(danger, $brand-danger); + @include o-kanban-css-filter(success, theme-color('success')); + @include o-kanban-css-filter(warning, theme-color('warning')); + @include o-kanban-css-filter(danger, theme-color('danger')); &.o_kanban_group_show { display: flex; diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss index e9f6c0d74fc..3330be5bba6 100644 --- a/addons/web/static/src/scss/kanban_dashboard.scss +++ b/addons/web/static/src/scss/kanban_dashboard.scss @@ -41,7 +41,7 @@ } > .o_kanban_card_manage_section { - border-bottom: 1px solid $gray-lighter-dark; + border-bottom: 1px solid gray('300'); margin-bottom: 10px; > div { @@ -82,7 +82,7 @@ } .row.o_kanban_card_manage_settings { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); padding-top: $o-kanban-dashboard-dropdown-complex-gap*3; .oe_kanban_colorpicker { @@ -91,7 +91,7 @@ } div[class*="col-"] + div[class*="col-"] { - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } // Default options box @@ -176,8 +176,8 @@ margin-bottom: -$o-kanban-dashboard-vpadding; &.bottom_block { - border-top: 1px solid $gray-lighter-dark; - background-color: $gray-lighter; + border-top: 1px solid gray('300'); + background-color: gray('200'); padding-top: $o-kanban-dashboard-vpadding; padding-bottom: $o-kanban-dashboard-vpadding; } diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index b2ae3aa0005..8b79e671019 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -6,12 +6,12 @@ // sidebar .o_kanban_examples_dialog_nav { flex: 0 0 auto; - border-right: 1px solid $gray-lighter-dark; + border-right: 1px solid gray('300'); background: white; > ul > li { margin: 0; - border-bottom: 1px solid $gray-lighter-dark; + border-bottom: 1px solid gray('300'); > a { padding: 12px 15px; @@ -23,7 +23,7 @@ } &.active > a { color: $headings-color; - border-left-color: $o-brand-optional; + border-left-color: $o-brand-primary; font-weight: bold; } } @@ -48,11 +48,11 @@ .o_kanban_examples_ghost { padding: 5px; margin-top: -1px; - border: thin solid $gray-lighter-dark; + border: thin solid gray('300'); background-color: white; .o_ghost_content { height: 12px; - background: $gray-lighter-dark; + background: gray('300'); &.o_ghost_tag { display: inline-block; width: 40%; diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss index 437ec25b864..ec8f41da4d8 100644 --- a/addons/web/static/src/scss/kanban_view.scss +++ b/addons/web/static/src/scss/kanban_view.scss @@ -12,16 +12,16 @@ .o_kanban_record, .o_kanban_quick_create { padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); background-color: white; @include media-breakpoint-down(sm) { padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile; } &:focus, &:focus-within { - -webkit-box-shadow: 1px 1px 1px 0px $gray-light; - -moz-box-shadow: 1px 1px 1px 0px $gray-light; - box-shadow: 1px 1px 1px 0px $gray-light; + -webkit-box-shadow: 1px 1px 1px 0px gray('600'); + -moz-box-shadow: 1px 1px 1px 0px gray('600'); + box-shadow: 1px 1px 1px 0px gray('600'); z-index: 1; // show the shadow on top of the previous & next cards in grouped mode outline: none; } @@ -43,7 +43,7 @@ .o_kanban_record { position: relative; display: inline-block; // Force the creation of a block formatting context to clear float items - border-color: $gray-lighter-darker; + border-color: gray('400'); min-width: 150px; margin: 0 0 -1px; @@ -124,7 +124,7 @@ .o_link_muted { color: $body-color; &:hover { - color: $brand-primary; + color: theme-color('primary'); text-decoration: underline; } } @@ -305,7 +305,7 @@ &.o_kanban_grouped { min-height: 100%; padding: 0; - background-color: $gray-lighter; + background-color: gray('200'); .o_kanban_record, .o_kanban_quick_create { width: 100%; @@ -430,7 +430,7 @@ .o_kanban_add_column { display: inline-block; padding: 10px 14px; - background-color: $o-color-silver-dark; + background-color: gray('300'); } .o_kanban_title { margin-left: 10px; @@ -443,7 +443,7 @@ height: 100%; border: none; box-shadow: 0 0 20px -10px; - background-color: $gray-lighter; + background-color: gray('200'); .o_kanban_header { height: 50px; @@ -464,7 +464,7 @@ } .o_kanban_muted_record { - background: $gray-lighter-dark; + background: gray('300'); height: 70px; margin: 10px 0px; } diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss index cf54d545a5a..b74ae8aaea5 100644 --- a/addons/web/static/src/scss/kanban_view_mobile.scss +++ b/addons/web/static/src/scss/kanban_view_mobile.scss @@ -19,7 +19,7 @@ &.o_current { font-weight: bold; - border-bottom: 3px solid $o-brand-optional; + border-bottom: 3px solid $o-brand-primary; } .o_column_title { white-space: nowrap; diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss index e23b2585b50..e04ff85597c 100644 --- a/addons/web/static/src/scss/layout_background.scss +++ b/addons/web/static/src/scss/layout_background.scss @@ -1,9 +1,9 @@ .o_background_footer, .o_background_header, .o_report_layout_background { font-family: 'Lato'; - color: $gray; + color: gray('700'); } .o_background_header { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); .company_address { min-width: 300px; } @@ -13,19 +13,19 @@ margin-right: 16px; } h3 { - color: $o-brand-primary; + color: $o-brand-odoo; font-weight: 700; max-width: 300px; } } .o_background_footer { ul { - border-top: 1px solid $o-brand-primary; - border-bottom: 1px solid $o-brand-primary; + border-top: 1px solid $o-brand-odoo; + border-bottom: 1px solid $o-brand-odoo; padding: 4px 0; margin: 0 0 4px 0; li { - color: $o-brand-primary; + color: $o-brand-odoo; } } } @@ -36,10 +36,10 @@ background-repeat: no-repeat; min-height: 900px; thead tr th, h2 { - color: $o-brand-primary; + color: $o-brand-odoo; } tbody { - color: $gray; + color: gray('700'); tr:nth-child(odd) { background-color: rgba(184, 171, 180, 0.2); } @@ -57,7 +57,7 @@ border-top: none !important; } tr:last-child td { - color: $o-brand-primary; + color: $o-brand-odoo; } } #total { diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss index 92208945f45..3e91ed87805 100644 --- a/addons/web/static/src/scss/layout_boxed.scss +++ b/addons/web/static/src/scss/layout_boxed.scss @@ -1,10 +1,10 @@ .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed { font-family: 'Lato'; - color: $gray; + color: gray('700'); font-size: 12px; } .o_boxed_header { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); img { max-height: 100px; } @@ -17,7 +17,7 @@ .o_boxed_footer { margin-top: 200px; white-space: nowrap; - border-top: 3px solid $gray; + border-top: 3px solid gray('700'); ul { margin: 4px 0; } @@ -26,7 +26,7 @@ // This is not a general rule since the id is not used in all the reports, // we should make a general structure for report body to use it everywhere #informations { - border: 1px solid $gray; + border: 1px solid gray('700'); padding-top: 10px; margin: 0; } @@ -34,22 +34,22 @@ text-transform: uppercase; } table { - border: 1px solid $gray; + border: 1px solid gray('700'); thead { tr th { - border-bottom: 3px solid $gray !important; + border-bottom: 3px solid gray('700') !important; text-transform: uppercase; } } tbody { - color: $gray; + color: gray('700'); tr { td { border-top: none; - border-right: 1px solid $gray; + border-right: 1px solid gray('700'); } td:last-child { - background-color: $gray-lighter; + background-color: gray('200'); } } } @@ -67,7 +67,7 @@ background-color: transparent; } tr:last-child td { - background-color: $gray; + background-color: gray('700'); color: #fff; } } diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss index 64ec2fd5245..88eb5d43f32 100644 --- a/addons/web/static/src/scss/layout_clean.scss +++ b/addons/web/static/src/scss/layout_clean.scss @@ -12,16 +12,16 @@ .o_clean_footer { margin: 0 3px; margin-top: 200px; - border-top: 3px solid $o-brand-primary; + border-top: 3px solid $o-brand-odoo; h4 { - color: $o-brand-primary; + color: $o-brand-odoo; font-weight: bolder; } .pagenumber { width: 35px; height: 35px; - border: 3px solid $o-brand-primary; - background-color: $o-brand-optional; + border: 3px solid $o-brand-odoo; + background-color: $o-brand-primary; color: white; padding-top: 6px; text-align: center; @@ -29,17 +29,17 @@ } .o_report_layout_clean { h1, h2, h3 { - color: $o-brand-optional; + color: $o-brand-primary; font-weight: bolder; } strong { - color: $o-brand-primary; + color: $o-brand-odoo; } table { thead { - color: $o-brand-primary; + color: $o-brand-odoo; tr th { - border-top: 3px solid $o-brand-primary !important; + border-top: 3px solid $o-brand-odoo !important; text-transform: uppercase; } tr th:last-child { @@ -54,7 +54,7 @@ border-top: none; } tr:last-child td { - border-bottom: 3px solid $o-brand-primary; + border-bottom: 3px solid $o-brand-odoo; } tr { td { @@ -72,7 +72,7 @@ top: -20px; > table { tr:last-child td { - border-top: 1px solid $gray-lighter !important; + border-top: 1px solid gray('200') !important; } tr:first-child td { /*we could get rid of this rule if .border-black td would be terminated in report.scss*/ diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss index 5d451a06942..1acd3b0cc90 100644 --- a/addons/web/static/src/scss/model_field_selector.scss +++ b/addons/web/static/src/scss/model_field_selector.scss @@ -51,7 +51,7 @@ .o_field_selector_popover_header { color: white; - background: $brand-primary; + background: theme-color('primary'); font-weight: bold; padding: 5px 0 5px 0.4em; @@ -67,14 +67,14 @@ &.o_prev_page { left: 0; - border-right: 1px solid darken($brand-primary, 10%); + border-right: 1px solid darken(theme-color('primary'), 10%); } &.o_field_selector_close { right: 0; - border-left: 1px solid darken($brand-primary, 10%); + border-left: 1px solid darken(theme-color('primary'), 10%); } &:hover { - background: darken($brand-primary, 10%); + background: darken(theme-color('primary'), 10%); } } &:before { @@ -82,7 +82,7 @@ content: ""; border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); - border-bottom: $o-field-selector-arrow-height solid $brand-primary; + border-bottom: $o-field-selector-arrow-height solid theme-color('primary'); } } .o_field_selector_popover_body { @@ -118,7 +118,7 @@ } } .o_field_selector_popover_footer { - background: $brand-primary; + background: theme-color('primary'); padding: 5px 0.4em; > input { diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss index 66a080cf1bd..51f30eba251 100644 --- a/addons/web/static/src/scss/navbar.scss +++ b/addons/web/static/src/scss/navbar.scss @@ -3,7 +3,7 @@ position: relative; height: $o-navbar-height; border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; > a, > button { @@ -91,12 +91,12 @@ > li { > a { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; border-bottom: 1px solid $o-brand-lightsecondary; &.dropdown-toggle { - background-color: lighten($o-brand-primary, 15%); + background-color: lighten($o-brand-odoo, 15%); pointer-events: none; // hack to prevent clicking on it because dropdown always opened } } diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss index 9aa0e21bbdd..d10c4997f43 100644 --- a/addons/web/static/src/scss/pivot_view.scss +++ b/addons/web/static/src/scss/pivot_view.scss @@ -5,7 +5,7 @@ // items corresponding to the clicked cell &.o_enable_linking { .o_pivot_cell_value:hover { - color: $o-brand-optional; + color: $o-brand-primary; cursor: pointer; } } diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 2589e201226..bc84cdef88a 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -9,16 +9,18 @@ $o-font-size-base: 1rem; $o-line-height-base: 1.5; // This is BS default // Colors -$o-brand-primary: #7c7bad; -$o-brand-optional: #7c7bad; +$o-community-color: #7C7BAD; +$o-enterprise-color: #875A7B; + +$o-brand-odoo: $o-community-color; +$o-brand-primary: $o-community-color; + $o-brand-secondary: #f0eeee; $o-brand-lightsecondary: #e2e2e0; -$o-color-silver: #F9F9F9; -$o-color-silver-dark: #E5E5E5; -$o-color-silver-darker: #d9d7d7; -$o-color-gray-light: lighten(#000, 46.7%); // This is BS default +$o-color-silver: #F9F9F9; // FIXME +// $o-color-silver-dark: #E5E5E5; // FIXME keep those or BS default ? +// $o-color-silver-darker: #d9d7d7; // FIXME keep those or BS default ? -$o-color-pink: #875A7B; // Enterprise $o-brand-primary $o-main-color-muted: #a8a8a8; $o-main-text-color: #4c4c4c; diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss index 8aaade8812f..71af77082f6 100644 --- a/addons/web/static/src/scss/progress_bar.scss +++ b/addons/web/static/src/scss/progress_bar.scss @@ -23,7 +23,7 @@ } .o_progressbar_complete { - background-color: $o-brand-optional; + background-color: $o-brand-primary; height: 100%; } } diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss index 7ed08fbbd3b..1deba51bfba 100644 --- a/addons/web/static/src/scss/search_view_extra.scss +++ b/addons/web/static/src/scss/search_view_extra.scss @@ -5,17 +5,17 @@ padding: 1px 25px 3px 5px; .o_searchview_facet { - border: 1px solid $gray-light; - background: lighten($o-brand-primary, 35%); + border: 1px solid gray('600'); + background: lighten($o-brand-odoo, 35%); .o_searchview_facet_label { - background-color: $gray-light; + background-color: gray('600'); } .o_facet_remove { - color: $gray-light; + color: gray('600'); &:hover { - color: $gray; + color: gray('700'); } } } @@ -28,7 +28,7 @@ @include o-position-absolute($top: 6px, $right: 5px); } .o_searchview_autocomplete li.o-selection-focus { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; > a { color: white; } diff --git a/addons/web/static/src/scss/search_view_mobile.scss b/addons/web/static/src/scss/search_view_mobile.scss index c36f5d39850..f5ccd133cc1 100644 --- a/addons/web/static/src/scss/search_view_mobile.scss +++ b/addons/web/static/src/scss/search_view_mobile.scss @@ -48,7 +48,7 @@ .o_dropdown { width: 100%; margin: 15px 5px 0px 5px; - border: solid 1px darken($gray-lighter, 20%); + border: solid 1px darken(gray('200'), 20%); } .o_dropdown_toggler_btn { @@ -66,7 +66,7 @@ width: 100%; box-shadow: none; border: none; - color: $gray-light; + color: gray('600'); .divider { margin: 0px; } @@ -85,4 +85,4 @@ z-index: 1000; } } -} \ No newline at end of file +} diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss index 72417929152..1787d629f94 100644 --- a/addons/web/static/src/scss/secondary_variables.scss +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -1,10 +1,3 @@ -// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used -// for design purposes only (e.g. cards' borders). We avoid to overwrite the -// default $gray-light because it is deeply used by bootstrap to define muted -// elements. -$gray-lighter-dark: $o-color-silver-dark; -$gray-lighter-darker: $o-color-silver-darker; - $o-webclient-background-color: $o-color-silver; $o-control-panel-background-color: $o-color-silver; @@ -12,7 +5,8 @@ $o-list-footer-color: $o-main-text-color; $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%); // UI custom colors for tags, kanban records' colors, ...) -$o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, +// Note: the first value is the old BS3 gray-light value +$o-colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; $o-sheet-cancel-hpadding: $o-horizontal-padding; @@ -21,7 +15,7 @@ $o-sheet-cancel-bpadding: $o-horizontal-padding; $o-statusbar-arrow-width: $o-statusbar-height / 3; $o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%); -$o-navbar-inverse-link-hover-bg: darken($o-brand-primary, 10%); +$o-navbar-inverse-link-hover-bg: darken($o-brand-odoo, 10%); $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%); diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss index 776704dd016..e40852dd6bc 100644 --- a/addons/web/static/src/scss/tooltip.scss +++ b/addons/web/static/src/scss/tooltip.scss @@ -17,7 +17,7 @@ text-align: left; .oe_tooltip_string { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; font-weight: bold; padding: 5px; diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 5c77bebd409..9f254c82ecd 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -233,13 +233,13 @@ @mixin o-kanban-dropdown-open { position: relative; background: white; - border-color: $gray-lighter-darker; + border-color: gray('400'); z-index: $zindex-dropdown + 1; } @mixin o-kanban-dropdown-menu { @include o-position-absolute($right: -1px); margin-top: -1px; - border-color: $gray-lighter-darker; + border-color: gray('400'); } @mixin o-kanban-colorpicker { max-width: 150px; @@ -249,7 +249,7 @@ display: inline-block; margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; border: 1px solid white; - box-shadow: 0 0 0 1px $gray-lighter-dark; + box-shadow: 0 0 0 1px gray('300'); > a { display: block; @@ -292,7 +292,7 @@ display: block; &:hover { - background-color: $gray-lighter-dark; + background-color: gray('300'); color: $headings-color; } } diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index e3562026ffe..e4e86231940 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -18,13 +18,13 @@ border-radius: 6px; vertical-align: middle; - background-color: $gray-lighter-dark; + background-color: gray('300'); &.o_status_green { - background-color: $brand-success; + background-color: theme-color('success'); } &.o_status_red { - background-color: $brand-danger; + background-color: theme-color('danger'); } } diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index f659ee7c466..ae22efb2675 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -1,5 +1,5 @@ @keyframes backgroundfade { - from {background-color: rgba($o-brand-primary, 0.5);} + from {background-color: rgba($o-brand-odoo, 0.5);} to {background-color: #f5f5f5;} } @@ -151,22 +151,22 @@ } } .ui-state-default { - color: $o-brand-primary; + color: $o-brand-odoo; &:hover { background: none; - background-color: rgba($o-brand-primary, 0.5); - border-color: $o-brand-primary; + background-color: rgba($o-brand-odoo, 0.5); + border-color: $o-brand-odoo; color: $o-view-background-color; }; } .ui-state-active { background: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: $o-view-background-color; } .o_selected_range.o_color { background: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; animation: backgroundfade 3s forwards; } } diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss index b90b6f5fee5..dc116ae0d20 100644 --- a/addons/web/static/src/scss/webclient.scss +++ b/addons/web/static/src/scss/webclient.scss @@ -105,7 +105,7 @@ div.o_boolean_toggle { } > input:checked + .slider { - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:before { transform: translate(14px, 0px); @@ -115,16 +115,16 @@ div.o_boolean_toggle { // Full bg colors (bootstrap extension) .bg-success-full { - background-color: $brand-success; + background-color: theme-color('success'); } .bg-warning-full { - background-color: $brand-warning; + background-color: theme-color('warning'); } .bg-danger-full { - background-color: $brand-danger; + background-color: theme-color('danger'); } .bg-info-full { - background-color: $brand-info; + background-color: theme-color('info'); } .o_web_accesskey_overlay { @@ -167,16 +167,16 @@ div.o_boolean_toggle { @include o-btn-link-variant($body-color, $headings-color); } &.btn-success, &.text-success { - @include o-btn-link-variant($body-color, $brand-success); + @include o-btn-link-variant($body-color, theme-color('success')); } &.btn-warning, &.text-warning { - @include o-btn-link-variant($body-color, $brand-warning); + @include o-btn-link-variant($body-color, theme-color('warning')); } &.btn-danger, &.text-danger { - @include o-btn-link-variant($body-color, $brand-danger); + @include o-btn-link-variant($body-color, theme-color('danger')); } &.btn-info, &.text-info { - @include o-btn-link-variant($body-color, darken($brand-info, 20%)); + @include o-btn-link-variant($body-color, darken(theme-color('info'), 20%)); } } diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss index 65411bfaa8b..80e9390c534 100644 --- a/addons/web/static/src/scss/webclient_extra.scss +++ b/addons/web/static/src/scss/webclient_extra.scss @@ -29,7 +29,7 @@ select { top: 0; right: 50%; padding: 4px 12px; - background-color: $o-color-pink; + background-color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? color: white; text-align: center; border-top: none; diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss index db550f85d74..c8bb9e3c3ed 100644 --- a/addons/web/static/src/scss/webclient_layout.scss +++ b/addons/web/static/src/scss/webclient_layout.scss @@ -74,7 +74,7 @@ .oe_secondary_menu_section { font-weight: bold; margin-left: 8px; - color: $o-brand-optional; + color: $o-brand-primary; } .oe_secondary_submenu { margin: 3px 0px 10px; @@ -134,7 +134,7 @@ > a { font-weight: bold; > span { - color: $o-color-pink; + color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? } } } diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js index a2c16262b6a..9b23cd52bf3 100644 --- a/addons/web_editor/static/src/js/tours/rte.js +++ b/addons/web_editor/static/src/js/tours/rte.js @@ -311,7 +311,7 @@ tour.register('rte_inline', { trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]', }, { content: "check the font image src", - trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]', + trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]', }, { content: "check the font class to css", trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])', 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 eab28912885..bcd8548fbc4 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -243,21 +243,21 @@ a.o_underline { @include o-create-color-btn-classes(delta, $color-delta); @include o-create-color-btn-classes(epsilon, $color-epsilon); -// Create classes for UI colors -@include o-create-color-classes(primary, $brand-primary); -@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); -@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); -@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); -@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); +// Create classes for UI colors // FIXME +@include o-create-color-classes(primary, theme-color('primary')); +// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); +// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); +// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); +// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); // Create classes for greyscale colors -@include o-create-color-classes('black', $gray-base); -@include o-create-color-classes('gray-darker', $gray-darker); -@include o-create-color-classes('gray-dark', $gray-dark); -@include o-create-color-classes('gray', $gray); -@include o-create-color-classes('gray-light', $gray-light); -@include o-create-color-classes('gray-lighter', $gray-lighter); -@include o-create-color-classes('white', $gray-white); +@include o-create-color-classes('black', $black); +@include o-create-color-classes('gray-darker', gray('900')); // FIXME +@include o-create-color-classes('gray-dark', gray('900')); +@include o-create-color-classes('gray', gray('700')); +@include o-create-color-classes('gray-light', gray('600')); +@include o-create-color-classes('gray-lighter', gray('200')); +@include o-create-color-classes('white', $white); // Create classes for greyscale transparent colours @include o-create-color-classes('black-25', $color-black-25); diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss index ebd3752b5e8..e22d98a9ffb 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -59,7 +59,7 @@ } &.btn-primary { - @include button-variant(white, $o-brand-primary, $o-brand-primary); + @include button-variant(white, $o-brand-odoo, $o-brand-odoo); } &.btn-secondary { @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); @@ -251,11 +251,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // DROPZONES @keyframes dropZoneInsert { to { - background-color: rgba($o-brand-primary, 0.2); + background-color: rgba($o-brand-odoo, 0.2); } } #wrapwrap .oe_drop_zone { - background-color: rgba($o-brand-primary, 0.05); + background-color: rgba($o-brand-odoo, 0.05); animation: dropZoneInsert 1s linear 0s infinite alternate; &.oe_insert { @@ -282,7 +282,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &.oe_vertical { - border: 2px dashed $o-brand-primary; + border: 2px dashed $o-brand-odoo; border-left: none; border-right: none; @@ -451,7 +451,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { @include o-position-absolute($top: 5px, $left: 5px); content: "\f00c"; font-family: "FontAwesome"; - color: $o-brand-optional; + color: $o-brand-primary; } } @@ -970,7 +970,7 @@ table.colorpicker { &.selected:after { content: "\f00c"; font-family: "FontAwesome"; - color: $brand-success; + color: theme-color('success'); } &[data-event="foreColor"] { @@ -1089,7 +1089,7 @@ body.editor_enable { } } @keyframes inputHighlighter { - from { background: $o-brand-optional; } + from { background: $o-brand-primary; } to { width: 0; background: transparent; } } @@ -1140,7 +1140,7 @@ body.editor_enable { > input { &:not(:checked) + span { box-shadow: none; - background-image: linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%)); + background-image: linear-gradient(0deg, lighten(theme-color('danger'), 5%), darken(theme-color('danger'), 5%)); } } } @@ -1275,7 +1275,7 @@ body.editor_enable { content: ""; z-index: 1000; display: block; - background-color: $brand-danger; + background-color: theme-color('danger'); opacity: 0.5; pointer-events: none; } @@ -1357,7 +1357,7 @@ body .modal { } .well { - border-color: $gray-lighter; + border-color: gray('200'); border-top-width: 0; } @@ -1394,7 +1394,7 @@ body .modal { } } &.o_selected .o_image { - border-color: $o-brand-primary; + border-color: $o-brand-odoo; box-shadow: 0px 0px 2px 2px $o-brand-secondary; } &:hover .o_existing_attachment_remove { @@ -1585,7 +1585,7 @@ body .modal { display: block; width: 100%; height: 1px; - background: fade-out(lighten($o-brand-optional, 30%), 0.5); + background: fade-out(lighten($o-brand-primary, 30%), 0.5); pointer-events: none; &.grid-2 { top: 66.66% @@ -1659,7 +1659,7 @@ body .modal { } } .o_link_dialog_preview { - border-left: 1px solid $gray-lighter; + border-left: 1px solid gray('200'); } } // Crop Dialog 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 469c66d66cb..37a24e1b79c 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -27,7 +27,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default; // Editor $o-we-dropzone-size: 40px !default; $o-we-dropzone-border-width: 2px !default; -$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default; +$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; $o-we-handle-edge-size: 1px !default; $o-we-handle-border-width: 1px !default; @@ -86,7 +86,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: $o-brand-optional; + color: $o-brand-primary; &:focus, &:active, &:focus:active { outline: none!important; @@ -114,7 +114,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; .has-error { .form-control { - border-color: $state-danger-text; + // border-color: $state-danger-text; // FIXME } } @@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-tabs { .nav-tabs { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); > li { > a { line-height: 1.42857143; color: $o-we-color-light; &:hover { - border-color: $gray-lighter; + border-color: gray('200'); } } @@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &, &:hover, &:focus { color: $o-we-color-normal; background-color: $o-we-color-paper; - border-color: $gray-lighter; + border-color: gray('200'); border-bottom-color: transparent; } } @@ -175,13 +175,13 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @include button-size(6px, 12px, 14px, 1.42857143, 0); &.btn-primary { - @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); + @include button-variant(white, $o-brand-primary, darken($o-brand-primary,5%)); } &.btn-secondary { @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { - @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-brand-primary, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } &.btn-success { @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); @@ -222,8 +222,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; // Edition colors // Colors -$gray-white: #fff !default; - $color-alpha: #1cc1a9 !default; $color-beta: #875A7B !default; $color-gamma: #BA3C3D !default; diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss index 851f8f1f57d..06a9aeb93f2 100644 --- a/addons/web_settings_dashboard/static/src/scss/dashboard.scss +++ b/addons/web_settings_dashboard/static/src/scss/dashboard.scss @@ -87,7 +87,7 @@ .o_web_settings_dashboard_progress_title { font-weight: bold; cursor: pointer; - color: $o-brand-optional; + color: $o-brand-primary; } } } diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss index 3ed0f986fab..bb11d516c01 100644 --- a/addons/web_tour/static/src/scss/tip.scss +++ b/addons/web_tour/static/src/scss/tip.scss @@ -26,7 +26,7 @@ } .o_tooltip { - $o-tip-color: $o-brand-primary; + $o-tip-color: $o-brand-odoo; $o-tip-size: 24px; $o-tip-border-width: 2px; $o-tip-arrow-length: 10px; diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss index d719872c94e..0f9a1a97640 100644 --- a/addons/website/static/src/scss/website.backend.scss +++ b/addons/website/static/src/scss/website.backend.scss @@ -15,7 +15,7 @@ h2, h4 { text-transform: uppercase; margin-top: 0; - color: $o-brand-primary; + color: $o-brand-odoo; } h4 { margin: 0 0 0 8px; } @@ -86,10 +86,10 @@ .nv-series-0 { stroke-width: 3 !important; .nv-point { - stroke: $o-brand-optional; + stroke: $o-brand-primary; stroke-opacity: 1 !important; &.hover { - stroke: darken($o-brand-optional, 10%); + stroke: darken($o-brand-primary, 10%); } } } @@ -107,14 +107,14 @@ .nvtooltip { border-radius: 0; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); .legend-color-guide > div { border: none; } tr:first-child .legend-color-guide > div { - background-color: $o-brand-optional !important; + background-color: $o-brand-primary !important; } tr:last-child .legend-color-guide > div { background-color: darken($o-brand-lightsecondary, 10%) !important; @@ -148,16 +148,16 @@ white-space: nowrap; cursor: pointer; color: white; - background-color: $o-brand-optional; - &:hover { - background-color: darken($o-brand-optional, 10%); - } - &.o_primary { - background-color: $o-brand-primary; - color: white; + background-color: $o-brand-primary; &:hover { background-color: darken($o-brand-primary, 10%); } + &.o_primary { + background-color: $o-brand-odoo; + color: white; + &:hover { + background-color: darken($o-brand-odoo, 10%); + } } .o_highlight { font-size: 27px; @@ -167,7 +167,7 @@ .o_graph_sales { .o_legend0 { - background-color: $o-brand-optional; + background-color: $o-brand-primary; } .o_legend1 { background-color: $o-main-color-muted; @@ -226,7 +226,7 @@ float: right; top: -60px; right: 10px; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); font-weight: 300; white-space: nowrap; padding: .5em 1.5em; @@ -249,17 +249,17 @@ @keyframes increase { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } @keyframes decrease { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } } diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index 1d0dfe3fe9c..21586303296 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -22,7 +22,7 @@ .o_editable { &:not(:empty), &[data-oe-type] { &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { - box-shadow: $o-brand-primary 0 0 5px 2px inset; + box-shadow: $o-brand-odoo 0 0 5px 2px inset; } } &:focus, &[data-oe-type] { @@ -44,14 +44,14 @@ &.oe_structure.oe_empty, &[data-oe-type=html] { &:empty { - border: 2px dashed $gray-lighter-darker; + border: 2px dashed gray('400'); margin: 20px; padding: 112px 0px; text-align: center; &:before { content: attr(data-editor-message); font-size: 20px; - color: $gray-lighter-darker; + color: gray('400'); } } > p:empty:only-child { diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index aea9e6a5716..9076e9565ca 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -520,10 +520,10 @@ div.carousel { .navbar .o_extra_menu_items.show > ul { > li { + li { - border-top: 1px solid $gray-lighter; + border-top: 1px solid gray('200'); } > a.dropdown-toggle { - background-color: $gray-lighter; + background-color: gray('200'); color: inherit; // Useful when the toggle is active pointer-events: none; // hack to prevent clicking on it because dropdown always opened } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 5ee27fe7e34..e936f6883cc 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -45,7 +45,7 @@ body.o_connected_user { } &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic { - @include button-variant(white, $o-brand-optional, $o-brand-optional); + @include button-variant(white, $o-brand-primary, $o-brand-primary); } > .fa-plus, > .fa-pencil { @@ -524,15 +524,15 @@ body .modal { } #edit_website_pages { th { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; } td > a.fa { margin-left: 5px; - color: $o-brand-primary; + color: $o-brand-odoo; } .fa-check, .fa-eye-slash { - color: $o-brand-optional; + color: $o-brand-primary; } } diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 09dcf44df59..84622413b7b 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -553,14 +553,14 @@ diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss index 8c1a4f15b6f..141d77b2c31 100644 --- a/addons/website_blog/static/src/scss/website_blog.scss +++ b/addons/website_blog/static/src/scss/website_blog.scss @@ -224,7 +224,7 @@ .blog_post_year_collapse { cursor: pointer; > i { - color: $brand-primary; + color: theme-color('primary'); } } diff --git a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss index 72acce86116..38eeb6d00b5 100644 --- a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss +++ b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss @@ -39,12 +39,12 @@ .s_hr_rating_bar { height: 15px; padding: 1px; - background-color: $gray-lighter; + background-color: gray('200'); border-radius: 2px; &:before { content: ""; border-radius: 2px; - background-color: $brand-primary; + background-color: theme-color('primary'); display: block; @include size(0, 100%); } diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss index b12678005ae..1d2dd1fd99b 100644 --- a/addons/website_rating/static/src/scss/website_rating.scss +++ b/addons/website_rating/static/src/scss/website_rating.scss @@ -7,7 +7,7 @@ $o-w-rating-star-color: #FACC2E; .o_website_rating_card_container { .o_message_counter { - color: $gray; + color: gray('700'); } /* progress bars */ diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index 06b6380e2a4..debc7b33572 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/addons/website_sale/static/src/scss/website_sale.scss @@ -746,7 +746,7 @@ td.noborder { } .border_primary { - border: 1px solid $o-brand-primary; + border: 1px solid $o-brand-odoo; } .js_change_shipping { diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss index b5cd1b3fbcb..9220879c743 100644 --- a/addons/website_sale/static/src/scss/website_sale_backend.scss +++ b/addons/website_sale/static/src/scss/website_sale_backend.scss @@ -30,14 +30,14 @@ .o_image_overlay { bottom: 16%; - background: rgba($gray-darker, 0.2); + background: rgba(gray('900'), 0.2); } .o_website_sale_image_card_title { @include o-text-overflow(block); padding:6px; position: relative; - background: $gray-lighter; + background: gray('200'); color:$headings-color; } @@ -54,7 +54,7 @@ font-size: $font-size-sm - 1; &.label-normal { - background-color: $gray-lighter; + background-color: gray('200'); color: $body-color; } } @@ -63,14 +63,14 @@ .o_website_sale_image_modal { .o_website_sale_image_modal_container { - border-left: 1px solid $gray-lighter-darker; + border-left: 1px solid gray('400'); .o_field_image { margin-bottom: 0; - box-shadow: 0 2px 10px $gray-lighter-dark; + box-shadow: 0 2px 10px gray('300'); > img { - border: 1px solid $gray-lighter-darker; + border: 1px solid gray('400'); min-height: 200px; max-height: 350px; // Fallback for browsers that dosn't support responsive units max-height: 50vh; diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss index 2d3313a51c6..905c7823a8a 100644 --- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss +++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss @@ -35,7 +35,7 @@ background-color: $o-brand-lightsecondary; } .o_highlight { - color: $o-brand-optional; + color: $o-brand-primary; font-size: 20px; font-weight: bold; } diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss index c119d090e15..613f247a780 100644 --- a/addons/website_sale/static/src/scss/website_sale_frontend.scss +++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss @@ -7,14 +7,14 @@ $o-wsale-wizard-dot-size: 0.625rem; $o-wsale-wizard-dot-active-glow: 0.25rem; $o-wsale-wizard-color-inner: white; -$o-wsale-wizard-color-default: $gray-lighter; +$o-wsale-wizard-color-default: gray('200'); -$o-wsale-wizard-dot-active: $brand-primary; -$o-wsale-wizard-dot-completed: $brand-success; +$o-wsale-wizard-dot-active: theme-color('primary'); +$o-wsale-wizard-dot-completed: theme-color('success'); $o-wsale-wizard-label-default: $text-muted; $o-wsale-wizard-label-active: $body-color; -$o-wsale-wizard-label-completed: $state-success-text; +$o-wsale-wizard-label-completed: $success; .progress-wizard { // Scoped variables diff --git a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss index a5769adb65c..d8c96c7b44b 100644 --- a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss +++ b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss @@ -9,7 +9,7 @@ border-bottom: 0px; padding: 10px 20px; text-align: center; - border: 2px solid $brand-primary; + border: 2px solid theme-color('primary'); border-bottom: 0px; background-color: white; opacity: 0.95; diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 4e6e1b9fe7d..dc14211ccfd 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -1,9 +1,9 @@ // FIXME may be useless (check initial code here: https://github.com/odoo/odoo/blob/51be5bbfb38db784cb3406877cc0e8806b1bf55a/addons/website_slides/static/src/less/website_slides.less#L1) $nav-tabs-border-color: #dddddd !default; -$brand-info: #dddddd !default; +$info: #dddddd !default; $body-bg: #FFFFFF !default; -$brand-primary: #428bca !default; -$link-color: $brand-primary !default; +$primary: #428bca !default; +$link-color: theme-color('primary') !default; $panel-footer-bg: #f5f5f5 !default; $nav-link-hover-bg: #FFFFFF !default; $navbar-default-link-color: #777 !default; @@ -21,7 +21,7 @@ $MAX-Z-INDEX : 2147483647 !default; } .oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{ - color : $brand-primary; + color : theme-color('primary'); cursor: pointer; } diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss index bb4f5a49bc5..cd83f76a4e7 100644 --- a/addons/website_theme_install/static/src/scss/website_theme_install.scss +++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss @@ -35,7 +35,7 @@ } &.o_theme_installed .o_theme_preview_top { - border-color: $o-brand-optional; + border-color: $o-brand-primary; > .fa-check-circle { @include o-position-absolute(10px, 10px); diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss index c26ce184ec7..3140e0280f2 100644 --- a/odoo/addons/base/static/src/scss/onboarding.scss +++ b/odoo/addons/base/static/src/scss/onboarding.scss @@ -22,7 +22,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; background: white center; background-size: cover; background-position: center top; - border-bottom: 1px solid $gray-lighter-dark; + border-bottom: 1px solid gray('300'); .o_onboarding_wrap { padding: $o-horizontal-padding*2 $o-horizontal-padding; @@ -96,7 +96,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; padding: 0 10px; .o_onboarding_step_action { - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); display: none; } @@ -109,10 +109,10 @@ $o-onboarding-violet-ui-2: #FBEEC8; @include o-position-absolute($o-onboarding-dot-size*0.5 - 2px, calc(50% + 10px)); width: calc(100% - 20px); height: 4px; - background-color: $gray-lighter; + background-color: gray('200'); .progress-bar { - background-image: linear-gradient(90deg, $o-brand-optional, $o-brand-primary); + background-image: linear-gradient(90deg, $o-brand-primary, $o-brand-odoo); transition: opacity $o-onboarding-dot-timing; } } @@ -125,7 +125,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; font-size: 11px; display: inline-block; border-radius: 100%; - background-color: $gray-lighter; + background-color: gray('200'); position: relative; transition: background $o-onboarding-dot-timing ease $o-onboarding-dot-timing; } @@ -155,13 +155,13 @@ $o-onboarding-violet-ui-2: #FBEEC8; } .o_onboarding_dot { - background: $o-brand-primary; + background: $o-brand-odoo; } } &.o_onboarding_done { .o_onboarding_dot { - background: $o-brand-optional; + background: $o-brand-primary; color: white; } @@ -180,7 +180,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; } .o_onboarding_progress { - background: $o-brand-optional; + background: $o-brand-primary; } .progress-bar { @@ -232,7 +232,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; padding: 6px 10px 6px 0; @include media-breakpoint-up(md) { - border-right: 1px solid $gray-lighter-dark; + border-right: 1px solid gray('300'); } } @@ -259,7 +259,7 @@ $o-onboarding-violet-ui-2: #FBEEC8; &:before { right: -1px; - border-left-color: $gray-lighter-dark; + border-left-color: gray('300'); } }