@telefonica/mistica 16.64.0-beta.1 → 16.64.0

package/src/community/cyber/example-component.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css';
+import {vars} from '../../skins/skin-contract.css';
+
+export const example = style({
+    backgroundColor: vars.colors.brand,
+    color: vars.colors.textPrimaryInverse,
+});

package/src/community/cyber/example-component.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as styles from './example-component.css';
+import Box from '../../box';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const ExampleComponent = (props: Props): JSX.Element => {
+    return (
+        <div className={styles.example}>
+            <Box padding={16}>{props.children}</Box>
+        </div>
+    );
+};
+
+export default ExampleComponent;

package/src/community/cyber/index.tsx

@@ -0,0 +1 @@
+export {default as ExampleComponent} from './example-component';

package/src/community/index.tsx

@@ -9,3 +9,6 @@ export {
     ValueBlock,
     ProgressBlock,
 } from './blocks';
+
+export {ExampleComponent as CyberExampleComponent} from './cyber';
+export {getCyberSkin, CYBER_SKIN} from './skins/cyber-skin';

package/src/community/skins/cyber-skin.tsx

@@ -0,0 +1,628 @@
+import {applyAlpha} from '../../utils/color';
+
+import type {Skin} from '../../skins/types';
+
+export const CYBER_SKIN = 'Cyber';
+
+// TODO: Replace skin with real one when ready
+
+export const palette = {
+    primary: '#00B6F1',
+    primary10: '#F7FDFF',
+    primary20: '#E5F6FD',
+    primary30: '#B3E9FB',
+    secondary: '#0072BC',
+    secondary10: '#E5F1F9',
+    secondary20: '#B2D4EC',
+    secondary30: '#80B7DF',
+    secondary60: '#005A99',
+    accent: '#7814B3',
+    accent10: '#F1E7F7',
+    accent30: '#BB89D9',
+    yellow: '#FFA922',
+    yellow10: '#FFF6E9',
+    yellow40: '#FFC364',
+    yellow60: '#F09500',
+    yellow65: '#D28200',
+    yellow70: '#996614',
+    green: '#30D300',
+    green10: '#EAFBE5',
+    green30: '#97E980',
+    green70: '#1D7F00',
+    red: '#D12937',
+    red10: '#FEECE8',
+    red20: '#FCC7B9',
+    red30: '#FA9E87',
+    red40: '#F97C5D',
+    red70: '#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 getCyberSkin = (): Skin => {
+    const skin: Skin = {
+        name: CYBER_SKIN,
+        colors: {
+            background: palette.white,
+            backgroundAlternative: palette.primary20,
+            backgroundBrand: palette.primary,
+            backgroundNegative: palette.secondary,
+            backgroundBrandSecondary: palette.primary,
+            backgroundContainer: palette.white,
+            backgroundContainerError: palette.red10,
+            backgroundContainerHover: applyAlpha(palette.secondary, 0.05),
+            backgroundContainerPressed: applyAlpha(palette.secondary, 0.08),
+            backgroundContainerBrand: palette.primary,
+            backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.05),
+            backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.08),
+            backgroundContainerBrandOverInverse: palette.primary30,
+            backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
+            backgroundContainerBrandOverBrand: palette.primary30,
+            backgroundContainerAlternative: palette.primary20,
+            backgroundOverlay: applyAlpha(palette.secondary, 0.75),
+            backgroundSkeleton: palette.grey3,
+            backgroundSkeletonInverse: palette.secondary,
+            backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
+            backgroundSkeletonBrand: palette.secondary,
+            backgroundBrandTop: palette.primary,
+            backgroundBrandBottom: palette.primary,
+            appBarBackground: palette.white,
+            navigationBarBackground: palette.primary,
+            backgroundDropZoneHover: applyAlpha(palette.secondary, 0.05),
+            backgroundDropZoneDragover: applyAlpha(palette.secondary, 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.secondary60,
+            completedStep: palette.secondary,
+            completedStepInverse: palette.secondary60,
+            completedStepNegative: palette.secondary60,
+            completedStepBrand: palette.secondary60,
+            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
+            buttonDangerBackground: palette.red,
+            buttonDangerBackgroundPressed: palette.red70,
+            buttonDangerBackgroundHover: palette.red70,
+            buttonLinkDangerBackgroundInverse: palette.white,
+            buttonLinkDangerBackgroundNegative: palette.white,
+            buttonLinkDangerBackgroundBrand: palette.white,
+            buttonLinkDangerBackgroundMedia: palette.white,
+            buttonLinkDangerBackgroundPressed: palette.red10,
+            buttonLinkDangerBackgroundInversePressed: palette.red10,
+            buttonLinkDangerBackgroundNegativePressed: palette.red10,
+            buttonLinkDangerBackgroundBrandPressed: palette.red10,
+            buttonLinkDangerBackgroundMediaPressed: palette.red10,
+            buttonLinkBackgroundPressed: palette.accent10,
+            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.secondary,
+            buttonPrimaryBackgroundInverse: palette.secondary,
+            buttonPrimaryBackgroundNegative: palette.white,
+            buttonPrimaryBackgroundBrand: palette.secondary,
+            buttonPrimaryBackgroundMedia: palette.white,
+            buttonPrimaryBackgroundHover: palette.secondary60,
+            buttonPrimaryBackgroundInverseHover: palette.secondary60,
+            buttonPrimaryBackgroundNegativeHover: palette.primary20,
+            buttonPrimaryBackgroundBrandHover: palette.secondary60,
+            buttonPrimaryBackgroundMediaHover: palette.primary20,
+            buttonPrimaryBackgroundPressed: palette.secondary60,
+            buttonPrimaryBackgroundInversePressed: palette.secondary60,
+            buttonPrimaryBackgroundNegativePressed: palette.primary30,
+            buttonPrimaryBackgroundBrandPressed: palette.secondary60,
+            buttonPrimaryBackgroundMediaPressed: palette.primary30,
+            buttonSecondaryBackgroundBrand: palette.white,
+            buttonSecondaryBorder: palette.secondary,
+            buttonSecondaryBorderInverse: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderNegative: palette.white,
+            buttonSecondaryBorderBrand: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderMedia: palette.white,
+            buttonSecondaryBorderPressed: palette.secondary60,
+            buttonSecondaryBorderInversePressed: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderNegativePressed: palette.white,
+            buttonSecondaryBorderBrandPressed: applyAlpha(palette.white, 0),
+            buttonSecondaryBorderMediaPressed: palette.white,
+            buttonSecondaryBackgroundHover: palette.secondary10,
+            buttonSecondaryBackgroundInverseHover: palette.secondary10,
+            buttonSecondaryBackgroundNegativeHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundBrandHover: palette.secondary10,
+            buttonSecondaryBackgroundMediaHover: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundPressed: palette.secondary10,
+            buttonSecondaryBackgroundInversePressed: palette.secondary10,
+            buttonSecondaryBackgroundNegativePressed: applyAlpha(palette.white, 0.2),
+            buttonSecondaryBackgroundBrandPressed: palette.secondary10,
+            buttonSecondaryBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
+            textButtonPrimary: palette.white,
+            textButtonPrimaryInverse: palette.white,
+            textButtonPrimaryNegative: palette.secondary,
+            textButtonPrimaryBrand: palette.white,
+            textButtonPrimaryMedia: palette.secondary,
+            textButtonPrimaryInversePressed: palette.white,
+            textButtonPrimaryNegativePressed: palette.secondary60,
+            textButtonPrimaryBrandPressed: palette.white,
+            textButtonPrimaryMediaPressed: palette.secondary60,
+            textButtonSecondary: palette.secondary,
+            textButtonSecondaryInverse: palette.secondary,
+            textButtonSecondaryNegative: palette.white,
+            textButtonSecondaryBrand: palette.secondary,
+            textButtonSecondaryMedia: palette.white,
+            textButtonSecondaryPressed: palette.secondary60,
+            textButtonSecondaryInversePressed: palette.secondary60,
+            textButtonSecondaryNegativePressed: palette.white,
+            textButtonSecondaryBrandPressed: palette.secondary60,
+            textButtonSecondaryMediaPressed: palette.white,
+            textLink: palette.accent,
+            textLinkInverse: palette.grey6,
+            textLinkNegative: palette.white,
+            textLinkBrand: palette.grey6,
+            textLinkMedia: palette.white,
+            textLinkDanger: palette.red,
+            textLinkDangerMedia: palette.red,
+            textLinkSnackbar: palette.accent30,
+            textActivated: palette.secondary,
+            textBrand: palette.secondary,
+            inputBorder: palette.grey4,
+            inputBorderInverse: palette.grey6,
+            inputBorderNegative: palette.white,
+            inputBorderBrand: palette.grey6,
+            control: palette.grey4,
+            controlActivated: palette.secondary,
+            controlInverse: palette.secondary60,
+            controlNegative: palette.primary30,
+            controlBrand: palette.secondary60,
+            controlActivatedInverse: palette.secondary60,
+            controlActivatedNegative: palette.white,
+            controlActivatedBrand: palette.secondary60,
+            controlError: palette.red,
+            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.secondary,
+            loadingBarBackground: palette.secondary20,
+            toggleAndroidInactive: palette.grey2,
+            toggleAndroidBackgroundActive: palette.secondary30,
+            toggleAndroidActiveBrand: palette.secondary60,
+            toggleAndroidInactiveBrand: palette.grey2,
+            toggleAndroidBackgroundActiveBrand: palette.secondary30,
+            toggleAndroidBackgroundInactiveBrand: palette.grey2,
+            iosControlKnob: palette.white,
+            controlKnobInverse: palette.primary,
+            controlKnobNegative: palette.secondary,
+            controlKnobBrand: palette.primary,
+            divider: palette.grey3,
+            dividerInverse: applyAlpha(palette.grey6, 0.2),
+            dividerNegative: applyAlpha(palette.white, 0.2),
+            dividerBrand: applyAlpha(palette.grey6, 0.2),
+            navigationBarDivider: palette.primary,
+            badge: palette.red,
+            feedbackErrorBackground: palette.red,
+            feedbackInfoBackground: palette.grey6,
+            brand: palette.primary,
+            brandHigh: palette.secondary60,
+            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.primary20,
+            textSecondaryBrand: palette.grey6,
+            textSecondaryMedia: palette.white,
+            error: palette.red,
+            textError: palette.red,
+            textErrorInverse: palette.grey6,
+            textErrorNegative: palette.white,
+            textErrorBrand: palette.grey6,
+            success: palette.green70,
+            warning: palette.yellow65,
+            promo: palette.accent,
+            highlight: palette.primary,
+            successLow: palette.green10,
+            warningLow: palette.yellow10,
+            errorLow: palette.red10,
+            promoLow: palette.accent10,
+            brandLow: palette.primary20,
+            successHigh: palette.green70,
+            warningHigh: palette.yellow70,
+            errorHigh: palette.red70,
+            promoHigh: palette.accent,
+            successHighInverse: palette.green70,
+            successHighNegative: palette.green70,
+            successHighBrand: palette.green70,
+            warningHighInverse: palette.yellow70,
+            warningHighNegative: palette.yellow70,
+            warningHighBrand: palette.yellow70,
+            errorHighInverse: palette.red70,
+            errorHighNegative: palette.red70,
+            errorHighBrand: palette.red70,
+            promoHighInverse: palette.accent,
+            promoHighNegative: palette.accent,
+            promoHighBrand: palette.accent,
+            textNavigationBarPrimary: palette.grey6,
+            textNavigationBarSecondary: palette.grey6,
+            textNavigationSearchBarHint: palette.grey6,
+            textNavigationSearchBarText: palette.grey6,
+            textAppBar: palette.grey5,
+            textAppBarSelected: palette.secondary60,
+            iosGlassAppBar: palette.grey6,
+            iosGlassAppBarSelected: palette.secondary60,
+            customTabsBackground: palette.primary,
+            tagTextPromo: palette.accent,
+            tagTextActive: palette.secondary,
+            tagTextInactive: palette.grey5,
+            tagTextInfo: palette.secondary,
+            tagTextSuccess: palette.green70,
+            tagTextWarning: palette.yellow70,
+            tagTextError: palette.red70,
+            tagBackgroundPromo: palette.accent10,
+            tagBackgroundActive: palette.primary20,
+            tagBackgroundInactive: palette.grey1,
+            tagBackgroundInfo: palette.primary20,
+            tagBackgroundSuccess: palette.green10,
+            tagBackgroundWarning: palette.yellow10,
+            tagBackgroundError: palette.red10,
+            tagTextPromoInverse: palette.accent,
+            tagTextPromoNegative: palette.accent,
+            tagTextPromoBrand: palette.accent,
+            tagTextActiveInverse: palette.secondary,
+            tagTextActiveNegative: palette.secondary,
+            tagTextActiveBrand: palette.secondary,
+            tagTextInactiveInverse: palette.grey5,
+            tagTextInactiveNegative: palette.grey5,
+            tagTextInactiveBrand: palette.grey5,
+            tagTextInfoInverse: palette.secondary,
+            tagTextInfoNegative: palette.secondary,
+            tagTextInfoBrand: palette.secondary,
+            tagTextSuccessInverse: palette.green70,
+            tagTextSuccessNegative: palette.green70,
+            tagTextSuccessBrand: palette.green70,
+            tagTextWarningInverse: palette.yellow70,
+            tagTextWarningNegative: palette.yellow70,
+            tagTextWarningBrand: palette.yellow70,
+            tagTextErrorInverse: palette.red70,
+            tagTextErrorNegative: palette.red70,
+            tagTextErrorBrand: palette.red70,
+            tagBackgroundPromoInverse: palette.accent10,
+            tagBackgroundPromoNegative: palette.accent10,
+            tagBackgroundPromoBrand: palette.accent10,
+            tagBackgroundActiveInverse: palette.primary20,
+            tagBackgroundActiveNegative: palette.primary20,
+            tagBackgroundActiveBrand: palette.primary20,
+            tagBackgroundInactiveInverse: palette.grey1,
+            tagBackgroundInactiveNegative: palette.grey1,
+            tagBackgroundInactiveBrand: palette.grey1,
+            tagBackgroundInfoInverse: palette.primary20,
+            tagBackgroundInfoNegative: palette.primary20,
+            tagBackgroundInfoBrand: palette.primary20,
+            tagBackgroundSuccessInverse: palette.green10,
+            tagBackgroundSuccessNegative: palette.green10,
+            tagBackgroundSuccessBrand: palette.green10,
+            tagBackgroundWarningInverse: palette.yellow10,
+            tagBackgroundWarningNegative: palette.yellow10,
+            tagBackgroundWarningBrand: palette.yellow10,
+            tagBackgroundErrorInverse: palette.red10,
+            tagBackgroundErrorNegative: palette.red10,
+            tagBackgroundErrorBrand: palette.red10,
+            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.secondary60,
+            completedStep: palette.secondary,
+            completedStepInverse: palette.secondary,
+            completedStepNegative: palette.secondary,
+            completedStepBrand: palette.secondary,
+            coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
+            coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
+            buttonDangerBackground: palette.red,
+            buttonDangerBackgroundPressed: palette.red70,
+            buttonDangerBackgroundHover: palette.red70,
+            buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkDangerBackgroundMedia: palette.white,
+            buttonLinkDangerBackgroundPressed: applyAlpha(palette.red, 0.3),
+            buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkDangerBackgroundNegativePressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkDangerBackgroundBrandPressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkDangerBackgroundMediaPressed: palette.red10,
+            buttonLinkBackgroundPressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkBackgroundInversePressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkBackgroundNegativePressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkBackgroundBrandPressed: applyAlpha(palette.accent, 0.3),
+            buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
+            buttonPrimaryBackground: palette.secondary,
+            buttonPrimaryBackgroundInverse: palette.secondary,
+            buttonPrimaryBackgroundNegative: palette.secondary,
+            buttonPrimaryBackgroundBrand: palette.secondary,
+            buttonPrimaryBackgroundMedia: palette.white,
+            buttonPrimaryBackgroundHover: palette.secondary60,
+            buttonPrimaryBackgroundInverseHover: palette.secondary60,
+            buttonPrimaryBackgroundNegativeHover: palette.secondary60,
+            buttonPrimaryBackgroundBrandHover: palette.secondary60,
+            buttonPrimaryBackgroundMediaHover: palette.primary20,
+            buttonPrimaryBackgroundPressed: palette.secondary60,
+            buttonPrimaryBackgroundInversePressed: palette.secondary60,
+            buttonPrimaryBackgroundNegativePressed: palette.secondary60,
+            buttonPrimaryBackgroundBrandPressed: palette.secondary60,
+            buttonPrimaryBackgroundMediaPressed: palette.primary30,
+            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.secondary,
+            textButtonPrimaryInversePressed: palette.grey2,
+            textButtonPrimaryNegativePressed: palette.grey2,
+            textButtonPrimaryBrandPressed: palette.grey2,
+            textButtonPrimaryMediaPressed: palette.secondary60,
+            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.accent30,
+            textLinkInverse: palette.accent30,
+            textLinkNegative: palette.accent30,
+            textLinkBrand: palette.accent30,
+            textLinkMedia: palette.white,
+            textLinkDanger: palette.red40,
+            textLinkDangerMedia: palette.red,
+            textLinkSnackbar: palette.accent30,
+            textActivated: palette.primary,
+            textBrand: palette.primary,
+            inputBorder: palette.darkModeGrey5,
+            inputBorderInverse: palette.darkModeGrey5,
+            inputBorderNegative: palette.darkModeGrey5,
+            inputBorderBrand: palette.darkModeGrey5,
+            control: palette.grey4,
+            controlActivated: palette.secondary,
+            controlInverse: palette.grey4,
+            controlNegative: palette.grey4,
+            controlBrand: palette.grey4,
+            controlActivatedInverse: palette.secondary,
+            controlActivatedNegative: palette.secondary,
+            controlActivatedBrand: palette.secondary,
+            controlError: palette.red,
+            chevronIndicator: palette.grey4,
+            barTrack: palette.grey5,
+            barTrackInverse: palette.grey5,
+            barTrackNegative: palette.grey5,
+            barTrackBrand: palette.grey5,
+            loadingBar: palette.primary,
+            loadingBarBackground: palette.grey5,
+            toggleAndroidInactive: palette.grey3,
+            toggleAndroidBackgroundActive: palette.primary30,
+            toggleAndroidActiveBrand: palette.secondary60,
+            toggleAndroidInactiveBrand: palette.grey3,
+            toggleAndroidBackgroundActiveBrand: palette.primary30,
+            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.red,
+            feedbackErrorBackground: palette.red,
+            feedbackInfoBackground: palette.darkModeGrey,
+            brand: palette.primary,
+            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.red,
+            textError: palette.red40,
+            textErrorInverse: palette.red40,
+            textErrorNegative: palette.red40,
+            textErrorBrand: palette.red40,
+            success: palette.green,
+            warning: palette.yellow,
+            promo: palette.accent,
+            highlight: palette.primary,
+            successLow: palette.darkModeGrey6,
+            warningLow: palette.darkModeGrey6,
+            errorLow: palette.darkModeGrey6,
+            promoLow: palette.darkModeGrey6,
+            brandLow: palette.darkModeGrey6,
+            successHigh: palette.green30,
+            warningHigh: palette.yellow40,
+            errorHigh: palette.red40,
+            promoHigh: palette.accent30,
+            successHighInverse: palette.green70,
+            successHighNegative: palette.green70,
+            successHighBrand: palette.green70,
+            warningHighInverse: palette.yellow70,
+            warningHighNegative: palette.yellow70,
+            warningHighBrand: palette.yellow70,
+            errorHighInverse: palette.red70,
+            errorHighNegative: palette.red70,
+            errorHighBrand: palette.red70,
+            promoHighInverse: palette.accent,
+            promoHighNegative: palette.accent,
+            promoHighBrand: palette.accent,
+            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.accent30,
+            tagTextActive: palette.primary,
+            tagTextInactive: palette.grey3,
+            tagTextInfo: palette.primary,
+            tagTextSuccess: palette.green30,
+            tagTextWarning: palette.yellow40,
+            tagTextError: palette.red40,
+            tagBackgroundPromo: palette.darkModeGrey6,
+            tagBackgroundActive: palette.darkModeGrey6,
+            tagBackgroundInactive: palette.darkModeGrey6,
+            tagBackgroundInfo: palette.darkModeGrey6,
+            tagBackgroundSuccess: palette.darkModeGrey6,
+            tagBackgroundWarning: palette.darkModeGrey6,
+            tagBackgroundError: palette.darkModeGrey6,
+            tagTextPromoInverse: palette.accent30,
+            tagTextPromoNegative: palette.accent30,
+            tagTextPromoBrand: palette.accent30,
+            tagTextActiveInverse: palette.primary,
+            tagTextActiveNegative: palette.primary,
+            tagTextActiveBrand: palette.primary,
+            tagTextInactiveInverse: palette.grey3,
+            tagTextInactiveNegative: palette.grey3,
+            tagTextInactiveBrand: palette.grey3,
+            tagTextInfoInverse: palette.primary,
+            tagTextInfoNegative: palette.primary,
+            tagTextInfoBrand: palette.primary,
+            tagTextSuccessInverse: palette.green30,
+            tagTextSuccessNegative: palette.green30,
+            tagTextSuccessBrand: palette.green30,
+            tagTextWarningInverse: palette.yellow40,
+            tagTextWarningNegative: palette.yellow40,
+            tagTextWarningBrand: palette.yellow40,
+            tagTextErrorInverse: palette.red40,
+            tagTextErrorNegative: palette.red40,
+            tagTextErrorBrand: palette.red40,
+            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),
+        },
+    };
+    return skin;
+};

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.64.0-beta.1' as string;
+export const PACKAGE_VERSION = '16.64.0' as string;