@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/skins/types/colors.tsx

@@ -0,0 +1,286 @@
+export type Colors = {
+    background: string;
+    backgroundAlternative: string;
+    backgroundBrand: string;
+    backgroundNegative: string;
+    backgroundBrandSecondary: string;
+    backgroundContainer: string;
+    backgroundContainerError: string;
+    backgroundContainerHover: string;
+    backgroundContainerPressed: string;
+    backgroundContainerBrand: string;
+    backgroundContainerBrandHover: string;
+    backgroundContainerBrandPressed: string;
+    backgroundContainerBrandOverInverse: string;
+    backgroundContainerNegative: string;
+    backgroundContainerBrandOverBrand: string;
+    backgroundContainerAlternative: string;
+    backgroundOverlay: string;
+    backgroundSkeleton: string;
+    backgroundSkeletonInverse: string;
+    backgroundSkeletonNegative: string;
+    backgroundSkeletonBrand: string;
+    backgroundBrandTop: string;
+    backgroundBrandBottom: string;
+    appBarBackground: string;
+    navigationBarBackground: string;
+    backgroundDropZoneHover: string;
+    backgroundDropZoneDragover: string;
+    backgroundDropZoneBrandHover: string;
+    backgroundDropZoneBrandDragover: string;
+    backgroundDropZoneNegativeHover: string;
+    backgroundDropZoneNegativeDragover: string;
+    backgroundDropZoneMediaHover: string;
+    backgroundDropZoneMediaDragover: string;
+    skeletonWave: string;
+    borderLow: string;
+    border: string;
+    borderHigh: string;
+    borderSelected: string;
+    coverBackgroundHover: string;
+    coverBackgroundPressed: string;
+    buttonDangerBackground: string;
+    buttonDangerBackgroundPressed: string;
+    buttonDangerBackgroundHover: string;
+    buttonLinkDangerBackgroundInverse: string;
+    buttonLinkDangerBackgroundNegative: string;
+    buttonLinkDangerBackgroundBrand: string;
+    buttonLinkDangerBackgroundMedia: string;
+    buttonLinkDangerBackgroundPressed: string;
+    buttonLinkDangerBackgroundInversePressed: string;
+    buttonLinkDangerBackgroundNegativePressed: string;
+    buttonLinkDangerBackgroundBrandPressed: string;
+    buttonLinkDangerBackgroundMediaPressed: string;
+    buttonLinkBackgroundPressed: string;
+    buttonLinkBackgroundInversePressed: string;
+    buttonLinkBackgroundNegativePressed: string;
+    buttonLinkBackgroundBrandPressed: string;
+    buttonLinkBackgroundMediaPressed: string;
+    buttonPrimaryBackground: string;
+    buttonPrimaryBackgroundInverse: string;
+    buttonPrimaryBackgroundNegative: string;
+    buttonPrimaryBackgroundBrand: string;
+    buttonPrimaryBackgroundMedia: string;
+    buttonPrimaryBackgroundHover: string;
+    buttonPrimaryBackgroundInverseHover: string;
+    buttonPrimaryBackgroundNegativeHover: string;
+    buttonPrimaryBackgroundBrandHover: string;
+    buttonPrimaryBackgroundMediaHover: string;
+    buttonPrimaryBackgroundPressed: string;
+    buttonPrimaryBackgroundInversePressed: string;
+    buttonPrimaryBackgroundNegativePressed: string;
+    buttonPrimaryBackgroundBrandPressed: string;
+    buttonPrimaryBackgroundMediaPressed: string;
+    buttonSecondaryBackgroundBrand: string;
+    buttonSecondaryBorder: string;
+    buttonSecondaryBorderInverse: string;
+    buttonSecondaryBorderNegative: string;
+    buttonSecondaryBorderBrand: string;
+    buttonSecondaryBorderMedia: string;
+    buttonSecondaryBorderPressed: string;
+    buttonSecondaryBorderInversePressed: string;
+    buttonSecondaryBorderNegativePressed: string;
+    buttonSecondaryBorderBrandPressed: string;
+    buttonSecondaryBorderMediaPressed: string;
+    buttonSecondaryBackgroundHover: string;
+    buttonSecondaryBackgroundInverseHover: string;
+    buttonSecondaryBackgroundNegativeHover: string;
+    buttonSecondaryBackgroundBrandHover: string;
+    buttonSecondaryBackgroundMediaHover: string;
+    buttonSecondaryBackgroundPressed: string;
+    buttonSecondaryBackgroundInversePressed: string;
+    buttonSecondaryBackgroundNegativePressed: string;
+    buttonSecondaryBackgroundBrandPressed: string;
+    buttonSecondaryBackgroundMediaPressed: string;
+    textButtonPrimary: string;
+    textButtonPrimaryInverse: string;
+    textButtonPrimaryNegative: string;
+    textButtonPrimaryBrand: string;
+    textButtonPrimaryMedia: string;
+    textButtonPrimaryInversePressed: string;
+    textButtonPrimaryNegativePressed: string;
+    textButtonPrimaryBrandPressed: string;
+    textButtonPrimaryMediaPressed: string;
+    textButtonSecondary: string;
+    textButtonSecondaryInverse: string;
+    textButtonSecondaryNegative: string;
+    textButtonSecondaryBrand: string;
+    textButtonSecondaryMedia: string;
+    textButtonSecondaryPressed: string;
+    textButtonSecondaryInversePressed: string;
+    textButtonSecondaryNegativePressed: string;
+    textButtonSecondaryBrandPressed: string;
+    textButtonSecondaryMediaPressed: string;
+    textLink: string;
+    textLinkInverse: string;
+    textLinkNegative: string;
+    textLinkBrand: string;
+    textLinkMedia: string;
+    textLinkDanger: string;
+    textLinkDangerMedia: string;
+    textLinkSnackbar: string;
+    textActivated: string;
+    textBrand: string;
+    inputBorder: string;
+    inputBorderInverse: string;
+    inputBorderNegative: string;
+    inputBorderBrand: string;
+    completedStep: string;
+    completedStepInverse: string;
+    completedStepNegative: string;
+    completedStepBrand: string;
+    control: string;
+    controlActivated: string;
+    controlInverse: string;
+    controlNegative: string;
+    controlBrand: string;
+    controlActivatedInverse: string;
+    controlActivatedNegative: string;
+    controlActivatedBrand: string;
+    controlError: string;
+    chevronIndicator: string;
+    barTrack: string;
+    barTrackInverse: string;
+    barTrackNegative: string;
+    barTrackBrand: string;
+    loadingBar: string;
+    loadingBarBackground: string;
+    toggleAndroidInactive: string;
+    toggleAndroidBackgroundActive: string;
+    toggleAndroidActiveBrand: string;
+    toggleAndroidInactiveBrand: string;
+    toggleAndroidBackgroundActiveBrand: string;
+    toggleAndroidBackgroundInactiveBrand: string;
+    iosControlKnob: string;
+    controlKnobInverse: string;
+    controlKnobNegative: string;
+    controlKnobBrand: string;
+    divider: string;
+    dividerInverse: string;
+    dividerNegative: string;
+    dividerBrand: string;
+    navigationBarDivider: string;
+    badge: string;
+    feedbackErrorBackground: string;
+    feedbackInfoBackground: string;
+    brand: string;
+    brandHigh: string;
+    inverse: string;
+    negative: string;
+    neutralHigh: string;
+    neutralHighNegative: string;
+    neutralHighBrand: string;
+    neutralMedium: string;
+    neutralMediumInverse: string;
+    neutralMediumNegative: string;
+    neutralMediumBrand: string;
+    neutralLow: string;
+    neutralLowAlternative: string;
+    textPrimary: string;
+    textPrimaryInverse: string;
+    textPrimaryNegative: string;
+    textPrimaryBrand: string;
+    textPrimaryMedia: string;
+    textSecondary: string;
+    textSecondaryInverse: string;
+    textSecondaryNegative: string;
+    textSecondaryBrand: string;
+    textSecondaryMedia: string;
+    success: string;
+    warning: string;
+    error: string;
+    textError: string;
+    textErrorInverse: string;
+    textErrorNegative: string;
+    textErrorBrand: string;
+    promo: string;
+    highlight: string;
+    successLow: string;
+    warningLow: string;
+    errorLow: string;
+    promoLow: string;
+    brandLow: string;
+    successHigh: string;
+    warningHigh: string;
+    errorHigh: string;
+    promoHigh: string;
+    successHighInverse: string;
+    successHighNegative: string;
+    successHighBrand: string;
+    warningHighInverse: string;
+    warningHighNegative: string;
+    warningHighBrand: string;
+    errorHighInverse: string;
+    errorHighNegative: string;
+    errorHighBrand: string;
+    promoHighInverse: string;
+    promoHighNegative: string;
+    promoHighBrand: string;
+    textNavigationBarPrimary: string;
+    textNavigationBarSecondary: string;
+    textNavigationSearchBarHint: string;
+    textNavigationSearchBarText: string;
+    textAppBar: string;
+    textAppBarSelected: string;
+    iosGlassAppBar: string;
+    iosGlassAppBarSelected: string;
+    customTabsBackground: string;
+    tagTextPromo: string;
+    tagTextActive: string;
+    tagTextInactive: string;
+    tagTextInfo: string;
+    tagTextSuccess: string;
+    tagTextWarning: string;
+    tagTextError: string;
+    tagBackgroundPromo: string;
+    tagBackgroundActive: string;
+    tagBackgroundInactive: string;
+    tagBackgroundInfo: string;
+    tagBackgroundSuccess: string;
+    tagBackgroundWarning: string;
+    tagBackgroundError: string;
+    tagTextPromoInverse: string;
+    tagTextPromoNegative: string;
+    tagTextPromoBrand: string;
+    tagTextActiveInverse: string;
+    tagTextActiveNegative: string;
+    tagTextActiveBrand: string;
+    tagTextInactiveInverse: string;
+    tagTextInactiveNegative: string;
+    tagTextInactiveBrand: string;
+    tagTextInfoInverse: string;
+    tagTextInfoNegative: string;
+    tagTextInfoBrand: string;
+    tagTextSuccessInverse: string;
+    tagTextSuccessNegative: string;
+    tagTextSuccessBrand: string;
+    tagTextWarningInverse: string;
+    tagTextWarningNegative: string;
+    tagTextWarningBrand: string;
+    tagTextErrorInverse: string;
+    tagTextErrorNegative: string;
+    tagTextErrorBrand: string;
+    tagBackgroundPromoInverse: string;
+    tagBackgroundPromoNegative: string;
+    tagBackgroundPromoBrand: string;
+    tagBackgroundActiveInverse: string;
+    tagBackgroundActiveNegative: string;
+    tagBackgroundActiveBrand: string;
+    tagBackgroundInactiveInverse: string;
+    tagBackgroundInactiveNegative: string;
+    tagBackgroundInactiveBrand: string;
+    tagBackgroundInfoInverse: string;
+    tagBackgroundInfoNegative: string;
+    tagBackgroundInfoBrand: string;
+    tagBackgroundSuccessInverse: string;
+    tagBackgroundSuccessNegative: string;
+    tagBackgroundSuccessBrand: string;
+    tagBackgroundWarningInverse: string;
+    tagBackgroundWarningNegative: string;
+    tagBackgroundWarningBrand: string;
+    tagBackgroundErrorInverse: string;
+    tagBackgroundErrorNegative: string;
+    tagBackgroundErrorBrand: string;
+    cardContentOverlay: string;
+    cardFooterOverlay: string;
+};

package/src/skins/types/index.tsx

@@ -0,0 +1,153 @@
+import type {Variant} from '../../theme-variant-context';
+import type {Colors} from './colors';
+
+export type {Colors} from './colors';
+
+export type SkinVariant = 'prominent';
+
+export type KnownSkinName =
+    | 'Movistar'
+    | 'Movistar-new'
+    | 'O2'
+    | 'O2-new'
+    | 'Vivo'
+    | 'Vivo-new'
+    | 'Telefonica'
+    | 'Blau'
+    | 'Tu'
+    | 'Esimflag';
+export type SkinName = KnownSkinName | string;
+
+export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+
+export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+
+type ResponsiveValue<T> = {mobile: T; desktop: T};
+
+type PaddingYValues = {
+    top: ResponsiveValue<number>;
+    bottom: ResponsiveValue<number>;
+};
+
+type PaddingXValues = {
+    left: ResponsiveValue<number>;
+    right: ResponsiveValue<number>;
+};
+
+type PaddingValues = PaddingYValues & PaddingXValues;
+
+type TextWeightTokenConfig<PossibleFontWeights = FontWeight> = {
+    weight: PossibleFontWeights;
+    size?: never;
+    lineHeight?: never;
+};
+
+export type TextSizeTokenConfig = {
+    weight?: never;
+    size: ResponsiveValue<number>;
+    lineHeight: ResponsiveValue<number>;
+};
+
+export type TextTokenConfig<PossibleFontWeights = FontWeight> = {
+    weight: PossibleFontWeights;
+    size: ResponsiveValue<number>;
+    lineHeight: ResponsiveValue<number>;
+};
+
+export type TextPresetsConfig = {
+    cardTitle: TextWeightTokenConfig;
+    rowTitle: TextWeightTokenConfig;
+    stepperStepLabel: TextSizeTokenConfig;
+    button: TextWeightTokenConfig<'regular' | 'medium'>;
+    cardDescriptionDefault: TextSizeTokenConfig;
+    cardDescriptionSnap: TextSizeTokenConfig;
+    cardPretitleDefault: TextSizeTokenConfig;
+    cardPretitleSnap: TextSizeTokenConfig;
+    cardSubtitleDefault: TextSizeTokenConfig;
+    cardSubtitleSnap: TextSizeTokenConfig;
+    cardTitleDefault: TextSizeTokenConfig;
+    cardTitleSnap: TextSizeTokenConfig;
+    drawerTitle: TextTokenConfig;
+    chipLabel: TextTokenConfig;
+    link: TextWeightTokenConfig<'regular' | 'medium'>;
+    loadingScreenTitle: TextSizeTokenConfig;
+    title1: TextTokenConfig<'regular' | 'medium'>;
+    title2: TextTokenConfig;
+    title3: TextTokenConfig;
+    title4: TextTokenConfig;
+    indicator: TextWeightTokenConfig<'regular' | 'medium'>;
+    inputHelperText: TextSizeTokenConfig;
+    inputLabel: TextSizeTokenConfig;
+    inputValue: TextSizeTokenConfig;
+    tabsLabel: TextTokenConfig;
+    navigationBar: TextWeightTokenConfig;
+    text1: TextSizeTokenConfig;
+    text2: TextSizeTokenConfig;
+    text3: TextSizeTokenConfig;
+    text4: TextSizeTokenConfig;
+    text5: TextTokenConfig;
+    text6: TextTokenConfig;
+    text7: TextTokenConfig;
+    text8: TextTokenConfig;
+    text9: TextTokenConfig;
+    text10: TextTokenConfig;
+};
+
+type PartialTextPresetsConfig = Partial<TextPresetsConfig>;
+
+export type BorderRadiiConfig = {
+    button: string;
+    input: string;
+    container: string;
+    /**
+     * This will be used for DisplayCards and PosterCards only for the moment. One day we'll unify the borderRadius in all the cards to use container.
+     * @deprecated Use `container` instead
+     */
+    legacyDisplay: string;
+    popup: string;
+    checkbox: string;
+    indicator: string;
+    chip: string;
+    sheet: string;
+    bar: string;
+    avatar: string;
+    mediaSmall: string;
+    tag: string;
+};
+
+export type SpacingConfig = {
+    buttonDefaultPadding: PaddingXValues;
+    buttonSmallPadding: PaddingXValues;
+    cardDefaultPadding: PaddingValues;
+    inputPadding: PaddingYValues;
+    tagPadding: PaddingYValues;
+    feedbackScreenPadding: PaddingValues;
+    heroPadding: PaddingYValues;
+    headerPadding: PaddingYValues;
+    drawerPadding: PaddingValues;
+};
+
+export type ThemeVariantsConfig = {
+    successFeedback: Variant;
+    brandLoadingScreen: Variant;
+};
+
+export type Skin = {
+    name: SkinName;
+    colors: Colors;
+    darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
+    borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
+    spacing?: SpacingConfig;
+};
+
+export type KnownSkin = {
+    name: KnownSkinName;
+    colors: Colors;
+    darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
+    borderRadii?: BorderRadiiConfig;
+    themeVariants?: ThemeVariantsConfig;
+    spacing: SpacingConfig;
+};

package/src/skins/utils.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+    BLAU_SKIN,
+    TELEFONICA_SKIN,
+    VIVO_SKIN,
+    O2_SKIN,
+    O2_NEW_SKIN,
+    MOVISTAR_SKIN,
+    MOVISTAR_NEW_SKIN,
+    VIVO_NEW_SKIN,
+    TU_SKIN,
+    ESIMFLAG_SKIN,
+} from './constants';
+import {getBlauSkin} from './blau';
+import {getTelefonicaSkin} from './telefonica';
+import {getVivoSkin} from './vivo';
+import {getVivoNewSkin} from './vivo-new';
+import {getO2Skin} from './o2';
+import {getO2NewSkin} from './o2-new';
+import {getMovistarSkin} from './movistar';
+import {getMovistarNewSkin} from './movistar-new';
+import {getTuSkin} from './tu';
+import {getEsimflagSkin} from './esimflag';
+
+import type {SkinVariant, KnownSkin, KnownSkinName} from './types';
+
+export const getSkinByName = (name: KnownSkinName, variant?: SkinVariant): KnownSkin => {
+    switch (name) {
+        case BLAU_SKIN:
+            return getBlauSkin(variant);
+        case TELEFONICA_SKIN:
+            return getTelefonicaSkin(variant);
+        case VIVO_SKIN:
+            return getVivoSkin(variant);
+        case VIVO_NEW_SKIN:
+            return getVivoNewSkin(variant);
+        case O2_SKIN:
+            return getO2Skin(variant);
+        case O2_NEW_SKIN:
+            return getO2NewSkin(variant);
+        case MOVISTAR_SKIN:
+            return getMovistarSkin(variant);
+        case MOVISTAR_NEW_SKIN:
+            return getMovistarNewSkin(variant);
+        case TU_SKIN:
+            return getTuSkin(variant);
+        case ESIMFLAG_SKIN:
+            return getEsimflagSkin(variant);
+        default: {
+            const n: never = name;
+            throw Error('Unknown skin name: ' + n);
+        }
+    }
+};
+
+// copied/adapted from https://github.com/gregberge/react-flatten-children/blob/master/src/index.tsx
+export const flattenChildren = (children: React.ReactNode): Array<React.ReactNode> => {
+    const childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce((flatChildren: Array<React.ReactNode>, child) => {
+        if ((child as React.ReactElement<any>).type === React.Fragment) {
+            return flatChildren.concat(flattenChildren((child as React.ReactElement<any>).props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};