esimflag.tsx

import {ESIMFLAG_SKIN} from './constants';
import {applyAlpha} from '../utils/color';

import type {GetKnownSkin, KnownSkin} from './types';

export const palette = {
    blue: '#005CFF',
    blue10: '#E5EFFF',
    blue15: '#CCDEFF',
    blue20: '#B2CEFF',
    blue30: '#80ADFF',
    blue55: '#004ED9',
    blue65: '#0247BF',
    blue80: '#0B2739',
    blue85: '#001740',
    grass: '#99D52A',
    grass10: '#EBF7D4',
    grass70: '#6B951D',
    grass75: '#5C8019',
    peach: '#FF9800',
    peach10: '#FFF4D5',
    peach75: '#995B00',
    purple: '#A140C4',
    purple30: '#D1A1E3',
    purple10: '#FCEFFC',
    purple55: '#8B3AA8',
    blush: '#FFD2E3',
    blush20: '#FFF1F7',
    teal: '#2FDDEA',
    teal10: '#D5F8FB',
    teal75: '#197980',
    chili: '#FA4549',
    tomato: '#FA4549',
    tomato10: '#FEECED',
    tomato55: '#ED0C0C',
    tomato60: '#BA160A',
    tomato65: '#B61515',
    grey1: '#F1F7FF',
    grey2: '#E3EEFF',
    grey3: '#CCD6E5',
    grey4: '#828D9B',
    grey5: '#666B73',
    grey6: '#393C40',
    black: '#00091A',
    white: '#FFFFFF',
    darkModeBlack: '#00001C',
    darkModeGrey: '#08132B',
    darkModeGrey6: '#14213D',
    darkModeBlue: '#0F67FF',
};

export const getEsimflagSkin: GetKnownSkin = () => {
    const skin: KnownSkin = {
        name: ESIMFLAG_SKIN,
        colors: {
            background: palette.white,
            backgroundAlternative: palette.grey1,
            backgroundBrand: `linear-gradient(180deg, ${palette.blue55} 0%, ${palette.blue} 60%, ${palette.purple} 100%)`,
            backgroundBrandSecondary: palette.blue,
            backgroundContainer: palette.white,
            backgroundContainerError: palette.tomato10,
            backgroundContainerHover: applyAlpha(palette.blue55, 0.05),
            backgroundContainerPressed: applyAlpha(palette.blue55, 0.08),
            backgroundContainerBrand: `linear-gradient(180deg, ${palette.blue55} 0%, ${palette.blue} 60%, ${palette.purple} 100%)`,
            backgroundContainerBrandHover: applyAlpha(palette.blue55, 0.2),
            backgroundContainerBrandPressed: applyAlpha(palette.blue55, 0.4),
            backgroundContainerBrandOverInverse: palette.blue80,
            backgroundContainerAlternative: palette.grey1,
            backgroundOverlay: applyAlpha(palette.black, 0.6),
            backgroundSkeleton: palette.grey2,
            backgroundSkeletonInverse: palette.blue55,
            backgroundBrandTop: palette.blue65,
            backgroundBrandBottom: palette.purple,
            appBarBackground: palette.white,
            navigationBarBackground: palette.blue55,
            skeletonWave: palette.grey2,
            borderLow: palette.grey1,
            border: palette.grey3,
            borderHigh: palette.grey5,
            borderSelected: palette.blue,
            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
            buttonDangerBackground: palette.tomato55,
            buttonDangerBackgroundPressed: palette.tomato65,
            buttonDangerBackgroundHover: palette.tomato60,
            buttonLinkDangerBackgroundPressed: palette.tomato10,
            buttonLinkDangerBackgroundInverse: palette.white,
            buttonLinkDangerBackgroundInversePressed: palette.tomato10,
            buttonLinkBackgroundPressed: applyAlpha(palette.purple55, 0.08),
            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
            buttonPrimaryBackground: palette.blue,
            buttonPrimaryBackgroundInverse: palette.white,
            buttonPrimaryBackgroundPressed: palette.blue65,
            buttonPrimaryBackgroundHover: palette.blue55,
            buttonPrimaryBackgroundInversePressed: palette.blue15,
            buttonSecondaryBorder: palette.blue,
            buttonSecondaryBorderPressed: palette.blue55,
            buttonSecondaryBackgroundHover: palette.blue10,
            buttonSecondaryBackgroundPressed: palette.blue15,
            buttonSecondaryBorderInverse: palette.white,
            buttonSecondaryBorderInversePressed: palette.white,
            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.15),
            textButtonPrimary: palette.white,
            textButtonPrimaryInverse: palette.blue,
            textButtonPrimaryInversePressed: palette.blue55,
            textButtonSecondary: palette.blue,
            textButtonSecondaryPressed: palette.blue55,
            textButtonSecondaryInverse: palette.white,
            textButtonSecondaryInversePressed: palette.white,
            textLink: palette.purple,
            textLinkInverse: palette.white,
            textLinkDanger: palette.tomato55,
            textLinkSnackbar: palette.blue30,
            textActivated: palette.blue,
            textBrand: palette.blue,
            inputBorder: palette.grey4,
            inputBorderInverse: palette.white,
            completedStep: palette.blue,
            completedStepInverse: palette.blue80,
            control: palette.grey4,
            controlActivated: palette.blue,
            controlInverse: palette.blue20,
            controlActivatedInverse: palette.white,
            controlError: palette.tomato,
            barTrack: palette.grey3,
            barTrackInverse: applyAlpha(palette.white, 0.3),
            loadingBar: palette.blue,
            loadingBarBackground: palette.grey2,
            toggleAndroidInactive: palette.grey3,
            toggleAndroidBackgroundActive: palette.blue20,
            iosControlKnob: palette.white,
            controlKnobInverse: palette.blue,
            divider: palette.grey3,
            dividerInverse: applyAlpha(palette.white, 0.2),
            navigationBarDivider: palette.grey3,
            badge: palette.tomato65,
            feedbackErrorBackground: palette.tomato,
            feedbackInfoBackground: palette.blue80,
            brand: palette.blue,
            brandHigh: palette.blue55,
            inverse: palette.white,
            neutralHigh: palette.blue85,
            neutralMedium: palette.grey5,
            neutralMediumInverse: palette.grey5,
            neutralLow: palette.grey1,
            neutralLowAlternative: palette.grey2,
            textPrimary: palette.blue85,
            textPrimaryInverse: palette.white,
            textSecondary: palette.grey5,
            textSecondaryInverse: palette.blue10,
            success: palette.grass,
            warning: palette.peach,
            error: palette.tomato,
            textError: palette.tomato55,
            textErrorInverse: palette.white,
            promo: palette.purple,
            highlight: palette.teal75,
            successLow: palette.grass10,
            warningLow: palette.peach10,
            errorLow: palette.tomato10,
            promoLow: palette.purple10,
            brandLow: palette.blue10,
            successHigh: palette.grass70,
            warningHigh: palette.peach75,
            errorHigh: palette.tomato60,
            promoHigh: palette.purple,
            successHighInverse: palette.grass70,
            warningHighInverse: palette.peach75,
            errorHighInverse: palette.tomato60,
            promoHighInverse: palette.purple,
            textNavigationBarPrimary: palette.white,
            textNavigationBarSecondary: palette.blue20,
            textNavigationSearchBarHint: palette.blue20,
            textNavigationSearchBarText: palette.white,
            textAppBar: palette.grey5,
            textAppBarSelected: palette.blue55,
            customTabsBackground: palette.blue,
            tagTextPromo: palette.blue85,
            tagTextActive: palette.blue85,
            tagTextInactive: palette.grey5,
            tagTextInfo: palette.blue85,
            tagTextSuccess: palette.blue85,
            tagTextWarning: palette.blue85,
            tagTextError: palette.blue85,
            tagBackgroundPromo: palette.blush,
            tagBackgroundActive: palette.teal,
            tagBackgroundInactive: palette.grey2,
            tagBackgroundInfo: palette.purple30,
            tagBackgroundSuccess: palette.grass,
            tagBackgroundWarning: palette.peach,
            tagBackgroundError: palette.chili,
            tagTextPromoInverse: palette.purple55,
            tagTextActiveInverse: palette.teal75,
            tagTextInactiveInverse: palette.grey5,
            tagTextInfoInverse: palette.purple,
            tagTextSuccessInverse: palette.grass75,
            tagTextWarningInverse: palette.peach75,
            tagTextErrorInverse: palette.tomato65,
            tagBackgroundPromoInverse: palette.blush,
            tagBackgroundActiveInverse: palette.teal10,
            tagBackgroundInactiveInverse: palette.grey2,
            tagBackgroundInfoInverse: palette.purple10,
            tagBackgroundSuccessInverse: palette.grass10,
            tagBackgroundWarningInverse: palette.peach10,
            tagBackgroundErrorInverse: palette.tomato10,
            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
        },
        darkModeColors: {
            background: palette.darkModeBlack,
            backgroundAlternative: palette.darkModeBlack,
            backgroundBrand: palette.darkModeBlack,
            backgroundBrandSecondary: palette.darkModeBlack,
            backgroundContainer: palette.darkModeGrey,
            backgroundContainerError: palette.darkModeGrey,
            backgroundContainerHover: applyAlpha(palette.white, 0.05),
            backgroundContainerPressed: applyAlpha(palette.white, 0.08),
            backgroundContainerBrand: palette.darkModeGrey,
            backgroundContainerBrandHover: applyAlpha(palette.white, 0.03),
            backgroundContainerBrandPressed: applyAlpha(palette.white, 0.05),
            backgroundContainerBrandOverInverse: palette.darkModeGrey,
            backgroundContainerAlternative: palette.darkModeGrey,
            backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
            backgroundSkeleton: palette.darkModeGrey6,
            backgroundSkeletonInverse: palette.darkModeGrey6,
            backgroundBrandTop: palette.darkModeBlack,
            backgroundBrandBottom: palette.darkModeBlack,
            appBarBackground: palette.darkModeGrey,
            navigationBarBackground: palette.darkModeBlack,
            skeletonWave: palette.grey6,
            borderLow: palette.darkModeBlack,
            border: palette.darkModeGrey,
            borderHigh: palette.grey5,
            borderSelected: palette.blue,
            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
            buttonDangerBackground: palette.tomato,
            buttonDangerBackgroundPressed: palette.tomato55,
            buttonDangerBackgroundHover: palette.tomato55,
            buttonLinkDangerBackgroundPressed: applyAlpha(palette.white, 0.08),
            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.white, 0.08),
            buttonLinkBackgroundPressed: applyAlpha(palette.white, 0.08),
            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
            buttonPrimaryBackground: palette.blue,
            buttonPrimaryBackgroundInverse: palette.blue,
            buttonPrimaryBackgroundPressed: palette.blue55,
            buttonPrimaryBackgroundHover: palette.blue55,
            buttonPrimaryBackgroundInversePressed: palette.blue55,
            buttonSecondaryBackgroundPressed: applyAlpha(palette.white, 0.15),
            buttonSecondaryBorder: palette.white,
            buttonSecondaryBorderPressed: palette.white,
            buttonSecondaryBorderInverse: palette.white,
            buttonSecondaryBorderInversePressed: palette.white,
            buttonSecondaryBackgroundHover: applyAlpha(palette.white, 0.15),
            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.15),
            textButtonPrimary: palette.white,
            textButtonPrimaryInverse: palette.white,
            textButtonPrimaryInversePressed: palette.white,
            textButtonSecondary: palette.grey2,
            textButtonSecondaryPressed: palette.grey2,
            textButtonSecondaryInverse: palette.grey2,
            textButtonSecondaryInversePressed: palette.grey2,
            textLink: palette.purple30,
            textLinkInverse: palette.purple30,
            textLinkDanger: palette.chili,
            textLinkSnackbar: palette.blue30,
            textActivated: palette.blue30,
            textBrand: palette.blue30,
            inputBorder: palette.grey4,
            inputBorderInverse: palette.grey4,
            completedStep: palette.blue,
            completedStepInverse: palette.blue,
            control: palette.grey4,
            controlActivated: palette.blue,
            controlInverse: palette.grey4,
            controlActivatedInverse: palette.darkModeBlue,
            controlError: palette.tomato55,
            barTrack: palette.darkModeGrey6,
            barTrackInverse: palette.darkModeGrey6,
            loadingBar: palette.darkModeBlue,
            loadingBarBackground: palette.darkModeGrey6,
            toggleAndroidInactive: palette.grey2,
            toggleAndroidBackgroundActive: palette.blue15,
            iosControlKnob: palette.grey3,
            controlKnobInverse: palette.grey3,
            badge: palette.tomato65,
            feedbackErrorBackground: palette.tomato60,
            feedbackInfoBackground: palette.darkModeGrey6,
            divider: applyAlpha(palette.white, 0.1),
            dividerInverse: applyAlpha(palette.white, 0.1),
            navigationBarDivider: palette.darkModeBlack,
            brand: palette.blue15,
            brandHigh: applyAlpha(palette.white, 0.05),
            inverse: palette.grey3,
            neutralHigh: palette.grey3,
            neutralMedium: palette.grey6,
            neutralMediumInverse: palette.grey6,
            neutralLow: palette.grey6,
            neutralLowAlternative: palette.grey6,
            textPrimary: palette.grey3,
            textPrimaryInverse: palette.grey3,
            textSecondary: palette.grey4,
            textSecondaryInverse: palette.grey4,
            success: palette.grass,
            warning: palette.peach,
            error: palette.chili,
            textError: palette.chili,
            textErrorInverse: palette.chili,
            promo: palette.purple,
            highlight: palette.teal,
            successLow: palette.darkModeGrey6,
            warningLow: palette.darkModeGrey6,
            errorLow: palette.darkModeGrey6,
            promoLow: palette.darkModeGrey6,
            brandLow: palette.darkModeGrey6,
            successHigh: palette.grass70,
            warningHigh: palette.peach75,
            errorHigh: palette.tomato60,
            promoHigh: palette.purple55,
            successHighInverse: palette.grass75,
            warningHighInverse: palette.peach75,
            errorHighInverse: palette.tomato60,
            promoHighInverse: palette.purple55,
            textNavigationBarPrimary: palette.grey3,
            textNavigationBarSecondary: palette.grey4,
            textNavigationSearchBarHint: palette.grey4,
            textNavigationSearchBarText: palette.grey3,
            textAppBar: palette.grey4,
            textAppBarSelected: palette.blue15,
            customTabsBackground: palette.darkModeBlack,
            tagTextPromo: palette.blush,
            tagTextActive: palette.blue30,
            tagTextInactive: palette.grey3,
            tagTextInfo: palette.purple30,
            tagTextSuccess: palette.grass,
            tagTextWarning: palette.peach,
            tagTextError: palette.chili,
            tagBackgroundPromo: palette.darkModeGrey6,
            tagBackgroundActive: palette.darkModeGrey6,
            tagBackgroundInactive: palette.darkModeGrey6,
            tagBackgroundInfo: palette.darkModeGrey6,
            tagBackgroundSuccess: palette.darkModeGrey6,
            tagBackgroundWarning: palette.darkModeGrey6,
            tagBackgroundError: palette.darkModeGrey6,
            tagTextPromoInverse: palette.blush,
            tagTextActiveInverse: palette.blue30,
            tagTextInactiveInverse: palette.grey3,
            tagTextInfoInverse: palette.blue30,
            tagTextSuccessInverse: palette.grass,
            tagTextWarningInverse: palette.peach,
            tagTextErrorInverse: palette.chili,
            tagBackgroundPromoInverse: palette.darkModeGrey6,
            tagBackgroundActiveInverse: palette.darkModeGrey6,
            tagBackgroundInactiveInverse: palette.darkModeGrey6,
            tagBackgroundInfoInverse: palette.darkModeGrey6,
            tagBackgroundSuccessInverse: palette.darkModeGrey6,
            tagBackgroundWarningInverse: palette.darkModeGrey6,
            tagBackgroundErrorInverse: palette.darkModeGrey6,
            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.black, 0)} 0%, ${applyAlpha(palette.black, 0.4)} 30%, ${applyAlpha(palette.black, 0.7)} 100%)`,
        },
        borderRadii: {
            avatar: '50%',
            bar: '999px',
            button: '32px',
            checkbox: '4px',
            container: '20px',
            indicator: '8px',
            input: '16px',
            legacyDisplay: '20px',
            popup: '16px',
            sheet: '16px',
            mediaSmall: '8px',
        },
        textPresets: {
            button: {weight: 'medium'},
            cardTitle: {weight: 'medium'},
            indicator: {weight: 'medium'},
            link: {weight: 'medium'},
            navigationBar: {weight: 'medium'},
            tabsLabel: {
                lineHeight: {desktop: 24, mobile: 24},
                size: {desktop: 18, mobile: 16},
                weight: 'medium',
            },
            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'bold'},
            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'bold'},
            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'bold'},
            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'bold'},
            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'bold'},
            title1: {weight: 'medium'},
            title2: {weight: 'bold'},
            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
        },
        themeVariants: {
            successFeedback: 'inverse',
            brandLoadingScreen: 'inverse',
        },
    };
    return skin;
};