Replace euiThemeVars in maps

elastic · Jan 2, 2025 · 8de78d4 · 8de78d4
1 parent 2ee9cbf
commit 8de78d4
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 47 deletions.
diff --git a/...shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx b/...shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx
@@ -6,26 +6,25 @@
  */
 
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { EuiFormRow, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { MbValidatedColorPicker } from './mb_validated_color_picker';
-import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../../style_util';
-
-const OTHER_CATEGORY_SWATCHES = [
-  euiThemeVars.euiColorLightestShade,
-  euiThemeVars.euiColorLightShade,
-  euiThemeVars.euiColorMediumShade,
-  euiThemeVars.euiColorDarkShade,
-  euiThemeVars.euiColorDarkestShade,
-];
+import { OTHER_CATEGORY_DEFAULT_COLOR_TOKEN, OTHER_CATEGORY_LABEL } from '../../style_util';
 
 interface Props {
   onChange: (color: string) => void;
   color?: string;
 }
 
 export function OtherCategoryColorPicker(props: Props) {
+  const { euiTheme } = useEuiTheme();
+
+  const OTHER_CATEGORY_SWATCHES = [
+    euiTheme.colors.backgroundBasePlain,
+    euiTheme.colors.backgroundBaseSubdued,
+    euiTheme.colors.backgroundBaseSkeletonMiddle,
+  ];
+
   return (
     <EuiFormRow>
       <EuiToolTip
@@ -39,7 +38,7 @@ export function OtherCategoryColorPicker(props: Props) {
           swatches={OTHER_CATEGORY_SWATCHES}
           prepend={OTHER_CATEGORY_LABEL}
           onChange={props.onChange}
-          color={props.color ? props.color : OTHER_CATEGORY_DEFAULT_COLOR}
+          color={props.color ? props.color : euiTheme.colors[OTHER_CATEGORY_DEFAULT_COLOR_TOKEN]}
         />
       </EuiToolTip>
     </EuiFormRow>

diff --git a/...rm/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx b/...rm/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, CSSProperties } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { RightAlignedText } from '../right_aligned_text';
+
+const FONT_SIZE = 10;
+
+interface Props {
+  radius: number;
+  circleCenterX: number;
+  circleTopY: number;
+  textOffset: number;
+  textY: number;
+  formattedValue: string | number;
+  circleCenterY: number;
+  circleStyle: CSSProperties;
+  onWidthChange: (width: number) => void;
+}
+
+export const MapMarker: FC<Props> = ({
+  circleCenterX,
+  circleCenterY,
+  circleTopY,
+  formattedValue,
+  radius,
+  textOffset,
+  textY,
+  onWidthChange,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const circleStyle = {
+    fillOpacity: 0,
+    stroke: euiTheme.colors.textParagraph,
+    strokeWidth: 1,
+  };
+
+  return (
+    <g key={radius}>
+      <line
+        style={{ stroke: euiTheme.border.color }}
+        x1={circleCenterX}
+        y1={circleTopY}
+        x2={circleCenterX * 2.25}
+        y2={circleTopY}
+      />
+      <RightAlignedText
+        setWidth={onWidthChange}
+        style={{ fontSize: FONT_SIZE, fill: euiTheme.colors.textParagraph }}
+        x={circleCenterX * 2.25 + textOffset}
+        y={textY}
+        value={formattedValue}
+      />
+      <circle
+        style={{ ...circleStyle, stroke: euiTheme.colors.textParagraph }}
+        cx={circleCenterX}
+        cy={circleCenterY}
+        r={radius}
+      />
+    </g>
+  );
+};
diff --git a/...ns/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx b/...ns/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx
@@ -7,13 +7,12 @@
 
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 import { RangeFieldMeta } from '../../../../../../../common/descriptor_types';
 import { DynamicSizeProperty } from '../../../properties/dynamic_size_property';
-import { RightAlignedText } from '../right_aligned_text';
 import { getMaxLabel, getMinLabel } from './get_ordinal_label';
 import { type Marker, MarkerList } from './marker_list';
+import { MapMarker } from './map_marker';
 
 const FONT_SIZE = 10;
 const HALF_FONT_SIZE = FONT_SIZE / 2;
@@ -96,7 +95,6 @@ export class MarkerSizeLegend extends Component<Props, State> {
 
     const circleStyle = {
       fillOpacity: 0,
-      stroke: euiThemeVars.euiTextColor,
       strokeWidth: 1,
     };
 
@@ -112,23 +110,17 @@ export class MarkerSizeLegend extends Component<Props, State> {
       const textY = rawTextY > svgHeight ? svgHeight : rawTextY;
       return {
         svg: (
-          <g key={radius}>
-            <line
-              style={{ stroke: euiThemeVars.euiBorderColor }}
-              x1={circleCenterX}
-              y1={circleTopY}
-              x2={circleCenterX * 2.25}
-              y2={circleTopY}
-            />
-            <RightAlignedText
-              setWidth={this._onRightAlignedWidthChange}
-              style={{ fontSize: FONT_SIZE, fill: euiThemeVars.euiTextColor }}
-              x={circleCenterX * 2.25 + textOffset}
-              y={textY}
-              value={formattedValue}
-            />
-            <circle style={circleStyle} cx={circleCenterX} cy={circleCenterY} r={radius} />
-          </g>
+          <MapMarker
+            circleCenterX={circleCenterX}
+            circleCenterY={circleCenterY}
+            circleTopY={circleTopY}
+            circleStyle={circleStyle}
+            radius={radius}
+            textOffset={textOffset}
+            textY={textY}
+            formattedValue={formattedValue}
+            onWidthChange={this._onRightAlignedWidthChange}
+          />
         ),
         textY,
       };

diff --git a/...lugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx b/...lugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-import { EuiText } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiText, useEuiTheme } from '@elastic/eui';
 import { StyleError } from './style_error';
 import {
   DynamicStyleProperty,
@@ -62,7 +61,8 @@ export function VectorStyleLegend({
     );
   }
 
-  function renderMasksByFieldOrigin(fieldOrigin: FIELD_ORIGIN) {
+  function MasksByFieldOrigin({ fieldOrigin }: { fieldOrigin: FIELD_ORIGIN }) {
+    const { euiTheme } = useEuiTheme();
     const masksByFieldOrigin = masks.filter(
       (mask) => mask.getEsAggField().getOrigin() === fieldOrigin
     );
@@ -89,10 +89,7 @@ export function VectorStyleLegend({
         </EuiText>
         <ul>
           {masksByFieldOrigin.map((mask) => (
-            <li
-              key={mask.getEsAggField().getMbFieldName()}
-              style={{ marginLeft: euiThemeVars.euiSizeS }}
-            >
+            <li key={mask.getEsAggField().getMbFieldName()} style={{ marginLeft: euiTheme.size.s }}>
               <MaskLegend
                 esAggField={mask.getEsAggField()}
                 onlyShowLabelAndValue={true}
@@ -108,8 +105,8 @@ export function VectorStyleLegend({
 
   return (
     <>
-      {renderMasksByFieldOrigin(FIELD_ORIGIN.SOURCE)}
-      {renderMasksByFieldOrigin(FIELD_ORIGIN.JOIN)}
+      <MasksByFieldOrigin fieldOrigin={FIELD_ORIGIN.SOURCE} />
+      <MasksByFieldOrigin fieldOrigin={FIELD_ORIGIN.JOIN} />
       {legendRows}
     </>
   );

diff --git a/...rm/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx b/...rm/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx
@@ -23,7 +23,7 @@ import {
   VECTOR_STYLES,
 } from '../../../../../common/constants';
 import { isCategoricalStopsInvalid } from '../components/color/color_stops_utils';
-import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../style_util';
+import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR_TOKEN } from '../style_util';
 import { Break, BreakedLegend } from '../components/legend/breaked_legend';
 import { ColorDynamicOptions, OrdinalColorStop } from '../../../../../common/descriptor_types';
 import { LegendProps } from './style_property';
@@ -246,9 +246,11 @@ export class DynamicColorProperty extends DynamicStyleProperty<ColorDynamicOptio
       return this._chartsPaletteServiceGetColor('__other__');
     }
 
+    const { euiTheme } = useEuiTheme();
+
     return this._options.otherCategoryColor
       ? this._options.otherCategoryColor
-      : OTHER_CATEGORY_DEFAULT_COLOR;
+      : OTHER_CATEGORY_DEFAULT_COLOR_TOKEN;
   }
 
   _getColorPaletteStops() {

diff --git a/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts b/x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { ICON_SOURCE, MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../common/constants';
 import { Category } from '../../../../common/descriptor_types';
@@ -19,7 +18,7 @@ export const OTHER_CATEGORY_LABEL = i18n.translate(
   }
 );
 
-export const OTHER_CATEGORY_DEFAULT_COLOR = euiThemeVars.euiColorLightShade;
+export const OTHER_CATEGORY_DEFAULT_COLOR_TOKEN = 'textSubdued';
 
 export function getComputedFieldName(styleName: VECTOR_STYLES, fieldName: string) {
   return `${getComputedFieldNamePrefix(fieldName)}__${styleName as string}`;

diff --git a/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts b/x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts
@@ -5,14 +5,13 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 import { MapSettings } from '../../../common/descriptor_types';
 
 export function getDefaultMapSettings(): MapSettings {
   return {
     autoFitToDataBounds: false,
-    backgroundColor: euiThemeVars.euiColorEmptyShade,
+    backgroundColor: '#FFFFFF', // TODO: use eui theme
     customIcons: [],
     disableInteractive: false,
     disableTooltipControl: false,