npm - @odoo/o-spreadsheet - Versions diffs - 19.1.0-alpha.11 → 19.1.0-alpha.13 - Mend

@odoo/o-spreadsheet 19.1.0-alpha.11 → 19.1.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/o-spreadsheet-engine.d.ts +37 -21
package/dist/o-spreadsheet-engine.esm.js +187 -84
package/dist/o-spreadsheet-engine.iife.js +187 -84
package/dist/o-spreadsheet-engine.min.iife.js +312 -312
package/dist/o-spreadsheet.d.ts +353 -713
package/dist/o_spreadsheet.esm.js +29962 -19935
package/dist/o_spreadsheet.iife.js +29963 -19936
package/dist/o_spreadsheet.min.iife.js +335 -317
package/dist/o_spreadsheet.xml +689 -393
package/package.json +2 -2

package/dist/o_spreadsheet.xml CHANGED Viewed

@@ -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.11
- @date 2025-11-03T12:35:22.290Z
- @hash d9230f3
+ @version 19.1.0-alpha.13
+ @date 2025-11-24T07:54:06.099Z
+ @hash e232982
 -->
 <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,7 +146,7 @@
           </t>
           <div
             t-if="category_index &lt; state.invisibleToolsCategories.length-1"
-            class="o-topbar-divider"
+            class="o-topbar-divider border-end"
           />
         </t>
       </div>
@@ -206,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"/>
@@ -231,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">
@@ -256,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"
@@ -297,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">
@@ -313,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
@@ -327,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>
@@ -369,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()">
@@ -411,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
@@ -443,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"/>
@@ -690,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"
@@ -735,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"
@@ -774,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"/>
@@ -972,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>
@@ -1042,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"
@@ -1066,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"
@@ -1209,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"/>
               =
@@ -1321,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">
@@ -1354,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>
@@ -1439,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">
@@ -1583,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"/>
@@ -1646,87 +1731,6 @@
     </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] || '']"
@@ -1920,7 +1924,7 @@
   <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 border-bottom"
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
@@ -1932,7 +1936,8 @@
           <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">
+          <div
+            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 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}}"/>
@@ -1941,7 +1946,7 @@
         <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">
+            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 bg-white border">
             123
           </div>
         </t>
@@ -1970,7 +1975,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"
@@ -1993,7 +1998,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>
@@ -2076,7 +2081,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>
@@ -2191,7 +2196,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>
@@ -2270,7 +2275,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'}};
@@ -2344,7 +2349,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)"
@@ -2372,7 +2377,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"
@@ -2396,6 +2401,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'}"
@@ -2463,7 +2469,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"
@@ -2471,7 +2477,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>
@@ -2964,7 +2970,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
@@ -3124,45 +3130,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
@@ -3471,7 +3442,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]">
@@ -3499,148 +3470,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">
@@ -3648,9 +3663,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">
@@ -3658,61 +3673,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>
@@ -3720,14 +3746,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>
@@ -3740,70 +3772,203 @@
       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="#444" d="M3 3h42v42H3zh1v41h40V4H4"/>
+      <path
+        fill="#eb6d00"
+        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="#ffe1c8" d="M8 8h5v5H8m0 13h5v5H8m9 4h5v5h-5m18-5h5v5h-5"/>
+      <path
+        fill="#FFA85C"
+        d="M8 17h5v5H8m9-14h5v5h-5m0 13h5v5h-5m9 4h5v5h-5m9-32h5v5h-5m0 13h5v5h-5"
+      />
+      <path fill="#fff" d="M8 35h5v5H8"/>
+      <path fill="#A34C00" 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"
@@ -3842,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)"
@@ -4173,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
@@ -4205,6 +4449,7 @@
       updateStyle.bind="updateAxisTitleStyle"
       name="editor_label"
       style="axisTitleStyle"
+      placeholder.translate="Add a Title"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
   </t>
@@ -4261,7 +4506,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"
@@ -4528,7 +4773,10 @@
   <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
@@ -4550,7 +4798,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=""
@@ -4558,7 +4806,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)"/>
@@ -4607,7 +4855,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">
@@ -4649,7 +4897,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>
@@ -4672,7 +4920,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
@@ -5665,6 +5913,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)"
         />
@@ -5768,9 +6017,54 @@
       />
     </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"
+      />
+    </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"
+      />
+    </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"
+      />
+    </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"
+      />
+    </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"
+      />
+    </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
@@ -6241,7 +6535,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>
@@ -6311,7 +6605,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">
@@ -6354,8 +6648,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>
@@ -6395,7 +6690,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">
@@ -6744,7 +7039,7 @@
   </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">
@@ -6821,7 +7116,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',
@@ -6844,7 +7139,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">
@@ -6861,7 +7156,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>
@@ -6869,7 +7164,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"
@@ -6882,7 +7177,7 @@
   <t t-name="o-spreadsheet-FunctionDescriptionProvider">
     <div class="o-formula-assistant-container user-select-none shadow">
       <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>
             <t t-foreach="formulaHeaderContent" t-as="part" t-key="part_index">
@@ -6903,7 +7198,7 @@
         </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>
@@ -7001,7 +7296,7 @@
           t-on-click="closeAssistant"
           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
@@ -7035,7 +7330,7 @@
     <div
       t-ref="autoCompleteList"
       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"
@@ -7088,7 +7383,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
@@ -7107,14 +7402,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>
@@ -7146,7 +7441,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>
@@ -7154,16 +7449,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
@@ -7171,9 +7467,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>
@@ -7186,7 +7482,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="">
@@ -7298,7 +7594,7 @@
   <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)"
@@ -7371,7 +7667,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">
@@ -7392,7 +7688,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"
@@ -7420,7 +7716,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"