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;
 
@@ -5296,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));
@@ -5497,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/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);
 			}

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/ui.extkeywidget.class.inc.php

@@ -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)) {

core/attributedef.class.inc.php

@@ -8130,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}
@@ -10833,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)
 					{
@@ -11026,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>';
 					}
 				}
@@ -11575,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
- * Complete but quite slow
- * http://htmlpurifier.org
+ * Common implementation for sanitizer using DOM parsing
  */
-/*
-class HTMLPurifierSanitizer extends HTMLSanitizer
+abstract class DOMSanitizer extends HTMLSanitizer
 {
-	protected static $oPurifier = null;
+	/** @var DOMDocument */
+	protected $oDoc;
 
-	public function __construct()
-	{
-		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);
+	abstract public function GetTagsWhiteList();
 
-			$oPurifierConfig = HTMLPurifier_Config::createDefault();
-			$oPurifierConfig->set('Core.Encoding', 'UTF-8'); // defaults to 'UTF-8'
-			$oPurifierConfig->set('HTML.Doctype', 'XHTML 1.0 Strict'); // defaults to 'XHTML 1.0 Transitional'
-			$oPurifierConfig->set('URI.AllowedSchemes', array (
-				'http' => true,
-				'https' => true,
-				'data' => true, // This one is not present by default
-			));
-			$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);
-		}
-	}
+	abstract public function GetTagsBlackList();
+
+	abstract public function GetAttrsWhiteList();
+
+	abstract public function GetAttrsBlackList();
+
+	abstract public function GetStylesWhiteList();
 
 	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();
-		// 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);
-			}
-		}
+		return [];
 	}
 
-	protected function CleanStyle($sStyle)
+	/**
+	 * @return string[]
+	 * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
+	 */
+	public function GetTagsBlackList()
 	{
-		$aAllowedStyles = array();
-		$aItems = explode(';', $sStyle);
-		{
-			foreach($aItems as $sItem)
-			{
-				$aElements = explode(':', trim($sItem));
-				if (in_array(trim(strtolower($aElements[0])), static::$aStylesWhiteList))
-				{
-					$aAllowedStyles[] = trim($sItem);
-				}
-			}
-		}
-		return implode(';', $aAllowedStyles);
+		return [
+			'script',
+		];
 	}
 
-	protected function IsValidAttributeContent($sAttributeName, $sValue)
+	public function GetAttrsWhiteList()
 	{
-		if (array_key_exists($sAttributeName, self::$aAttrsWhiteList))
-		{
-			return preg_match(self::$aAttrsWhiteList[$sAttributeName], $sValue);
-		}
-		return true;
+		return [];
+	}
+
+	/**
+	 * @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/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

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

@@ -86,11 +86,4 @@ a{
 	&:active{
 		color: var(--ibo-hyperlink-color--on-active);
 	}
-}
-
-/* Input reset */
-/* - Standard spacing between label and input */
-select + label, label + select, label > select,
-input + label, label + input, label > input {
-  margin-left: 0.5rem;
 }

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 "datatable-within-panel";
 @import "tab-container-within-panel";
-@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 "collapsible-section-within-caselog-list";
+@import "jquery-blockui-within-datatable";

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--padding: 0 !default;
+$ibo-field-badge-within-datatable--ibo-field-badge--margin: $ibo-spacing-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-not-first-dashlet: 12px !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: $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;
@@ -116,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-y: 12px !default;
+$ibo-breadcrumbs--previous-item--padding-x: $ibo-spacing-400 !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-top: 4px !default;
+$ibo-button--vertical-align--margin-bottom: $ibo-spacing-200 !default;
+$ibo-button--vertical-align--margin-top: $ibo-spacing-200 !default;
 
 /**
 * - Text color
@@ -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-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--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default;
+$ibo-datatable-panel--table-spacing: $ibo-spacing-800 !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--padding: 4px 10px !default;
+$ibo-field-badge--margin: $ibo-spacing-0 !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--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-y--is-fullscreen: 4px !default;
+$ibo-field--label--padding-x--is-fullscreen: $ibo-spacing-300 !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 {
@@ -69,10 +68,6 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
       }
     }
   }
-
-  & ~ .ibo-field {
-    margin-top: $ibo-field--sibling-spacing;
-  }
 }
 
 /* Large field = Label on top, value below */
@@ -255,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--padding-bottom: 4px !default;
+$ibo-fieldset--legend--margin-bottom: $ibo-spacing-500 !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,16 +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-y: 0 !default;
+$ibo-global-search--icon-padding-x: $ibo-spacing-500 !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-y--is-opened: 8px !default;
+$ibo-global-search--input--padding: $ibo-spacing-0 !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;
@@ -23,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--padding-left: 32px !default;
+$ibo-global-search--compartment-title--margin-bottom: $ibo-spacing-300 !default;
+$ibo-global-search--compartment-title--padding-left: $ibo-spacing-700 !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-bottom: 16px !default;
+$ibo-global-search--compartment--placeholder-image--margin-top: $ibo-spacing-600 !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-y: 0 !default;
+$ibo-global-search--compartment--placeholder-hint--padding-x: $ibo-spacing-300 !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*/

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--cancel--padding-left: 7px !default;
+$ibo-prop--apply--padding-left: $ibo-spacing-400 !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,15 +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-y: 0 !default;
+$ibo-quick-create--icon-padding-x: $ibo-spacing-500 !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-y--is-opened: 8px !default;
+$ibo-quick-create--input--padding-x--is-opened: $ibo-spacing-300 !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;
@@ -26,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-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-y: 4px !default;
+$ibo-quick-create--compartment-element--padding-x: $ibo-spacing-300 !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-bottom: 16px !default;
+$ibo-quick-create--compartment--placeholder-image--margin-top: $ibo-spacing-600 !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-y: 0 !default;
+$ibo-quick-create--compartment--placeholder-hint--padding-x: $ibo-spacing-300 !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*/

css/backoffice/components/_search-form.scss

@@ -152,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 {
 
@@ -208,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 {
@@ -218,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;
@@ -369,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;
 						}
 
@@ -388,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;
 							}
 
@@ -399,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 {
@@ -426,7 +426,7 @@ $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-search-form-panel--multiple-choice--hover--color;
@@ -510,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;
 						}
 					}
 
@@ -684,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;
-					padding: 0px 8px;
+					margin: $ibo-spacing-0 -8px;
+					padding: $ibo-spacing-0 8px;
 					max-height: 400px;
 					overflow-x: hidden;
 					overflow-y: auto;
@@ -709,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;
 						}
 					}
 				}
@@ -742,12 +742,12 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 		}
 
 		.sfl_items {
-			margin: 5px -8px 0px -8px;
-			padding: 0px;
+			margin: 5px -8px $ibo-spacing-0 -8px;
+			padding: $ibo-spacing-0;
 			text-align: left;
 
 			> li {
-				padding: 4px 8px;
+				padding: $ibo-spacing-200 $ibo-spacing-300;
 				list-style: none;
 				white-space: nowrap;
 
@@ -769,8 +769,8 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
 					}
 
 					> input[type="checkbox"] {
-						margin-left: 0px;
-						margin-right: 8px;
+						margin-left: $ibo-spacing-0;
+						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-x: 0 !default;
+$ibo-title--padding-y: $ibo-spacing-400 !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-y: 16px !default;
+$ibo-dashlet-badge--padding-x: $ibo-spacing-500 !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-bottom: 0 !default;
-$ibo-dashlet-header-static--padding-x: 16px !default;
+$ibo-dashlet-header-static--padding-top: $ibo-spacing-500 !default;
+$ibo-dashlet-header-static--padding-bottom: $ibo-spacing-0 !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-y: 24px !default;
+$ibo-dashlet--elements-spacing-x: $ibo-spacing-600 !default;
+$ibo-dashlet--elements-spacing-y: $ibo-spacing-600 !default;
 
 /* Rules */
 .ibo-dashlet {

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-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;
 
@@ -30,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-y: 0px !default;
+$ibo-input-select--action-button--padding-x: $ibo-spacing-100 !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;
@@ -47,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) {

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

@@ -5,7 +5,7 @@
 
 $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 {

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-right: 24px !default;
-$ibo-popover-menu--item--padding-left: 16px !default;
+$ibo-popover-menu--item--padding-y: $ibo-spacing-400 !default;
+$ibo-popover-menu--item--padding-right: $ibo-spacing-600 !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--margin: 0 !default;
+$ibo-popover-menu--item-separator--padding: $ibo-spacing-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-y: 16px !default;
+$ibo-navigation-menu--body--padding-x: $ibo-spacing-500 !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-bottom: 16px !default;
+$ibo-navigation-menu--middle-part--padding-top: $ibo-spacing-600 !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-x: 0px !default;
+$ibo-navigation-menu--bottom-part--padding-bottom: $ibo-spacing-500 !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-bottom: 12px !default;
+$ibo-navigation-menu--bottom-part--is-expanded--padding-top: $ibo-spacing-600 !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-right: 0 !default;
-$ibo-navigation-menu--full-company-logo--margin-bottom: 0 !default;
+$ibo-navigation-menu--full-company-logo--margin-top: $ibo-spacing-0 !default;
+$ibo-navigation-menu--full-company-logo--margin-right: $ibo-spacing-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,13 +97,13 @@ $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-700 !default;
 $ibo-navigation-menu--menu-filter-input--text-color: $ibo-color-grey-900 !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--padding-right: 12px !default;
+$ibo-navigation-menu--menu-filter-hint--margin-top: $ibo-spacing-500 !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--on-filtered: 8px !default;
+$ibo-navigation-menu--menu-nodes-title--margin-bottom: $ibo-spacing-700 !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--padding-y: 2px !default;
+$ibo-navigation-menu--menu-node-counter--margin-left: $ibo-spacing-300 !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-right: 16px !default;
-$ibo-top-bar--padding-y: 0px !default;
+$ibo-top-bar--padding-left: $ibo-spacing-500 !default; /* Should be align with the page content padding-left */
+$ibo-top-bar--padding-right: $ibo-spacing-500 !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-y: 12px !default;
+$ibo-activity-entry--main-information--padding-x: $ibo-spacing-500 !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-y: 0 !default;
+$ibo-activity-panel--padding-x: $ibo-spacing-500 !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-y: 8px !default;
+$ibo-activity-panel--tab-title--padding-x: $ibo-spacing-500 !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-x: 0 !default;
+$ibo-activity-panel--tab-toolbar-actions--margin-y: $ibo-spacing-200 !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-info-icon--margin-left: 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: $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-y: 8px !default;
+$ibo-activity-panel--filter-options--padding-x: $ibo-spacing-400 !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--margin-top: 8px !default;
+$ibo-notification-entry--long-description-toggler-icon--margin-left: $ibo-spacing-400 !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,7 +5,7 @@
 
 /* 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;
@@ -14,20 +14,20 @@ $ibo-tab-container--tab-header--text-color--is-active: $ibo-color-blue-800 !defa
 $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-y: 32px !default;
+$ibo-tab-container--tab-container--padding-x: $ibo-spacing-700 !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;

css/backoffice/layout/wizard-container/_wizard-container.scss

@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-wizard-container--padding: 10px 16px !default;
+$ibo-wizard-container--padding: 10px $ibo-spacing-500 !default;
 $ibo-wizard-container--background-color: $ibo-color-blue-200 !default;
 $ibo-wizard-container--border-color: $ibo-color-blue-600 !default;
 $ibo-wizard-container--border-width: 3px !default;

css/backoffice/pages/_attachments.scss

@@ -12,13 +12,13 @@ $ibo-attachment--datatable--first-column--line-height: 0px !default;
 
 $ibo-attachment--drag-in--border: 2px $ibo-color-grey-400 dashed !default;
 $ibo-attachment--upload-file--drop-zone-hint--max-height: 200px !default;
-$ibo-attachment--upload-file--drop-zone-hint--margin: 22px 0px !default;
+$ibo-attachment--upload-file--drop-zone-hint--margin: 22px $ibo-spacing-0 !default;
 $ibo-attachment--upload-file--drop-zone-hint--color: $ibo-color-grey-700 !default;
 $ibo-attachment--upload-file--drop-zone-hint--image--margin-bottom: 5px !default;
 
 $ibo-attachment--tab-header--drop-in--background-color: $ibo-color-blue-200 !default;
 $ibo-attachment--tab-header--drop-in--color: $ibo-color-blue-800 !default;
-$ibo-attachment--tab-header--drop-in--icon--padding-left: 8px !default;
+$ibo-attachment--tab-header--drop-in--icon--padding-left: $ibo-spacing-300 !default;
 $ibo-attachment--tab-header--drop-in--icon--content: "\f382" !default;
 $ibo-attachment--tab-header--drop-in--icon--color: $ibo-color-blue-600 !default;
 

css/backoffice/pages/_audit.scss

@@ -10,9 +10,9 @@ $ibo-audit--audit-category--panel--body--padding-y: 10px !default;
 $ibo-audit--audit-category--panel--body--padding-x: $ibo-panel--body--padding-x !default;
 
 $ibo-audit--dashboard--padding-y: 18px !default;
-$ibo-audit--dashboard--padding-x: 0 !default;
+$ibo-audit--dashboard--padding-x: $ibo-spacing-0 !default;
 
-$ibo-audit--first-error-alert--margin-top: 24px !default;
+$ibo-audit--first-error-alert--margin-top: $ibo-spacing-600 !default;
 
 $ibo-audit--audit-line--csv-download--height: 2.5em !default;
 

css/backoffice/pages/_base.scss

@@ -9,8 +9,8 @@ $ibo-body-background-color: $ibo-color-white-200 !default;
 
 $ibo-page-container--elements-padding-x: 36px !default;
 
-$ibo-main-content--padding-top: 16px !default;
-$ibo-main-content--padding-bottom: 16px !default;
+$ibo-main-content--padding-top: $ibo-spacing-500 !default;
+$ibo-main-content--padding-bottom: $ibo-spacing-500 !default;
 
 /* CSS variables (can be changed directly from the browser) */
 :root{

css/backoffice/pages/_data-synchro.scss

@@ -9,7 +9,7 @@ $ibo-data-synchro-source--replicas-table--cell--padding: 10px !default;
 $ibo-data-synchro-source--replicas-table--cell--min-width: 200px !default;
 $ibo-data-synchro-source--replicas-table--cell--arrow--min-width: 100px !default;
 
-$ibo-data-synchro-source--replicas-status--warning--margin: 0 5px 0 8px !default;
+$ibo-data-synchro-source--replicas-status--warning--margin: $ibo-spacing-0 5px $ibo-spacing-0 $ibo-spacing-300 !default;
 
 $ibo-data-synchro-source--replicas-status--color: (
         'grey': (

css/backoffice/pages/_datamodel-viewer.scss

@@ -3,8 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-datamodel-viewer--parent--spacer--padding-y: 0 !default;
-$ibo-datamodel-viewer--parent--spacer--padding-x: 8px !default;
+$ibo-datamodel-viewer--parent--spacer--padding-y: $ibo-spacing-0 !default;
+$ibo-datamodel-viewer--parent--spacer--padding-x: $ibo-spacing-300 !default;
 
 $ibo-datamodel-viewer--attributes-table--first-column--width: 3px !default;
 
@@ -13,7 +13,7 @@ $ibo-datamodel-viewer--origin-cell--border-radius: $ibo-border-radius-full !defa
 
 $ibo-datamodel-viewer--classes-list--height: 100% !default;
 $ibo-datamodel-viewer--classes-list--max-width: 350px !default;
-$ibo-datamodel-viewer--classes-list--padding-left: 24px !default;
+$ibo-datamodel-viewer--classes-list--padding-left: $ibo-spacing-600 !default;
 
 $ibo-datamodel-viewer--lifecycle--code--color: $ibo-color-grey-700 !default;
 $ibo-datamodel-viewer--lifecycle--stimuli--color: $ibo-color-blue-900 !default;
@@ -33,6 +33,8 @@ $ibo-datamodel-viewer--schema--tooltip--span--margin: 3px !default;
 $ibo-datamodel-viewer--schema--tooltip-top--border-color: $ibo-color-grey-700 !default;
 $ibo-datamodel-viewer--schema--tooltip-top--padding: 3px !default;
 
+$ibo-datamodel-viewer--lifecycle-image--margin-bottom: $ibo-spacing-500 !default;
+
 .ibo-datamodel-viewer--details{
   .ibo-panel--subtitle{
     @extend %ibo-font-ral-nor-150;
@@ -120,3 +122,7 @@ $ibo-datamodel-viewer--schema--tooltip-top--padding: 3px !default;
   border-bottom: 1px solid $ibo-datamodel-viewer--schema--tooltip-top--border-color;
   padding: $ibo-datamodel-viewer--schema--tooltip-top--padding;
 }
+
+.ibo-datamodel-viewer--lifecycle-image{
+  margin-bottom: $ibo-datamodel-viewer--lifecycle-image--margin-bottom;
+}

css/backoffice/pages/_global-search.scss

@@ -3,9 +3,9 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-global-search--result--title--image--max-height: 48px !default;
+$ibo-global-search--result--title--image--max-height: $ibo-spacing-800 !default;
 $ibo-global-search--result--title--image--max-width: $ibo-global-search--result--title--image--max-height !default;
-$ibo-global-search--result--title--image--margin-right: 8px !default;
+$ibo-global-search--result--title--image--margin-right: $ibo-spacing-300 !default;
 
 .ibo-global-search--result--title{
   @extend %ibo-font-ral-nor-150;

css/backoffice/pages/_impact-analysis.scss

@@ -15,9 +15,9 @@ $ibo-simple-graph--grouping-threshold-additional-context--container--margin-righ
 $ibo-simple-graph--grouping-threshold-additional-context--content--margin-right: 1em !default;
 
 $ibo-impact-analysis--graph-zoom-slider--width: 10em !default;
-$ibo-impact-analysis--impacted-objects-lists--elements-spacing: 24px !default;
+$ibo-impact-analysis--impacted-objects-lists--elements-spacing: $ibo-spacing-600 !default;
 
-$ibo-display-graph--search-box--criterion--content--padding-y: 0 !default;
+$ibo-display-graph--search-box--criterion--content--padding-y: $ibo-spacing-0 !default;
 $ibo-display-graph--search-box--criterion--content--padding-x: 15px !default;
 
 $ibo-display-graph--search-box--criterion--content--checkbox--margin-right: 10px !default;

css/backoffice/pages/_preferences.scss

@@ -7,7 +7,7 @@ $ibo-preferences--panel--margin-x: auto !default;
 
 $ibo-preferences--user-preferences--picture-placeholder--image--diameter: 54px !default;
 $ibo-preferences--user-preferences--picture-placeholder--image--border-radius: $ibo-border-radius-full !default;
-$ibo-preferences--user-preferences--picture-placeholder--image--margin: 12px !default;
+$ibo-preferences--user-preferences--picture-placeholder--image--margin: $ibo-spacing-400 !default;
 $ibo-preferences--user-preferences--picture-placeholder--image--background-color: $ibo-color-grey-300 !default;
 
 $ibo-preferences--user-preferences--picture-placeholder--image--active--border-color: $ibo-color-blue-800;
@@ -19,8 +19,8 @@ $ibo-keyboard-shortcut--input--color: $ibo-color-grey-800 !default;
 $ibo-keyboard-shortcut--input--background-color: transparent !default;
 $ibo-keyboard-shortcut--input--border-color: $ibo-color-grey-500 !default;
 $ibo-keyboard-shortcut--input--border-radius: $ibo-border-radius-300 !default;
-$ibo-keyboard-shortcut--input--padding-y: 2px !default;
-$ibo-keyboard-shortcut--input--padding-x: 4px !default;
+$ibo-keyboard-shortcut--input--padding-y: $ibo-spacing-100 !default;
+$ibo-keyboard-shortcut--input--padding-x: $ibo-spacing-200 !default;
 $ibo-keyboard-shortcut--input--margin-bottom: 5px !default;
 
 $ibo-keyboard-shortcut--input--is-focus--color: $ibo-color-primary-800 !default;

css/backoffice/utils/variables/_all.scss

@@ -8,6 +8,8 @@
 @import "depression";
 @import "elevation";
 @import "path";
+@import "size";
+@import "spacing";
 @import "typography";
 // Important: Keep this partial last as it includes variables from the previous partials
 @import "base";

css/backoffice/utils/variables/_size.scss

@@ -0,0 +1,46 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-size-0: 0 !default;
+$ibo-size-50: 2px !default;
+$ibo-size-100: 4px !default;
+$ibo-size-150: 8px !default;
+$ibo-size-200: 12px !default;
+$ibo-size-250: 16px !default;
+$ibo-size-300: 24px !default;
+$ibo-size-350: 32px !default;
+$ibo-size-400: 48px !default;
+$ibo-size-450: 64px !default;
+$ibo-size-500: 96px !default;
+$ibo-size-550: 128px !default;
+$ibo-size-600: 192px !default;
+$ibo-size-650: 256px !default;
+$ibo-size-700: 384px !default;
+$ibo-size-750: 512px !default;
+$ibo-size-800: 640px !default;
+$ibo-size-850: 768px !default;
+$ibo-size-900: 896px !default;
+
+:root{
+  --ibo-size-0: #{$ibo-size-0};
+  --ibo-size-50: #{$ibo-size-50};
+  --ibo-size-100: #{$ibo-size-100};
+  --ibo-size-150: #{$ibo-size-150};
+  --ibo-size-200: #{$ibo-size-200};
+  --ibo-size-250: #{$ibo-size-250};
+  --ibo-size-300: #{$ibo-size-300};
+  --ibo-size-350: #{$ibo-size-350};
+  --ibo-size-400: #{$ibo-size-400};
+  --ibo-size-450: #{$ibo-size-450};
+  --ibo-size-500: #{$ibo-size-500};
+  --ibo-size-550: #{$ibo-size-550};
+  --ibo-size-600: #{$ibo-size-600};
+  --ibo-size-650: #{$ibo-size-650};
+  --ibo-size-700: #{$ibo-size-700};
+  --ibo-size-750: #{$ibo-size-750};
+  --ibo-size-800: #{$ibo-size-800};
+  --ibo-size-850: #{$ibo-size-850};
+  --ibo-size-900: #{$ibo-size-900};
+}

css/backoffice/utils/variables/_spacing.scss

@@ -0,0 +1,28 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-spacing-0: $ibo-size-0 !default;
+$ibo-spacing-100: $ibo-size-50 !default;
+$ibo-spacing-200: $ibo-size-100 !default;
+$ibo-spacing-300: $ibo-size-150 !default;
+$ibo-spacing-400: $ibo-size-200 !default;
+$ibo-spacing-500: $ibo-size-250 !default;
+$ibo-spacing-600: $ibo-size-300 !default;
+$ibo-spacing-700: $ibo-size-350 !default;
+$ibo-spacing-800: $ibo-size-400 !default;
+$ibo-spacing-900: $ibo-size-450 !default;
+
+:root{
+  --ibo-spacing-0: #{$ibo-size-0};
+  --ibo-spacing-100: #{$ibo-size-50};
+  --ibo-spacing-200: #{$ibo-size-100};
+  --ibo-spacing-300: #{$ibo-size-150};
+  --ibo-spacing-400: #{$ibo-size-200};
+  --ibo-spacing-500: #{$ibo-size-250};
+  --ibo-spacing-600: #{$ibo-size-300};
+  --ibo-spacing-700: #{$ibo-size-350};
+  --ibo-spacing-800: #{$ibo-size-400};
+  --ibo-spacing-900: #{$ibo-size-450};
+}