Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theming - Monaco #1542

Closed
bmingles opened this issue Sep 25, 2023 · 0 comments · Fixed by #1560 or deephaven/deephaven-core#4637
Closed

Theming - Monaco #1542

bmingles opened this issue Sep 25, 2023 · 0 comments · Fixed by #1560 or deephaven/deephaven-core#4637
Assignees
@bmingles
Labels
enhancement New feature or request web-client-ui

Comments

@bmingles
Copy link
Contributor

bmingles commented Sep 25, 2023 •
edited
Loading

Update Monaco theming to use theme variables. Requires deriving CSS prop values and converting to .js based theme.

Epic: #1537
@bmingles bmingles added enhancement New feature or request web-client-ui labels Sep 25, 2023
@bmingles bmingles self-assigned this Sep 25, 2023
@bmingles bmingles mentioned this issue Sep 25, 2023
Closed
13 tasks
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Renamed and added theme variables + utils
8819146 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Monaco css theme variables
5d74aa1 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Removed unused code
a7567e4 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Renamed and added theme variables + utils
c0a2a91 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Monaco css theme variables
6f8129c 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Removed unused code
5878034 
deephaven#1542
@bmingles bmingles mentioned this issue Oct 5, 2023
Merged
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Reordered lines
db3d8e7 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 5, 2023
@bmingles
Split out color utils + added tests
e0e8abb 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 6, 2023
@bmingles
Updated debug log
b39045d 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 9, 2023
@bmingles
Fixed a forced reflow issue
dadc021 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 9, 2023
@bmingles
Unit tests
d0f2fa5 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 9, 2023
@bmingles
Added comments
807796b 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Updated comment block
30d1817 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Updated some color vars to be dynamic
9f428e5 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Re-organized base themes
0302957 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Semantic editor colors
5a518d8 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Added theme provider to styleguide
496e477 
deephaven#1542
bmingles added a commit to bmingles/web-client-ui that referenced this issue Oct 10, 2023
@bmingles
Mapped a few more colors
b279f65 
deephaven#1542
bmingles added a commit that referenced this issue Oct 10, 2023
@bmingles
feat: Monaco theming (#1560)
4eda17c 
- Base color palette now uses hsl colors with a single
`--dh-color-xxx-hue` variable defining each of the base colors (see not
in testing section below)
- Updated Monaco theme to consume --dh-color variables
- Refined default dark theme a bit with more semantic variables mostly
in support of Monaco.
- Utils for normalizing colors + deriving css variables

**Methodology for Resolving Css Variables and Normalizing Colors**
ThemeUtils.resolveCssVariablesInRecord(record, targetEl)
- Add tmp div to target element for resolving variables
- Extract distinct `var` expressions from values in given record
- For each distinct `var` expression, create a tmp css variable on the
temp div
- Call getComputedStyle() on the tmp div
- For each value on the given record
- Replace `var` expressions with resolved values. Values are resolved
using `getPropertyValue()` on the result of `getComputedStyle()` in
previous step.
  - Normalize any color values to 8 character hex
- Convert to rgb/a - ColorUtils.asRgbOrRgbaString() - create a
non-attached div element, set its background color then read the
background color
    - Parse rgb/a and convert to hex with math

**Testing**
The MonacoTheme object now gets passed through a normalization function.
You can see the before and after in the debug logs "Monaco theme:" and
"Monaco theme derived:". The inputs are various `var(--dh-`
expressions`, and the outputs should all be 8 character hex values.

> Note: The new base color palette is hsl based derived from original
hex colors Don created in his theming work. A mapping of the original
hex to the new hsl version can be found here:
> https://bmingles.github.io/deephaven-theming-spike/
> 

resolves #1542

BREAKING CHANGE: Theme variables have to be present on body to avoid
Monaco init failing
@mofojed mofojed mentioned this issue Oct 24, 2023
Merged
mofojed pushed a commit to deephaven/deephaven-core that referenced this issue Oct 24, 2023
@github-actions @deephaven-internal
Update web version 0.50.0 (#4637)
8b631ae 
# [0.50.0](deephaven/web-client-ui@v0.49.1...v0.50.0) (2023-10-13)

### Bug Fixes

* Change display of rollup key columns from null to empty string ([#1563](deephaven/web-client-ui#1563)) ([327bcb6](deephaven/web-client-ui@327bcb6)), closes [#1483](deephaven/web-client-ui#1483)
* Disabled failing e2e test ([#1554](deephaven/web-client-ui#1554)) ([49723ec](deephaven/web-client-ui@49723ec)), closes [#1553](deephaven/web-client-ui#1553)
* Formatting Rule Doesn't use default set by user ([#1547](deephaven/web-client-ui#1547)) ([ce51229](deephaven/web-client-ui@ce51229))
* Handle deletion of unsaved copied file in NotebookPanel ([#1557](deephaven/web-client-ui#1557)) ([4021aac](deephaven/web-client-ui@4021aac)), closes [#1359](deephaven/web-client-ui#1359)
* Prompt for resetting layout ([#1552](deephaven/web-client-ui#1552)) ([a273e64](deephaven/web-client-ui@a273e64)), closes [#1250](deephaven/web-client-ui#1250)


* CSS based loading spinner (#1532) ([f06fbb0](deephaven/web-client-ui@f06fbb0)), closes [#1532](deephaven/web-client-ui#1532) [#1531](deephaven/web-client-ui#1531)

### Features

* Add copy/rename/delete options to notebook overflow menu ([#1551](deephaven/web-client-ui#1551)) ([4441109](deephaven/web-client-ui@4441109)), closes [#1359](deephaven/web-client-ui#1359)
* data bar render from API ([#1415](deephaven/web-client-ui#1415)) ([ee7d1c1](deephaven/web-client-ui@ee7d1c1)), closes [#0000](https://github.com/deephaven/web-client-ui/issues/0000) [#FF0000](https://github.com/deephaven/web-client-ui/issues/FF0000) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#FFFF00](https://github.com/deephaven/web-client-ui/issues/FFFF00) [#00FF00](https://github.com/deephaven/web-client-ui/issues/00FF00)
* Monaco theming ([#1560](deephaven/web-client-ui#1560)) ([4eda17c](deephaven/web-client-ui@4eda17c)), closes [#1542](deephaven/web-client-ui#1542)
* Theme Plugin Loading ([#1524](deephaven/web-client-ui#1524)) ([a9541b1](deephaven/web-client-ui@a9541b1)), closes [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1a171](https://github.com/deephaven/web-client-ui/issues/1a171) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#4c7](https://github.com/deephaven/web-client-ui/issues/4c7) [#1530](deephaven/web-client-ui#1530)


### BREAKING CHANGES

* Theme variables have to be present on body to avoid
Monaco init failing
* Inline LoadingSpinner instances will need to be
decorated with `className="loading-spinner-vertical-align"` for vertical
alignment to work as before

Co-authored-by: deephaven-internal <deephaven-internal@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bmingles bmingles

Labels
enhancement New feature or request web-client-ui
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Monaco theming bmingles/web-client-ui
Update web version 0.50.0 deephaven/deephaven-core
1 participant
@bmingles