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

package/src/skins/skin-contract.css.ts

@@ -0,0 +1,380 @@
+import {createThemeContract} from '@vanilla-extract/css';
+
+import type {BorderRadiiConfig, Colors, SpacingConfig, TextPresetsConfig} from './types';
+
+const colors: Colors = {
+    background: '',
+    backgroundAlternative: '',
+    backgroundBrand: '',
+    backgroundNegative: '',
+    backgroundBrandSecondary: '',
+    backgroundContainer: '',
+    backgroundContainerError: '',
+    backgroundContainerHover: '',
+    backgroundContainerPressed: '',
+    backgroundContainerBrand: '',
+    backgroundContainerBrandHover: '',
+    backgroundContainerBrandPressed: '',
+    backgroundContainerBrandOverInverse: '',
+    backgroundContainerNegative: '',
+    backgroundContainerBrandOverBrand: '',
+    backgroundContainerAlternative: '',
+    backgroundOverlay: '',
+    backgroundSkeleton: '',
+    backgroundSkeletonInverse: '',
+    backgroundSkeletonNegative: '',
+    backgroundSkeletonBrand: '',
+    backgroundBrandTop: '',
+    backgroundBrandBottom: '',
+    backgroundDropZoneHover: '',
+    backgroundDropZoneDragover: '',
+    backgroundDropZoneBrandHover: '',
+    backgroundDropZoneBrandDragover: '',
+    appBarBackground: '',
+    navigationBarBackground: '',
+    backgroundDropZoneNegativeHover: '',
+    backgroundDropZoneNegativeDragover: '',
+    backgroundDropZoneMediaHover: '',
+    backgroundDropZoneMediaDragover: '',
+    skeletonWave: '',
+    borderLow: '',
+    border: '',
+    borderHigh: '',
+    borderSelected: '',
+    coverBackgroundHover: '',
+    coverBackgroundPressed: '',
+    buttonDangerBackground: '',
+    buttonDangerBackgroundPressed: '',
+    buttonDangerBackgroundHover: '',
+    buttonLinkDangerBackgroundInverse: '',
+    buttonLinkDangerBackgroundNegative: '',
+    buttonLinkDangerBackgroundBrand: '',
+    buttonLinkDangerBackgroundMedia: '',
+    buttonLinkDangerBackgroundPressed: '',
+    buttonLinkDangerBackgroundInversePressed: '',
+    buttonLinkDangerBackgroundNegativePressed: '',
+    buttonLinkDangerBackgroundBrandPressed: '',
+    buttonLinkDangerBackgroundMediaPressed: '',
+    buttonLinkBackgroundPressed: '',
+    buttonLinkBackgroundInversePressed: '',
+    buttonLinkBackgroundNegativePressed: '',
+    buttonLinkBackgroundBrandPressed: '',
+    buttonLinkBackgroundMediaPressed: '',
+    buttonPrimaryBackground: '',
+    buttonPrimaryBackgroundInverse: '',
+    buttonPrimaryBackgroundNegative: '',
+    buttonPrimaryBackgroundBrand: '',
+    buttonPrimaryBackgroundMedia: '',
+    buttonPrimaryBackgroundHover: '',
+    buttonPrimaryBackgroundInverseHover: '',
+    buttonPrimaryBackgroundNegativeHover: '',
+    buttonPrimaryBackgroundBrandHover: '',
+    buttonPrimaryBackgroundMediaHover: '',
+    buttonPrimaryBackgroundPressed: '',
+    buttonPrimaryBackgroundInversePressed: '',
+    buttonPrimaryBackgroundNegativePressed: '',
+    buttonPrimaryBackgroundBrandPressed: '',
+    buttonPrimaryBackgroundMediaPressed: '',
+    buttonSecondaryBackgroundBrand: '',
+    buttonSecondaryBorder: '',
+    buttonSecondaryBorderInverse: '',
+    buttonSecondaryBorderNegative: '',
+    buttonSecondaryBorderBrand: '',
+    buttonSecondaryBorderMedia: '',
+    buttonSecondaryBorderPressed: '',
+    buttonSecondaryBorderInversePressed: '',
+    buttonSecondaryBorderNegativePressed: '',
+    buttonSecondaryBorderBrandPressed: '',
+    buttonSecondaryBorderMediaPressed: '',
+    buttonSecondaryBackgroundHover: '',
+    buttonSecondaryBackgroundInverseHover: '',
+    buttonSecondaryBackgroundNegativeHover: '',
+    buttonSecondaryBackgroundBrandHover: '',
+    buttonSecondaryBackgroundMediaHover: '',
+    buttonSecondaryBackgroundPressed: '',
+    buttonSecondaryBackgroundInversePressed: '',
+    buttonSecondaryBackgroundNegativePressed: '',
+    buttonSecondaryBackgroundBrandPressed: '',
+    buttonSecondaryBackgroundMediaPressed: '',
+    textButtonPrimary: '',
+    textButtonPrimaryInverse: '',
+    textButtonPrimaryNegative: '',
+    textButtonPrimaryBrand: '',
+    textButtonPrimaryMedia: '',
+    textButtonPrimaryInversePressed: '',
+    textButtonPrimaryNegativePressed: '',
+    textButtonPrimaryBrandPressed: '',
+    textButtonPrimaryMediaPressed: '',
+    textButtonSecondary: '',
+    textButtonSecondaryInverse: '',
+    textButtonSecondaryNegative: '',
+    textButtonSecondaryBrand: '',
+    textButtonSecondaryMedia: '',
+    textButtonSecondaryPressed: '',
+    textButtonSecondaryInversePressed: '',
+    textButtonSecondaryNegativePressed: '',
+    textButtonSecondaryBrandPressed: '',
+    textButtonSecondaryMediaPressed: '',
+    textLink: '',
+    textLinkInverse: '',
+    textLinkNegative: '',
+    textLinkBrand: '',
+    textLinkMedia: '',
+    textLinkDanger: '',
+    textLinkDangerMedia: '',
+    textLinkSnackbar: '',
+    textActivated: '',
+    textBrand: '',
+    inputBorder: '',
+    inputBorderInverse: '',
+    inputBorderNegative: '',
+    inputBorderBrand: '',
+    completedStep: '',
+    completedStepInverse: '',
+    completedStepNegative: '',
+    completedStepBrand: '',
+    control: '',
+    controlActivated: '',
+    controlInverse: '',
+    controlNegative: '',
+    controlBrand: '',
+    controlActivatedInverse: '',
+    controlActivatedNegative: '',
+    controlActivatedBrand: '',
+    controlError: '',
+    barTrack: '',
+    barTrackInverse: '',
+    barTrackNegative: '',
+    barTrackBrand: '',
+    loadingBar: '',
+    loadingBarBackground: '',
+    toggleAndroidInactive: '',
+    toggleAndroidBackgroundActive: '',
+    toggleAndroidActiveBrand: '',
+    toggleAndroidInactiveBrand: '',
+    toggleAndroidBackgroundActiveBrand: '',
+    toggleAndroidBackgroundInactiveBrand: '',
+    iosControlKnob: '',
+    controlKnobInverse: '',
+    controlKnobNegative: '',
+    controlKnobBrand: '',
+    divider: '',
+    dividerInverse: '',
+    dividerNegative: '',
+    dividerBrand: '',
+    navigationBarDivider: '',
+    badge: '',
+    feedbackErrorBackground: '',
+    feedbackInfoBackground: '',
+    brand: '',
+    brandHigh: '',
+    inverse: '',
+    negative: '',
+    neutralHigh: '',
+    neutralHighNegative: '',
+    neutralHighBrand: '',
+    neutralMedium: '',
+    neutralMediumInverse: '',
+    neutralMediumNegative: '',
+    neutralMediumBrand: '',
+    neutralLow: '',
+    neutralLowAlternative: '',
+    chevronIndicator: '',
+    textPrimary: '',
+    textPrimaryInverse: '',
+    textPrimaryNegative: '',
+    textPrimaryBrand: '',
+    textPrimaryMedia: '',
+    textSecondary: '',
+    textSecondaryInverse: '',
+    textSecondaryNegative: '',
+    textSecondaryBrand: '',
+    textSecondaryMedia: '',
+    success: '',
+    warning: '',
+    error: '',
+    textError: '',
+    textErrorInverse: '',
+    textErrorNegative: '',
+    textErrorBrand: '',
+    promo: '',
+    highlight: '',
+    successLow: '',
+    warningLow: '',
+    errorLow: '',
+    promoLow: '',
+    brandLow: '',
+    successHigh: '',
+    warningHigh: '',
+    errorHigh: '',
+    promoHigh: '',
+    successHighInverse: '',
+    successHighNegative: '',
+    successHighBrand: '',
+    warningHighInverse: '',
+    warningHighNegative: '',
+    warningHighBrand: '',
+    errorHighInverse: '',
+    errorHighNegative: '',
+    errorHighBrand: '',
+    promoHighInverse: '',
+    promoHighNegative: '',
+    promoHighBrand: '',
+    textNavigationBarPrimary: '',
+    textNavigationBarSecondary: '',
+    textNavigationSearchBarHint: '',
+    textNavigationSearchBarText: '',
+    textAppBar: '',
+    textAppBarSelected: '',
+    customTabsBackground: '',
+    tagTextPromo: '',
+    tagTextActive: '',
+    tagTextInactive: '',
+    tagTextInfo: '',
+    tagTextSuccess: '',
+    tagTextWarning: '',
+    tagTextError: '',
+    tagBackgroundPromo: '',
+    tagBackgroundActive: '',
+    tagBackgroundInactive: '',
+    tagBackgroundInfo: '',
+    tagBackgroundSuccess: '',
+    tagBackgroundWarning: '',
+    tagBackgroundError: '',
+    tagTextPromoInverse: '',
+    tagTextPromoNegative: '',
+    tagTextPromoBrand: '',
+    tagTextActiveInverse: '',
+    tagTextActiveNegative: '',
+    tagTextActiveBrand: '',
+    tagTextInactiveInverse: '',
+    tagTextInactiveNegative: '',
+    tagTextInactiveBrand: '',
+    tagTextInfoInverse: '',
+    tagTextInfoNegative: '',
+    tagTextInfoBrand: '',
+    tagTextSuccessInverse: '',
+    tagTextSuccessNegative: '',
+    tagTextSuccessBrand: '',
+    tagTextWarningInverse: '',
+    tagTextWarningNegative: '',
+    tagTextWarningBrand: '',
+    tagTextErrorInverse: '',
+    tagTextErrorNegative: '',
+    tagTextErrorBrand: '',
+    tagBackgroundPromoInverse: '',
+    tagBackgroundPromoNegative: '',
+    tagBackgroundPromoBrand: '',
+    tagBackgroundActiveInverse: '',
+    tagBackgroundActiveNegative: '',
+    tagBackgroundActiveBrand: '',
+    tagBackgroundInactiveInverse: '',
+    tagBackgroundInactiveNegative: '',
+    tagBackgroundInactiveBrand: '',
+    tagBackgroundInfoInverse: '',
+    tagBackgroundInfoNegative: '',
+    tagBackgroundInfoBrand: '',
+    tagBackgroundSuccessInverse: '',
+    tagBackgroundSuccessNegative: '',
+    tagBackgroundSuccessBrand: '',
+    tagBackgroundWarningInverse: '',
+    tagBackgroundWarningNegative: '',
+    tagBackgroundWarningBrand: '',
+    tagBackgroundErrorInverse: '',
+    tagBackgroundErrorNegative: '',
+    tagBackgroundErrorBrand: '',
+    cardContentOverlay: '',
+    cardFooterOverlay: '',
+    iosGlassAppBarSelected: '',
+    iosGlassAppBar: '',
+};
+
+const borderRadii: BorderRadiiConfig = {
+    button: '',
+    input: '',
+    container: '',
+    legacyDisplay: '',
+    popup: '',
+    checkbox: '',
+    indicator: '',
+    chip: '',
+    sheet: '',
+    bar: '',
+    avatar: '',
+    mediaSmall: '',
+    tag: '',
+};
+
+type ToThemeTokens<T> = T extends {mobile: number; desktop: number}
+    ? string
+    : T extends object
+      ? {[K in keyof T]: ToThemeTokens<T[K]>}
+      : string;
+
+const textPresets: ToThemeTokens<TextPresetsConfig> = {
+    cardTitle: {weight: ''},
+    rowTitle: {weight: ''},
+    button: {weight: ''},
+    link: {weight: ''},
+    title1: {weight: '', size: '', lineHeight: ''},
+    title2: {weight: '', size: '', lineHeight: ''},
+    title3: {weight: '', size: '', lineHeight: ''},
+    title4: {weight: '', size: '', lineHeight: ''},
+    indicator: {weight: ''},
+    tabsLabel: {weight: '', size: '', lineHeight: ''},
+    navigationBar: {weight: ''},
+    text1: {size: '', lineHeight: ''},
+    text2: {size: '', lineHeight: ''},
+    text3: {size: '', lineHeight: ''},
+    text4: {size: '', lineHeight: ''},
+    text5: {weight: '', size: '', lineHeight: ''},
+    text6: {weight: '', size: '', lineHeight: ''},
+    text7: {weight: '', size: '', lineHeight: ''},
+    text8: {weight: '', size: '', lineHeight: ''},
+    text9: {weight: '', size: '', lineHeight: ''},
+    text10: {weight: '', size: '', lineHeight: ''},
+    chipLabel: {weight: '', size: '', lineHeight: ''},
+    inputHelperText: {size: '', lineHeight: ''},
+    inputLabel: {size: '', lineHeight: ''},
+    inputValue: {size: '', lineHeight: ''},
+    loadingScreenTitle: {size: '', lineHeight: ''},
+    stepperStepLabel: {size: '', lineHeight: ''},
+    cardDescriptionDefault: {lineHeight: '', size: ''},
+    cardDescriptionSnap: {lineHeight: '', size: ''},
+    cardPretitleDefault: {lineHeight: '', size: ''},
+    cardPretitleSnap: {lineHeight: '', size: ''},
+    cardSubtitleDefault: {lineHeight: '', size: ''},
+    cardSubtitleSnap: {lineHeight: '', size: ''},
+    cardTitleDefault: {lineHeight: '', size: ''},
+    cardTitleSnap: {lineHeight: '', size: ''},
+    drawerTitle: {
+        lineHeight: '',
+        size: '',
+        weight: '',
+    },
+};
+
+const spacing: ToThemeTokens<SpacingConfig> = {
+    buttonDefaultPadding: {left: '', right: ''},
+    buttonSmallPadding: {left: '', right: ''},
+    cardDefaultPadding: {left: '', right: '', top: '', bottom: ''},
+    inputPadding: {top: '', bottom: ''},
+    tagPadding: {top: '', bottom: ''},
+    feedbackScreenPadding: {top: '', bottom: '', left: '', right: ''},
+    heroPadding: {top: '', bottom: ''},
+    headerPadding: {top: '', bottom: ''},
+    drawerPadding: {top: '', bottom: '', left: '', right: ''},
+};
+
+export const vars = createThemeContract({
+    colors,
+    /**
+     * Raw colors are defined as rgb components to allow applying alpha channel when using the css var
+     * See ThemeContextProvider, where the colors provided in the themeConfig are transformed into rgb components
+     * See utils/color.tsx applyAlha, where the alpha channel is applied to the css var
+     */
+    rawColors: colors,
+    borderRadii,
+    textPresets,
+    spacing,
+});