@telefonica/mistica 15.20.0 → 16.0.0

package/css/blau.css

@@ -71,33 +71,33 @@
     --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
     --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
     --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
-    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
-    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-blau-blauRed10);
+    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
     --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
-    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-blau-blauRed10);
-    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-blau-blauPurple10);
-    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-blau-blauRed10);
+    --mistica-color-buttonLinkBackgroundPressed: var(--mistica-blau-blauPurple10);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
     --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
-    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
-    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBluePrimary30);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBluePrimary30);
     --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
-    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
     --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
-    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary10);
-    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
-    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.2);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.2);
     --mistica-color-textButtonPrimary: var(--mistica-blau-white);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
-    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
-    --mistica-color-textButtonSecondarySelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
-    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-white);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-white);
     --mistica-color-textLink: var(--mistica-blau-blauPurple);
     --mistica-color-textLinkInverse: var(--mistica-blau-white);
     --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
@@ -228,9 +228,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 300;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 300;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -264,33 +265,33 @@
     --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
     --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
     --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
-    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
-    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
     --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
-    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
-    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
-    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
     --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
-    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
-    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
     --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
-    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
     --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
-    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
     --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
-    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-grey2);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-grey2);
     --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
-    --mistica-color-textButtonSecondarySelected: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
-    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
     --mistica-color-textLink: var(--mistica-blau-blauPurple30);
     --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
     --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
@@ -403,36 +404,36 @@
         --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
         --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
         --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
-        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
-        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
         --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
-        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
             var(--mistica-blau-raw-blauPurple),
             0.3
         );
-        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
-        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
         --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
-        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
-        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
-        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-white);
         --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.15);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
-        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
         --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
-        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-grey2);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-grey2);
         --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
-        --mistica-color-textButtonSecondarySelected: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-grey2);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
-        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-grey2);
         --mistica-color-textLink: var(--mistica-blau-blauPurple30);
         --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
         --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
@@ -544,33 +545,33 @@
         --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
         --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
         --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
-        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-blau-blauRed70);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
-        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-blau-blauRed10);
+        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-blau-blauRed10);
         --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
-        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-blau-blauRed10);
-        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-blau-blauPurple10);
-        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-blau-blauRed10);
+        --mistica-color-buttonLinkBackgroundPressed: var(--mistica-blau-blauPurple10);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.15);
         --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
-        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
-        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBluePrimary30);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-blau-blauBluePrimary30);
         --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
-        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
-        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-blau-blauBlueSecondary10);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
-        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-blau-white);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
-        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.2);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-blau-raw-white), 0.2);
         --mistica-color-textButtonPrimary: var(--mistica-blau-white);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
-        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
-        --mistica-color-textButtonSecondarySelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-blau-blauBlueSecondary60);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
-        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-white);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-blau-white);
         --mistica-color-textLink: var(--mistica-blau-blauPurple);
         --mistica-color-textLinkInverse: var(--mistica-blau-white);
         --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
@@ -683,7 +684,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

package/css/mistica-common.css

@@ -85,6 +85,11 @@
     line-height: var(--mistica-line-height-title2);
     font-weight: var(--mistica-font-weight-title2);
 }
+.mistica-text-title3 {
+    font-size: var(--mistica-font-size-title3);
+    line-height: var(--mistica-line-height-title3);
+    font-weight: var(--mistica-font-weight-title3);
+}
 .mistica-text-indicator {
     font-size: var(--mistica-font-size-indicator);
     line-height: var(--mistica-line-height-indicator);