@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/skins/blau.tsx

@@ -1,724 +0,0 @@
-import {BLAU_SKIN} from './constants';
-import {applyAlpha} from '../utils/color';
-
-import type {GetKnownSkin, KnownSkin} from './types';
-
-export const palette = {
-    blauBluePrimary: '#00B6F1',
-    blauBluePrimary10: '#F7FDFF',
-    blauBluePrimary20: '#E5F6FD',
-    blauBluePrimary30: '#B3E9FB',
-    blauBlueSecondary: '#0072BC',
-    blauBlueSecondary10: '#E5F1F9',
-    blauBlueSecondary20: '#B2D4EC',
-    blauBlueSecondary30: '#80B7DF',
-    blauBlueSecondary60: '#005A99',
-    blauPurple: '#7814B3',
-    blauPurple10: '#F1E7F7',
-    blauPurple30: '#BB89D9',
-    blauYellow: '#FFA922',
-    blauYellow10: '#FFF6E9',
-    blauYellow40: '#FFC364',
-    blauYellow60: '#F09500',
-    blauYellow65: '#D28200',
-    blauYellow70: '#996614',
-    blauGreen: '#30D300',
-    blauGreen10: '#EAFBE5',
-    blauGreen30: '#97E980',
-    blauGreen70: '#1D7F00',
-    blauRed: '#D12937',
-    blauRed10: '#FEECE8',
-    blauRed20: '#FCC7B9',
-    blauRed30: '#FA9E87',
-    blauRed40: '#F97C5D',
-    blauRed70: '#BC3310',
-    grey1: '#F6F6F6',
-    grey2: '#F2F2F2',
-    grey3: '#DDDDDD',
-    grey4: '#8A8C90',
-    grey5: '#666666',
-    grey6: '#000000',
-    white: '#FFFFFF',
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeGrey5: '#6D7D88',
-    darkModeGrey6: '#313235',
-};
-
-export const getBlauSkin: GetKnownSkin = () => {
-    const skin: KnownSkin = {
-        name: BLAU_SKIN,
-        colors: {
-            background: palette.white,
-            backgroundAlternative: palette.blauBluePrimary20,
-            backgroundBrand: palette.blauBluePrimary,
-            backgroundNegative: palette.blauBlueSecondary,
-            backgroundBrandSecondary: palette.blauBluePrimary,
-            backgroundContainer: palette.white,
-            backgroundContainerError: palette.blauRed10,
-            backgroundContainerHover: applyAlpha(palette.blauBlueSecondary, 0.05),
-            backgroundContainerPressed: applyAlpha(palette.blauBlueSecondary, 0.08),
-            backgroundContainerBrand: palette.blauBluePrimary,
-            backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.05),
-            backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.08),
-            backgroundContainerBrandOverInverse: palette.blauBluePrimary30,
-            backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
-            backgroundContainerBrandOverBrand: palette.blauBluePrimary30,
-            backgroundContainerAlternative: palette.blauBluePrimary20,
-            backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
-            backgroundSkeleton: palette.grey3,
-            backgroundSkeletonInverse: palette.blauBlueSecondary,
-            backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
-            backgroundSkeletonBrand: palette.blauBlueSecondary,
-            backgroundBrandTop: palette.blauBluePrimary,
-            backgroundBrandBottom: palette.blauBluePrimary,
-            appBarBackground: palette.white,
-            navigationBarBackground: palette.blauBluePrimary,
-            backgroundDropZoneHover: applyAlpha(palette.blauBlueSecondary, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.blauBlueSecondary, 0.08),
-            backgroundDropZoneBrandHover: applyAlpha(palette.grey6, 0.05),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.grey6, 0.08),
-            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
-            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.grey6, 0.05),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.grey6, 0.08),
-            skeletonWave: palette.grey2,
-            borderLow: palette.grey1,
-            border: palette.grey3,
-            borderHigh: palette.grey5,
-            borderSelected: palette.blauBlueSecondary60,
-            completedStep: palette.blauBlueSecondary,
-            completedStepInverse: palette.blauBlueSecondary60,
-            completedStepNegative: palette.blauBlueSecondary60,
-            completedStepBrand: palette.blauBlueSecondary60,
-            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
-            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.blauRed,
-            buttonDangerBackgroundPressed: palette.blauRed70,
-            buttonDangerBackgroundHover: palette.blauRed70,
-            buttonLinkDangerBackgroundInverse: palette.white,
-            buttonLinkDangerBackgroundNegative: palette.white,
-            buttonLinkDangerBackgroundBrand: palette.white,
-            buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: palette.blauRed10,
-            buttonLinkDangerBackgroundInversePressed: palette.blauRed10,
-            buttonLinkDangerBackgroundNegativePressed: palette.blauRed10,
-            buttonLinkDangerBackgroundBrandPressed: palette.blauRed10,
-            buttonLinkDangerBackgroundMediaPressed: palette.blauRed10,
-            buttonLinkBackgroundPressed: palette.blauPurple10,
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
-            buttonPrimaryBackground: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundNegative: palette.white,
-            buttonPrimaryBackgroundBrand: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundInverseHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundNegativeHover: palette.blauBluePrimary20,
-            buttonPrimaryBackgroundBrandHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundMediaHover: palette.blauBluePrimary20,
-            buttonPrimaryBackgroundPressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundInversePressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundNegativePressed: palette.blauBluePrimary30,
-            buttonPrimaryBackgroundBrandPressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundMediaPressed: palette.blauBluePrimary30,
-            buttonSecondaryBackgroundBrand: palette.white,
-            buttonSecondaryBorder: palette.blauBlueSecondary,
-            buttonSecondaryBorderInverse: applyAlpha(palette.white, 0),
-            buttonSecondaryBorderNegative: palette.white,
-            buttonSecondaryBorderBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.blauBlueSecondary60,
-            buttonSecondaryBorderInversePressed: applyAlpha(palette.white, 0),
-            buttonSecondaryBorderNegativePressed: palette.white,
-            buttonSecondaryBorderBrandPressed: applyAlpha(palette.white, 0),
-            buttonSecondaryBorderMediaPressed: palette.white,
-            buttonSecondaryBackgroundHover: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundInverseHover: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundBrandHover: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundPressed: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundInversePressed: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundBrandPressed: palette.blauBlueSecondary10,
-            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
-            textButtonPrimary: palette.white,
-            textButtonPrimaryInverse: palette.white,
-            textButtonPrimaryNegative: palette.blauBlueSecondary,
-            textButtonPrimaryBrand: palette.white,
-            textButtonPrimaryMedia: palette.blauBlueSecondary,
-            textButtonPrimaryInversePressed: palette.white,
-            textButtonPrimaryNegativePressed: palette.blauBlueSecondary60,
-            textButtonPrimaryBrandPressed: palette.white,
-            textButtonPrimaryMediaPressed: palette.blauBlueSecondary60,
-            textButtonSecondary: palette.blauBlueSecondary,
-            textButtonSecondaryInverse: palette.blauBlueSecondary,
-            textButtonSecondaryNegative: palette.white,
-            textButtonSecondaryBrand: palette.blauBlueSecondary,
-            textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.blauBlueSecondary60,
-            textButtonSecondaryInversePressed: palette.blauBlueSecondary60,
-            textButtonSecondaryNegativePressed: palette.white,
-            textButtonSecondaryBrandPressed: palette.blauBlueSecondary60,
-            textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.blauPurple,
-            textLinkInverse: palette.grey6,
-            textLinkNegative: palette.white,
-            textLinkBrand: palette.grey6,
-            textLinkMedia: palette.white,
-            textLinkDanger: palette.blauRed,
-            textLinkDangerMedia: palette.blauRed,
-            textLinkSnackbar: palette.blauPurple30,
-            textActivated: palette.blauBlueSecondary,
-            textBrand: palette.blauBlueSecondary,
-            inputBorder: palette.grey4,
-            inputBorderInverse: palette.grey6,
-            inputBorderNegative: palette.white,
-            inputBorderBrand: palette.grey6,
-            control: palette.grey4,
-            controlActivated: palette.blauBlueSecondary,
-            controlInverse: palette.blauBlueSecondary60,
-            controlNegative: palette.blauBluePrimary30,
-            controlBrand: palette.blauBlueSecondary60,
-            controlActivatedInverse: palette.blauBlueSecondary60,
-            controlActivatedNegative: palette.white,
-            controlActivatedBrand: palette.blauBlueSecondary60,
-            controlError: palette.blauRed,
-            chevronIndicator: palette.grey5,
-            barTrack: palette.grey3,
-            barTrackInverse: applyAlpha(palette.grey6, 0.2),
-            barTrackNegative: applyAlpha(palette.grey6, 0.2),
-            barTrackBrand: applyAlpha(palette.grey6, 0.2),
-            loadingBar: palette.blauBlueSecondary,
-            loadingBarBackground: palette.blauBlueSecondary20,
-            toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
-            toggleAndroidActiveBrand: palette.blauBlueSecondary60,
-            toggleAndroidInactiveBrand: palette.grey2,
-            toggleAndroidBackgroundActiveBrand: palette.blauBlueSecondary30,
-            toggleAndroidBackgroundInactiveBrand: palette.grey2,
-            iosControlKnob: palette.white,
-            controlKnobInverse: palette.blauBluePrimary,
-            controlKnobNegative: palette.blauBlueSecondary,
-            controlKnobBrand: palette.blauBluePrimary,
-            divider: palette.grey3,
-            dividerInverse: applyAlpha(palette.grey6, 0.2),
-            dividerNegative: applyAlpha(palette.white, 0.2),
-            dividerBrand: applyAlpha(palette.grey6, 0.2),
-            navigationBarDivider: palette.blauBluePrimary,
-            badge: palette.blauRed,
-            feedbackErrorBackground: palette.blauRed,
-            feedbackInfoBackground: palette.grey6,
-            brand: palette.blauBluePrimary,
-            brandHigh: palette.blauBlueSecondary60,
-            inverse: palette.white,
-            negative: palette.white,
-            neutralHigh: palette.grey6,
-            neutralHighNegative: palette.white,
-            neutralHighBrand: palette.grey6,
-            neutralMedium: palette.grey5,
-            neutralMediumInverse: palette.grey5,
-            neutralMediumNegative: palette.grey5,
-            neutralMediumBrand: palette.grey5,
-            neutralLow: palette.grey1,
-            neutralLowAlternative: palette.grey2,
-            textPrimary: palette.grey6,
-            textPrimaryInverse: palette.grey6,
-            textPrimaryNegative: palette.white,
-            textPrimaryBrand: palette.grey6,
-            textPrimaryMedia: palette.white,
-            textSecondary: palette.grey5,
-            textSecondaryInverse: palette.grey6,
-            textSecondaryNegative: palette.blauBluePrimary20,
-            textSecondaryBrand: palette.grey6,
-            textSecondaryMedia: palette.white,
-            error: palette.blauRed,
-            textError: palette.blauRed,
-            textErrorInverse: palette.grey6,
-            textErrorNegative: palette.white,
-            textErrorBrand: palette.grey6,
-            success: palette.blauGreen70,
-            warning: palette.blauYellow65,
-            promo: palette.blauPurple,
-            highlight: palette.blauBluePrimary,
-            successLow: palette.blauGreen10,
-            warningLow: palette.blauYellow10,
-            errorLow: palette.blauRed10,
-            promoLow: palette.blauPurple10,
-            brandLow: palette.blauBluePrimary20,
-            successHigh: palette.blauGreen70,
-            warningHigh: palette.blauYellow70,
-            errorHigh: palette.blauRed70,
-            promoHigh: palette.blauPurple,
-            successHighInverse: palette.blauGreen70,
-            successHighNegative: palette.blauGreen70,
-            successHighBrand: palette.blauGreen70,
-            warningHighInverse: palette.blauYellow70,
-            warningHighNegative: palette.blauYellow70,
-            warningHighBrand: palette.blauYellow70,
-            errorHighInverse: palette.blauRed70,
-            errorHighNegative: palette.blauRed70,
-            errorHighBrand: palette.blauRed70,
-            promoHighInverse: palette.blauPurple,
-            promoHighNegative: palette.blauPurple,
-            promoHighBrand: palette.blauPurple,
-            textNavigationBarPrimary: palette.grey6,
-            textNavigationBarSecondary: palette.grey6,
-            textNavigationSearchBarHint: palette.grey6,
-            textNavigationSearchBarText: palette.grey6,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.blauBlueSecondary60,
-            iosGlassAppBar: palette.grey6,
-            iosGlassAppBarSelected: palette.blauBlueSecondary60,
-            customTabsBackground: palette.blauBluePrimary,
-            tagTextPromo: palette.blauPurple,
-            tagTextActive: palette.blauBlueSecondary,
-            tagTextInactive: palette.grey5,
-            tagTextInfo: palette.blauBlueSecondary,
-            tagTextSuccess: palette.blauGreen70,
-            tagTextWarning: palette.blauYellow70,
-            tagTextError: palette.blauRed70,
-            tagBackgroundPromo: palette.blauPurple10,
-            tagBackgroundActive: palette.blauBluePrimary20,
-            tagBackgroundInactive: palette.grey1,
-            tagBackgroundInfo: palette.blauBluePrimary20,
-            tagBackgroundSuccess: palette.blauGreen10,
-            tagBackgroundWarning: palette.blauYellow10,
-            tagBackgroundError: palette.blauRed10,
-            tagTextPromoInverse: palette.blauPurple,
-            tagTextPromoNegative: palette.blauPurple,
-            tagTextPromoBrand: palette.blauPurple,
-            tagTextActiveInverse: palette.blauBlueSecondary,
-            tagTextActiveNegative: palette.blauBlueSecondary,
-            tagTextActiveBrand: palette.blauBlueSecondary,
-            tagTextInactiveInverse: palette.grey5,
-            tagTextInactiveNegative: palette.grey5,
-            tagTextInactiveBrand: palette.grey5,
-            tagTextInfoInverse: palette.blauBlueSecondary,
-            tagTextInfoNegative: palette.blauBlueSecondary,
-            tagTextInfoBrand: palette.blauBlueSecondary,
-            tagTextSuccessInverse: palette.blauGreen70,
-            tagTextSuccessNegative: palette.blauGreen70,
-            tagTextSuccessBrand: palette.blauGreen70,
-            tagTextWarningInverse: palette.blauYellow70,
-            tagTextWarningNegative: palette.blauYellow70,
-            tagTextWarningBrand: palette.blauYellow70,
-            tagTextErrorInverse: palette.blauRed70,
-            tagTextErrorNegative: palette.blauRed70,
-            tagTextErrorBrand: palette.blauRed70,
-            tagBackgroundPromoInverse: palette.blauPurple10,
-            tagBackgroundPromoNegative: palette.blauPurple10,
-            tagBackgroundPromoBrand: palette.blauPurple10,
-            tagBackgroundActiveInverse: palette.blauBluePrimary20,
-            tagBackgroundActiveNegative: palette.blauBluePrimary20,
-            tagBackgroundActiveBrand: palette.blauBluePrimary20,
-            tagBackgroundInactiveInverse: palette.grey1,
-            tagBackgroundInactiveNegative: palette.grey1,
-            tagBackgroundInactiveBrand: palette.grey1,
-            tagBackgroundInfoInverse: palette.blauBluePrimary20,
-            tagBackgroundInfoNegative: palette.blauBluePrimary20,
-            tagBackgroundInfoBrand: palette.blauBluePrimary20,
-            tagBackgroundSuccessInverse: palette.blauGreen10,
-            tagBackgroundSuccessNegative: palette.blauGreen10,
-            tagBackgroundSuccessBrand: palette.blauGreen10,
-            tagBackgroundWarningInverse: palette.blauYellow10,
-            tagBackgroundWarningNegative: palette.blauYellow10,
-            tagBackgroundWarningBrand: palette.blauYellow10,
-            tagBackgroundErrorInverse: palette.blauRed10,
-            tagBackgroundErrorNegative: palette.blauRed10,
-            tagBackgroundErrorBrand: palette.blauRed10,
-            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.grey6, 0)} 0%, ${applyAlpha(palette.grey6, 0.4)} 30%, ${applyAlpha(palette.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: applyAlpha(palette.grey6, 0.7),
-        },
-        darkModeColors: {
-            background: palette.darkModeBlack,
-            backgroundAlternative: palette.darkModeBlack,
-            backgroundBrand: palette.darkModeBlack,
-            backgroundNegative: 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,
-            backgroundContainerNegative: palette.darkModeGrey,
-            backgroundContainerBrandOverBrand: palette.darkModeGrey,
-            backgroundContainerAlternative: palette.darkModeGrey,
-            backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
-            backgroundSkeleton: palette.darkModeGrey,
-            backgroundSkeletonInverse: palette.darkModeGrey,
-            backgroundSkeletonNegative: palette.darkModeGrey,
-            backgroundSkeletonBrand: palette.darkModeGrey,
-            backgroundBrandTop: palette.darkModeBlack,
-            backgroundBrandBottom: palette.darkModeBlack,
-            appBarBackground: palette.darkModeGrey,
-            navigationBarBackground: palette.darkModeBlack,
-            backgroundDropZoneHover: applyAlpha(palette.white, 0.05),
-            backgroundDropZoneDragover: applyAlpha(palette.white, 0.08),
-            backgroundDropZoneBrandHover: applyAlpha(palette.white, 0.03),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.white, 0.05),
-            backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.15),
-            backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.15),
-            backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
-            skeletonWave: palette.grey5,
-            borderLow: palette.darkModeBlack,
-            border: palette.darkModeGrey,
-            borderHigh: palette.grey5,
-            borderSelected: palette.blauBlueSecondary60,
-            completedStep: palette.blauBlueSecondary,
-            completedStepInverse: palette.blauBlueSecondary,
-            completedStepNegative: palette.blauBlueSecondary,
-            completedStepBrand: palette.blauBlueSecondary,
-            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
-            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.blauRed,
-            buttonDangerBackgroundPressed: palette.blauRed70,
-            buttonDangerBackgroundHover: palette.blauRed70,
-            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonLinkDangerBackgroundMedia: palette.white,
-            buttonLinkDangerBackgroundPressed: applyAlpha(palette.blauRed, 0.3),
-            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkDangerBackgroundMediaPressed: palette.blauRed10,
-            buttonLinkBackgroundPressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkBackgroundNegativePressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkBackgroundBrandPressed: applyAlpha(palette.blauPurple, 0.3),
-            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
-            buttonPrimaryBackground: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundNegative: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundBrand: palette.blauBlueSecondary,
-            buttonPrimaryBackgroundMedia: palette.white,
-            buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundInverseHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundNegativeHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundBrandHover: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundMediaHover: palette.blauBluePrimary20,
-            buttonPrimaryBackgroundPressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundInversePressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundNegativePressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundBrandPressed: palette.blauBlueSecondary60,
-            buttonPrimaryBackgroundMediaPressed: palette.blauBluePrimary30,
-            buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
-            buttonSecondaryBorder: palette.white,
-            buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderNegative: palette.white,
-            buttonSecondaryBorderBrand: palette.white,
-            buttonSecondaryBorderMedia: palette.white,
-            buttonSecondaryBorderPressed: palette.white,
-            buttonSecondaryBorderInversePressed: palette.white,
-            buttonSecondaryBorderNegativePressed: palette.white,
-            buttonSecondaryBorderBrandPressed: palette.white,
-            buttonSecondaryBorderMediaPressed: palette.white,
-            buttonSecondaryBackgroundHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundInverseHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundBrandHover: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
-            buttonSecondaryBackgroundPressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundInversePressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
-            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
-            textButtonPrimary: palette.grey2,
-            textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryNegative: palette.grey2,
-            textButtonPrimaryBrand: palette.grey2,
-            textButtonPrimaryMedia: palette.blauBlueSecondary,
-            textButtonPrimaryInversePressed: palette.grey2,
-            textButtonPrimaryNegativePressed: palette.grey2,
-            textButtonPrimaryBrandPressed: palette.grey2,
-            textButtonPrimaryMediaPressed: palette.blauBlueSecondary60,
-            textButtonSecondary: palette.grey2,
-            textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryNegative: palette.grey2,
-            textButtonSecondaryBrand: palette.grey2,
-            textButtonSecondaryMedia: palette.white,
-            textButtonSecondaryPressed: palette.grey2,
-            textButtonSecondaryInversePressed: palette.grey2,
-            textButtonSecondaryNegativePressed: palette.grey2,
-            textButtonSecondaryBrandPressed: palette.grey2,
-            textButtonSecondaryMediaPressed: palette.white,
-            textLink: palette.blauPurple30,
-            textLinkInverse: palette.blauPurple30,
-            textLinkNegative: palette.blauPurple30,
-            textLinkBrand: palette.blauPurple30,
-            textLinkMedia: palette.white,
-            textLinkDanger: palette.blauRed40,
-            textLinkDangerMedia: palette.blauRed,
-            textLinkSnackbar: palette.blauPurple30,
-            textActivated: palette.blauBluePrimary,
-            textBrand: palette.blauBluePrimary,
-            inputBorder: palette.darkModeGrey5,
-            inputBorderInverse: palette.darkModeGrey5,
-            inputBorderNegative: palette.darkModeGrey5,
-            inputBorderBrand: palette.darkModeGrey5,
-            control: palette.grey4,
-            controlActivated: palette.blauBlueSecondary,
-            controlInverse: palette.grey4,
-            controlNegative: palette.grey4,
-            controlBrand: palette.grey4,
-            controlActivatedInverse: palette.blauBlueSecondary,
-            controlActivatedNegative: palette.blauBlueSecondary,
-            controlActivatedBrand: palette.blauBlueSecondary,
-            controlError: palette.blauRed,
-            chevronIndicator: palette.grey4,
-            barTrack: palette.grey5,
-            barTrackInverse: palette.grey5,
-            barTrackNegative: palette.grey5,
-            barTrackBrand: palette.grey5,
-            loadingBar: palette.blauBluePrimary,
-            loadingBarBackground: palette.grey5,
-            toggleAndroidInactive: palette.grey3,
-            toggleAndroidBackgroundActive: palette.blauBluePrimary30,
-            toggleAndroidActiveBrand: palette.blauBlueSecondary60,
-            toggleAndroidInactiveBrand: palette.grey3,
-            toggleAndroidBackgroundActiveBrand: palette.blauBluePrimary30,
-            toggleAndroidBackgroundInactiveBrand: palette.grey4,
-            iosControlKnob: palette.grey2,
-            controlKnobInverse: palette.grey2,
-            controlKnobNegative: palette.grey2,
-            controlKnobBrand: palette.grey2,
-            divider: applyAlpha(palette.white, 0.09),
-            dividerInverse: applyAlpha(palette.white, 0.05),
-            dividerNegative: applyAlpha(palette.white, 0.05),
-            dividerBrand: applyAlpha(palette.white, 0.05),
-            navigationBarDivider: palette.darkModeBlack,
-            badge: palette.blauRed,
-            feedbackErrorBackground: palette.blauRed,
-            feedbackInfoBackground: palette.darkModeGrey,
-            brand: palette.blauBluePrimary,
-            brandHigh: applyAlpha(palette.white, 0.05),
-            inverse: palette.grey2,
-            negative: palette.grey2,
-            neutralHigh: palette.grey2,
-            neutralHighNegative: palette.grey2,
-            neutralHighBrand: palette.grey2,
-            neutralMedium: palette.grey4,
-            neutralMediumInverse: palette.grey4,
-            neutralMediumNegative: palette.grey4,
-            neutralMediumBrand: palette.grey4,
-            neutralLow: palette.darkModeGrey6,
-            neutralLowAlternative: palette.darkModeGrey6,
-            textPrimary: palette.grey2,
-            textPrimaryInverse: palette.grey2,
-            textPrimaryNegative: palette.grey2,
-            textPrimaryBrand: palette.grey2,
-            textPrimaryMedia: palette.white,
-            textSecondary: palette.grey4,
-            textSecondaryInverse: palette.grey4,
-            textSecondaryNegative: palette.grey4,
-            textSecondaryBrand: palette.grey4,
-            textSecondaryMedia: palette.white,
-            error: palette.blauRed,
-            textError: palette.blauRed40,
-            textErrorInverse: palette.blauRed40,
-            textErrorNegative: palette.blauRed40,
-            textErrorBrand: palette.blauRed40,
-            success: palette.blauGreen,
-            warning: palette.blauYellow,
-            promo: palette.blauPurple,
-            highlight: palette.blauBluePrimary,
-            successLow: palette.darkModeGrey6,
-            warningLow: palette.darkModeGrey6,
-            errorLow: palette.darkModeGrey6,
-            promoLow: palette.darkModeGrey6,
-            brandLow: palette.darkModeGrey6,
-            successHigh: palette.blauGreen30,
-            warningHigh: palette.blauYellow40,
-            errorHigh: palette.blauRed40,
-            promoHigh: palette.blauPurple30,
-            successHighInverse: palette.blauGreen70,
-            successHighNegative: palette.blauGreen70,
-            successHighBrand: palette.blauGreen70,
-            warningHighInverse: palette.blauYellow70,
-            warningHighNegative: palette.blauYellow70,
-            warningHighBrand: palette.blauYellow70,
-            errorHighInverse: palette.blauRed70,
-            errorHighNegative: palette.blauRed70,
-            errorHighBrand: palette.blauRed70,
-            promoHighInverse: palette.blauPurple,
-            promoHighNegative: palette.blauPurple,
-            promoHighBrand: palette.blauPurple,
-            textNavigationBarPrimary: palette.grey2,
-            textNavigationBarSecondary: palette.grey4,
-            textNavigationSearchBarHint: palette.grey4,
-            textNavigationSearchBarText: palette.grey2,
-            textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2,
-            iosGlassAppBar: palette.white,
-            iosGlassAppBarSelected: palette.white,
-            customTabsBackground: palette.darkModeBlack,
-            tagTextPromo: palette.blauPurple30,
-            tagTextActive: palette.blauBluePrimary,
-            tagTextInactive: palette.grey3,
-            tagTextInfo: palette.blauBluePrimary,
-            tagTextSuccess: palette.blauGreen30,
-            tagTextWarning: palette.blauYellow40,
-            tagTextError: palette.blauRed40,
-            tagBackgroundPromo: palette.darkModeGrey6,
-            tagBackgroundActive: palette.darkModeGrey6,
-            tagBackgroundInactive: palette.darkModeGrey6,
-            tagBackgroundInfo: palette.darkModeGrey6,
-            tagBackgroundSuccess: palette.darkModeGrey6,
-            tagBackgroundWarning: palette.darkModeGrey6,
-            tagBackgroundError: palette.darkModeGrey6,
-            tagTextPromoInverse: palette.blauPurple30,
-            tagTextPromoNegative: palette.blauPurple30,
-            tagTextPromoBrand: palette.blauPurple30,
-            tagTextActiveInverse: palette.blauBluePrimary,
-            tagTextActiveNegative: palette.blauBluePrimary,
-            tagTextActiveBrand: palette.blauBluePrimary,
-            tagTextInactiveInverse: palette.grey3,
-            tagTextInactiveNegative: palette.grey3,
-            tagTextInactiveBrand: palette.grey3,
-            tagTextInfoInverse: palette.blauBluePrimary,
-            tagTextInfoNegative: palette.blauBluePrimary,
-            tagTextInfoBrand: palette.blauBluePrimary,
-            tagTextSuccessInverse: palette.blauGreen30,
-            tagTextSuccessNegative: palette.blauGreen30,
-            tagTextSuccessBrand: palette.blauGreen30,
-            tagTextWarningInverse: palette.blauYellow40,
-            tagTextWarningNegative: palette.blauYellow40,
-            tagTextWarningBrand: palette.blauYellow40,
-            tagTextErrorInverse: palette.blauRed40,
-            tagTextErrorNegative: palette.blauRed40,
-            tagTextErrorBrand: palette.blauRed40,
-            tagBackgroundPromoInverse: palette.darkModeGrey6,
-            tagBackgroundPromoNegative: palette.darkModeGrey6,
-            tagBackgroundPromoBrand: palette.darkModeGrey6,
-            tagBackgroundActiveInverse: palette.darkModeGrey6,
-            tagBackgroundActiveNegative: palette.darkModeGrey6,
-            tagBackgroundActiveBrand: palette.darkModeGrey6,
-            tagBackgroundInactiveInverse: palette.darkModeGrey6,
-            tagBackgroundInactiveNegative: palette.darkModeGrey6,
-            tagBackgroundInactiveBrand: palette.darkModeGrey6,
-            tagBackgroundInfoInverse: palette.darkModeGrey6,
-            tagBackgroundInfoNegative: palette.darkModeGrey6,
-            tagBackgroundInfoBrand: palette.darkModeGrey6,
-            tagBackgroundSuccessInverse: palette.darkModeGrey6,
-            tagBackgroundSuccessNegative: palette.darkModeGrey6,
-            tagBackgroundSuccessBrand: palette.darkModeGrey6,
-            tagBackgroundWarningInverse: palette.darkModeGrey6,
-            tagBackgroundWarningNegative: palette.darkModeGrey6,
-            tagBackgroundWarningBrand: palette.darkModeGrey6,
-            tagBackgroundErrorInverse: palette.darkModeGrey6,
-            tagBackgroundErrorNegative: palette.darkModeGrey6,
-            tagBackgroundErrorBrand: palette.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${applyAlpha(palette.grey6, 0)} 0%, ${applyAlpha(palette.grey6, 0.4)} 30%, ${applyAlpha(palette.grey6, 0.7)} 100%)`,
-            cardFooterOverlay: applyAlpha(palette.grey6, 0.7),
-        },
-        borderRadii: {
-            avatar: '50%',
-            bar: '999px',
-            button: '4px',
-            checkbox: '2px',
-            container: '8px',
-            indicator: '24px',
-            chip: '24px',
-            tag: '24px',
-            input: '8px',
-            legacyDisplay: '16px',
-            popup: '8px',
-            sheet: '8px',
-            mediaSmall: '8px',
-        },
-        textPresets: {
-            button: {weight: 'medium'},
-            cardDescriptionDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardTitle: {weight: 'regular'},
-            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
-                weight: 'medium',
-            },
-            drawerTitle: {
-                lineHeight: {desktop: 32, mobile: 24},
-                size: {desktop: 28, mobile: 20},
-                weight: 'light',
-            },
-            indicator: {weight: 'medium'},
-            inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
-            inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
-            inputValue: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
-            link: {weight: 'medium'},
-            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            navigationBar: {weight: 'medium'},
-            rowTitle: {weight: 'regular'},
-            stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            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: 'light'},
-            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
-            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
-            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
-            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
-            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
-            title1: {
-                lineHeight: {desktop: 20, mobile: 16},
-                size: {desktop: 14, mobile: 12},
-                weight: 'medium',
-            },
-            title2: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}, weight: 'light'},
-            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            title4: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
-        },
-        themeVariants: {
-            successFeedback: 'default',
-            brandLoadingScreen: 'default',
-        },
-        spacing: {
-            buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
-            buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
-            cardDefaultPadding: {
-                top: {mobile: 16, desktop: 24},
-                bottom: {mobile: 16, desktop: 24},
-                left: {mobile: 16, desktop: 24},
-                right: {mobile: 16, desktop: 24},
-            },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
-            tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
-            feedbackScreenPadding: {
-                top: {mobile: 64, desktop: 64},
-                bottom: {mobile: 16, desktop: 64},
-                left: {mobile: 16, desktop: 64},
-                right: {mobile: 16, desktop: 64},
-            },
-            heroPadding: {top: {mobile: 24, desktop: 56}, bottom: {mobile: 24, desktop: 56}},
-            headerPadding: {top: {mobile: 24, desktop: 48}, bottom: {mobile: 24, desktop: 48}},
-            drawerPadding: {
-                top: {mobile: 32, desktop: 40},
-                bottom: {mobile: 16, desktop: 24},
-                left: {mobile: 16, desktop: 40},
-                right: {mobile: 16, desktop: 40},
-            },
-        },
-    };
-    return skin;
-};