N°4252 - Force form modals to have a max height of 90% of the window's height to avoid overflowing from the viewport

* Introduce new APIs due to iPageUIExtension deprecation

* Fix typo in interface name

* Rename interface to more consistent names

application/applicationextension.inc.php

@@ -1101,7 +1101,9 @@ class JSButtonItem extends JSPopupMenuItem
  * @api
  * @package     Extensibility
  * @since 2.0
- * @deprecated since 3.0.0 use iPageUIBlockExtension instead
+ * @deprecated 3.0.0 If you need to include:
+ *   * JS/CSS files/snippets, use {@see \iBackofficeLinkedScriptsExtension}, {@see \iBackofficeLinkedStylesheetsExtension}, etc instead
+ *   * HTML (and optionally JS/CSS), use {@see \iPageUIBlockExtension} to manipulate {@see \Combodo\iTop\Application\UI\Base\UIBlock} instead
  */
 interface iPageUIExtension
 {
@@ -1252,6 +1254,119 @@ abstract class AbstractPageUIBlockExtension implements iPageUIBlockExtension
 	}
 }
 
+/**
+ * Implement this interface to add script (JS) files to the backoffice pages
+ *
+ * @see \iTopWebPage::$a_linked_scripts
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeLinkedScriptsExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_linked_scripts Each script will be included using this property
+	 * @return array An array of absolute URLs to the files to include
+	 */
+	public function GetLinkedScriptsAbsUrls(): array;
+}
+
+/**
+ * Implement this interface to add inline script (JS) to the backoffice pages' head.
+ * Will be executed first, BEFORE the DOM interpretation.
+ *
+ * @see \iTopWebPage::$a_early_scripts
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeEarlyScriptExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_early_scripts
+	 * @return string
+	 */
+	public function GetEarlyScript(): string;
+}
+
+/**
+ * Implement this interface to add inline script (JS) to the backoffice pages that will be executed immediately, without waiting for the DOM to be ready.
+ *
+ * @see \iTopWebPage::$a_scripts
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeScriptExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_scripts
+	 * @return string
+	 */
+	public function GetScript(): string;
+}
+
+/**
+ * Implement this interface to add inline script (JS) to the backoffice pages that will be executed right when the DOM is ready.
+ *
+ * @see \iTopWebPage::$a_init_scripts
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeInitScriptExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_init_scripts
+	 * @return string
+	 */
+	public function GetInitScript(): string;
+}
+
+/**
+ * Implement this interface to add inline script (JS) to the backoffice pages that will be executed slightly AFTER the DOM is ready (just after the init. scripts).
+ *
+ * @see \iTopWebPage::$a_ready_scripts
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeReadyScriptExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_ready_scripts
+	 * @return string
+	 */
+	public function GetReadyScript(): string;
+}
+
+/**
+ * Implement this interface to add stylesheets (CSS) to the backoffice pages
+ *
+ * @see \iTopWebPage::$a_linked_stylesheets
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeLinkedStylesheetsExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_linked_stylesheets
+	 * @return array An array of absolute URLs to the files to include
+	 */
+	public function GetLinkedStylesheetsAbsUrls(): array;
+}
+
+/**
+ * Implement this interface to add inline style (CSS) to the backoffice pages' head.
+ *
+ * @see \iTopWebPage::$a_styles
+ * @api
+ * @since 3.0.0
+ */
+interface iBackofficeStyleExtension
+{
+	/**
+	 * @see \iTopWebPage::$a_styles
+	 * @return string
+	 */
+	public function GetStyle(): string;
+}
+
 /**
  * Implement this interface to add content to any enhanced portal page
  *

application/cmdbabstract.class.inc.php

@@ -2164,7 +2164,7 @@ HTML;
 					$aEventsList[] = 'validate';
 					$aEventsList[] = 'keyup';
 					$aEventsList[] = 'change';
-					$sHTMLValue = "<div class=\"field_input_zone field_input_password\"><input title=\"$sHelpText\" type=\"password\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" value=\"".htmlentities($value,
+					$sHTMLValue = "<div class=\"field_input_zone field_input_password ibo-input-wrapper ibo-input-password-wrapper\" data-validation=\"untouched\"><input class=\"ibo-input ibo-input-password\" title=\"$sHelpText\" type=\"password\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" value=\"".htmlentities($value,
 							ENT_QUOTES, 'UTF-8')."\" id=\"$iId\"/></div>{$sValidationSpan}{$sReloadSpan}";
 					break;
 
@@ -2193,7 +2193,11 @@ HTML;
 						$sStyle = 'style="'.implode('; ', $aStyles).'"';
 					}
 
+					$aTextareaCssClasses = [];
+
 					if ($oAttDef->GetEditClass() == 'OQLExpression') {
+						$aTextareaCssClasses[] = 'ibo-query-oql';
+						$aTextareaCssClasses[] = 'ibo-is-code';
 						// N°3227 button to open predefined queries dialog
 						$sPredefinedBtnId = 'predef_btn_'.$sFieldPrefix.$sAttCode.$sNameSuffix;
 						$sSearchQueryLbl = Dict::S('UI:Edit:SearchQuery');
@@ -2263,14 +2267,16 @@ JS
 					} else {
 						$sAdditionalStuff = '';
 					}
+
 					// Ok, the text area is drawn here
+					$sTextareCssClassesAsString = implode(' ', $aTextareaCssClasses);
 					$sHTMLValue = <<<HTML
 {$sAdditionalStuff}
 <div class="field_input_zone field_input_text ibo-input-wrapper ibo-input-text-wrapper" data-validation="untouched">
 	<div class="f_i_text_header">
 		<span class="fullscreen_button" title="{$sFullscreenLabelForHtml}"></span>
 	</div>
-	<textarea class="ibo-input ibo-input-text" title="{$sHelpText}" name="attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}" rows="8" cols="40" id="{$iId}" {$sStyle} >{$sEditValueForHtml}</textarea>
+	<textarea class="ibo-input ibo-input-text {$sTextareCssClassesAsString}" title="{$sHelpText}" name="attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}" rows="8" cols="40" id="{$iId}" {$sStyle} >{$sEditValueForHtml}</textarea>
 </div>
 {$sValidationSpan}{$sReloadSpan}
 HTML;
@@ -2414,7 +2420,6 @@ EOF
 		<span class="fas fa-trash"></span>
 	</button>
 </div>
-<br/>
 <input title="{$sHelpText}" name="attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}[fcontents]" type="file" id="file_{$iId}" onChange="UpdateFileName('{$iId}', this.value)"/>
 {$sValidationSpan}{$sReloadSpan}
 HTML;
@@ -3638,7 +3643,7 @@ HTML;
 					$sDownloadUrl = $oDocument->GetDownloadURL(get_class($this), $this->GetKey(), $sAttCode);
 
 					$sDisplayValue = <<<HTML
-{$sFieldAsHtml}<br>
+{$sFieldAsHtml}
 <a href="{$sDisplayUrl}" target="_blank">{$sDisplayLabel}</a> / <a href="{$sDownloadUrl}">{$sDownloadLabel}</a>
 HTML;
 				} else {
@@ -5291,7 +5296,7 @@ EOF
 		if ($bPreview) {
 			if (count($aObjects) == 1) {
 				$oObj = $aObjects[0];
-				$sTitle = Dict::Format('UI:Delete:ConfirmDeletionOf_Name', $oObj->GetName());
+				$sTitle = Dict::Format('UI:Delete:ConfirmDeletionOf_Name', $oObj->GetRawName());
 			} else {
 				$sTitle = Dict::Format('UI:Delete:ConfirmDeletionOf_Count_ObjectsOf_Class', count($aObjects),
 					MetaModel::GetName($sClass));
@@ -5492,7 +5497,7 @@ EOF
 			//
 			if (count($aObjects) == 1) {
 				$oObj = $aObjects[0];
-				$sTitle = Dict::Format('UI:Title:DeletionOf_Object', $oObj->GetName());
+				$sTitle = Dict::Format('UI:Title:DeletionOf_Object', $oObj->GetRawName());
 			} else {
 				$sTitle = Dict::Format('UI:Title:BulkDeletionOf_Count_ObjectsOf_Class', count($aObjects), MetaModel::GetName($sClass));
 			}

application/dashboard.class.inc.php

@@ -860,28 +860,29 @@ class RuntimeDashboard extends Dashboard
 	{
 		$bCustomized = false;
 
-		if (!appUserPreferences::GetPref('display_original_dashboard_'.$sDashBoardId, false))
+		$sDashboardFileSanitized = utils::RealPath($sDashboardFile, APPROOT);
-		{
+		if (false === $sDashboardFileSanitized) {
+			throw new SecurityException('Invalid dashboard file !');
+		}
+
+		if (!appUserPreferences::GetPref('display_original_dashboard_'.$sDashBoardId, false)) {
 			// Search for an eventual user defined dashboard
 			$oUDSearch = new DBObjectSearch('UserDashboard');
 			$oUDSearch->AddCondition('user_id', UserRights::GetUserId(), '=');
 			$oUDSearch->AddCondition('menu_code', $sDashBoardId, '=');
 			$oUDSet = new DBObjectSet($oUDSearch);
-			if ($oUDSet->Count() > 0)
+			if ($oUDSet->Count() > 0) {
-			{
 				// Assuming there is at most one couple {user, menu}!
 				$oUserDashboard = $oUDSet->Fetch();
 				$sDashboardDefinition = $oUserDashboard->Get('contents');
 				$bCustomized = true;
-			}
+			} else {
-			else
+				$sDashboardDefinition = @file_get_contents($sDashboardFileSanitized);
-			{
-				$sDashboardDefinition = @file_get_contents($sDashboardFile);
 			}
 		}
 		else
 		{
-			$sDashboardDefinition = @file_get_contents($sDashboardFile);
+			$sDashboardDefinition = @file_get_contents($sDashboardFileSanitized);
 		}
 
 		if ($sDashboardDefinition !== false)
@@ -889,7 +890,7 @@ class RuntimeDashboard extends Dashboard
 			$oDashboard = new RuntimeDashboard($sDashBoardId);
 			$oDashboard->FromXml($sDashboardDefinition);
 			$oDashboard->SetCustomFlag($bCustomized);
-			$oDashboard->SetDefinitionFile($sDashboardFile);
+			$oDashboard->SetDefinitionFile($sDashboardFileSanitized);
 		} else {
 			$oDashboard = null;
 		}

application/dashlet.class.inc.php

@@ -1008,7 +1008,8 @@ HTML;
 
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
-		$oField->AddCSSClass("ibo-queryoql");
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
@@ -1045,7 +1046,8 @@ HTML;
 
 		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $sOQL);
 		$oField->SetMandatory();
-		$oField->AddCSSClass("ibo-queryoql");
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
@@ -1395,7 +1397,8 @@ abstract class DashletGroupBy extends Dashlet
 
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
-		$oField->AddCSSClass("ibo-queryoql");
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		try {
@@ -1652,7 +1655,8 @@ abstract class DashletGroupBy extends Dashlet
 
 		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $sOQL);
 		$oField->SetMandatory();
-		$oField->AddCSSClass("ibo-queryoql");
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		if (!is_null($sOQL)) {
@@ -2225,7 +2229,8 @@ class DashletHeaderDynamic extends Dashlet
 
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletHeaderDynamic:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
-		$oField->AddCSSClass("ibo-queryoql");
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		try

application/displayblock.class.inc.php

@@ -1043,7 +1043,7 @@ JS
 			$sCountLabel = $aCount['label'];
 			$oPill = PillFactory::MakeForState($sClass, $sStateValue)
 				->SetTooltip($sStateLabel)
-				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">$sCountLabel</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">$sStateLabel</span>");
+				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">$sCountLabel</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">".utils::HtmlEntities($sStateLabel)."</span>");
 			if ($sHyperlink != '-') {
 				$oPill->SetUrl($sHyperlink);
 			}
@@ -2332,6 +2332,8 @@ class MenuBlock extends DisplayBlock
 
 				$sTarget = isset($aAction['target']) ? $aAction['target'] : '';
 				$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral($sUrl, $sLabel, $sIconClass, $sTarget, utils::Sanitize($sActionId, '', utils::ENUM_SANITIZATION_FILTER_ELEMENT_IDENTIFIER));
+				// ResourceId should not be sanitized
+				$oActionButton->AddDataAttribute('resource-id', $sActionId);
 				$oActionButton->AddCSSClasses(['ibo-action-button', 'ibo-regular-action-button']);
 				if (empty($sLabel)) {
 					if (empty($aAction['tooltip'])) {

application/forms.class.inc.php

@@ -234,9 +234,9 @@ class DesignerForm
 						.$this->EndRow();
 
 					if (is_null($aRow['label'])) {
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value ibo-field--value" colspan="2">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value" colspan="2">'.$aRow['value'];
 					} else {
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label ibo-field--label">'.$aRow['label'].'</td><td class="prop_value ibo-field--value">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label">'.$aRow['label'].'</td><td class="prop_value">'.$aRow['value'];
 					}
 					if (!($oField instanceof DesignerFormSelectorField) && !($oField instanceof DesignerMultipleSubFormField)) {
 						$sReturn .= $sValidationFields;
@@ -354,7 +354,7 @@ EOF
 <<<EOF
 $('#$sDialogId').dialog({
 		height: 'auto',
-		maxHeight: $(window).height() - 8,
+		maxHeight: $(window).height() * 0.9,
 		width: $iDialogWidth,
 		modal: true,
 		autoOpen: $sAutoOpen,
@@ -710,7 +710,10 @@ class DesignerFormField
 		$this->bMandatory = false;
 		$this->bReadOnly = false;
 		$this->bAutoApply = false;
-		$this->aCSSClasses = array('ibo-input');
+		$this->aCSSClasses = [];
+		if (ContextTag::Check(ContextTag::TAG_CONSOLE)) {
+			$this->aCSSClasses[] = 'ibo-input';
+		}
 		$this->bDisplayed = true;
 		$this->aWidgetExtraParams = array();
 	}
@@ -1065,7 +1068,10 @@ class DesignerLongTextField extends DesignerTextField
 	public function __construct($sCode, $sLabel = '', $defaultValue = '')
 	{
 		parent::__construct($sCode, $sLabel, $defaultValue);
-		$this->aCSSClasses[] = 'ibo-input-text';
+
+		if (ContextTag::Check(ContextTag::TAG_CONSOLE)) {
+			$this->aCSSClasses[] = 'ibo-input-text';
+		}
 	}
 
 	/**
@@ -1199,7 +1205,10 @@ class DesignerComboField extends DesignerFormField
 		$this->bMultipleSelection = false;
 		$this->bOtherChoices = false;
 		$this->sNullLabel = Dict::S('UI:SelectOne');
-		$this->aCSSClasses[] = 'ibo-input-select';
+
+		if (ContextTag::Check(ContextTag::TAG_CONSOLE)) {
+			$this->aCSSClasses[] = 'ibo-input-select';
+		}
 
 		$this->bAutoApply = true;
 		$this->bSorted = true; // Sorted by default
@@ -1356,7 +1365,9 @@ class DesignerBooleanField extends DesignerFormField
 	{
 		parent::__construct($sCode, $sLabel, $defaultValue);
 		$this->bAutoApply = true;
-		$this->aCSSClasses[] = 'ibo-input-checkbox';
+		if (ContextTag::Check(ContextTag::TAG_CONSOLE)) {
+			$this->aCSSClasses[] = 'ibo-input-checkbox';
+		}
 	}
 
 	/**
@@ -1503,7 +1514,8 @@ class DesignerIconSelectionField extends DesignerFormField
 		$sPostUploadTo = ($this->sUploadUrl == null) ? 'null' : "'{$this->sUploadUrl}'";
 		if (!$this->IsReadOnly()) {
 			$sDefaultValue = ($this->defaultValue !== '') ? $this->defaultValue : $this->aAllowedValues[$idx]['value'];
-			$sValue = "<span class=\"ibo-input-select-wrapper\"><input type=\"hidden\" id=\"$sId\" name=\"$sName\" value=\"{$sDefaultValue}\"/></span>";
+			$sCSSClasses = ContextTag::Check(ContextTag::TAG_CONSOLE) ? 'class="ibo-input-select-wrapper"' : '';
+			$sValue = "<span $sCSSClasses><input type=\"hidden\" id=\"$sId\" name=\"$sName\" value=\"{$sDefaultValue}\"/></span>";
 			$oP->add_ready_script(
 				<<<EOF
 	$('#$sId').icon_select({current_idx: $idx, items: $sJSItems, post_upload_to: $sPostUploadTo});
@@ -1681,7 +1693,9 @@ class DesignerFormSelectorField extends DesignerFormField
 		$this->defaultRealValue = $defaultValue;
 		$this->aSubForms = array();
 		$this->bSorted = true;
-		$this->aCSSClasses[] = 'ibo-input-select';
+		if (ContextTag::Check(ContextTag::TAG_CONSOLE)) {
+			$this->aCSSClasses[] = 'ibo-input-select';
+		}
 	}
 
 	/**

application/query.class.inc.php

@@ -126,7 +126,7 @@ class QueryOQL extends Query
 	function DisplayBareProperties(WebPage $oPage, $bEditMode = false, $sPrefix = '', $aExtraParams = array())
 	{
 		$aFieldsMap = parent::DisplayBareProperties($oPage, $bEditMode, $sPrefix, $aExtraParams);
-		$oPage->add_script("$('[name=\"attr_oql\"]').addClass('ibo-queryoql'); $('[data-attribute-code=\"oql\"]').addClass('ibo-queryoql');");
+		$oPage->add_script("$('[name=\"attr_oql\"]').addClass('ibo-query-oql ibo-is-code'); $('[data-attribute-code=\"oql\"]').addClass('ibo-query-oql ibo-is-code');");
 
 		if (!$bEditMode) {
 			$sFields = trim($this->Get('fields'));

application/startup.inc.php

@@ -41,29 +41,25 @@ register_shutdown_function(function()
 	$sReservedMemory = null;
 	if (!is_null($err = error_get_last()) && ($err['type'] == E_ERROR))
 	{
-		// Remove stack trace from MySQLException
+		// Remove stack trace from MySQLException (since 2.7.2 see N°3174)
 		$sMessage = $err['message'];
-		if (strpos($sMessage, 'MySQLException') !== false)
+		if (strpos($sMessage, 'MySQLException') !== false) {
-		{
 			$iStackTracePos = strpos($sMessage, 'Stack trace:');
-			if ($iStackTracePos !== false)
+			if ($iStackTracePos !== false) {
-			{
 				$sMessage = substr($sMessage, 0, $iStackTracePos);
 			}
 		}
-		IssueLog::error($sMessage, null, $err);
+		// Log additional info but message from $err (since 2.7.6 N°4174)
-		if (strpos($err['message'], 'Allowed memory size of') !== false)
+		$aErrToLog = $err;
-		{
+		unset($aErrToLog['message']);
+		IssueLog::error($sMessage, null, $aErrToLog);
+		if (strpos($err['message'], 'Allowed memory size of') !== false) {
 			$sLimit = ini_get('memory_limit');
 			echo "<p>iTop: Allowed memory size of $sLimit exhausted, contact your administrator to increase 'memory_limit' in php.ini</p>\n";
-		}
+		} elseif (strpos($err['message'], 'Maximum execution time') !== false) {
-		elseif (strpos($err['message'], 'Maximum execution time') !== false)
-		{
 			$sLimit = ini_get('max_execution_time');
 			echo "<p>iTop: Maximum execution time of $sLimit exceeded, contact your administrator to increase 'max_execution_time' in php.ini</p>\n";
-		}
+		} else {
-		else
-		{
 			echo "<p>iTop: An error occurred, check server error log for more information.</p>\n";
 		}
 	}

application/ui.extkeywidget.class.inc.php

@@ -196,7 +196,7 @@ class UIExtKeyWidget
 
 		$bIsAutocomplete = $oAllowedValues->CountExceeds($iMaxComboLength);
 		$sWrapperCssClass = $bIsAutocomplete ? 'ibo-input-select-autocomplete-wrapper' : 'ibo-input-select-wrapper';
-		$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper--with-buttons $sWrapperCssClass\" data-attcode=\"".$this->sAttCode."\"  data-validation=\"untouched\">";
+		$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper--with-buttons $sWrapperCssClass\" data-attcode=\"".$this->sAttCode."\"  data-validation=\"untouched\"  data-accessibility-selectize-label=\"$sTitle\">";
 		
 		// We just need to compare the number of entries with MaxComboLength, so no need to get the real count.
 		if (!$bIsAutocomplete) {
@@ -824,9 +824,9 @@ JS
 
 				$aJsonMap = array();
 				foreach ($aValues as $sKey => $aValue) {
-					$aElt = ['value' => $sKey, 'label' => utils::HtmlEntities($aValue['label']), 'obsolescence_flag' => $aValue['obsolescence_flag']];
+					$aElt = ['value' => $sKey, 'label' => utils::EscapeHtml($aValue['label']), 'obsolescence_flag' => $aValue['obsolescence_flag']];
 					if ($aValue['additional_field'] != '') {
-						$aElt['additional_field'] = utils::HtmlEntities($aValue['additional_field']);
+						$aElt['additional_field'] = utils::EscapeHtml($aValue['additional_field']);
 					}
 
 					if (array_key_exists('initials', $aValue)) {

application/ui.passwordwidget.class.inc.php

@@ -59,7 +59,7 @@ class UIPasswordWidget
 		$sConfirmPasswordValue = $aPasswordValues ? $aPasswordValues['confirm'] : '*****';
 		$sChangedValue = (($sPasswordValue != '*****') || ($sConfirmPasswordValue != '*****')) ? 1 : 0;
 		$sHtmlValue = '';
-		$sHtmlValue .= '<div class="field_input_zone field_input_onewaypassword ibo-input-wrapper">';
+		$sHtmlValue .= '<div class="field_input_zone field_input_onewaypassword ibo-input-wrapper ibo-input-one-way-password-wrapper">';
 		$sHtmlValue .= '<input class="ibo-input" type="password" maxlength="255" name="attr_'.$sCode.'[value]" id="'.$this->iId.'" value="'.htmlentities($sPasswordValue, ENT_QUOTES, 'UTF-8').'"/>';
 		$sHtmlValue .= '<div class="ibo-input-wrapper ibo-input-wrapper--with-buttons"><input class="ibo-input" type="password" maxlength="255" id="'.$this->iId.'_confirm" value="'.htmlentities($sConfirmPasswordValue, ENT_QUOTES, 'UTF-8').'" name="attr_'.$sCode.'[confirm]"/>';
 		$sHtmlValue .= '<div class="ibo-input-select--action-buttons"><div class="ibo-input-select--action-button ibo-input-select--action-button--create" data-tooltip-content="'.Dict::S('UI:PasswordConfirm').'"><i class="fas fa-question-circle"></i></div></div></div>';

core/action.class.inc.php

@@ -367,8 +367,7 @@ class ActionEmail extends ActionNotification
 		{
 			$this->m_iRecipients = 0;
 			$this->m_aMailErrors = array();
-			$bRes = false; // until we do succeed in sending the email
+
-	
 			// Determine recipients
 			//
 			$sTo = $this->FindRecipients('to', $aContextArgs);
@@ -382,29 +381,42 @@ class ActionEmail extends ActionNotification
 
 			$sSubject = MetaModel::ApplyParams($this->Get('subject'), $aContextArgs);
 			$sBody = MetaModel::ApplyParams($this->Get('body'), $aContextArgs);
-			
+
 			$oObj = $aContextArgs['this->object()'];
-			$sMessageId = sprintf('iTop_%s_%d_%f@%s.openitop.org', get_class($oObj), $oObj->GetKey(), microtime(true /* get as float*/), MetaModel::GetEnvironmentId());
+			$sMessageId = sprintf('iTop_%s_%d_%f@%s.openitop.org', get_class($oObj), $oObj->GetKey(), microtime(true /* get as float*/),
+				MetaModel::GetEnvironmentId());
 			$sReference = '<'.$sMessageId.'>';
 		}
-		catch(Exception $e)
+		catch (Exception $e) {
-		{
+			/** @noinspection PhpUnhandledExceptionInspection */
-  			ApplicationContext::SetUrlMakerClass($sPreviousUrlMaker);
+			throw $e;
-  			throw $e;
+		}
-  		}
+		finally {
-		ApplicationContext::SetUrlMakerClass($sPreviousUrlMaker);
+			ApplicationContext::SetUrlMakerClass($sPreviousUrlMaker);
-		
+		}
-		if (!is_null($oLog))
+
-		{
+		if (!is_null($oLog)) {
 			// Note: we have to secure this because those values are calculated
 			// inside the try statement, and we would like to keep track of as
 			// many data as we could while some variables may still be undefined
-			if (isset($sTo))       $oLog->Set('to', $sTo);
+			if (isset($sTo)) {
-			if (isset($sCC))       $oLog->Set('cc', $sCC);
+				$oLog->Set('to', $sTo);
-			if (isset($sBCC))      $oLog->Set('bcc', $sBCC);
+			}
-			if (isset($sFrom))     $oLog->Set('from', empty($sFromLabel) ? $sFrom : "$sFromLabel <$sFrom>");
+			if (isset($sCC)) {
-			if (isset($sSubject))  $oLog->Set('subject', $sSubject);
+				$oLog->Set('cc', $sCC);
-			if (isset($sBody))     $oLog->Set('body', $sBody);
+			}
+			if (isset($sBCC)) {
+				$oLog->Set('bcc', $sBCC);
+			}
+			if (isset($sFrom)) {
+				$oLog->Set('from', $sFrom);
+			}
+			if (isset($sSubject)) {
+				$oLog->Set('subject', $sSubject);
+			}
+			if (isset($sBody)) {
+				$oLog->Set('body', $sBody);
+			}
 		}
 		$sStyles = file_get_contents(APPROOT.'css/email.css');
 		$sStyles .= MetaModel::GetConfig()->Get('email_css');

core/attributedef.class.inc.php

@@ -4159,6 +4159,7 @@ class AttributeText extends AttributeString
 		{
 			$sValue = parent::GetAsHTML($sValue, $oHostObject, $bLocalize);
 			$sValue = self::RenderWikiHtml($sValue);
+			$sValue = nl2br($sValue);
 
 			return "<div $sStyle>$sValue</div>";
 		}
@@ -8129,6 +8130,25 @@ class AttributeImage extends AttributeBlob
 		return "Image";
 	}
 
+	/**
+	 * {@inheritDoc}
+	 * @see AttributeBlob::MakeRealValue()
+	 */
+	public function MakeRealValue($proposedValue, $oHostObj)
+	{
+		$oDoc = parent::MakeRealValue($proposedValue, $oHostObj);
+
+		if (($oDoc instanceof ormDocument)
+			&& (false === $oDoc->IsEmpty())
+			&& ($oDoc->GetMimeType() === 'image/svg+xml')) {
+			$sCleanSvg = HTMLSanitizer::Sanitize($oDoc->GetData(), 'svg_sanitizer');
+			$oDoc = new ormDocument($sCleanSvg, $oDoc->GetMimeType(), $oDoc->GetFileName());
+		}
+
+		// The validation of the MIME Type is done by CheckFormat below
+		return $oDoc;
+	}
+
 	/**
 	 * Check that the supplied ormDocument actually contains an image
 	 * {@inheritDoc}
@@ -10832,7 +10852,7 @@ class AttributeClassAttCodeSet extends AttributeSet
 							}
 						}
 
-						$sLabelForHtmlAttribute = MetaModel::GetLabel($sAttClass, $sAttCode)." ($sAttCode)";
+						$sLabelForHtmlAttribute = utils::HtmlEntities(MetaModel::GetLabel($sAttClass, $sAttCode)." ($sAttCode)");
 						$aLocalizedValues[] = '<span class="attribute-set-item" data-code="'.$sAttCode.'" data-label="'.$sLabelForHtmlAttribute.'" data-description="" data-tooltip-content="'.$sLabelForHtmlAttribute.'">'.$sAttCode.'</span>';
 					} catch (Exception $e)
 					{
@@ -11025,7 +11045,7 @@ class AttributeQueryAttCodeSet extends AttributeSet
 				$aLocalizedValues = array();
 				foreach ($value as $sAttCode) {
 					if (isset($aAllowedAttributes[$sAttCode])) {
-						$sLabelForHtmlAttribute = $aAllowedAttributes[$sAttCode];
+						$sLabelForHtmlAttribute = utils::HtmlEntities($aAllowedAttributes[$sAttCode]);
 						$aLocalizedValues[] = '<span class="attribute-set-item" data-code="'.$sAttCode.'" data-label="'.$sLabelForHtmlAttribute.'" data-description="" data-tooltip-content="'.$sLabelForHtmlAttribute.'">'.$sAttCode.'</span>';
 					}
 				}
@@ -11574,19 +11594,20 @@ class AttributeTagSet extends AttributeSet
 					$sTooltipContent = $sTagLabel;
 					$sTooltipHtmlEnabled = 'false';
 				} else {
+					$sTagLabelEscaped = utils::EscapeHtml($sTagLabel);
 					$sTooltipContent = <<<HTML
-<h4>$sTagLabel</h4>
+<h4>$sTagLabelEscaped</h4>
 <div>$sTagDescription</div>
 HTML;
 					$sTooltipHtmlEnabled = 'true';
 				}
-				$sTooltipContent = utils::EscapeHtml($sTooltipContent);
+				$sTooltipContent = utils::HtmlEntities($sTooltipContent);
 
 				$sHtml .= '<a'.$sLink.' class="attribute-set-item attribute-set-item-'.$sTagCode.'" data-code="'.$sTagCode.'" data-label="'.$sLabelForHtml.'" data-description="'.$sDescriptionForHtml.'" data-tooltip-content="'.$sTooltipContent.'" data-tooltip-html-enabled="'.$sTooltipHtmlEnabled.'">'.$sLabelForHtml.'</a>';
 			}
 			else
 			{
-				$sHtml .= '<span class="attribute-set-item">'.$oTag.'</span>';
+				$sHtml .= '<span class="attribute-set-item">'.utils::EscapeHtml($oTag).'</span>';
 			}
 		}
 		$sHtml .= '</span>';

core/config.class.inc.php

@@ -1125,6 +1125,14 @@ class Config
 			'source_of_value'     => '',
 			'show_in_conf_sample' => false,
 		],
+		'svg_sanitizer' => [
+			'type' => 'string',
+			'description' => 'The class to use for SVG sanitization : allow to provide a custom made sanitizer',
+			'default' => 'SVGDOMSanitizer',
+			'value' => '',
+			'source_of_value' => '',
+			'show_in_conf_sample' => false,
+		],
 		'inline_image_max_display_width' => [
 			'type'                => 'integer',
 			'description'         => 'The maximum width (in pixels) when displaying images inside an HTML formatted attribute. Images will be displayed using this this maximum width.',

core/htmlsanitizer.class.inc.php

@@ -97,64 +97,163 @@ class HTMLNullSanitizer extends HTMLSanitizer
 	{
 		return $sHTML;
 	}
-
 }
 
+
+
 /**
- * A standard-compliant HTMLSanitizer based on the HTMLPurifier library by Edward Z. Yang
+ * Common implementation for sanitizer using DOM parsing
- * Complete but quite slow
- * http://htmlpurifier.org
  */
-/*
+abstract class DOMSanitizer extends HTMLSanitizer
-class HTMLPurifierSanitizer extends HTMLSanitizer
 {
-	protected static $oPurifier = null;
+	/** @var DOMDocument */
+	protected $oDoc;
 
-	public function __construct()
+	abstract public function GetTagsWhiteList();
-	{
-		if (self::$oPurifier == null)
-		{
-			$sLibPath = APPROOT.'lib/htmlpurifier/HTMLPurifier.auto.php';
-			if (!file_exists($sLibPath))
-			{
-				throw new Exception("Missing library '$sLibPath', cannot use HTMLPurifierSanitizer.");
-			}
-			require_once($sLibPath);
 
-			$oPurifierConfig = HTMLPurifier_Config::createDefault();
+	abstract public function GetTagsBlackList();
-			$oPurifierConfig->set('Core.Encoding', 'UTF-8'); // defaults to 'UTF-8'
+
-			$oPurifierConfig->set('HTML.Doctype', 'XHTML 1.0 Strict'); // defaults to 'XHTML 1.0 Transitional'
+	abstract public function GetAttrsWhiteList();
-			$oPurifierConfig->set('URI.AllowedSchemes', array (
+
-				'http' => true,
+	abstract public function GetAttrsBlackList();
-				'https' => true,
+
-				'data' => true, // This one is not present by default
+	abstract public function GetStylesWhiteList();
-			));
-			$sPurifierCache = APPROOT.'data/HTMLPurifier';
-			if (!is_dir($sPurifierCache))
-			{
-				mkdir($sPurifierCache);
-			}
-			if (!is_dir($sPurifierCache))
-			{
-				throw new Exception("Could not create the cache directory '$sPurifierCache'");
-			}
-			$oPurifierConfig->set('Cache.SerializerPath', $sPurifierCache); // no trailing slash
-			self::$oPurifier = new HTMLPurifier($oPurifierConfig);
-		}
-	}
 
 	public function DoSanitize($sHTML)
 	{
-		$sCleanHtml = self::$oPurifier->purify($sHTML);
+		$this->oDoc = new DOMDocument();
+		$this->oDoc->preserveWhitespace = true;
+
+		// MS outlook implements empty lines by the mean of <p><o:p></o:p></p>
+		// We have to transform that into <p><br></p> (which is how Thunderbird implements empty lines)
+		// Unfortunately, DOMDocument::loadHTML does not take the tag namespaces into account (once loaded there is no way to know if the tag did have a namespace)
+		// therefore we have to do the transformation upfront
+		$sHTML = preg_replace('@<o:p>(\s|&nbsp;)*</o:p>@', '<br>', $sHTML);
+
+		$this->LoadDoc($sHTML);
+
+		$this->CleanNode($this->oDoc);
+
+		$sCleanHtml = $this->PrintDoc();
+
 		return $sCleanHtml;
 	}
+
+	abstract public function LoadDoc($sHTML);
+
+	/**
+	 * @return string cleaned source
+	 * @uses \DOMSanitizer::oDoc
+	 */
+	abstract public function PrintDoc();
+
+	protected function CleanNode(DOMNode $oElement)
+	{
+		$aAttrToRemove = array();
+		// Gather the attributes to remove
+		if ($oElement->hasAttributes()) {
+			foreach ($oElement->attributes as $oAttr) {
+				$sAttr = strtolower($oAttr->name);
+				if ((false === empty($this->GetAttrsBlackList()))
+					&& (in_array($sAttr, $this->GetAttrsBlackList(), true))) {
+					$aAttrToRemove[] = $oAttr->name;
+				} else if ((false === empty($this->GetTagsWhiteList()))
+					&& (false === in_array($sAttr, $this->GetTagsWhiteList()[strtolower($oElement->tagName)]))) {
+					$aAttrToRemove[] = $oAttr->name;
+				} else if (!$this->IsValidAttributeContent($sAttr, $oAttr->value)) {
+					// Invalid content
+					$aAttrToRemove[] = $oAttr->name;
+				} else if ($sAttr == 'style') {
+					// Special processing for style tags
+					$sCleanStyle = $this->CleanStyle($oAttr->value);
+					if ($sCleanStyle == '') {
+						// Invalid content
+						$aAttrToRemove[] = $oAttr->name;
+					} else {
+						$oElement->setAttribute($oAttr->name, $sCleanStyle);
+					}
+				}
+			}
+			// Now remove them
+			foreach($aAttrToRemove as $sName)
+			{
+				$oElement->removeAttribute($sName);
+			}
+		}
+
+		if ($oElement->hasChildNodes())
+		{
+			$aChildElementsToRemove = array();
+			// Gather the child noes to remove
+			foreach($oElement->childNodes as $oNode) {
+				if ($oNode instanceof DOMElement) {
+					$sNodeTagName = strtolower($oNode->tagName);
+				}
+				if (($oNode instanceof DOMElement)
+					&& (false === empty($this->GetTagsBlackList()))
+					&& (in_array($sNodeTagName, $this->GetTagsBlackList(), true))) {
+					$aChildElementsToRemove[] = $oNode;
+				} else if (($oNode instanceof DOMElement)
+					&& (false === empty($this->GetTagsWhiteList()))
+					&& (false === array_key_exists($sNodeTagName, $this->GetTagsWhiteList()))) {
+					$aChildElementsToRemove[] = $oNode;
+				} else if ($oNode instanceof DOMComment) {
+					$aChildElementsToRemove[] = $oNode;
+				} else {
+					// Recurse
+					$this->CleanNode($oNode);
+					if (($oNode instanceof DOMElement) && (strtolower($oNode->tagName) == 'img')) {
+						InlineImage::ProcessImageTag($oNode);
+					}
+				}
+			}
+			// Now remove them
+			foreach($aChildElementsToRemove as $oDomElement)
+			{
+				$oElement->removeChild($oDomElement);
+			}
+		}
+	}
+
+	protected function IsValidAttributeContent($sAttributeName, $sValue)
+	{
+		if ((false === empty($this->GetAttrsBlackList()))
+			&& (in_array($sAttributeName, $this->GetAttrsBlackList(), true))) {
+			return true;
+		}
+
+		if (array_key_exists($sAttributeName, $this->GetAttrsWhiteList())) {
+			return preg_match($this->GetAttrsWhiteList()[$sAttributeName], $sValue);
+		}
+
+		return true;
+	}
+
+	protected function CleanStyle($sStyle)
+	{
+		if (empty($this->GetStylesWhiteList())) {
+			return $sStyle;
+		}
+
+		$aAllowedStyles = array();
+		$aItems = explode(';', $sStyle);
+		{
+			foreach ($aItems as $sItem) {
+				$aElements = explode(':', trim($sItem));
+				if (in_array(trim(strtolower($aElements[0])), $this->GetStylesWhiteList())) {
+					$aAllowedStyles[] = trim($sItem);
+				}
+			}
+		}
+
+		return implode(';', $aAllowedStyles);
+	}
 }
-*/
 
-class HTMLDOMSanitizer extends HTMLSanitizer
+
+
+class HTMLDOMSanitizer extends DOMSanitizer
 {
-	protected $oDoc;
-
 	/**
 	 * @var array
 	 * @see https://www.itophub.io/wiki/page?id=2_6_0%3Aadmin%3Arich_text_limitations
@@ -239,6 +338,31 @@ class HTMLDOMSanitizer extends HTMLSanitizer
 		'white-space',
 	);
 
+	public function GetTagsWhiteList()
+	{
+		return static::$aTagsWhiteList;
+	}
+
+	public function GetTagsBlackList()
+	{
+		return [];
+	}
+
+	public function GetAttrsWhiteList()
+	{
+		return static::$aAttrsWhiteList;
+	}
+
+	public function GetAttrsBlackList()
+	{
+		return [];
+	}
+
+	public function GetStylesWhiteList()
+	{
+		return static::$aStylesWhiteList;
+	}
+
 	public function __construct()
 	{
 		parent::__construct();
@@ -264,139 +388,152 @@ class HTMLDOMSanitizer extends HTMLSanitizer
 		}
 	}
 
-	public function DoSanitize($sHTML)
+	public function LoadDoc($sHTML)
 	{
-		$this->oDoc = new DOMDocument();
-		$this->oDoc->preserveWhitespace = true;
-
-		// MS outlook implements empty lines by the mean of <p><o:p></o:p></p>
-		// We have to transform that into <p><br></p> (which is how Thunderbird implements empty lines)
-		// Unfortunately, DOMDocument::loadHTML does not take the tag namespaces into account (once loaded there is no way to know if the tag did have a namespace)
-		// therefore we have to do the transformation upfront
-		$sHTML = preg_replace('@<o:p>(\s|&nbsp;)*</o:p>@', '<br>', $sHTML);
-		// Replace badly encoded non breaking space
-		$sHTML = preg_replace('~\xc2\xa0~', ' ', $sHTML);
-
 		@$this->oDoc->loadHTML('<?xml encoding="UTF-8"?>'.$sHTML); // For loading HTML chunks where the character set is not specified
+		$this->oDoc->preserveWhitespace = true;
+	}
 
-		$this->CleanNode($this->oDoc);
+	public function PrintDoc()
-
+	{
 		$oXPath = new DOMXPath($this->oDoc);
 		$sXPath = "//body";
 		$oNodesList = $oXPath->query($sXPath);
 
-		if ($oNodesList->length == 0)
+		if ($oNodesList->length == 0) {
-		{
 			// No body, save the whole document
 			$sCleanHtml = $this->oDoc->saveHTML();
-		}
+		} else {
-		else
-		{
 			// Export only the content of the body tag
 			$sCleanHtml = $this->oDoc->saveHTML($oNodesList->item(0));
 			// remove the body tag itself
-			$sCleanHtml = str_replace( array('<body>', '</body>'), '', $sCleanHtml);
+			$sCleanHtml = str_replace(array('<body>', '</body>'), '', $sCleanHtml);
 		}
 
 		return $sCleanHtml;
 	}
+}
 
-	protected function CleanNode(DOMNode $oElement)
+
+
+/**
+ * @since 2.6.5 2.7.6 3.0.0 N°4360
+ */
+class SVGDOMSanitizer extends DOMSanitizer
+{
+	public function GetTagsWhiteList()
 	{
-		$aAttrToRemove = array();
+		return [];
-		// Gather the attributes to remove
-		if ($oElement->hasAttributes())
-		{
-			foreach($oElement->attributes as $oAttr)
-			{
-				$sAttr = strtolower($oAttr->name);
-				if (!in_array($sAttr, self::$aTagsWhiteList[strtolower($oElement->tagName)]))
-				{
-					// Forbidden (or unknown) attribute
-					$aAttrToRemove[] = $oAttr->name;
-				}
-				else if (!$this->IsValidAttributeContent($sAttr, $oAttr->value))
-				{
-					// Invalid content
-					$aAttrToRemove[] = $oAttr->name;
-				}
-				else if ($sAttr == 'style')
-				{
-					// Special processing for style tags
-					$sCleanStyle = $this->CleanStyle($oAttr->value);
-					if ($sCleanStyle == '')
-					{
-						// Invalid content
-						$aAttrToRemove[] = $oAttr->name;
-					}
-					else
-					{
-						$oElement->setAttribute($oAttr->name, $sCleanStyle);
-					}
-				}
-			}
-			// Now remove them
-			foreach($aAttrToRemove as $sName)
-			{
-				$oElement->removeAttribute($sName);
-			}
-		}
-
-		if ($oElement->hasChildNodes())
-		{
-			$aChildElementsToRemove = array();
-			// Gather the child noes to remove
-			foreach($oElement->childNodes as $oNode)
-			{
-				if (($oNode instanceof DOMElement) && (!array_key_exists(strtolower($oNode->tagName), self::$aTagsWhiteList)))
-				{
-					$aChildElementsToRemove[] = $oNode;
-				}
-				else if ($oNode instanceof DOMComment)
-				{
-					$aChildElementsToRemove[] = $oNode;
-				}
-				else
-				{
-					// Recurse
-					$this->CleanNode($oNode);
-					if (($oNode instanceof DOMElement) && (strtolower($oNode->tagName) == 'img'))
-					{
-						InlineImage::ProcessImageTag($oNode);
-					}
-				}
-			}
-			// Now remove them
-			foreach($aChildElementsToRemove as $oDomElement)
-			{
-				$oElement->removeChild($oDomElement);
-			}
-		}
 	}
 
-	protected function CleanStyle($sStyle)
+	/**
+	 * @return string[]
+	 * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
+	 */
+	public function GetTagsBlackList()
 	{
-		$aAllowedStyles = array();
+		return [
-		$aItems = explode(';', $sStyle);
+			'script',
-		{
+		];
-			foreach($aItems as $sItem)
-			{
-				$aElements = explode(':', trim($sItem));
-				if (in_array(trim(strtolower($aElements[0])), static::$aStylesWhiteList))
-				{
-					$aAllowedStyles[] = trim($sItem);
-				}
-			}
-		}
-		return implode(';', $aAllowedStyles);
 	}
 
-	protected function IsValidAttributeContent($sAttributeName, $sValue)
+	public function GetAttrsWhiteList()
 	{
-		if (array_key_exists($sAttributeName, self::$aAttrsWhiteList))
+		return [];
-		{
+	}
-			return preg_match(self::$aAttrsWhiteList[$sAttributeName], $sValue);
+
-		}
+	/**
-		return true;
+	 * @return string[]
+	 * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Events#document_event_attributes
+	 */
+	public function GetAttrsBlackList()
+	{
+		return [
+			'onbegin',
+			'onbegin',
+			'onrepeat',
+			'onabort',
+			'onerror',
+			'onerror',
+			'onscroll',
+			'onunload',
+			'oncopy',
+			'oncut',
+			'onpaste',
+			'oncancel',
+			'oncanplay',
+			'oncanplaythrough',
+			'onchange',
+			'onclick',
+			'onclose',
+			'oncuechange',
+			'ondblclick',
+			'ondrag',
+			'ondragend',
+			'ondragenter',
+			'ondragleave',
+			'ondragover',
+			'ondragstart',
+			'ondrop',
+			'ondurationchange',
+			'onemptied',
+			'onended',
+			'onerror',
+			'onfocus',
+			'oninput',
+			'oninvalid',
+			'onkeydown',
+			'onkeypress',
+			'onkeyup',
+			'onload',
+			'onloadeddata',
+			'onloadedmetadata',
+			'onloadstart',
+			'onmousedown',
+			'onmouseenter',
+			'onmouseleave',
+			'onmousemove',
+			'onmouseout',
+			'onmouseover',
+			'onmouseup',
+			'onmousewheel',
+			'onpause',
+			'onplay',
+			'onplaying',
+			'onprogress',
+			'onratechange',
+			'onreset',
+			'onresize',
+			'onscroll',
+			'onseeked',
+			'onseeking',
+			'onselect',
+			'onshow',
+			'onstalled',
+			'onsubmit',
+			'onsuspend',
+			'ontimeupdate',
+			'ontoggle',
+			'onvolumechange',
+			'onwaiting',
+			'onactivate',
+			'onfocusin',
+			'onfocusout',
+		];
+	}
+
+	public function GetStylesWhiteList()
+	{
+		return [];
+	}
+
+	public function LoadDoc($sHTML)
+	{
+		@$this->oDoc->loadXml($sHTML, LIBXML_NOBLANKS);
+	}
+
+	public function PrintDoc()
+	{
+		return $this->oDoc->saveXML();
 	}
 }

core/metamodel.class.php

@@ -5970,7 +5970,8 @@ abstract class MetaModel
 
 
 	/**
-	 * @deprecated 2.7.0 N°2369 will be removed in 2.8
+	 * @deprecated 2.7.0 N°2369 Method will not be removed any time soon as we still need to drop view if the instance is migrating from an iTop 2.x to an iTop 3.0 or newer, even if they skip iTop 3.0.
+	 * @since 3.0.0 Does not recreate SQL views, only drops them. Method has not been renamed to avoid regressions
 	 *
 	 * @return array
 	 * @throws \CoreException
@@ -7463,9 +7464,11 @@ abstract class MetaModel
 	 * @param string $sInput
 	 * @param array $aParams
 	 *
-	 * @return mixed
+	 * @return string
+	 *
+	 * @throws \Exception
 	 */
-	static public function ApplyParams($sInput, $aParams)
+	public static function ApplyParams($sInput, $aParams)
 	{
 		$aParams = static::AddMagicPlaceholders($aParams);
 
@@ -7475,7 +7478,7 @@ abstract class MetaModel
 
 		$aSearches = array();
 		$aReplacements = array();
-		foreach($aParams as $sSearch => $replace)
+		foreach ($aParams as $sSearch => $replace)
 		{
 			// Some environment parameters are objects, we just need scalars
 			if (is_object($replace))

core/ormcaselog.class.inc.php

@@ -506,6 +506,7 @@ class ormCaseLog {
 		$oBlockRenderer = new BlockRenderer($oBlock);
 		$sHtml = $oBlockRenderer->RenderHtml();
 		$sScript = $oBlockRenderer->RenderJsInlineRecursively($oBlock,iUIBlock::ENUM_JS_TYPE_ON_READY);
+		$aJsFiles = $oBlockRenderer->GetJsFiles();
 		if ($sScript!=''){
 			if ($oP == null) {
 				$sScript = '<script>'.$sScript.'</script>';
@@ -514,6 +515,18 @@ class ormCaseLog {
 				$oP->add_ready_script($sScript);
 			}
 		}
+		// Ugly hack as we use a block and strip its content above, we'll also need JS files it depends on
+		if(count($aJsFiles) > 0){
+			foreach ($aJsFiles as $sFileAbsUrl) {
+				if ($oP === null) {
+					$sScript = '<script src="'.$sFileAbsUrl.'"></></script>';
+					$sHtml .= $sScript;
+				} else {
+					$oP->add_linked_script($sFileAbsUrl);
+				}
+			}
+		}
+		
 		return  $sHtml;
 	}
 

core/ormtagset.class.inc.php

@@ -138,7 +138,7 @@ final class ormTagSet extends ormSet
 	}
 
 	/**
-	 * @return array of tags indexed by code
+	 * @return array index: code, value: corresponding {@see \TagSetFieldData}
 	 */
 	public function GetTags()
 	{

core/spreadsheetbulkexport.class.inc.php

@@ -354,7 +354,7 @@ EOF
 						}
 						else if ($oAttDef instanceof AttributeTagSet)
 						{
-							$sField = $oObj->GetAsCSV($sAttCode, $this->bLocalizeOutput, '');
+							$sField = utils::HtmlEntities($oObj->GetAsCSV($sAttCode, $this->bLocalizeOutput, ''));
 							$sData .= "<td x:str>$sField</td>";
 						}
 						else

core/trigger.class.inc.php

@@ -254,6 +254,7 @@ abstract class TriggerOnObject extends Trigger
 		{
 			$oSearch = DBObjectSearch::FromOQL($sFilter);
 			$oSearch->AddCondition('id', $iObjectId, '=');
+			$oSearch->AllowAllData();
 			$oSet = new DBObjectSet($oSearch);
 			$bRet = ($oSet->Count() > 0);
 		}

css/backoffice/_fallback.scss

@@ -22,4 +22,8 @@ fieldset {
 
 legend {
   @extend .ibo-fieldset-legend;
+}
+
+textarea {
+  @extend .ibo-input-text;
 }

css/backoffice/application/tabular-fields/_tabular-fields-selector.scss

@@ -32,5 +32,5 @@
 }
 
 #form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf {
-  margin-top: $ibo-panel--spacing-top;
+  margin-top: $ibo-spacing-600;
 }

css/backoffice/base/_base.scss

@@ -11,9 +11,9 @@ $ibo-scrollbar--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
 $ibo-scrollbar--scrollbar-thumb-border: none !default;
 $ibo-scrollbar--scrollbar-thumb-border-radius: $ibo-border-radius-500 !default;
 
-$ibo-hyperlink-color: $ibo-color-primary-500 !default;
+$ibo-hyperlink-color: $ibo-color-primary-700 !default;
-$ibo-hyperlink-color--on-hover: $ibo-color-primary-600 !default;
+$ibo-hyperlink-color--on-hover: $ibo-color-primary-800 !default;
-$ibo-hyperlink-color--on-active: $ibo-color-primary-700 !default;
+$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
 
 $ibo-svg-illustration--fill: $ibo-color-primary-500 !default;
 

css/backoffice/blocks-integrations/_all.scss

@@ -3,17 +3,22 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-@import "dashlet-within-dashboard";
+@import "alert/all";
+@import "button/all";
+@import "collapsible-section/all";
+@import "datatable/all";
+@import "display-block/all";
+@import "field/all";
+@import "fieldset/all";
+@import "input/all";
+@import "panel/all";
+@import "pill/all";
+@import "dashlet/all";
 @import "add-to-dashboard";
 @import "caselog-entry-form-within-activity-panel";
-@import "panel-with-datatable";
+@import "tab-container-within-panel";
-@import "panel-with-tab-container";
-@import "panel-within-main-content";
-@import "panel-within-modal";
 @import "object-details-with-tab-container";
 @import "medallion-with-blocklist";
-@import "input-within-datatable";
 @import "field-badge-within-datatable";
 @import "jquery-blockui-within-dialog";
-@import "jquery-blockui-within-datatable";
+@import "jquery-blockui-within-datatable";
-@import "collapsible-section-within-caselog-list";

css/backoffice/blocks-integrations/_field-badge-within-datatable.scss

@@ -3,8 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-field-badge-within-datatable--ibo-field-badge--margin: 0 !default;
+$ibo-field-badge-within-datatable--ibo-field-badge--margin: $ibo-spacing-0 !default;
-$ibo-field-badge-within-datatable--ibo-field-badge--padding: 0 !default;
+$ibo-field-badge-within-datatable--ibo-field-badge--padding: $ibo-spacing-0 !default;
 $ibo-field-badge-within-datatable--ibo-field-badge--text-color: unset !default;
 $ibo-field-badge-within-datatable--ibo-field-badge--background-color: unset !default;
 $ibo-field-badge-within-datatable--ibo-field-badge-dot--size: 10px !default;

css/backoffice/blocks-integrations/alert/_alert-with-blocks.scss

@@ -0,0 +1,16 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-alert--spacing-top--with-same-block: $ibo-spacing-200 !default;
+$ibo-alert--spacing-top--with-other-blocks: $ibo-spacing-500 !default;
+
+/* Spacing between alert blocks */
+.ibo-alert + .ibo-alert {
+	margin-top: $ibo-alert--spacing-top--with-same-block;
+}
+/* Spacing between an alert block and something else */
+.ibo-alert +  .ibo-block:not(.ibo-alert) {
+	margin-top: $ibo-alert--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/alert/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "alert-with-blocks";

css/backoffice/blocks-integrations/button/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "button-with-button";
+@import "button-with-button-group";

css/backoffice/blocks-integrations/button/_button-with-button-group.scss

@@ -0,0 +1,13 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button--spacing-left--with-button-group: $ibo-button--spacing-left--with-same-block !default;
+
+/* Reset siblings spacing */
+.ibo-button-group + .ibo-button-group,
+.ibo-button + .ibo-button-group,
+.ibo-button-group + .ibo-button{
+  margin-left: $ibo-button--spacing-left--with-button-group;
+}

css/backoffice/blocks-integrations/button/_button-with-button.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button--spacing-left--with-same-block: $ibo-spacing-200 !default;
+
+.ibo-button + .ibo-button {
+  margin-left: $ibo-button--spacing-left--with-same-block;
+}

css/backoffice/blocks-integrations/collapsible-section/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "collapsible-section-with-blocks";
+@import "collapsible-section-within-caselog-list";

css/backoffice/blocks-integrations/collapsible-section/_collapsible-section-with-blocks.scss

@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-collapsible-section--spacing-top--with-same-block: $ibo-spacing-400 !default;
+$ibo-collapsible-section--spacing-top--with-other-blocks: $ibo-spacing-500 !default;
+
+/* Spacing between collapsible-section blocks */
+.ibo-collapsible-section + .ibo-collapsible-section {
+  margin-top: $ibo-collapsible-section--spacing-top--with-same-block;
+}
+
+/* Spacing between an alert block and something else */
+.ibo-collapsible-section + .ibo-block:not(.ibo-collapsible-section) {
+  margin-top: $ibo-collapsible-section--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/collapsible-section/_collapsible-section-within-caselog-list.scss

@@ -5,7 +5,7 @@
 
 /* SCSS variables */
 $ibo-caselog-entry-in-collapsible-section--body--background-color: transparentize($ibo-color-grey-100,0.5) !default;
-$ibo-caselog-entry-in-collapsible-section--body--padding: 8px !default;
+$ibo-caselog-entry-in-collapsible-section--body--padding: $ibo-spacing-300 !default;
 $ibo-caselog-entry-in-collapsible-section--body--color: $ibo-color-grey-900 !default;
 
 /* - caselog display in ormcaselog */

css/backoffice/blocks-integrations/dashlet/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "dashlet-within-dashboard";

css/backoffice/blocks-integrations/dashlet/_dashlet-within-dashboard.scss

@@ -3,8 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-dashlet-within-dashboard--dashlet-header-static--margin-top--is-first-dashlet: 0 !default;
+$ibo-dashlet-within-dashboard--dashlet-header-static--margin-top--is-first-dashlet: $ibo-spacing-0 !default;
-$ibo-dashlet-within-dashboard--dashlet-header-static--margin-top--is-not-first-dashlet: 12px !default;
+$ibo-dashlet-within-dashboard--dashlet-header-static--margin-top--is-not-first-dashlet: $ibo-spacing-400 !default;
 
 .ibo-dashboard--grid-row{
   // Margin on top to have a better visual separation like with fieldsets

css/backoffice/blocks-integrations/datatable/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "datatable-with-blocks";
+@import "datatable-within-panel";

css/backoffice/blocks-integrations/datatable/_datatable-with-blocks.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-datatable--spacing-top--with-other-blocks: $ibo-spacing-200 !default;
+
+.ibo-datatable + .ibo-block{
+  margin-top: $ibo-datatable--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/display-block/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "display-block-with-blocks";

css/backoffice/blocks-integrations/display-block/_display-block-with-blocks.scss

@@ -0,0 +1,16 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-display-block--spacing-top--with-same-block: $ibo-spacing-600 !default;
+$ibo-display-block--spacing-top--with-other-block: $ibo-spacing-500 !default;
+
+
+.display_block + .display_block {
+  margin-top: $ibo-display-block--spacing-top--with-same-block;
+}
+
+.display_block + .ibo-block:not(.display_block) {
+  margin-top: $ibo-display-block--spacing-top--with-other-block;
+}

css/backoffice/blocks-integrations/field/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "field-with-field";

css/backoffice/blocks-integrations/field/_field-with-field.scss

@@ -0,0 +1,13 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-field--spacing-top--with-same-block: $ibo-spacing-500 !default;
+
+.ibo-field + .ibo-field {
+  margin-top: $ibo-field--spacing-top--with-same-block;
+}
+
+.form_field + .form_field {
+  margin-top: $ibo-field--spacing-top--with-same-block;
+}

css/backoffice/blocks-integrations/fieldset/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "fieldset-with-fieldset";
+@import "fieldset-with-multicolumn";

css/backoffice/blocks-integrations/fieldset/_fieldset-with-fieldset.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-fieldset--spacing-left--with-fieldset: $ibo-spacing-800 !default;
+
+.ibo-fieldset + .ibo-fieldset:not(.ibo-column) {
+    margin-top: $ibo-fieldset--spacing-left--with-fieldset;
+}

css/backoffice/blocks-integrations/fieldset/_fieldset-with-multicolumn.scss

@@ -0,0 +1,11 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-fieldset--spacing-left--with-multicolumn: $ibo-spacing-800 !default;
+
+
+.ibo-multi-column + .ibo-fieldset {
+  margin-top: $ibo-fieldset--spacing-left--with-multicolumn;
+}

css/backoffice/blocks-integrations/input/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "input-with-label";
+@import "input-within-datatable";

css/backoffice/blocks-integrations/input/_input-with-label.scss

@@ -0,0 +1,14 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-input--spacing-left--with-label: $ibo-spacing-300 !default;
+
+
+/* Input reset */
+/* - Standard spacing between label and input */
+select + label, label + select, label > select,
+input + label, label + input, label > input {
+  margin-left: $ibo-input--spacing-left--with-label;
+}

css/backoffice/blocks-integrations/panel/_all.scss

@@ -0,0 +1,8 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "panel-with-blocks";
+@import "panel-within-main-content";
+@import "panel-within-modal";

css/backoffice/blocks-integrations/panel/_panel-with-blocks.scss

@@ -0,0 +1,15 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-panel--spacing-top--with-same-block: $ibo-spacing-600 !default;
+$ibo-panel--spacing-top--with-other-block: $ibo-spacing-500 !default;
+
+
+.ibo-panel + .ibo-panel {
+  margin-top: $ibo-panel--spacing-top--with-same-block;
+}
+
+.ibo-panel + .ibo-block:not(.ibo-panel) {
+  margin-top: $ibo-panel--spacing-top--with-other-block;
+}

css/backoffice/blocks-integrations/pill/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "pill-with-pill";

css/backoffice/blocks-integrations/pill/_pill-with-pill.scss

@@ -0,0 +1,14 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-pill--spacing-left--with-same-block: $ibo-spacing-500 !default;
+
+
+/* For pills, margin is set on the right to keep them aligned horizontally when they wrap */
+/* The drawback is that we can't set the margin only when next to another .ibo-pill as there is no such CSS selector */
+/* Also :last-child is used instead of :last-of-type as pill can be either an <a> or a <span> */
+.ibo-pill:not(:last-child) {
+  margin-right: $ibo-pill--spacing-left--with-same-block;
+}

css/backoffice/components/_alert.scss

@@ -4,8 +4,6 @@
  */
 
 /* SCSS variables */
-$ibo-alert--spacing-top--with-same-block: 6px !default;
-$ibo-alert--spacing-top--with-other-blocks: 16px !default;
 $ibo-alert--padding-y: 18px !default;
 $ibo-alert--padding-x: 20px !default;
 $ibo-alert--min-height: 30px !default;
@@ -14,10 +12,10 @@ $ibo-alert--border-radius: $ibo-border-radius-300 !default;
 $ibo-alert--title--highlight--width: 4px !default;
 $ibo-alert--title--highlight--height: 100% !default;
 
-$ibo-alert--body--margin-top: 4px !default;
+$ibo-alert--body--margin-top: $ibo-spacing-200 !default;
 
 $ibo-alert-minimized--padding-y: 5px !default;
-$ibo-alert-minimized--title--padding-bottom: 0px !default;
+$ibo-alert-minimized--title--padding-bottom: $ibo-spacing-0 !default;
 
 $ibo-alert--action-button--top: 5px !default;
 $ibo-alert--maximize-minimize-button--right: 30px !default;
@@ -49,7 +47,10 @@ $ibo-alert-colors: (
 	.ibo-alert.ibo-is-#{$sColor} {
 		background-color: $bg-color;
 		color: $text-color;
-
+    a {
+      color: $text-color;
+      @extend %ibo-font-ral-bol-150;
+    }
 		&::before {
 			background-color: $highlight-color;
 		}
@@ -113,15 +114,6 @@ $ibo-alert-colors: (
 	margin-top: $ibo-alert--body--margin-top;
 }
 
-/* Spacing between alert blocks */
-.ibo-alert + .ibo-alert {
-	margin-top: $ibo-alert--spacing-top--with-same-block;
-}
-/* Spacing between an alert block and something else */
-.ibo-alert + :not(.ibo-alert) {
-	margin-top: $ibo-alert--spacing-top--with-other-blocks;
-}
-
 .ibo-alert--action-button{
 	position: absolute;
 	cursor: pointer;

css/backoffice/components/_breadcrumbs.scss

@@ -3,29 +3,29 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-breadcrumbs--margin-right: 32px !default;
+$ibo-breadcrumbs--margin-right: $ibo-spacing-700 !default;
 
 $ibo-breadcrumbs--item--text-color: $ibo-color-grey-800 !default;
 
-$ibo-breadcrumbs--item-icon--margin-x: 8px !default;
+$ibo-breadcrumbs--item-icon--margin-x: $ibo-spacing-300 !default;
 $ibo-breadcrumbs--item-icon--max-width: 16px !default;
 $ibo-breadcrumbs--item-icon--text-color: $ibo-color-grey-600 !default;
 
 $ibo-breadcrumbs--item-label--max-width: 100px !default;
 
-$ibo-breadcrumbs--item-separator--margin-x: 12px !default;
+$ibo-breadcrumbs--item-separator--margin-x: $ibo-spacing-400 !default;
 $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
 
 $ibo-breadcrumbs--previous-items-list-toggler--text-color: $ibo-color-grey-700 !default;
 $ibo-breadcrumbs--previous-items-list-toggler--margin-right: 2 * $ibo-breadcrumbs--item-separator--margin-x !default;
 
 $ibo-breadcrumbs--previous-items-list--top: 37px !default;
-$ibo-breadcrumbs--previous-items-list--padding-y: 8px !default;
+$ibo-breadcrumbs--previous-items-list--padding-y: $ibo-spacing-300 !default;
 $ibo-breadcrumbs--previous-items-list--background-color: $ibo-color-white-100 !default;
 
 $ibo-breadcrumbs--previous-item--text-color: $ibo-breadcrumbs--item--text-color !default;
-$ibo-breadcrumbs--previous-item--padding-x: 12px !default;
+$ibo-breadcrumbs--previous-item--padding-x: $ibo-spacing-400 !default;
-$ibo-breadcrumbs--previous-item--padding-y: 12px !default;
+$ibo-breadcrumbs--previous-item--padding-y: $ibo-spacing-400 !default;
 $ibo-breadcrumbs--previous-item-label--max-width: 200px !default;
 
 .ibo-breadcrumbs{

css/backoffice/components/_button-group.scss

@@ -63,11 +63,4 @@ $ibo-button-group--elements-separator--border-left: 1px solid transparent !defau
       }
     }
   }
-}
-
-/* Reset siblings spacing */
-.ibo-button-group + .ibo-button-group,
-.ibo-button + .ibo-button-group,
-.ibo-button-group + .ibo-button{
-  margin-left: $ibo-button--sibling-spacing;
 }

css/backoffice/components/_button.scss

@@ -3,7 +3,6 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-button--sibling-spacing: 5px !default;
 $ibo-button--padding-y: 6px !default;
 $ibo-button--padding-x: 9px !default;
 $ibo-button--border: 0 !default;
@@ -11,10 +10,10 @@ $ibo-button--border-radius: $ibo-border-radius-400 !default;
 $ibo-button--box-shadow-bottom: 0px 2px 0px !default;
 $ibo-button--box-shadow-top: inset 0px 2px 0px !default;
 
-$ibo-button--label--margin-left: 4px !default;
+$ibo-button--label--margin-left: $ibo-spacing-200 !default;
 
-$ibo-button--vertical-align--margin-bottom: 4px !default;
+$ibo-button--vertical-align--margin-bottom: $ibo-spacing-200 !default;
-$ibo-button--vertical-align--margin-top: 4px !default;
+$ibo-button--vertical-align--margin-top: $ibo-spacing-200 !default;
 
 /**
 * - Text color
@@ -54,22 +53,22 @@ $ibo-button-colors: (
                 /* Primary action does not have the colors from the primary brand color, at least not for now */
                 'primary': (
                         '': (
-                                $ibo-color-cyan-700,
-                                $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
                                 $ibo-color-cyan-800,
+                                $ibo-color-white-100,
+                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
+                                $ibo-color-cyan-900,
                         ),
                         ':hover': (
-                                $ibo-color-cyan-800,
+                                $ibo-color-cyan-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
+                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
-                                $ibo-color-cyan-800,
+                                $ibo-color-cyan-900,
                         ),
                         ':active': (
-                                $ibo-color-cyan-800,
+                                $ibo-color-cyan-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
+                                $ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
-                                $ibo-color-cyan-800,
+                                $ibo-color-cyan-900,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -106,22 +105,22 @@ $ibo-button-colors: (
                 ),
                 'danger': (
                         '': (
-                                $ibo-color-danger-600,
-                                $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-danger-800,
                                 $ibo-color-danger-700,
+                                $ibo-color-white-100,
+                                $ibo-button--box-shadow-bottom $ibo-color-danger-900,
+                                $ibo-color-danger-800,
                         ),
                         ':hover': (
-                                $ibo-color-danger-700,
+                                $ibo-color-danger-800,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-danger-800,
+                                $ibo-button--box-shadow-bottom $ibo-color-danger-900,
-                                $ibo-color-danger-700,
+                                $ibo-color-danger-800,
                         ),
                         ':active': (
-                                $ibo-color-danger-700,
+                                $ibo-color-danger-800,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
+                                $ibo-button--box-shadow-top $ibo-color-danger-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-800,
-                                $ibo-color-danger-700,
+                                $ibo-color-danger-800,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -132,22 +131,22 @@ $ibo-button-colors: (
                 ),
                 'success': (
                         '': (
-                                $ibo-color-success-700,
-                                $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-success-900,
                                 $ibo-color-success-800,
+                                $ibo-color-white-100,
+                                $ibo-button--box-shadow-bottom $ibo-color-success-950,
+                                $ibo-color-success-900,
                         ),
                         ':hover': (
-                                $ibo-color-success-800,
+                                $ibo-color-success-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-success-900,
+                                $ibo-button--box-shadow-bottom $ibo-color-success-950,
-                                $ibo-color-success-800,
+                                $ibo-color-success-900,
                         ),
                         ':active': (
-                                $ibo-color-success-800,
+                                $ibo-color-success-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
+                                $ibo-button--box-shadow-top $ibo-color-success-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-900,
-                                $ibo-color-success-800,
+                                $ibo-color-success-900,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -159,22 +158,22 @@ $ibo-button-colors: (
                 /* Colors */
                 'red': (
                         '': (
-                                $ibo-color-red-600,
-                                $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-red-800,
                                 $ibo-color-red-700,
+                                $ibo-color-white-100,
+                                $ibo-button--box-shadow-bottom $ibo-color-red-900,
+                                $ibo-color-red-800,
                         ),
                         ':hover': (
-                                $ibo-color-red-700,
+                                $ibo-color-red-800,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-red-800,
+                                $ibo-button--box-shadow-bottom $ibo-color-red-900,
-                                $ibo-color-red-700,
+                                $ibo-color-red-800,
                         ),
                         ':active': (
-                                $ibo-color-red-700,
+                                $ibo-color-red-800,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
+                                $ibo-button--box-shadow-top $ibo-color-red-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-800,
-                                $ibo-color-red-700,
+                                $ibo-color-red-800,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -185,22 +184,22 @@ $ibo-button-colors: (
                 ),
                 'green': (
                         '': (
-                                $ibo-color-green-700,
-                                $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-green-900,
                                 $ibo-color-green-800,
+                                $ibo-color-white-100,
+                                $ibo-button--box-shadow-bottom $ibo-color-green-950,
+                                $ibo-color-green-900,
                         ),
                         ':hover': (
-                                $ibo-color-green-800,
+                                $ibo-color-green-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-green-900,
+                                $ibo-button--box-shadow-bottom $ibo-color-green-950,
-                                $ibo-color-green-800,
+                                $ibo-color-green-900,
                         ),
                         ':active': (
-                                $ibo-color-green-800,
+                                $ibo-color-green-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
+                                $ibo-button--box-shadow-top $ibo-color-green-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-900,
-                                $ibo-color-green-800,
+                                $ibo-color-green-900,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -211,22 +210,22 @@ $ibo-button-colors: (
                 ),
                 'cyan': (
                         '': (
-                                $ibo-color-cyan-500,
+                                $ibo-color-cyan-800,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
+                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                 $ibo-color-cyan-900,
                         ),
                         ':hover': (
-                                $ibo-color-cyan-700,
+                                $ibo-color-cyan-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
+                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                 $ibo-color-cyan-900,
                         ),
                         ':active': (
-                                $ibo-color-cyan-700,
+                                $ibo-color-cyan-900,
                                 $ibo-color-white-100,
-                                $ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
+                                $ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
-                                $ibo-color-cyan-700,
+                                $ibo-color-cyan-900,
                         ),
                         ':disabled': (
                                 $ibo-color-grey-300,
@@ -268,9 +267,9 @@ $ibo-button-colors: (
                 'primary': (
                         '': (
                                 transparent,
-                                $ibo-color-cyan-800,
+                                $ibo-color-cyan-900,
                                 $ibo-button--box-shadow-bottom transparent,
-                                $ibo-color-cyan-700,
+                                $ibo-color-cyan-800,
                         ),
                         ':hover': (
                                 $ibo-color-white-100,
@@ -475,10 +474,7 @@ $ibo-button-colors: (
   text-transform: uppercase;
   white-space: nowrap; /* To force sub elements to be on 1 line */
   @extend %ibo-font-ral-sembol-100;
-
+  
-  & + .ibo-button {
-    margin-left: $ibo-button--sibling-spacing;
-	}
 
   &.ibo-action-button {
     float: right;

css/backoffice/components/_collapsible-section.scss

@@ -4,7 +4,6 @@
  */
 
 /* SCSS variables */
-$ibo-collapsible-section--margin-top: 3rem !default;
 $ibo-collapsible-section--title--color: $ibo-panel--title--color !default;
 $ibo-collapsible-section--body--background-color: $ibo-panel--body--background-color !default;
 $ibo-collapsible-section--highlight--height: 8px !default;
@@ -13,18 +12,15 @@ $ibo-collapsible-section--maximize-minimize-button--color: $ibo-panel--collapsib
 $ibo-collapsible-section--maximize-minimize-button--right: $ibo-panel--collapsible-toggler--margin-right !default;
 
 
-$ibo-collapsible-section--body--padding-bottom: 16px !default;
+$ibo-collapsible-section--body--padding-bottom: $ibo-spacing-500 !default;
 $ibo-collapsible-section--body--padding-top: $ibo-collapsible-section--body--padding-bottom + $ibo-collapsible-section--highlight--height !default;
-$ibo-collapsible-section--body--padding-x: 16px !default;
+$ibo-collapsible-section--body--padding-x: $ibo-spacing-500 !default;
 $ibo-collapsible-section--body--border-radius: $ibo-panel--body--border-radius !default;
 $ibo-collapsible-section--body--border-size: 1px !default;
 $ibo-collapsible-section--body--border-color: $ibo-panel--base-border-color !default;
 
 
 /* Rules */
-.ibo-collapsible-section {
-	margin: $ibo-collapsible-section--margin-top auto;
-}
 
 .ibo-collapsible-section--header {
 	display: flex;
@@ -64,6 +60,7 @@ $ibo-collapsible-section--body--border-color: $ibo-panel--base-border-color !def
 		}
 
 		.ibo-collapsible-section--action-button {
+      align-self: center;
 			&.ibo-collapsible-section--maximize-button, &.ibo-collapsible-section--minimize-button {
         color: $ibo-collapsible-section--maximize-minimize-button--color;
 				margin-right: $ibo-collapsible-section--maximize-minimize-button--right;

css/backoffice/components/_datatable.scss

@@ -4,15 +4,15 @@
  */
 
 $ibo-datatable--toolbar--padding-x: 6px !default;
-$ibo-datatable--toolbar--padding-y: 0 !default;
+$ibo-datatable--toolbar--padding-y: $ibo-spacing-0 !default;
-$ibo-datatable--toolbar--text-color: $ibo-color-grey-700 !default;
+$ibo-datatable--toolbar--text-color: $ibo-color-grey-800 !default;
 $ibo-datatable--toolbar--elements-spacing: 1rem !default;
 $ibo-datatable--toolbar--table-spacing: 18px !default;
 
 $ibo-datatable-header--text-color: $ibo-base-variable--text-color !default;
 
-$ibo-datatable-panel--table-spacing: 48px !default;
+$ibo-datatable-panel--table-spacing: $ibo-spacing-800 !default;
-$ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default;
+$ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top $ibo-spacing-0 $ibo-panel--body--padding-bottom !default;
 
 $ibo-datatable--row--background-color--is-hover: $ibo-color-primary-200 !default;
 $ibo-datatable--row--background-color--is-selected: $ibo-color-primary-300 !default;

css/backoffice/components/_field-badge.scss

@@ -3,8 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-field-badge--margin: 0 !default;
+$ibo-field-badge--margin: $ibo-spacing-0 !default;
-$ibo-field-badge--padding: 4px 10px !default;
+$ibo-field-badge--padding: $ibo-spacing-200 10px !default;
 $ibo-field-badge--border-radius: $ibo-border-radius-300 !default;
 
 $ibo-field-badge--label--spacing-x: 0.5rem !default;

css/backoffice/components/_field.scss

@@ -4,18 +4,17 @@
  */
 
 /* SCSS variables */
-$ibo-field--sibling-spacing: 16px !default;
+$ibo-field--value--color: $ibo-color-grey-800 !default;
-$ibo-field--value--color: $ibo-color-grey-700 !default;
 
 $ibo-field--label--description--content: "?" !default;
-$ibo-field--label--description--padding-left: 4px !default;
+$ibo-field--label--description--padding-left: $ibo-spacing-200 !default;
 $ibo-field--label--description--color: $ibo-color-grey-600 !default;
 
 $ibo-field--background-color--is-fullscreen: $ibo-color-white-100 !default;
 
 $ibo-field--label--width--is-fullscreen: 100% !default;
-$ibo-field--label--padding-x--is-fullscreen: 8px !default;
+$ibo-field--label--padding-x--is-fullscreen: $ibo-spacing-300 !default;
-$ibo-field--label--padding-y--is-fullscreen: 4px !default;
+$ibo-field--label--padding-y--is-fullscreen: $ibo-spacing-200 !default;
 $ibo-field--label--background-color--is-fullscreen: $ibo-color-grey-100 !default;
 $ibo-field--label--border-bottom--is-fullscreen: 1px solid $ibo-color-grey-400 !default;
 
@@ -27,20 +26,20 @@ $ibo-field--comments--size: 5em !default;
 $ibo-field--comments--font-size: $ibo-font-size-150 !default;
 
 $ibo-field--value--scrollbar-track-background-color: $ibo-color-white-200 !default;
-$ibo-field--value--margin-top--for-large: 2px !default;
+$ibo-field--value--margin-top--for-large: $ibo-spacing-100 !default;
 $ibo-field--value--padding-x--is-fullscreen: $ibo-field--label--padding-x--is-fullscreen !default;
-$ibo-field--value--padding-top--is-fullscreen: $ibo-field--label--padding-y--is-fullscreen + 32px !default;
+$ibo-field--value--padding-top--is-fullscreen: $ibo-field--label--padding-y--is-fullscreen + $ibo-spacing-700 !default;
 $ibo-field--value--padding-bottom--is-fullscreen: $ibo-field--label--padding-y--is-fullscreen !default;
 
 $ibo-field--value-decoration--spacing-x: 0.5rem !default;
 
-$ibo-field--enable-bulk--padding-y: 2px !default;
+$ibo-field--enable-bulk--padding-y: $ibo-spacing-100 !default;
 $ibo-field--enable-bulk--padding-x: 5px !default;
 $ibo-field--enable-bulk--margin-left: 5px !default;
 $ibo-field--enable-bulk--height: calc(100% - #{$ibo-field--enable-bulk--padding-x}) !default;
 $ibo-field--enable-bulk--border-radius: $ibo-border-radius-500 !default;
 
-$ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
+$ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
 
 /* SCSS rules */
 .ibo-field {
@@ -48,33 +47,26 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
 
   /* Avoid value to overflow from its container with very long strings (typically URLs) */
   /* Note: Some types of attribute must be excluding as it can alter their rendering    */
-  &:not([data-attribute-type="AttributeBlob"])
+  &:not(
-  &:not([data-attribute-type="AttributeFile"])
+    [data-attribute-type="AttributeBlob"],
-  &:not([data-attribute-type="AttributeImage"])
+    [data-attribute-type="AttributeFile"],
-  &:not([data-attribute-type="AttributeCustomFields"])
+    [data-attribute-type="AttributeImage"],
-  &:not([data-attribute-type="AttributeTagSet"])
+    [data-attribute-type="AttributeCustomFields"],
-  &:not([data-attribute-type="AttributeEnumSet"])
+    [data-attribute-type="AttributeTagSet"],
-  &:not([data-attribute-type="AttributeClassAttCodeSet"])
+    [data-attribute-type="AttributeEnumSet"],
-  &:not([data-attribute-type="AttributeQueryAttCodeSet"])
+    [data-attribute-type="AttributeClassAttCodeSet"],
-  &:not(.ibo-input-file-select--container) {
+    [data-attribute-type="AttributeQueryAttCodeSet"],
-    /* We need the rule to apply for the class and all its descendants, hence the "&, & *" */
+    .ibo-input-file-select--container
+  ) {
+    /* We need the rule to apply for the class and all its descendants, hence the "& *" */
     .ibo-field--value {
-      &, & * {
+      word-break: break-word;
+      white-space: inherit; /* Here we don't put break-spaces as it would put ".ibo-field-small .ibo-field-value" on a new line due to the spaces/indentation of the HTML templates. For now we rather have this rule than diminish the templates readability/maintenability */
+      & * {
         word-break: break-word;
-        white-space: inherit; /* Here we don't put break-spaces as it would put ".ibo-field-small .ibo-field-value" on a new line due to the spaces/indentation of the HTML templates. For now we rather have this rule than diminish the templates readability/maintenability */
+        white-space: inherit;
       }
     }
-    &.ibo-field-large {
-      .ibo-field--value {
-        &, & * {
-          white-space: break-spaces; /* For large fields we don't have the issue stated above */
-        }
-      }
-    }
-  }
-
-  & ~ .ibo-field {
-    margin-top: $ibo-field--sibling-spacing;
   }
 }
 
@@ -165,6 +157,7 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
   min-width: 100px;
   max-width: 145px;
   width: 30%;
+  word-break: break-word; /* We want labels to wrap if it is very long if it has no spaces */
   @extend %ibo-font-weight-600;
 
   > .ibo-has-description {
@@ -190,17 +183,10 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
   /* Note that along with with, we now display a "expand" icon on large fields so we can have a better view of its content */
   .HTML {
     @extend .ibo-vendors-ckeditor--display-content;
-    display: grid;
 
     table {
       table-layout: fixed;
       width: 100%;
-
-      /* N°2788 - Force table containing <pre> to wrap as much as they can in the object details, otherwise it overflows on the other columns. We do this terrible hack only here as this is due to how the columns / fieldsets works. We might have the opportunity to improve it one day. */
-      pre {
-        white-space: unset;
-        word-break: break-all;
-      }
     }
   }
 }
@@ -211,7 +197,6 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
 
 /* For log fields in the bulk operation screens */
 .ibo-fieldset-legend > .ibo-field--comments {
-//  display: contents;
   padding-bottom: $ibo-field--value--margin-top--for-large;
   font-size: $ibo-field--comments--font-size;
 }
@@ -265,6 +250,3 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
   margin-left: $ibo-field--enable-bulk--checkbox--margin-left;
 }
 
-.form_field ~ .form_field {
-    margin-top: $ibo-field--sibling-spacing;
- }

css/backoffice/components/_fieldset.scss

@@ -3,11 +3,11 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-fieldset--sibling-spacing: 48px !default;
+$ibo-fieldset--sibling-spacing: $ibo-spacing-800 !default;
 
 $ibo-fieldset--legend--width: 100% !default;
-$ibo-fieldset--legend--margin-bottom: 16px !default;
+$ibo-fieldset--legend--margin-bottom: $ibo-spacing-500 !default;
-$ibo-fieldset--legend--padding-bottom: 4px !default;
+$ibo-fieldset--legend--padding-bottom: $ibo-spacing-200 !default;
 $ibo-fieldset--legend--border-bottom-size: 2px !default;
 $ibo-fieldset--legend--border-bottom-color: $ibo-color-grey-500 !default;
 $ibo-fieldset--legend--border-bottom-style: solid !default;

css/backoffice/components/_global-search.scss

@@ -6,12 +6,16 @@
 /* SCSS variables */
 $ibo-global-search--head--background-color: $ibo-color-white-100 !default;
 
-$ibo-global-search--icon-padding-x: 16px !default;
+$ibo-global-search--icon-padding-x: $ibo-spacing-500 !default;
-$ibo-global-search--icon-padding-y: 0 !default;
+$ibo-global-search--icon-padding-y: $ibo-spacing-0 !default;
+$ibo-global-search--icon--color: $ibo-color-primary-600 !default;
+$ibo-global-search--icon--color--on-hover: $ibo-color-primary-700 !default;
+$ibo-global-search--icon--color--on-active: $ibo-color-primary-800 !default;
 
-$ibo-global-search--input--padding: 0 !default;
+
-$ibo-global-search--input--padding-x--is-opened: 8px !default;
+$ibo-global-search--input--padding: $ibo-spacing-0 !default;
-$ibo-global-search--input--padding-y--is-opened: 8px !default;
+$ibo-global-search--input--padding-x--is-opened: $ibo-spacing-300 !default;
+$ibo-global-search--input--padding-y--is-opened: $ibo-spacing-300 !default;
 $ibo-global-search--input--width: 0 !default;
 $ibo-global-search--input--width--is-opened: 245px !default;
 $ibo-global-search--input--text-color: $ibo-color-grey-800 !default;
@@ -19,30 +23,30 @@ $ibo-global-search--input--placeholder-color: $ibo-color-grey-600 !default;
 
 $ibo-global-search--drawer--max-height: 300px !default;
 $ibo-global-search--drawer--padding-x: $ibo-global-search--icon-padding-x !default;
-$ibo-global-search--drawer--padding-y: 16px !default;
+$ibo-global-search--drawer--padding-y: $ibo-spacing-500 !default;
 $ibo-global-search--drawer--top: -1 * ($ibo-global-search--drawer--max-height) - 10 !default; /* 10px of margin to avoid to be slightly visible when closed and has a lot of history */
 $ibo-global-search--drawer--top--is-opened: 100% !default;
 $ibo-global-search--drawer--background-color: $ibo-color-white-100 !default;
 
-$ibo-global-search--compartment-title--margin-bottom: 8px !default;
+$ibo-global-search--compartment-title--margin-bottom: $ibo-spacing-300 !default;
-$ibo-global-search--compartment-title--padding-left: 32px !default;
+$ibo-global-search--compartment-title--padding-left: $ibo-spacing-700 !default;
-$ibo-global-search--compartment-title--text-color: $ibo-color-grey-600 !default;
+$ibo-global-search--compartment-title--text-color: $ibo-color-grey-800 !default;
-$ibo-global-search--compartment-title--line-spacing: 8px !default;
+$ibo-global-search--compartment-title--line-spacing: $ibo-spacing-300 !default;
 
 $ibo-global-search--compartment-content--text-color: $ibo-color-grey-900 !default;
 
-$ibo-global-search--compartment-element--margin-bottom: 8px !default;
+$ibo-global-search--compartment-element--margin-bottom: $ibo-spacing-300 !default;
 
-$ibo-global-search--compartment-element-image--margin-right: 8px !default;
+$ibo-global-search--compartment-element-image--margin-right: $ibo-spacing-300 !default;
 $ibo-global-search--compartment-element-image--width: 20px !default;
 
-$ibo-global-search--compartment--placeholder-image--margin-top: 24px !default;
+$ibo-global-search--compartment--placeholder-image--margin-top: $ibo-spacing-600 !default;
-$ibo-global-search--compartment--placeholder-image--margin-bottom: 16px !default;
+$ibo-global-search--compartment--placeholder-image--margin-bottom: $ibo-spacing-500 !default;
 $ibo-global-search--compartment--placeholder-image--margin-y: auto !default;
 $ibo-global-search--compartment--placeholder-image--width: 66% !default;
 
-$ibo-global-search--compartment--placeholder-hint--padding-x: 8px !default;
+$ibo-global-search--compartment--placeholder-hint--padding-x: $ibo-spacing-300 !default;
-$ibo-global-search--compartment--placeholder-hint--padding-y: 0 !default;
+$ibo-global-search--compartment--placeholder-hint--padding-y: $ibo-spacing-0 !default;
 $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-700 !default;
 
 /* Animations*/
@@ -81,9 +85,17 @@ $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-7
 	background-color: $ibo-global-search--head--background-color;
 }
 .ibo-global-search--icon{
+  color: $ibo-global-search--icon--color;
 	align-self: center;
 	padding: $ibo-global-search--icon-padding-y $ibo-global-search--icon-padding-x;
 	@extend %ibo-font-ral-nor-400;
+
+  &:hover{
+    color: $ibo-global-search--icon--color--on-hover;
+  }
+  &:active{
+    color: $ibo-global-search--icon--color--on-active;
+  }
 }
 .ibo-global-search--input{
 	padding: $ibo-global-search--input--padding;

css/backoffice/components/_medallion-icon.scss

@@ -4,14 +4,14 @@
  */
 
 $ibo-medallion-icon--padding-y: 13px !default;
-$ibo-medallion-icon--padding-x: 0 !default;
+$ibo-medallion-icon--padding-x: $ibo-spacing-0 !default;
 
 $ibo-medallion-icon--image--diameter: 48px !default;
-$ibo-medallion-icon--image--padding: 2px !default;
+$ibo-medallion-icon--image--padding: $ibo-spacing-100 !default;
 $ibo-medallion-icon--image--border-radius: $ibo-border-radius-full !default;
 $ibo-medallion-icon--image--background-color: $ibo-color-blue-200 !default;
 
-$ibo-medallion-icon--description--padding-left: 8px !default;
+$ibo-medallion-icon--description--padding-left: $ibo-spacing-300 !default;
 
 .ibo-medallion-icon{
   display: flex;

css/backoffice/components/_newsroom-menu.scss

@@ -7,14 +7,14 @@
 $ibo-navigation-menu--notifications-menu--min-width: 250px;
 
 $ibo-navigation-menu--notifications--item--image--margin-x: 6px !default;
-$ibo-navigation-menu--notifications--item--image--margin-y: 0 !default;
+$ibo-navigation-menu--notifications--item--image--margin-y: $ibo-spacing-0 !default;
 $ibo-navigation-menu--notifications--item--image--max-width: 20px !default;
 $ibo-navigation-menu--notifications--item--image--max-height: 20px !default;
 $ibo-navigation-menu--notifications--item--image--border-radius: $ibo-border-radius-full !default;
 
 $ibo-navigation-menu--notifications--item--bottom-text--margin-left: auto !default;
 
-$ibo-navigation-menu--notifications--item--content--padding-y: 0 !default;
+$ibo-navigation-menu--notifications--item--content--padding-y: $ibo-spacing-0 !default;
 $ibo-navigation-menu--notifications--item--content--padding-x: 14px !default;
 $ibo-navigation-menu--notifications--item--content--img--max-height: 100px !default;
 $ibo-navigation-menu--notifications--item--content--img--padding: 5px !default;
@@ -23,11 +23,11 @@ $ibo-navigation-menu--notifications--item--new-message-indicator--width: 10px !d
 $ibo-navigation-menu--notifications--item--new-message-indicator--height: 10px !default;
 $ibo-navigation-menu--notifications--item--new-message-indicator--background-color: $ibo-color-blue-500 !default;
 $ibo-navigation-menu--notifications--item--new-message-indicator--border-radius: $ibo-border-radius-full !default;
-$ibo-navigation-menu--notifications--item--new-message-indicator--margin-top: 4px !default;
+$ibo-navigation-menu--notifications--item--new-message-indicator--margin-top: $ibo-spacing-200 !default;
 
 $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right: 15px !default;
 
-$ibo-navigation-menu--notifications-dismiss-all--icon--margin:  0 10px 0 0 !default;
+$ibo-navigation-menu--notifications-dismiss-all--icon--margin: $ibo-spacing-0 10px $ibo-spacing-0 $ibo-spacing-0 !default;
 
 $ibo-popover-menu--item--no-message--image--svg--width : 100% !default;
 $ibo-popover-menu--item--no-message--image--svg--height : inherit !default;

css/backoffice/components/_panel.scss

@@ -39,32 +39,29 @@ $ibo-panel-colors: (
 ) !default;
 
 /* - Specific variables for the block */
-$ibo-panel--spacing-top: 24px !default;
-
 $ibo-panel--highlight--width: 100% !default;
 $ibo-panel--highlight--height: 8px !default;
-$ibo-panel--highlight--background-color: 8px !default;
 $ibo-panel--highlight--border-radius: $ibo-border-radius-400 $ibo-border-radius-400 0 0 !default;
 $ibo-panel--highlight--padding-bottom: $ibo-panel--highlight--height !default;
 
 $ibo-panel--body--z-index: 1 !default;
 $ibo-panel--body--background-color: $ibo-color-white-100 !default;
-$ibo-panel--body--padding-bottom: 24px !default;
+$ibo-panel--body--padding-bottom: $ibo-spacing-600 !default;
 $ibo-panel--body--padding-top: $ibo-panel--body--padding-bottom + $ibo-panel--highlight--height !default;
-$ibo-panel--body--padding-x: 16px !default;
+$ibo-panel--body--padding-x: $ibo-spacing-500 !default;
 $ibo-panel--body--border-radius: $ibo-border-radius-500 !default;
 $ibo-panel--body--border: $ibo-panel--base-border !default;
 
 $ibo-panel--header--z-index: $ibo-panel--body--z-index + 1 !default; /* Should always be above the body */
-$ibo-panel--header--margin-bottom: 4px !default;
+$ibo-panel--header--margin-bottom: $ibo-spacing-200 !default;
 $ibo-panel--header--background-color--is-sticking: $ibo-color-grey-100 !default;
 $ibo-panel--header--border--is-sticking: $ibo-panel--base-border !default;
-$ibo-panel--header--padding-y--is-sticking: 4px !default;
+$ibo-panel--header--padding-y--is-sticking: $ibo-spacing-200 !default;
 
 $ibo-panel--icon--size: 48px !default;
-$ibo-panel--icon--spacing: 16px !default;
+$ibo-panel--icon--spacing: $ibo-spacing-500 !default;
 $ibo-panel--icon--size-as-medallion: 72px !default;
-$ibo-panel--icon--spacing--as-medallion: 16px !default;
+$ibo-panel--icon--spacing--as-medallion: $ibo-spacing-500 !default;
 $ibo-panel--icon--bottom--as-medallion: -24px !default;
 $ibo-panel--icon--background-color--as-medallion: $ibo-color-grey-100 !default;
 $ibo-panel--icon--border--as-medallion: 2px solid $ibo-color-blue-grey-300 !default;
@@ -84,14 +81,12 @@ $ibo-panel--title--color: $ibo-color-grey-900 !default;
 $ibo-panel--subtitle--font-size--is-sticking: $ibo-font-size-100 !default;
 $ibo-panel--subtitle--color: $ibo-color-grey-800 !default;
 
-$ibo-panel--collapsible-toggler--margin-right: 8px !default;
+$ibo-panel--collapsible-toggler--margin-right: $ibo-spacing-300 !default;
 $ibo-panel--collapsible-toggler--font-size: $ibo-font-size-250 !default;
 $ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default;
 
 /* Rules */
-.ibo-panel + .ibo-panel {
+
-  margin-top: $ibo-panel--spacing-top;
-}
 
 .ibo-panel {
   --ibo-main-color: map-get($ibo-panel-colors, 'neutral'); /* --ibo-main-color is to allow overload from custom dynamic value from the DM. The overload will be done through an additional CSS class of a particular DM class or DM attribute */

css/backoffice/components/_pill.scss

@@ -4,7 +4,7 @@
  */
 
 /* SCSS variables */
-$ibo-pill--margin: 4px 8px !default;
+$ibo-pill--margin-y: $ibo-spacing-200 !default;
 $ibo-pill--padding: 6px 10px !default;
 $ibo-pill--max-width: 240px !default;
 $ibo-pill--border-radius: $ibo-border-radius-300 !default;
@@ -84,7 +84,8 @@ $ibo-pill-states-colors: (
 
   @extend %ibo-fully-centered-content;
   max-width: $ibo-pill--max-width;
-  margin: $ibo-pill--margin;
+  margin-top: $ibo-pill--margin-y;
+  margin-bottom: $ibo-pill--margin-y;
   padding: $ibo-pill--padding;
   border-radius: $ibo-pill--border-radius;
 

css/backoffice/components/_prop.scss

@@ -3,8 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-prop--apply--padding-left: 12px !default;
+$ibo-prop--apply--padding-left: $ibo-spacing-400 !default;
-$ibo-prop--cancel--padding-left: 7px !default;
+$ibo-prop--cancel--padding-left: $ibo-spacing-300 !default;
 
 $ibo-prop--apply-cancel--span--height: 28px !default;
 $ibo-prop--apply-cancel--span--width: 32px !default;
@@ -42,6 +42,9 @@ $ibo-prop--apply--error--color: $ibo-color-grey-800 !default;
 		width: $ibo-prop--apply-cancel--span--width;
 		text-align: center;
     > div{
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
       width: 100%;
       height: 100%;
     }

css/backoffice/components/_quick-create.scss

@@ -6,12 +6,15 @@
 /* SCSS variables */
 $ibo-quick-create--head--background-color: $ibo-color-white-100 !default;
 
-$ibo-quick-create--icon-padding-x: 16px !default;
+$ibo-quick-create--icon-padding-x: $ibo-spacing-500 !default;
-$ibo-quick-create--icon-padding-y: 0 !default;
+$ibo-quick-create--icon-padding-y: $ibo-spacing-0 !default;
+$ibo-quick-create--icon--color: $ibo-color-primary-600 !default;
+$ibo-quick-create--icon--color--on-hover: $ibo-color-primary-700 !default;
+$ibo-quick-create--icon--color--on-active: $ibo-color-primary-800 !default;
 
 $ibo-quick-create--input--padding: 0 default;
-$ibo-quick-create--input--padding-x--is-opened: 8px !default;
+$ibo-quick-create--input--padding-x--is-opened: $ibo-spacing-300 !default;
-$ibo-quick-create--input--padding-y--is-opened: 8px !default;
+$ibo-quick-create--input--padding-y--is-opened: $ibo-spacing-300 !default;
 $ibo-quick-create--input--width: 0 !default;
 $ibo-quick-create--input--width--is-opened: 245px !default;
 $ibo-quick-create--input--text-color: $ibo-color-grey-800 !default;
@@ -23,37 +26,37 @@ $ibo-quick-create--input-options--border-radius: 0 !default;
 
 $ibo-quick-create--drawer--max-height: 300px !default;
 $ibo-quick-create--drawer--padding-x: $ibo-quick-create--icon-padding-x !default;
-$ibo-quick-create--drawer--padding-y: 16px !default;
+$ibo-quick-create--drawer--padding-y: $ibo-spacing-500 !default;
 $ibo-quick-create--drawer--top: -1 * ($ibo-quick-create--drawer--max-height) - 10 !default; /* 10px of margin to avoid to be slightly visible when closed and has a lot of history */
 $ibo-quick-create--drawer--top--is-opened: 100% !default;
 $ibo-quick-create--drawer--background-color: $ibo-color-white-100 !default;
 
-$ibo-quick-create--compartment-title--margin-top: 8px !default;
+$ibo-quick-create--compartment-title--margin-top: $ibo-spacing-300 !default;
 $ibo-quick-create--compartment-title--margin-bottom: $ibo-quick-create--compartment-title--margin-top !default;
-$ibo-quick-create--compartment-title--padding-left: 32px !default;
+$ibo-quick-create--compartment-title--padding-left: $ibo-spacing-700 !default;
-$ibo-quick-create--compartment-title--text-color: $ibo-color-grey-600 !default;
+$ibo-quick-create--compartment-title--text-color: $ibo-color-grey-800 !default;
-$ibo-quick-create--compartment-title--line-spacing: 8px !default;
+$ibo-quick-create--compartment-title--line-spacing: $ibo-spacing-300 !default;
 
 $ibo-quick-create--compartment-content--text-color: $ibo-color-grey-900 !default;
 
-$ibo-quick-create--compartment-element--padding-x: 8px !default;
+$ibo-quick-create--compartment-element--padding-x: $ibo-spacing-300 !default;
-$ibo-quick-create--compartment-element--padding-y: 4px !default;
+$ibo-quick-create--compartment-element--padding-y: $ibo-spacing-200 !default;
 $ibo-quick-create--compartment-element--margin-x: -1 * $ibo-quick-create--compartment-element--padding-x !default;
 $ibo-quick-create--compartment-element--background-color--is-active: $ibo-color-grey-200 !default;
 $ibo-quick-create--compartment-element--border-radius--is-active: $ibo-border-radius-300 !default;
 
-$ibo-quick-create--compartment-element-image--margin-right: 8px !default;
+$ibo-quick-create--compartment-element-image--margin-right: $ibo-spacing-300 !default;
 $ibo-quick-create--compartment-element-image--width: 20px !default;
 
 $ibo-quick-create--compartment-results--container--width: 100% !important !default;
 
-$ibo-quick-create--compartment--placeholder-image--margin-top: 24px !default;
+$ibo-quick-create--compartment--placeholder-image--margin-top: $ibo-spacing-600 !default;
-$ibo-quick-create--compartment--placeholder-image--margin-bottom: 16px !default;
+$ibo-quick-create--compartment--placeholder-image--margin-bottom: $ibo-spacing-500 !default;
 $ibo-quick-create--compartment--placeholder-image--margin-x: auto !default;
 $ibo-quick-create--compartment--placeholder-image--width: 66% !default;
 
-$ibo-quick-create--compartment--placeholder-hint--padding-x: 8px !default;
+$ibo-quick-create--compartment--placeholder-hint--padding-x: $ibo-spacing-300 !default;
-$ibo-quick-create--compartment--placeholder-hint--padding-y: 0 !default;
+$ibo-quick-create--compartment--placeholder-hint--padding-y: $ibo-spacing-0 !default;
 $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-700 !default;
 
 /* Animations*/
@@ -91,9 +94,17 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
 	background-color: $ibo-quick-create--head--background-color;
 }
 .ibo-quick-create--icon{
+  color: $ibo-quick-create--icon--color;
 	align-self: center;
 	padding: $ibo-quick-create--icon-padding-y $ibo-quick-create--icon-padding-x;
 	@extend %ibo-font-ral-nor-400;
+  
+  &:hover{
+    color: $ibo-quick-create--icon--color--on-hover;
+  }
+  &:active{
+    color: $ibo-quick-create--icon--color--on-active;
+  }
 }
 .ibo-quick-create--input{
 	width: $ibo-quick-create--input--width;

css/backoffice/components/_search-form.scss

@@ -20,6 +20,10 @@ $ibo-search-form-panel--more-criteria--background-color: $ibo-color-white-100 !d
 $ibo-search-form-panel--more-criteria--icon--color: $ibo-color-primary-600 !default;
 $ibo-search-form-panel--more-criteria--border-color: $ibo-search-form-panel--criteria--border-color !default;
 
+$ibo-search-form-panel--items--hover--color: $ibo-color-grey-200 !default;
+
+$ibo-search-form-panel--multiple-choice--hover--color: $ibo-color-grey-200 !default;
+
 $ibo-search-form-panel--misc-button--background-color: $ibo-search-form-panel--more-criteria--background-color !default;
 $ibo-search-form-panel--misc-button--icon--color: $ibo-search-form-panel--more-criteria--icon--color !default;
 
@@ -148,13 +152,13 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 
 	.sf_message {
 		display: none;
-		margin: 8px 8px 0px 8px;
+		margin: $ibo-spacing-300 $ibo-spacing-300 $ibo-spacing-0 $ibo-spacing-300;
 		border-radius: 0px;
 	}
 
 	.sf_criterion_area {
 		/*display: none;*/
-		padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
+		padding: $ibo-spacing-300 $ibo-spacing-300 3px $ibo-spacing-300; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
 
 		.sf_criterion_row {
 
@@ -204,7 +208,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 			vertical-align: top;
 
 			&.opened {
-				margin-bottom: 0px; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
+				margin-bottom: $ibo-spacing-0; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
 
 				.sfc_header,
 				.sfm_header {
@@ -214,7 +218,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 			}
 
 			> * {
-				padding: 7px 8px;
+				padding: 7px $ibo-spacing-300;
 				vertical-align: top;
 				border: solid 1px $ibo-search-form-panel--more-criteria--border-color;
 				border-radius: $ibo-border-radius-300;
@@ -365,7 +369,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 
 						.sfc_op_radio {
 							width: 12px;
-							margin: 0px;
+							margin: $ibo-spacing-0;
 							margin-right: 7px;
 						}
 
@@ -384,7 +388,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 						.sfc_opc_multichoices {
 							label > input {
 								vertical-align: text-top;
-								margin-left: 0px;
+								margin-left: $ibo-spacing-0;
 								margin-right: 8px;
 							}
 
@@ -395,7 +399,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 							.sfc_opc_mc_items_wrapper {
 								max-height: 415px; /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
 								overflow-y: auto;
-								margin: 0px -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
+								margin: $ibo-spacing-0 -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
 
 								.sfc_opc_mc_items {
 									.sfc_opc_mc_items_list {
@@ -422,10 +426,10 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 										}
 
 										.sfc_opc_mc_item {
-											padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
+											padding: $ibo-spacing-200 $ibo-spacing-300; /* Putting back the padding remove by .sfc_opc_mc_items */
 
 											&:hover {
-												background-color: $ibo-color-grey-200;
+												background-color: $ibo-search-form-panel--multiple-choice--hover--color;
 											}
 
 											label {
@@ -506,7 +510,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 						margin-bottom: 3px;
 
 						&:last-of-type {
-							margin-bottom: 0px;
+							margin-bottom: $ibo-spacing-0;
 						}
 					}
 
@@ -680,8 +684,8 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 				min-width: 200px; /* To avoid element going to thin on filter, not very slick */
 
 				.sfm_lists {
-					margin: 0px -8px;
+					margin: $ibo-spacing-0 -8px;
-					padding: 0px 8px;
+					padding: $ibo-spacing-0 8px;
 					max-height: 400px;
 					overflow-x: hidden;
 					overflow-y: auto;
@@ -689,7 +693,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 					.sfl_items {
 						> li {
 							&:hover {
-								background-color: $ibo-color-grey-200;
+								background-color: $ibo-search-form-panel--items--hover--color;
 							}
 						}
 					}
@@ -705,7 +709,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 						font-size: 11px;
 
 						&:last-of-type {
-							margin-right: 0px;
+							margin-right: $ibo-spacing-0;
 						}
 					}
 				}
@@ -738,17 +742,17 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 		}
 
 		.sfl_items {
-			margin: 5px -8px 0px -8px;
+			margin: 5px -8px $ibo-spacing-0 -8px;
-			padding: 0px;
+			padding: $ibo-spacing-0;
 			text-align: left;
 
 			> li {
-				padding: 4px 8px;
+				padding: $ibo-spacing-200 $ibo-spacing-300;
 				list-style: none;
 				white-space: nowrap;
 
 				&:hover {
-					background-color: $ibo-color-white-100;
+					background-color: $ibo-search-form-panel--items--hover--color;
 				}
 
 				&.sfl_i_placeholder {
@@ -765,8 +769,8 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 					}
 
 					> input[type="checkbox"] {
-						margin-left: 0px;
+						margin-left: $ibo-spacing-0;
-						margin-right: 8px;
+						margin-right: $ibo-spacing-300;
 					}
 				}
 			}

css/backoffice/components/_title.scss

@@ -4,8 +4,8 @@
  */
 
 $ibo-title--text-color: $ibo-color-grey-900 !default;
-$ibo-title--padding-y: 12px !default;
+$ibo-title--padding-y: $ibo-spacing-400 !default;
-$ibo-title--padding-x: 0 !default;
+$ibo-title--padding-x: $ibo-spacing-0 !default;
 
 $ibo-title--icon--size: 90px !default;
 
@@ -55,7 +55,7 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
 }
 
 .ibo-title--text {
-  @extend %ibo-font-ral-sembol-300;
+  @extend %ibo-font-ral-med-300;
 }
 
 .ibo-title--subtitle {
@@ -83,7 +83,7 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
 	padding-bottom:1em;
 }
 .ibo-title-separator{
-	border-radius: 5px 5px 0px 0px;
+	border-radius: 5px 5px $ibo-spacing-0 $ibo-spacing-0;
 	border-color:$ibo-color-blue-600;
 	color:$ibo-color-blue-600;
 	background-color:$ibo-color-blue-600;

css/backoffice/components/dashlet/_dashlet-badge.scss

@@ -4,8 +4,8 @@
  */
 
 /* SCSS variables */
-$ibo-dashlet-badge--padding-x: 16px !default;
+$ibo-dashlet-badge--padding-x: $ibo-spacing-500 !default;
-$ibo-dashlet-badge--padding-y: 16px !default;
+$ibo-dashlet-badge--padding-y: $ibo-spacing-500 !default;
 $ibo-dashlet-badge--min-width: 200px !default;
 $ibo-dashlet-badge--max-width: 350px !default;
 $ibo-dashlet-badge--background-color: $ibo-color-white-100 !default;
@@ -13,12 +13,12 @@ $ibo-dashlet-badge--border: 1px solid $ibo-color-grey-400 !default;
 $ibo-dashlet-badge--border-radius: $ibo-border-radius-500 !default;
 
 $ibo-dashlet-badge--action-list--text-color: inherit !default;
-$ibo-dashlet-badge--action-list-count--margin-right: 8px !default;
+$ibo-dashlet-badge--action-list-count--margin-right: $ibo-spacing-300 !default;
 
-$ibo-dashlet-badge--icon-container--margin-right: 16px !default;
+$ibo-dashlet-badge--icon-container--margin-right: $ibo-spacing-500 !default;
 $ibo-dashlet-badge--icon--size: 48px !default;
 
-$ibo-dashlet-badge--action-icon--margin-right: 6px !default;
+$ibo-dashlet-badge--action-icon--margin-right: $ibo-spacing-300 !default;
 
 /* CSS variables (can be changed directly from the browser) */
 :root {

css/backoffice/components/dashlet/_dashlet-header-static.scss

@@ -4,18 +4,18 @@
  */
 
 /* SCSS variables */
-$ibo-dashlet-header-static--padding-top: 16px !default;
+$ibo-dashlet-header-static--padding-top: $ibo-spacing-500 !default;
-$ibo-dashlet-header-static--padding-bottom: 0 !default;
+$ibo-dashlet-header-static--padding-bottom: $ibo-spacing-0 !default;
-$ibo-dashlet-header-static--padding-x: 16px !default;
+$ibo-dashlet-header-static--padding-x: $ibo-spacing-500 !default;
 
-$ibo-dashlet-header-static--body--margin-left: 48px !default;
+$ibo-dashlet-header-static--body--margin-left: $ibo-spacing-800 !default;
 $ibo-dashlet-header-static--body--text-color: $ibo-color-grey-900 !default;
 
-$ibo-dashlet-header-static--title--margin-right: 8px !default;
+$ibo-dashlet-header-static--title--margin-right: $ibo-spacing-300 !default;
 
 $ibo-dashlet-header-static--text--text-color: inherit !default;
 
-$ibo-dashlet-header-static--icon-container--margin-right: 16px !default;
+$ibo-dashlet-header-static--icon-container--margin-right: $ibo-spacing-500 !default;
 $ibo-dashlet-header-static--icon--size: 48px !default;
 
 $ibo-dashlet-header-static--body--separator--top: 50% !default;

css/backoffice/components/dashlet/_dashlet.scss

@@ -6,8 +6,8 @@
 /* SCSS variables */
 $ibo-dashlet--width: 100% !default;
 $ibo-dashlet--width--is-inline: auto !default;
-$ibo-dashlet--elements-spacing-x: 24px !default;
+$ibo-dashlet--elements-spacing-x: $ibo-spacing-600 !default;
-$ibo-dashlet--elements-spacing-y: 24px !default;
+$ibo-dashlet--elements-spacing-y: $ibo-spacing-600 !default;
 
 /* Rules */
 .ibo-dashlet {

css/backoffice/components/input/_all.scss

@@ -13,5 +13,6 @@
 @import "input-select";
 @import "input-select-icon";
 @import "input-string";
+@import "input-one-way-password";
 @import "input-set";
 @import "input-text";

css/backoffice/components/input/_input-date.scss

@@ -7,7 +7,7 @@ $ibo-input-date--width: 100% !default;
 
 $ibo-input-date--button--margin--left: -20px !default;
 $ibo-input-date--button--margin--top: 5px !default;
-$ibo-input-date--button--padding: 0 !default;
+$ibo-input-date--button--padding: $ibo-spacing-0 !default;
 
 $ibo-input-date--button--background-color: transparent !default;
 $ibo-input-date--button--color: $ibo-color-grey-800 !default;

css/backoffice/components/input/_input-one-way-password.scss

@@ -0,0 +1,12 @@
+/*!
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-input-one-way-password--elements-spacing-y: 6px !default;
+
+.ibo-input-one-way-password-wrapper {
+  > *:not(first-child) {
+    margin-top: $ibo-input-one-way-password--elements-spacing-y;
+  }
+}

css/backoffice/components/input/_input-select-icon.scss

@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-input-select-icon--icon--padding-right: 4px !default;
+$ibo-input-select-icon--icon--padding-right: $ibo-spacing-200 !default;
 
 $ibo-input-select-icon--menu--z-index: 21 !default;
 $ibo-input-select-icon--menu--max-height: 300px !default;

css/backoffice/components/input/_input-select.scss

@@ -5,7 +5,7 @@
 
 $ibo-input-select--padding-x: $ibo-input--padding-x !default;
 $ibo-input-select--option--padding-x: $ibo-input-select--padding-x !default;
-$ibo-input-select--option--padding-y: 4px !default;
+$ibo-input-select--option--padding-y: $ibo-spacing-200 !default;
 
 $ibo-input-select--value--min-midth: 50px;
 
@@ -15,6 +15,8 @@ $ibo-input-select-selectize--value--height: 100% !default;
 $ibo-input-select-selectize--value--line-height: $ibo-input--height !default;
 $ibo-input-select-selectize--dropdown--max-height: 50vh !default;
 $ibo-input-select-selectize--dropdown--max-width: 50em !default;
+$ibo-input-select-selectize--item--active--text-color: $ibo-color-grey-800 !default;
+$ibo-input-select-selectize--item--active--background-color: $ibo-color-blue-100 !default;
 
 $ibo-input-select-wrapper--width: 100% !default;
 
@@ -28,16 +30,16 @@ $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default;
 
 $ibo-input-select--action-button--height: 28px !default;
 $ibo-input-select--action-button--width: 23px !default;
-$ibo-input-select--action-button--margin-top: 0px !default;
+$ibo-input-select--action-button--margin-top: $ibo-spacing-0 !default;
 $ibo-input-select--action-button--margin-right: 3px !default;
 $ibo-input-select--action-button--background-color: inherit !default;
 $ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
-$ibo-input-select--action-button--padding-x: 2px !default;
+$ibo-input-select--action-button--padding-x: $ibo-spacing-100 !default;
-$ibo-input-select--action-button--padding-y: 0px !default;
+$ibo-input-select--action-button--padding-y: $ibo-spacing-0 !default;
 $ibo-input-select--select-wrapper--action-button--margin-right: 20px !default;
 
 $ibo-input-select--action-button--padding-left: 6px !default;
-$ibo-input-select--action-button--padding-right: 2px !default;
+$ibo-input-select--action-button--padding-right: $ibo-spacing-100 !default;
 
 $ibo-input-select--autocomplete-item-image--size: 25px !default;
 $ibo-input-select--autocomplete-item-image--margin-right: 0.5rem !default;
@@ -45,7 +47,7 @@ $ibo-input-select--autocomplete-item-image--background-color: $ibo-color-blue-10
 $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-600 !default;
 
 .ibo-input-select {
-  display: inline-block;
+  display: inline-flex;
   min-width: $ibo-input-select--value--min-midth;
 
   &:not(.ibo-input-select-autocomplete):not(.ibo-input-selectize) {
@@ -180,6 +182,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
 
 /*2 types of selectize to manage (select + autocomplete)*/
 .selectize-dropdown.ui-autocomplete,
+.selectize-dropdown.set-dropdown,
 .selectize-dropdown.plugin-custom_itop {
   z-index: 2000; /* Note: This is not great as it does not take into account other elements z-index, but as selectize puts its dropdown under the <body> tag, we cannot have a z-index relative to input container. */
   max-height: $ibo-input-select-selectize--dropdown--max-height;
@@ -189,8 +192,8 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
 
 .selectize-dropdown.ui-menu .ui-state-active {
   margin: unset;
-  background-color: #f5fafd;
+  background-color: $ibo-input-select-selectize--item--active--background-color;
-  color: #495c68;
+  color: $ibo-input-select-selectize--item--active--text-color;
 }
 
 .ibo-input-select--autocomplete-item {

css/backoffice/components/input/_input-set.scss

@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-input-set--padding-x: 8px !default;
+$ibo-input-set--padding-x: $ibo-spacing-300 !default;
 $ibo-input-set--padding-y: 5px !default;
 
 $ibo-input-set--input--height: 100% !default;
@@ -15,9 +15,9 @@ $ibo-input-set--has-items--after--right: 8px !default;
 $ibo-input-set--has-items--after--top: 5px !default;
 
 $ibo-input-set--item--siblings-spacing: 3px !default;
-$ibo-input-set--item--margin-y: 2px !default;
+$ibo-input-set--item--margin-y: $ibo-spacing-100 !default;
 $ibo-input-set--item--padding-x: 6px !default;
-$ibo-input-set--item--padding-y: 4px !default;
+$ibo-input-set--item--padding-y: $ibo-spacing-200 !default;
 $ibo-input-set--item--max-width: 120px !default;
 $ibo-input-set--item--background-color: $ibo-color-white-100 !default;
 $ibo-input-set--item--border: none !default;

css/backoffice/components/input/_input-text.scss

@@ -3,20 +3,26 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-input-text--width: 100% !default;
 $ibo-input-text--min-height: 12rem !default;
-$ibo-input-text--padding-x: 12px !default;
+$ibo-input-text--padding-x: $ibo-spacing-400 !default;
 $ibo-input-text--padding-y: 10px !default;
 
 .ibo-input-text {
+  width: $ibo-input-text--width;
   min-height: $ibo-input-text--min-height;
   padding: $ibo-input-text--padding-y $ibo-input-text--padding-x;
+
+  &.ibo-is-code {
+    @extend %ibo-font-code-150;
+    /* Note: There is a mic-mac in the inputs SCSS partials / PHP classes / TWIG templates. All base style should be defined in a common ancestor (AbstractInput) which should have its own BLOCK_CODE and SCSS partial; which is not the case right now.
+     * We should correct this later as now is too close to the RC to make such changes.
+     */
+    background-color: $ibo-input--background-color;
+  }
 }
 
 .ibo-input-text--export {
   width: 100%;
   min-height: 15em;
-}
-
-textarea.ibo-queryoql, .ibo-queryoql:not(:nth-child(n)), .ibo-queryoql > :not(.ibo-field--label) {
-  @extend %ibo-font-code-150;
 }

css/backoffice/components/input/_input.scss

@@ -11,7 +11,7 @@ $ibo-input--background-color: $ibo-color-white-100 !default;
 $ibo-input--border-color: $ibo-color-grey-500 !default;
 
 $ibo-input--padding-x: 10px !default;
-$ibo-input--padding-y: 0px !default;
+$ibo-input--padding-y: $ibo-spacing-0 !default;
 
 $ibo-input--border-radius: $ibo-border-radius-300 !default;
 
@@ -26,7 +26,7 @@ $ibo-input-wrapper--is-error--background-color: $ibo-color-red-200 !default;
 $ibo-input-wrapper--is-error--border-color: $ibo-color-red-600 !default;
 $ibo-field-validation: $ibo-color-red-700 !default;
 
-$ibo-input--margin-x: 5px !default;
+$ibo-input--margin-x: $ibo-spacing-200 !default;
 
 .ibo-input {
   @extend %ibo-vertically-centered-content;

css/backoffice/components/popover-menu/_popover-menu-item.scss

@@ -4,15 +4,15 @@
  */
 
 /* SCSS variables */
-$ibo-popover-menu--item--padding-y: 12px !default;
+$ibo-popover-menu--item--padding-y: $ibo-spacing-400 !default;
-$ibo-popover-menu--item--padding-right: 24px !default;
+$ibo-popover-menu--item--padding-right: $ibo-spacing-600 !default;
-$ibo-popover-menu--item--padding-left: 16px !default;
+$ibo-popover-menu--item--padding-left: $ibo-spacing-500 !default;
 $ibo-popover-menu--item--text-color: $ibo-color-grey-900 !default;
 $ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !default;
 $ibo-popover-menu--item--hover-background-color: $ibo-color-grey-200 !default;
 
-$ibo-popover-menu--item-separator--padding: 0 !default;
+$ibo-popover-menu--item-separator--padding: $ibo-spacing-0 !default;
-$ibo-popover-menu--item-separator--margin: 0 !default;
+$ibo-popover-menu--item-separator--margin: $ibo-spacing-0 !default;
 $ibo-popover-menu--item-separator--background-color: $ibo-color-grey-200 !default;
 
 $ibo-popover-menu--item--icon--color: $ibo-color-grey-700 !default;

css/backoffice/components/popover-menu/_popover-menu.scss

@@ -6,7 +6,7 @@
 /* SCSS variables */
 $ibo-popover-menu--background-color: $ibo-color-white-100 !default;
 $ibo-popover-menu--border-radius: $ibo-border-radius-300 !default;
-$ibo-popover-menu--padding: 0 !default;
+$ibo-popover-menu--padding: $ibo-spacing-0 !default;
 
 $ibo-popover-menu--toggler-visual-hint--margin-left: 0.5rem !default;
 
@@ -35,7 +35,7 @@ $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !defa
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  margin: 0px 0px;
+  margin: $ibo-spacing-0 $ibo-spacing-0;
   width: 100%;
   white-space: nowrap;
   overflow: hidden; /* To avoid first/last entries of the menu to have no border-radius on hover */

css/backoffice/components/toolbar/_separator.scss

@@ -7,7 +7,7 @@
 $ibo-toolbar-vertical-separator--width: 1px !default;
 $ibo-toolbar-vertical-separator--height: 16px !default;
 $ibo-toolbar-vertical-separator--margin-x: 0.75rem !default;
-$ibo-toolbar-vertical-separator--margin-y: 0 !default;
+$ibo-toolbar-vertical-separator--margin-y: $ibo-spacing-0 !default;
 $ibo-toolbar-vertical-separator--border-size: 1px !default;
 $ibo-toolbar-vertical-separator--border-color: $ibo-color-grey-500 !default;
 

css/backoffice/components/toolbar/_toolbar.scss

@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-toolbar--button-margin-top: 16px !default;
+$ibo-toolbar--button-margin-top: $ibo-spacing-500 !default;
 
 .ibo-toolbar {
   display: flex;

css/backoffice/layout/_navigation-menu.scss

@@ -6,8 +6,8 @@
 /* SCSS variables (can be overloaded) */
 $ibo-navigation-menu-height: 100vh !default;
 
-$ibo-navigation-menu--body--padding-x: 16px !default;
+$ibo-navigation-menu--body--padding-x: $ibo-spacing-500 !default;
-$ibo-navigation-menu--body--padding-y: 16px !default;
+$ibo-navigation-menu--body--padding-y: $ibo-spacing-500 !default;
 $ibo-navigation-menu--body--width-collapsed: 60px !default;
 $ibo-navigation-menu--body--width-expanded: 310px !default;
 $ibo-navigation-menu--body--background-color: $ibo-color-blue-grey-900 !default;
@@ -18,8 +18,8 @@ $ibo-navigation-menu--top-part--padding-y: $ibo-navigation-menu--body--padding-y
 $ibo-navigation-menu--top-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
 $ibo-navigation-menu--top-part--elements-spacing: 20px !default;
 
-$ibo-navigation-menu--middle-part--padding-top: 24px !default;
+$ibo-navigation-menu--middle-part--padding-top: $ibo-spacing-600 !default;
-$ibo-navigation-menu--middle-part--padding-bottom: 16px !default;
+$ibo-navigation-menu--middle-part--padding-bottom: $ibo-spacing-500 !default;
 $ibo-navigation-menu--middle-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
 $ibo-navigation-menu--middle-part--elements-spacing: 20px !default;
 $ibo-navigation-menu--middle-part--scrollbar-width: 5px !default;
@@ -27,12 +27,12 @@ $ibo-navigation-menu--middle-part--scrollbar-track-background-color: $ibo-color-
 $ibo-navigation-menu--middle-part--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
 
 $ibo-navigation-menu--bottom-part--padding-top: 20px !default;
-$ibo-navigation-menu--bottom-part--padding-bottom: 16px !default;
+$ibo-navigation-menu--bottom-part--padding-bottom: $ibo-spacing-500 !default;
-$ibo-navigation-menu--bottom-part--padding-x: 0px !default;
+$ibo-navigation-menu--bottom-part--padding-x: $ibo-spacing-0 !default;
 $ibo-navigation-menu--bottom-part--height: 126px !default;
 $ibo-navigation-menu--bottom-part--background-color: $ibo-color-grey-800 !default;
-$ibo-navigation-menu--bottom-part--is-expanded--padding-top: 24px !default;
+$ibo-navigation-menu--bottom-part--is-expanded--padding-top: $ibo-spacing-600 !default;
-$ibo-navigation-menu--bottom-part--is-expanded--padding-bottom: 12px !default;
+$ibo-navigation-menu--bottom-part--is-expanded--padding-bottom: $ibo-spacing-400 !default;
 
 $ibo-navigation-menu--visual-hint--size: 16px !default;
 $ibo-navigation-menu--visual-hint--background-color: $ibo-color-red-600 !default;
@@ -55,7 +55,7 @@ $ibo-navigation-menu--silo-visual-hint--background-color: $ibo-navigation-menu--
 $ibo-navigation-menu--silo-visual-hint--border: 2px solid $ibo-navigation-menu--body--background-color !default;
 $ibo-navigation-menu--silo-visual-hint--border-radius: $ibo-navigation-menu--visual-hint--border-radius !default;
 
-$ibo-navigation-menu--action--padding-x: 8px !default;
+$ibo-navigation-menu--action--padding-x: $ibo-spacing-300 !default;
 $ibo-navigation-menu--action--padding-y: 10px !default;
 $ibo-navigation-menu--action--border-radius: $ibo-border-radius-500 !default;
 $ibo-navigation-menu--action--border-radius--on-active: $ibo-border-radius-full !default;
@@ -68,18 +68,18 @@ $ibo-navigation-menu--action-icon--text-color--on-hover: $ibo-color-white-100 !d
 
 $ibo-navigation-menu--square-company-logo--width: 38px !default;
 $ibo-navigation-menu--square-company-logo--height: 38px !default;
-$ibo-navigation-menu--square-company-logo--margin-top: 0 !default;
+$ibo-navigation-menu--square-company-logo--margin-top: $ibo-spacing-0 !default;
 $ibo-navigation-menu--square-company-logo--margin-x: -5px !default;
 $ibo-navigation-menu--square-company-logo--margin-bottom: $ibo-navigation-menu--body--padding-y * 2 !default;
 
 $ibo-navigation-menu--full-company-logo--width: $ibo-navigation-menu--body--width-expanded !default;
 $ibo-navigation-menu--full-company-logo--height: 70px !default;
-$ibo-navigation-menu--full-company-logo--margin-top: 0 !default;
+$ibo-navigation-menu--full-company-logo--margin-top: $ibo-spacing-0 !default;
-$ibo-navigation-menu--full-company-logo--margin-right: 0 !default;
+$ibo-navigation-menu--full-company-logo--margin-right: $ibo-spacing-0 !default;
-$ibo-navigation-menu--full-company-logo--margin-bottom: 0 !default;
+$ibo-navigation-menu--full-company-logo--margin-bottom: $ibo-spacing-0 !default;
 $ibo-navigation-menu--full-company-logo--margin-left: -$ibo-navigation-menu--body--padding-y !default;
 $ibo-navigation-menu--full-company-logo--image--margin-x: auto !default;
-$ibo-navigation-menu--full-company-logo--image--margin-y: 0 !default;
+$ibo-navigation-menu--full-company-logo--image--margin-y: $ibo-spacing-0 !default;
 
 $ibo-navigation-menu--toggler-icon--height: 20px !default;
 $ibo-navigation-menu--toggler-icon--width: $ibo-navigation-menu--action-icon--width !default;
@@ -97,15 +97,15 @@ $ibo-navigation-menu--menu-group-title--text-color--is-active: $ibo-color-blue-g
 
 $ibo-navigation-menu--drawer--width: 312px !default;
 $ibo-navigation-menu--drawer--padding-x: 20px !default;
-$ibo-navigation-menu--drawer--padding-y: 32px !default;
+$ibo-navigation-menu--drawer--padding-y: $ibo-spacing-700 !default;
 $ibo-navigation-menu--drawer--background-color: $ibo-navigation-menu--menu-group--background-color--is-active !default;
 $ibo-navigation-menu--drawer--border-right: 1px solid $ibo-color-grey-300 !default;
 
 /* TODO: Refactor this into the standard field input */
 $ibo-navigation-menu--menu-filter-input--padding-x: 10px !default;
-$ibo-navigation-menu--menu-filter-input--padding-y: 8px !default;
+$ibo-navigation-menu--menu-filter-input--padding-y: $ibo-spacing-300 !default;
 $ibo-navigation-menu--menu-filter-input--width: 100% !default;
-$ibo-navigation-menu--menu-filter-input--placeholder-color: $ibo-color-grey-500 !default;
+$ibo-navigation-menu--menu-filter-input--placeholder-color: $ibo-color-grey-700 !default;
 $ibo-navigation-menu--menu-filter-input--text-color: $ibo-color-grey-900 !default;
 $ibo-navigation-menu--menu-filter-input--background-color: $ibo-color-white-100 !default;
 $ibo-navigation-menu--menu-filter-input--border: 1px solid $ibo-color-grey-300 !default;
@@ -119,8 +119,8 @@ $ibo-navigation-menu--menu-filter-clear--padding: 3px 3px !default;
 $ibo-navigation-menu--menu-filter-hotkey--top: 6.5px !default;
 $ibo-navigation-menu--menu-filter-hotkey--border: 1px solid $ibo-color-grey-400 !default;
 
-$ibo-navigation-menu--menu-filter-hint--margin-top: 16px !default;
+$ibo-navigation-menu--menu-filter-hint--margin-top: $ibo-spacing-500 !default;
-$ibo-navigation-menu--menu-filter-hint--padding-right: 12px !default;
+$ibo-navigation-menu--menu-filter-hint--padding-right: $ibo-spacing-400 !default;
 $ibo-navigation-menu--menu-filter-hint--text-color: $ibo-color-grey-700 !default;
 $ibo-navigation-menu--menu-filter-hint-close--top: 1px !default;
 $ibo-navigation-menu--menu-filter-hint-close--right: 2px !default;
@@ -133,30 +133,30 @@ $ibo-navigation-menu--menu--placeholder--margin-top: $ibo-navigation-menu--menu-
 $ibo-navigation-menu--menu--placeholder-image--svg--width: 90% !default;
 $ibo-navigation-menu--menu--placeholder-image--svg--height: auto !default;
 $ibo-navigation-menu--menu--placeholder-image--svg--margin: auto !default;
-$ibo-navigation-menu--menu--placeholder-hint--margin-top: 8px !default;
+$ibo-navigation-menu--menu--placeholder-hint--margin-top: $ibo-spacing-300 !default;
 
-$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: 48px !default;
+$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: $ibo-spacing-800 !default;
 
 $ibo-navigation-menu--menu-nodes-title--margin-top: 0 !default;
-$ibo-navigation-menu--menu-nodes-title--margin-bottom: 32px !default;
+$ibo-navigation-menu--menu-nodes-title--margin-bottom: $ibo-spacing-700 !default;
-$ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered: 8px !default;
+$ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered: $ibo-spacing-300 !default;
 
 $ibo-navigation-menu--menu-node--padding-x: 10px !default;
 $ibo-navigation-menu--menu-node--padding-y: 6px !default;
 $ibo-navigation-menu--menu-node--margin-x: -1 * $ibo-navigation-menu--menu-node--padding-x !default;
-$ibo-navigation-menu--menu-node--margin-y: 0 !default;
+$ibo-navigation-menu--menu-node--margin-y: $ibo-spacing-0 !default;
 $ibo-navigation-menu--menu-node--text-color: $ibo-color-grey-700 !default;
 $ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
 $ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
 $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
 
-$ibo-navigation-menu--menu-node-counter--margin-left: 8px !default;
+$ibo-navigation-menu--menu-node-counter--margin-left: $ibo-spacing-300 !default;
-$ibo-navigation-menu--menu-node-counter--padding-y: 2px !default;
+$ibo-navigation-menu--menu-node-counter--padding-y: $ibo-spacing-100 !default;
 $ibo-navigation-menu--menu-node-counter--padding-x: 6px !default;
 $ibo-navigation-menu--menu-node-counter--width: 34px !default;
 $ibo-navigation-menu--menu-node-counter--background-color: $ibo-navigation-menu--menu-node--background-color !default;
 
-$ibo-navigation-menu--notifications-toggler--font-size: 24px !default;
+$ibo-navigation-menu--notifications-toggler--font-size: $ibo-font-size-400 !default;
 $ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default;
 $ibo-navigation-menu--notifications-toggler--color--is-loaded: $ibo-color-grey-300 !default;
 $ibo-navigation-menu--notifications-toggler--color--on-hover: $ibo-color-white-200 !default;
@@ -583,7 +583,7 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
   border: $ibo-navigation-menu--menu-filter-hotkey--border;
   border-radius: $ibo-navigation-menu--menu-filter-input--border-radius;
   color: $ibo-navigation-menu--menu-filter-input--placeholder-color;
-  padding: 2px 4px;
+  padding: $ibo-spacing-100 $ibo-spacing-200;
   @extend %ibo-font-ral-nor-50;
 }
 .ibo-navigation-menu--menu-filter-hint{

css/backoffice/layout/_top-bar.scss

@@ -5,11 +5,11 @@
 
 /* SCSS variables (can be overloaded) */
 $ibo-top-bar--height: 54px !default;
-$ibo-top-bar--padding-left: 16px !default; /* Should be align with the page content padding-left */
+$ibo-top-bar--padding-left: $ibo-spacing-500 !default; /* Should be align with the page content padding-left */
-$ibo-top-bar--padding-right: 16px !default;
+$ibo-top-bar--padding-right: $ibo-spacing-500 !default;
-$ibo-top-bar--padding-y: 0px !default;
+$ibo-top-bar--padding-y: $ibo-spacing-0 !default;
 $ibo-top-bar--background-color: $ibo-color-white-100 !default;
-$ibo-top-bar--elements-spacing: 32px !default;
+$ibo-top-bar--elements-spacing: $ibo-spacing-700 !default;
 
 $ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !default;
 

css/backoffice/layout/activity-panel/_activity-entry.scss

@@ -5,10 +5,10 @@
 
 /* SCSS variables */
 /* - Entry group */
-$ibo-activity-panel--entry-group--margin-bottom: 24px !default;
+$ibo-activity-panel--entry-group--margin-bottom: $ibo-spacing-600 !default;
 
 /* - Entry */
-$ibo-activity-entry--medallion--margin-with-information: 8px !default;
+$ibo-activity-entry--medallion--margin-with-information: $ibo-spacing-300 !default;
 $ibo-activity-entry--medallion--margin-bottom: 18px !default;
 $ibo-activity-entry--medallion--diameter: 32px !default;
 $ibo-activity-entry--medallion--border-radius: $ibo-border-radius-full !default;
@@ -20,8 +20,8 @@ $ibo-activity-entry--medallion--has-no-image--border: 1px solid $ibo-color-grey-
 
 $ibo-activity-entry--information--margin-to-other-side: $ibo-activity-entry--medallion--diameter + $ibo-activity-entry--medallion--margin-with-information !default;
 
-$ibo-activity-entry--main-information--padding-x: 16px !default;
+$ibo-activity-entry--main-information--padding-x: $ibo-spacing-500 !default;
-$ibo-activity-entry--main-information--padding-y: 12px !default;
+$ibo-activity-entry--main-information--padding-y: $ibo-spacing-400 !default;
 $ibo-activity-entry--main-information--text-color: $ibo-color-grey-800 !default;
 $ibo-activity-entry--main-information--background-color: $ibo-color-grey-200 !default;
 $ibo-activity-entry--main-information--border-radius: $ibo-border-radius-500 !default;
@@ -37,9 +37,9 @@ $ibo-activity-entry--main-information--is-closed--placeholder-top: 30px !default
 $ibo-activity-entry--main-information--is-closed--placeholder-padding-left: $ibo-activity-entry--main-information--padding-x !default;
 
 $ibo-activity-entry--main-information-icon--text-color: $ibo-color-grey-700 !default;
-$ibo-activity-entry--main-information-icon--font-size: 16px !default;
+$ibo-activity-entry--main-information-icon--font-size: $ibo-font-size-200 !default;
 
-$ibo-activity-entry--sub-information--margin-top: 4px !default;
+$ibo-activity-entry--sub-information--margin-top: $ibo-spacing-200 !default;
 $ibo-activity-entry--sub-information--margin-bottom: $ibo-activity-entry--sub-information--margin-top !default;
 $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
 

css/backoffice/layout/activity-panel/_activity-panel.scss

@@ -9,8 +9,8 @@ $ibo-activity-panel--width: 480px !default;
 $ibo-activity-panel--is-expanded--width: 60vw !default;
 $ibo-activity-panel--is-closed--width: 32px !default;
 $ibo-activity-panel--height: 100% !default;
-$ibo-activity-panel--padding-x: 16px !default;
+$ibo-activity-panel--padding-x: $ibo-spacing-500 !default;
-$ibo-activity-panel--padding-y: 0 !default;
+$ibo-activity-panel--padding-y: $ibo-spacing-0 !default;
 
 /* - Header */
 $ibo-activity-panel--header--background-color: $ibo-color-grey-100 !default;
@@ -29,14 +29,14 @@ $ibo-activity-panel--tab-toggler--caselog-highlight-colors: $ibo-caselog-highlig
 $ibo-activity-panel--tab-toggler--is-active--background-color: $ibo-color-grey-200 !default;
 
 /* - Tab title */
-$ibo-activity-panel--tab-title--padding-x: 16px !default;
+$ibo-activity-panel--tab-title--padding-x: $ibo-spacing-500 !default;
-$ibo-activity-panel--tab-title--padding-y: 8px !default;
+$ibo-activity-panel--tab-title--padding-y: $ibo-spacing-300 !default;
 $ibo-activity-panel--tab-title--on-hover--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
 $ibo-activity-panel--tab-title--is-active--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
 
 $ibo-activity-panel--tab-title-decoration--width: 12px !default;
 $ibo-activity-panel--tab-title-decoration--height: $ibo-activity-panel--tab-title-decoration--width !default;
-$ibo-activity-panel--tab-title-decoration--margin-right: 8px !default;
+$ibo-activity-panel--tab-title-decoration--margin-right: $ibo-spacing-300 !default;
 $ibo-activity-panel--tab-title-decoration--border-radius: $ibo-border-radius-300 !default;
 
 $ibo-activity-panel--tab-title-draft-indicator--margin-x: $ibo-activity-panel--tab-title-decoration--margin-right !default;
@@ -48,35 +48,35 @@ $ibo-activity-panel--tab-toolbar--padding-x: 10px !default;
 $ibo-activity-panel--tab-toolbar--text-color: $ibo-color-grey-800 !default;
 $ibo-activity-panel--tab-toolbar--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
 
-$ibo-activity-panel--tab-toolbar-actions--margin-y: 4px !default;
+$ibo-activity-panel--tab-toolbar-actions--margin-y: $ibo-spacing-200 !default;
-$ibo-activity-panel--tab-toolbar-actions--margin-x: 0 !default;
+$ibo-activity-panel--tab-toolbar-actions--margin-x: $ibo-spacing-0 !default;
 $ibo-activity-panel--tab-toolbar-actions--height: 32px !default;
-$ibo-activity-panel--tab-toolbar-right-actions--elements-spacing: 16px !default;
+$ibo-activity-panel--tab-toolbar-right-actions--elements-spacing: $ibo-spacing-500 !default;
 
 $ibo-activity-panel--tab-toolbar-action--elements-separator-content: "-" !default;
-$ibo-activity-panel--tab-toolbar-action--elements-separator-margin-x: 8px !default;
+$ibo-activity-panel--tab-toolbar-action--elements-separator-margin-x: $ibo-spacing-300 !default;
-$ibo-activity-panel--tab-toolbar-info-icon--margin-left: 8px !default;
+$ibo-activity-panel--tab-toolbar-info-icon--margin-left: $ibo-spacing-300 !default;
 $ibo-activity-panel--tab-toolbar-filter--sibling-spacing: 18px !default;
-$ibo-activity-panel--tab-toolbar-filter--checkbox-margin-right: 8px !default;
+$ibo-activity-panel--tab-toolbar-filter--checkbox-margin-right: $ibo-spacing-300 !default;
 
 $ibo-activity-panel--filter-options-toggler--padding-left: 0.5rem !default;
-$ibo-activity-panel--filter-options--padding-x: 12px !default;
+$ibo-activity-panel--filter-options--padding-x: $ibo-spacing-400 !default;
-$ibo-activity-panel--filter-options--padding-y: 8px !default;
+$ibo-activity-panel--filter-options--padding-y: $ibo-spacing-300 !default;
 $ibo-activity-panel--filter-options--top: 24px !default;
 $ibo-activity-panel--filter-options--left: -1 * $ibo-activity-panel--filter-options--padding-x !default;
 $ibo-activity-panel--filter-options--max-width: 200px !default;
 $ibo-activity-panel--filter-options--background-color: $ibo-activity-panel--tab-toolbar--background-color !default;
 $ibo-activity-panel--filter-options--border-radius: $ibo-border-radius-300 !default;
-$ibo-activity-panel--filter-option--sibling-spacing: 8px !default;
+$ibo-activity-panel--filter-option--sibling-spacing: $ibo-spacing-300 !default;
 $ibo-activity-panel--filter-option-input--margin-right: 0.5rem !default;
 
 /* - Body */
 $ibo-activity-panel--body--padding-y: $ibo-activity-panel--padding-x !default;
 $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
 
-$ibo-activity-panel--body--placeholder--margin-top: 16px !default;
+$ibo-activity-panel--body--placeholder--margin-top: $ibo-spacing-500 !default;
 $ibo-activity-panel--body--placeholder-image--width: 250px !default;
-$ibo-activity-panel--body--placeholder-hint--margin-top: 16px !default;
+$ibo-activity-panel--body--placeholder-hint--margin-top: $ibo-spacing-500 !default;
 $ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default;
 
 $ibo-activity-panel--add-caselog-entry-button--right: 12px !default;
@@ -92,10 +92,10 @@ $ibo-activity-panel--add-caselog-entry-button--hover--box-shadow: $ibo-elevation
 
 $ibo-activity-panel--add-caselog-entry-button--icon--height: 100% !default;
 $ibo-activity-panel--add-caselog-entry-button--icon--width: $ibo-activity-panel--add-caselog-entry-button--icon--height !default;
-$ibo-activity-panel--add-caselog-entry-button--icon--font-size: 16px !default;
+$ibo-activity-panel--add-caselog-entry-button--icon--font-size: $ibo-font-size-200 !default;
 $ibo-activity-panel--add-caselog-entry-button--icon--line-height: 33px !default;
 
-$ibo-activity-panel--entry-forms-confirmation-explanation--spacing: 16px !default;
+$ibo-activity-panel--entry-forms-confirmation-explanation--spacing: $ibo-spacing-500 !default;
 $ibo-activity-panel--entry-forms-confirmation-preference-input--spacing: 0.5rem !default;
 
 $ibo-activity-panel--closed-cover--background-color: $ibo-activity-panel--header--background-color !default;
@@ -145,7 +145,7 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 	background-color: $ibo-activity-panel--header--background-color;
 
 	/* Remove hyperlinks default color */
-	a{
+	> .ibo-activity-panel--tabs-togglers a{
 		color: $ibo-activity-panel--tab-toolbar--text-color;
 	}
 }
@@ -290,6 +290,7 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 }
 .ibo-activity-panel--filter-options-toggler{
   padding-left: $ibo-activity-panel--filter-options-toggler--padding-left;
+  color: $ibo-activity-panel--tab-toolbar-action--color;
 
   &.ibo-is-closed{
     transform: rotateX(180deg);

css/backoffice/layout/activity-panel/_caselog-entry-form.scss

@@ -4,10 +4,10 @@
  */
 
 $ibo-caselog-entry-form--width: 100% !default;
-$ibo-caselog-entry-form--padding-bottom: 12px !default;
+$ibo-caselog-entry-form--padding-bottom: $ibo-spacing-400 !default;
 $ibo-caselog-entry-form--background-color: $ibo-activity-panel--tab-toolbar--background-color !default;
 
-$ibo-caselog-entry-form--actions--margin-top: 8px !default;
+$ibo-caselog-entry-form--actions--margin-top: $ibo-spacing-300 !default;
 $ibo-caselog-entry-form--actions--margin-bottom: $ibo-caselog-entry-form--actions--margin-top !default;
 
 $ibo-caselog-entry-form--lock-indicator--margin-top: $ibo-caselog-entry-form--padding-bottom !default;

css/backoffice/layout/activity-panel/_caselog-entry.scss

@@ -5,7 +5,7 @@
 
 /* SCSS variables */
 $ibo-caselog-entry--highlight-colors: $ibo-caselog-highlight-colors !default;
-$ibo-caselog-entry--main-information--padding-y: 12px !default;
+$ibo-caselog-entry--main-information--padding-y: $ibo-spacing-400 !default;
 $ibo-caselog-entry--main-information--decoration--width: 3px !default;
 
 /* Main information */

css/backoffice/layout/activity-panel/_edits-entry.scss

@@ -7,7 +7,7 @@
 $ibo-edits-entry--short-description--text-color: inherit !default;
 $ibo-edits-entry--long-description-toggler-icon--top: 3px !default;
 $ibo-edits-entry--long-description-toggler-icon--right: 0 !default;
-$ibo-edits-entry--long-description--margin-top: 8px !default;
+$ibo-edits-entry--long-description--margin-top: $ibo-spacing-300 !default;
 
 /* CSS rules */
 /* - Long description */

css/backoffice/layout/activity-panel/_notification-entry.scss

@@ -5,8 +5,8 @@
 
 /* SCSS variables */
 $ibo-notification-entry--short-description--text-color: inherit !default;
-$ibo-notification-entry--long-description-toggler-icon--margin-left: 12px !default;
+$ibo-notification-entry--long-description-toggler-icon--margin-left: $ibo-spacing-400 !default;
-$ibo-notification-entry--long-description--margin-top: 8px !default;
+$ibo-notification-entry--long-description--margin-top: $ibo-spacing-300 !default;
 
 /* CSS rules */
 /* - Long description */

css/backoffice/layout/dashboard/_dashboard-editor.scss

@@ -3,26 +3,26 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-dashboard-editor--pane--padding: 16px 30px 16px 15px !default;
+$ibo-dashboard-editor--pane--padding: $ibo-spacing-500 30px $ibo-spacing-500 15px !default;
 
 $ibo-dashboard-editor--available-dashlet-icon--height: 34px !default;
 $ibo-dashboard-editor--available-dashlet-icon--width: $ibo-dashboard-editor--available-dashlet-icon--height !default;
-$ibo-dashboard-editor--available-dashlet-icon--margin: 2px 5px !default;
+$ibo-dashboard-editor--available-dashlet-icon--margin: $ibo-spacing-100 5px !default;
 
 $ibo-dashboard-editor--properties-title--padding-bottom: 2rem !default;
 
-$ibo-dashboard-editor--layout-list--padding-bottom: 12px !default;
+$ibo-dashboard-editor--layout-list--padding-bottom: $ibo-spacing-400 !default;
 
 $ibo-dashboard-editor--layout-list--button--margin: 0 15px 0 5px !default;
 
-$ibo-dashboard-editor--padding: 0 !default;
+$ibo-dashboard-editor--padding: $ibo-spacing-0 !default;
 
 $ibo-dashboard-editor--dashboard--border-right: solid 1px $ibo-color-grey-200 !default;
-$ibo-dashboard-editor--dashboard--padding: 16px 15px 16px 30px !default;
+$ibo-dashboard-editor--dashboard--padding: $ibo-spacing-500 15px $ibo-spacing-500 30px !default;
 
 $ibo-dashboard-editor--delete-dashlet-icon--top: 7px !default;
 $ibo-dashboard-editor--delete-dashlet-icon--right: 9px !default;
-$ibo-dashboard-editor--delete-dashlet-icon--padding: 2px 6px !default;
+$ibo-dashboard-editor--delete-dashlet-icon--padding: $ibo-spacing-100 6px !default;
 $ibo-dashboard-editor--delete-dashlet-icon--z-index: 21 !default;
 
 

css/backoffice/layout/multi-column/_column.scss

@@ -6,9 +6,9 @@
 $ibo-column--min-width: 300px !default;
 $ibo-mini-column--min-width: 30px !default;
 $ibo-column--padding-x: abs($ibo-multi-column--margin-x) !default;
-$ibo-column--padding-y: 0 !default;
+$ibo-column--padding-y: $ibo-spacing-0 !default;
 
-$ibo-column--margin-bottom--is-last-element: 48px !default;
+$ibo-column--margin-bottom--is-last-element: $ibo-spacing-800 !default;
 
 .ibo-column {
   min-width: $ibo-column--min-width;

css/backoffice/layout/multi-column/_multi-column.scss

@@ -4,7 +4,7 @@
  */
 
 $ibo-multi-column--margin-x: -16px !default; /* This is to compensate columns padding and make the whole multicolumn align with the parent borders (cf. Bootstrap rows / cols) */
-$ibo-multi-column--margin-y: 0 !default;
+$ibo-multi-column--margin-y: $ibo-spacing-0 !default;
 
 .ibo-multi-column {
   display: flex;

css/backoffice/layout/object/_object-details.scss

@@ -14,10 +14,10 @@ $ibo-object-details--icon--size--is-sticking: $ibo-panel--icon--size-as-medallio
 $ibo-object-details--icon--spacing--as-medallion--is-sticking: $ibo-object-details--icon--spacing--as-medallion !default;
 
 $ibo-object-details--status-dot--size: 10px !default;
-$ibo-object-details--status-dot--spacing: 8px !default;
+$ibo-object-details--status-dot--spacing: $ibo-spacing-300 !default;
 $ibo-object-details--status-dot--border-radius: $ibo-border-radius-full !default;
 
-$ibo-object-details--tag--sibling-spacing: 12px !default;
+$ibo-object-details--tag--sibling-spacing: $ibo-spacing-400 !default;
 $ibo-object-details--tag--color: $ibo-panel--subtitle--color !default;
 
 $ibo-object-details--tag-icon--margin-right: 6px !default;
@@ -25,10 +25,10 @@ $ibo-object-details--tag-icon--color: $ibo-color-grey-700 !default;
 
 $ibo-object-details--tag--separator--background-color: $ibo-color-grey-800 !default;
 $ibo-object-details--tag--separator--diameter: 5px !default;
-$ibo-object-details--tag--separator--margin-right: 12px !default;
+$ibo-object-details--tag--separator--margin-right: $ibo-spacing-400 !default;
 $ibo-object-details--tag--separator--border-radius: $ibo-border-radius-full !default;
 
-$ibo-object-details--header-right--padding-right--is-sticking: 8px !default;
+$ibo-object-details--header-right--padding-right--is-sticking: $ibo-spacing-300 !default;
 
 /* Parent block overloads (!= than blocks integrations) */
 .ibo-object-details {

css/backoffice/layout/tab-container/_tab-container.scss

@@ -5,29 +5,29 @@
 
 /* SCSS variables */
 $ibo-tab-container--tabs-list--height: 36px !default;
-$ibo-tab-container--tabs-list--padding-x: 24px !default;
+$ibo-tab-container--tabs-list--padding-x: $ibo-spacing-600 !default;
 $ibo-tab-container--tabs-list--background-color: $ibo-color-grey-100 !default;
 
 $ibo-tab-container--tab-header--max-width: 110px !default;
-$ibo-tab-container--tab-header--text-color: $ibo-color-grey-700 !default;
+$ibo-tab-container--tab-header--text-color: $ibo-color-grey-800 !default;
 $ibo-tab-container--tab-header--text-color--is-active: $ibo-color-blue-800 !default;
 $ibo-tab-container--tab-header--text-color--on-hover: $ibo-color-blue-800 !default;
 $ibo-tab-container--tab-header--background-color--on-hover: $ibo-color-grey-200 !default;
 
-$ibo-tab-container--tab-toggler--padding-x: 24px !default;
+$ibo-tab-container--tab-toggler--padding-x: $ibo-spacing-600 !default;
 
-$ibo-tab-container--tab-container--padding-x: 32px !default;
+$ibo-tab-container--tab-container--padding-x: $ibo-spacing-700 !default;
-$ibo-tab-container--tab-container--padding-y: 32px !default;
+$ibo-tab-container--tab-container--padding-y: $ibo-spacing-700 !default;
 
 $ibo-tab-container--extra-tabs-container--background-color: $ibo-tab-container--tabs-list--background-color !default;
 
-$ibo-tab-container--extra-tabs-list-toggler--padding-x: 12px !default;
+$ibo-tab-container--extra-tabs-list-toggler--padding-x: $ibo-spacing-400 !default;
 
 $ibo-tab-container--extra-tabs-list--max-height: 300px !default;
 $ibo-tab-container--extra-tabs-list--border-radius: $ibo-border-radius-300;
 $ibo-tab-container--extra-tabs-list--background-color: $ibo-tab-container--tabs-list--background-color !default;
 
-$ibo-tab-container--extra-tab-toggler--padding: 8px 16px !default;
+$ibo-tab-container--extra-tab-toggler--padding: $ibo-spacing-300 $ibo-spacing-500 !default;
 $ibo-tab-container--extra-tab-toggler--max-width: 220px !default;
 $ibo-tab-container--extra-tab-toggler--text-color: $ibo-color-grey-700 !default;
 $ibo-tab-container--extra-tab-toggler--text-color--on-hover: $ibo-color-blue-800 !default;