Navi: Replace active indicator mixin with CSS variable

Bug: 973674
Change-Id: I88399b1b8a9b3cf82caa08ea11c0525294edcd7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1674454Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672202}

chrome/browser/resources/welcome/onboarding_welcome/shared/navi_colors_css.html

@@ -20,10 +20,8 @@
         --navi-shape-red-color: rgb(233, 66, 53); /* #E94235 */
         --navi-shape-yellow-dots-color: rgb(253, 214, 99); /* #FDD663 */
         --navi-shape-yellow-semicircle-color: rgb(250, 207, 76); /* #FACF4C */
-        --navi-step-indicator-active: {
-          background: var(--google-blue-600);
-          opacity: .5;  /* Only in light mode */
-        };
+        --navi-step-indicator-active-color:
+            rgba(var(--google-blue-600-rgb), .5);
         --navi-step-indicator-color: var(--google-grey-200);
         --navi-wallpaper-text-color: var(--google-grey-refresh-700);
       }
@@ -43,9 +41,7 @@
           --navi-shape-red-color: rgb(238, 103, 92); /* #EE675C */
           /* --navi-shape-yellow-dots-color is same color in dark mode */
           --navi-shape-yellow-semicircle-color: rgb(253, 214, 99); /* #FDD663 */
-          --navi-step-indicator-active: {
-            background: var(--google-blue-refresh-300);
-          };
+          --navi-step-indicator-active-color: var(--google-blue-refresh-300);
           --navi-step-indicator-color: var(--google-grey-refresh-500);
           --navi-wallpaper-text-color: var(--google-grey-200);
         }

chrome/browser/resources/welcome/onboarding_welcome/shared/step_indicator.html

@@ -21,7 +21,7 @@
       }
 
       span.active {
-        @apply --navi-step-indicator-active;
+        background: var(--navi-step-indicator-active-color);
       }
     </style>
     <template is="dom-repeat" items="[[dots_]]">