@odoo/o-spreadsheet 19.1.0-alpha.10 → 19.1.0-alpha.12

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.10
- @date 2025-10-30T12:27:22.089Z
- @hash d0b65e9
+ @version 19.1.0-alpha.12
+ @date 2025-11-12T14:18:00.954Z
+ @hash 6fefc9c
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -29,7 +29,7 @@
 
   <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">
         <!-- Menus -->
@@ -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">
         <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"
@@ -153,6 +153,21 @@
     </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"/>
@@ -233,7 +248,7 @@
   <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">
@@ -282,7 +297,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"
         t-if="isStyleEditable"
         t-on-click="this.editTableStyle"
         title="Edit custom table style">
@@ -354,7 +369,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()">
@@ -396,7 +411,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">
           <div class="w-100" t-ref="bottombarComposer">
             <Composer t-props="composerProps"/>
             <span
@@ -675,7 +690,7 @@
   </t>
 
   <t t-name="o-spreadsheet-SidePanelExtended">
-    <div class="o-sidePanel h-100">
+    <div class="o-sidePanel h-100 bg-white">
       <div class="o-sidePanelHeader d-flex align-items-center justify-content-between">
         <div
           t-if="props.onToggleCollapsePanel"
@@ -720,7 +735,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"
@@ -957,24 +974,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>
@@ -1306,7 +1321,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 bg-white"
       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 +1354,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>
@@ -1430,7 +1445,7 @@
         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">
+        class="w-100 d-flex align-items-center border-bottom format-preview bg-white">
         <span class="ms-3 check-icon">
           <t t-if="action.isActive(env)" t-call="o-spreadsheet-Icon.CHECK"/>
         </span>
@@ -1917,7 +1932,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">
             <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}}"/>
@@ -1926,7 +1942,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">
             123
           </div>
         </t>
@@ -2176,7 +2192,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>
@@ -2448,7 +2464,7 @@
       t-att-class="{'text-muted': props.disabled }"
       t-attf-class="{{props.className}}">
       <input
-        class="me-2"
+        class="me-2 flex-shrink-0"
         type="checkbox"
         t-att-disabled="props.disabled"
         t-att-name="props.name"
@@ -2456,7 +2472,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>
 
@@ -3456,7 +3472,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]">
@@ -3484,148 +3500,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">
@@ -3633,9 +3693,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">
@@ -3643,61 +3703,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>
@@ -3705,14 +3776,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>
@@ -3725,60 +3802,76 @@
       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>
 
@@ -4190,6 +4283,7 @@
       updateStyle.bind="updateAxisTitleStyle"
       name="editor_label"
       style="axisTitleStyle"
+      placeholder.translate="Add a Title"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
   </t>
@@ -4246,7 +4340,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"
@@ -4474,9 +4568,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="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
@@ -4498,7 +4632,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=""
@@ -4555,7 +4689,7 @@
 
   <t t-name="o-spreadsheet-LinkEditor">
     <div
-      class="o-link-editor"
+      class="o-link-editor bg-white"
       t-on-click.stop="() => this.menu.isOpen=false"
       t-on-keydown="onKeyDown">
       <div class="o-section">
@@ -4597,7 +4731,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>
@@ -4620,7 +4754,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">
       <!-- 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
@@ -5410,6 +5544,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
@@ -5608,6 +5747,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)"
         />
@@ -5711,9 +5851,14 @@
       />
     </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-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
@@ -5873,7 +6018,7 @@
 
   <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"
@@ -5917,7 +6062,7 @@
 
   <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"
@@ -6076,7 +6221,7 @@
     </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"
@@ -6121,7 +6266,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"
@@ -6222,40 +6367,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">
@@ -6320,8 +6442,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>
@@ -6710,7 +6833,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">
@@ -6848,24 +6971,15 @@
   <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>
-            <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"
@@ -6883,22 +6997,29 @@
             <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>
@@ -6969,13 +7090,14 @@
           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
             t-if="functionDescriptionState.showDescription"
             functionDescription="functionDescriptionState.functionDescription"
             argsToFocus="functionDescriptionState.argsToFocus"
+            repeatingArgGroupIndex="functionDescriptionState.repeatingArgGroupIndex"
           />
           <div
             t-if="functionDescriptionState.showDescription and autoCompleteProposals.length"
@@ -7002,7 +7124,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"
@@ -7055,7 +7177,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
@@ -7081,7 +7203,7 @@
           <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>
@@ -7338,7 +7460,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">
@@ -7387,7 +7509,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"