diff options
Diffstat (limited to 'addons/web_editor/static/src/scss')
3 files changed, 72 insertions, 21 deletions
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss index 15309f4de7f..2a0b900b10c 100644 --- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -1,3 +1,5 @@ +// Hacky way to detect if its the backend or not +$-is-backend: variable-exists('primary'); // Automatically update bootstrap colors map (unused by BS itself) $-palette: nth($o-color-palettes, $o-color-palette-number); @@ -6,28 +8,75 @@ $colors: map-merge($-palette, $colors); // Automatically extend bootstrap to create theme background/text/button classes $-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number); -$-main-color: map-get($-palette, 'primary'); +$-main-color: map-get($-palette, 'alpha'); $-main-color-lightness: lightness($-main-color); -$-palette: map-merge($-palette, ( - // Compatibility: alpha and beta color exist but will now always be - // equal to primary and secondary colors - alpha: $-main-color, - beta: map-get($-palette, 'secondary'), +$-palette: map-merge(( + // alpha and beta colors are used to override primary and secondary BS4 + // colors by default, so that theme colors affect the default Odoo layouts + primary: $-main-color, + secondary: map-get($-palette, 'beta'), // BS light and dark colors are not used for any BS component, just // for color utilities. By default, we set them to a very light and - // very dark version of a desaturate version of the primary color + // very dark version of a desaturate version of the primary color light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness -)); +), $-palette); +@if $-is-backend { + $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); +} $theme-colors: () !default; $theme-colors: map-merge($-palette, $theme-colors); // Extend grays with transparent ones (for some reason, BS4 create black-50 and -// white-50 but does not allow overridding that with variables). Also add black -// and white ones too as they were also not added by BS4... +// white-50 but does not allow overridding that with variables), also use the +// theme gray palette (which is supposed to at least declare white and black). +$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number); +$-palette: map-merge($o-transparent-grays, $-palette); +@if $-is-backend { + $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900'); +} $grays: () !default; -$grays: map-merge(map-merge($o-transparent-grays, ( - black: $black, // Note: those two needs to be redefined before bootstrap, - white: $white, // otherwise they do not exist yet -)), $grays); +$grays: map-merge($-palette, $grays); + +// Bootstrap use standard variables to define individual colors which are then +// placed into a map which is then used to get the value of each individual +// color. As BS4 allows to extend the map a priori to define our own colors, +// it does not take care of making the standard variables match the values in +// the user's map. The problem is that, at least for grays, bootstrap uses the +// standard variables in its _variables.scss file, so if: +// +// User file: +// $grays: ( +// '100': blue, +// ); +// +// BS4: +// $gray-100: gray !default; +// $grays: () !default; +// $grays: map-merge(( +// '100': $gray-100, +// ), $grays); +// +// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not +// correctly generated as BS4 uses $gray-100 in _variables.scss +$primary: theme-color('primary') !default; +$secondary: theme-color('secondary') !default; +$success: theme-color('success') !default; +$info: theme-color('info') !default; +$warning: theme-color('warning') !default; +$danger: theme-color('danger') !default; +$light: theme-color('light') !default; +$dark: theme-color('dark') !default; + +$white: gray('white') !default; +$gray-100: gray('100') !default; +$gray-200: gray('200') !default; +$gray-300: gray('300') !default; +$gray-400: gray('400') !default; +$gray-500: gray('500') !default; +$gray-600: gray('600') !default; +$gray-700: gray('700') !default; +$gray-800: gray('800') !default; +$gray-900: gray('900') !default; +$black: gray('black') !default; diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss deleted file mode 100644 index 114d49c8dd4..00000000000 --- a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss +++ /dev/null @@ -1,4 +0,0 @@ - -// Hacky way to prevent our web_editor/website themes to affect the backend UI but -// still allow to define extra colors for backend HTML editors -$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); 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 eff996bea20..730041fbb5f 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -230,8 +230,8 @@ $o-color-palette-number: 1; // Theme colors $o-theme-color-palettes: ( ( - primary: $o-enterprise-primary-color, - secondary: $o-enterprise-color, + alpha: $o-enterprise-primary-color, + beta: $o-enterprise-color, gamma: #5C5B80, delta: #5B899E, epsilon: #E46F78, @@ -248,7 +248,13 @@ $o-transparent-grays: ( white-50: rgba(white, 0.5), white-75: rgba(white, 0.75), ) !default; - +$o-gray-color-palettes: ( + ( + 'white': #FFFFFF, // Those two will enforce the creation of bg-white + 'black': #000000, // and bg-black classes. + ), +) !default; +$o-gray-color-palette-number: 1; // Translations $o-we-content-to-translate-color: rgb(255, 255, 90) !default; |