@odoo/o-spreadsheet 19.3.2 → 19.4.0-alpha.4

package/dist/o_spreadsheet.css

@@ -2,9 +2,9 @@
 /*
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.3.2
- * @date 2026-05-11T13:52:26.747Z
- * @hash 14395f7
+ * @version 19.4.0-alpha.4
+ * @date 2026-05-11T13:50:07.806Z
+ * @hash 4f00b68
  */
 :root {
   --os-gray-100: light-dark(#f9fafb, #1b1d26);
@@ -20,7 +20,7 @@
   --os-white: light-dark(#ffffff, #000000);
   --os-black: light-dark(#000000, #ffffff);
   --os-white-bg: light-dark(#ffffff, var(--os-gray-200));
-  --os-popover-bg: light-dark(#ffffff, var(--os-gray-300));
+  --os-popover-bg: light-dark(#ffffff, var(--os-gray-200));
 
   --os-default-font: "Roboto", "Arial";
   --os-default-font-size: 10px;
@@ -56,7 +56,11 @@
   --os-background-gray-color: light-dark(#f5f5f5, var(--os-white-bg));
   --os-background-gray-color-hover: light-dark(rgba(0, 0, 0, 0.08), #ffffff40);
   --os-frozen-pane-header-border-color: #bcbcbc; /* FROZEN_PANE_HEADER_BORDER_COLOR */
-  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-200));
+  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-400));
+  --os-canvas-border-color: light-dark(
+    #e2e3e3,
+    var(--os-gray-800)
+  ); /* CANVAS_BORDER_COLOR: Dark mode color will be inverted */
   --os-green-arrow-color: #6aa84f; /* Same color as CF arrow icon */
   --os-red-arrow-color: #e06666; /* Same color as CF arrow icon */
   --os-active-sheet-bg: light-dark(#ffffff, var(--os-gray-300));
@@ -77,6 +81,8 @@
   --os-chart-preview-orange-dark: light-dark(#a34c00, #c96a1e);
   --os-chart-preview-blue-line: light-dark(#0074d9, #4cb3ff);
   --os-chart-preview-blue-fill: light-dark(#c4e4ff, #003e73);
+  --os-chart-preview-green-line: light-dark(#00701e, #00a82d);
+  --os-chart-preview-green-fill: light-dark(#ddffab, #385e00);
 
   --os-header-height: 26px;
   --os-header-width: 48px;
@@ -117,6 +123,7 @@
   --os-menu-separator-padding: 5px;
 
   --os-components-importance-grid: 0;
+  --os-components-importance-grid-overlay: 1;
   --os-components-importance-highlight: 5;
   --os-components-importance-header-grouping-button: 6;
   --os-components-importance-figure: 10;
@@ -454,6 +461,7 @@
     border-bottom: 3px solid var(--os-gray-500);
     border-right: 3px solid var(--os-gray-500);
     cursor: nwse-resize;
+    z-index: var(--os-components-importance-grid-overlay);
   }
 }
 
@@ -703,20 +711,21 @@
   .o-grid {
     position: relative;
     overflow: hidden;
-    background-color: var(--os-background-gray-color);
+    background-color: light-dark(var(--os-background-gray-color), #1e1f29);
     &:focus {
       outline: none;
     }
 
     > canvas {
       box-sizing: content-box;
-      border-bottom: 1px solid var(--os-grid-border-color);
-      border-right: 1px solid var(--os-grid-border-color);
+      border-bottom: 1px solid var(--os-canvas-border-color);
+      border-right: 1px solid var(--os-canvas-border-color);
     }
 
     .o-grid-overlay {
       position: absolute;
       outline: none;
+      z-index: var(--os-components-importance-grid-overlay);
     }
   }
 
@@ -801,6 +810,11 @@
   .o-checkers-background {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path fill='#d9d9d9' d='M5 5h5v5H5zH0V0h5'/></svg>");
   }
+  &.dark {
+    .os-theme-dependant {
+      filter: var(--os-dark-mode-filter);
+    }
+  }
 }
 
 /* Originates from src/components/small_bottom_bar/small_bottom_bar.css */
@@ -1174,6 +1188,22 @@
   }
 }
 
+/* Originates from src/components/side_panel/perf_profile/perf_profile_panel.css */
+.o-spreadsheet {
+  .o-perf-range-entry {
+    cursor: pointer;
+  }
+  .o-perf-bar {
+    background-color: color-mix(in srgb, var(--os-link-color) 25%, transparent);
+  }
+  .o-perf-range-entry:hover .o-perf-bar {
+    background-color: color-mix(in srgb, var(--os-link-color) 35%, transparent);
+  }
+  .o-perf-entry-selected {
+    background-color: color-mix(in srgb, var(--os-link-color) 10%, transparent);
+  }
+}
+
 /* Originates from src/components/side_panel/named_ranges_panel/named_range_preview/named_range_preview.css */
 .o-spreadsheet {
   .o-sidePanel {
@@ -2172,7 +2202,7 @@
 
 /* Originates from src/components/highlight/highlight/highlight.css */
 .o-spreadsheet {
-  .o-highlight {
+  .o-highlight > * {
     z-index: var(--os-components-importance-highlight);
   }
 }
@@ -3090,11 +3120,11 @@
     }
 
     .o-color-picker-button {
-      > span {
-        border-bottom: 4px solid;
+      > div {
         height: 20px;
-        margin-top: 2px;
-        display: block;
+      }
+      .o-colored-border {
+        border-bottom: 4px solid;
       }
       &[disabled] {
         pointer-events: none;
@@ -3143,7 +3173,7 @@
       height: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
       margin: 0px;
       border-radius: 50px;
-      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), transparent);
+      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), #c0c0c0);
       padding: 0px;
       font-size: 16px;
       &:hover {
@@ -3194,7 +3224,7 @@
         z-index: 2;
       }
       .saturation {
-        background: linear-gradient(to right, var(--os-white) 0%, transparent 100%);
+        background: linear-gradient(to right, #fff 0%, transparent 100%);
       }
       .lightness {
         background: linear-gradient(to top, #000 0%, transparent 100%);
@@ -3478,6 +3508,7 @@
     position: absolute;
     height: var(--os-autofill-edge-length);
     width: var(--os-autofill-edge-length);
+    z-index: var(--os-components-importance-grid-overlay);
     &:hover {
       cursor: crosshair;
     }