From 615d5d6606e3325e6b254911a3fe1ff6aed5d371 Mon Sep 17 00:00:00 2001
From: Dale Sande <dale.sande@gmail.com>
Date: Mon, 18 Jul 2022 15:34:46 -0700
Subject: [PATCH] feat(css): update tertiary background color

Changes to be committed:
modified:   src/style.scss
---
 src/style.scss | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/style.scss b/src/style.scss
index f5d19cc..86e3cab 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -18,6 +18,13 @@
 
 $auro-inset-spacing-options: lg;
 $auro-inset-directions:'--squish';
+
+// TO-DO
+// Sass and CSS variables do not process together
+// These values should be moved to Auro Design Tokens for use
+$auro-rgb-color-base-black-03: rgba(0, 0, 0, .03);
+$auro-rgb-color-base-white-03: rgba(255, 255, 255, .03);
+
 @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/insetUtility";
 
 // focus-visible mixin
@@ -209,7 +216,7 @@ slot {
 
   // auro-button--tertiary
   &--tertiary {
-    background-color: transparent;
+    background-color: $auro-rgb-color-base-black-03;
     border-color: transparent;
     color: var(--auro-color-text-link-on-light);
 
@@ -231,13 +238,12 @@ slot {
       transform: unset;
 
       color: rgba($auro-color-text-link-on-light, $disabledOPacity);
-      background-color: transparent;
-      border: transparent;
+      background-color: $auro-rgb-color-base-black-03;
+      border: 1px solid transparent;
 
       @media (hover: hover) {
         &:hover {
-          color: rgba($auro-color-text-link-on-light, $disabledOPacity);
-          background-color: transparent;
+          background-color: $auro-rgb-color-base-black-03;
           border: 1px solid transparent;
         }
       }
@@ -327,7 +333,7 @@ slot {
 
     // auro-button--tertiary
     &--tertiary {
-      background-color: transparent;
+      background-color: $auro-rgb-color-base-white-03;
       border: 1px solid transparent;
       color: var(--auro-color-ui-default-on-dark);
 
@@ -349,13 +355,14 @@ slot {
       &:disabled {
         cursor: not-allowed;
         transform: unset;
-        background-color: transparent;
+        background-color: $auro-rgb-color-base-white-03;
         border: transparent;
+        color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
 
         @media (hover: hover) {
           &:hover {
+            background-color: $auro-rgb-color-base-white-03;
             color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
-            background-color: transparent;
             border: transparent;
           }
         }