@telefonica/mistica 15.0.0 → 15.1.0

package/dist/skins/blau.js

@@ -182,7 +182,8 @@ const e = {
             tagBackgroundInactive: e.grey1,
             tagBackgroundSuccess: e.blauGreen10,
             tagBackgroundWarning: e.blauYellow10,
-            tagBackgroundError: e.blauRed10
+            tagBackgroundError: e.blauRed10,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.grey6, 0)} 0%, ${(0, _color.applyAlpha)(e.grey6, 0.4)} 30%, ${(0, _color.applyAlpha)(e.grey6, 0.7)} 100%)`
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -308,7 +309,8 @@ const e = {
             tagBackgroundInactive: e.darkModeGrey6,
             tagBackgroundSuccess: e.darkModeGrey6,
             tagBackgroundWarning: e.darkModeGrey6,
-            tagBackgroundError: e.darkModeGrey6
+            tagBackgroundError: e.darkModeGrey6,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.grey6, 0)} 0%, ${(0, _color.applyAlpha)(e.grey6, 0.4)} 30%, ${(0, _color.applyAlpha)(e.grey6, 0.7)} 100%)`
         },
         borderRadii: {
             avatar: "50%",

package/dist/skins/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const MOVISTAR_SKIN = "Movistar";
 export declare const O2_SKIN = "O2";
+export declare const O2_NEW_SKIN = "O2-new";
 export declare const VIVO_SKIN = "Vivo";
 export declare const VIVO_NEW_SKIN = "Vivo-new";
 export declare const TELEFONICA_SKIN = "Telefonica";

package/dist/skins/constants.js

@@ -15,11 +15,14 @@ _export(exports, {
     MOVISTAR_SKIN: function() {
         return o;
     },
+    O2_NEW_SKIN: function() {
+        return n;
+    },
     O2_SKIN: function() {
         return I;
     },
     TELEFONICA_SKIN: function() {
-        return N;
+        return _;
     },
     TU_SKIN: function() {
         return s;
@@ -28,7 +31,7 @@ _export(exports, {
         return t;
     },
     VIVO_SKIN: function() {
-        return n;
+        return N;
     }
 });
-const o = "Movistar", I = "O2", n = "Vivo", t = "Vivo-new", N = "Telefonica", c = "Blau", s = "Tu";
+const o = "Movistar", I = "O2", n = "O2-new", N = "Vivo", t = "Vivo-new", _ = "Telefonica", c = "Blau", s = "Tu";

package/dist/skins/movistar.d.ts

@@ -33,6 +33,7 @@ export declare const palette: {
     grey5: string;
     grey6: string;
     white: string;
+    black: string;
     movistarBlueDark: string;
     darkModeBlack: string;
     darkModeGrey: string;

package/dist/skins/movistar.js

@@ -52,6 +52,7 @@ const e = {
     grey5: "#86888C",
     grey6: "#313235",
     white: "#FFFFFF",
+    black: "#000000",
     movistarBlueDark: "#0B2739",
     darkModeBlack: "#061824",
     darkModeGrey: "#081F2E",
@@ -186,7 +187,8 @@ const e = {
             tagBackgroundInactive: e.grey1,
             tagBackgroundSuccess: e.movistarGreen10,
             tagBackgroundWarning: e.egg10,
-            tagBackgroundError: e.pepper10
+            tagBackgroundError: e.pepper10,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -312,7 +314,8 @@ const e = {
             tagBackgroundInactive: e.movistarBlueDark,
             tagBackgroundSuccess: e.movistarBlueDark,
             tagBackgroundWarning: e.movistarBlueDark,
-            tagBackgroundError: e.movistarBlueDark
+            tagBackgroundError: e.movistarBlueDark,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
         borderRadii: {
             avatar: "50%",

package/dist/skins/o2-new.d.ts

@@ -0,0 +1,50 @@
+import type { GetKnownSkin } from './types';
+export declare const palette: {
+    beyondBlue: string;
+    beyondBlue10: string;
+    beyondBlue15: string;
+    beyondBlue30: string;
+    beyondBlue40: string;
+    beyondBlue45: string;
+    beyondBlue55: string;
+    beyondBlue70: string;
+    beyondBlue90: string;
+    darkBlue: string;
+    o2BlueLight: string;
+    o2BlueLight30: string;
+    o2BlueLight35: string;
+    o2Green: string;
+    o2Green10: string;
+    o2Green40: string;
+    o2Green80: string;
+    o2Yellow: string;
+    o2Orange: string;
+    o2Orange10: string;
+    o2Orange40: string;
+    o2Orange75: string;
+    o2Pink: string;
+    o2Pink15: string;
+    o2Pink30: string;
+    o2Pink80: string;
+    o2Red: string;
+    o2Red10: string;
+    o2Red20: string;
+    o2Red40: string;
+    o2Red45: string;
+    o2Red60: string;
+    o2Red65: string;
+    grey20: string;
+    grey30: string;
+    grey40: string;
+    grey45: string;
+    grey60: string;
+    grey80: string;
+    black: string;
+    white: string;
+    darkModeBlack: string;
+    darkModeGrey: string;
+    darkModeGrey6: string;
+    darkModeBeyondBlue: string;
+    darkModeBeyondBlueDark: string;
+};
+export declare const getO2NewSkin: GetKnownSkin;

package/dist/skins/o2-new.js

@@ -0,0 +1,397 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getO2NewSkin: function() {
+        return a;
+    },
+    palette: function() {
+        return e;
+    }
+});
+const _constants = require("./constants.js");
+const _color = require("../utils/color.js");
+const e = {
+    beyondBlue: "#0050FF",
+    beyondBlue10: "#E5EDFF",
+    beyondBlue15: "#CCDCFF",
+    beyondBlue30: "#80A7FF",
+    beyondBlue40: "#4D84FF",
+    beyondBlue45: "#0A73EB",
+    beyondBlue55: "#0044D9",
+    beyondBlue70: "#0038B2",
+    beyondBlue90: "#001033",
+    darkBlue: "#00008C",
+    o2BlueLight: "#82DCFA",
+    o2BlueLight30: "#C0EEFD",
+    o2BlueLight35: "#B4EAFC",
+    o2Green: "#00DC7D",
+    o2Green10: "#E5FBF2",
+    o2Green40: "#4CE7A4",
+    o2Green80: "#006338",
+    o2Yellow: "#FADC00",
+    o2Orange: "#FFA55A",
+    o2Orange10: "#FFF6EE",
+    o2Orange40: "#FFC08B",
+    o2Orange75: "#996336",
+    o2Pink: "#FA96FF",
+    o2Pink15: "#FEEAFF",
+    o2Pink30: "#FDCAFF",
+    o2Pink80: "#704373",
+    o2Red: "#FF5A5A",
+    o2Red10: "#FFEEEE",
+    o2Red20: "#FFCDCD",
+    o2Red40: "#FF8B8B",
+    o2Red45: "#FF7B7B",
+    o2Red60: "#CC4848",
+    o2Red65: "#BF4343",
+    grey20: "#F3F3F5",
+    grey30: "#D9D9DD",
+    grey40: "#B4B4BE",
+    grey45: "#8C8C9A",
+    grey60: "#6E6E77",
+    grey80: "#3C3C46",
+    black: "#00001E",
+    white: "#FFFFFF",
+    darkModeBlack: "#121212",
+    darkModeGrey: "#1E1E1E",
+    darkModeGrey6: "#2B2C2E",
+    darkModeBeyondBlue: "#1A62FF",
+    darkModeBeyondBlueDark: "#0048E5"
+}, a = ()=>({
+        name: _constants.O2_NEW_SKIN,
+        colors: {
+            background: e.white,
+            backgroundAlternative: e.grey20,
+            backgroundBrand: `linear-gradient(180deg, ${e.darkBlue} 0%, ${e.beyondBlue} 64%, ${e.beyondBlue45} 100%)`,
+            backgroundBrandSecondary: e.beyondBlue,
+            backgroundContainer: e.white,
+            backgroundContainerHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.03),
+            backgroundContainerPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.05),
+            backgroundContainerBrand: `linear-gradient(180deg, ${e.darkBlue} 0%, ${e.beyondBlue} 64%, ${e.beyondBlue45} 100%)`,
+            backgroundContainerBrandHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.2),
+            backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.4),
+            backgroundContainerBrandOverInverse: e.beyondBlue70,
+            backgroundContainerAlternative: e.grey20,
+            backgroundOverlay: (0, _color.applyAlpha)(e.black, 0.6),
+            backgroundSkeleton: e.grey30,
+            backgroundSkeletonInverse: e.beyondBlue70,
+            backgroundBrandTop: e.darkBlue,
+            backgroundBrandBottom: e.beyondBlue45,
+            appBarBackground: e.white,
+            navigationBarBackground: e.darkBlue,
+            skeletonWave: e.grey30,
+            borderLow: e.grey20,
+            border: e.grey30,
+            borderHigh: e.grey80,
+            borderSelected: e.beyondBlue,
+            coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.o2Red60,
+            buttonDangerBackgroundSelected: e.o2Red65,
+            buttonDangerBackgroundHover: e.o2Red65,
+            buttonLinkDangerBackgroundSelected: e.o2Red10,
+            buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundInverseSelected: e.o2Red10,
+            buttonLinkBackgroundSelected: e.beyondBlue10,
+            buttonLinkBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonPrimaryBackground: e.beyondBlue,
+            buttonPrimaryBackgroundInverse: e.white,
+            buttonPrimaryBackgroundSelected: e.beyondBlue70,
+            buttonPrimaryBackgroundHover: e.beyondBlue70,
+            buttonPrimaryBackgroundInverseSelected: e.beyondBlue30,
+            buttonSecondaryBorder: e.beyondBlue,
+            buttonSecondaryBorderSelected: e.beyondBlue70,
+            buttonSecondaryBackgroundHover: e.beyondBlue10,
+            buttonSecondaryBackgroundSelected: e.beyondBlue10,
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderInverseSelected: e.beyondBlue30,
+            buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.15),
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.beyondBlue,
+            textButtonPrimaryInverseSelected: e.beyondBlue70,
+            textButtonSecondary: e.beyondBlue,
+            textButtonSecondarySelected: e.beyondBlue70,
+            textButtonSecondaryInverse: e.white,
+            textButtonSecondaryInverseSelected: e.white,
+            textLink: e.beyondBlue,
+            textLinkInverse: e.white,
+            textLinkDanger: e.o2Red65,
+            textLinkSnackbar: e.beyondBlue30,
+            control: e.grey45,
+            controlActivated: e.beyondBlue,
+            controlInverse: e.white,
+            controlActivatedInverse: e.white,
+            controlError: e.o2Red60,
+            barTrack: e.grey30,
+            loadingBar: e.beyondBlue,
+            loadingBarBackground: e.grey20,
+            toggleAndroidInactive: e.grey30,
+            toggleAndroidBackgroundActive: e.beyondBlue15,
+            iosControlKnob: e.white,
+            divider: e.grey30,
+            dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
+            navigationBarDivider: e.beyondBlue,
+            badge: e.o2Red65,
+            feedbackErrorBackground: e.o2Red60,
+            feedbackInfoBackground: e.black,
+            brand: e.beyondBlue,
+            brandHigh: e.beyondBlue70,
+            inverse: e.white,
+            neutralHigh: e.black,
+            neutralMedium: e.grey60,
+            neutralMediumInverse: e.grey60,
+            neutralLow: e.grey20,
+            neutralLowAlternative: e.grey30,
+            textPrimary: e.black,
+            textPrimaryInverse: e.white,
+            textSecondary: e.grey60,
+            textSecondaryInverse: e.beyondBlue10,
+            success: e.o2Green,
+            warning: e.o2Orange,
+            error: e.o2Red65,
+            promo: e.o2Pink,
+            highlight: e.o2Pink,
+            successLow: e.o2Green10,
+            warningLow: e.o2Orange10,
+            errorLow: e.o2Red10,
+            promoLow: e.o2Pink15,
+            brandLow: e.beyondBlue10,
+            successHigh: e.o2Green80,
+            warningHigh: e.o2Orange75,
+            errorHigh: e.o2Red65,
+            promoHigh: e.o2Pink80,
+            successHighInverse: e.o2Green80,
+            warningHighInverse: e.o2Orange75,
+            errorHighInverse: e.o2Red65,
+            promoHighInverse: e.o2Pink80,
+            textNavigationBarPrimary: e.white,
+            textNavigationBarSecondary: e.beyondBlue30,
+            textNavigationSearchBarHint: e.beyondBlue30,
+            textNavigationSearchBarText: e.white,
+            textAppBar: e.grey60,
+            textAppBarSelected: e.beyondBlue,
+            customTabsBackground: e.beyondBlue,
+            tagTextPromo: e.o2Pink80,
+            tagTextActive: e.beyondBlue,
+            tagTextInactive: e.grey60,
+            tagTextSuccess: e.o2Green80,
+            tagTextWarning: e.o2Orange75,
+            tagTextError: e.o2Red65,
+            tagBackgroundPromo: e.o2Pink15,
+            tagBackgroundActive: e.beyondBlue10,
+            tagBackgroundInactive: e.grey20,
+            tagBackgroundSuccess: e.o2Green10,
+            tagBackgroundWarning: e.o2Orange10,
+            tagBackgroundError: e.o2Red10,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.beyondBlue, 0)} 0%, ${(0, _color.applyAlpha)(e.beyondBlue, 0.4)} 30%, ${(0, _color.applyAlpha)(e.beyondBlue, 1)} 100%)`
+        },
+        darkModeColors: {
+            background: e.darkModeBlack,
+            backgroundAlternative: e.darkModeBlack,
+            backgroundBrand: e.darkModeBlack,
+            backgroundBrandSecondary: e.darkModeBlack,
+            backgroundContainer: e.darkModeGrey,
+            backgroundContainerHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundContainerPressed: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandHover: (0, _color.applyAlpha)(e.white, 0.03),
+            backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.white, 0.05),
+            backgroundContainerBrandOverInverse: e.darkModeGrey,
+            backgroundContainerAlternative: e.darkModeGrey,
+            backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
+            backgroundSkeleton: e.darkModeGrey6,
+            backgroundSkeletonInverse: e.darkModeGrey6,
+            backgroundBrandTop: e.darkModeBlack,
+            backgroundBrandBottom: e.darkModeBlack,
+            appBarBackground: e.darkModeGrey,
+            navigationBarBackground: e.darkModeBlack,
+            skeletonWave: e.grey80,
+            borderLow: e.darkModeBlack,
+            border: e.darkModeGrey,
+            borderHigh: e.grey45,
+            borderSelected: e.beyondBlue30,
+            coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
+            coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
+            buttonDangerBackground: e.o2Red60,
+            buttonDangerBackgroundSelected: e.o2Red65,
+            buttonDangerBackgroundHover: e.o2Red65,
+            buttonLinkDangerBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0.01),
+            buttonLinkDangerBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonPrimaryBackground: e.darkModeBeyondBlue,
+            buttonPrimaryBackgroundInverse: e.darkModeBeyondBlue,
+            buttonPrimaryBackgroundSelected: e.beyondBlue55,
+            buttonPrimaryBackgroundHover: e.beyondBlue55,
+            buttonPrimaryBackgroundInverseSelected: e.beyondBlue55,
+            buttonSecondaryBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBorder: e.white,
+            buttonSecondaryBorderSelected: e.white,
+            buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderInverseSelected: e.white,
+            buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.15),
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.white,
+            textButtonPrimaryInverseSelected: e.white,
+            textButtonSecondary: e.grey30,
+            textButtonSecondarySelected: e.grey30,
+            textButtonSecondaryInverse: e.grey30,
+            textButtonSecondaryInverseSelected: e.grey30,
+            textLink: e.beyondBlue40,
+            textLinkInverse: e.beyondBlue40,
+            textLinkDanger: e.o2Red45,
+            textLinkSnackbar: e.beyondBlue30,
+            control: e.grey45,
+            controlActivated: e.beyondBlue30,
+            controlInverse: e.grey45,
+            controlActivatedInverse: e.beyondBlue30,
+            controlError: e.o2Red45,
+            barTrack: e.darkModeGrey6,
+            loadingBar: e.darkModeBeyondBlue,
+            loadingBarBackground: e.darkModeGrey6,
+            toggleAndroidInactive: e.grey20,
+            toggleAndroidBackgroundActive: e.beyondBlue15,
+            iosControlKnob: e.grey30,
+            badge: e.o2Red65,
+            feedbackErrorBackground: e.o2Red60,
+            feedbackInfoBackground: e.darkModeGrey6,
+            divider: (0, _color.applyAlpha)(e.white, 0.1),
+            dividerInverse: (0, _color.applyAlpha)(e.white, 0.1),
+            navigationBarDivider: e.darkModeBlack,
+            brand: e.beyondBlue30,
+            brandHigh: (0, _color.applyAlpha)(e.white, 0.05),
+            inverse: e.grey30,
+            neutralHigh: e.grey30,
+            neutralMedium: e.grey60,
+            neutralMediumInverse: e.grey60,
+            neutralLow: e.grey80,
+            neutralLowAlternative: e.grey80,
+            textPrimary: e.grey30,
+            textPrimaryInverse: e.grey30,
+            textSecondary: e.grey45,
+            textSecondaryInverse: e.grey45,
+            success: e.o2Green,
+            warning: e.o2Orange,
+            error: e.o2Red45,
+            promo: e.o2Pink,
+            highlight: e.o2Pink,
+            successLow: e.darkModeGrey6,
+            warningLow: e.darkModeGrey6,
+            errorLow: e.darkModeGrey6,
+            promoLow: e.darkModeGrey6,
+            brandLow: e.darkModeGrey6,
+            successHigh: e.o2Green40,
+            warningHigh: e.o2Orange40,
+            errorHigh: e.o2Red40,
+            promoHigh: e.o2Pink30,
+            successHighInverse: e.o2Green80,
+            warningHighInverse: e.o2Orange75,
+            errorHighInverse: e.o2Red65,
+            promoHighInverse: e.o2Pink,
+            textNavigationBarPrimary: e.grey30,
+            textNavigationBarSecondary: e.grey45,
+            textNavigationSearchBarHint: e.grey45,
+            textNavigationSearchBarText: e.grey30,
+            textAppBar: e.grey45,
+            textAppBarSelected: e.beyondBlue40,
+            customTabsBackground: e.darkModeBlack,
+            tagTextPromo: e.o2Pink,
+            tagTextActive: e.beyondBlue30,
+            tagTextInactive: e.grey40,
+            tagTextSuccess: e.o2Green,
+            tagTextWarning: e.o2Orange,
+            tagTextError: e.o2Red,
+            tagBackgroundPromo: e.darkModeGrey6,
+            tagBackgroundActive: e.darkModeGrey6,
+            tagBackgroundInactive: e.darkModeGrey6,
+            tagBackgroundSuccess: e.darkModeGrey6,
+            tagBackgroundWarning: e.darkModeGrey6,
+            tagBackgroundError: e.darkModeGrey6,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
+        },
+        borderRadii: {
+            avatar: "50%",
+            bar: "999px",
+            button: "999px",
+            checkbox: "2px",
+            container: "16px",
+            indicator: "999px",
+            input: "12px",
+            legacyDisplay: "16px",
+            popup: "8px",
+            sheet: "16px",
+            mediaSmall: "8px"
+        },
+        textPresets: {
+            cardTitle: {
+                weight: "medium"
+            },
+            button: {
+                weight: "medium"
+            },
+            tabsLabel: {
+                weight: "medium",
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
+            },
+            link: {
+                weight: "medium"
+            },
+            title1: {
+                weight: "medium"
+            },
+            title2: {
+                weight: "bold",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
+            indicator: {
+                weight: "medium"
+            },
+            navigationBar: {
+                weight: "medium"
+            },
+            text5: {
+                weight: "bold"
+            },
+            text6: {
+                weight: "bold"
+            },
+            text7: {
+                weight: "bold"
+            },
+            text8: {
+                weight: "bold"
+            },
+            text9: {
+                weight: "bold"
+            },
+            text10: {
+                weight: "bold"
+            }
+        }
+    });

package/dist/skins/o2.d.ts

@@ -36,6 +36,7 @@ export declare const palette: {
     grey5: string;
     grey6: string;
     white: string;
+    black: string;
     darkModeBlack: string;
     darkModeGrey: string;
     darkModeGrey6: string;

package/dist/skins/o2.js

@@ -55,6 +55,7 @@ const e = {
     grey5: "#707070",
     grey6: "#000033",
     white: "#FFFFFF",
+    black: "#000000",
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235",
@@ -186,7 +187,8 @@ const e = {
             tagBackgroundInactive: e.grey1,
             tagBackgroundSuccess: e.o2Green10,
             tagBackgroundWarning: e.o2Orange10,
-            tagBackgroundError: e.pepper10
+            tagBackgroundError: e.pepper10,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -312,7 +314,8 @@ const e = {
             tagBackgroundInactive: e.darkModeGrey6,
             tagBackgroundSuccess: e.darkModeGrey6,
             tagBackgroundWarning: e.darkModeGrey6,
-            tagBackgroundError: e.darkModeGrey6
+            tagBackgroundError: e.darkModeGrey6,
+            cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
         },
         borderRadii: {
             avatar: "50%",