Navi: Replace active indicator mixin with CSS variable
Bug: 973674
Change-Id: I88399b1b8a9b3cf82caa08ea11c0525294edcd7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1674454
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672202}
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/shared/navi_colors_css.html b/chrome/browser/resources/welcome/onboarding_welcome/shared/navi_colors_css.html
index 5973c32..45b22f1 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/shared/navi_colors_css.html
+++ b/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);
}
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/shared/step_indicator.html b/chrome/browser/resources/welcome/onboarding_welcome/shared/step_indicator.html
index 4ee644b..4123eb5 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/shared/step_indicator.html
+++ b/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_]]">
