feat(skin)!: replace Movistar skin with Movistar-new

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

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

.storybook/colors.ts

@@ -1,7 +1,6 @@
 import {palette as cyberPalette} from '../src/community/skins/cyber-skin';
 
 export const AVAILABLE_SKINS = [
-    'Movistar-new',
     'Movistar',
     'O2',
     'Vivo',
@@ -22,13 +21,6 @@ type SkinTheme = {primary: string; textPrimary: string; textPrimaryInverse: stri
 export const getColors = (skin: Skin): SkinTheme => {
     switch (skin) {
         case 'Movistar':
-            return {
-                primary: '#019DF4',
-                textPrimary: '#0B2739',
-                textPrimaryInverse: '#FFFFFF',
-                textSecondary: '#6B6C6F',
-            };
-        case 'Movistar-new':
             return {
                 primary: '#0066FF',
                 textPrimary: '#262423',

.storybook/preview.tsx

@@ -9,7 +9,6 @@ import * as React from 'react';
 import {
     ThemeContextProvider,
     MOVISTAR_SKIN,
-    MOVISTAR_NEW_SKIN,
     VIVO_SKIN,
     VIVO_EVOLUTION_SKIN,
     O2_SKIN,
@@ -33,7 +32,6 @@ const getSkin = (searchParams: URLSearchParams) => {
     const qsSkin = searchParams.get('skin');
     return [
         MOVISTAR_SKIN,
-        MOVISTAR_NEW_SKIN,
         O2_SKIN,
         VIVO_SKIN,
         VIVO_EVOLUTION_SKIN,
@@ -133,10 +131,10 @@ const MisticaThemeProvider = ({
                             <style>{`body {font-family: "Vivo Type"}`}</style>
                         )}
                         {skin === TELEFONICA_SKIN && <style>{`body {font-family: "Telefonica Sans"}`}</style>}
-                        {(skin === MOVISTAR_SKIN || skin === O2_SKIN || skin === ESIMFLAG_SKIN) && (
+                        {(skin === O2_SKIN || skin === ESIMFLAG_SKIN) && (
                             <style>{`body {font-family: "On Air"}`}</style>
                         )}
-                        {skin === MOVISTAR_NEW_SKIN && <style>{`body {font-family: "Movistar Sans"}`}</style>}
+                        {skin === MOVISTAR_SKIN && <style>{`body {font-family: "Movistar Sans"}`}</style>}
                         <Story {...context} />
                     </OverscrollColorProvider>
                 </ThemeContextProvider>

.storybook/theme-selector-addon/manager.tsx

@@ -23,7 +23,7 @@ const renderPrimaryColorDot = (skinName: Skin) => (
 
 const ThemeSelectorAddon = ({api}: {api: API}) => {
     const [currentSkin, setCurrentSkin] = React.useState<Skin>(
-        () => (api.getQueryParam('skin') as Skin) || 'Movistar-new'
+        () => (api.getQueryParam('skin') as Skin) || 'Movistar'
     );
 
     React.useEffect(() => {

.storybook/themes.tsx

@@ -1,6 +1,5 @@
 import {
     getMovistarSkin,
-    getMovistarNewSkin,
     getO2Skin,
     getVivoSkin,
     getVivoEvolutionSkin,
@@ -15,11 +14,6 @@ export const Movistar = {
     skin: getMovistarSkin(),
 } as const;
 
-export const Movistar_New = {
-    i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
-    skin: getMovistarNewSkin(),
-} as const;
-
 export const O2 = {
     i18n: {locale: 'en-GB', phoneNumberFormattingRegionCode: 'GB'},
     skin: getO2Skin(),
@@ -55,14 +49,4 @@ export const Cyber = {
     skin: getCyberSkin(),
 } as const;
 
-export const AVAILABLE_THEMES = [
-    Movistar,
-    Movistar_New,
-    O2,
-    Vivo,
-    Vivo_Evolution,
-    Telefonica,
-    Blau,
-    Esimflag,
-    Cyber,
-];
+export const AVAILABLE_THEMES = [Movistar, O2, Vivo, Vivo_Evolution, Telefonica, Blau, Esimflag, Cyber];

doc/fonts.md

@@ -8,16 +8,15 @@ 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`                         | `getO2Skin()`            | `'On Air'`          |
-| `vivo`                       | `getVivoSkin()`          | `'Vivo Type'`       |
-| `vivo-evolution`             | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
-| `telefonica`                 | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
-| `blau`                       | `getBlauSkin()`          | `'Roboto'`          |
-| `esimflag`                   | `getEsimflagSkin()`      | `'On Air'`          |
+| Skin                  | Getter function          | Font family         |
+| --------------------- | ------------------------ | ------------------- |
+| `movistar` _(legacy)_ | `getMovistarSkin()`      | `'On Air'`          |
+| `o2`                  | `getO2Skin()`            | `'On Air'`          |
+| `vivo`                | `getVivoSkin()`          | `'Vivo Type'`       |
+| `vivo-evolution`      | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
+| `telefonica`          | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
+| `blau`                | `getBlauSkin()`          | `'Roboto'`          |
+| `esimflag`            | `getEsimflagSkin()`      | `'On Air'`          |
 
 ## Setting font-family
 
@@ -44,7 +43,7 @@ Render `<GlobalStyles />` as a direct child of `ThemeContextProvider`, before th
 Declare the font weights your app needs. Mistica uses **300 (light), 400 (regular), 500 (medium) and 700
 (bold)**. Serve the `.woff2` files from your own static hosting.
 
-### On Air (Movistar, O2, O2 New, Esimflag)
+### On Air (O2, Esimflag)
 
 ```css
 @font-face {
@@ -77,7 +76,7 @@ body {
 }
 ```
 
-### Movistar Sans (Movistar New)
+### Movistar Sans (Movistar)
 
 ```css
 @font-face {

doc/llms/llms.md

@@ -30,8 +30,8 @@ a documented composite component would be simpler.
 
 1. **NEVER hardcode colors in app/component UI code.** Always use `skinVars.colors.*` design tokens from
    `@telefonica/mistica`. The exception is skin authoring: when creating or extending a `Skin`, you may use
-   built-in palette exports (for example `movistarNewPalette`) or your own custom palette/colors inside the
-   skin definition.
+   built-in palette exports (for example `movistarPalette`) or your own custom palette/colors inside the skin
+   definition.
 2. **Try not to use raw `<div>` for layout.** Use Mistica layout components: `Box`, `Stack`, `Inline`,
    `Align`, `ResponsiveLayout`, `GridLayout`, `Grid`.
 3. **NEVER set font sizes manually.** Use text components: `Text1`-`Text10`, `Title1`-`Title4`. If those don't
@@ -88,7 +88,7 @@ npm install @telefonica/mistica
 import '@telefonica/mistica/css/mistica.css';
 import {
   ThemeContextProvider,
-  getMovistarNewSkin,
+  getMovistarSkin,
   skinVars,
   ResponsiveLayout,
   Box,
@@ -99,15 +99,15 @@ import {
 } from '@telefonica/mistica';
 
 const misticaTheme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
 };
 
 // Rendered under ThemeContextProvider so skinVars resolves correctly
 const GlobalStyles = () => (
   <style>{`
     body {
-      font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif; /* font for Movistar New skin */
+      font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif; /* font for Movistar skin */
       background-color: ${skinVars.colors.background};
     }
   `}</style>
@@ -152,13 +152,13 @@ type ThemeConfig = {
 };
 ```
 
-Available skins: `getMovistarNewSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2Skin()`,
-`getTelefonicaSkin()`, `getBlauSkin()`, and others via `getSkinByName()`. The legacy Movistar variant without
-the `New` suffix also exists (`getMovistarSkin()`); prefer the `New` version 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`, `o2Palette`, `vivoPalette`, etc. are available for skin authoring, and
-custom skins may also define their own palette colors from scratch.
+Available skins: `getMovistarSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2Skin()`,
+`getTelefonicaSkin()`, `getBlauSkin()`, and others via `getSkinByName()`. 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
+`movistarPalette`, `o2Palette`, `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`.
 
@@ -288,7 +288,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`, `o2Palette`,
+- **Palettes for skin authoring**: built-in palette exports such as `movistarPalette`, `o2Palette`,
   `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.)

doc/patterns.md

@@ -554,7 +554,7 @@ return (
 import Link from 'next/link';
 
 const theme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
   Link: {type: 'Next14', Component: Link},
 };
@@ -566,7 +566,7 @@ const theme = {
 import {Link} from 'react-router-dom';
 
 const theme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
   Link: {type: 'ReactRouter6', Component: Link},
 };

doc/theme-config.md

@@ -98,8 +98,8 @@ implements the `Skin` interface (you need to define all the required color const
 If you need to customize default component colors, border radii, or similar visual tokens and there is no
 component prop for that, prefer a custom skin over ad hoc CSS/style overrides. You can:
 
-- start from a built-in skin like `getMovistarNewSkin()` and override the tokens you need
-- start from a built-in palette export like `movistarNewPalette`
+- start from a built-in skin like `getMovistarSkin()` and override the tokens you need
+- start from a built-in palette export like `movistarPalette`
 - define your own palette/colors from scratch
 
 ```ts
@@ -131,11 +131,11 @@ const skin: Skin = {
 You can also extend an existing skin instead of defining everything from scratch:
 
 ```ts
-import {getMovistarNewSkin, movistarNewPalette, type Skin} from '@telefonica/mistica';
+import {getMovistarSkin, movistarPalette, type Skin} from '@telefonica/mistica';
 
-const baseSkin = getMovistarNewSkin();
+const baseSkin = getMovistarSkin();
 const palette = {
-  ...movistarNewPalette,
+  ...movistarPalette,
   brandPrimary: '#0050D8',
 };
 

packages/generate-design-tokens/index.js

@@ -25,16 +25,7 @@ console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
 const SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'skins');
 const CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css');
 
-const KNOWN_SKINS = [
-    'blau',
-    'movistar',
-    'movistar-new',
-    'o2',
-    'telefonica',
-    'vivo',
-    'vivo-evolution',
-    'esimflag',
-];
+const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'o2-new', 'telefonica', 'vivo', 'vivo-new', 'tu', 'esimflag'];
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());

playroom/components/index.tsx

@@ -8,7 +8,7 @@ import {
     Tabs,
     ThemeContextProvider,
     skinVars,
-    MovistarNewLogo,
+    MovistarLogo,
     VivoLogo,
     TelefonicaLogo,
     BlauLogo,
@@ -21,7 +21,7 @@ import {
     O2Logo,
     EsimflagLogo,
 } from '../../src';
-import {Movistar_New, Telefonica, Blau, Vivo, Vivo_Evolution, O2, Esimflag} from '../themes';
+import {Movistar, Telefonica, Blau, Vivo, Vivo_Evolution, O2, 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, 'Movistar'>;
+type ValidSkinName = KnownSkinName;
 
 const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
     const {isDarkMode} = useTheme();
@@ -53,10 +53,10 @@ const themesMap: {
         Icon: (props: IconProps) => JSX.Element;
     };
 } = {
-    'Movistar-new': {
+    Movistar: {
         text: 'Movistar',
-        themeConfig: Movistar_New,
-        Icon: () => <BrandIcon Logo={MovistarNewLogo} />,
+        themeConfig: Movistar,
+        Icon: () => <BrandIcon Logo={MovistarLogo} />,
     },
     Vivo: {
         text: 'Vivo',
@@ -321,7 +321,7 @@ const PreviewToolsComponent = ({
         return {
             ...themesMap[skinName].themeConfig,
             platformOverrides: {platform: os},
-            // Dont override mediaqueries for PreviewToolsControls, to avoid using Select instead of Tabs in desktop
+            // Don't override media queries for PreviewToolsControls, to avoid using Select instead of Tabs in desktop
             enableTabFocus: false,
             colorScheme,
             dimensions: {

playroom/frame-component.tsx

@@ -15,12 +15,11 @@ import {
     TELEFONICA_SKIN,
     O2_SKIN,
     MOVISTAR_SKIN,
-    MOVISTAR_NEW_SKIN,
     ESIMFLAG_SKIN,
     VIVO_SKIN,
     BLAU_SKIN,
 } from '../src';
-import {Movistar_New as defaultThemeConfig} from './themes';
+import {Movistar as defaultThemeConfig} from './themes';
 import {CYBER_SKIN} from '../src/community';
 
 import type {ThemeConfig} from '../src';
@@ -56,7 +55,6 @@ const skinToLang: Record<string, string> = {
     [BLAU_SKIN]: 'de-DE',
     [TELEFONICA_SKIN]: 'es-ES',
     [MOVISTAR_SKIN]: 'es-ES',
-    [MOVISTAR_NEW_SKIN]: 'es-ES',
     [O2_SKIN]: 'en-GB',
     [ESIMFLAG_SKIN]: 'es-ES',
     [CYBER_SKIN]: 'es-ES',
@@ -89,12 +87,8 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
 
         ${skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
         ${skinName === TELEFONICA_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
-        ${
-            skinName === MOVISTAR_SKIN || skinName === O2_SKIN || skinName === ESIMFLAG_SKIN
-                ? 'body {font-family: "On Air"}'
-                : ''
-        }
-        ${skinName === MOVISTAR_NEW_SKIN ? 'body {font-family: "Movistar Sans"}' : ''}
+        ${skinName === O2_SKIN || skinName === ESIMFLAG_SKIN ? 'body {font-family: "On Air"}' : ''}
+        ${skinName === MOVISTAR_SKIN ? 'body {font-family: "Movistar Sans"}' : ''}
     `;
 
     return (

playroom/themes.tsx

@@ -10,7 +10,7 @@ const common: Partial<ThemeConfig> = {
     },
 } as const;
 
-export const Movistar_New: ThemeConfig = {...themes.Movistar_New, ...common};
+export const Movistar: ThemeConfig = {...themes.Movistar, ...common};
 export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
 export const Vivo_Evolution: ThemeConfig = {...themes.Vivo_Evolution, ...common};
 export const O2: ThemeConfig = {...themes.O2, ...common};
@@ -19,7 +19,7 @@ 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 Movistar_iOS: ThemeConfig = {...Movistar, 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_iOS: ThemeConfig = {...O2, platformOverrides: {platform: 'ios'}};

src/__screenshot_tests__/logo-screenshot-test.tsx

@@ -4,7 +4,6 @@ import type {KnownSkinName} from '../skins/types';
 
 const SKINS: Array<KnownSkinName> = [
     'Movistar',
-    'Movistar-new',
     'O2',
     'Vivo',
     'Vivo-evolution',