use euiTheme vars where possible

elastic · Dec 19, 2024 · f33c9ff · f33c9ff
1 parent 3990b49
commit f33c9ff
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/packages/kbn-coloring/emotion.d.ts b/packages/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
@@ -79,7 +79,9 @@ export function ColorPicker({
               close();
               deleteStep();
             }}
-            css={{ 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
@@ -52,7 +52,7 @@ export function PaletteColors({
   const selectedColorSwatchStyle = {
     outline: 'currentcolor solid 2px',
     outlineOffset: '-1px',
-    border: `2px solid ${euiTheme.colors.borderBaseFormsColorSwatch}`,
+    border: `${euiTheme.border.width.thick} solid ${euiTheme.colors.borderBaseFormsColorSwatch}`,
   };
   return (
     <>

diff --git a/packages/kbn-coloring/tsconfig.json b/packages/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/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/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}`}
       >
-        <EuiPanel paddingSize="none" hasShadow={false} hasBorder={true}>
+        <EuiPanel paddingSize="none" hasShadow={false} hasBorder>
           <header className="lnsLayerPanel__layerHeader">
             <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
               <EuiFlexItem grow className="lnsLayerPanel__layerSettingsWrapper">