Skip to content

feat: Monaco theming#1560

Merged
bmingles merged 15 commits intodeephaven:mainfrom
bmingles:1542-monaco-theming
Oct 10, 2023
Merged

feat: Monaco theming#1560
bmingles merged 15 commits intodeephaven:mainfrom
bmingles:1542-monaco-theming

Conversation

@bmingles
Copy link
Copy Markdown
Contributor

@bmingles bmingles commented Oct 5, 2023

  • 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

@codecov
Copy link
Copy Markdown

codecov Bot commented Oct 5, 2023

Codecov Report

Attention: 5 lines in your changes are missing coverage. Please review.

Comparison is base (a9541b1) 46.34% compared to head (b279f65) 46.48%.
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1560      +/-   ##
==========================================
+ Coverage   46.34%   46.48%   +0.13%     
==========================================
  Files         569      571       +2     
  Lines       35916    36011      +95     
  Branches     8997     9012      +15     
==========================================
+ Hits        16647    16738      +91     
- Misses      19217    19221       +4     
  Partials       52       52              
Flag Coverage Δ
unit 46.48% <94.79%> (+0.13%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Coverage Δ
packages/components/src/theme/ThemeModel.ts 100.00% <ø> (ø)
packages/components/src/theme/ThemeProvider.tsx 100.00% <ø> (ø)
packages/components/src/theme/ThemeUtils.ts 100.00% <100.00%> (ø)
packages/components/src/theme/theme-dark/index.ts 100.00% <100.00%> (ø)
packages/components/src/theme/theme-light/index.ts 100.00% <100.00%> (ø)
packages/utils/src/ColorUtils.ts 100.00% <100.00%> (ø)
packages/code-studio/src/styleguide/index.tsx 0.00% <0.00%> (ø)
packages/console/src/monaco/MonacoUtils.ts 57.39% <0.00%> (-1.02%) ⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@bmingles bmingles changed the title feat: Monaco theming feat!: Monaco theming Oct 6, 2023
@bmingles bmingles requested review from dsmmcken and mofojed October 6, 2023 14:34
Comment thread packages/components/src/theme/theme_default_dark_semantic.css Outdated
Comment thread packages/components/src/theme/theme_default_dark_semantic.css Outdated
Comment thread packages/components/src/theme/theme_default_light.css
Comment thread packages/console/src/monaco/MonacoTheme.module.scss Outdated
@mofojed
Copy link
Copy Markdown
Member

mofojed commented Oct 10, 2023

@bmingles I should add some more context to this quote on the CONTRIBUTING.md:

NOTE: Do not use the ! notation for marking a breaking change - you must use the BREAKING CHANGE: footer and include details of the breakage/migration.

At the time I didn't think lerna was supporting this correctly, but upon re-reading this comment about the issue, we just need to set the changelog-preset: https://github.com/lerna/lerna/tree/main/libs/commands/version#--changelog-preset
I'll submit a PR to update that. That being said - you put BREAKING_CHANGE in your description, it should be BREAKING CHANGE (with a space, no underscore), so please update taht.

@mofojed
Copy link
Copy Markdown
Member

mofojed commented Oct 10, 2023

@bmingles scratch that, I tried making a PR to use the correct preset: #1565
But that just resulted in the version command hanging. I'm not sure why it's hanging. Rather than dive into it, I've filed a ticket for cleaning that up later: #1566
Just remove the exclamation mark from the PR title instead, the BREAKING CHANGE footer is sufficient.

@bmingles bmingles changed the title feat!: Monaco theming feat: Monaco theming Oct 10, 2023
Copy link
Copy Markdown
Member

@mofojed mofojed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor cleanup suggestion.

// Remove the temporary css variables
tmpPropEl.remove();

log.debug('Resolved css variables', performance.now() - perfStart, 'ms');
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Side note - perhaps we should add a .time method to our Logger, that wraps console.time: https://developer.mozilla.org/en-US/docs/Web/API/console/time
I would put that at a finer grain of detail than debug2 even. Just noting it.

Comment on lines +103 to +108
return {
r,
g,
b,
a,
};
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd much prefer without the custom line breaks here

Suggested change
return {
r,
g,
b,
a,
};
return { r, g, b, a };

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yeah. I'll fix on next PR

@bmingles bmingles merged commit 4eda17c into deephaven:main Oct 10, 2023
@bmingles bmingles deleted the 1542-monaco-theming branch October 10, 2023 20:46
@github-actions github-actions Bot locked and limited conversation to collaborators Oct 10, 2023
@bmingles bmingles linked an issue Oct 23, 2023 that may be closed by this pull request
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theming - Monaco Theming - Base Dark Theme

2 participants