@odoo/o-spreadsheet 19.1.0-alpha.11 → 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.11
- @date 2025-11-03T12:35:22.290Z
- @hash d9230f3
+ @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"
@@ -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"/>
@@ -248,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">
@@ -297,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">
@@ -369,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()">
@@ -411,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
@@ -690,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"
@@ -735,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"
@@ -972,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>
@@ -1321,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">
@@ -1354,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>
@@ -1445,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>
@@ -1932,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}}"/>
@@ -1941,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>
@@ -2191,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>
@@ -2463,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"
@@ -2471,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>
 
@@ -3471,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]">
@@ -3499,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">
@@ -3648,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">
@@ -3658,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>
@@ -3720,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>
@@ -3740,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>
 
@@ -4205,6 +4283,7 @@
       updateStyle.bind="updateAxisTitleStyle"
       name="editor_label"
       style="axisTitleStyle"
+      placeholder.translate="Add a Title"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
   </t>
@@ -4261,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"
@@ -4528,7 +4607,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 +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=""
@@ -4607,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">
@@ -4649,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>
@@ -4672,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
@@ -5665,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)"
         />
@@ -5768,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
@@ -6354,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>
@@ -6744,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">
@@ -6882,7 +6971,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">
@@ -7001,7 +7090,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 +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"
@@ -7088,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
@@ -7114,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>
@@ -7371,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">
@@ -7420,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"