chore(doc, snippets): Exposing Mística CSS in readme and snippet fixes (

#1252)

I took the opportunity to fix some snippets that was using old props and
fixing some urls that are broken

---------

Co-authored-by: marcoskolodny <[email protected]>

README.md

@@ -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
 
@@ -116,6 +116,7 @@ Start prototyping interfaces with Mistica components in the
 - [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
 
@@ -128,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)
@@ -141,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.

examples/css/README.md

@@ -1,9 +1,9 @@
-# Mistica css
+# Mística CSS
 
-If you can't use the Mistica React components in your project, you can still use the Mistica css to style your
+If you can't use the Mística React components in your project, you can still use the Mística CSS to style your
 app.
 
-Mistica css is a set of stylesheets that you can use to style your app with the design tokens of the system.
+Mística CSS is a set of stylesheets that you can use to style your app with the design tokens of the system.
 It includes css custom properties (css variables) for colors, border radius, typography, etc.
 
 ## How to use