Migrates the SCSS variables in rgba to CSS in color-mix

Co-authored-by: Jane Sandberg <[email protected]>

src/components/LuxAutocompleteInput.vue

@@ -301,7 +301,8 @@ $color-placeholder: tint($color-grayscale, 50%);
 
     &:hover,
     &[hover] {
-      box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
+      box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
+        0 0 0 1px tint($color-rich-black, 60%);
     }
     &:focus,
     &[focus] {
@@ -316,7 +317,8 @@ $color-placeholder: tint($color-grayscale, 50%);
   @include reset;
   background: var(--color-white);
   border-radius: var(--border-radius-default);
-  box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
+  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
+    0 0 0 1px tint($color-rich-black, 80%);
 }
 
 .lux-autocomplete-results {

src/components/LuxDataTable.vue

@@ -402,13 +402,14 @@ export default {
       background-color: var(--color-white);
       border: 0;
       border-radius: $border-radius-default;
-      box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07),
+      box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
         0 0 0 1px tint($color-rich-black, 80%);
     }
 
     /* On mouse-over, add a grey background color */
     input:not([disabled]):hover::before {
-      box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
+      box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
+        0 0 0 1px tint($color-rich-black, 60%);
     }
 
     input:checked::before {

src/components/LuxInputSelect.vue

@@ -242,7 +242,7 @@ $color-placeholder: tint($color-grayscale, 50%);
     }
 
     &[disabled] {
-      box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07),
+      box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
         0 0 0 1px tint($color-rich-black, 80%);
       background: lighten($color-placeholder, 42%);
       cursor: not-allowed;

src/components/LuxInputText.vue

@@ -411,7 +411,7 @@ $color-placeholder: tint(rgb(149, 156, 167), 50%);
     }
     &[disabled],
     &.disabled {
-      box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07),
+      box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-rich-black) 7%, transparent),
         0 0 0 1px tint($color-rich-black, 80%);
       background: lighten($color-placeholder, 42%);
       cursor: not-allowed;

src/components/LuxLoader.vue

@@ -54,11 +54,11 @@ export default {
 @import "../assets/styles/system.scss";
 
 // $border-color: var(--color-white);
-$border-color: $color-princeton-orange-on-white;
 .lux-loader {
   @include reset;
   @include stack-space($space-base);
   color: var(--color-rich-black);
+  --border-color: var(--color-princeton-orange-on-white);
 }
 
 .lux-loader,
@@ -69,14 +69,10 @@ $border-color: $color-princeton-orange-on-white;
 .lux-loader {
   transform: translate(-50%, -50%);
   text-indent: -9999em;
-  border-top: 1.1em solid rgba($border-color, 0.2);
-  border-right: 1.1em solid rgba($border-color, 0.2);
-  border-bottom: 1.1em solid rgba($border-color, 0.2);
-  border-left: 1.1em solid rgba($border-color, 1);
-  // border-top: 1.1em solid rgba(var(--border-color), 0.2);
-  // border-right: 1.1em solid rgba(var(--border-color), 0.2);
-  // border-bottom: 1.1em solid rgba(var(--border-color), 0.2);
-  // border-left: 1.1em solid rgba(var(--border-color), 1);
+  border-top: 1.1em solid color-mix(in srgb, var(--border-color) 20%, transparent);
+  border-right: 1.1em solid color-mix(in srgb, var(--border-color) 20%, transparent);
+  border-bottom: 1.1em solid color-mix(in srgb, var(--border-color) 20%, transparent);
+  border-left: 1.1em solid var(--border-color);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);