feat(skin)!: replace Movistar skin with Movistar-new#1620
Conversation
Remove the Tu skin entirely: skin definition, logo files and their shells, the registry entry, the public exports, and all related stories, screenshot tests, snapshots, storybook/playroom wiring, and docs. BREAKING CHANGE: the Tu skin has been removed. The TuLogo component and the TU_SKIN, getTuSkin, and tuPalette exports are no longer available.
Complete the O2-new cleanup missed in the initial replacement: - playroom/themes.tsx: rename O2_New/O2_New_iOS to O2/O2_iOS so the Playroom O2 theme resolves (fixes the TypeScript build). - audit-accessibility: audit the O2 skin instead of the removed O2-new. - generate-design-tokens and import-mistica-icons: drop the stale o2-new entries so regeneration does not recreate the deleted files. - docs: point to getO2Skin/o2Palette and a single o2 skin row.
There was a problem hiding this comment.
Pull request overview
This PR is part of the 17.0.0 breaking-changes plan and consolidates Movistar skins by promoting the former movistar-new implementation (tokens + assets) to become the canonical movistar skin, while removing the old legacy movistar and all movistar-new public API surface.
Changes:
- Removes
movistar-newfrom the public API/types and internal wiring (MOVISTAR_NEW_SKIN,getMovistarNewSkin,movistarNewPalette,MovistarNewLogo, etc.). - Promotes the
movistar-newpalette/tokens and logo artwork into the canonical Movistar skin/logo implementation. - Updates Storybook, Playroom, screenshot/accessibility tooling, and docs to use only
Movistar.
Reviewed changes
Copilot reviewed 29 out of 31 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/test-utils/index.tsx | Updates default skin references from Movistar-new to Movistar for tests/helpers. |
| src/skins/utils.tsx | Removes movistar-new branch from getSkinByName. |
| src/skins/types/index.tsx | Removes 'Movistar-new' from KnownSkinName. |
| src/skins/movistar.tsx | Replaces legacy Movistar tokens with the promoted movistar-new token set. |
| src/skins/movistar-new.tsx | Deletes the movistar-new skin implementation. |
| src/skins/constants.tsx | Removes MOVISTAR_NEW_SKIN constant. |
| src/logo.tsx | Removes Movistar-new logo wiring and public export. |
| src/logo-movistar.tsx | Promotes the new Movistar logo artwork/logic into the canonical Movistar logo. |
| src/logo-movistar-shell.tsx | Updates Movistar logo viewBox to match promoted artwork size. |
| src/logo-movistar-new.tsx | Deletes Movistar-new logo implementation. |
| src/logo-movistar-new-shell.tsx | Deletes Movistar-new logo shell. |
| src/index.tsx | Removes Movistar-new exports and re-exports only canonical Movistar APIs. |
| src/stories/logo-story.tsx | Updates story controls/options to remove Movistar-new. |
| src/screenshot_tests/tooltip-screenshot-test.tsx | Removes legacy Movistar-new reference from screenshot test setup. |
| src/screenshot_tests/popover-screenshot-test.tsx | Removes legacy Movistar-new reference from screenshot test setup. |
| src/screenshot_tests/logo-screenshot-test.tsx | Removes Movistar-new from the skins list used in logo screenshots. |
| playroom/themes.tsx | Renames Playroom theme config from Movistar_New to Movistar. |
| playroom/frame-component.tsx | Updates default theme + font-family mapping to canonical Movistar. |
| playroom/components/index.tsx | Updates Playroom theme selector/icon mapping to canonical Movistar. |
| packages/generate-design-tokens/index.js | Removes movistar-new from the known-skins token generation list. |
| doc/theme-config.md | Updates docs to reference getMovistarSkin()/movistarPalette instead of *New* APIs. |
| doc/patterns.md | Updates theme examples to use getMovistarSkin(). |
| doc/llms/llms.md | Updates LLM guidance/examples and available-skins list to remove movistar-new. |
| doc/fonts.md | Updates skin↔font mapping docs to reflect new canonical Movistar font. |
| .storybook/themes.tsx | Removes Storybook Movistar_New theme. |
| .storybook/theme-selector-addon/manager.tsx | Updates default selected skin from Movistar-new to Movistar. |
| .storybook/preview.tsx | Removes query-param support for MOVISTAR_NEW_SKIN and updates font-family logic. |
| .storybook/colors.ts | Removes Movistar-new from available skins and promotes new colors to Movistar. |
| .github/actions/audit-accessibility/main.js | Updates accessibility audit skin list to use canonical Movistar. |
Comments suppressed due to low confidence (1)
src/logo-movistar.tsx:17
- In dark mode, the logo isotype color is currently taken from
colors.brand(light-mode palette).getMovistarSkin()defines a differentdarkModeColors.brandvalue, so this can render the wrong blue whenisDarkModeis true.
const color =
colorProp ||
(isDarkMode
? colors.brand
: {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
The Movistar-new skin no longer exists after its promotion to the canonical Movistar skin, so its committed image snapshots are obsolete. Regeneration does not delete obsolete image files, so remove them here.
These tests were pinned to the legacy Movistar skin because they were unstable on Movistar-new. Since Movistar now is the former Movistar-new, the warning still applies; reword it instead of dropping it.
The O2-new skin was removed from all acceptance test parametrizations when O2-new replaced O2. These snapshot images are no longer generated and are removed as obsolete output.
…-remove-movistar-new
# Conflicts: # .github/actions/audit-accessibility/main.js # .storybook/preview.tsx # .storybook/themes.tsx # doc/fonts.md # doc/llms/llms.md # packages/generate-design-tokens/index.js # playroom/components/index.tsx # playroom/frame-component.tsx # playroom/themes.tsx # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-4-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-4-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-3-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-2-snap.png # src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-2-snap.png # src/__screenshot_tests__/counter-screenshot-test.tsx # src/__stories__/logo-story.tsx # src/index.tsx # src/skins/utils.tsx # src/test-utils/index.tsx
3a5cf19 to
cb9f933
Compare
|
Size stats
|
| | `esimflag` | `getEsimflagSkin()` | `'On Air'` | | ||
| | Skin | Getter function | Font family | | ||
| | --------------------- | ------------------------ | ------------------- | | ||
| | `movistar` _(legacy)_ | `getMovistarSkin()` | `'On Air'` | |
|
🎉 This PR is included in version 16.72.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 17.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Part of #626 — Major release plan 17.0.0.
Changes
movistar-newskin withmovistar, removing the oldmovistarskin and promotingmovistar-newas the canonicalmovistarskin.css/movistar-new.css,src/skins/movistar-new.tsx, and themovistar-newlogo files; the canonicalmovistarcounterparts now carry the promoted content.Movistar-newskin name,MOVISTAR_NEW_SKIN,getMovistarNewSkin,movistarNewPalette, andMovistarNewLogofrom the public API and internal wiring.movistarskin, and moves theMovistar Sansfont mapping onto the canonicalmovistarskin.Note on the logo
Unlike the O2 change (where the base and
-newlogos were identical), the Movistar logo was genuinely redesigned. Themovistar-newlogo content was therefore promoted intologo-movistar.tsx/logo-movistar-shell.tsxso 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.