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 4b75fa36fb..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, @@ -215,7 +224,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()); @@ -331,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}">
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/composer/composer.xml b/src/components/composer/composer/composer.xml index 2ae4ef5194..654f9ad236 100644 --- a/src/components/composer/composer/composer.xml +++ b/src/components/composer/composer/composer.xml @@ -60,7 +60,7 @@ t-on-click="closeAssistant" class="fa-stack position-absolute top-0 start-100 translate-middle fs-4"> - +
{ 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/src/components/composer/formula_assistant/formula_assistant.css b/src/components/composer/formula_assistant/formula_assistant.css index d1090c35d4..d5cbe184c0 100644 --- a/src/components/composer/formula_assistant/formula_assistant.css +++ b/src/components/composer/formula_assistant/formula_assistant.css @@ -1,5 +1,4 @@ .o-spreadsheet .o-formula-assistant { - background: #ffffff; .o-formula-assistant-head { background-color: var(--os-composer-assistant-background); padding: 10px; @@ -17,7 +16,7 @@ text-shadow: 0px 0px 1px var(--os-composer-assistant-color); } div:last-child { - color: black; + color: var(--os-black); } } .o-formula-assistant-gray { diff --git a/src/components/composer/formula_assistant/formula_assistant.xml b/src/components/composer/formula_assistant/formula_assistant.xml index 0bbeaafc7a..50557be77f 100644 --- a/src/components/composer/formula_assistant/formula_assistant.xml +++ b/src/components/composer/formula_assistant/formula_assistant.xml @@ -2,7 +2,7 @@
-
+
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 359a4fe784..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); }); @@ -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([ "", 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;