diff --git a/.sass-lint.yml b/.sass-lint.yml
index 18ce54048d7db..16bb58c33d23f 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -6,6 +6,7 @@ files:
     - 'src/legacy/ui/public/vislib/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/rollup/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/security/**/*.s+(a|c)ss'
+    - 'x-pack/legacy/plugins/canvas/**/*.s+(a|c)ss'
 rules:
   quotes:
     - 2
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss
index 74134cd3bf875..17b6a30400631 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss
@@ -9,8 +9,6 @@
     padding: $euiSizeXS $euiSize;
     border: $euiBorderThin;
     border-radius: $euiBorderRadius;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     font-size: inherit;
 
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss
index 8be0dc208e6bb..9229c1f88a096 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss
@@ -4,12 +4,12 @@
   align-items: center;
 
   .canvasRenderError__icon {
-    opacity: 0.4;
-    stroke: white;
-    stroke-width: 0.2px;
+    opacity: .4;
+    stroke: $euiColorEmptyShade;
+    stroke-width: .2px;
 
     &:hover {
-      opacity: 0.6;
+      opacity: .6;
       cursor: pointer;
     }
   }
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss
index f020b0a63996e..f94668b7cdfa2 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss
@@ -13,10 +13,6 @@
 
   // disables selection and dragging
   .revealImage__image {
-    -khtml-user-select: none;
-    -o-user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
     user-select: none;
   }
 }
diff --git a/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss b/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
index a63d75ce9a7d8..9b43b3923ab9c 100644
--- a/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
+++ b/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
@@ -30,7 +30,7 @@ $canvasLayoutFontSize: $euiFontSizeS;
 .canvasLayout__stageHeader {
   flex-grow: 0;
   flex-basis: auto;
-  padding: ($euiSizeXS +1px) $euiSize $euiSizeXS $euiSize;
+  padding: ($euiSizeXS + 1px) $euiSize $euiSizeXS;
   font-size: $canvasLayoutFontSize;
   border-bottom: $euiBorderThin;
   background: $euiColorLightestShade;
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
index 5e8b25f024b3a..bef58d6bb6f5f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
@@ -32,7 +32,8 @@
 
 }
 
-.canvasArg__form, .canvasArg__accordion {
+.canvasArg__form,
+.canvasArg__accordion {
   &:hover {
     .canvasArg__remove {
       opacity: 1;
@@ -78,8 +79,9 @@
     background: transparent;
   }
 
-  &:before, &:after {
-    content: "";
+  &:before,
+  &:after {
+    content: '';
     height: 1px;
     position: absolute;
     left: 0;
diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss
index 13b810998d1ba..5b281129f533f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss
@@ -11,13 +11,12 @@
   }
 
   .canvasAssetManager__meterWrapper {
-    flex-grow: 0;
-    min-width: 40%;
-    align-items: center;
-
     @include euiBreakpoint('xs', 's') {
       flex-grow: 1;
     }
+    flex-grow: 0;
+    min-width: 40%;
+    align-items: center;
   }
 
   .canvasAssetManager__meterLabel {
diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss b/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss
index 5bada63e08741..8b69d4cce2689 100644
--- a/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss
@@ -11,7 +11,7 @@
     text-align: center;
 
     &:hover {
-      outline: solid 3px rgba(0, 121, 165, 0.1);
+      outline: solid $euiSizeXS transparentize($euiColorPrimary, .9);
     }
   }
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss b/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss
index c9da34d87d0a1..7f723b5549acf 100644
--- a/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss
@@ -13,10 +13,11 @@
   border-right: $euiBorderThin;
 }
 
-.autocompleteItems, .autocompleteReference {
+.autocompleteItems,
+.autocompleteReference {
+  @include euiScrollBar;
   height: 258px;
   overflow: auto;
-  @include euiScrollBar;
 }
 
 .autocompleteReference {
diff --git a/x-pack/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss b/x-pack/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
index db8b926ba8221..4913a599b07f7 100644
--- a/x-pack/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
@@ -1,4 +1,5 @@
 .canvasBorderResizeHandle {
+  @include euiSlightShadow;
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   display: block;
@@ -7,7 +8,6 @@
   width: 8px;
   margin-left: -4px;
   margin-top: -4px;
-  background-color: #fff;
-  border: 1px solid #666;
-  box-shadow: 0 2px 2px -1px rgba(153, 153, 153, 0.3), 0 1px 5px -2px rgba(153, 153, 153, 0.3);
+  background-color: $euiColorEmptyShade;
+  border: 1px solid $euiColorDarkShade;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss
index 1496db27cb469..0c81d091c0b96 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss
@@ -1,6 +1,6 @@
 .canvasColorPalette {
   .canvasColorPalette__dot {
     display: inline-block;
-    margin: 0px $euiSizeXS $euiSizeXS 0px;
+    margin: 0 $euiSizeXS $euiSizeXS 0;
   }
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss b/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
index ea10df43c4cfb..daccfdff5d34b 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
@@ -12,7 +12,7 @@
     overflow: auto;
 
     // removes white square in the scrollbar corner
-    &::-webkit-scrollbar-corner {
+    &::-webkit-scrollbar-corner { // sass-lint:disable-line no-vendor-prefixes
       background: transparent;
     }
   }
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss b/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss
index e7bfc3abd35bf..87dc59edba299 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss
@@ -17,7 +17,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, 0.5);
+    background: transparentize($euiColorGhost, .5);
     border-radius: $euiBorderRadius;
   }
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
index 6e40c47b4d29d..d366aac096bed 100644
--- a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -1,8 +1,9 @@
-body.canvas-isFullscreen {
+body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   // hide global loading indicator
   .kbnLoadingIndicator {
     display: none;
   }
+
   // remove space for global nav elements
   .header-global-wrapper + .app-wrapper {
     left: 0;
@@ -11,7 +12,7 @@ body.canvas-isFullscreen {
 
   // set the background color
   .canvasLayout {
-    background: #000; // This hex is OK, we always want it black
+    background: $euiColorInk;
   }
 
   // hide all the interface parts
diff --git a/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss b/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss
index ea739fe969ca0..2ed6884542b18 100644
--- a/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss
@@ -15,7 +15,7 @@
   }
   @for $i from 1 through 20 {
     .canvasPageManager--trayPop > div:nth-child(#{$i}n) {
-      animation-delay: #{$i * 0.05}s;
+      animation-delay: #{$i * .05}s;
     }
   }
 
@@ -50,7 +50,7 @@
 
     &:focus,
     &-isActive {
-      background-color: transparentize(darken($euiColorLightestShade, 30%), 0.5);
+      background-color: transparentize(darken($euiColorLightestShade, 30%), .5);
       outline: none;
       text-decoration: none;
     }
@@ -66,7 +66,7 @@
       text-decoration: none;
 
       .canvasPageManager__pagePreview {
-        @include euiBottomShadowMedium($opacity: 0.3);
+        @include euiBottomShadowMedium($opacity: .3);
       }
 
       .canvasPageManager__controls {
@@ -85,7 +85,7 @@
   }
 
   .canvasPageManager__pageNumber {
-    color: $euiColorDarkShade !important;
+    color: $euiColorDarkShade;
   }
 
   .canvasPageManager__pagePreview {
@@ -107,7 +107,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, 0.5);
+    background: transparentize($euiColorGhost, .5);
     border-radius: $euiBorderRadius;
   }
 }
@@ -117,10 +117,12 @@
     opacity: 0;
     transform: translateX(100%);
   }
+
   1% {
     opacity: 0;
     transform: translateX(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -132,10 +134,12 @@
     opacity: 0;
     transform: translateY(100%);
   }
+
   1% {
     opacity: 0;
     transform: translateY(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
diff --git a/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss b/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss
index 64678e9fc8de9..f837d47682f61 100644
--- a/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss
@@ -12,7 +12,7 @@
 }
 
 .canvasPalettePicker__swatchesPanel {
-  padding: $euiSizeS 0 !important;
+  padding: $euiSizeS 0 !important; // sass-lint:disable-line no-important
 }
 
 .canvasPalettePicker__swatch {
@@ -27,6 +27,7 @@
     .canvasPaletteSwatch__background {
       transform: scaleY(2);
     }
+
     .canvasPalettePicker__label {
       color: $euiTextColor;
     }
diff --git a/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss b/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss
index 4da32f2a71516..efd525f3e8417 100644
--- a/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss
@@ -1,8 +1,8 @@
 .canvasRemove {
   $clearSize: $euiSize;
+  @include size($clearSize); // sass-lint:disable-line mixins-before-declarations
   position: absolute;
   pointer-events: all;
-  @include size($clearSize);
   background-color: $euiColorLightShade;
   border-radius: $clearSize;
   line-height: $clearSize;
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
index 4bc37b6666f67..f9ce6f3cfb555 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
@@ -33,9 +33,11 @@
   0% {
     opacity: 0;
   }
+
   1% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
index fe52e652c08a4..24453fcf0411e 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,3 +1,3 @@
 .canvasLayout__sidebarHeader {
-  padding: ($euiSizeXS * 0.5) 0;
+  padding: ($euiSizeXS * .5) 0;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss
index f625bff0e4b54..7303f43dd269f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -16,7 +16,7 @@
 
   button {
     padding: $euiSizeXS $euiSizeM;
-    box-shadow: 0 -2px 1px rgba($euiColorFullShade, .10)
+    box-shadow: 0 -2px 1px transparentize($euiColorFullShade, .9);
   }
 }
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss b/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss
index e3b344a9d1fae..2749824fde098 100644
--- a/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss
@@ -1,6 +1,6 @@
 .canvasTray {
-  flex-direction: column;
   @include euiBottomShadowFlat;
+  flex-direction: column;
 }
 
 .canvasTray__panel {
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss b/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss
index 6bd1ae58d2846..2aa69fb119317 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss
@@ -11,8 +11,8 @@
   position: absolute;
   user-select: none;
   pointer-events: none;
-  background-image: linear-gradient(to right, grey 1px, transparent 1px),
-    linear-gradient(to bottom, grey 1px, transparent 1px);
+  background-image: linear-gradient(to right, $euiColorMediumShade 1px, transparent 1px),
+  linear-gradient(to bottom, $euiColorMediumShade 1px, transparent 1px);
   background-size: 50px 50px;
   top: 0;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss
index 88480374d8f1e..0392e1983df57 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss
@@ -12,11 +12,10 @@
 }
 
 .canvasWorkpad__dropzoneTable--tags {
-  
   .euiTableCellContent {
     flex-wrap: wrap;
   }
-  
+
   .euiHealth {
     width: 100%;
   }
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss
index 659a6ba120a11..3b2c8eae9e542 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss
@@ -1,12 +1,12 @@
 .canvasWorkpad__upload--compressed {
 
   &.euiFilePicker--compressed.euiFilePicker {
-    
     .euiFilePicker__prompt {
       height: $euiSizeXXL;
       padding: $euiSizeM;
       padding-left: $euiSizeXXL;
     }
+
     .euiFilePicker__icon {
       top: $euiSizeM;
     }
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss
index 39a95055c48d2..9266273406b84 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss
@@ -1,8 +1,8 @@
 .canvasPage {
+  @include euiBottomShadowFlat($opacity: .4);
   z-index: initial;
-  @include euiBottomShadowFlat($opacity: 0.4);
   position: absolute;
   top: 0;
-  transform-style: preserve-3d !important;
+  transform-style: preserve-3d !important; // sass-lint:disable-line no-important
   background-color: $euiColorEmptyShade;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/style/hackery.scss b/x-pack/legacy/plugins/canvas/public/style/hackery.scss
index 12e66c2fff014..7c8a63a851592 100644
--- a/x-pack/legacy/plugins/canvas/public/style/hackery.scss
+++ b/x-pack/legacy/plugins/canvas/public/style/hackery.scss
@@ -3,7 +3,7 @@
   when the UI framework implements everything we need
 */
 
-#canvas-app {
+#canvas-app { // sass-lint:disable-line no-ids
   // Give buttons some room to the right
   .euiAccordion__childWrapper {
     overflow-x: hidden;
diff --git a/x-pack/legacy/plugins/canvas/public/style/main.scss b/x-pack/legacy/plugins/canvas/public/style/main.scss
index 84a06813de282..1796f0a3af046 100644
--- a/x-pack/legacy/plugins/canvas/public/style/main.scss
+++ b/x-pack/legacy/plugins/canvas/public/style/main.scss
@@ -14,17 +14,16 @@ $canvasElementCardWidth: 210px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%);
-  transform: translateX(-50%);
   text-align: center;
 }
 
 .canvasCheckered {
   background-color: $euiColorGhost;
-  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
-    linear-gradient(-45deg, #ddd 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ddd 75%),
-    linear-gradient(-45deg, transparent 75%, #ddd 75%);
-  background-size: 8px 8px;
+  background-image: linear-gradient(45deg, $euiColorLightShade 25%, transparent 25%),
+  linear-gradient(-45deg, $euiColorLightShade 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, $euiColorLightShade 75%),
+  linear-gradient(-45deg, transparent 75%, $euiColorLightShade 75%);
+  background-size: $euiSizeS $euiSizeS;
   position: relative;
 }
 
@@ -40,22 +39,22 @@ $canvasElementCardWidth: 210px;
   border-top: $euiBorderThin;
 }
 
-#canvas-app {
+#canvas-app { // sass-lint:disable-line no-ids
   overflow-y: hidden;
 
   .window-error {
     position: absolute;
     bottom: 10px;
     right: 10px;
-    background-color: red;
-    color: white;
+    background-color: $euiColorDanger;
+    color: $euiColorGhost;
     display: block;
     z-index: 2000;
     padding: 10px;
     max-width: 500px;
 
     a {
-      color: white;
+      color: $euiColorGhost;
       font-weight: bold;
     }
   }