change login button to simulate "ghost button" in appearance

Fixes: CNVS-33551

note:
- this change was to address a11y issues reported in
  CNVS-33476 and CNVS-33477 ***

test plan:
- as a user navigate to the unthemed canvas login screen
- the login button as well as the "request password" button
  have been updated to look like the inst-ui ghost button
- as an admin navigate to an account to test the theming of the
  login button to ensure still looks/functions as expected
- take a spin with the  minimalist, state and possibly a
  custom theme to ensure the "login link color" is applied
  to the login button
- example view: https://www.screencast.com/t/hmp2Ny8E

Change-Id: Iad76a3d3be144503b62552566bc89f65118e7ca4
Reviewed-on: https://gerrit.instructure.com/97001
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: Dan Sasaki
Product-Review: Colleen Palmer <colleen@instructure.com>

app/stylesheets/brandable_variables.json

@@ -192,16 +192,6 @@
     "type": "color",
     "default": "#ffffff"
   },
-  {
-    "variable_name": "ic-brand-Login-Content-button-bgd",
-    "type": "color",
-    "default": "#008EE2"
-  },
-  {
-    "variable_name": "ic-brand-Login-Content-button-text",
-    "type": "color",
-    "default": "#ffffff"
-  },
   {
     "variable_name": "ic-brand-Login-footer-link-color",
     "type": "color",

app/stylesheets/pages/login/_ic-login.scss

@@ -21,8 +21,6 @@
 // ic-brand-Login-Content-inner-body-border
 // ic-brand-Login-Content-label-text-color
 // ic-brand-Login-Content-password-text-color
-// ic-brand-Login-Content-button-bgd
-// ic-brand-Login-Content-button-text
 // ic-brand-Login-footer-link-color
 // ic-brand-Login-footer-link-color-hover
 // ic-brand-Login-instructure-logo
@@ -157,9 +155,36 @@ body.ic-Login-Body { // apply the background to the body element so that you don
   .ic-Form-control {
     margin-bottom: 0; // override to help vertical alignment
   }
-  button.Button--login {
+  // simulating a ghost button to work for default high contrast login screen
+  .Button--login {
     padding: $ic-sp/2 $ic-sp*3;
-    @include canvas-button($ic-brand-Login-Content-button-bgd,  $ic-brand-Login-Content-button-text);
+    background: transparent;
+    color: $ic-brand-Login-Content-password-text-color;
+    border: 1px solid $ic-brand-Login-Content-password-text-color;
+    overflow: visible;
+
+    &:hover {
+      background: rgba($ic-brand-Login-Content-password-text-color, 0.1);
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -0.2857rem;
+      left: -0.2857rem;
+      right: -0.2857rem;
+      bottom: -0.2857rem;
+      border: 1px solid $ic-brand-Login-Content-password-text-color;
+      border-radius: 0.2857rem;
+      opacity: 0;
+    }
+
+    &:focus {
+      box-shadow: none;
+      &::before {
+        opacity: 1;
+      }
+    }
   }
 }
 //////////
@@ -268,7 +293,7 @@ body.ic-Login-Body #footer.ic-Login-footer {
 // Logout
 ////
 .Button--logout-confirm {
-  @include canvas-button($ic-brand-Login-Content-button-bgd,  $ic-brand-Login-Content-button-text);
+  @include canvas-button($ic-brand-Login-Content-password-text-color,  $ic-brand-Login-Content-password-text-color)
 }
 .Button--logout-link {
   color: $ic-brand-Login-footer-link-color;

app/views/login/canvas/_new_login_content.html.erb

@@ -53,7 +53,7 @@
                 </div>
               </div>
               <div class="ic-Form-control ic-Form-control--login">
-                <button type="<%= login_btn_type %>" class="Button Button--primary Button--login">
+                <button type="<%= login_btn_type %>" class="Button Button--login">
                   <%= t('log_in', 'Log In') %>
                 </button>
               </div>
@@ -74,7 +74,7 @@
             <div class="ic-Form-control ic-Form-control--login">
               <div class="ic-Login__actions">
                 <%= link_to t('back_to_login', "Back to Login"), login_path, :class => "ic-Login__actions--left ic-Login__link login_link"%>
-                <button type="<%= forgot_password_btn_type %>" class="Button Button--primary Button--login">
+                <button type="<%= forgot_password_btn_type %>" class="Button Button--login">
                   <%= t('buttons.request_password', 'Request Password') %>
                 </button>
               </div> <!-- end ic-Login__actions -->

lib/brandable_css.rb

@@ -53,8 +53,6 @@ module BrandableCSS
     "ic-brand-Login-Content-inner-body-border" => lambda { I18n.t("Form Border") },
     "ic-brand-Login-Content-label-text-color" => lambda { I18n.t("Login Label") },
     "ic-brand-Login-Content-password-text-color" => lambda { I18n.t("Login Link Color") },
-    "ic-brand-Login-Content-button-bgd" => lambda { I18n.t("Login Button") },
-    "ic-brand-Login-Content-button-text" => lambda { I18n.t("Login Button Text") },
     "ic-brand-Login-footer-link-color" => lambda { I18n.t("Login Footer Link") },
     "ic-brand-Login-footer-link-color-hover" => lambda { I18n.t("Login Footer Link Hover") },
     "ic-brand-Login-instructure-logo" => lambda { I18n.t("Login Instructure Logo") }