Merge remote-tracking branch 'origin/support/3.2' into develop

css/backoffice/vendors/_all.scss

@@ -8,6 +8,7 @@
 @import "../../../node_modules/bulma-scss/utilities/all";
 @import "../../../node_modules/bulma-scss/base/all";
 @import "../../../node_modules/bulma-scss/elements/content";
+@import "highlightjs";
 @import "ckeditor/all";
 @import "c3";
 @import "tippy";

css/backoffice/vendors/_highlightjs.scss

@@ -0,0 +1,45 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+@import "../../common/vendors/_highlightjs";
+
+// Backoffice specific variables
+$ibo-vendors-highlightjs--padding: 0.9rem !default;
+$ibo-vendors-highlightjs--box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4) !default;
+$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;
+$ibo-vendors-highlightjs--code--padding-x: 5px !default;
+$ibo-vendors-highlightjs--code--padding-y: 3px !default;
+
+$ibo-vendors-highlightjs--background-color: #282b2e !default; 
+$ibo-vendors-highlightjs--color: #e0e2e4 !default; 
+$ibo-vendors-highlightjs--keyword--color: #93c763 !default; 
+$ibo-vendors-highlightjs--number--color: #ffcd22 !default; 
+$ibo-vendors-highlightjs--attribute--color: #668bb0 !default; 
+$ibo-vendors-highlightjs--regexp--color: #d39745 !default; 
+$ibo-vendors-highlightjs--meta--color: #557182 !default; 
+$ibo-vendors-highlightjs--tag--color: #8cbbad !default; 
+$ibo-vendors-highlightjs--string--color: #ec7600 !default; 
+$ibo-vendors-highlightjs--comment--color: #818e96 !default; 
+$ibo-vendors-highlightjs--selector-class--color: #A082BD !default; 
+$ibo-vendors-highlightjs--code--color: white !default;
+
+// Override common variables
+$common-vendors-highlightjs--padding: $ibo-vendors-highlightjs--padding;
+$common-vendors-highlightjs--box-shadow: $ibo-vendors-highlightjs--box-shadow;
+$common-vendors-highlightjs--border-radius: $ibo-vendors-highlightjs--border-radius;
+$common-vendors-highlightjs--code--padding-x: $ibo-vendors-highlightjs--code--padding-x;
+$common-vendors-highlightjs--code--padding-y: $ibo-vendors-highlightjs--code--padding-y;
+
+$common-vendors-highlightjs--background-color: $ibo-vendors-highlightjs--background-color;
+$common-vendors-highlightjs--color: $ibo-vendors-highlightjs--color;
+$common-vendors-highlightjs--keyword--color: $ibo-vendors-highlightjs--keyword--color;
+$common-vendors-highlightjs--number--color: $ibo-vendors-highlightjs--number--color;
+$common-vendors-highlightjs--attribute--color: $ibo-vendors-highlightjs--attribute--color;
+$common-vendors-highlightjs--regexp--color: $ibo-vendors-highlightjs--regexp--color;
+$common-vendors-highlightjs--meta--color: $ibo-vendors-highlightjs--meta--color;
+$common-vendors-highlightjs--tag--color: $ibo-vendors-highlightjs--tag--color;
+$common-vendors-highlightjs--string--color: $ibo-vendors-highlightjs--string--color;
+$common-vendors-highlightjs--comment--color: $ibo-vendors-highlightjs--comment--color;
+$common-vendors-highlightjs--selector-class--color: $ibo-vendors-highlightjs--selector-class--color;
+$common-vendors-highlightjs--code--color: $ibo-vendors-highlightjs--code--color;

css/backoffice/vendors/ckeditor/_all.scss

@@ -3,5 +3,5 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-@import "../../../../js/ckeditor/build/compiled-theme"; /* CKEditor content styles (tables, lists, ...) */
+@import "../../../../node_modules/ckeditor5-itop-build/build/styles/compiled-theme"; /* CKEditor content styles (tables, lists, ...) */
 @import "overloads"; /* Overloads of CKEditor styles for the backoffice */

css/backoffice/vendors/ckeditor/_overloads.scss

@@ -4,24 +4,12 @@
  */
 
 /* SCSS variables */
-$ibo-vendors-highlightjs--padding: 0.9rem !default;
-$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;
-
-//$ibo-vendors-ckeditor--autocomplete-panel--border: none !default;
-//$ibo-vendors-ckeditor--autocomplete-panel--border-radius: $ibo-border-radius-300 !default;
-//$ibo-vendors-ckeditor--autocomplete-panel--background-color: $ibo-color-white-100 !default;
-//
-//$ibo-vendors-ckeditor--autocomplete-item-image--size: 25px !default;
-//$ibo-vendors-ckeditor--autocomplete-item-image--margin-right: 0.5rem !default;
-//$ibo-vendors-ckeditor--autocomplete-item-image--background-color: $ibo-color-blue-100 !default;
-//$ibo-vendors-ckeditor--autocomplete-item-image--border: 1px solid $ibo-color-grey-600 !default;
-//
-//$ibo-vendors-ckeditor--autocomplete-item-title--text-color: #3A3A3A !default;
 $ibo-vendors-ckeditor--ck-content--text-color: $ibo-color-grey-900 !default;
 $ibo-vendors-ckeditor--ck-content-pre-language--padding: 0 !default;
 $ibo-vendors-ckeditor--ck-content-pre-language--code--background-color: $ibo-color-grey-900 !default;
 $ibo-vendors-ckeditor--ck-content-pre-language--code--color: $ibo-color-white-100 !default;
 $ibo-vendors-ckeditor--ck-content-pre-language--code--padding: $ibo-vendors-highlightjs--padding !default;
+
 /* - Following SCSS variables are only there to overlaod the CSS3 variables of CKEditor (see `src/resources/styles/default-theme.css` in CKEditor) */
 $ibo-vendors-ckeditor--ck-color-list-button-on-background: $ibo-color-grey-200 !default;
 $ibo-vendors-ckeditor--ck-color-list-button-on-background-focus: $ibo-color-grey-200 !default;
@@ -97,16 +85,4 @@ $ibo-vendors-ckeditor--ck-mentions--item--padding-y: $ibo-spacing-200 !default;
     line-height: $ibo-vendors-ckeditor--ck-mentions--item--line-height;
     padding: $ibo-vendors-ckeditor--ck-mentions--item--padding-y $ibo-vendors-ckeditor--ck-mentions--item--padding-x !important; /* Important in order to overload the CKE native rule */
   }
-}
-
-/* Highlight JS */
-.hljs {
-	padding: $ibo-vendors-highlightjs--padding !important;
-	box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
-	border-radius: $ibo-vendors-highlightjs--border-radius;
-	white-space: pre-wrap;
-}
-
-.ibo-hljs-container{
-  padding: 0 !important;
-}
+}

css/common/vendors/_highlightjs.scss

@@ -0,0 +1,120 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$common-vendors-highlightjs--padding: 0.9rem !default;
+$common-vendors-highlightjs--box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4) !default;
+$common-vendors-highlightjs--border-radius: 4px !default;
+$common-vendors-highlightjs--code--padding-x: 5px !default;
+$common-vendors-highlightjs--code--padding-y: 3px !default;
+
+$common-vendors-highlightjs--background-color: #282b2e !default;
+$common-vendors-highlightjs--color: #e0e2e4 !default;
+$common-vendors-highlightjs--keyword--color: #93c763 !default;
+$common-vendors-highlightjs--number--color: #ffcd22 !default;
+$common-vendors-highlightjs--attribute--color: #668bb0 !default;
+$common-vendors-highlightjs--regexp--color: #d39745 !default;
+$common-vendors-highlightjs--meta--color: #557182 !default;
+$common-vendors-highlightjs--tag--color: #8cbbad !default;
+$common-vendors-highlightjs--string--color: #ec7600 !default;
+$common-vendors-highlightjs--comment--color: #818e96 !default;
+$common-vendors-highlightjs--selector-class--color: #A082BD !default;
+$common-vendors-highlightjs--code--color: white !default;
+
+
+// Highlight.js stylesheets
+/* Highlight JS */
+.hljs {
+
+}
+
+.common-hljs-container{
+  padding: 0 !important;
+  border: none !important;
+}
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: $common-vendors-highlightjs--padding !important;
+}
+
+code.hljs {
+  padding: $common-vendors-highlightjs--code--padding-y $common-vendors-highlightjs--code--padding-x !important;
+}
+/**
+ * Obsidian style
+ * ported by Alexander Marenin (http://github.com/ioncreature)
+ */
+.hljs {
+  box-shadow: $common-vendors-highlightjs--box-shadow !important;
+  border-radius: $common-vendors-highlightjs--border-radius !important;
+  white-space: pre-wrap;
+  border: none !important;
+  color: $common-vendors-highlightjs--color !important;
+  background: $common-vendors-highlightjs--background-color !important;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-selector-id {
+  color: $common-vendors-highlightjs--keyword--color !important;
+}
+.hljs-number {
+  color: $common-vendors-highlightjs--number--color !important;
+}
+.hljs-attribute {
+  color: $common-vendors-highlightjs--attribute--color
+}
+.hljs-regexp,
+.hljs-link {
+  color: $common-vendors-highlightjs--regexp--color !important;
+}
+.hljs-meta {
+  color: $common-vendors-highlightjs--meta--color !important;
+}
+.hljs-tag,
+.hljs-name,
+.hljs-bullet,
+.hljs-subst,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: $common-vendors-highlightjs--tag--color !important;
+}
+.hljs-string,
+.hljs-symbol {
+  color: $common-vendors-highlightjs--string--color !important;
+}
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: $common-vendors-highlightjs--comment--color !important;
+}
+.hljs-selector-class {
+  color: $common-vendors-highlightjs--selector-class--color !important;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-code,
+.hljs-title.class_,
+.hljs-class .hljs-title,
+.hljs-section {
+  color: $common-vendors-highlightjs--code--color !important;
+}

css/email.scss

@@ -12,7 +12,7 @@
 }
 
 /* N°7611 - Ensure to embed HTML fields styles */
-@import "../js/ckeditor/build/compiled-theme";
+@import "../node_modules/ckeditor5-itop-build/build/styles/compiled-theme";
 .email-is-html-content {
   @extend .ck-content;
 }