feat(skin): Improve color contrast in Blau skin (#1369)

Also include https://jira.tid.es/browse/WEB-2246

---------

Co-authored-by: yceballost <yceballost@users.noreply.github.com>
Co-authored-by: Ignacio Ceballos (Yayo) <yceballost@gmail.com>
Co-authored-by: Abel Toledano <atoledano@tuenti.com>

Author: 3 people

css/blau.css

@@ -123,6 +123,8 @@
     --mistica-color-textActivated: var(--mistica-esimflag-blue);
     --mistica-color-textBrand: var(--mistica-esimflag-blue);
     --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
+    --mistica-color-completedStep: var(--mistica-esimflag-blue);
+    --mistica-color-completedStepInverse: var(--mistica-esimflag-blue80);
     --mistica-color-control: var(--mistica-esimflag-grey4);
     --mistica-color-controlActivated: var(--mistica-esimflag-blue);
     --mistica-color-controlInverse: var(--mistica-esimflag-blue20);
@@ -336,6 +338,8 @@
     --mistica-color-textActivated: var(--mistica-esimflag-blue30);
     --mistica-color-textBrand: var(--mistica-esimflag-blue30);
     --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
+    --mistica-color-completedStep: var(--mistica-esimflag-blue);
+    --mistica-color-completedStepInverse: var(--mistica-esimflag-blue);
     --mistica-color-control: var(--mistica-esimflag-grey4);
     --mistica-color-controlActivated: var(--mistica-esimflag-blue);
     --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
@@ -500,6 +504,8 @@
         --mistica-color-textActivated: var(--mistica-esimflag-blue30);
         --mistica-color-textBrand: var(--mistica-esimflag-blue30);
         --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
+        --mistica-color-completedStep: var(--mistica-esimflag-blue);
+        --mistica-color-completedStepInverse: var(--mistica-esimflag-blue);
         --mistica-color-control: var(--mistica-esimflag-grey4);
         --mistica-color-controlActivated: var(--mistica-esimflag-blue);
         --mistica-color-controlInverse: var(--mistica-esimflag-grey4);
@@ -670,6 +676,8 @@
         --mistica-color-textActivated: var(--mistica-esimflag-blue);
         --mistica-color-textBrand: var(--mistica-esimflag-blue);
         --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
+        --mistica-color-completedStep: var(--mistica-esimflag-blue);
+        --mistica-color-completedStepInverse: var(--mistica-esimflag-blue80);
         --mistica-color-control: var(--mistica-esimflag-grey4);
         --mistica-color-controlActivated: var(--mistica-esimflag-blue);
         --mistica-color-controlInverse: var(--mistica-esimflag-blue20);

css/esimflag.css

@@ -114,6 +114,8 @@
     --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
     --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
     --mistica-color-inputBorder: var(--mistica-movistar-grey4);
+    --mistica-color-completedStep: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-completedStepInverse: var(--mistica-movistar-movistarBlue55);
     --mistica-color-control: var(--mistica-movistar-grey4);
     --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlInverse: var(--mistica-movistar-movistarBlue20);
@@ -327,6 +329,8 @@
     --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
     --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
     --mistica-color-inputBorder: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-completedStep: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-completedStepInverse: var(--mistica-movistar-movistarBlueHC);
     --mistica-color-control: var(--mistica-movistar-darkModeGrey4);
     --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlInverse: var(--mistica-movistar-darkModeGrey4);
@@ -491,6 +495,8 @@
         --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
         --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
         --mistica-color-inputBorder: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-completedStep: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-completedStepInverse: var(--mistica-movistar-movistarBlueHC);
         --mistica-color-control: var(--mistica-movistar-darkModeGrey4);
         --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlInverse: var(--mistica-movistar-darkModeGrey4);
@@ -648,6 +654,8 @@
         --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
         --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
         --mistica-color-inputBorder: var(--mistica-movistar-grey4);
+        --mistica-color-completedStep: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-completedStepInverse: var(--mistica-movistar-movistarBlue55);
         --mistica-color-control: var(--mistica-movistar-grey4);
         --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlInverse: var(--mistica-movistar-movistarBlue20);

css/movistar.css

@@ -120,6 +120,8 @@
     --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
     --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
     --mistica-color-inputBorder: var(--mistica-o2-new-grey45);
+    --mistica-color-completedStep: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-completedStepInverse: var(--mistica-o2-new-beyondBlue70);
     --mistica-color-control: var(--mistica-o2-new-grey45);
     --mistica-color-controlActivated: var(--mistica-o2-new-beyondBlue);
     --mistica-color-controlInverse: var(--mistica-o2-new-white);
@@ -333,6 +335,8 @@
     --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
     --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
     --mistica-color-inputBorder: var(--mistica-o2-new-grey45);
+    --mistica-color-completedStep: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-completedStepInverse: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-control: var(--mistica-o2-new-grey45);
     --mistica-color-controlActivated: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-controlInverse: var(--mistica-o2-new-grey45);
@@ -491,6 +495,8 @@
         --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
         --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
         --mistica-color-inputBorder: var(--mistica-o2-new-grey45);
+        --mistica-color-completedStep: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-completedStepInverse: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-control: var(--mistica-o2-new-grey45);
         --mistica-color-controlActivated: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-controlInverse: var(--mistica-o2-new-grey45);
@@ -658,6 +664,8 @@
         --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
         --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
         --mistica-color-inputBorder: var(--mistica-o2-new-grey45);
+        --mistica-color-completedStep: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-completedStepInverse: var(--mistica-o2-new-beyondBlue70);
         --mistica-color-control: var(--mistica-o2-new-grey45);
         --mistica-color-controlActivated: var(--mistica-o2-new-beyondBlue);
         --mistica-color-controlInverse: var(--mistica-o2-new-white);

css/o2-new.css

@@ -105,6 +105,8 @@
     --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary);
     --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary);
     --mistica-color-inputBorder: var(--mistica-o2-grey3);
+    --mistica-color-completedStep: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-completedStepInverse: var(--mistica-o2-o2BluePrimary70);
     --mistica-color-control: var(--mistica-o2-grey3);
     --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary);
     --mistica-color-controlInverse: var(--mistica-o2-o2BluePrimary30);
@@ -318,6 +320,8 @@
     --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-inputBorder: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-completedStep: var(--mistica-o2-darkModeO2BluePrimary);
+    --mistica-color-completedStepInverse: var(--mistica-o2-darkModeO2BluePrimary);
     --mistica-color-control: var(--mistica-o2-darkModeGrey6);
     --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-controlInverse: var(--mistica-o2-darkModeGrey6);
@@ -476,6 +480,8 @@
         --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-inputBorder: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-completedStep: var(--mistica-o2-darkModeO2BluePrimary);
+        --mistica-color-completedStepInverse: var(--mistica-o2-darkModeO2BluePrimary);
         --mistica-color-control: var(--mistica-o2-darkModeGrey6);
         --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-controlInverse: var(--mistica-o2-darkModeGrey6);
@@ -633,6 +639,8 @@
         --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary);
         --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary);
         --mistica-color-inputBorder: var(--mistica-o2-grey3);
+        --mistica-color-completedStep: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-completedStepInverse: var(--mistica-o2-o2BluePrimary70);
         --mistica-color-control: var(--mistica-o2-grey3);
         --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary);
         --mistica-color-controlInverse: var(--mistica-o2-o2BluePrimary30);

css/o2.css

@@ -106,6 +106,8 @@
     --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-inputBorder: var(--mistica-telefonica-grey4);
+    --mistica-color-completedStep: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-completedStepInverse: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-control: var(--mistica-telefonica-grey3);
     --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
@@ -319,6 +321,8 @@
     --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-inputBorder: var(--mistica-telefonica-grey5);
+    --mistica-color-completedStep: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-completedStepInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-control: var(--mistica-telefonica-darkModeGrey6);
     --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6);
@@ -486,6 +490,8 @@
         --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-inputBorder: var(--mistica-telefonica-grey5);
+        --mistica-color-completedStep: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-completedStepInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-control: var(--mistica-telefonica-darkModeGrey6);
         --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6);
@@ -652,6 +658,8 @@
         --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-inputBorder: var(--mistica-telefonica-grey4);
+        --mistica-color-completedStep: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-completedStepInverse: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-control: var(--mistica-telefonica-grey3);
         --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-controlInverse: var(--mistica-telefonica-grey1);

css/telefonica.css

@@ -108,6 +108,8 @@
     --mistica-color-textActivated: var(--mistica-tu-primary);
     --mistica-color-textBrand: var(--mistica-tu-blue);
     --mistica-color-inputBorder: var(--mistica-tu-grey5);
+    --mistica-color-completedStep: var(--mistica-tu-primary);
+    --mistica-color-completedStepInverse: var(--mistica-tu-primary80);
     --mistica-color-control: var(--mistica-tu-grey5);
     --mistica-color-controlActivated: var(--mistica-tu-primary);
     --mistica-color-controlInverse: var(--mistica-tu-white);
@@ -321,6 +323,8 @@
     --mistica-color-textActivated: var(--mistica-tu-blue30);
     --mistica-color-textBrand: var(--mistica-tu-blue30);
     --mistica-color-inputBorder: var(--mistica-tu-grey5);
+    --mistica-color-completedStep: var(--mistica-tu-grey2);
+    --mistica-color-completedStepInverse: var(--mistica-tu-grey2);
     --mistica-color-control: var(--mistica-tu-darkModeGrey6);
     --mistica-color-controlActivated: var(--mistica-tu-blue30);
     --mistica-color-controlInverse: var(--mistica-tu-darkModeGrey6);
@@ -479,6 +483,8 @@
         --mistica-color-textActivated: var(--mistica-tu-blue30);
         --mistica-color-textBrand: var(--mistica-tu-blue30);
         --mistica-color-inputBorder: var(--mistica-tu-grey5);
+        --mistica-color-completedStep: var(--mistica-tu-grey2);
+        --mistica-color-completedStepInverse: var(--mistica-tu-grey2);
         --mistica-color-control: var(--mistica-tu-darkModeGrey6);
         --mistica-color-controlActivated: var(--mistica-tu-blue30);
         --mistica-color-controlInverse: var(--mistica-tu-darkModeGrey6);
@@ -636,6 +642,8 @@
         --mistica-color-textActivated: var(--mistica-tu-primary);
         --mistica-color-textBrand: var(--mistica-tu-blue);
         --mistica-color-inputBorder: var(--mistica-tu-grey5);
+        --mistica-color-completedStep: var(--mistica-tu-primary);
+        --mistica-color-completedStepInverse: var(--mistica-tu-primary80);
         --mistica-color-control: var(--mistica-tu-grey5);
         --mistica-color-controlActivated: var(--mistica-tu-primary);
         --mistica-color-controlInverse: var(--mistica-tu-white);

css/tu.css

@@ -101,6 +101,8 @@
     --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-inputBorder: var(--mistica-vivo-new-grey4);
+    --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-control: var(--mistica-vivo-new-grey4);
     --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
@@ -167,7 +169,7 @@
     --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeDark);
     --mistica-color-tagTextError: var(--mistica-vivo-new-pepperDark80);
     --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-grey1);
     --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
     --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-vivoGreenLight10);
@@ -314,6 +316,8 @@
     --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-inputBorder: var(--mistica-vivo-new-darkModeGrey5);
+    --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurpleLight80);
+    --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-control: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
@@ -478,6 +482,8 @@
         --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-inputBorder: var(--mistica-vivo-new-darkModeGrey5);
+        --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurpleLight80);
+        --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-control: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
@@ -638,6 +644,8 @@
         --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-inputBorder: var(--mistica-vivo-new-grey4);
+        --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-control: var(--mistica-vivo-new-grey4);
         --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
@@ -704,7 +712,7 @@
         --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeDark);
         --mistica-color-tagTextError: var(--mistica-vivo-new-pepperDark80);
         --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-grey1);
         --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
         --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-vivoGreenLight10);