Changelog

odoo/o-spreadsheet#7362

Created by BI, Adrien Minne (adrm)

Blocked

label
odoo:master-dark-chrome-adrm
head
ef6090143a6d8c611247d30bb18e4c7420ab1b1e
odoo/o-spreadsheet
master #7362 missing r+

[IMP] spreadsheet: implement dark mode for UI

Description:

[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.

[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

[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

review checklist

  • [ ] feature is organized in plugin, or UI components
  • [ ] support of duplicate sheet (deep copy)
  • [ ] in model/core: ranges are Range object, and can be adapted (adaptRanges)
  • [ ] in model/UI: ranges are strings (to show the user)
  • [ ] undo-able commands (uses this.history.update)
  • [ ] multiuser-able commands (has inverse commands and transformations where needed)
  • [ ] new/updated/removed commands are documented
  • [ ] exportable in excel
  • [ ] translations (_t("qmsdf %s", abc))
  • [ ] unit tested
  • [ ] clean commented code
  • [ ] track breaking changes
  • [ ] doc is rebuild (npm run doc)
  • [ ] status is correct in Odoo