feat(skins): new Tu skin

.storybook/colors.js

@@ -3,7 +3,7 @@
 // This module replaces the required parts from ./src/skins
 
 /**
- * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'Telefonica' | 'Blau'} skin
+ * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'Telefonica' | 'Blau' | 'Tu'} skin
  */
 export const getColors = (skin) => {
  switch (skin) {
@@ -43,6 +43,13 @@ export const getColors = (skin) => {
  textPrimaryInverse: '#FFFFFF',
  textSecondary: '#808285',
  };
+ case 'Tu':
+ return {
+ primary: '#2B3447',
+ textPrimary: '#2B3447',
+ textPrimaryInverse: '#FFFFFF',
+ textSecondary: '#727579',
+ };
  default:
  throw Error('Unexpected skin: ' + skin);
  }

.storybook/preview.tsx

@@ -12,6 +12,7 @@ import {
  O2_SKIN,
  TELEFONICA_SKIN,
  BLAU_SKIN,
+ TU_SKIN,
  skinVars,
  OverscrollColorProvider,
 } from '../src';
@@ -25,7 +26,7 @@ type Platform = 'android' | 'desktop' | 'ios';
 
 const getSkin = (searchParams: URLSearchParams) => {
  const qsSkin = searchParams.get('skin');
- return [MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN, VIVO_NEW_SKIN, TELEFONICA_SKIN, BLAU_SKIN].find(
+ return [MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN, VIVO_NEW_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN].find(
  (skin) => skin === qsSkin
  );
 };
@@ -84,7 +85,9 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => {
  <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
  <OverscrollColorProvider>
  {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
- {skin === TELEFONICA_SKIN && <style>{`body {font-family: "Telefonica Sans"}`}</style>}
+ {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
+ <style>{`body {font-family: "Telefonica Sans"}`}</style>
+ )}
  {skin === O2_SKIN && <style>{`body {font-family: "On Air"}`}</style>}
  <Story {...context} />
  </OverscrollColorProvider>

.storybook/theme-selector-addon/register.js

@@ -5,7 +5,7 @@ import {WithTooltip, IconButton, TooltipLinkList} from '@storybook/components';
 import {getColors} from '../colors';
 import {createStorybookTheme} from '../storybook-manager-theme';
 
-const AVAILABLE_SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau'];
+const AVAILABLE_SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'];
 
 const renderPrimaryColorDot = (skinName) => (
  <div

.storybook/themes.tsx

@@ -5,6 +5,7 @@ import {
  getVivoNewSkin,
  getTelefonicaSkin,
  getBlauSkin,
+ getTuSkin,
 } from '../src';
 
 export const Movistar = {
@@ -37,4 +38,9 @@ export const Blau = {
  skin: getBlauSkin(),
 } as const;
 
-export const AVAILABLE_THEMES = [Movistar, O2, Vivo, Vivo_New, Telefonica, Blau];
+export const Tu = {
+ i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
+ skin: getTuSkin(),
+} as const;
+
+export const AVAILABLE_THEMES = [Movistar, O2, Vivo, Vivo_New, Telefonica, Blau, Tu];

packages/generate-design-tokens/index.js

@@ -110,7 +110,7 @@ export type Colors = {
 };
 
 const generateSkinFiles = () => {
- const KNOWN_SKINS = ['blau', 'movistar', 'movistar-legacy', 'o2', 'telefonica', 'vivo', 'vivo-new'];
+ const KNOWN_SKINS = ['blau', 'movistar', 'movistar-legacy', 'o2', 'telefonica', 'vivo', 'vivo-new', 'tu'];
 
  let anyGeneratedSkin;
 

playroom/components/index.tsx

@@ -15,10 +15,11 @@ import {
  O2Logo,
  TelefonicaLogo,
  BlauLogo,
+ TuLogo,
  Inline,
  Circle,
 } from '../../src';
-import {Movistar, Vivo, O2, Telefonica, Blau, Vivo_New} from '../themes';
+import {Movistar, Vivo, O2, Telefonica, Blau, Vivo_New, Tu} from '../themes';
 import {useOverrideTheme} from '../frame-component';
 import IconSun from '../icons/icon-sun';
 import IconMoon from '../icons/icon-moon';
@@ -99,6 +100,11 @@ const themesMap: {
  themeConfig: Blau,
  icon: <BlauLogo size={24} />,
  },
+ Tu: {
+ text: 'Tu',
+ themeConfig: Tu,
+ icon: <TuLogo size={24} />,
+ },
 };
 
 type PreviewToolsControlsProps = {

playroom/frame-component.tsx

@@ -13,6 +13,7 @@ import {
  VIVO_NEW_SKIN,
  TELEFONICA_SKIN,
  O2_SKIN,
+ TU_SKIN,
  MOVISTAR_SKIN,
 } from '../src';
 
@@ -42,7 +43,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
  body {background: ${skinVars.colors.background}}
 
  ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
- ${skinName === TELEFONICA_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
+ ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
  ${skinName === MOVISTAR_SKIN || skinName === O2_SKIN ? 'body {font-family: "On Air"}' : ''}
 
  *[class^='_1fu0koy1'] {

playroom/themes.tsx

@@ -16,10 +16,12 @@ export const Vivo_New: ThemeConfig = {...themes.Vivo_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 Tu: ThemeConfig = {...themes.Tu, ...common};
 
 export const Movistar_iOS: ThemeConfig = {...Movistar, platformOverrides: {platform: 'ios'}};
 export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_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 Tu_iOS: ThemeConfig = {...Tu, platformOverrides: {platform: 'ios'}};

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

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

src/__stories__/helpers.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useAriaId, useIsInverseVariant, Select, TextField, Checkbox} from '..';
+import {useAriaId, useIsInverseVariant, Select, TextField, Checkbox, skinVars} from '..';
 import {isRunningAcceptanceTest} from '../utils/platform';
 
 type Props = {
@@ -13,7 +13,7 @@ export const StorySection: React.FC<Props> = ({title, children}) => {
  <div style={{marginBottom: 32}}>
  <h1
  style={{
- color: isInverse ? 'white' : '#888',
+ color: isInverse ? skinVars.colors.textSecondaryInverse : skinVars.colors.textSecondary,
  fontWeight: 'normal',
  fontSize: 20,
  margin: '16px 0px',

src/__stories__/logo-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo} from '../logo';
+import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo, TuLogo} from '../logo';
 import {Box, ResponsiveLayout} from '../index';
 
 export default {
@@ -16,7 +16,7 @@ type Args = {
  inverse: boolean;
  action: 'none' | 'onPress' | 'href' | 'to';
  forceBrandLogo: boolean;
- brand: 'Movistar' | 'O2' | 'Vivo' | 'Telefonica' | 'Blau';
+ brand: 'Movistar' | 'O2' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu';
 };
 
 const getLogoActionProps = (action: string) => {
@@ -56,6 +56,7 @@ export const Default: StoryComponent<Args> = ({type, size, inverse, action, forc
  O2: O2Logo,
  Telefonica: TelefonicaLogo,
  Blau: BlauLogo,
+ Tu: TuLogo,
  }[forceBrandLogo ? brand : 'default'];
 
  return (
@@ -80,7 +81,7 @@ Default.args = {
 
 Default.argTypes = {
  brand: {
- options: ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau'],
+ options: ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'Tu'],
  control: {type: 'select'},
  if: {arg: 'forceBrandLogo'},
  },

src/index.tsx

@@ -102,6 +102,7 @@ export {
  O2Logo,
  TelefonicaLogo,
  BlauLogo,
+ TuLogo,
 } from './logo';
 export {default as Image} from './image';
 export {default as Chip} from './chip';
@@ -197,6 +198,7 @@ export {
  MOVISTAR_SKIN,
  TELEFONICA_SKIN,
  BLAU_SKIN,
+ TU_SKIN,
 } from './skins/constants';
 export {getSkinByName} from './skins/utils';
 export {getVivoSkin} from './skins/vivo';
@@ -207,12 +209,14 @@ export {getO2Skin} from './skins/o2';
 export {getO2ClassicSkin} from './skins/o2-classic';
 export {getTelefonicaSkin} from './skins/telefonica';
 export {getBlauSkin} from './skins/blau';
+export {getTuSkin} from './skins/tu';
 export {palette as vivoPalette} from './skins/vivo';
 export {palette as movistarPalette} from './skins/movistar';
 export {palette as o2Palette} from './skins/o2';
 export {palette as o2ClassicPalette} from './skins/o2-classic';
 export {palette as telefonicaPalette} from './skins/telefonica';
 export {palette as blauPalette} from './skins/blau';
+export {palette as tuPalette} from './skins/tu';
 
 export type {Locale} from './utils/locale';
 export type {TrackingEvent, IconProps} from './utils/types';

src/logo.tsx

@@ -7,6 +7,7 @@ import {getMovistarSkin} from './skins/movistar';
 import {getVivoSkin} from './skins/vivo';
 import {getO2Skin} from './skins/o2';
 import {getBlauSkin} from './skins/blau';
+import {getTuSkin} from './skins/tu';
 import {getTelefonicaSkin} from './skins/telefonica';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './logo.css';
@@ -337,6 +338,29 @@ const BlauLogoImage = ({size, type}: LogoImageProps) => {
  );
 };
 
+const TuLogoImage = ({size}: LogoImageProps) => {
+ const {isDarkMode} = useTheme();
+ const isInverse = useIsInverseVariant();
+ const {colors} = getTuSkin();
+ const color = isInverse && !isDarkMode ? colors.backgroundBrand : colors.inverse;
+ const circle = isInverse && !isDarkMode ? colors.inverse : colors.backgroundBrand;
+
+ return (
+ <svg
+ className={styles.svg}
+ style={applyCssVars(calcInlineVars(size))}
+ viewBox="0 0 72 72"
+ fill={circle}
+ >
+ <circle cx="36" cy="36" r="32" fill={circle} />
+ <path
+ d="M56.9231 30.5142V41.4859C56.9231 43.3057 56.4469 44.9175 55.5077 46.2953C54.5685 47.6731 53.2331 48.7649 51.5055 49.5591C49.7245 50.3624 47.6367 50.7692 45.3034 50.7692C42.9168 50.7692 40.7849 50.3598 38.9653 49.5565C37.1936 48.7584 35.8129 47.6497 34.8617 46.2654C33.9105 44.8811 33.4369 43.2693 33.4369 41.4872V33.1385C33.4366 32.8712 33.3273 32.615 33.1332 32.4261C32.9391 32.2373 32.676 32.1312 32.4017 32.1312H25.3311C25.0569 32.1312 24.794 32.2373 24.6001 32.4262C24.4062 32.6151 24.2973 32.8714 24.2973 33.1385V41.8655C24.2973 43.099 24.7548 44.1467 25.6313 44.8993C26.4504 45.5895 27.5444 45.9391 28.8878 45.9391C29.1552 45.9401 29.4225 45.9258 29.6882 45.8962C29.7162 45.8926 29.7448 45.8948 29.7719 45.9026C29.799 45.9105 29.8241 45.9238 29.8456 45.9417C29.863 45.9541 29.877 45.9703 29.8866 45.9891C29.8961 46.0079 29.9008 46.0287 29.9003 46.0496L30.0764 49.0886C30.087 49.2807 30.0338 49.471 29.9247 49.6314C29.8157 49.7917 29.6565 49.9136 29.4707 49.9789C29.0361 50.125 28.594 50.2486 28.146 50.3494C27.0248 50.6213 25.8742 50.7618 24.7188 50.7679C22.2214 50.7679 20.3578 50.118 19.0237 48.7753C17.6896 47.4326 17.0253 45.5687 17.0253 43.0743V33.5077C17.0249 33.1425 16.8758 32.7924 16.6106 32.5343C16.3455 32.2762 15.986 32.1312 15.6112 32.1312H15.4657C15.2529 32.131 15.0421 32.09 14.8456 32.0105C14.649 31.9309 14.4704 31.8145 14.32 31.6677C14.1696 31.5209 14.0504 31.3467 13.9691 31.1551C13.8878 30.9634 13.846 30.758 13.8462 30.5506V28.8751C13.8462 28.6152 14.097 28.4605 14.161 28.4267C17.3795 26.7175 19.9583 24.0574 21.5264 20.8293C21.6477 20.581 21.8389 20.3712 22.0776 20.2244C22.3163 20.0777 22.5929 19.9998 22.8751 20C23.2521 20.001 23.6133 20.1473 23.88 20.4069C24.1467 20.6665 24.2972 21.0183 24.2986 21.3856V27.2348C24.2986 28.4878 24.3213 28.5476 25.6487 28.5476H38.5597C39.095 28.5476 39.6085 28.7548 39.987 29.1236C40.3655 29.4924 40.5782 29.9926 40.5782 30.5142V41.3352C40.5782 42.8157 41.0384 44.0141 41.9429 44.8967C42.8474 45.7792 43.9987 46.2277 45.3514 46.2277C46.7042 46.2277 47.8088 45.7701 48.6866 44.8668C49.5644 43.9634 49.9887 42.7871 49.9887 41.3352V30.5142C49.9885 30.256 50.0405 30.0003 50.1418 29.7617C50.2431 29.5231 50.3917 29.3063 50.579 29.1237C50.7663 28.941 50.9887 28.7962 51.2335 28.6973C51.4784 28.5985 51.7408 28.5476 52.0058 28.5476H54.9047C55.44 28.5476 55.9534 28.7548 56.3319 29.1236C56.7105 29.4924 56.9231 29.9926 56.9231 30.5142Z"
+ fill={color}
+ />
+ </svg>
+ );
+};
+
 type LogoBaseProps = {
  skinName: SkinName;
  size?: ByBreakpoint<number>;
@@ -357,6 +381,8 @@ const LogoBase: React.FC<LogoBaseProps> = ({size = 48, skinName, type = 'isotype
  return <TelefonicaLogoImage size={size} type={type} />;
  case 'Blau':
  return <BlauLogoImage size={size} type={type} />;
+ case 'Tu':
+ return <TuLogoImage size={size} type={type} />;
  default:
  return null;
  }
@@ -484,3 +510,8 @@ export const BlauLogo: React.FC<LogoProps> = ({size, type = 'isotype', ...props}
  <LogoBase skinName="Blau" type={type} size={size} />
  </MaybeTouchableLogo>
 );
+export const TuLogo: React.FC<LogoProps> = ({size, type = 'isotype', ...props}) => (
+ <MaybeTouchableLogo {...props}>
+ <LogoBase skinName="Tu" type={type} size={size} />
+ </MaybeTouchableLogo>
+);

src/select.css.ts

@@ -35,7 +35,7 @@ export const optionsContainer = style([
  sprinkles({
  position: 'fixed',
  padding: 0,
- borderRadius: skinVars.borderRadii.input,
+ borderRadius: skinVars.borderRadii.container,
  background: skinVars.colors.backgroundContainer,
  }),
  {

src/skins/constants.tsx

@@ -6,3 +6,4 @@ export const VIVO_SKIN = 'Vivo';
 export const VIVO_NEW_SKIN = 'Vivo-new';
 export const TELEFONICA_SKIN = 'Telefonica';
 export const BLAU_SKIN = 'Blau';
+export const TU_SKIN = 'Tu';