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 index ba101559b2fbd6..ae19bf28f26ec7 100644 --- 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 @@ -12,40 +12,34 @@ import { EuiIconProps } from '@elastic/eui'; export const DropIllustration = ({ title, titleId, ...props }: Omit) => ( {title ? {title} : null} - + + - + - + ); diff --git a/src/platform/packages/shared/kbn-coloring/emotion.d.ts b/src/platform/packages/shared/kbn-coloring/emotion.d.ts new file mode 100644 index 00000000000000..cdcacdcc90f389 --- /dev/null +++ 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/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx index eafa07793dd5ca..c8978d15156b4d 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx @@ -38,10 +38,10 @@ export function ColorPicker({ ); return ( -
+
@@ -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/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx index 0ed0d8d68bb63f..834e046fa61dd9 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx +++ b/src/platform/packages/shared/kbn-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 ( <> @@ -70,9 +77,7 @@ export function PaletteColors({ selectColor({ type: 'categorical', paletteId: palette.id, colorIndex: index }) @@ -116,9 +121,7 @@ export function PaletteColors({ {neutralColors.map((c, index) => ( diff --git a/src/platform/packages/shared/kbn-coloring/tsconfig.json b/src/platform/packages/shared/kbn-coloring/tsconfig.json index b361a533a10b5e..768945d26d24e4 100644 --- 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 index 75c442515b690d..1d6db5b97be85e 100644 --- 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 index e081a8f7610104..cfa1a5ccb725af 100644 --- 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/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx index 2d88fa9c429d18..7a66b274ef8245 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx +++ b/src/platform/packages/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 (
@@ -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/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx index 8bf9e2a1b5d4ec..e3abee643eeaa6 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx +++ b/src/platform/packages/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(); 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/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx index 4a19d276d57360..5ba2a0a1b912cd 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx @@ -56,7 +56,11 @@ export const DefaultBucketContainer = ({ {isTextBasedColumnField(field) ? ( 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 index 0229e4c4fb6c1b..52582d5b07a406 100644 --- 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/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss index a307db67724a03..b85686a80099da 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss +++ b/x-pack/platform/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/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss index 2b1753ebef1b3a..89d8ed7357c8dd 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss +++ b/x-pack/platform/plugins/shared/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; diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx index 4041d0e7fdd91b..b9ab2f4abea537 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx @@ -702,21 +702,37 @@ export function FormulaEditor({ })} )} +
-
-
-
- - - +
+ + + + { + editor1.current?.updateOptions({ + wordWrap: isWordWrapped ? 'off' : 'on', + }); + toggleWordWrap(!isWordWrapped); + }} + /> + + + + + { + toggleFullscreen(); + // Help text opens when entering full screen, and closes when leaving full screen + setIsHelpOpen(!isFullscreen); + }} + iconType={isFullscreen ? 'fullScreenExit' : 'fullScreen'} + size="xs" + color="text" + flush="right" + data-test-subj="lnsFormula-fullscreen" + > + {isFullscreen + ? i18n.translate('xpack.lens.formula.fullScreenExitLabel', { + defaultMessage: 'Collapse', + }) + : i18n.translate('xpack.lens.formula.fullScreenEnterLabel', { + defaultMessage: 'Expand', + })} + + + +
+ +
+ { + editor1.current = editor; + const model = editor.getModel(); + if (model) { + editorModel.current = model; + } + // If we ever introduce a second Monaco editor, we need to toggle + // the typing handler to the active editor to maintain the cursor + disposables.current.push( + editor.onDidChangeModelContent((e) => { + onTypeHandler(e, editor); + }) + ); + }} + /> + + {!text ? ( +
+ + {i18n.translate('xpack.lens.formulaPlaceholderText', { + defaultMessage: 'Type a formula by combining functions with math, like:', + })} + + + 
count() + 1
+
+ ) : null} +
+ +
+ + + {isFullscreen ? ( + - { - editor1.current?.updateOptions({ - wordWrap: isWordWrapped ? 'off' : 'on', - }); - toggleWordWrap(!isWordWrapped); - }} - /> + setIsHelpOpen(!isHelpOpen)} + > + + + - - - - { - toggleFullscreen(); - // Help text opens when entering full screen, and closes when leaving full screen - setIsHelpOpen(!isFullscreen); + ) : ( + - {isFullscreen - ? i18n.translate('xpack.lens.formula.fullScreenExitLabel', { - defaultMessage: 'Collapse', - }) - : i18n.translate('xpack.lens.formula.fullScreenEnterLabel', { - defaultMessage: 'Expand', - })} - - - -
- -
- { - editor1.current = editor; - const model = editor.getModel(); - if (model) { - editorModel.current = model; - } - // If we ever introduce a second Monaco editor, we need to toggle - // the typing handler to the active editor to maintain the cursor - disposables.current.push( - editor.onDidChangeModelContent((e) => { - onTypeHandler(e, editor); - }) - ); - }} - /> - - {!text ? ( -
- - {i18n.translate('xpack.lens.formulaPlaceholderText', { - defaultMessage: 'Type a formula by combining functions with math, like:', - })} - - - 
count() + 1
-
- ) : null} -
- -
- - - {isFullscreen ? ( - + )} + + + {errorCount || warningCount ? ( + + setIsWarningOpen(false)} + button={ + { + setIsWarningOpen(!isWarningOpen); + }} + > + {errorCount + ? i18n.translate('xpack.lens.formulaErrorCount', { + defaultMessage: '{count} {count, plural, one {error} other {errors}}', + values: { count: errorCount }, }) - : i18n.translate('xpack.lens.formula.editorHelpInlineShowToolTip', { - defaultMessage: 'Show function reference', + : null} + {warningCount + ? i18n.translate('xpack.lens.formulaWarningCount', { + defaultMessage: + '{count} {count, plural, one {warning} other {warnings}}', + values: { count: warningCount }, }) - } - delay="long" - position="top" + : null} + + } + > +
- setIsHelpOpen(!isHelpOpen)} - > - - - - - ) : ( - - )} + {warnings.map(({ message, severity }, index) => ( +
+ + {message} + +
+ ))} +
+ - - {errorCount || warningCount ? ( - - setIsWarningOpen(false)} - button={ - { - setIsWarningOpen(!isWarningOpen); - }} - > - {errorCount - ? i18n.translate('xpack.lens.formulaErrorCount', { - defaultMessage: - '{count} {count, plural, one {error} other {errors}}', - values: { count: errorCount }, - }) - : null} - {warningCount - ? i18n.translate('xpack.lens.formulaWarningCount', { - defaultMessage: - '{count} {count, plural, one {warning} other {warnings}}', - values: { count: warningCount }, - }) - : null} - - } - > -
- {warnings.map(({ message, severity }, index) => ( -
- - {message} - -
- ))} -
- - - ) : null} - -
+ ) : null} +
- - {/* fix the css here */} - {isFullscreen && isHelpOpen ? ( -
- -
- ) : null}
+ + {/* fix the css here */} + {isFullscreen && isHelpOpen ? ( +
+ +
+ ) : null}
); diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss index 23a31335010733..83cc6f95120b3a 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss @@ -33,7 +33,6 @@ } .lnsLayerPanel__row { - background: $euiColorLightestShade; padding: $euiSize; &:last-child { @@ -72,7 +71,6 @@ .lnsLayerPanel__dimensionContainer { position: relative; - &+& { margin-top: $euiSizeS; } diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index a60d7006ee3378..7715548b2b3ab2 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -363,7 +363,7 @@ export function LayerPanel(props: LayerPanelProps) { className="lnsLayerPanel" data-test-subj={`lns-layerPanel-${layerIndex}`} > - +
diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss index a7c8e4dfc6baa4..261d6672df93a1 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss @@ -1,7 +1,6 @@ .lnsDataPanelWrapper { flex: 1 0 100%; overflow: hidden; - background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); } .lnsDataPanelWrapper__switchSource { diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.scss index 7b69fb1a6ea231..143de90e44d71a 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.scss +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.scss @@ -98,7 +98,6 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */ .lnsFrameLayout__sidebar--right { flex-basis: 25%; - background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk); min-width: $lnsPanelMinWidth + 70; max-width: $euiFormMaxWidth + $euiSizeXXL; max-height: 100%; diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss index 98b9f6849fc88a..edc698dbcbcf2c 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss @@ -16,11 +16,11 @@ } .lnsWorkspacePanelWrapper__pageContentBody { - @include euiBottomShadowMedium; flex-grow: 1; display: flex; align-items: stretch; justify-content: stretch; + border: $euiBorderThin; border-radius: $euiBorderRadius; background: $euiColorEmptyShade; height: 100%;