Theming - Monaco #1542
Assignees
Labels
Comments
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
Merged
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 5, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 6, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 9, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 9, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 9, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
to bmingles/web-client-ui
that referenced
this issue
Oct 10, 2023
bmingles
added a commit
that referenced
this issue
Oct 10, 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
mofojed
pushed a commit
to deephaven/deephaven-core
that referenced
this issue
Oct 24, 2023
# [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
Update Monaco theming to use theme variables. Requires deriving CSS prop values and converting to .js based theme.
Epic: #1537
The text was updated successfully, but these errors were encountered: