feat(skin): replace vivo-new with vivo, and add vivo-evolution

.github/actions/audit-accessibility/main.js

@@ -246,7 +246,7 @@ const main = async () => {
     }
 
     const stories = getStories().filter((story) => !STORIES_BLACKLIST.has(story));
-    const skins = ['Movistar-new', 'O2-new', 'Vivo-new', 'Blau'];
+    const skins = ['Movistar-new', 'O2-new', 'Vivo', 'Vivo-evolution', 'Blau'];
 
     /**
      * @type Array<[story: string, skin: string]>

.storybook/colors.ts

@@ -5,8 +5,8 @@ export const AVAILABLE_SKINS = [
     'Movistar',
     'O2-new',
     'O2',
-    'Vivo-new',
     'Vivo',
+    'Vivo-evolution',
     'Telefonica',
     'Blau',
     'Esimflag',
@@ -37,7 +37,7 @@ export const getColors = (skin: Skin): SkinTheme => {
                 textSecondary: '#605e5c',
             };
         case 'Vivo':
-        case 'Vivo-new':
+        case 'Vivo-evolution':
             return {
                 primary: '#660099',
                 textPrimary: '#000000',

.storybook/preview.tsx

@@ -11,7 +11,7 @@ import {
     MOVISTAR_SKIN,
     MOVISTAR_NEW_SKIN,
     VIVO_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     O2_SKIN,
     O2_NEW_SKIN,
     TELEFONICA_SKIN,
@@ -39,7 +39,7 @@ const getSkin = (searchParams: URLSearchParams) => {
         O2_SKIN,
         O2_NEW_SKIN,
         VIVO_SKIN,
-        VIVO_NEW_SKIN,
+        VIVO_EVOLUTION_SKIN,
         TELEFONICA_SKIN,
         BLAU_SKIN,
         TU_SKIN,
@@ -133,7 +133,9 @@ const MisticaThemeProvider = ({
             {((skin && colorScheme && platform) || isStoryOnNewTab) && (
                 <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
                     <OverscrollColorProvider>
-                        {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
+                        {(skin === VIVO_SKIN || skin === VIVO_EVOLUTION_SKIN) && (
+                            <style>{`body {font-family: "Vivo Type"}`}</style>
+                        )}
                         {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
                             <style>{`body {font-family: "Telefonica Sans"}`}</style>
                         )}

.storybook/themes.tsx

@@ -4,7 +4,7 @@ import {
     getO2Skin,
     getO2NewSkin,
     getVivoSkin,
-    getVivoNewSkin,
+    getVivoEvolutionSkin,
     getTelefonicaSkin,
     getBlauSkin,
     getTuSkin,
@@ -37,9 +37,9 @@ export const Vivo = {
     skin: getVivoSkin(),
 } as const;
 
-export const Vivo_New = {
+export const Vivo_Evolution = {
     i18n: {locale: 'pt-BR', phoneNumberFormattingRegionCode: 'BR'},
-    skin: getVivoNewSkin(),
+    skin: getVivoEvolutionSkin(),
 } as const;
 
 export const Telefonica = {
@@ -73,7 +73,7 @@ export const AVAILABLE_THEMES = [
     O2,
     O2_New,
     Vivo,
-    Vivo_New,
+    Vivo_Evolution,
     Telefonica,
     Blau,
     Tu,

doc/fonts.md

@@ -8,18 +8,18 @@ default serif font (Times New Roman on desktop). You must declare `@font-face` r
 
 Each skin has a designated font family. Use the correct one for the skin your app is using:
 
-| Skin                         | Getter function        | Font family         |
-| ---------------------------- | ---------------------- | ------------------- |
-| `movistar-new` _(preferred)_ | `getMovistarNewSkin()` | `'Movistar Sans'`   |
-| `movistar` _(legacy)_        | `getMovistarSkin()`    | `'On Air'`          |
-| `o2-new` _(preferred)_       | `getO2NewSkin()`       | `'On Air'`          |
-| `o2` _(legacy)_              | `getO2Skin()`          | `'On Air'`          |
-| `vivo-new` _(preferred)_     | `getVivoNewSkin()`     | `'Vivo Type'`       |
-| `vivo` _(legacy)_            | `getVivoSkin()`        | `'Roboto'`          |
-| `telefonica`                 | `getTelefonicaSkin()`  | `'Telefonica Sans'` |
-| `blau`                       | `getBlauSkin()`        | `'Roboto'`          |
-| `tu`                         | `getTuSkin()`          | `'Telefonica Sans'` |
-| `esimflag`                   | `getEsimflagSkin()`    | `'On Air'`          |
+| Skin                         | Getter function          | Font family         |
+| ---------------------------- | ------------------------ | ------------------- |
+| `movistar-new` _(preferred)_ | `getMovistarNewSkin()`   | `'Movistar Sans'`   |
+| `movistar` _(legacy)_        | `getMovistarSkin()`      | `'On Air'`          |
+| `o2-new` _(preferred)_       | `getO2NewSkin()`         | `'On Air'`          |
+| `o2` _(legacy)_              | `getO2Skin()`            | `'On Air'`          |
+| `vivo`                       | `getVivoSkin()`          | `'Vivo Type'`       |
+| `vivo-evolution`             | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
+| `telefonica`                 | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
+| `blau`                       | `getBlauSkin()`          | `'Roboto'`          |
+| `tu`                         | `getTuSkin()`            | `'Telefonica Sans'` |
+| `esimflag`                   | `getEsimflagSkin()`      | `'On Air'`          |
 
 ## Setting font-family
 

doc/llms/llms.md

@@ -152,13 +152,13 @@ type ThemeConfig = {
 };
 ```
 
-Available skins: `getMovistarNewSkin()`, `getVivoNewSkin()`, `getO2NewSkin()`, `getTelefonicaSkin()`,
-`getBlauSkin()`, `getTuSkin()`, and others via `getSkinByName()`. Legacy variants without the `New` suffix
-also exist (`getMovistarSkin()`, `getVivoSkin()`, `getO2Skin()`); prefer the `New` versions for new projects.
-You can also create a custom skin. If you need to customize default component colors, radii, or other visual
-tokens beyond the props exposed by a component, prefer extending a skin over overriding component styles.
-Built-in palette exports such as `movistarNewPalette`, `o2NewPalette`, `vivoNewPalette`, etc. are available
-for skin authoring, and custom skins may also define their own palette colors from scratch.
+Available skins: `getMovistarNewSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2NewSkin()`,
+`getTelefonicaSkin()`, `getBlauSkin()`, `getTuSkin()`, and others via `getSkinByName()`. Legacy variants
+without the `New` suffix also exist (`getMovistarSkin()`, `getO2Skin()`); prefer the `New` versions for new
+projects. You can also create a custom skin. If you need to customize default component colors, radii, or
+other visual tokens beyond the props exposed by a component, prefer extending a skin over overriding component
+styles. Built-in palette exports such as `movistarNewPalette`, `o2NewPalette`, `vivoPalette`, etc. are
+available for skin authoring, and custom skins may also define their own palette colors from scratch.
 
 Built-in Link integrations: `Next12`, `Next13`, `Next14`, `ReactRouter5`, `ReactRouter6`.
 
@@ -289,7 +289,7 @@ All tokens via `skinVars` from `@telefonica/mistica`:
 - **Colors**: `skinVars.colors.*` (286 tokens for backgrounds, text, borders, controls, status, tags)
 - **Raw colors**: `skinVars.rawColors.*` (same tokens as RGB values, for use with `applyAlpha`)
 - **Palettes for skin authoring**: built-in palette exports such as `movistarNewPalette`, `o2NewPalette`,
-  `vivoNewPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
+  `vivoPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
   directly.
 - **Border radii**: `skinVars.borderRadii.*` (container, button, input, popup, chip, sheet, avatar, tag, etc.)
 - **Spacing**: `skinVars.spacing.*` (button, card, input, tag, feedback, hero, header, drawer padding tokens)

examples/css/index.html

@@ -17,7 +17,8 @@ <h1 class="mistica-text-title4">Mística CSS</h1>
                     <select id="skin-select">
                         <option value="movistar">movistar</option>
                         <option value="o2-new">o2-new</option>
-                        <option value="vivo-new">vivo-new</option>
+                        <option value="vivo">vivo</option>
+                        <option value="vivo-evolution">vivo-evolution</option>
                         <option value="blau">blau</option>
                         <option value="telefonica">telefonica</option>
                         <option value="tu">tu</option>

examples/css/style.css

@@ -7,7 +7,8 @@
 /* Different skins */
 @import url('../../css/o2-new.css');
 @import url('../../css/blau.css');
-@import url('../../css/vivo-new.css');
+@import url('../../css/vivo.css');
+@import url('../../css/vivo-evolution.css');
 @import url('../../css/movistar.css');
 @import url('../../css/telefonica.css');
 @import url('../../css/tu.css');

packages/generate-design-tokens/index.js

@@ -33,7 +33,7 @@ const KNOWN_SKINS = [
     'o2-new',
     'telefonica',
     'vivo',
-    'vivo-new',
+    'vivo-evolution',
     'tu',
     'esimflag',
 ];

packages/import-mistica-icons/index.js

@@ -161,7 +161,7 @@ const createIconComponentSource = async (name, componentName, svgIconsInfo) => {
         let result = '';
         for (let i = 0; i < availableIcons.length; i++) {
             const [skin, filename] = availableIcons[i];
-            // using a match because we want "vivo" to match with "Vivo" and "Vivo-new"
+            // using a match because we want "vivo" to match with "Vivo" and "Vivo-evolution"
             const ifStr = i < availableIcons.length - 1 ? `if (skinName.match(/^${skin}/i))` : '';
             const elseStr = i > 0 ? 'else' : '';
             result += `${elseStr} ${ifStr} {return ${getIconJsx(filename)}}`;

playroom/components/index.tsx

@@ -21,7 +21,7 @@ import {
     O2NewLogo,
     EsimflagLogo,
 } from '../../src';
-import {Movistar_New, Telefonica, Blau, Vivo_New, O2_New, Esimflag} from '../themes';
+import {Movistar_New, Telefonica, Blau, Vivo, Vivo_Evolution, O2_New, Esimflag} from '../themes';
 import {useOverrideTheme} from '../frame-component';
 import IconSun from '../icons/icon-sun';
 import IconMoon from '../icons/icon-moon';
@@ -39,7 +39,7 @@ export * from '../../src/community';
 export {default as Loader} from './loader';
 export {default as Animation} from './animation';
 
-type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo' | 'Movistar' | 'Tu'>;
+type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Movistar' | 'Tu'>;
 
 const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
     const {isDarkMode} = useTheme();
@@ -58,9 +58,14 @@ const themesMap: {
         themeConfig: Movistar_New,
         Icon: () => <BrandIcon Logo={MovistarNewLogo} />,
     },
-    'Vivo-new': {
+    Vivo: {
         text: 'Vivo',
-        themeConfig: Vivo_New,
+        themeConfig: Vivo,
+        Icon: () => <BrandIcon Logo={VivoLogo} />,
+    },
+    'Vivo-evolution': {
+        text: 'Vivo Evolution',
+        themeConfig: Vivo_Evolution,
         Icon: () => <BrandIcon Logo={VivoLogo} />,
     },
     'O2-new': {

playroom/frame-component.tsx

@@ -11,7 +11,7 @@ import {
     useModalState,
     OverscrollColorProvider,
     skinVars,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     TELEFONICA_SKIN,
     O2_SKIN,
     O2_NEW_SKIN,
@@ -53,8 +53,8 @@ export const useOverrideTheme = (): OverrideTheme => React.useContext(ThemeOverr
  * The only OB that has shown interest in having their own lang is Vivo,
  */
 const skinToLang: Record<string, string> = {
-    [VIVO_NEW_SKIN]: 'pt-BR',
     [VIVO_SKIN]: 'pt-BR',
+    [VIVO_EVOLUTION_SKIN]: 'pt-BR',
     [BLAU_SKIN]: 'de-DE',
     [TELEFONICA_SKIN]: 'es-ES',
     [MOVISTAR_SKIN]: 'es-ES',
@@ -91,7 +91,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
     const styles = `
         body {background: ${skinVars.colors.background}}
 
-        ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
+        ${skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
         ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
         ${
             skinName === MOVISTAR_SKIN ||

playroom/themes.tsx

@@ -11,15 +11,17 @@ const common: Partial<ThemeConfig> = {
 } as const;
 
 export const Movistar_New: ThemeConfig = {...themes.Movistar_New, ...common};
-export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common};
+export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
+export const Vivo_Evolution: ThemeConfig = {...themes.Vivo_Evolution, ...common};
 export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
 export const Community_Cyber: ThemeConfig = {...themes.Cyber, ...common};
 
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_New, platformOverrides: {platform: 'ios'}};
-export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
+export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
+export const Vivo_Evolution_iOS: ThemeConfig = {...Vivo_Evolution, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};

src/__screenshot_tests__/button-screenshot-test.tsx

@@ -151,7 +151,7 @@ test('Buttons - Link button - with chevron in Vivo', async () => {
     await openStoryPage({
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
-        skin: 'Vivo-new',
+        skin: 'Vivo',
         args: {
             chevron: true,
         },
@@ -184,7 +184,7 @@ test('Buttons - Link button with chevron and big font size in Vivo', async () =>
     await openStoryPage({
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
-        skin: 'Vivo-new',
+        skin: 'Vivo',
         args: {
             chevron: true,
         },

src/__screenshot_tests__/card-screenshot-test.tsx

@@ -6,7 +6,7 @@ import {
     O2_SKIN,
     TELEFONICA_SKIN,
     TU_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     VIVO_SKIN,
 } from '../skins/constants';
 import {openStoryPage, screen} from '../test-utils';
@@ -323,7 +323,7 @@ test.each`
     ${O2_SKIN}
     ${O2_NEW_SKIN}
     ${VIVO_SKIN}
-    ${VIVO_NEW_SKIN}
+    ${VIVO_EVOLUTION_SKIN}
     ${TELEFONICA_SKIN}
     ${BLAU_SKIN}
     ${TU_SKIN}

src/__screenshot_tests__/carousel-screenshot-test.tsx

@@ -1,5 +1,5 @@
 import {openStoryPage, screen} from '../test-utils';
-import {VIVO_NEW_SKIN} from '../skins/constants';
+import {VIVO_SKIN} from '../skins/constants';
 
 import type {ElementHandle} from 'puppeteer';
 
@@ -75,11 +75,11 @@ test('Carousel mobile with controls and autoplay', async () => {
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
 
-test('Carousel mobile in Vivo new', async () => {
+test('Carousel mobile in Vivo', async () => {
     const page = await openStoryPage({
         id: 'components-carousels-carousel--default',
         device: 'MOBILE_IOS',
-        skin: VIVO_NEW_SKIN,
+        skin: VIVO_SKIN,
     });
 
     expect(await page.screenshot()).toMatchImageSnapshot();

src/__screenshot_tests__/counter-screenshot-test.tsx

@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-evolution', 'Telefonica', 'Blau'] as const;
 
 test.each(SKINS)('Counter default. skin={%s}', async (skin) => {
     await openStoryPage({
@@ -66,7 +66,7 @@ test.each`
             id: 'components-counter--default',
             device: 'DESKTOP',
             args: {min, max, defaultValue, removable, disabled},
-            skin: 'Vivo-new',
+            skin: 'Vivo',
         });
 
         const counter = await screen.findByTestId('counter');

src/__screenshot_tests__/feedback-screenshot-test.tsx

@@ -1,9 +1,9 @@
 import {openStoryPage, setRootFontSize} from '../test-utils';
-import {BLAU_SKIN, MOVISTAR_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {BLAU_SKIN, MOVISTAR_SKIN, O2_NEW_SKIN, VIVO_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_NEW_SKIN, O2_NEW_SKIN, BLAU_SKIN] as const;
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_NEW_SKIN, BLAU_SKIN] as const;
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 const feedbackTypes = [
     'successfeedbackscreen--success',
@@ -87,11 +87,11 @@ test('Info feedback screen with custom icon', async () => {
 });
 
 test.each(testableDevices)(
-    'Success feedback screen appears properly with Vivo New skin on %s',
+    'Success feedback screen appears properly with Vivo skin on %s',
     async (device) => {
         const page = await openStoryPage({
             id: 'patterns-feedback-successfeedbackscreen--success',
-            skin: VIVO_NEW_SKIN,
+            skin: VIVO_SKIN,
             device,
         });
 

src/__screenshot_tests__/logo-screenshot-test.tsx

@@ -8,7 +8,7 @@ const SKINS: Array<KnownSkinName> = [
     'O2',
     'O2-new',
     'Vivo',
-    'Vivo-new',
+    'Vivo-evolution',
     'Telefonica',
     'Blau',
     'Esimflag',
@@ -20,7 +20,7 @@ const DARK_MODE_VALUES = [false, true];
 const getBrandLogoCases = () => {
     const cases = [];
     for (const skin of SKINS) {
-        if (skin !== 'Vivo-new') {
+        if (skin !== 'Vivo-evolution') {
             for (const type of LOGO_TYPES) {
                 for (const isInverse of INVERSE_VALUES) {
                     for (const isDarkMode of DARK_MODE_VALUES) {

src/__screenshot_tests__/private-skin-components-screenshot-test.tsx

@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
 
 test.each(SKINS)('Components in %s', async (skin) => {
     await openStoryPage({