feat(css): update tertiary background color

Changes to be committed: modified: src/style.scss
AlaskaAirlines · Sep 14, 2022 · 615d5d6 · 615d5d6
1 parent c33d9ec
commit 615d5d6
Showing 1 changed file with 15 additions and 8 deletions.
diff --git 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;
           }
         }