CABPI-196: fix less code sniffer errors

 - make selectors lower case,
 - use variables for colours

Author: dmanners

app/code/Magento/AdminAdobeIms/view/adminhtml/templates/admin/sign_in.phtml

@@ -12,12 +12,12 @@
 $viewModel = $block->getLinkViewModel();
 ?>
 <?php if ($viewModel->isActive()): ?>
-<div class="spectrum-Modal is-open spectrum-Typography">
+<div class="adobe-ims-sign-in-modal spectrum-Modal is-open spectrum-Typography">
     <div class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--noDivider" role="dialog" tabindex="-1" aria-modal="true">
         <div class="spectrum-Dialog-grid">
             <h1 class="spectrum-Dialog-heading spectrum-Heading spectrum-Heading--sizeXL"><?= $escaper->escapeHtml(__('Sign In')) ?></h1>
 
-            <section class="spectrum-Dialog-content">
+            <section class="adobe-ims-sign-in-dialog spectrum-Dialog-content">
                 <?= $block->getChildHtml('messages') ?>
 
                 <p class="spectrum-Body spectrum-Body--sizeM adobe-ims-organization-note">

app/code/Magento/AdminAdobeIms/view/adminhtml/web/css/source/_module.less

@@ -4,11 +4,6 @@
  */
 
 & when (@media-common = true) {
-    body.adobe-ims-body {
-        background: rgba(0,0,0,0.4);
-        color: rgba(0,0,0,0.4);
-    }
-
     .adobe-ims-root {
         display: flex;
         flex-direction: column;
@@ -24,13 +19,13 @@
         flex: 1 0 auto;
         justify-content: space-evenly;
 
-        .spectrum-Modal {
-            background: #FFFFFF;
+        .adobe-ims-sign-in-modal {
+            background: @color-white;
             height: 581px;
             width: 470px;
         }
 
-        .spectrum-Dialog-content {
+        .adobe-ims-sign-in-dialog {
             display: flex;
             flex-direction: column;
 
@@ -46,7 +41,7 @@
         }
 
         .adobe-ims-note {
-            color: #FFFFFF;
+            color: @color-white;
         }
 
         .adobe-ims-error-message-wrapper {
@@ -56,8 +51,8 @@
 
     .adobe-ims-footer {
         align-items: center;
-        background: #000000;
-        color: #909090;
+        background: @color-black;
+        color: var(--spectrum-global-color-gray-600);
         display: flex;
         flex-shrink: 0;
         height: 39px;