npm - @telefonica/mistica - Versions diffs - 15.20.1 → 16.1.0 - Mend

@telefonica/mistica 15.20.1 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3890) hide show

package/README.md CHANGED Viewed

@@ -1,7 +1,7 @@
 ![Mistica for Web](img/mistica-web-light.svg#gh-light-mode-only)
 ![Mistica for Web](img/mistica-web-dark.svg#gh-dark-mode-only)
-React components library for Telefonica Design System ([Mistica](https://github.com/Telefonica/mistica))
+React components library for Telefonica Design System ([Mística](https://github.com/Telefonica/mistica))
 ![Node.js CI](https://github.com/Telefonica/mistica-web/workflows/Node.js%20CI/badge.svg)
@@ -85,7 +85,7 @@ that case we recommend to extract it to an external `const` variable outside of
 object reference will be the same in every re-render. If for some reason the `theme` must be dynamic in your
 app, consider to memoize it (for example, with `React.useMemo` hook).
-### Mistica in Next.js app router
+### Mística in Next.js app router
 If you are using Next.js app router, we highly recommend enabling the following experimental config:
@@ -103,7 +103,7 @@ read this Next blog post: https://vercel.com/blog/how-we-optimized-package-impor
 Explore the components in [Mistica storybook](https://mistica-web.vercel.app)
 Start prototyping interfaces with Mistica components in the
-[Mistica playroom](https://mistica-web.vercel.app/playroom)
+[Mística playroom](https://mistica-web.vercel.app/playroom)
 ## More docs
@@ -115,6 +115,8 @@ Start prototyping interfaces with Mistica components in the
 - [Analytics](https://github.com/Telefonica/mistica-web/blob/master/doc/analytics.md)
 - [Fonts](https://github.com/Telefonica/mistica-web/blob/master/doc/fonts.md)
 - [Testing notes](https://github.com/Telefonica/mistica-web/blob/master/doc/testing.md)
+- [Using Lottie](https://github.com/Telefonica/mistica-web/blob/master/doc/lottie.md)
+- [Mística CSS](https://github.com/Telefonica/mistica-web/blob/master/examples/css/README.md)
 ## Development
@@ -127,11 +129,11 @@ Start prototyping interfaces with Mistica components in the
 - `yarn storybook`: starts storybook
 - `yarn playroom`: starts playroom
-## More about Mistica
+## More about Mística
-- [Mistica, the Telefonica Design System](https://github.com/Telefonica/mistica)
+- [Mística, the Telefonica Design System](https://github.com/Telefonica/mistica)
-### Mistica in other platforms
+### Mística in other platforms
 - [Android](https://github.com/Telefonica/mistica-android)
 - [iOS](https://github.com/Telefonica/mistica-ios)
@@ -140,10 +142,10 @@ Start prototyping interfaces with Mistica components in the
 See [CONTRIBUTING.md](https://github.com/Telefonica/mistica-web/blob/master/CONTRIBUTING.md)
-### Mistica Community
+### Mística Community
-About [Mistica Community](https://mistica-web.vercel.app/?path=/story/community-welcome--default)
+About [Mística Community](https://mistica-web.vercel.app/?path=/story/community-welcome--default)
-If you are building a Mistica Community component, place it inside the
+If you are building a Mística Community component, place it inside the
 [`src/community` folder](src/community/) and don't forget to export it in the
 [`src/community/index.ts`](src/community/index.tsx) file to make it public.

package/css/blau.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);