From 414f05640a1cca2da1c204046613b9c6156605b5 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Wed, 22 Oct 2025 13:36:28 +0200 Subject: [PATCH 1/3] [FIX] demo: log something when catching global errors We have a external listener listening on `window.error`, but we don't log anything when catching an error. Task: 5082659 --- demo/main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/demo/main.js b/demo/main.js index 4b75fa36fb..338d075578 100644 --- a/demo/main.js +++ b/demo/main.js @@ -215,7 +215,10 @@ class Demo extends Component { useExternalListener(window, "beforeunload", this.leaveCollaborativeSession.bind(this)); useExternalListener(window, "unhandledrejection", this.notifyError.bind(this)); - useExternalListener(window, "error", this.notifyError.bind(this)); + useExternalListener(window, "error", (ev) => { + console.error("Global error caught: ", ev.error || ev.message); + this.notifyError(); + }); onWillStart(() => this.initiateConnection()); From c707bdba511f141fb6dd778b3b9261082d897011 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Wed, 22 Oct 2025 10:39:30 +0200 Subject: [PATCH 2/3] [REF] composer: use opacity rather than color alpha For the dark mode, we will start using colors using `light-dark()` CSS variables. Those colors do not work with the `toHex` method. To prepare for this change: - compare raw color string in content_editable_helper instead of hex value - use opacity style rather then changing the color alpha value Task: 5082659 --- src/components/composer/composer/composer.ts | 10 ++++------ .../composer/content_editable_helper.ts | 13 +++++++++---- tests/composer/composer_component.test.ts | 18 ++++++++++++++++++ 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts index 02cdae57a4..64c68070ee 100644 --- a/src/components/composer/composer/composer.ts +++ b/src/components/composer/composer/composer.ts @@ -1,6 +1,6 @@ import { NEWLINE, SCROLLBAR_WIDTH } from "@odoo/o-spreadsheet-engine/constants"; import { Component, onMounted, onWillUnmount, useEffect, useRef, useState } from "@odoo/owl"; -import { debounce, deepEquals, isFormula, setColorAlpha } from "../../../helpers/index"; +import { debounce, deepEquals, isFormula } from "../../../helpers/index"; import { cssPropertiesToCss } from "@odoo/o-spreadsheet-engine/components/helpers/css"; import { DEFAULT_TOKEN_COLOR } from "@odoo/o-spreadsheet-engine/constants"; @@ -43,6 +43,7 @@ export type HtmlContent = { onHover?: (rect: Rect) => void; onStopHover?: () => void; color?: Color; + opacity?: number; backgroundColor?: Color; classes?: string[]; }; @@ -635,10 +636,6 @@ export class Composer extends Component const { end, start } = this.props.composerStore.composerSelection; for (let index = 0; index < tokens.length; index++) { const token = tokens[index]; - let color = token.color || DEFAULT_TOKEN_COLOR; - if (token.isBlurred) { - color = setColorAlpha(color, 0.5); - } const classes: string[] = []; if ( token.type === "REFERENCE" && @@ -662,7 +659,8 @@ export class Composer extends Component result.push({ value: token.value, - color, + color: token.color || DEFAULT_TOKEN_COLOR, + opacity: token.isBlurred ? 0.5 : 1, classes, onHover: (rect) => this.onTokenHover(index, rect), onStopHover: () => this.onTokenHover(undefined), diff --git a/src/components/composer/content_editable_helper.ts b/src/components/composer/content_editable_helper.ts index 2ed9624ece..e584e1619c 100644 --- a/src/components/composer/content_editable_helper.ts +++ b/src/components/composer/content_editable_helper.ts @@ -1,5 +1,5 @@ import { NEWLINE } from "@odoo/o-spreadsheet-engine/constants"; -import { deepEquals, toHex } from "../../helpers"; +import { deepEquals } from "../../helpers"; import { getBoundingRectAsPOJO, getCurrentSelection, @@ -162,6 +162,9 @@ export class ContentEditableHelper { const span = document.createElement("span"); span.innerText = content.value; span.style.color = content.color || ""; + if (content.opacity !== undefined && content.opacity !== 1) { + span.style.opacity = content.opacity.toString(); + } span.addEventListener("mousemove", () => { content.onHover?.(getBoundingRectAsPOJO(span)); }); @@ -266,11 +269,13 @@ export class ContentEditableHelper { } function compareContentToSpanElement(content: HtmlContent, node: HTMLElement): boolean { - const contentColor = content.color ? toHex(content.color) : ""; - const nodeColor = node.style?.color ? toHex(node.style.color) : ""; + const contentColor = content.color || ""; + const nodeColor = node.style?.color || ""; + const nodeOpacity = node.style?.opacity || "1"; const sameColor = contentColor === nodeColor; const sameClass = deepEquals(content.classes, [...node.classList]); const sameContent = node.innerText === content.value; - return sameColor && sameClass && sameContent; + const sameOpacity = (content.opacity ?? 1).toString() === nodeOpacity; + return sameColor && sameClass && sameContent && sameOpacity; } diff --git a/tests/composer/composer_component.test.ts b/tests/composer/composer_component.test.ts index 359a4fe784..d5dabe58d0 100644 --- a/tests/composer/composer_component.test.ts +++ b/tests/composer/composer_component.test.ts @@ -1342,6 +1342,24 @@ describe("Composer blurs formula parts not affected by cursor position.", () => ]); }); + test("blurred tokens have reduced opacity", async () => { + const str = "=SUM(COS("; + await typeInComposer(str); + composerStore.changeComposerCursorSelection(str.length, str.length); + await nextTick(); + const spans = [...fixture.querySelectorAll("div.o-composer span")].map((el) => ({ + value: el.textContent || "", + opacity: el.style.opacity || "1", + })); + expect(spans).toEqual([ + { value: "=", opacity: "0.5" }, + { value: "SUM", opacity: "0.5" }, + { value: "(", opacity: "0.5" }, + { value: "COS", opacity: "1" }, + { value: "(", opacity: "1" }, + ]); + }); + describe("lighten correctly when too much parenthesis", () => { test.each([ "", From ef6090143a6d8c611247d30bb18e4c7420ab1b1e Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Wed, 22 Oct 2025 09:48:05 +0200 Subject: [PATCH 3/3] [IMP] spreadsheet: implement dark mode for UI This commit implements a dark mode for spreadsheet for the whole UI, excluding the canvas and the figures. It is mostly implemented using the `light-dark()` CSS function, which allows to define colors for both light and dark modes. The style `color-scheme: dark/light` is set on the main spreadsheet component based on its props. Some notes/limitations: - the composer token colors stay the same for dark/light mode, the colors were simply a bit tweaked to look okay in both modes. Having them change based on the mode would be hard mostly because we need to sync the token colors with the highlight colors, but the highlight are drawn on the canvas, which does not support `light-dark()`. - box-shadow colors were not changed for dark mode. Maybe they should be white instead of dark-gray, but they are not in odoo. That means that we have mostly invisible shadows in dark mode, and need to add a border to the popover to separate it from the background. Task: 5082659 --- .husky/css_check.js | 4 +- demo/main.js | 15 +- .../o-spreadsheet-engine/src/constants.ts | 2 +- .../o-spreadsheet-engine/src/helpers/color.ts | 4 +- .../border_editor/border_editor.css | 12 +- .../border_editor/border_editor.xml | 4 +- src/components/bottom_bar/bottom_bar.css | 2 +- .../bottom_bar_sheet/bottom_bar_sheet.css | 6 +- .../bottom_bar_statistic.css | 2 +- src/components/color_picker/color_picker.css | 16 +- src/components/color_picker/color_picker.xml | 4 +- .../color_picker/color_picker_widget.css | 2 +- .../autocomplete_dropdown.css | 1 - .../autocomplete_dropdown.ts | 2 +- .../autocomplete_dropdown.xml | 2 +- src/components/composer/composer/composer.css | 9 +- src/components/composer/composer/composer.xml | 2 +- .../formula_assistant/formula_assistant.css | 3 +- .../formula_assistant/formula_assistant.xml | 2 +- .../composer/grid_composer/grid_composer.css | 1 + .../composer/speech_bubble/speech_bubble.css | 4 +- .../error_tooltip/error_tooltip.css | 1 - .../error_tooltip/error_tooltip.xml | 2 +- .../chart_dashboard_menu.css | 2 +- src/components/figures/figure/figure.css | 3 + .../font_size_editor/font_size_editor.css | 2 +- src/components/icon_picker/icon_picker.css | 1 - src/components/icon_picker/icon_picker.xml | 2 +- src/components/icons/icons.xml | 6 + .../link/link_display/link_display.css | 3 +- .../link/link_display/link_display.xml | 2 +- .../link/link_editor/link_editor.css | 3 +- .../link/link_editor/link_editor.xml | 4 +- src/components/menu/menu.css | 1 - src/components/menu/menu.xml | 2 +- src/components/menu_popover/menu_popover.css | 1 - src/components/menu_popover/menu_popover.xml | 5 +- .../pivot_html_renderer.css | 4 +- src/components/popover/popover.css | 7 + .../carousel_panel/carousel_panel.css | 1 - .../carousel_panel/carousel_panel.xml | 2 +- .../chart_type_picker/chart_previews.xml | 387 +++++++++++------- .../chart_type_picker/chart_type_picker.css | 1 - .../chart_type_picker/chart_type_picker.xml | 2 +- .../components/checkbox/checkbox.css | 6 + .../radio_selection/radio_selection.css | 6 + .../cf_editor/cf_editor.css | 2 +- .../cf_editor/cf_editor.ts | 17 +- .../cf_editor/color_scale_rule_editor.xml | 2 +- .../cf_preview/cf_preview.css | 1 - .../cf_preview/cf_preview.xml | 5 +- .../custom_currency/custom_currency.css | 3 - .../data_validation/dv_preview/dv_preview.css | 2 +- .../side_panel/more_formats/more_formats.css | 3 +- .../side_panel/more_formats/more_formats.xml | 2 +- .../add_dimension_button.css | 3 - .../add_dimension_button.xml | 2 +- .../pivot_dimension/pivot_dimension.css | 5 - .../pivot_dimension/pivot_dimension.xml | 2 +- .../side_panel/side_panel/side_panel.css | 3 +- .../side_panel/side_panel/side_panel.xml | 2 +- .../small_bottom_bar/small_bottom_bar.css | 1 - .../small_bottom_bar/small_bottom_bar.xml | 2 +- src/components/spreadsheet/spreadsheet.css | 30 +- src/components/spreadsheet/spreadsheet.ts | 10 + src/components/spreadsheet/spreadsheet.xml | 2 +- .../table_style_preview.css | 1 - .../table_style_preview.xml | 2 +- .../table_styles_popover.css | 3 +- .../table_styles_popover.xml | 2 +- .../dropdown_action/dropdown_action.css | 2 - .../dropdown_action/dropdown_action.xml | 2 +- src/components/top_bar/top_bar.css | 1 - src/components/top_bar/top_bar.xml | 4 +- src/variables.css | 77 ++-- .../top_bar_component.test.ts.snap | 8 +- .../bottom_bar_component.test.ts.snap | 2 +- .../color_picker_component.test.ts.snap | 4 +- ...tocomplete_dropdown_component.test.ts.snap | 18 +- .../composer_component.test.ts.snap | 34 +- .../formula_assistant_component.test.ts.snap | 3 +- tests/composer/composer_component.test.ts | 8 +- ...al_formatting_panel_component.test.ts.snap | 4 +- .../data_validation_list_component.test.ts | 4 +- .../link_display_component.test.ts.snap | 2 +- .../context_menu_component.test.ts.snap | 2 +- .../spreadsheet_pivot_side_panel.test.ts.snap | 4 +- .../spreadsheet_pivot_side_panel.test.ts | 8 +- .../error_tooltip_component.test.ts.snap | 2 +- tests/setup/jest.setup.ts | 7 + tests/setup/jest_extend.ts | 7 +- .../spreadsheet_component.test.ts.snap | 6 +- .../spreadsheet/spreadsheet_component.test.ts | 6 + .../filter_menu_component.test.ts.snap | 2 + tests/test_helpers/dom_helper.ts | 2 +- 95 files changed, 520 insertions(+), 361 deletions(-) diff --git a/.husky/css_check.js b/.husky/css_check.js index ee8ae13e96..31bb08895a 100644 --- a/.husky/css_check.js +++ b/.husky/css_check.js @@ -21,7 +21,7 @@ for (const file of files) { content = content.replace(commentPattern, ""); // look for first level selectors const firstLevelSelectors = content.match(firstLevelSelectorPattern) || []; - if (!firstLevelSelectors.every((line) => line.startsWith(".o-spreadsheet "))) { + if (!firstLevelSelectors.every((line) => line.startsWith(".o-spreadsheet ") || line.startsWith(".o-spreadsheet."))) { faultyFiles.push(file); } } @@ -38,7 +38,7 @@ Every css selector should be encompassed within .o-spreadsheet. For example: .o-spreadsheet { ... } -or +or .o-spreadsheet .foo { ... } diff --git a/demo/main.js b/demo/main.js index 338d075578..d773832f43 100644 --- a/demo/main.js +++ b/demo/main.js @@ -70,7 +70,7 @@ let start; class Demo extends Component { setup() { - this.state = useState({ key: 0, displayHeader: false }); + this.state = useState({ key: 0, displayHeader: false, colorScheme: "light" }); this.stateUpdateMessages = []; this.client = { id: uuidGenerator.uuidv4(), @@ -108,6 +108,15 @@ class Demo extends Component { icon: "o-spreadsheet-Icon.OPEN_DASHBOARD", }); + topbarMenuRegistry.addChild("dark_mode", ["file"], { + name: "Toggle dark mode", + sequence: 12.5, + isReadonlyAllowed: true, + execute: () => + (this.state.colorScheme = this.state.colorScheme === "dark" ? "light" : "dark"), + icon: "o-spreadsheet-Icon.DARK_MODE", + }); + topbarMenuRegistry.addChild("read_write", ["file"], { name: "Open with write access", sequence: 13, @@ -334,11 +343,11 @@ Demo.template = xml/* xml */ `
A header
- +
- +
`; Demo.components = { Spreadsheet }; diff --git a/packages/o-spreadsheet-engine/src/constants.ts b/packages/o-spreadsheet-engine/src/constants.ts index ab440f861f..5724c6af88 100644 --- a/packages/o-spreadsheet-engine/src/constants.ts +++ b/packages/o-spreadsheet-engine/src/constants.ts @@ -277,7 +277,7 @@ export const DEFAULT_CAROUSEL_TITLE_STYLE: ChartStyle = { color: TEXT_BODY, }; -export const DEFAULT_TOKEN_COLOR: Color = "#000000"; +export const DEFAULT_TOKEN_COLOR: Color = "light-dark(#000000, #ffffff)"; const functionColor = DEFAULT_TOKEN_COLOR; const operatorColor = "#3da4ab"; diff --git a/packages/o-spreadsheet-engine/src/helpers/color.ts b/packages/o-spreadsheet-engine/src/helpers/color.ts index 6518f4e8c7..c4914c09ac 100644 --- a/packages/o-spreadsheet-engine/src/helpers/color.ts +++ b/packages/o-spreadsheet-engine/src/helpers/color.ts @@ -15,12 +15,10 @@ export const colors = [ "#00a3a3", "#f012be", "#3d9970", - "#111111", "#62A300", "#ff4136", "#949494", - "#85144b", - "#001f3f", + "#ff5c9d", ]; /* diff --git a/src/components/border_editor/border_editor.css b/src/components/border_editor/border_editor.css index 3c0df1f59c..33cd1715d2 100644 --- a/src/components/border_editor/border_editor.css +++ b/src/components/border_editor/border_editor.css @@ -1,7 +1,6 @@ .o-spreadsheet { .o-border-selector { padding: 4px; - background-color: white; .o-divider { border-right: 1px solid var(--os-gray-300); @@ -30,7 +29,6 @@ } .o-border-style-dropdown { - background: #ffffff; padding: 4px; .o-style-preview { margin: 7px 5px 7px 5px; @@ -38,19 +36,19 @@ height: 5px; } .o-style-thin { - border-bottom: 1px solid #000000; + border-bottom: 1px solid var(--os-black); } .o-style-medium { - border-bottom: 2px solid #000000; + border-bottom: 2px solid var(--os-black); } .o-style-thick { - border-bottom: 3px solid #000000; + border-bottom: 3px solid var(--os-black); } .o-style-dashed { - border-bottom: 1px dashed #000000; + border-bottom: 1px dashed var(--os-black); } .o-style-dotted { - border-bottom: 1px dotted #000000; + border-bottom: 1px dotted var(--os-black); } .o-dropdown-border-type { cursor: pointer; diff --git a/src/components/border_editor/border_editor.xml b/src/components/border_editor/border_editor.xml index b6ec88c67e..ca38ff8fec 100644 --- a/src/components/border_editor/border_editor.xml +++ b/src/components/border_editor/border_editor.xml @@ -3,7 +3,7 @@ Border Color
@@ -52,7 +52,7 @@ -
+
-
+
Standard
Custom
-
+
diff --git a/src/components/color_picker/color_picker_widget.css b/src/components/color_picker/color_picker_widget.css index ca4fb2859c..4ca9dd6cc7 100644 --- a/src/components/color_picker/color_picker_widget.css +++ b/src/components/color_picker/color_picker_widget.css @@ -14,7 +14,7 @@ border-radius: 2px; cursor: pointer; &:not([disabled]):hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--os-background-gray-color-hover); } } diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css index 6977afcfe3..3ff1da5d34 100644 --- a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css +++ b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css @@ -2,7 +2,6 @@ .o-autocomplete-dropdown { pointer-events: auto; cursor: pointer; - background-color: #fff; max-width: 400px; z-index: 1; .o-autocomplete-value-focus { diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts index 8df5009813..f4d28d26b3 100644 --- a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts +++ b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts @@ -36,7 +36,7 @@ export class TextValueProvider extends Component { getCss(html: HtmlContent) { return cssPropertiesToCss({ - color: html.color || "#000000", + color: html.color, background: html.backgroundColor, }); } diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml index 651521e8be..3b17bb148f 100644 --- a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml +++ b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml @@ -3,7 +3,7 @@
+ 'o-autocomplete-dropdown bg-white': props.proposals.length}">
- +
-
+
diff --git a/src/components/composer/grid_composer/grid_composer.css b/src/components/composer/grid_composer/grid_composer.css index bdea36a2f3..7254469279 100644 --- a/src/components/composer/grid_composer/grid_composer.css +++ b/src/components/composer/grid_composer/grid_composer.css @@ -1,5 +1,6 @@ .o-spreadsheet { div.o-grid-composer { + color-scheme: light; z-index: var(--os-components-importance-grid-composer); position: absolute; font-family: var(--os-default-font); diff --git a/src/components/composer/speech_bubble/speech_bubble.css b/src/components/composer/speech_bubble/speech_bubble.css index a6b2041cde..13064a25e8 100644 --- a/src/components/composer/speech_bubble/speech_bubble.css +++ b/src/components/composer/speech_bubble/speech_bubble.css @@ -1,6 +1,6 @@ .o-spreadsheet { .o-speech-bubble { - background-color: white; + background-color: var(--os-white-bg); box-sizing: border-box; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15); border: 1px solid var(--os-gray-400); @@ -11,7 +11,7 @@ position: absolute; top: 100%; left: 50%; - background-color: white; + background-color: var(--os-white-bg); height: var(--os-bubble-arrow-size); width: var(--os-bubble-arrow-size); transform-origin: top left; diff --git a/src/components/error_tooltip/error_tooltip.css b/src/components/error_tooltip/error_tooltip.css index e1fcc6539b..56eaee2960 100644 --- a/src/components/error_tooltip/error_tooltip.css +++ b/src/components/error_tooltip/error_tooltip.css @@ -1,7 +1,6 @@ .o-spreadsheet { .o-error-tooltip { font-size: 13px; - background-color: white; border-left: 3px solid red; padding: 10px; overflow-wrap: break-word; diff --git a/src/components/error_tooltip/error_tooltip.xml b/src/components/error_tooltip/error_tooltip.xml index 4f60336b28..6b297310ea 100644 --- a/src/components/error_tooltip/error_tooltip.xml +++ b/src/components/error_tooltip/error_tooltip.xml @@ -1,6 +1,6 @@ -
+
Error
diff --git a/src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.css b/src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.css index 731ea36e10..240761bb6e 100644 --- a/src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.css +++ b/src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.css @@ -14,7 +14,7 @@ &:hover, &:target { color: var(--os-gray-900) !important; - background: rgba(0, 0, 0, 0.1); + background: var(--os-background-gray-color-hover); } .o-chart-preview { diff --git a/src/components/figures/figure/figure.css b/src/components/figures/figure/figure.css index d3754e5e26..e97a198455 100644 --- a/src/components/figures/figure/figure.css +++ b/src/components/figures/figure/figure.css @@ -1,5 +1,8 @@ .o-spreadsheet { div.o-figure { + color-scheme: light; + color: var(--os-text-body); + position: absolute; width: 100%; height: 100%; diff --git a/src/components/font_size_editor/font_size_editor.css b/src/components/font_size_editor/font_size_editor.css index c3336b5f4a..74382d3e43 100644 --- a/src/components/font_size_editor/font_size_editor.css +++ b/src/components/font_size_editor/font_size_editor.css @@ -14,7 +14,7 @@ line-height: 26px; padding: 3px 12px; &:hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--os-background-gray-color-hover); } } } diff --git a/src/components/icon_picker/icon_picker.css b/src/components/icon_picker/icon_picker.css index 3d3cb33339..823371c987 100644 --- a/src/components/icon_picker/icon_picker.css +++ b/src/components/icon_picker/icon_picker.css @@ -2,7 +2,6 @@ .o-icon-picker { position: absolute; box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15); - background-color: white; padding: 2px 1px; z-index: var(--os-components-importance-icon-picker); } diff --git a/src/components/icon_picker/icon_picker.xml b/src/components/icon_picker/icon_picker.xml index 3d7bad8f1f..e762b1fdae 100644 --- a/src/components/icon_picker/icon_picker.xml +++ b/src/components/icon_picker/icon_picker.xml @@ -1,6 +1,6 @@ -
+
@@ -1048,4 +1049,9 @@ /> + +
+ +
+ diff --git a/src/components/link/link_display/link_display.css b/src/components/link/link_display/link_display.css index 70ecd04b6e..c91fd48d7a 100644 --- a/src/components/link/link_display/link_display.css +++ b/src/components/link/link_display/link_display.css @@ -1,7 +1,6 @@ .o-spreadsheet { .o-link-tool { font-size: 13px; - background-color: white; box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15); padding: 6px 12px; border-radius: 4px; @@ -42,6 +41,6 @@ } .o-link-icon:hover { cursor: pointer; - color: #000; + color: var(--os-black); } } diff --git a/src/components/link/link_display/link_display.xml b/src/components/link/link_display/link_display.xml index 380910b166..7266003825 100644 --- a/src/components/link/link_display/link_display.xml +++ b/src/components/link/link_display/link_display.xml @@ -1,6 +1,6 @@ -
+
@@ -43,7 +43,7 @@ diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css index 5f29b4c4a4..441e303595 100644 --- a/src/components/menu/menu.css +++ b/src/components/menu/menu.css @@ -1,6 +1,5 @@ .o-spreadsheet { .o-menu { - background-color: white; user-select: none; .o-menu-item { cursor: pointer; diff --git a/src/components/menu/menu.xml b/src/components/menu/menu.xml index 62c56c3754..73d49f38f9 100644 --- a/src/components/menu/menu.xml +++ b/src/components/menu/menu.xml @@ -2,7 +2,7 @@
-
+
Carousel Sections
-
+
- - - + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - + + + + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - + - - - - - - - - + + + + + + + + - + - - - - - - - - - - - - + + + + + + + + + + + + - + - - - - - - - - - - + + + + + + + + + + - - + + - - - - - - - - - + + + + + + + + + @@ -150,9 +194,9 @@ viewBox="0 0 48 48" class="o-chart-preview user-select-none" xmlns="http://www.w3.org/2000/svg"> - + - 62 + 62 @@ -160,61 +204,72 @@ viewBox="0 0 48 48" class="o-chart-preview user-select-none" xmlns="http://www.w3.org/2000/svg"> - - - 123 + + + 123 - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - + - - + + @@ -222,14 +277,20 @@ - + @@ -242,60 +303,76 @@ fill="none" stroke-width="0.5" stroke-linejoin="round"> - + - + - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/components/side_panel/chart/chart_type_picker/chart_type_picker.css b/src/components/side_panel/chart/chart_type_picker/chart_type_picker.css index 45454fe587..23da9972d0 100644 --- a/src/components/side_panel/chart/chart_type_picker/chart_type_picker.css +++ b/src/components/side_panel/chart/chart_type_picker/chart_type_picker.css @@ -14,7 +14,6 @@ } .o-popover .o-chart-select-popover { - background: #fff; .o-chart-type-item { cursor: pointer; padding: 3px 6px; diff --git a/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml b/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml index 44a1588c1b..6dacb5424d 100644 --- a/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml +++ b/src/components/side_panel/chart/chart_type_picker/chart_type_picker.xml @@ -20,7 +20,7 @@
diff --git a/src/components/side_panel/components/checkbox/checkbox.css b/src/components/side_panel/components/checkbox/checkbox.css index 92016337b1..d4f1bb1d84 100644 --- a/src/components/side_panel/components/checkbox/checkbox.css +++ b/src/components/side_panel/components/checkbox/checkbox.css @@ -30,3 +30,9 @@ } } } + +.o-spreadsheet.dark { + label.o-checkbox input:checked { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); + } +} diff --git a/src/components/side_panel/components/radio_selection/radio_selection.css b/src/components/side_panel/components/radio_selection/radio_selection.css index 64f5564774..96e324ad7c 100644 --- a/src/components/side_panel/components/radio_selection/radio_selection.css +++ b/src/components/side_panel/components/radio_selection/radio_selection.css @@ -18,3 +18,9 @@ } } } + +.o-spreadsheet.dark { + .o-radio input:checked { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e"); + } +} diff --git a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css index 8608278a96..2f37c71922 100644 --- a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css +++ b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css @@ -25,7 +25,7 @@ } .o-cf-iconset-rule { .o-cf-clickable-icon { - border: 1px solid var(--os-gray-200); + border: 1px solid var(--os-gray-300); border-radius: 4px; cursor: pointer; &:hover { diff --git a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts index fa408b5412..d36b6fc95a 100644 --- a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts +++ b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts @@ -33,7 +33,7 @@ import { } from "../../../../types"; import { ColorPickerWidget } from "../../../color_picker/color_picker_widget"; import { StandaloneComposer } from "../../../composer/standalone_composer/standalone_composer"; -import { getTextDecoration } from "../../../helpers"; +import { cssPropertiesToCss, getTextDecoration } from "../../../helpers"; import { IconPicker } from "../../../icon_picker/icon_picker"; import { SelectionInput } from "../../../selection_input/selection_input"; import { ValidationMessages } from "../../../validation_messages/validation_messages"; @@ -402,15 +402,20 @@ export class ConditionalFormattingEditor extends Component
Preview
-
+
Preview text
Minpoint
diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css index 47e95aea22..2b2d089327 100644 --- a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css +++ b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css @@ -19,7 +19,6 @@ } .o-cf-preview-icon { border: 1px solid var(--os-gray-300); - background-color: #fff; position: absolute; height: 50px; width: 50px; diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml index 095103b0de..7eea1a1780 100644 --- a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml +++ b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml @@ -14,7 +14,8 @@
-
+
@@ -23,7 +24,7 @@
+ class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 bg-white"> 123
diff --git a/src/components/side_panel/custom_currency/custom_currency.css b/src/components/side_panel/custom_currency/custom_currency.css index a381ea7518..1e09b3eabb 100644 --- a/src/components/side_panel/custom_currency/custom_currency.css +++ b/src/components/side_panel/custom_currency/custom_currency.css @@ -1,8 +1,5 @@ .o-spreadsheet { .o-custom-currency { - .o-format-proposals { - color: black; - } .o-format-examples { background: var(--os-gray-100); padding: 8px; diff --git a/src/components/side_panel/data_validation/dv_preview/dv_preview.css b/src/components/side_panel/data_validation/dv_preview/dv_preview.css index 79125fcf71..282f0866d6 100644 --- a/src/components/side_panel/data_validation/dv_preview/dv_preview.css +++ b/src/components/side_panel/data_validation/dv_preview/dv_preview.css @@ -14,7 +14,7 @@ } &:hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--os-background-gray-color-hover); } &:not(:hover) .o-dv-preview-delete { diff --git a/src/components/side_panel/more_formats/more_formats.css b/src/components/side_panel/more_formats/more_formats.css index 326dd498f3..4677b6aebd 100644 --- a/src/components/side_panel/more_formats/more_formats.css +++ b/src/components/side_panel/more_formats/more_formats.css @@ -2,10 +2,9 @@ .o-more-formats-panel { .format-preview { height: 49px; - background-color: white; cursor: pointer; &:hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--os-background-gray-color-hover) !important; } } .check-icon { diff --git a/src/components/side_panel/more_formats/more_formats.xml b/src/components/side_panel/more_formats/more_formats.xml index dc22f655d5..ce7e6b3d65 100644 --- a/src/components/side_panel/more_formats/more_formats.xml +++ b/src/components/side_panel/more_formats/more_formats.xml @@ -7,7 +7,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"> diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.css b/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.css index 579452c260..6230062f39 100644 --- a/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.css +++ b/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.css @@ -6,9 +6,6 @@ width: 13px; height: 13px; } - .pivot-dimension-search { - background-color: white; - } .add-dimension.o-button { padding: 2px 7px; font-weight: 400; diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.xml b/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.xml index 157337e988..886a5acebc 100644 --- a/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.xml +++ b/src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.xml @@ -3,7 +3,7 @@
+ class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search bg-white"> diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.css b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.css index a82b9648d4..9f9329e81e 100644 --- a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.css +++ b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.css @@ -1,6 +1,5 @@ .o-spreadsheet { .pivot-dimension { - background-color: white; border: 1px solid var(--os-gray-300); border-radius: 4px; @@ -8,10 +7,6 @@ height: inherit; } - select > option { - background-color: white; - } - .pivot-dim-operator-label { min-width: 120px; } diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml index efaf2b41dd..f0d607cc0a 100644 --- a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml +++ b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml @@ -1,7 +1,7 @@
diff --git a/src/components/side_panel/side_panel/side_panel.css b/src/components/side_panel/side_panel/side_panel.css index 030f1fe694..e2afb13789 100644 --- a/src/components/side_panel/side_panel/side_panel.css +++ b/src/components/side_panel/side_panel/side_panel.css @@ -3,7 +3,6 @@ display: flex; flex-direction: column; overflow-x: hidden; - background-color: white; border: solid var(--os-gray-300); border-width: 1px 0 0 1px; user-select: none; @@ -103,7 +102,7 @@ &:not(.inactive) { color: var(--os-button-active-text-color); - border-bottom: 1px solid #fff; + border-bottom: 1px solid transparent; } } .o-sidePanel-tab:last-child { diff --git a/src/components/side_panel/side_panel/side_panel.xml b/src/components/side_panel/side_panel/side_panel.xml index bc91def45a..3cbbdd224a 100644 --- a/src/components/side_panel/side_panel/side_panel.xml +++ b/src/components/side_panel/side_panel/side_panel.xml @@ -5,7 +5,7 @@ -
+
-
+
option { + background-color: var(--os-white-bg); + } + input { - background-color: white; + background-color: var(--os-white-bg); } &.o-spreadsheet-mobile .o-spreadsheet-topbar-wrapper, @@ -93,7 +101,7 @@ color: var(--os-gray-900); &::placeholder { - opacity: 0.5; + color: var(--os-composer-placeholder-color); } &:focus { border-color: var(--os-action-color); @@ -172,8 +180,8 @@ height: 32px; line-height: 16px; flex-grow: 1; - background-color: var(--os-gray-200); - border: 1px solid var(--os-gray-200); + background-color: var(--os-button-bg); + border: 1px solid var(--os-button-bg); color: var(--os-text-body); &:disabled { @@ -183,9 +191,9 @@ &.primary { background-color: var(--os-primary-button-bg); border-color: var(--os-primary-button-bg); - color: #fff; + color: var(--os-primary-button-text-color); &:hover:enabled { - color: #fff; + color: var(--os-primary-button-text-color); background-color: var(--os-primary-button-hover-bg); } &:active:enabled { @@ -213,7 +221,7 @@ } &.o-button-danger:hover { - color: #ffffff; + color: var(--os-white); background: var(--os-alert-danger-border); } } @@ -243,3 +251,11 @@ z-index: calc(var(--os-components-importance-scroll-bar) + 1); } } + +.o-spreadsheet.dark { + select.o-input { + background: transparent + url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%274%27%20viewBox%3D%270%200%207%204%27%3E%3Cpolygon%20fill%3D%27%23e4e4e4%27%20points%3D%273.5%204%207%200%200%200%27/%3E%3C/svg%3E") + no-repeat right center; + } +} diff --git a/src/components/spreadsheet/spreadsheet.ts b/src/components/spreadsheet/spreadsheet.ts index cce9b2bebb..b683dc1f39 100644 --- a/src/components/spreadsheet/spreadsheet.ts +++ b/src/components/spreadsheet/spreadsheet.ts @@ -55,6 +55,7 @@ import { instantiateClipboard } from "./../../helpers/clipboard/navigator_clipbo export interface SpreadsheetProps extends Partial { model: Model; + colorScheme?: "dark" | "light"; } export class Spreadsheet extends Component { @@ -64,6 +65,7 @@ export class Spreadsheet extends Component
diff --git a/src/components/tables/table_style_preview/table_style_preview.css b/src/components/tables/table_style_preview/table_style_preview.css index 85a1ac06a5..815f6ada0a 100644 --- a/src/components/tables/table_style_preview/table_style_preview.css +++ b/src/components/tables/table_style_preview/table_style_preview.css @@ -13,7 +13,6 @@ display: block !important; right: 0; top: 0; - background: #fff; cursor: pointer; border: 1px solid var(--os-gray-300); padding: 1px 1px 1px 2px; diff --git a/src/components/tables/table_style_preview/table_style_preview.xml b/src/components/tables/table_style_preview/table_style_preview.xml index 0447d003dc..7bd9b9428e 100644 --- a/src/components/tables/table_style_preview/table_style_preview.xml +++ b/src/components/tables/table_style_preview/table_style_preview.xml @@ -11,7 +11,7 @@
diff --git a/src/components/tables/table_styles_popover/table_styles_popover.css b/src/components/tables/table_styles_popover/table_styles_popover.css index a4970cc62c..5aae32698c 100644 --- a/src/components/tables/table_styles_popover/table_styles_popover.css +++ b/src/components/tables/table_styles_popover/table_styles_popover.css @@ -2,7 +2,6 @@ .o-table-style-popover { /* 7 tables preview + padding by line */ width: calc((66px + 4px * 2) * 7 + 1.5rem * 2); - background: #fff; font-size: 14px; user-select: none; @@ -19,7 +18,7 @@ transition: color 0.2s, border-color 0.2s; &.selected { - border-bottom-color: #fff; + border-bottom-color: var(--os-white); border-top-color: var(--os-primary-button-bg); color: var(--os-button-active-text-color); } diff --git a/src/components/tables/table_styles_popover/table_styles_popover.xml b/src/components/tables/table_styles_popover/table_styles_popover.xml index 690362562f..043bd5148f 100644 --- a/src/components/tables/table_styles_popover/table_styles_popover.xml +++ b/src/components/tables/table_styles_popover/table_styles_popover.xml @@ -2,7 +2,7 @@
diff --git a/src/components/top_bar/dropdown_action/dropdown_action.css b/src/components/top_bar/dropdown_action/dropdown_action.css index 9d74343a83..299d407b3f 100644 --- a/src/components/top_bar/dropdown_action/dropdown_action.css +++ b/src/components/top_bar/dropdown_action/dropdown_action.css @@ -6,8 +6,6 @@ } .o-dropdown-content { - background-color: white; - .o-dropdown-line { display: flex; diff --git a/src/components/top_bar/dropdown_action/dropdown_action.xml b/src/components/top_bar/dropdown_action/dropdown_action.xml index e349418c59..c96cd1223d 100644 --- a/src/components/top_bar/dropdown_action/dropdown_action.xml +++ b/src/components/top_bar/dropdown_action/dropdown_action.xml @@ -11,7 +11,7 @@ class="props.class" /> -
+
diff --git a/src/components/top_bar/top_bar.css b/src/components/top_bar/top_bar.css index e41e206ede..b45f92dc29 100644 --- a/src/components/top_bar/top_bar.css +++ b/src/components/top_bar/top_bar.css @@ -33,7 +33,6 @@ line-height: 1.2; font-size: 14px; font-weight: 500; - background-color: #fff; .o-topbar-top { border-bottom: 1px solid var(--os-separator-color); diff --git a/src/components/top_bar/top_bar.xml b/src/components/top_bar/top_bar.xml index 945b7ce5db..73782f8bf2 100644 --- a/src/components/top_bar/top_bar.xml +++ b/src/components/top_bar/top_bar.xml @@ -1,7 +1,7 @@
@@ -104,7 +104,7 @@ popoverPositioning="'bottom-left'" /> -
+
@@ -1142,7 +1142,7 @@ exports[`TopBar component can set cell format 1`] = ` exports[`TopBar component simple rendering 1`] = `
diff --git a/tests/colors/__snapshots__/color_picker_component.test.ts.snap b/tests/colors/__snapshots__/color_picker_component.test.ts.snap index a988bc13b7..aeeaaa123a 100644 --- a/tests/colors/__snapshots__/color_picker_component.test.ts.snap +++ b/tests/colors/__snapshots__/color_picker_component.test.ts.snap @@ -2,7 +2,7 @@ exports[`Color Picker buttons Full component rendering 1`] = `
UM @@ -43,7 +43,7 @@ exports[`Functions autocomplete autocomplete simple snapshot with =S 1`] = ` S ZZ @@ -63,7 +63,7 @@ exports[`composer Assistant render above the cell when not enough place below 1`
UM @@ -104,7 +104,7 @@ exports[`composer Assistant render above the cell when not enough place below 1` S ZZ @@ -126,7 +126,7 @@ exports[`composer Assistant render below the cell by default 1`] = `
UM @@ -167,7 +167,7 @@ exports[`composer Assistant render below the cell by default 1`] = ` S ZZ diff --git a/tests/composer/__snapshots__/composer_component.test.ts.snap b/tests/composer/__snapshots__/composer_component.test.ts.snap index 7067ae14f1..86c2f3def1 100644 --- a/tests/composer/__snapshots__/composer_component.test.ts.snap +++ b/tests/composer/__snapshots__/composer_component.test.ts.snap @@ -11,21 +11,21 @@ exports[`Composer string is correctly translated to DOM Multi-line formula 1`] = >

=

A1:

A2 @@ -35,31 +35,31 @@ exports[`Composer string is correctly translated to DOM Multi-line formula 1`] =

+ SUM (

5 ) @@ -116,7 +116,7 @@ exports[`Composer string is correctly translated to DOM Selection indicator in m >

= @@ -127,7 +127,7 @@ exports[`Composer string is correctly translated to DOM Selection indicator in m

@@ -145,7 +145,7 @@ exports[`Composer string is correctly translated to DOM Selection indicator in s

= @@ -164,32 +164,32 @@ exports[`Composer string is correctly translated to DOM Simple formula 1`] = ` >

= 1 + A1 diff --git a/tests/composer/__snapshots__/formula_assistant_component.test.ts.snap b/tests/composer/__snapshots__/formula_assistant_component.test.ts.snap index d963402f3a..d39c6d54b0 100644 --- a/tests/composer/__snapshots__/formula_assistant_component.test.ts.snap +++ b/tests/composer/__snapshots__/formula_assistant_component.test.ts.snap @@ -5,7 +5,7 @@ exports[`formula assistant appearance simple snapshot with =FUNC1( 1`] = ` class="o-formula-assistant-container user-select-none shadow" >

diff --git a/tests/composer/composer_component.test.ts b/tests/composer/composer_component.test.ts index d5dabe58d0..8bca1f2cdb 100644 --- a/tests/composer/composer_component.test.ts +++ b/tests/composer/composer_component.test.ts @@ -1,4 +1,4 @@ -import { tokenColors } from "@odoo/o-spreadsheet-engine/constants"; +import { DEFAULT_TOKEN_COLOR, tokenColors } from "@odoo/o-spreadsheet-engine/constants"; import { Model } from "@odoo/o-spreadsheet-engine/model"; import { CellComposerStore } from "../../src/components/composer/composer/cell_composer_store"; import { colors, toCartesian, toZone } from "../../src/helpers/index"; @@ -93,14 +93,14 @@ describe("ranges and highlights", () => { const composerEl = await typeInComposer("=SU"); const contentColors = getComposerColors(composerEl); expect(contentColors["="]).toBeSameColorAs("#3da4ab"); - expect(contentColors["SU"]).toBeSameColorAs("#000000"); + expect(contentColors["SU"]).toBeSameColorAs(DEFAULT_TOKEN_COLOR); }); test("+SU, the + should be colored", async () => { const composerEl = await typeInComposer("+SU"); const contentColors = getComposerColors(composerEl); expect(contentColors["+"]).toBeSameColorAs("#3da4ab"); - expect(contentColors["SU"]).toBeSameColorAs("#000000"); + expect(contentColors["SU"]).toBeSameColorAs(DEFAULT_TOKEN_COLOR); }); test.each([ @@ -1132,7 +1132,7 @@ describe("composer formula color", () => { expect(getComposerColors(composerEl)["TRUE"]).toBeSameColorAs(tokenColors.NUMBER); }); - test(`type '=SUM(1, "2"))' --> extra parenthesis should have specific parenthesis color`, async () => { + test(`aaaa`, async () => { const composerEl = await typeInComposer('=SUM(1, "2"))'); expect(getComposerColors(composerEl)[")"]).toBeSameColorAs(tokenColors.ORPHAN_RIGHT_PAREN); }); diff --git a/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap b/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap index 7c7cf245c7..2e45d724c4 100644 --- a/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap +++ b/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap @@ -54,7 +54,7 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
123 @@ -141,7 +141,7 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
123 diff --git a/tests/data_validation/data_validation_list_component.test.ts b/tests/data_validation/data_validation_list_component.test.ts index 15df701c7d..022bd3fb91 100644 --- a/tests/data_validation/data_validation_list_component.test.ts +++ b/tests/data_validation/data_validation_list_component.test.ts @@ -426,7 +426,7 @@ describe("autocomplete in composer", () => { expect(values[1].textContent).toBe("hello"); }); - test("Autocomplete dropdown text should be black by default", async () => { + test("Autocomplete dropdown text should have the default text color by default", async () => { addDataValidation(model, "A1", "id", { type: "isValueInList", values: ["hello"], @@ -441,7 +441,7 @@ describe("autocomplete in composer", () => { const values = fixture.querySelectorAll(".o-autocomplete-value span"); expect(values).toHaveLength(1); expect(values[0].textContent).toBe("hello"); - expect(values[0].style.color).toBe("rgb(0, 0, 0)"); + expect(values[0].style.color).toBe(""); }); }); diff --git a/tests/link/__snapshots__/link_display_component.test.ts.snap b/tests/link/__snapshots__/link_display_component.test.ts.snap index 28d1381ca2..51c4221218 100644 --- a/tests/link/__snapshots__/link_display_component.test.ts.snap +++ b/tests/link/__snapshots__/link_display_component.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`link display component simple snapshot 1`] = ` -"
https://url.com
" `; diff --git a/tests/menus/__snapshots__/context_menu_component.test.ts.snap b/tests/menus/__snapshots__/context_menu_component.test.ts.snap index 27b1668ab5..f3c253195c 100644 --- a/tests/menus/__snapshots__/context_menu_component.test.ts.snap +++ b/tests/menus/__snapshots__/context_menu_component.test.ts.snap @@ -2,7 +2,7 @@ exports[`Context MenuPopover integration tests context menu simple rendering 1`] = `
diff --git a/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap b/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap index ae73030636..45930c0d56 100644 --- a/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap +++ b/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap @@ -2,7 +2,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
{ "'amount with spaces:sum'": PIVOT_TOKEN_COLOR, Product: PIVOT_TOKEN_COLOR, Customer: PIVOT_TOKEN_COLOR, - NotAField: "#000000", + NotAField: DEFAULT_TOKEN_COLOR, "'Date:year'": PIVOT_TOKEN_COLOR, } ); diff --git a/tests/popover/__snapshots__/error_tooltip_component.test.ts.snap b/tests/popover/__snapshots__/error_tooltip_component.test.ts.snap index 22f666f37f..5bdb937ebd 100644 --- a/tests/popover/__snapshots__/error_tooltip_component.test.ts.snap +++ b/tests/popover/__snapshots__/error_tooltip_component.test.ts.snap @@ -5,7 +5,7 @@ exports[`Grid integration can display error tooltip 1`] = ` class="o-popover-content" >
{ const blob = new window.Blob([data], { type }); setTimeout(() => callback(blob), 0); }); + // light-dark() colors are not supported in the color parser used by jsdom. Mock the setColor to avoid parsing color issues + jest + .spyOn(CSSStyleDeclaration.prototype, "color", "set") + .mockImplementation(function (this: CSSStyleDeclaration, color: string) { + // @ts-ignore + this._setProperty("color", color); + }); patchSessionMove(); /** this is the magic shit * ensures that we properly load every files from the library but diff --git a/tests/setup/jest_extend.ts b/tests/setup/jest_extend.ts index a591316074..3f8e228a2e 100644 --- a/tests/setup/jest_extend.ts +++ b/tests/setup/jest_extend.ts @@ -186,7 +186,12 @@ CancelledReasons: ${this.utils.printReceived(dispatchResult.reasons)} return { pass: true, message: () => "" }; }, toBeSameColorAs(received: string, expected: string, tolerance: number = 0) { - const pass = isSameColor(received, expected, tolerance); + let pass = false; + if (received.startsWith("light-dark") || expected.startsWith("light-dark")) { + pass = received === expected; + } else { + pass = isSameColor(received, expected, tolerance); + } const message = () => pass ? "" diff --git a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap index 119943874a..20f63c0e5b 100644 --- a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap +++ b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap @@ -10,7 +10,7 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = ` class="o-spreadsheet-topbar-wrapper o-two-columns" >
@@ -1842,7 +1842,7 @@ exports[`components take the small screen into account 1`] = ` >
{ expect(fixture.querySelector(".o-spreadsheet")).toMatchSnapshot(); expect(fixture.querySelector(".o-spreadsheet-mobile")).not.toBeNull(); }); + +test("Spreadsheet color scheme can be set to dark", async () => { + const model = new Model(); + await mountSpreadsheet({ model, colorScheme: "dark" }); + expect(".o-spreadsheet").toHaveStyle({ "color-scheme": "dark" }); +}); diff --git a/tests/table/__snapshots__/filter_menu_component.test.ts.snap b/tests/table/__snapshots__/filter_menu_component.test.ts.snap index 74b6fc568a..a5ae198187 100644 --- a/tests/table/__snapshots__/filter_menu_component.test.ts.snap +++ b/tests/table/__snapshots__/filter_menu_component.test.ts.snap @@ -42,6 +42,7 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1` > @@ -98,6 +99,7 @@ exports[`Filter menu component Filter Tests Filter menu is correctly rendered 1` > diff --git a/tests/test_helpers/dom_helper.ts b/tests/test_helpers/dom_helper.ts index f7c81c6689..c8fbc8fda9 100644 --- a/tests/test_helpers/dom_helper.ts +++ b/tests/test_helpers/dom_helper.ts @@ -400,7 +400,7 @@ export function getComposerColors(composerEl: Element) { const _el = el as HTMLElement; if (_el.tagName === "SPAN") { const color = getElComputedStyle(_el, "color"); - colors[_el.textContent!] = toHex(color); + colors[_el.textContent!] = color; } } return colors;