[Lens] Align Lens style with Borealis #204839

markov00 · 2024-12-18T22:07:47Z

Summary

This PR updates the style of Lens to align it with the new Borealis theme.
It covers the set of tasks in #203050 within the Lens editor panels list.

Comments are applied in order as in the mentioned issue

mgadewoll

ℹ️ Adding an early review due to upcoming PTO.

...es/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx

.../kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx

packages/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx

.../lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

elasticmachine · 2025-01-08T10:43:00Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

dej611

Checked locally and works fine.
It matches all the requested changes.

no fontsize change applied

elasticmachine · 2025-01-08T15:57:57Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: c90a48f

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	785.0KB	785.0KB	+1.0B
`eventAnnotationListing`	231.0KB	231.0KB	-78.0B
`lens`	1.5MB	1.5MB	+938.0B
`securitySolution`	22.2MB	22.2MB	+1.0B
total			+862.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`@kbn/coloring`	2	3	+1

Total ESLint disabled count

id	before	after	diff
`@kbn/coloring`	2	3	+1

History

💚 Build #264784 succeeded fd3ebde
💔 Build #263268 failed 37a4072
💚 Build #262573 succeeded 423b2aa
💔 Build #262570 failed f33c9ff
💔 Build #262202 failed 3f2edcf
💔 Build #262049 failed ea3d7df

MichaelMarcialis

Thanks for putting this together, @markov00. It looks great. I left a few small comments below. Once those are addressed, I think this is good to go.

MichaelMarcialis · 2025-01-08T14:45:00Z

.../kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx

@@ -47,6 +49,11 @@ export function PaletteColors({
        ? neutralPalette.getColor(color.colorIndex)
        : palettes.get(color.paletteId).getColor(color.colorIndex)
      : color.colorCode;
+  const selectedColorSwatchStyle = {
+    outline: 'currentcolor solid 2px',


Would it make sense to use a token for the outline thickness here? Something like euiTheme.border.width.thick?

MichaelMarcialis · 2025-01-08T14:46:13Z

.../kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx

@@ -47,6 +49,11 @@ export function PaletteColors({
        ? neutralPalette.getColor(color.colorIndex)
        : palettes.get(color.paletteId).getColor(color.colorIndex)
      : color.colorCode;
+  const selectedColorSwatchStyle = {
+    outline: 'currentcolor solid 2px',
+    outlineOffset: '-1px',


Same question here. Would applying a negative to the euiTheme.border.width.thin token make sense here?

MichaelMarcialis · 2025-01-08T15:50:57Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss

@@ -40,17 +40,17 @@ $domDragDropZLevel3: 3;

 // Style for drop area when there's an item being dragged
 @mixin mixinDomDroppableActive($borderWidth: $euiBorderWidthThin) {
-  background-color: transparentize($euiColorVis0, .9) !important;
+  background-color: transparentize($euiColorSuccess, .9) !important;


Rather than applying transparency to $euiColorSuccess, would it be better to use $euiColorBackgroundBaseSuccess here?

MichaelMarcialis · 2025-01-08T15:51:19Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss

  }
 }

 // Style for drop area while hovering with item
 @mixin mixinDomDroppableHover($borderWidth: $euiBorderWidthThin) {
-  background-color: transparentize($euiColorVis0, .75) !important;
+  background-color: transparentize($euiColorSuccess, .75) !important;


Rather than applying transparency to $euiColorSuccess, would it be better to use $euiColorBackgroundLightSuccess here?

MichaelMarcialis · 2025-01-08T16:04:42Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss

@@ -51,14 +51,14 @@
 }

 .domDroppable--incompatible:not(.domDroppable__overlayWrapper) {
-  background-color: $euiColorHighlight !important;
+  background-color:  transparentize($euiColorWarning, .9) !important;


Rather than applying transparency to $euiColorWarning, would it be better to use $euiColorBackgroundBaseWarning here?

MichaelMarcialis · 2025-01-08T16:19:35Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss

On line 180, we're currently using background-color: transparentize($euiColorVis0, .75); to color the reorderable drop zone for dimension items. Similar to the previous comments, can we instead use $euiColorBackgroundBaseSuccess (when not hovering with a droppable item) and $euiColorBackgroundLightSuccess (when hovering with a droppable item) with no transparency?

MichaelMarcialis · 2025-01-08T16:35:08Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss

  &:before {
-    border-color: $euiColorVis0 !important;
+    border-color: $euiColorSuccess !important;


I believe this variable should be changed to $euiColorBorderBaseSuccess. Please note that this variable may be bugged/erroneous at the moment, but the EUI team is working on a PR to remedy it.

MichaelMarcialis · 2025-01-08T16:35:17Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss

  &:before {
-    border-color: $euiColorVis0 !important;
+    border-color: $euiColorSuccess !important;


I believe this variable should be changed to $euiColorBorderBaseSuccess. Please note that this variable may be bugged/erroneous at the moment, but the EUI team is working on a PR to remedy it.

ℹ️ $euiColorBorderBaseSuccess should work fine, but $euiColorBorderStrongSuccess required a fix 🐛 (that applies for all "strong" border tokens, base tokens should be ok)

MichaelMarcialis · 2025-01-08T16:35:39Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss

  &:before {
-    border: $euiBorderWidthThin dashed $euiColorVis5 !important;
+    border: $euiBorderWidthThin dashed $euiColorWarning !important;


I believe this border color variable should be changed to $euiColorBorderBaseWarning. Please note that this variable may be bugged/erroneous at the moment, but the EUI team is working on a PR to remedy it.

MichaelMarcialis · 2025-01-08T16:35:53Z

src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss

    &:before {
-      border-color: $euiColorVis5 !important;
+      border-color: $euiColorWarning !important;


I believe this variable should be changed to $euiColorBorderBaseWarning. Please note that this variable may be bugged/erroneous at the moment, but the EUI team is working on a PR to remedy it.

markov00 added Team:Visualizations Visualization editors, elastic-charts and infrastructure release_note:skip Skip the PR/issue when compiling release notes Feature:Lens backport:skip This commit does not require backporting v9.0.0 EUI Visual Refresh labels Dec 18, 2024

mgadewoll reviewed Dec 19, 2024

View reviewed changes

markov00 marked this pull request as ready for review January 8, 2025 10:42

markov00 requested review from a team as code owners January 8, 2025 10:42

dej611 approved these changes Jan 8, 2025

View reviewed changes

markov00 and others added 16 commits January 8, 2025 15:23

Updated Lens empty svg image

f0421b7

dimensions background content same color of header

42ed4f3

3 sections background color alignment

9da4d47

layer panel with border and no shadow

e204e6f

adjusted drag/drop colors

7a0b308

fix rounded corner shadow and add chart border

5c69514

fix dimension button background color

a8ce66c

change drag handler disabled color

2835a40

change formula background colors

f864065

color picker selected border

bfbf389

Align field list style to Discover

99a7e88

no fontsize change applied

fix lint

955a6ac

fix test color check

df86394

use euiTheme vars where possible

a3dbb94

[CI] Auto-commit changed files from 'node scripts/notice'

1c6fe25

add maxWidth from theme

3192c14

markov00 force-pushed the 2024_12_16-align_borealis branch from fd3ebde to 3192c14 Compare January 8, 2025 14:26

markov00 requested a review from a team as a code owner January 8, 2025 14:26

Merge branch 'main' into 2024_12_16-align_borealis

c90a48f

MichaelMarcialis reviewed Jan 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Align Lens style with Borealis #204839

[Lens] Align Lens style with Borealis #204839

markov00 commented Dec 18, 2024

mgadewoll left a comment

elasticmachine commented Jan 8, 2025

dej611 left a comment

elasticmachine commented Jan 8, 2025

ESLint disabled line counts

Total ESLint disabled count

MichaelMarcialis left a comment

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

mgadewoll Jan 8, 2025 •

edited

Loading

MichaelMarcialis Jan 8, 2025

MichaelMarcialis Jan 8, 2025

[Lens] Align Lens style with Borealis #204839

Are you sure you want to change the base?

[Lens] Align Lens style with Borealis #204839

Conversation

markov00 commented Dec 18, 2024

Summary

mgadewoll left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 8, 2025

dej611 left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 8, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgadewoll Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgadewoll Jan 8, 2025 •

edited

Loading