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

.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', 'Vivo-evolution', 'Blau'];
+    const skins = ['Movistar-new', 'O2', 'Vivo', 'Vivo-evolution', 'Blau'];
 
     /**
      * @type Array<[story: string, skin: string]>

.storybook/colors.ts

@@ -3,7 +3,6 @@ import {palette as cyberPalette} from '../src/community/skins/cyber-skin';
 export const AVAILABLE_SKINS = [
     'Movistar-new',
     'Movistar',
-    'O2-new',
     'O2',
     'Vivo',
     'Vivo-evolution',
@@ -45,13 +44,6 @@ export const getColors = (skin: Skin): SkinTheme => {
                 textSecondary: '#666666',
             };
         case 'O2':
-            return {
-                primary: '#032B5A',
-                textPrimary: '#000033',
-                textPrimaryInverse: '#FFFFFF',
-                textSecondary: '#757575',
-            };
-        case 'O2-new':
             return {
                 primary: '#0050FF',
                 textPrimary: '#00001E',

.storybook/preview.tsx

@@ -13,7 +13,6 @@ import {
     VIVO_SKIN,
     VIVO_EVOLUTION_SKIN,
     O2_SKIN,
-    O2_NEW_SKIN,
     TELEFONICA_SKIN,
     BLAU_SKIN,
     skinVars,
@@ -36,7 +35,6 @@ const getSkin = (searchParams: URLSearchParams) => {
         MOVISTAR_SKIN,
         MOVISTAR_NEW_SKIN,
         O2_SKIN,
-        O2_NEW_SKIN,
         VIVO_SKIN,
         VIVO_EVOLUTION_SKIN,
         TELEFONICA_SKIN,
@@ -135,10 +133,9 @@ 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 === O2_NEW_SKIN ||
-                            skin === ESIMFLAG_SKIN) && <style>{`body {font-family: "On Air"}`}</style>}
+                        {(skin === MOVISTAR_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>}
                         <Story {...context} />
                     </OverscrollColorProvider>

.storybook/themes.tsx

@@ -2,7 +2,6 @@ import {
     getMovistarSkin,
     getMovistarNewSkin,
     getO2Skin,
-    getO2NewSkin,
     getVivoSkin,
     getVivoEvolutionSkin,
     getTelefonicaSkin,
@@ -26,11 +25,6 @@ export const O2 = {
     skin: getO2Skin(),
 } as const;
 
-export const O2_New = {
-    i18n: {locale: 'en-GB', phoneNumberFormattingRegionCode: 'GB'},
-    skin: getO2NewSkin(),
-} as const;
-
 export const Vivo = {
     i18n: {locale: 'pt-BR', phoneNumberFormattingRegionCode: 'BR'},
     skin: getVivoSkin(),
@@ -65,7 +59,6 @@ export const AVAILABLE_THEMES = [
     Movistar,
     Movistar_New,
     O2,
-    O2_New,
     Vivo,
     Vivo_Evolution,
     Telefonica,

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [16.70.0](https://github.com/Telefonica/mistica-web/compare/v16.69.0...v16.70.0) (2026-07-01)
+
+
+### Bug Fixes
+
+* **Select:** fix Select validation on desktop devices Ref: WEB-2450 ([#1612](https://github.com/Telefonica/mistica-web/issues/1612)) ([59aafa3](https://github.com/Telefonica/mistica-web/commit/59aafa3f44de0f7da0b0841215634f519102eee2)), closes [#1613](https://github.com/Telefonica/mistica-web/issues/1613) [#1464](https://github.com/Telefonica/mistica-web/issues/1464)
+
+
+### Features
+
+* **Chore:** Include feedback into mistica-figma skill ([#1594](https://github.com/Telefonica/mistica-web/issues/1594)) ([2b960dc](https://github.com/Telefonica/mistica-web/commit/2b960dc60d91aefe88dd74cc0d04d013ba490709))
+
 # [16.69.0](https://github.com/Telefonica/mistica-web/compare/v16.68.0...v16.69.0) (2026-06-29)
 
 

doc/fonts.md

@@ -12,8 +12,7 @@ Each skin has a designated font family. Use the correct one for the skin your ap
 | ---------------------------- | ------------------------ | ------------------- |
 | `movistar-new` _(preferred)_ | `getMovistarNewSkin()`   | `'Movistar Sans'`   |
 | `movistar` _(legacy)_        | `getMovistarSkin()`      | `'On Air'`          |
-| `o2-new` _(preferred)_       | `getO2NewSkin()`         | `'On Air'`          |
-| `o2` _(legacy)_              | `getO2Skin()`            | `'On Air'`          |
+| `o2`                         | `getO2Skin()`            | `'On Air'`          |
 | `vivo`                       | `getVivoSkin()`          | `'Vivo Type'`       |
 | `vivo-evolution`             | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
 | `telefonica`                 | `getTelefonicaSkin()`    | `'Telefonica Sans'` |

doc/llms/llms.md

@@ -152,13 +152,13 @@ type ThemeConfig = {
 };
 ```
 
-Available skins: `getMovistarNewSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2NewSkin()`,
-`getTelefonicaSkin()`, `getBlauSkin()`, 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.
+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.
 
 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`, `o2NewPalette`,
+- **Palettes for skin authoring**: built-in palette exports such as `movistarNewPalette`, `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.)

examples/css/index.html

@@ -16,7 +16,7 @@ <h1 class="mistica-text-title4">Mística CSS</h1>
                     <label for="skin-select" class="mistica-text-2">Skin:</label>
                     <select id="skin-select">
                         <option value="movistar">movistar</option>
-                        <option value="o2-new">o2-new</option>
+                        <option value="o2">o2</option>
                         <option value="vivo">vivo</option>
                         <option value="vivo-evolution">vivo-evolution</option>
                         <option value="blau">blau</option>

examples/css/style.css

@@ -5,7 +5,7 @@
 @import url('../../css/mistica-common.css');
 
 /* Different skins */
-@import url('../../css/o2-new.css');
+@import url('../../css/o2.css');
 @import url('../../css/blau.css');
 @import url('../../css/vivo.css');
 @import url('../../css/vivo-evolution.css');

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.69.0",
+    "version": "16.70.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -84,7 +84,7 @@
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.95",
         "@swc/jest": "^0.2.29",
-        "@telefonica/acceptance-testing": "5.3.1",
+        "@telefonica/acceptance-testing": "5.4.0",
         "@telefonica/eslint-config": "^2.2.0",
         "@telefonica/prettier-config": "^2.0.0",
         "@testing-library/dom": "^10.2.0",

packages/generate-design-tokens/index.js

@@ -30,7 +30,6 @@ const KNOWN_SKINS = [
     'movistar',
     'movistar-new',
     'o2',
-    'o2-new',
     'telefonica',
     'vivo',
     'vivo-evolution',

packages/import-mistica-icons/index.js

@@ -124,8 +124,7 @@ const SKIN_PRIORITY = {
     telefonica: 1,
     vivo: 2,
     o2: 3,
-    'o2-new': 4, // o2-new is checked before o2 because O2-new skin name would match with o2 regexp
-    blau: 5,
+    blau: 4,
 };
 
 /**

playroom/components/index.tsx

@@ -18,10 +18,10 @@ import {
     IconButton,
     ToggleIconButton,
     Portal,
-    O2NewLogo,
+    O2Logo,
     EsimflagLogo,
 } from '../../src';
-import {Movistar_New, Telefonica, Blau, Vivo, Vivo_Evolution, O2_New, Esimflag} from '../themes';
+import {Movistar_New, 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, 'O2' | 'Movistar'>;
+type ValidSkinName = Exclude<KnownSkinName, 'Movistar'>;
 
 const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
     const {isDarkMode} = useTheme();
@@ -68,10 +68,10 @@ const themesMap: {
         themeConfig: Vivo_Evolution,
         Icon: () => <BrandIcon Logo={VivoLogo} />,
     },
-    'O2-new': {
+    O2: {
         text: 'O2',
-        themeConfig: O2_New,
-        Icon: () => <BrandIcon Logo={O2NewLogo} />,
+        themeConfig: O2,
+        Icon: () => <BrandIcon Logo={O2Logo} />,
     },
     Telefonica: {
         text: 'Telefónica',

playroom/frame-component.tsx

@@ -14,7 +14,6 @@ import {
     VIVO_EVOLUTION_SKIN,
     TELEFONICA_SKIN,
     O2_SKIN,
-    O2_NEW_SKIN,
     MOVISTAR_SKIN,
     MOVISTAR_NEW_SKIN,
     ESIMFLAG_SKIN,
@@ -59,7 +58,6 @@ const skinToLang: Record<string, string> = {
     [MOVISTAR_SKIN]: 'es-ES',
     [MOVISTAR_NEW_SKIN]: 'es-ES',
     [O2_SKIN]: 'en-GB',
-    [O2_NEW_SKIN]: 'en-GB',
     [ESIMFLAG_SKIN]: 'es-ES',
     [CYBER_SKIN]: 'es-ES',
 };
@@ -92,10 +90,7 @@ 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 === O2_NEW_SKIN ||
-            skinName === ESIMFLAG_SKIN
+            skinName === MOVISTAR_SKIN || skinName === O2_SKIN || skinName === ESIMFLAG_SKIN
                 ? 'body {font-family: "On Air"}'
                 : ''
         }

playroom/themes.tsx

@@ -13,7 +13,7 @@ const common: Partial<ThemeConfig> = {
 export const Movistar_New: ThemeConfig = {...themes.Movistar_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 O2: ThemeConfig = {...themes.O2, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
@@ -22,7 +22,7 @@ export const Community_Cyber: ThemeConfig = {...themes.Cyber, ...common};
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_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 O2_iOS: ThemeConfig = {...O2, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
 export const Esimflag_iOS: ThemeConfig = {...Esimflag, platformOverrides: {platform: 'ios'}};

src/__screenshot_tests__/card-screenshot-test.tsx

@@ -2,7 +2,6 @@ import {
     BLAU_SKIN,
     ESIMFLAG_SKIN,
     MOVISTAR_SKIN,
-    O2_NEW_SKIN,
     O2_SKIN,
     TELEFONICA_SKIN,
     VIVO_EVOLUTION_SKIN,
@@ -320,7 +319,6 @@ test.each`
     skin
     ${MOVISTAR_SKIN}
     ${O2_SKIN}
-    ${O2_NEW_SKIN}
     ${VIVO_SKIN}
     ${VIVO_EVOLUTION_SKIN}
     ${TELEFONICA_SKIN}

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_SKIN} from '../skins/constants';
+import {BLAU_SKIN, MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_NEW_SKIN, BLAU_SKIN] as const;
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN, BLAU_SKIN] as const;
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 const feedbackTypes = [
     'successfeedbackscreen--success',

src/__screenshot_tests__/form-screenshot-test.tsx

@@ -0,0 +1,20 @@
+import {openStoryPage, screen} from '../test-utils';
+
+import type {Device} from '../test-utils';
+
+test.each(['DESKTOP', 'MOBILE_IOS'] as Array<Device>)(
+    'form fields with required errors after submit validation on %s',
+    async (device) => {
+        await openStoryPage({
+            id: 'patterns-forms-form-with-automatic-state-management--default',
+            device,
+        });
+
+        await (await screen.findByText('Send')).click();
+
+        const fieldWrapper = await screen.findByTestId('form-wrapper');
+        const image = await fieldWrapper.screenshot();
+
+        expect(image).toMatchImageSnapshot();
+    }
+);

src/__screenshot_tests__/hero-screenshot-test.tsx

@@ -48,10 +48,10 @@ test('Hero - custom height', async () => {
     expect(await story.screenshot()).toMatchImageSnapshot();
 });
 
-test('Hero - background brand in O2-new skin', async () => {
+test('Hero - background brand in O2 skin', async () => {
     await openStoryPage({
         id: 'components-hero-hero--default',
-        skin: 'O2-new',
+        skin: 'O2',
         args: {background: 'brand'},
     });
 

src/__screenshot_tests__/logo-screenshot-test.tsx

@@ -6,7 +6,6 @@ const SKINS: Array<KnownSkinName> = [
     'Movistar',
     'Movistar-new',
     'O2',
-    'O2-new',
     'Vivo',
     'Vivo-evolution',
     'Telefonica',

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

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

src/__screenshot_tests__/private-text-preset-vars-screenshot-test.tsx

@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'Vivo', 'O2-new'] as const;
+const SKINS = ['Movistar', 'Vivo', 'O2'] as const;
 const DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 
 const getCases = () => {

src/__screenshot_tests__/success-feedback-screen-with-navbar-screenshot-test.tsx

@@ -1,9 +1,9 @@
 import {openStoryPage} from '../test-utils';
-import {MOVISTAR_SKIN, O2_NEW_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN, O2_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, O2_NEW_SKIN] as const;
+const testableSkins = [MOVISTAR_SKIN, O2_SKIN] as const;
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 
 const cases: Array<[string, Device]> = [];

src/__screenshot_tests__/success-feedback-screenshot-test.tsx

@@ -1,9 +1,9 @@
 import {openStoryPage} from '../test-utils';
-import {MOVISTAR_SKIN, VIVO_SKIN, BLAU_SKIN, O2_NEW_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN, VIVO_SKIN, BLAU_SKIN, O2_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_NEW_SKIN, BLAU_SKIN];
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN, BLAU_SKIN];
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 
 const cases: Array<[string, Device]> = [];

src/__screenshot_tests__/text-screenshot-test.tsx

@@ -3,7 +3,7 @@ import {openStoryPage, screen} from '../test-utils';
 import type {Device} from '../test-utils';
 
 const TESTABLE_DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
-const SKINS = ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'O2-new', 'Esimflag'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'Esimflag'] as const;
 
 test.each(TESTABLE_DEVICES.flatMap((device) => SKINS.map((skin) => ({device, skin}))))(
     'Text in $device with $skin skin',