Closes #6173

- Better CSS classing for `gl-plot-y__axis-visibility`.
- Hide visibility control when editing.
- Theme colors modified to normalize plot border colors.

src/plugins/plot/axis/YAxis.vue

@@ -24,6 +24,7 @@
     v-if="loaded"
     class="gl-plot-axis-area gl-plot-y has-local-controls js-plot-y-axis"
     :style="yAxisStyle"
+    :class="yAxisClass"
 >
     <div
         class="gl-plot-label gl-plot-y-label"
@@ -40,6 +41,7 @@
         >{{ canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}` }}</span>
         <span
             v-if="showVisibilityToggle"
+            class="gl-plot-y__axis-visibility"
             :class="{ 'icon-eye-open': visible, 'icon-eye-disabled': !visible}"
             @click="toggleSeriesVisibility"
         ></span>
@@ -146,13 +148,17 @@ export default {
                 const thisIsTheSecondLeftAxis = (this.id - 1) > 0;
                 if (this.multipleLeftAxes && thisIsTheSecondLeftAxis) {
                     style.left = 0;
-                    style['border-right'] = `1px solid`;
                 } else {
                     style.left = `${ this.plotLeftTickWidth - this.tickWidth + multipleAxesPadding}px`;
                 }
             }
 
             return style;
+        },
+        yAxisClass() {
+            const thisIsTheSecondLeftAxis = (this.id - 1) > 0;
+
+            return (thisIsTheSecondLeftAxis) ? '--plot-axis-border-right' : '';
         }
     },
     mounted() {

src/styles/_constants-espresso.scss

@@ -360,7 +360,7 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorPlotFg;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
-$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotAreaBorder: rgba($colorBodyFg, 0.5);
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: $colorTabHeaderBg;

src/styles/_constants-maelstrom.scss

@@ -364,7 +364,7 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: black;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
-$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotAreaBorder: rgba($colorBodyFg, 0.5);
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);

src/styles/_constants-snow.scss

@@ -360,7 +360,7 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorPlotFg;
 $opacityPlotHash: 0.3;
 $stylePlotHash: dashed;
-$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotAreaBorder: rgba($colorBodyFg, 0.5);
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);

src/styles/_legacy-plots.scss

@@ -204,6 +204,10 @@ mct-plot {
                     display: block;
                 }
             }
+
+            &.--plot-axis-border-right {
+                border-right: 1px solid $colorPlotAreaBorder;
+            }
         }
 
         &.gl-plot-x {
@@ -263,8 +267,12 @@ mct-plot {
                 margin-top: $interiorMargin; // Uses margin-top due to writing-mode
             }
 
-            .icon-eye-open:before, .icon-eye-disabled:before {
-                padding-top: 5px;
+            .gl-plot-y__axis-visibility {
+                margin-top: $interiorMargin;
+
+                .is-editing & {
+                    visibility: hidden;
+                }
             }
 
             .plot-series-color-swatch {