@odoo/o-spreadsheet 19.1.0-alpha.9 → 19.1.2

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 19.1.0-alpha.9
- @date 2025-10-23T11:13:50.088Z
- @hash bd756dd
+ @version 19.1.2
+ @date 2026-01-07T16:22:29.505Z
+ @hash febc3e9
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -29,9 +29,9 @@
 
   <t t-name="o-spreadsheet-TopBar">
     <div
-      class="o-spreadsheet-topbar d-flex flex-column user-select-none"
+      class="o-spreadsheet-topbar d-flex flex-column user-select-none bg-white"
       t-on-click="props.onClick">
-      <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between">
+      <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between border-bottom">
         <!-- Menus -->
         <div class="o-topbar-topleft d-flex">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
@@ -82,7 +82,7 @@
                 t-key="toolbarAction_index">
                 <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
               </t>
-              <div t-if="showDivider(category_index)" class="o-topbar-divider"/>
+              <div t-if="showDivider(category_index)" class="o-topbar-divider border-end"/>
             </div>
             <div
               t-ref="moreToolsContainer"
@@ -100,7 +100,7 @@
       </div>
       <div
         t-if="this.fingerprints.isEnabled"
-        class="irregularity-map d-flex align-items-center justify-content-between">
+        class="topbar-banner irregularity-map d-flex align-items-center justify-content-between border-top">
         <div
           t-on-click="() => this.fingerprints.disable()"
           role="button"
@@ -132,7 +132,7 @@
       popoverPositioning="'bottom-left'"
     />
     <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
-      <div class="d-flex px-2 py-1 flex-wrap align-items-center" style="background-color:white;">
+      <div class="d-flex px-2 py-1 flex-wrap align-items-center bg-white">
         <t
           t-foreach="state.invisibleToolsCategories"
           t-as="category"
@@ -146,13 +146,28 @@
           </t>
           <div
             t-if="category_index &lt; state.invisibleToolsCategories.length-1"
-            class="o-topbar-divider"
+            class="o-topbar-divider border-end"
           />
         </t>
       </div>
     </Popover>
   </t>
 
+  <div t-name="o-spreadsheet-TopBarZoom" t-ref="buttonRef" t-on-click.stop="">
+    <NumberEditor
+      currentValue="currentFontSize"
+      onValueChange.bind="this.setZoom"
+      class="props.class"
+      onToggle.bind="this.toggle"
+      onFocusInput.bind="this.onFocusInput"
+      valueIcon="'%'"
+      min="25"
+      max="300"
+      valueList="valueList"
+      title.translate="Zoom"
+    />
+  </div>
+
   <div t-name="o-spreadsheet-NumberFormatsTool" t-ref="buttonRef" t-on-click.stop="">
     <ActionButton
       action="formatNumberMenuItemSpec"
@@ -191,7 +206,7 @@
       class="props.class"
     />
     <Popover t-if="isActive" t-props="popoverProps">
-      <div class="o-dropdown-content p-1" t-if="isActive" t-on-click.stop="">
+      <div class="o-dropdown-content p-1 bg-white" t-if="isActive" t-on-click.stop="">
         <div class="o-dropdown-line">
           <t t-foreach="props.childActions" t-as="action" t-key="action_index">
             <ActionButton action="action" class="props.childClass"/>
@@ -216,24 +231,32 @@
   </t>
 
   <t t-name="o-spreadsheet-TextInput">
-    <input
-      type="text"
-      t-ref="{{refName}}"
-      t-att-class="inputClass"
-      t-att-id="props.id"
-      t-att-placeholder="props.placeholder"
-      t-on-change="save"
-      t-on-blur="save"
-      t-on-pointerdown="onMouseDown"
-      t-on-pointerup="onMouseUp"
-      t-on-keydown="onKeyDown"
-    />
+    <div class="position-relative">
+      <input
+        type="text"
+        t-ref="{{refName}}"
+        t-att-class="inputClass"
+        t-att-id="props.id"
+        t-att-placeholder="props.placeholder"
+        t-on-change="save"
+        t-on-blur="save"
+        t-on-pointerdown="onMouseDown"
+        t-on-pointerup="onMouseUp"
+        t-on-keydown="onKeyDown"
+      />
+      <span
+        t-if="props.errorMessage"
+        class="os-input-error-icon text-danger position-absolute d-flex align-items-center"
+        t-att-title="props.errorMessage">
+        <t t-call="o-spreadsheet-Icon.ERROR"/>
+      </span>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
       <div
-        class="o-table-style-popover d-flex flex-column py-3"
+        class="o-table-style-popover d-flex flex-column py-3 bg-white"
         t-ref="tableStyleList"
         t-on-contextmenu.prevent="">
         <div class="d-flex o-notebook ps-4 mb-3">
@@ -241,7 +264,7 @@
             t-foreach="Object.keys(categories)"
             t-as="category"
             t-key="category"
-            class="o-notebook-tab d-flex align-items-center"
+            class="o-notebook-tab d-flex align-items-center border"
             t-att-class="{ 'selected': state.selectedCategory === category }"
             t-on-click="() => state.selectedCategory = category"
             t-att-data-id="category"
@@ -282,7 +305,7 @@
         <canvas t-ref="canvas" class="w-100 h-100"/>
       </div>
       <div
-        class="o-table-style-edit-button position-absolute d-none"
+        class="o-table-style-edit-button position-absolute d-none bg-white border"
         t-if="isStyleEditable"
         t-on-click="this.editTableStyle"
         title="Edit custom table style">
@@ -298,7 +321,7 @@
   </t>
 
   <t t-name="o-spreadsheet-TableStylePicker">
-    <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
+    <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1 border rounded">
       <div class="d-flex flex-row overflow-hidden ps-2">
         <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
           <TableStylePreview
@@ -312,7 +335,7 @@
         </t>
       </div>
       <div
-        class="o-table-style-picker-arrow d-flex align-items-center px-1"
+        class="o-table-style-picker-arrow d-flex align-items-center px-1 border-start"
         t-on-click.stop="onArrowButtonClick">
         <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
       </div>
@@ -354,7 +377,7 @@
   <t t-name="o-spreadsheet-Spreadsheet">
     <div
       class="o-spreadsheet h-100 w-100"
-      t-att-class="{'o-spreadsheet-mobile': env.isSmall}"
+      t-att-class="getSpreadSheetClasses()"
       t-ref="spreadsheet"
       t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
@@ -371,10 +394,10 @@
           t-att-style="gridContainerStyle"
           t-on-click="this.focusGrid">
           <div class="o-top-left"/>
-          <div class="o-column-groups">
+          <div class="o-column-groups o-zoomable">
             <HeaderGroupContainer layers="colLayers" dimension="'COL'"/>
           </div>
-          <div class="o-row-groups">
+          <div class="o-row-groups o-zoomable">
             <HeaderGroupContainer layers="rowLayers" dimension="'ROW'"/>
           </div>
           <div class="o-group-grid overflow-hidden">
@@ -396,7 +419,7 @@
         <RibbonMenu onClose="() => this.menuState.isOpen=false"/>
       </t>
       <t t-else="">
-        <div class="o-small-composer px-2 py-2 position-relative">
+        <div class="o-small-composer px-2 py-2 position-relative bg-white border">
           <div class="w-100" t-ref="bottombarComposer">
             <Composer t-props="composerProps"/>
             <span
@@ -428,7 +451,7 @@
             composerFocusableElement="true"
           />
         </div>
-        <div class="d-flex flex-fill align-items-center bottom-bar-menu">
+        <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
           <Ripple>
             <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="toggleRibbon">
               <i class="o-icon fa fa-cog"/>
@@ -675,8 +698,9 @@
   </t>
 
   <t t-name="o-spreadsheet-SidePanelExtended">
-    <div class="o-sidePanel h-100">
-      <div class="o-sidePanelHeader d-flex align-items-center justify-content-between">
+    <div class="o-sidePanel h-100 bg-white border-top border-start">
+      <div
+        class="o-sidePanelHeader d-flex align-items-center justify-content-between border-bottom">
         <div
           t-if="props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded"
@@ -720,7 +744,9 @@
   </t>
 
   <t t-name="o-spreadsheet-SidePanelCollapsed">
-    <div class="o-sidePanel collapsed w-100 h-100" t-on-click="props.onToggleCollapsePanel">
+    <div
+      class="o-sidePanel collapsed w-100 h-100 bg-white"
+      t-on-click="props.onToggleCollapsePanel">
       <div class="d-flex flex-column align-items-center">
         <div
           t-if="props.onToggleCollapsePanel"
@@ -759,7 +785,7 @@
             t-att-selected="currentLocale.code === locale.code"
           />
         </select>
-        <div class="o-locale-preview mt-4 p-3 rounded">
+        <div class="o-locale-preview mt-4 p-3 rounded border">
           <div>
             <span class="o-fw-bold me-1">Number:</span>
             <span t-esc="numberFormatPreview"/>
@@ -957,24 +983,22 @@
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max rows:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfRows ?? ''"
-                type="number"
-                class="o-pivot-n-of-rows o-input"
-                placeholder="e.g. 10"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfRows', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfRows ?? ''"
+                class="'o-pivot-n-of-rows'"
+                placeholder.translate="e.g. 10"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
               />
             </div>
           </div>
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max columns:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfColumns ?? ''"
-                type="number"
-                class="o-pivot-n-of-columns o-input"
-                placeholder="e.g. 5"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfColumns', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfColumns ?? ''"
+                class="'o-pivot-n-of-columns'"
+                placeholder.translate="e.g. 5"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
               />
             </div>
           </div>
@@ -1027,13 +1051,13 @@
         </t>
       </select>
       <div
-        class="o-pivot-measure-display-description mt-3 ps-3"
+        class="o-pivot-measure-display-description mt-3 ps-3 border-start"
         t-esc="measureDisplayDescription[store.measureDisplay.type]"
       />
     </Section>
 
     <Section t-if="store.doesDisplayNeedsField" title.translate="Base field:">
-      <div class="o-pivot-measure-display-field w-100 py-1 px-3">
+      <div class="o-pivot-measure-display-field w-100 py-1 px-3 border">
         <t t-if="store.fields.length">
           <RadioSelection
             choices="fieldChoices"
@@ -1051,7 +1075,7 @@
 
     <t t-set="values" t-value="store.values"/>
     <Section t-if="store.doesDisplayNeedsValue and values.length" title.translate="Base item:">
-      <div class="o-pivot-measure-display-value w-100 py-1 px-3">
+      <div class="o-pivot-measure-display-value w-100 py-1 px-3 border">
         <RadioSelection
           choices="values"
           selectedValue="store.measureDisplay.value"
@@ -1194,7 +1218,7 @@
       <div t-esc="sortDescription" class="pb-2"/>
       <div class="d-flex flex-column gap-2">
         <t t-foreach="sortValuesAndFields" t-as="valueAndField" t-key="valueAndField_index">
-          <div class="o-sort-card d-flex gap-1 px-2">
+          <div class="o-sort-card d-flex gap-1 px-2 border">
             <t t-if="valueAndField.field">
               <span class="fw-bolder" t-esc="valueAndField.field"/>
               =
@@ -1306,7 +1330,7 @@
 
   <t t-name="o-spreadsheet-PivotDimension">
     <div
-      class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension"
+      class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension border rounded"
       t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
         <div class="d-flex align-items-center overflow-hidden text-nowrap">
@@ -1339,7 +1363,7 @@
     <button class="add-dimension o-button" t-on-click="togglePopover" t-ref="button">Add</button>
     <Popover t-if="popover.isOpen" t-props="popoverProps">
       <div
-        class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search">
+        class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search bg-white">
         <i class="pe-1 pivot-dimension-search-field-icon text-muted">
           <t t-call="o-spreadsheet-Icon.SEARCH"/>
         </i>
@@ -1424,21 +1448,97 @@
 
   <t t-name="o-spreadsheet-MoreFormatsPanel">
     <div class="o-more-formats-panel">
-      <div
-        t-foreach="dateFormatsActions"
-        t-as="action"
-        t-key="action.name(env)"
-        t-att-data-name="action.name(env)"
-        t-on-click="() => action.execute(env)"
-        class="w-100 d-flex align-items-center border-bottom format-preview">
-        <span class="ms-3 check-icon">
-          <t t-if="action.isActive(env)" t-call="o-spreadsheet-Icon.CHECK"/>
-        </span>
-        <span t-out="action.description(env)"/>
-      </div>
+      <Section title.translate="Format type">
+        <BadgeSelection
+          choices="store.categories"
+          onChange.bind="(category) => store.changeCategory(category)"
+          selectedValue="store.category"
+        />
+      </Section>
+      <t t-if="store.category === 'currency'" t-call="o-spreadsheet-CustomCurrencySection"/>
+      <t t-set="proposals" t-value="store.formatProposals"/>
+      <Section title.translate="Type" t-if="proposals.length">
+        <div class="o-format-proposals overflow-auto border">
+          <div
+            t-foreach="proposals"
+            t-as="proposal"
+            t-key="proposal.format"
+            t-att-data-name="proposal.format"
+            t-on-click="() => this.store.updateFormat(proposal.format)"
+            class="w-100 d-flex align-items-center format-preview px-2 py-1"
+            t-att-class="{'active': (proposal.format || '') === (store.currentFormat || '')}">
+            <span t-out="proposal.label"/>
+          </div>
+        </div>
+      </Section>
+
+      <Section title.translate="Format" class="'o-custom-format-section'">
+        <TextInput
+          value="store.currentFormat || ''"
+          onChange="(format) => this.store.updateFormat(format)"
+          placeholder.translate="Format code"
+          alwaysShowBorder="true"
+          errorMessage="store.invalidFormatMessage"
+        />
+        <t t-set="examples" t-value="store.formatExamples"/>
+        <div class="o-format-examples mt-4 p-2 rounded border" t-if="examples.length">
+          <table class="w-100">
+            <t t-foreach="examples" t-as="example" t-key="example_index">
+              <tr>
+                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
+                <td class="w-75 text-truncate" t-esc="example.value"/>
+              </tr>
+            </t>
+          </table>
+        </div>
+      </Section>
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-CustomCurrencySection">
+    <t t-set="availableCurrencies" t-value="store.availableCurrencies"/>
+    <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
+      <select
+        class="o-input o-available-currencies"
+        t-on-change="(ev) => this.updateSelectCurrency(ev)">
+        <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
+          <option
+            t-att-value="currency_index"
+            t-esc="currencyDisplayName(currency)"
+            t-att-selected="currency_index === store.selectedCurrencyIndex"
+          />
+        </t>
+      </select>
+    </Section>
+    <Section>
+      <div class="o-subsection-left">
+        <div class="o-section-title">Code</div>
+        <TextInput
+          value="store.currencyCode"
+          placeholder.translate="code"
+          onChange="(code) => this.store.changeCurrencyCode(code)"
+          alwaysShowBorder="true"
+        />
+      </div>
+      <div class="o-subsection-right">
+        <div class="o-section-title">Symbol</div>
+        <TextInput
+          value="store.currencySymbol"
+          placeholder.translate="symbol"
+          onChange="(symbol) => this.store.changeCurrencySymbol(symbol)"
+          alwaysShowBorder="true"
+        />
+      </div>
+      <Checkbox
+        name="'accountingFormat'"
+        className="'pt-2'"
+        label.translate="Accounting format"
+        value="store.isAccountingFormat"
+        onChange="() => store.toggleAccountingFormat()"
+      />
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-FindAndReplacePanel">
     <div class="o-find-and-replace">
       <Section title.translate="Search">
@@ -1568,7 +1668,7 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3" t-on-click="props.onClick" t-ref="dvPreview">
+    <div class="o-dv-preview p-3 border-bottom" t-on-click="props.onClick" t-ref="dvPreview">
       <div class="d-flex justify-content-between">
         <div class="o-dv-container d-flex flex-column">
           <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
@@ -1607,6 +1707,7 @@
             t-key="state.rule.criterion.type"
             criterion="state.rule.criterion"
             onCriterionChanged.bind="onCriterionChanged"
+            autofocus="state.isTypeUpdated"
           />
         </div>
       </Section>
@@ -1630,93 +1731,13 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-CustomCurrencyPanel">
-    <div class="o-custom-currency">
-      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
-        <select
-          class="o-input o-available-currencies"
-          t-on-change="(ev) => this.updateSelectCurrency(ev)">
-          <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
-            <option
-              t-att-value="currency_index"
-              t-esc="currencyDisplayName(currency)"
-              t-att-selected="currency_index === state.selectedCurrencyIndex"
-            />
-          </t>
-        </select>
-      </Section>
-      <Section>
-        <div class="o-subsection-left">
-          <div class="o-section-title">Code</div>
-          <input
-            type="text"
-            class="o-input"
-            t-model="state.currencyCode"
-            placeholder="code"
-            t-on-input="(ev) => this.updateCode(ev)"
-          />
-        </div>
-        <div class="o-subsection-right">
-          <div class="o-section-title">Symbol</div>
-          <input
-            type="text"
-            class="o-input"
-            placeholder="symbol"
-            t-model="state.currencySymbol"
-            t-on-input="(ev) => this.updateSymbol(ev)"
-          />
-        </div>
-      </Section>
-      <Section title.translate="Format">
-        <select
-          class="o-input o-format-proposals mb-1"
-          t-on-change="(ev) => this.updateSelectFormat(ev)"
-          t-att-disabled="!formatProposals.length">
-          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
-            <option
-              t-att-value="proposal_index"
-              t-esc="proposal.example"
-              t-att-selected="proposal_index === state.selectedFormatIndex"
-            />
-          </t>
-        </select>
-        <t t-set="accounting_format_label">Accounting format</t>
-        <Checkbox
-          name="'accountingFormat'"
-          label="accounting_format_label"
-          value="state.isAccountingFormat"
-          onChange.bind="toggleAccountingFormat"
-        />
-        <div class="o-format-examples mt-4" t-if="selectedFormat">
-          <table class="w-100">
-            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
-              <tr>
-                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
-                <td class="w-75 text-truncate" t-esc="example.value"/>
-              </tr>
-            </t>
-          </table>
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons">
-          <button
-            class="o-button primary"
-            t-on-click="() => this.apply()"
-            t-att-disabled="!formatProposals.length || isSameFormat">
-            Apply
-          </button>
-        </div>
-      </Section>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[props.criterion.values[0] || '']"
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
       required="true"
       hasSingleRange="true"
+      autofocus="props.autofocus"
     />
     <t t-foreach="values" t-as="value" t-key="value_index">
       <div class="o-dv-list-values p-1 d-flex align-items-center">
@@ -1786,6 +1807,7 @@
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 
@@ -1795,6 +1817,7 @@
       onValueChanged.bind="onFirstValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
     <CriterionInput
       value="props.criterion.values[1]"
@@ -1812,16 +1835,17 @@
         t-key="dateValue.value"
         t-att-value="dateValue.value"
         t-esc="dateValue.title"
-        t-att-selected="dateValue.value === props.criterion.dateValue"
+        t-att-selected="dateValue.value === currentDateValue"
       />
     </select>
 
     <CriterionInput
-      t-if="props.criterion.dateValue === 'exactDate'"
+      t-if="currentDateValue === 'exactDate'"
       value="props.criterion.values[0]"
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 
@@ -1900,47 +1924,45 @@
   <t t-name="o-spreadsheet-ConditionalFormatPreview">
     <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview w-100"
+      class="o-cf-preview w-100 d-flex align-items-center border-bottom"
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
       t-on-click="props.onPreviewClick"
       t-on-pointerdown="(ev) => this.onMouseDown(ev)">
-      <div class="position-relative h-100 w-100 d-flex align-items-center">
+      <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
+        <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+      </div>
+      <t t-if="cf.rule.type==='IconSetRule'">
         <div
-          class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
-          <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
-        </div>
-        <t t-if="cf.rule.type==='IconSetRule'">
-          <div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
-          </div>
-        </t>
-        <t t-else="">
-          <div
-            t-att-style="getPreviewImageStyle(cf.rule)"
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            123
-          </div>
-        </t>
-        <div class="o-cf-preview-description">
-          <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
-              <t t-esc="getDescription(cf)"/>
-            </div>
-          </div>
-          <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 bg-white border">
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
         </div>
-        <div class="o-cf-delete">
-          <div
-            class="o-cf-delete-button o-button-icon"
-            t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
-            title="Remove rule">
-            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+      </t>
+      <t t-else="">
+        <div
+          t-att-style="getPreviewImageStyle(cf.rule)"
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0 border">
+          123
+        </div>
+      </t>
+      <div class="o-cf-preview-description me-3 overflow-auto">
+        <div class="o-cf-preview-ruletype">
+          <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
+            <t t-esc="getDescription(cf)"/>
           </div>
         </div>
+        <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+      </div>
+      <div class="o-cf-delete ms-auto">
+        <div
+          class="o-cf-delete-button o-button-icon"
+          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          title="Remove rule">
+          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+        </div>
       </div>
     </div>
   </t>
@@ -1950,7 +1972,7 @@
       <div class="o-section-subtitle">Icons</div>
       <div class="o-cf-iconsets d-flex flex-row">
         <div
-          class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between"
+          class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between border rounded"
           t-foreach="['arrows', 'smiley', 'dots']"
           t-as="iconSet"
           t-key="iconSet"
@@ -1973,7 +1995,7 @@
     <tr>
       <td>
         <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-'+icon+'Icon', ev)">
-          <div class="o-cf-icon-button o-cf-clickable-icon me-3">
+          <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
             <t t-call="o-spreadsheet-Icon.{{icons[iconValue].template}}"/>
           </div>
         </div>
@@ -2056,7 +2078,7 @@
         <tr>
           <td>
             <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-lowerIcon', ev)">
-              <div class="o-cf-icon-button o-cf-clickable-icon me-3">
+              <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
                 <t t-call="o-spreadsheet-Icon.{{icons[rule.icons.lower].template}}"/>
               </div>
             </div>
@@ -2171,7 +2193,7 @@
   <t t-name="o-spreadsheet-ColorScaleRuleEditor">
     <div class="o-cf-color-scale-editor">
       <div class="o-section-subtitle">Preview</div>
-      <div class="o-cf-preview-display mb-4" t-attf-style="{{getPreviewGradient()}}">
+      <div class="o-cf-preview-display mb-4" t-attf-style="{{getColorScalePreviewStyle()}}">
         Preview text
       </div>
       <div class="o-section-subtitle">Minpoint</div>
@@ -2250,7 +2272,7 @@
 
   <t t-name="o-spreadsheet-CellIsRuleEditorPreview">
     <div
-      class="o-cf-preview-display"
+      class="o-cf-preview-display border"
       t-attf-style="font-weight:{{currentStyle.bold ?'bold':'normal'}};
                        text-decoration:{{getTextDecoration(currentStyle)}};
                        font-style:{{currentStyle.italic?'italic':'normal'}};
@@ -2278,6 +2300,7 @@
         t-key="state.rules.cellIs.operator"
         criterion="genericCriterion"
         onCriterionChanged.bind="onRuleValuesChanged"
+        autofocus="this.state.hasEditedCf"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
@@ -2323,7 +2346,7 @@
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
         />
-        <div class="o-divider"/>
+        <div class="o-divider border-end"/>
         <ColorPickerWidget
           currentColor="rule.style.fillColor"
           toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-fillColor', ev)"
@@ -2351,7 +2374,7 @@
 
   <t t-name="o-spreadsheet.RoundColorPicker">
     <div
-      class="o-round-color-picker-button rounded-circle"
+      class="o-round-color-picker-button rounded-circle border"
       t-ref="colorPickerButton"
       t-on-click.stop="togglePicker"
       t-att-title="props.title"
@@ -2375,6 +2398,7 @@
       <t t-foreach="props.choices" t-as="choice" t-key="choice.value">
         <label class="o-radio d-flex align-items-center me-4">
           <input
+            class="border rounded-circle"
             t-att-class="{
               'me-1': props.direction === 'horizontal',
               'me-2': props.direction === 'vertical'}"
@@ -2442,7 +2466,7 @@
       t-att-class="{'text-muted': props.disabled }"
       t-attf-class="{{props.className}}">
       <input
-        class="me-2"
+        class="me-2 flex-shrink-0 border"
         type="checkbox"
         t-att-disabled="props.disabled"
         t-att-name="props.name"
@@ -2450,7 +2474,7 @@
         t-on-change="onChange"
         t-on-click.stop=""
       />
-      <t t-if="props.label" t-esc="props.label"/>
+      <span class="text-truncate" t-if="props.label" t-esc="props.label"/>
     </label>
   </t>
 
@@ -2484,6 +2508,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -2523,7 +2550,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2662,6 +2689,9 @@
             hasVerticalAlign="true"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </SidePanelCollapsible>
   </t>
@@ -2722,6 +2752,9 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -2773,7 +2806,7 @@
     <t t-set="color_down">Color Down</t>
     <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2887,7 +2920,7 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2902,7 +2935,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
         <PieHoleSize
@@ -2934,7 +2967,7 @@
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
-      <div class="o-panel-content overflow-y-auto" t-ref="panelContent">
+      <div class="o-panel-content" t-ref="panelContent">
         <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
           <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
           <t
@@ -2977,7 +3010,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3086,7 +3119,7 @@
             <option value="left">Bottom left</option>
           </select>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3094,45 +3127,10 @@
 
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Geo chart options">
       <t t-set-slot="content">
-        <Section class="'pt-0 o-color-scale'" title.translate="Color Scale">
-          <select class="o-input" t-on-change="this.updateColorScaleType">
-            <option value="custom">Custom</option>
-            <hr/>
-            <t t-foreach="colorScalesChoices" t-as="colorScale" t-key="colorScale">
-              <option
-                t-att-value="colorScale"
-                t-esc="colorScale_value"
-                t-att-selected="colorScale === selectedColorScale"
-              />
-            </t>
-          </select>
-
-          <t t-if="customColorScale">
-            <div class="o-min-color d-flex align-items-center mb-2 mt-4">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('minColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('minColor', color)"
-                disableNoColor="true"
-              />
-              <span class="ps-2">Color of minimum values</span>
-            </div>
-            <div class="o-mid-color d-flex align-items-center mb-2">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('midColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('midColor', color)"
-              />
-              <span class="ps-2">Color of middle values</span>
-            </div>
-            <div class="o-max-color d-flex align-items-center">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('maxColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('maxColor', color)"
-                disableNoColor="true"
-              />
-              <span class="ps-2">Color of maximum values</span>
-            </div>
-          </t>
-        </Section>
+        <ColorScalePicker
+          definition="props.definition"
+          onUpdateColorScale.bind="this.updateColorScale"
+        />
 
         <Section class="'pt-0 o-missing-value'" title.translate="Countries without value">
           <RoundColorPicker
@@ -3179,7 +3177,7 @@
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3325,7 +3323,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3365,7 +3363,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3441,7 +3439,7 @@
     <Popover t-if="state.popoverProps" t-props="state.popoverProps">
       <div
         t-ref="popoverRef"
-        class="o-chart-select-popover px-3 pb-4"
+        class="o-chart-select-popover px-3 pb-4 bg-white"
         t-att-style="state.popoverStyle">
         <t t-foreach="categories" t-as="category" t-key="category">
           <t t-if="chartTypeByCategories[category]">
@@ -3469,148 +3467,192 @@
 
   <t t-name="o-spreadsheet-ChartPreview.LINE_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
-      <path stroke="#eb6d00" style="fill:none" d="M6,40 l12,-12 l6,6 l18,-18"/>
-      <path stroke="#0074d9" style="fill:none" d="M6,25 l12,-12 l18,18 l6,-6"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        style="fill:none"
+        d="M6,40 l12,-12 l6,6 l18,-18"
+      />
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        style="fill:none"
+        d="M6,25 l12,-12 l18,18 l6,-6"
+      />
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.STACKED_LINE_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path stroke="#0074d9" style="fill:none" d="M3,30 l12,-12 l6,6 l18,-18"/>
-      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-12"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        style="fill:none"
+        d="M3,30 l12,-12 l6,6 l18,-18"
+      />
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        style="fill:none"
+        d="M3,40 l12,-12 l6,6 l18,-12"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.AREA_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#c4e4ff" d="M3,45 V25 l12,-12 l18,18 l6,-6 V45"/>
-      <path fill="#ffe1c8" d="M3,45 V40 l12,-12 l6,6 l18,-18 V45"/>
-      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-18"/>
-      <path stroke="#0074d9" style="fill:none" d="M3,25 l12,-12 l18,18 l6,-6"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M3,45 V25 l12,-12 l18,18 l6,-6 V45"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M3,45 V40 l12,-12 l6,6 l18,-18 V45"/>
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        style="fill:none"
+        d="M3,40 l12,-12 l6,6 l18,-18"
+      />
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        style="fill:none"
+        d="M3,25 l12,-12 l18,18 l6,-6"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.STACKED_AREA_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#c4e4ff" d="M3,45 h36 v-39 l-18,18 l-6,-6 l-12,12"/>
-      <path stroke="#0074d9" style="fill:none" d="M3,30 l12,-12 l6,6 l18,-18"/>
-      <path fill="#ffe1c8" d="M3,45 h36 v-23 l-18,12 l-6,-6 l-12,12"/>
-      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-12"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M3,45 h36 v-39 l-18,18 l-6,-6 l-12,12"/>
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        style="fill:none"
+        d="M3,30 l12,-12 l6,6 l18,-18"
+      />
+      <path fill="var(--os-chart-preview-orange-fill)" d="M3,45 h36 v-23 l-18,12 l-6,-6 l-12,12"/>
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        style="fill:none"
+        d="M3,40 l12,-12 l6,6 l18,-12"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.COLUMN_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
-      <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
-      <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
-      <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
-      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
-      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
-      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
-      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M7,45 v-28 h6 v28"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M8,45 v-27 h4 v27"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M14,45 v-14 h6 v14"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M15,45 v-13 h4 v13"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M26,45 v-22 h6 v22"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M27,45 v-21 h4 v21"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M33,45 v-32 h6 v32"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M34,45 v-31 h4 v31"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.STACKED_COLUMN_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
-      <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
-      <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
-      <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M7,45 v-12 h8 v12"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M8,45 v-11 h6 v11"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M7,33 v-14 h8 v14"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M8,33 v-13 h6 v13"/>
 
-      <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
-      <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
-      <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
-      <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M20,45 v-8 h8 v8"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M21,45 v-7 h6 v7"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M20,37 v-9 h8 v9"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M21,37 v-8 h6 v8"/>
 
-      <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
-      <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
-      <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
-      <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M33,45 v-18 h8 v18"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M34,45 v-17 h6 v17"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M33,27 v-16 h8 v16"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M34,27 v-15 h6 v15"/>
 
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.BAR_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <g transform="matrix(0 1 -1 0 48 3)">
-        <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
-        <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
-        <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
-        <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
-        <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
-        <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
-        <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
-        <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+        <path fill="var(--os-chart-preview-blue-line)" d="M7,45 v-28 h6 v28"/>
+        <path fill="var(--os-chart-preview-blue-fill)" d="M8,45 v-27 h4 v27"/>
+        <path fill="var(--os-chart-preview-orange-line)" d="M14,45 v-14 h6 v14"/>
+        <path fill="var(--os-chart-preview-orange-fill)" d="M15,45 v-13 h4 v13"/>
+        <path fill="var(--os-chart-preview-blue-line)" d="M26,45 v-22 h6 v22"/>
+        <path fill="var(--os-chart-preview-blue-fill)" d="M27,45 v-21 h4 v21"/>
+        <path fill="var(--os-chart-preview-orange-line)" d="M33,45 v-32 h6 v32"/>
+        <path fill="var(--os-chart-preview-orange-fill)" d="M34,45 v-31 h4 v31"/>
       </g>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.STACKED_BAR_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <g transform="matrix(0 1 -1 0 48 1)">
-        <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
-        <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
-        <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
-        <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
-        <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
-        <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
-        <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
-        <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
-        <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
-        <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
-        <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
-        <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+        <path fill="var(--os-chart-preview-blue-line)" d="M7,45 v-12 h8 v12"/>
+        <path fill="var(--os-chart-preview-blue-fill)" d="M8,45 v-11 h6 v11"/>
+        <path fill="var(--os-chart-preview-orange-line)" d="M7,33 v-14 h8 v14"/>
+        <path fill="var(--os-chart-preview-orange-fill)" d="M8,33 v-13 h6 v13"/>
+        <path fill="var(--os-chart-preview-blue-line)" d="M20,45 v-8 h8 v8"/>
+        <path fill="var(--os-chart-preview-blue-fill)" d="M21,45 v-7 h6 v7"/>
+        <path fill="var(--os-chart-preview-orange-line)" d="M20,37 v-9 h8 v9"/>
+        <path fill="var(--os-chart-preview-orange-fill)" d="M21,37 v-8 h6 v8"/>
+        <path fill="var(--os-chart-preview-blue-line)" d="M33,45 v-18 h8 v18"/>
+        <path fill="var(--os-chart-preview-blue-fill)" d="M34,45 v-17 h6 v17"/>
+        <path fill="var(--os-chart-preview-orange-line)" d="M33,27 v-16 h8 v16"/>
+        <path fill="var(--os-chart-preview-orange-fill)" d="M34,27 v-15 h6 v15"/>
       </g>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.COMBO_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#0074d9" d="M7,45 v-14 h6 v14"/>
-      <path fill="#c4e4ff" d="M8,45 v-13 h4 v13"/>
-      <path fill="#eb6d00" d="M14,45 v-28 h6 v28"/>
-      <path fill="#ffe1c8" d="M15,45 v-27 h4 v27"/>
-      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
-      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
-      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
-      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
-      <path stroke="#888" style="fill:none;stroke-width:1.5;" d="M4,40 l14,-12 l6,6 l20,-18"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M7,45 v-14 h6 v14"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M8,45 v-13 h4 v13"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M14,45 v-28 h6 v28"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M15,45 v-27 h4 v27"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M26,45 v-22 h6 v22"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M27,45 v-21 h4 v21"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M33,45 v-32 h6 v32"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M34,45 v-31 h4 v31"/>
+      <path
+        stroke="var(--os-gray-500)"
+        style="fill:none;stroke-width:1.5;"
+        d="M4,40 l14,-12 l6,6 l20,-18"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.PIE_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#ffe1c8" stroke="#eb6d00" d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v20"/>
-      <path fill="#c4e4ff" stroke="#0074d9" d="M24,24 v-20 A20 20, 0, 0, 1, 41.32, 34 L24,24"/>
+      <path
+        fill="var(--os-chart-preview-orange-fill)"
+        stroke="var(--os-chart-preview-orange-line)"
+        d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v20"
+      />
+      <path
+        fill="var(--os-chart-preview-blue-fill)"
+        stroke="var(--os-chart-preview-blue-line)"
+        d="M24,24 v-20 A20 20, 0, 0, 1, 41.32, 34 L24,24"
+      />
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.DOUGHNUT_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill="#ffe1c8"
-        stroke="#eb6d00"
+        fill="var(--os-chart-preview-orange-fill)"
+        stroke="var(--os-chart-preview-orange-line)"
         d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v8 A12,12,0,1,0,34.4,30"
       />
       <path
-        fill="#c4e4ff"
-        stroke="#0074d9"
+        fill="var(--os-chart-preview-blue-fill)"
+        stroke="var(--os-chart-preview-blue-line)"
         d="M24,12 v-8 A20 20, 0, 0, 1, 41.32, 34 L34.4,30 A12,12,0,0,0,24,12"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.SCATTER_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <circle fill="#0074d9" cx="10" cy="10" r="2"/>
-      <circle fill="#0074d9" cx="15" cy="30" r="2"/>
-      <circle fill="#0074d9" cx="25" cy="36" r="2"/>
-      <circle fill="#0074d9" cx="32" cy="15" r="2"/>
-      <circle fill="#eb6d00" cx="10" cy="40" r="2"/>
-      <circle fill="#eb6d00" cx="18" cy="20" r="2"/>
-      <circle fill="#eb6d00" cx="30" cy="25" r="2"/>
-      <circle fill="#eb6d00" cx="40" cy="33" r="2"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <circle fill="var(--os-chart-preview-blue-line)" cx="10" cy="10" r="2"/>
+      <circle fill="var(--os-chart-preview-blue-line)" cx="15" cy="30" r="2"/>
+      <circle fill="var(--os-chart-preview-blue-line)" cx="25" cy="36" r="2"/>
+      <circle fill="var(--os-chart-preview-blue-line)" cx="32" cy="15" r="2"/>
+      <circle fill="var(--os-chart-preview-orange-line)" cx="10" cy="40" r="2"/>
+      <circle fill="var(--os-chart-preview-orange-line)" cx="18" cy="20" r="2"/>
+      <circle fill="var(--os-chart-preview-orange-line)" cx="30" cy="25" r="2"/>
+      <circle fill="var(--os-chart-preview-orange-line)" cx="40" cy="33" r="2"/>
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.GAUGE_CHART">
@@ -3618,9 +3660,9 @@
       viewBox="0 0 48 48"
       class="o-chart-preview user-select-none"
       xmlns="http://www.w3.org/2000/svg">
-      <path fill="#ccc" d="M2,32 A22,22,0,0,1,46,32 h-6 A16,16,0,0,0,8,32"/>
+      <path fill="var(--os-gray-400)" d="M2,32 A22,22,0,0,1,46,32 h-6 A16,16,0,0,0,8,32"/>
       <path fill="#6aa84f" d="M2,32 A22,22,0,0,1,35,13 L32,18.2 A16,16,0,0,0,8,32"/>
-      <text x="17" y="32" style="font-size:12px;">62</text>
+      <text fill="currentColor" x="17" y="32" style="font-size:12px;">62</text>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.SCORECARD_CHART">
@@ -3628,61 +3670,72 @@
       viewBox="0 0 48 48"
       class="o-chart-preview user-select-none"
       xmlns="http://www.w3.org/2000/svg">
-      <path fill="#ddd" d="M1,8 h46 v32 h-46"/>
-      <path fill="#eee" d="M2,9 h44 v30 h-44"/>
-      <text x="9" y="32" style="font-size:18px;">123</text>
+      <path fill="var(--os-gray-300)" d="M1,8 h46 v32 h-46"/>
+      <path fill="var(--os-gray-200)" d="M2,9 h44 v30 h-44"/>
+      <text fill="currentColor" x="9" y="32" style="font-size:18px;">123</text>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.WATERFALL_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#444" d="M5,45 v-26 h6 v26"/>
-      <path fill="#fff" d="M6,45 v-25 h4 v25"/>
-      <path fill="#eb6d00" d="M13,19 v7 h6 v-7"/>
-      <path fill="#ffe1c8" d="M14,20 v5 h4 v-5"/>
-      <path fill="#eb6d00" d="M21,25 v10 h6 v-10"/>
-      <path fill="#ffe1c8" d="M22,26 v8 h4 v-8"/>
-      <path fill="#0074d9" d="M29,35 v-24 h6 v24"/>
-      <path fill="#c4e4ff" d="M30,34 v-22 h4 v22"/>
-      <path fill="#444" d="M37,45 v-34 h6 v34"/>
-      <path fill="#fff" d="M38,45 v-33 h4 v33"/>
-      <path fill="#444" d="M11,20 v-1 h2 v1 M19,26 v-1 h2 v1 M27,35 v-1 h2 v1 M35,12 v-1 h2 v1"/>
-      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path fill="var(--os-gray-600)" d="M5,45 v-26 h6 v26"/>
+      <path fill="var(--os-white-bg)" d="M6,45 v-25 h4 v25"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M13,19 v7 h6 v-7"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M14,20 v5 h4 v-5"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M21,25 v10 h6 v-10"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M22,26 v8 h4 v-8"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M29,35 v-24 h6 v24"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M30,34 v-22 h4 v22"/>
+      <path fill="var(--os-gray-600)" d="M37,45 v-34 h6 v34"/>
+      <path fill="var(--os-white-bg)" d="M38,45 v-33 h4 v33"/>
+      <path
+        fill="var(--os-gray-600)"
+        d="M11,20 v-1 h2 v1 M19,26 v-1 h2 v1 M27,35 v-1 h2 v1 M35,12 v-1 h2 v1"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.POPULATION_PYRAMID_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#eb6d00" d="M23,43 v-6 h22 v6"/>
-      <path fill="#ffe1c8" d="M23,42 v-4 h21 v4"/>
-      <path fill="#eb6d00" d="M23,36 v-6 h18 v6"/>
-      <path fill="#ffe1c8" d="M23,35 v-4 h17 v4"/>
-      <path fill="#eb6d00" d="M23,29 v-6 h12 v6"/>
-      <path fill="#ffe1c8" d="M23,28 v-4 h11 v4"/>
-      <path fill="#eb6d00" d="M23,22 v-6 h8 v6"/>
-      <path fill="#ffe1c8" d="M23,21 v-4 h7 v4"/>
-      <path fill="#eb6d00" d="M23,15 v-6 h4 v6"/>
-      <path fill="#ffe1c8" d="M23,14 v-4 h3 v4"/>
-
-      <path fill="#0074d9" d="M24,43 v-6 h-20 v6"/>
-      <path fill="#c4e4ff" d="M24,42 v-4 h-19 v4"/>
-      <path fill="#0074d9" d="M24,36 v-6 h-18 v6"/>
-      <path fill="#c4e4ff" d="M24,35 v-4 h-17 v4"/>
-      <path fill="#0074d9" d="M24,29 v-6 h-12 v6"/>
-      <path fill="#c4e4ff" d="M24,28 v-4 h-11 v4"/>
-      <path fill="#0074d9" d="M24,22 v-6 h-6 v6"/>
-      <path fill="#c4e4ff" d="M24,21 v-4 h-5 v4"/>
-      <path fill="#0074d9" d="M24,15 v-6 h-4 v6"/>
-      <path fill="#c4e4ff" d="M24,14 v-4 h-3 v4"/>
-
-      <path fill="#444" d="M23,2 v43 h1 v-43 M2,45 h44 v1 h-44"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M23,43 v-6 h22 v6"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M23,42 v-4 h21 v4"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M23,36 v-6 h18 v6"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M23,35 v-4 h17 v4"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M23,29 v-6 h12 v6"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M23,28 v-4 h11 v4"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M23,22 v-6 h8 v6"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M23,21 v-4 h7 v4"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M23,15 v-6 h4 v6"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M23,14 v-4 h3 v4"/>
+
+      <path fill="var(--os-chart-preview-blue-line)" d="M24,43 v-6 h-20 v6"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M24,42 v-4 h-19 v4"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M24,36 v-6 h-18 v6"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M24,35 v-4 h-17 v4"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M24,29 v-6 h-12 v6"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M24,28 v-4 h-11 v4"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M24,22 v-6 h-6 v6"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M24,21 v-4 h-5 v4"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M24,15 v-6 h-4 v6"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M24,14 v-4 h-3 v4"/>
+
+      <path fill="var(--os-gray-600)" d="M23,2 v43 h1 v-43 M2,45 h44 v1 h-44"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.RADAR_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="none" stroke="#0074d9" d="m24 16 14.27 3.36-1.93 21.63-18.22-8.9-3.63-11.18Z"/>
-      <path fill="none" stroke="#eb6d00" d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"/>
       <path
         fill="none"
-        stroke="#444"
+        stroke="var(--os-chart-preview-blue-line)"
+        d="m24 16 14.27 3.36-1.93 21.63-18.22-8.9-3.63-11.18Z"
+      />
+      <path
+        fill="none"
+        stroke="var(--os-chart-preview-orange-line)"
+        d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"
+      />
+      <path
+        fill="none"
+        stroke="var(--os-gray-600)"
         d="M24 2v22l20.92-6.8L24 24l12.93 17.8L24 24 11.07 41.8 24 24 3.08 17.2"
       />
     </svg>
@@ -3690,14 +3743,20 @@
   <t t-name="o-spreadsheet-ChartPreview.FILLED_RADAR_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill="#0074d944"
-        stroke="#0074d9"
+        fill="var(--os-chart-preview-blue-line)"
+        fill-opacity="0.25"
+        stroke="var(--os-chart-preview-blue-line)"
         d="m24 16 14.27 3.36-1.93 21.63-18.22-8.9-3.63-11.18Z"
       />
-      <path fill="#eb6d0044" stroke="#eb6d00" d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"/>
+      <path
+        fill="var(--os-chart-preview-orange-line)"
+        fill-opacity="0.25"
+        stroke="var(--os-chart-preview-orange-line)"
+        d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"
+      />
       <path
         fill="none"
-        stroke="#444"
+        stroke="var(--os-gray-600)"
         d="M24 2v22l20.92-6.8L24 24l12.93 17.8L24 24 11.07 41.8 24 24 3.08 17.2"
       />
     </svg>
@@ -3710,70 +3769,206 @@
       fill="none"
       stroke-width="0.5"
       stroke-linejoin="round">
-      <circle cx="16" cy="16" r="13" fill="#c4e4ff"/>
+      <circle cx="16" cy="16" r="13" fill="var(--os-chart-preview-blue-fill)"/>
       <path
-        stroke="#eb6d00"
-        fill="#ffe1c8"
+        stroke="var(--os-chart-preview-orange-line)"
+        fill="var(--os-chart-preview-orange-fill)"
         d="M12.225 16.293c0 6.8 4 9 5 9 3.5 0 2-5.293 3.5-6.793s5-.707 5-4.207-2-5-5-5c-5 0-8.5 1.5-8.5 7z"
       />
       <path
-        fill="#ffe1c8"
+        fill="var(--os-chart-preview-orange-fill)"
         d="M21.5 4.4c0 1.167-1.735 1.5-3 1.5-5.217 0-10.705 3.48-11.421 8.004C6.992 14.549 6.552 15 6 15H3.07 A 13 13 0 0 1 21.5 4.2
                 M3.8 20.5c.785.262 2.126 1.285 3.44 1.517.57.101 1.153.464 1.299 1.023.303 1.16.548 1.992-.239 3.58 A 13 13 0 0 1 3.8 20.5"
       />
       <path
-        stroke="#eb6d00"
+        stroke="var(--os-chart-preview-orange-line)"
         d="M21.5 4.4c0 1.167-1.735 1.5-3 1.5-5.217 0-10.705 3.48-11.421 8.004C6.992 14.549 6.552 15 6 15H3.07
                 M3.8 20.5c.785.262 2.126 1.285 3.44 1.517.57.101 1.153.464 1.299 1.023.303 1.16.548 1.992-.239 3.58"
       />
-      <circle cx="16" cy="16" r="13" stroke="#444"/>
+      <circle cx="16" cy="16" r="13" stroke="var(--os-gray-600)"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.FUNNEL_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path stroke="#0074d9" fill="#c4e4ff" d="M2.5,6.5 h44 l-5,7 h-34 l-5,-7 h1"/>
-      <path stroke="#eb6d00" fill="#ffe1c8" d="M9.5,16.5 h30 l-3,7 h-25 l-3,-7 h1"/>
-      <path stroke="#0074d9" fill="#c4e4ff" d="M12.5,26.5 h23 l-8,7 h-7 l-8,-7 h1"/>
-      <path stroke="#eb6d00" fill="#ffe1c8" d="M21.5,35.5 h5 l-2.5,7 l-2.5,-7 h1"/>
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        fill="var(--os-chart-preview-blue-fill)"
+        d="M2.5,6.5 h44 l-5,7 h-34 l-5,-7 h1"
+      />
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        fill="var(--os-chart-preview-orange-fill)"
+        d="M9.5,16.5 h30 l-3,7 h-25 l-3,-7 h1"
+      />
+      <path
+        stroke="var(--os-chart-preview-blue-line)"
+        fill="var(--os-chart-preview-blue-fill)"
+        d="M12.5,26.5 h23 l-8,7 h-7 l-8,-7 h1"
+      />
+      <path
+        stroke="var(--os-chart-preview-orange-line)"
+        fill="var(--os-chart-preview-orange-fill)"
+        d="M21.5,35.5 h5 l-2.5,7 l-2.5,-7 h1"
+      />
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.SUNBURST_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill="#ffe1c8"
-        stroke="#eb6d00"
+        fill="var(--os-chart-preview-orange-fill)"
+        stroke="var(--os-chart-preview-orange-line)"
         d="M24,12 v8A4,4,0,1,0,27.46,26 L41.32, 34 A20,20,0,0,1,8.679,36.856 L14.807,31.713 A12,12,0,0,1,24,12 M34.4,30 A12,12,0,0,1,14.807,31.713"
       />
       <path
-        fill="#c4e4ff"
-        stroke="#0074d9"
+        fill="var(--os-chart-preview-blue-fill)"
+        stroke="var(--os-chart-preview-blue-line)"
         d="M24,20 v-16 A20 20, 0, 0, 1, 41.32, 34 L27.46,26 A4,4,0,0,0,24,20 M24,12 A12,12,0,0,1,34.4,30 M33.193,16.287 L39.321,11.144 M36,24 L44,24"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-ChartPreview.TREE_MAP_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
-      <path fill="#444" d="M2,4 h44 v5 h-44"/>
-      <path fill="#444" d="M2,10 h28 v5 h-28"/>
-      <path fill="#444" d="M31,10 h15 v5 h-15"/>
-      <path fill="#0074d9" d="M2,16 h28 v14 h-28"/>
-      <path fill="#c4e4ff" d="M3,17 h26 v12 h-26"/>
-      <path fill="#0074d9" d="M2,31 h15 v12 h-15"/>
-      <path fill="#c4e4ff" d="M3,32 h13 v10 h-13"/>
-      <path fill="#0074d9" d="M18,31 h12 v12 h-12"/>
-      <path fill="#c4e4ff" d="M19,32 h10 v10 h-10"/>
-      <path fill="#eb6d00" d="M31,16 h15 v27 h-15"/>
-      <path fill="#ffe1c8" d="M32,17 h13 v25 h-13"/>
+      <path fill="var(--os-gray-600)" d="M2,4 h44 v5 h-44"/>
+      <path fill="var(--os-gray-600)" d="M2,10 h28 v5 h-28"/>
+      <path fill="var(--os-gray-600)" d="M31,10 h15 v5 h-15"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M2,16 h28 v14 h-28"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M3,17 h26 v12 h-26"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M2,31 h15 v12 h-15"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M3,32 h13 v10 h-13"/>
+      <path fill="var(--os-chart-preview-blue-line)" d="M18,31 h12 v12 h-12"/>
+      <path fill="var(--os-chart-preview-blue-fill)" d="M19,32 h10 v10 h-10"/>
+      <path fill="var(--os-chart-preview-orange-line)" d="M31,16 h15 v27 h-15"/>
+      <path fill="var(--os-chart-preview-orange-fill)" d="M32,17 h13 v25 h-13"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.CALENDAR_CHART">
+    <svg class="o-chart-preview" viewBox="0 0 48 48">
+      <path fill="var(--os-gray-600)" d="M3 3h42v42H3zh1v41h40V4H4"/>
+      <path
+        fill="var(--os-chart-preview-orange-line)"
+        d="M7 7h7v7H7m0 2h7v7H7m0 2h7v7H7m0 2h7v7H7m9-34h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m9-34h7v7h-7m0 11h7v7h-7m0 2h7v7h-7m9-34h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m0 2h7v7h-7"
+      />
+      <path
+        fill="var(--os-chart-preview-orange-fill)"
+        d="M8 8h5v5H8m0 13h5v5H8m9 4h5v5h-5m18-5h5v5h-5"
+      />
+      <path
+        fill="var(--os-chart-preview-orange-light)"
+        d="M8 17h5v5H8m9-14h5v5h-5m0 13h5v5h-5m9 4h5v5h-5m9-32h5v5h-5m0 13h5v5h-5"
+      />
+      <path fill="var(--os-white-bg)" d="M8 35h5v5H8"/>
+      <path fill="var(--os-chart-preview-orange-dark)" d="M25 16h7v7h-7"/>
     </svg>
   </t>
 
+  <t t-name="o-spreadsheet-CalendarChartDesignPanel">
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-0'" title.translate="Legend position">
+          <select
+            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
+            class="o-input o-chart-legend-position"
+            t-on-change="this.updateLegendPosition">
+            <option value="none">None</option>
+            <option value="right">Right</option>
+            <option value="left">Left</option>
+          </select>
+        </Section>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Calendar chart options">
+      <t t-set-slot="content">
+        <ColorScalePicker definition="props.definition" onUpdateColorScale.bind="onColormapChange"/>
+        <Section class="'pt-0 o-missing-value'" title.translate="Missing value color">
+          <RoundColorPicker
+            currentColor="selectedMissingValueColor"
+            onColorPicked.bind="updateMissingValueColor"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          chartId="props.chartId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-CalendarChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="1"
+        canChangeDatasetOrientation="false"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        options="this.getLabelRangeOptions()"
+        title.translate="Date range"
+      />
+
+      <Section title.translate="Fields to group by">
+        <div class="d-flex">
+          <span class="w-100">Horizontal axis</span>
+          <select
+            t-att-value="getGroupByType('horizontal')"
+            class="o-input o-horizontal-group-by"
+            t-on-change="ev => this.updateGroupBy('horizontal', ev.target.value)">
+            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
+              <option
+                t-att-selected="getGroupByType('horizontal') === groupBy.value"
+                t-att-value="groupBy.value">
+                <t t-esc="groupBy.label"/>
+              </option>
+            </t>
+          </select>
+        </div>
+        <div class="d-flex">
+          <span class="w-100">Vertical axis</span>
+          <select
+            t-att-value="getGroupByType('vertical')"
+            class="o-input o-vertical-group-by"
+            t-on-change="ev => this.updateGroupBy('vertical', ev.target.value)">
+            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
+              <option
+                t-att-selected="getGroupByType('vertical') === groupBy.value"
+                t-att-value="groupBy.value">
+                <t t-esc="groupBy.label"/>
+              </option>
+            </t>
+          </select>
+        </div>
+      </Section>
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet.TextStyler">
     <div
       class="o-chart-title-designer position-relative d-flex align-items-center"
       t-att-class="props.class">
       <ActionButton action="boldButtonAction" class="'o-hoverable-button'"/>
       <ActionButton action="italicButtonAction" class="'o-hoverable-button'"/>
-      <div class="o-divider" t-if="props.hasHorizontalAlign || props.hasVerticalAlign"/>
+      <div
+        class="o-divider border-start"
+        t-if="props.hasHorizontalAlign || props.hasVerticalAlign"
+      />
       <div class="o-dropdown position-relative" t-if="props.hasHorizontalAlign">
         <ActionButton
           action="horizontalAlignButtonAction"
@@ -3812,13 +4007,13 @@
           </div>
         </div>
       </div>
-      <div class="o-divider"/>
+      <div class="o-divider border-start"/>
       <FontSizeEditor
         currentFontSize="currentFontSize"
         onFontSizeChanged.bind="this.updateFontSize"
         class="'o-hoverable-button'"
       />
-      <div class="o-divider"/>
+      <div class="o-divider border-start"/>
       <ColorPickerWidget
         currentColor="props.style.color ?? props.defaultStyle?.color"
         toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
@@ -4044,7 +4239,8 @@
   <t t-name="o-spreadsheet-ChartHumanizeNumbers">
     <Checkbox
       name="'humanizeNumbers'"
-      label.translate="Make numbers human-readable"
+      label.translate="Use compact format"
+      title="title"
       value="props.definition.humanize ?? true"
       onChange="(humanize) => props.updateChart(this.props.chartId, { humanize })"
     />
@@ -4142,6 +4338,85 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ColorScalePicker">
+    <Section class="'pt-0 o-color-scale'" title.translate="Color Scale">
+      <div class="w-100" style="position:relative">
+        <div
+          class="color-scale-container d-flex justify-content-end"
+          t-on-click.stop="onPointerDown">
+          <span class="color-scale-label">
+            <t t-esc="currentColorScaleLabel"/>
+          </span>
+          <div
+            class="color-scale-preview w-100"
+            t-att-data-test-colorscale="selectedColorScale"
+            t-att-style="currentColorScaleStyle"
+          />
+          <span class="ms-1">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </span>
+        </div>
+        <Popover t-if="state.popoverProps" t-props="state.popoverProps">
+          <table t-ref="popoverRef" class="bg-white" t-att-style="state.popoverStyle">
+            <tr
+              class="color-scale-container custom-color-scale-container"
+              t-on-click="() => this.onColorScaleChange('custom')">
+              <td class="p-1 text-end">Custom</td>
+              <td class="w-100 p-1">
+                <div
+                  class="color-scale-preview o-checkers-background"
+                  data-test-id="custom-color-scale"
+                />
+              </td>
+            </tr>
+            <t t-foreach="colorScales" t-as="colorScale" t-key="colorScale.value">
+              <tr
+                class="color-scale-container"
+                t-on-click="() => this.onColorScaleChange(colorScale.value)"
+                t-att-title="colorScale.label">
+                <td class="p-1 text-end">
+                  <t t-esc="colorScale.label"/>
+                </td>
+                <td class="w-100 p-1">
+                  <div
+                    class="color-scale-preview"
+                    t-att-data-test-id="colorScale.className"
+                    t-att-style="colorScalePreviewStyle(colorScale.value)"
+                  />
+                </td>
+              </tr>
+            </t>
+          </table>
+        </Popover>
+      </div>
+      <div class="ps-3 mt-2">
+        <div class="o-min-color d-flex align-items-center mb-2">
+          <RoundColorPicker
+            currentColor="currentColorScale.minColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('minColor', color)"
+            disableNoColor="true"
+          />
+          <span class="ps-2">Color of minimum values</span>
+        </div>
+        <div class="o-mid-color d-flex align-items-center mb-2">
+          <RoundColorPicker
+            currentColor="currentColorScale.midColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('midColor', color)"
+          />
+          <span class="ps-2">Color of middle values</span>
+        </div>
+        <div class="o-max-color d-flex align-items-center">
+          <RoundColorPicker
+            currentColor="currentColorScale.maxColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('maxColor', color)"
+            disableNoColor="true"
+          />
+          <span class="ps-2">Color of maximum values</span>
+        </div>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet.ChartTitle">
     <Section class="'o-chart-title'" title="props.name">
       <TextInput
@@ -4174,10 +4449,45 @@
       updateStyle.bind="updateAxisTitleStyle"
       name="editor_label"
       style="axisTitleStyle"
+      placeholder.translate="Add a Title"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
   </t>
 
+  <t t-name="o-spreadsheet-BarChartDesignPanel">
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+        </Section>
+        <Section t-if="isZoomable" class="'pt-0'" title.translate="Zoom">
+          <Checkbox
+            name="'zoomable'"
+            label.translate="Show slicer"
+            value="props.definition.zoomable"
+            onChange.bind="onToggleZoom"
+            className="'mb-2'"
+          />
+        </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SeriesWithAxisDesignEditor t-props="props"/>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          chartId="props.chartId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-BarConfigPanel">
     <div>
       <Section class="'pt-0'">
@@ -4230,7 +4540,7 @@
       <div class="o-section pb-1 pt-0">
         <div class="o-section-title">Carousel Sections</div>
       </div>
-      <div class="o-carousel-preview-list overflow-auto" t-ref="previewList">
+      <div class="o-carousel-preview-list overflow-auto bg-white" t-ref="previewList">
         <t t-foreach="carouselItems" t-as="item" t-key="getItemId(item)">
           <div
             class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex align-items-center"
@@ -4458,9 +4768,49 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-NumberEditor">
+    <div class="o-dropdown" t-ref="NumberEditor">
+      <div
+        class="o-number-editor d-flex align-items-center"
+        t-att-class="props.class"
+        t-att-title="props.title"
+        t-on-click.stop="this.toggleList">
+        <input
+          type="number"
+          t-att-min="props.min"
+          t-att-max="props.max"
+          class="o-font-size o-number-input bg-transparent border-0"
+          t-on-keydown="onInputKeydown"
+          t-on-wheel.prevent.stop=""
+          t-on-click.stop="props.onFocusInput"
+          t-on-focus.stop="onInputFocused"
+          t-on-change="setValueFromInput"
+          t-ref="inputNumber"
+        />
+        <t t-esc="props.valueIcon"/>
+        <span>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+        </span>
+      </div>
+      <Popover t-if="dropdown.isOpen" t-props="popoverProps">
+        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="numberList">
+          <t t-foreach="props.valueList" t-as="value" t-key="value">
+            <div t-att-data-size="value" t-on-click="() => this.setValueFromList(value)">
+              <t t-esc="value"/>
+              <t t-esc="props.valueIcon"/>
+            </div>
+          </t>
+        </div>
+      </Popover>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Menu-Popover">
     <Popover t-if="props.menuItems" t-props="popoverProps">
-      <div t-ref="menu" class="o-menu-wrapper" t-on-mouseover="() => this.onMouseOverMainMenu()">
+      <div
+        t-ref="menu"
+        class="o-menu-wrapper bg-white"
+        t-on-mouseover="() => this.onMouseOverMainMenu()">
         <Menu t-props="menuProps"/>
       </div>
       <MenuPopover
@@ -4482,7 +4832,7 @@
   <t t-name="o-spreadsheet-Menu">
     <div
       t-ref="menu"
-      class="o-menu"
+      class="o-menu bg-white"
       t-att-style="menuStyle"
       t-on-scroll="props.onScroll"
       t-on-wheel.stop=""
@@ -4490,7 +4840,7 @@
       t-on-click.stop=""
       t-on-contextmenu.prevent="">
       <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
-        <div t-if="menuItem === 'separator'" class="o-separator"/>
+        <div t-if="menuItem === 'separator'" class="o-separator border-bottom"/>
         <t t-else="">
           <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
           <t t-set="isMenuEnabled" t-value="isEnabled(menuItem)"/>
@@ -4539,7 +4889,7 @@
 
   <t t-name="o-spreadsheet-LinkEditor">
     <div
-      class="o-link-editor"
+      class="o-link-editor bg-white rounded"
       t-on-click.stop="() => this.menu.isOpen=false"
       t-on-keydown="onKeyDown">
       <div class="o-section">
@@ -4581,7 +4931,7 @@
           <button
             t-if="!link.url"
             t-on-click.stop="openMenu"
-            class="o-special-link o-button-icon"
+            class="o-special-link o-button-icon bg-white"
             t-ref="linkEditorMenuButton">
             <t t-call="o-spreadsheet-Icon.LIST"/>
           </button>
@@ -4604,7 +4954,7 @@
   </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
-    <div class="o-link-tool d-flex align-items-center">
+    <div class="o-link-tool d-flex align-items-center bg-white rounded">
       <!-- t-key to prevent owl from re-using the previous img element when the link changes.
     The wrong/previous image would be displayed while the new one loads -->
       <img
@@ -5394,6 +5744,11 @@
       <i class="fa fa-search"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.ZOOM">
+    <div class="o-icon">
+      <i class="fa fa-search-plus"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
     <svg class="o-icon" viewBox="0 0 24 24">
       <path
@@ -5592,6 +5947,7 @@
     <div class="o-icon">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
         <path
+          fill="currentColor"
           d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
           transform="translate(0, 9) scale(0.5,0.5)"
         />
@@ -5695,9 +6051,60 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.DARK_MODE">
+    <div class="o-icon">
+      <i class="fa fa-moon-o"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-0">
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      transform="rotate(270)"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-45">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m1.95 6.879.707-.707 8.485 8.485 1.06-1.06v2.828H9.375l1.061-1.061m.706-7.778.707-.707 3.536 3.535 1.06-1.06v2.828h-2.828l1.06-1.06M4.071 4.757l6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-90">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet-Icon.ROTATION-270">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13 16h-1V4h-1.5l2-2 2 2H13M7 9H6V4H4.5l2-2 2 2H7m3 12-7-2.8V12l7-2.8.43 1.12-1.9.7v3.18l1.9.7-.43 1.12m-2.7-2.25v-2.3l-2.8 1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-315">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m6.879 16.55-.707-.707 8.485-8.485-1.06-1.06h2.828v2.828l-1.061-1.061m-7.778-.707-.707-.707 3.535-3.536-1.06-1.06h2.828v2.828l-1.06-1.06M4.757 14.429l-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
-    <div class="o-icon-picker">
+    <div class="o-icon-picker bg-white">
       <t t-foreach="iconSets" t-as="iconSet" t-key="iconSet">
         <div class="o-cf-icon-line">
           <div
@@ -5857,13 +6264,12 @@
 
   <t t-name="o-spreadsheet-RowResizer">
     <div
-      class="o-row-resizer"
+      class="o-row-resizer o-zoomable"
       t-ref="rowResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving}">
       <div
@@ -5901,13 +6307,12 @@
 
   <t t-name="o-spreadsheet-ColResizer">
     <div
-      class="o-col-resizer d-flex"
+      class="o-col-resizer d-flex o-zoomable"
       t-ref="colResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving, }">
       <div
@@ -6056,11 +6461,11 @@
 
   <t t-name="o-spreadsheet-GridOverlay">
     <div class="position-absolute" t-att-style="style">
-      <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
+      <FiguresContainer/>
     </div>
     <div
       t-ref="gridOverlay"
-      class="o-grid-overlay overflow-hidden"
+      class="o-grid-overlay overflow-hidden o-zoomable"
       t-att-class="{'o-paint-format-cursor': isPaintingFormat}"
       t-att-style="style"
       t-on-pointerdown="onPointerDown"
@@ -6071,7 +6476,6 @@
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
-        focusGrid="props.onFigureDeleted"
       />
       <t t-slot="default"/>
     </div>
@@ -6085,7 +6489,8 @@
       <button
         t-on-click="onConfirm"
         t-att-disabled="state.errorFlag"
-        class="o-button flex-grow-0 me-2">
+        class="o-button flex-grow-0 me-2"
+        tabindex="-1">
         Add
       </button>
       <input
@@ -6097,6 +6502,7 @@
         t-on-keydown.stop="onKeydown"
         t-on-pointerdown.stop=""
         t-on-input.stop="onInput"
+        tabindex="-1"
       />
       <span>more rows at the bottom</span>
       <ValidationMessages t-if="state.errorFlag" messages="errorMessages" msgType="'error'"/>
@@ -6105,7 +6511,7 @@
 
   <t t-name="o-spreadsheet-Grid">
     <div
-      class="o-grid w-100 h-100"
+      class="o-grid w-100 h-100 o-zoomable"
       tabindex="-1"
       composerFocusableElement="true"
       t-on-click="focusDefaultElement"
@@ -6119,8 +6525,6 @@
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
-        onFigureDeleted.bind="focusDefaultElement"
-        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
@@ -6168,7 +6572,7 @@
       </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
       <HorizontalScrollBar leftOffset="HEADER_WIDTH"/>
-      <div class="o-scrollbar corner"/>
+      <div class="o-scrollbar corner border-top border-start"/>
     </div>
   </t>
 
@@ -6196,7 +6600,6 @@
               t-component="figureComponent"
               figureUI="figureUI"
               isFullScreen="true"
-              onFigureDeleted="() => {}"
               t-key="figureUI.id"
             />
           </t>
@@ -6206,40 +6609,17 @@
   </t>
 
   <t t-name="o-spreadsheet-FontSizeEditor">
-    <div class="o-dropdown" t-ref="FontSizeEditor">
-      <div
-        class=" o-font-size-editor d-flex align-items-center"
-        t-att-class="props.class"
-        title="Font Size"
-        t-on-click="this.toggleFontList">
-        <input
-          type="number"
-          min="1"
-          max="400"
-          class="o-font-size o-number-input bg-transparent border-0"
-          t-on-keydown="onInputKeydown"
-          t-on-wheel.prevent.stop=""
-          t-on-click.stop="props.onFocusInput"
-          t-on-focus.stop="onInputFocused"
-          t-on-change="setSizeFromInput"
-          t-ref="inputFontSize"
-        />
-        <span>
-          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-        </span>
-      </div>
-      <Popover t-if="dropdown.isOpen" t-props="popoverProps">
-        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="fontSizeList">
-          <t t-foreach="fontSizes" t-as="fontSize" t-key="fontSize">
-            <div
-              t-esc="fontSize"
-              t-att-data-size="fontSize"
-              t-on-click="() => this.setSizeFromList(fontSize)"
-            />
-          </t>
-        </div>
-      </Popover>
-    </div>
+    <NumberEditor
+      currentValue="props.currentFontSize"
+      onValueChange="props.onFontSizeChanged"
+      class="props.class"
+      onToggle="props.onToggle"
+      onFocusInput="props.onFocusInput"
+      min="1"
+      max="400"
+      valueList="fontSizes"
+      title.translate="Font Size"
+    />
   </t>
 
   <t t-name="o-spreadsheet-FilterMenuValueList">
@@ -6261,7 +6641,7 @@
       </i>
     </div>
     <div
-      class="o-filter-menu-list d-flex flex-column"
+      class="o-filter-menu-list d-flex flex-column border"
       t-ref="filterValueList"
       t-on-click="this.clearScrolledToValue"
       t-on-scroll="this.clearScrolledToValue">
@@ -6304,8 +6684,9 @@
         name="value.toString()"
         value="this.props.isChecked"
         onChange="this.props.onClick"
-        className="'p-2 w-100 pe-auto text-truncate'"
+        className="'p-2 w-100 pe-auto'"
         label="value.toString()"
+        title="value.toString()"
       />
     </div>
   </t>
@@ -6324,6 +6705,7 @@
       criterion="state.criterion"
       onCriterionChanged.bind="onCriterionChanged"
       disableFormulas="true"
+      autofocus="true"
     />
   </t>
 
@@ -6344,7 +6726,7 @@
         </div>
       </t>
       <div class="o-filter-menu-content">
-        <div class="o-separator"/>
+        <div class="o-separator border-bottom"/>
         <SidePanelCollapsible
           isInitiallyCollapsed="filterValueType !== 'criterion'"
           title.translate="Filter by criterion">
@@ -6395,7 +6777,6 @@
             t-att-style="container.inverseViewportStyle">
             <t t-foreach="container.figures" t-as="figureUI" t-key="figureUI.id">
               <FigureComponent
-                onFigureDeleted="this.props.onFigureDeleted"
                 figureUI="figureUI"
                 style="getFigureStyle(figureUI)"
                 class="getFigureClass(figureUI)"
@@ -6542,7 +6923,6 @@
         <t
           t-component="figureRegistry.get(props.figureUI.tag).Component"
           t-key="props.figureUI.id"
-          onFigureDeleted="props.onFigureDeleted"
           figureUI="props.figureUI"
           editFigureStyle.bind="editWrapperStyle"
           openContextMenu.bind="openContextMenu"
@@ -6679,21 +7059,24 @@
       <div t-att-style="containerStyle">
         <canvas class="o-figure-canvas w-100 h-100" t-ref="graphContainer"/>
       </div>
-      <div t-if="sliceable" class="o-master-chart-container m-0">
+      <div
+        t-if="sliceable"
+        class="o-master-chart-container m-0"
+        t-att-style="masterChartContainerStyle">
         <canvas
           class="o-figure-canvas o-master-chart-canvas w-100 h-100"
           t-ref="masterChartCanvas"
-          t-on-dblclick="onDoubleClickInMasterChart"
-          t-on-pointerdown="onPointerDownInMasterChart"
-          t-on-pointermove="onPointerMoveInMasterChart"
-          t-on-mouseleave="onMouseLeaveMasterChart"
+          t-on-dblclick="onMasterChartDoubleClick"
+          t-on-pointerdown="onMasterChartPointerDown"
+          t-on-pointermove="onMasterChartPointerMove"
+          t-on-mouseleave="onMasterChartMouseLeave"
         />
       </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-ErrorToolTip">
-    <div class="o-error-tooltip">
+    <div class="o-error-tooltip bg-white">
       <t t-if="evaluationError">
         <div class="o-error-tooltip-title fw-bold text-danger">Error</div>
         <div class="o-error-tooltip-message">
@@ -6724,8 +7107,7 @@
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions"
-          getGridSize="props.getGridSize">
+          gridOverlayDimensions="gridOverlayDimensions">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"
@@ -6770,7 +7152,7 @@
   <t t-name="o-spreadsheet-TopBarComposer">
     <div class="o-topbar-composer-container w-100">
       <div
-        class="o-topbar-composer position-relative bg-white user-select-text d-flex"
+        class="o-topbar-composer position-relative bg-white user-select-text d-flex border"
         t-att-class="{
           'o-topbar-composer-readonly': env.model.getters.isReadonly(),
           'o-topbar-composer-active': focus !== 'inactive',
@@ -6793,7 +7175,7 @@
 
   <t t-name="o-spreadsheet-StandaloneComposer">
     <div
-      class="o-standalone-composer"
+      class="o-standalone-composer border-bottom"
       t-on-click.stop=""
       t-att-class="containerClass"
       t-att-title="props.title">
@@ -6810,7 +7192,7 @@
 
   <t t-name="o-spreadsheet-SpeechBubble">
     <t t-portal="'.o-spreadsheet'">
-      <div class="o-speech-bubble position-absolute px-3" t-ref="bubble">
+      <div class="o-speech-bubble position-absolute px-3 border" t-ref="bubble">
         <div class="o-speech-content text-truncate pb-1" t-esc="props.content"/>
       </div>
     </t>
@@ -6818,7 +7200,7 @@
 
   <t t-name="o-spreadsheet-GridComposer">
     <div
-      class="o-cell-reference"
+      class="o-cell-reference rounded"
       t-if="shouldDisplayCellReference"
       t-att-style="cellReferenceStyle"
       t-esc="cellReference"
@@ -6829,30 +7211,28 @@
   </t>
 
   <t t-name="o-spreadsheet-FunctionDescriptionProvider">
-    <div class="o-formula-assistant-container user-select-none shadow">
+    <div
+      class="o-formula-assistant-container shadow"
+      tabindex="-1"
+      t-on-pointerdown=""
+      t-on-pointerup.stop=""
+      t-on-keydown.stop=""
+      t-on-click.stop="">
       <t t-set="context" t-value="getContext()"/>
-      <div class="o-formula-assistant" t-if="context.functionDescription.name">
+      <div class="o-formula-assistant bg-white" t-if="context.functionDescription.name">
         <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
           <div>
-            <span t-esc="context.functionDescription.name"/>
-            (
-            <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-              <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
+            <t t-foreach="formulaHeaderContent" t-as="part" t-key="part_index">
               <span
-                t-att-class="{ 'o-formula-assistant-focus': context.argsToFocus.includes(arg_index) }">
-                <span>
-                  <span t-if="arg.optional || arg.repeating || arg.default">[</span>
-                  <span t-esc="arg.name"/>
-                  <span t-if="arg.repeating">, ...</span>
-                  <span t-if="arg.optional || arg.repeating || arg.default">]</span>
-                </span>
-              </span>
+                t-esc="part.content"
+                t-att-class="part.focused ? 'o-formula-assistant-focus' : ''"
+              />
             </t>
-            )
           </div>
           <div
             class="collapsor px-2 d-flex align-items-center rounded"
             t-att-class="state.isCollapsed ? 'collapsed' : ''"
+            t-on-pointerdown.prevent=""
             t-on-click="() => this.toggle()">
             <span class="collapsor-arrow d-inline-block">
               <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
@@ -6861,27 +7241,34 @@
         </div>
 
         <Collapse isCollapsed="state.isCollapsed">
-          <div class="o-formula-assistant-core pb-3 m-3">
+          <div class="o-formula-assistant-core pb-3 m-3 border-bottom">
             <div class="o-formula-assistant-gray">ABOUT</div>
             <div t-esc="context.functionDescription.description"/>
           </div>
 
+          <t
+            t-set="firstRepeatableGroupOptional"
+            t-value="context.functionDescription.args.some(arg => arg.repeating and arg.optional)"
+          />
+
           <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
             <div
               class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
-              t-att-class="{
-                  'o-formula-assistant-gray': context.argsToFocus.length > 0,
-                  'o-formula-assistant-focus': context.argsToFocus.includes(arg_index),
-                }">
-              <div>
-                <span t-esc="arg.name"/>
+              t-att-class="{'o-formula-assistant-gray': context.argsToFocus.length > 0}">
+              <div
+                t-att-class="{'o-formula-assistant-focus': context.argsToFocus.includes(arg_index)}">
+                <span t-if="arg.repeating">
+                  <span t-esc="arg.name + (context.repeatingArgGroupIndex + 1)"/>
+                </span>
+                <span t-else="">
+                  <span t-esc="arg.name"/>
+                </span>
                 <span
-                  t-if="arg.optional || arg.repeating || arg.default ">&#xA0;- [optional]&#xA0;</span>
+                  t-if="arg.optional || arg.default || (arg.repeating and (firstRepeatableGroupOptional or context.repeatingArgGroupIndex > 0))">&#xA0;- [optional]&#xA0;</span>
                 <span t-if="arg.default">
                   <span>default:&#xA0;</span>
                   <t t-esc="arg.defaultValue"/>
                 </span>
-                <span t-if="arg.repeating">repeatable</span>
               </div>
               <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
             </div>
@@ -6892,7 +7279,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Composer">
-    <div class="o-composer-container w-100 h-100">
+    <div class="o-composer-container w-100 h-100" t-ref="composerContainer">
       <t t-set="autoCompleteProposals" t-value="props.composerStore.autoCompleteProposals"/>
       <t t-set="canBeToggled" t-value="props.composerStore.canBeToggled"/>
       <t
@@ -6904,10 +7291,9 @@
           t-if="props.focus !== 'inactive' and assistantIsAvailable and canBeToggled and assistant.forcedClosed"
           role="button"
           title="Show formula help"
-          t-on-click="openAssistant"
+          t-on-click.stop="openAssistant"
           t-on-pointerdown.prevent.stop=""
-          t-on-click.prevent.stop=""
-          t-on-pointerup.prevent.stop=""
+          t-on-pointerup.stop=""
           class="fa-stack position-absolute translate-middle force-open-assistant fs-4">
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-question-circle fa-stack-1x"/>
@@ -6943,22 +7329,24 @@
         t-att-style="assistantContainerStyle"
         t-if="props.focus !== 'inactive' and assistantIsAvailable and !(canBeToggled and assistant.forcedClosed)"
         t-on-wheel.stop=""
-        t-on-pointerdown.prevent.stop=""
-        t-on-pointerup.prevent.stop=""
-        t-on-click.prevent.stop="">
+        t-on-pointerdown.stop=""
+        t-on-pointerup.stop=""
+        t-on-click.stop="">
         <span
           t-if="canBeToggled and !assistant.forcedClosed"
           role="button"
           t-on-click="closeAssistant"
+          t-on-pointerdown.prevent.stop=""
           class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-times-circle fa-stack-1x text-muted"/>
+          <i class="fa fa-times-circle fa-stack-1x"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="assistantStyle">
           <FunctionDescriptionProvider
             t-if="functionDescriptionState.showDescription"
             functionDescription="functionDescriptionState.functionDescription"
             argsToFocus="functionDescriptionState.argsToFocus"
+            repeatingArgGroupIndex="functionDescriptionState.repeatingArgGroupIndex"
           />
           <div
             t-if="functionDescriptionState.showDescription and autoCompleteProposals.length"
@@ -6984,8 +7372,9 @@
   <t t-name="o-spreadsheet-TextValueProvider">
     <div
       t-ref="autoCompleteList"
+      t-on-pointerdown.prevent=""
       t-att-class="{
-          'o-autocomplete-dropdown': props.proposals.length}">
+          'o-autocomplete-dropdown bg-white': props.proposals.length}">
       <t t-foreach="props.proposals" t-as="proposal" t-key="proposal.text + proposal_index">
         <div
           class="d-flex flex-column text-start"
@@ -7038,7 +7427,7 @@
 
   <t t-name="o-spreadsheet-ColorPicker">
     <Popover t-props="popoverProps">
-      <div class="o-color-picker" t-on-click.stop="" t-att-style="colorPickerStyle">
+      <div class="o-color-picker bg-white" t-on-click.stop="" t-att-style="colorPickerStyle">
         <div class="o-color-picker-section-name">Standard</div>
         <div class="colors-grid">
           <div
@@ -7057,14 +7446,14 @@
             </div>
           </div>
         </div>
-        <div class="o-separator"/>
+        <div class="o-separator border-bottom"/>
         <div
           class="o-color-picker-section-name o-color-picker-toggler"
           t-on-click="toggleColorPicker">
           <span>Custom</span>
         </div>
         <div class="colors-grid o-color-picker-toggler" t-on-click.stop="toggleColorPicker">
-          <div class="o-color-picker-line-item o-color-picker-toggler-button">
+          <div class="o-color-picker-line-item bg-white o-color-picker-toggler-button">
             <div class="o-color-picker-toggler-sign">
               <t t-call="o-spreadsheet-Icon.PLUS"/>
             </div>
@@ -7096,7 +7485,7 @@
             <div class="magnifier pe-none" t-att-style="pointerStyle"/>
           </div>
           <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
-            <div class="o-hue-picker" t-on-click.stop=""/>
+            <div class="o-hue-picker border rounded" t-on-click.stop=""/>
             <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
               <t t-call="o-spreadsheet-Icon.CARET_UP"/>
             </div>
@@ -7104,16 +7493,17 @@
           <div class="o-custom-input-preview">
             <input
               type="text"
+              class="border rounded"
               t-att-class="{'o-wrong-color': !isHexColorInputValid }"
               t-on-click.stop=""
               t-att-value="state.customHexColor"
               t-on-input="setHexColor"
             />
-            <div class="o-color-preview" t-att-style="colorPreviewStyle"/>
+            <div class="o-color-preview border rounded" t-att-style="colorPreviewStyle"/>
           </div>
           <div class="o-custom-input-buttons">
             <button
-              class="o-add-button"
+              class="o-add-button border rounded"
               t-att-class="{'o-disabled': !state.customHexColor or !isHexColorInputValid}"
               t-on-click.stop="addCustomColor">
               Add
@@ -7121,9 +7511,9 @@
           </div>
         </div>
         <t t-if="!props.disableNoColor">
-          <div class="o-separator"/>
+          <div class="o-separator border-bottom"/>
           <div class="o-buttons">
-            <button t-on-click="resetColor" class="o-cancel">No Color</button>
+            <button t-on-click="resetColor" class="o-cancel border rounded">No Color</button>
           </div>
         </t>
       </div>
@@ -7136,7 +7526,7 @@
 
   <t t-name="o-spreadsheet-BottomBar">
     <div
-      class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden"
+      class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden border-top"
       t-on-click="props.onClick"
       t-ref="bottomBar"
       t-on-contextmenu.prevent="">
@@ -7248,13 +7638,14 @@
   <t t-name="o-spreadsheet-BottomBarSheet">
     <Ripple>
       <div
-        class="o-sheet d-flex align-items-center user-select-none text-nowrap "
+        class="o-sheet d-flex align-items-center user-select-none text-nowrap border-start border-end"
         tabindex="-1"
         composerFocusableElement="true"
         t-on-pointerdown="(ev) => this.onMouseDown(ev)"
         t-on-click="onClick"
         t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
+        t-key="sheetName"
         t-att-style="props.style"
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"
@@ -7321,7 +7712,7 @@
     <t t-set="border_color">Border Color</t>
     <Popover t-props="popoverProps">
       <div
-        class="d-flex o-border-selector"
+        class="d-flex o-border-selector bg-white"
         t-on-click.stop=""
         t-att-class="props.class ? props.class : ''">
         <div class="o-border-selector-section">
@@ -7342,7 +7733,7 @@
             </span>
           </div>
         </div>
-        <div class="o-divider"/>
+        <div class="o-divider border-end"/>
         <div class="o-border-selector-section">
           <div
             class="m-0 p-0 d-flex align-items-center justify-content-center o-with-color o-hoverable-button"
@@ -7370,7 +7761,7 @@
             <Popover
               t-props="lineStylePickerPopoverProps"
               t-if="state.activeTool === 'borderTypeTool'">
-              <div class="o-border-style-dropdown">
+              <div class="o-border-style-dropdown bg-white">
                 <t t-foreach="borderStyles" t-as="borderStyle" t-key="borderStyle">
                   <div
                     t-att-title="borderStyle"