[Lens] Align Lens style with Borealis (#204839)

## 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 --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Jan 9, 2025 · 75a401f · 75a401f
1 parent d772316
commit 75a401f
Show file tree

Hide file tree

Showing 21 changed files with 295 additions and 275 deletions.
diff --git a/src/platform/packages/shared/kbn-chart-icons/src/assets/drop_illustration.tsx b/src/platform/packages/shared/kbn-chart-icons/src/assets/drop_illustration.tsx
diff --git a/src/platform/packages/shared/kbn-coloring/emotion.d.ts b/src/platform/packages/shared/kbn-coloring/emotion.d.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}
diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx
@@ -38,10 +38,10 @@ export function ColorPicker({
   );
 
   return (
-    <div style={{ width: 168 }}>
+    <div css={{ width: 168, position: 'relative' }}>
       <EuiPopoverTitle
         paddingSize="none"
-        style={{
+        css={{
           borderBottom: 'none',
         }}
       >
@@ -79,7 +79,9 @@ export function ColorPicker({
               close();
               deleteStep();
             }}
-            style={{ paddingBottom: 8 }}
+            css={({ euiTheme }) => ({
+              paddingBottom: euiTheme.size.s,
+            })}
           >
             {i18n.translate('coloring.colorMapping.colorPicker.removeGradientColorButtonLabel', {
               defaultMessage: 'Remove color stop',

diff --git a/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx b/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx
@@ -17,6 +17,7 @@ import {
   EuiTitle,
   EuiToolTip,
   EuiSpacer,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { IKbnPalette, KbnPalette, KbnPalettes } from '@kbn/palettes';
@@ -34,6 +35,7 @@ export function PaletteColors({
   color: ColorMapping.CategoricalColor | ColorMapping.ColorCode;
   selectColor: (color: ColorMapping.CategoricalColor | ColorMapping.ColorCode) => void;
 }) {
+  const { euiTheme } = useEuiTheme();
   const colors = Array.from({ length: palette.colorCount }, (d, i) => {
     return palette.getColor(i);
   });
@@ -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 ${euiTheme.border.width.thick}`,
+    outlineOffset: `-${euiTheme.border.width.thin}`,
+    border: `${euiTheme.border.width.thick} solid ${euiTheme.colors.borderBaseFormsColorSwatch}`,
+  };
   return (
     <>
       <EuiFlexGroup direction="column" style={{ padding: 8 }}>
@@ -70,9 +77,7 @@ export function PaletteColors({
               <EuiFlexItem key={c} grow={0}>
                 <EuiColorPickerSwatch
                   data-test-subj={`lns-colorMapping-colorPicker-staticColor-${index}`}
-                  style={{
-                    border: isSameColor(c, originalColor) ? '2px solid black' : 'transparent',
-                  }}
+                  css={isSameColor(c, originalColor) ? selectedColorSwatchStyle : undefined}
                   color={c}
                   onClick={() =>
                     selectColor({ type: 'categorical', paletteId: palette.id, colorIndex: index })
@@ -116,9 +121,7 @@ export function PaletteColors({
             {neutralColors.map((c, index) => (
               <EuiFlexItem key={c} grow={0}>
                 <EuiColorPickerSwatch
-                  style={{
-                    border: isSameColor(c, originalColor) ? '2px solid black' : 'transparent',
-                  }}
+                  css={isSameColor(c, originalColor) ? selectedColorSwatchStyle : undefined}
                   data-test-subj={`lns-colorMapping-colorPicker-neutralColor-${index}`}
                   color={c}
                   onClick={() =>

diff --git a/src/platform/packages/shared/kbn-coloring/tsconfig.json b/src/platform/packages/shared/kbn-coloring/tsconfig.json
@@ -11,7 +11,9 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    // Emotion theme typing
+    "./emotion.d.ts"
   ],
   "kbn_references": [
     "@kbn/i18n",

diff --git a/src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss b/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: $euiColorBackgroundBaseSuccess !important;
   &:before {
-    border-color: $euiColorVis0 !important;
+    border-color: $euiColorBorderBaseSuccess !important;
   }
 }
 
 // Style for drop area while hovering with item
 @mixin mixinDomDroppableHover($borderWidth: $euiBorderWidthThin) {
-  background-color: transparentize($euiColorVis0, .75) !important;
+  background-color: $euiColorBackgroundLightSuccess !important;
   &:before {
-    border-color: $euiColorVis0 !important;
+    border-color: $euiColorBorderBaseSuccess !important;
   }
 }
 

diff --git a/src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss b/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:  $euiColorBackgroundBaseWarning !important;
   &:before {
-    border: $euiBorderWidthThin dashed $euiColorVis5 !important;
+    border: $euiBorderWidthThin dashed $euiColorBorderBaseWarning !important;
   }
   &.domDroppable--hover {
-    background-color: rgba(251, 208, 17, .25) !important;
+    background-color: $euiColorBackgroundLightWarning !important;
     &:before {
-      border-color: $euiColorVis5 !important;
+      border-color: $euiColorBorderBaseWarning !important;
     }
   }
 }
@@ -114,7 +114,7 @@ $reorderItemMargin: $euiSizeS;
   position: relative;
   width: 100%;
   height: 100%;
-  background: $euiColorLightestShade;
+  background: $euiColorBackgroundBasePlain;
   border-radius: $euiSizeXS;
 
   .domDroppable__extraTarget,
@@ -177,7 +177,7 @@ $reorderItemMargin: $euiSizeS;
 }
 
 .domDragDrop-isActiveGroup {
-  background-color: transparentize($euiColorVis0, .75);
+  background-color: $euiColorBackgroundLightSuccess;
   .domDraggable_active_keyboard--reorderable {
     .domDraggable_dragover_keyboard--copy {
       opacity: 1;

diff --git a/.../shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx b/.../shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx
@@ -15,11 +15,10 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   useEuiFontSize,
-  useEuiShadow,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { DimensionButtonIcon } from './dimension_button_icon';
 import { PaletteIndicator } from './palette_indicator';
 import type { AccessorConfig, Message } from './types';
@@ -54,22 +53,22 @@ function DimensionButtonImpl({
   message,
   ...otherProps // from Drag&Drop integration
 }: DimensionButtonProps) {
+  const { euiTheme } = useEuiTheme();
   return (
     <div
       {...otherProps}
       css={css`
-        ${useEuiShadow('xs')}
         ${useEuiFontSize('s')}
-        border-radius: ${euiThemeVars.euiBorderRadius};
+        border-radius: ${euiTheme.border.radius};
         position: relative;
         line-height: 1;
         overflow: hidden;
         display: flex;
         align-items: center;
-        gap: ${euiThemeVars.euiSizeS};
-        min-height: ${euiThemeVars.euiSizeXL};
-        padding: ${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeS};
-        background: ${euiThemeVars.euiColorEmptyShade};
+        gap: ${euiTheme.size.s};
+        min-height: ${euiTheme.size.xl};
+        padding: ${euiTheme.size.xs} ${euiTheme.size.s};
+        background-color: ${euiTheme.colors.backgroundBaseSubdued};
       `}
     >
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="none" responsive={false}>
@@ -118,8 +117,8 @@ function DimensionButtonImpl({
         })}
         onClick={() => onRemoveClick(accessorConfig.columnId)}
         css={css`
-          color: ${euiThemeVars.euiTextSubduedColor};
-          transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
+          color: ${euiTheme.colors.textSubdued}
+          transition: ${euiTheme.animation.fast} ease-in-out;
           transition-property: color, opacity, background-color, transform;
           opacity: 0;
 
@@ -129,7 +128,7 @@ function DimensionButtonImpl({
           }
           &:hover,
           &:focus {
-            color: ${euiThemeVars.euiColorDangerText};
+            color: ${euiTheme.colors.textDanger};
           }
         `}
       />

diff --git a/...kages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx b/...kages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx
@@ -65,7 +65,7 @@ describe('buckets shared components', () => {
     it('should render invalid component', () => {
       const instance = mount(<DraggableBucketContainer {...defaultProps} isInvalid />);
       const iconProps = instance.find(EuiIcon).first().props();
-      expect(iconProps.color).toEqual('#BD271E');
+      expect(iconProps.color.toUpperCase()).toEqual('#BD271E');
       expect(iconProps.type).toEqual('warning');
     });
     it('should call onRemoveClick when remove icon is clicked', () => {

diff --git a/.../kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx b/.../kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx
@@ -56,7 +56,11 @@ export const DefaultBucketContainer = ({
             <EuiIcon
               size="s"
               color={
-                euiTheme.colors[isInvalid ? 'danger' : isNotDraggable ? 'disabled' : 'subduedText']
+                isInvalid
+                  ? euiTheme.colors.textDanger
+                  : isNotDraggable
+                  ? euiTheme.colors.textDisabled
+                  : euiTheme.colors.textSubdued
               }
               type={isInvalid ? 'warning' : 'grab'}
               aria-label={

diff --git a/...d/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx b/...d/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx
@@ -53,7 +53,7 @@ export const FieldsBucketContainer = ({
           >
             <EuiIcon
               size="s"
-              color={euiTheme.colors[isNotDraggable ? 'disabled' : 'text']}
+              color={isNotDraggable ? euiTheme.colors.textDisabled : euiTheme.colors.textParagraph}
               type="grab"
               aria-label={i18n.translate(
                 'visualizationUiComponents.fieldsBucketContainer.dragToReorder',

diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx
@@ -264,6 +264,7 @@ export function InnerFieldItem(props: FieldItemProps) {
             order={order}
             onDragStart={closePopover}
             dataTestSubj={`lnsFieldListPanelField-${field.name}`}
+            dragClassName="unifiedFieldListItemButton__dragging"
           >
             {isTextBasedColumnField(field) ? (
               <FieldItemButton<DatatableColumn>

diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.scss b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.scss
@@ -2,6 +2,14 @@
   width: 100%;
   height: 100%;
   padding: $euiSize $euiSize 0;
+  .unifiedFieldListItemButton.kbnFieldButton {
+    background: none;
+    box-shadow: none;
+    margin-bottom: calc($euiSizeXS / 2);
+  }
+  .unifiedFieldListItemButton__dragging {
+    background: $euiColorBackgroundBasePlain;
+  }
 }
 
 .lnsInnerIndexPatternDataPanel__switcher {

diff --git a/...m/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss b/...m/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss
@@ -28,11 +28,6 @@
   margin-top: 0 !important;
 }
 
-.lnsIndexPatternDimensionEditor--shaded {
-  background-color: $euiColorLightestShade;
-  border-bottom: $euiBorderThin;
-}
-
 .lnsIndexPatternDimensionEditor__columns {
   display: block;
   column-count: 2;

diff --git a/...red/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss b/...red/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss
@@ -36,7 +36,6 @@
 .lnsFormula__editorFooter {
   // make sure docs are rendered in front of monaco
   z-index: 1;
-  background-color: $euiColorLightestShade;
   border-bottom-right-radius: $euiBorderRadius;
   border-bottom-left-radius: $euiBorderRadius;
 }
@@ -47,6 +46,7 @@
 }
 
 .lnsFormula__editorContent {
+  background-color: $euiColorBackgroundBasePlain;
   min-height: 0;
   position: relative;