MC-4150: Widget placeholder and variable placeholder styling is broken on inline editing

- Resolved static failures

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less

@@ -140,7 +140,7 @@ body {
 
     pre {
         background-color: @color-white-smoke;
-        border: @pre__border-width solid #ccc;
+        border: @pre__border-width solid @color-gray80;
         color: @color-black;
         font-family: @font-family__monospace;
         font-size: @code__font-size;
@@ -164,17 +164,17 @@ body {
     }
 
     .magento-placeholder {
-        background: #dff7ff;
+        background: @placeholder-background;
         box-sizing: initial;
-        color: #000;
+        color: @color-black;
         cursor: pointer !important;
         display: inline-block;
         font-size: 14px;
         font-style: normal;
         font-weight: normal;
         height: 20px;
         margin: 0 5px;
-        outline: 2px solid #c0dffa;
+        outline: 2px solid @placeholder-outline;
         padding: 2px 4px;
         vertical-align: bottom;
         word-break: break-all;
@@ -184,7 +184,7 @@ body {
         display: inline-block;
         height: 20px;
         margin: 0 5px;
-        outline: 2px solid #f7aaaa !important;
+        outline: 2px solid @placeholder-error-outline !important;
         padding: 2px 4px;
         vertical-align: bottom;
     }
@@ -207,7 +207,7 @@ body {
     }
 
     .magento-placeholder-error[data-mce-selected] {
-        outline: 2px solid #e12525 !important;
+        outline: 2px solid @placeholder-error-outline-mce !important;
     }
 
     .magento-placeholder-error img,

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_var.less

@@ -35,6 +35,10 @@
 @color-pagebuilder-darker-gray: #2b2625;
 @color-pagebuilder-darkest-gray: #1c1918;
 @color-pagebuilder-light-blue: #bfe2f0;
+@placeholder-background: #dff7ff;
+@placeholder-outline: #c0dffa;
+@placeholder-error-outline: #f7aaaa;
+@placeholder-error-outline-mce: #e12525;
 
 //
 //  Fonts