[Lens] Adjust Lens Visualization Padding in Dashboards (#81911) (#82079)

* reduce padding on lens visualizations in dashboard

* tweak padding and axes title colors to match lens

* remove faux padding (border) to match lens padding

* update snapshots

* Revert "update snapshots"

This reverts commit c63cf2b.

* update functional test baseline screenshot

src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss

@@ -3,29 +3,23 @@
   flex-direction: column;
   flex: 1 1 100%;
 
-  // border used in lieu of padding to prevent overlapping background-color
-  border-width: $euiSizeS;
-  border-style: solid;
-  border-color: transparent;
-
   .tvbVisTimeSeries {
     overflow: hidden;
   }
   .tvbVisTimeSeriesDark {
     .echReactiveChart_unavailable {
-      color: #DFE5EF;
+      color: #dfe5ef;
     }
-    .echLegendItem  {
-      color: #DFE5EF;
+    .echLegendItem {
+      color: #dfe5ef;
     }
   }
   .tvbVisTimeSeriesLight {
     .echReactiveChart_unavailable {
       color: #343741;
     }
-    .echLegendItem  {
+    .echLegendItem {
       color: #343741;
     }
   }
 }
-

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import reactCSS from 'reactcss';
 
 import { startsWith, get, cloneDeep, map } from 'lodash';
 import { htmlIdGenerator } from '@elastic/eui';
@@ -150,13 +149,6 @@ export class TimeseriesVisualization extends Component {
 
   render() {
     const { model, visData, onBrush } = this.props;
-    const styles = reactCSS({
-      default: {
-        tvbVis: {
-          borderColor: get(model, 'background_color'),
-        },
-      },
-    });
     const series = get(visData, `${model.id}.series`, []);
     const interval = getInterval(visData, model);
     const yAxisIdGenerator = htmlIdGenerator('yaxis');
@@ -231,7 +223,7 @@ export class TimeseriesVisualization extends Component {
     });
 
     return (
-      <div className="tvbVis" style={styles.tvbVis}>
+      <div className="tvbVis">
         <TimeSeries
           series={series}
           yAxis={yAxis}

src/plugins/vis_type_vislib/public/vislib/lib/layout/_layout.scss

@@ -32,7 +32,7 @@
   min-height: 0;
   min-width: 0;
   overflow: hidden;
-  padding: ($euiSizeS + 2px) 0;
+  padding: $euiSizeS 0;
 }
 
 .visWrapper__column {
@@ -142,7 +142,6 @@
   min-height: 0;
 }
 
-
 //
 // STYLE
 //
@@ -153,7 +152,6 @@
 // could it be easily found to apply to all chart types.
 // At least wrapping selectors inside .visWrapper will narrow scope.
 
-
 // sass-lint:disable-block no-mergeable-selectors
 // Keep SVG and non-renamable selectors separately
 .visWrapper {
@@ -221,7 +219,7 @@
   .axis-title text {
     @include fontSize($euiFontSizeXS);
     font-weight: $euiFontWeightBold;
-    fill: $visTextColor;
+    fill: $euiTextColor;
   }
 
   .y-axis-title {

x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx

@@ -48,7 +48,7 @@ export function ExpressionWrapper({
         <div className="lnsExpressionRenderer">
           <ExpressionRendererComponent
             className="lnsExpressionRenderer__component"
-            padding="m"
+            padding="s"
             expression={expression}
             searchContext={searchContext}
             renderError={(errorMessage, error) => (