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

Part of #626 — Major release plan 17.0.0.

## Changes

- Replaces the `movistar-new` skin with `movistar`, removing the old
`movistar` skin and promoting `movistar-new` as the canonical `movistar`
skin.
- Deletes `css/movistar-new.css`, `src/skins/movistar-new.tsx`, and the
`movistar-new` logo files; the canonical `movistar` counterparts now
carry the promoted content.
- Removes the `Movistar-new` skin name, `MOVISTAR_NEW_SKIN`,
`getMovistarNewSkin`, `movistarNewPalette`, and `MovistarNewLogo` from
the public API and internal wiring.
- Updates Storybook, Playroom, stories, screenshot tests, docs, and
token tooling to reference the single `movistar` skin, and moves the
`Movistar Sans` font mapping onto the canonical `movistar` skin.

## Note on the logo

Unlike the O2 change (where the base and `-new` logos were identical),
the Movistar logo was genuinely redesigned. The `movistar-new` logo
content was therefore promoted into `logo-movistar.tsx` /
`logo-movistar-shell.tsx` so the canonical skin ships the new artwork.

## Stack position

This is **subtask 4 of 10** in the stacked PR chain. It targets the
branch from #1597 and can only be merged after #1597 lands on `master`.

See #626 for the full merge strategy and ordering.

Closes #1617.

---------

Co-authored-by: brtbrt <brtbrt@users.noreply.github.com>

Author: brtbrt

.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];