@telefonica/mistica 17.2.0 → 17.4.0

package/dist/community/skins/cyber-skin.js

@@ -80,6 +80,8 @@ const t = "Cyber", e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.white, 0.1),
             backgroundContainerBrandOverBrand: e.brand70,
             backgroundContainerAlternative: e.brand10,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.brand70,
             backgroundBrand: e.brand,
             backgroundNegative: e.grey900,
             backgroundBrandSecondary: e.brand,
@@ -90,15 +92,15 @@ const t = "Cyber", e = {
             backgroundSkeletonBrand: e.brand70,
             navigationBarBackground: e.brand,
             backgroundAlternative: e.brand10,
-            backgroundSelected: (0, _color.applyAlpha)(e.brand, 0.15),
-            backgroundSelectedHover: (0, _color.applyAlpha)(e.brand, 0.2),
-            backgroundSelectedPressed: (0, _color.applyAlpha)(e.brand, 0.25),
-            backgroundSelectedBrand: e.brand10,
-            backgroundSelectedBrandHover: e.brand15,
-            backgroundSelectedBrandPressed: e.brand15,
-            backgroundSelectedNegative: (0, _color.applyAlpha)(e.white, 0.1),
-            backgroundSelectedNegativeHover: (0, _color.applyAlpha)(e.white, 0.12),
-            backgroundSelectedNegativePressed: (0, _color.applyAlpha)(e.white, 0.15),
+            backgroundSelected: (0, _color.applyAlpha)(e.brand, 0.08),
+            backgroundSelectedHover: (0, _color.applyAlpha)(e.brand, 0.12),
+            backgroundSelectedPressed: (0, _color.applyAlpha)(e.brand, 0.16),
+            backgroundSelectedBrand: (0, _color.applyAlpha)(e.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.32),
+            backgroundSelectedNegative: (0, _color.applyAlpha)(e.white, 0.2),
+            backgroundSelectedNegativeHover: (0, _color.applyAlpha)(e.white, 0.28),
+            backgroundSelectedNegativePressed: (0, _color.applyAlpha)(e.white, 0.35),
             backgroundBrandTop: e.brand,
             backgroundBrandBottom: e.brand,
             backgroundDropZoneHover: (0, _color.applyAlpha)(e.brand70, 0.05),
@@ -128,17 +130,17 @@ const t = "Cyber", e = {
             buttonLinkDangerBackgroundNegativePressed: e.red10,
             buttonLinkDangerBackgroundBrandPressed: e.red10,
             buttonLinkDangerBackgroundMediaPressed: e.red10,
-            buttonLinkBackgroundPressed: e.brand10,
+            buttonLinkBackgroundPressed: (0, _color.applyAlpha)(e.brand, 0.08),
             buttonLinkBackgroundInversePressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
-            buttonLinkNeutralBackgroundPressed: e.brand10,
-            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: (0, _color.applyAlpha)(e.grey400, 0.08),
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
             buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.12),
-            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
             buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.12),
-            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
             buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.12),
             buttonPrimaryBackground: e.black,
             buttonPrimaryBackgroundInverse: e.white,
@@ -203,7 +205,7 @@ const t = "Cyber", e = {
             textLinkDanger: e.red50,
             textLinkDangerMedia: e.red50,
             textLinkSnackbar: e.brand30,
-            textLinkNeutral: e.black,
+            textLinkNeutral: e.grey900,
             textLinkNeutralBrand: e.white,
             textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.grey500,
@@ -376,6 +378,15 @@ const t = "Cyber", e = {
         darkModeColors: {
             background: e.darkModeBlack,
             backgroundAlternative: e.darkModeBlack,
+            backgroundSelected: (0, _color.applyAlpha)(e.darkModeBrand, 0.18),
+            backgroundSelectedHover: (0, _color.applyAlpha)(e.darkModeBrand, 0.25),
+            backgroundSelectedPressed: (0, _color.applyAlpha)(e.darkModeBrand, 0.33),
+            backgroundSelectedBrand: (0, _color.applyAlpha)(e.darkModeBrand, 0.18),
+            backgroundSelectedBrandHover: (0, _color.applyAlpha)(e.darkModeBrand, 0.25),
+            backgroundSelectedBrandPressed: (0, _color.applyAlpha)(e.darkModeBrand, 0.33),
+            backgroundSelectedNegative: (0, _color.applyAlpha)(e.darkModeBrand, 0.18),
+            backgroundSelectedNegativeHover: (0, _color.applyAlpha)(e.darkModeBrand, 0.25),
+            backgroundSelectedNegativePressed: (0, _color.applyAlpha)(e.darkModeBrand, 0.33),
             backgroundBrand: e.darkModeBlack,
             backgroundNegative: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
@@ -390,6 +401,8 @@ const t = "Cyber", e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.grey700,
             backgroundSkeletonInverse: e.grey700,
@@ -431,6 +444,13 @@ const t = "Cyber", e = {
             buttonLinkBackgroundNegativePressed: (0, _color.applyAlpha)(e.brand30, 0.16),
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.brand30, 0.16),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.brand,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -494,6 +514,10 @@ const t = "Cyber", e = {
             textLinkDanger: e.red30,
             textLinkDangerMedia: e.red50,
             textLinkSnackbar: e.darkModeBrand,
+            textLinkNeutral: e.grey100,
+            textLinkNeutralBrand: e.white,
+            textLinkNeutralNegative: e.white,
+            textLinkNeutralMedia: e.white,
             textActivated: e.darkModeBrand,
             textBrand: e.brand30,
             inputBorder: e.grey400,
@@ -675,342 +699,351 @@ const t = "Cyber", e = {
             snackbar: "4px"
         },
         textPresets: {
-            cardTitle: {
+            button: {
                 weight: "medium"
             },
-            drawerTitle: {
-                weight: "regular",
-                size: {
-                    mobile: 20,
-                    desktop: 28
-                },
+            cardDescriptionDefault: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 32
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            rowTitle: {
-                weight: "regular"
-            },
-            button: {
-                weight: "medium"
-            },
-            tabsLabel: {
-                weight: "medium",
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
+            cardDescriptionSnap: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            link: {
-                weight: "medium"
-            },
-            title1: {
-                weight: "medium",
-                size: {
-                    mobile: 12,
-                    desktop: 14
-                },
+            cardPretitleDefault: {
                 lineHeight: {
-                    mobile: 16,
-                    desktop: 20
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            title2: {
-                weight: "regular",
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
+            cardPretitleSnap: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            title3: {
-                weight: "regular",
-                size: {
-                    mobile: 20,
-                    desktop: 28
-                },
+            cardSubtitleDefault: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 32
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            title4: {
-                weight: "regular",
-                size: {
-                    mobile: 24,
-                    desktop: 32
-                },
+            cardSubtitleSnap: {
                 lineHeight: {
-                    mobile: 32,
-                    desktop: 40
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            indicator: {
-                weight: "medium"
-            },
-            navigationBar: {
+            cardTitle: {
                 weight: "medium"
             },
-            text5: {
-                weight: "regular",
-                size: {
-                    mobile: 20,
-                    desktop: 28
-                },
+            cardTitleDefault: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 32
-                }
-            },
-            text6: {
-                weight: "regular",
-                size: {
-                    mobile: 24,
-                    desktop: 32
+                    desktop: 28,
+                    mobile: 24
                 },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40
-                }
-            },
-            text7: {
-                weight: "regular",
                 size: {
-                    mobile: 28,
-                    desktop: 40
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 48
+                    desktop: 20,
+                    mobile: 18
                 }
             },
-            text8: {
-                weight: "regular",
-                size: {
-                    mobile: 32,
-                    desktop: 48
-                },
+            cardTitleSnap: {
                 lineHeight: {
-                    mobile: 40,
-                    desktop: 56
-                }
-            },
-            text9: {
-                weight: "regular",
-                size: {
-                    mobile: 40,
-                    desktop: 56
+                    desktop: 24,
+                    mobile: 20
                 },
-                lineHeight: {
-                    mobile: 48,
-                    desktop: 64
-                }
-            },
-            text10: {
-                weight: "regular",
                 size: {
-                    mobile: 48,
-                    desktop: 64
-                },
-                lineHeight: {
-                    mobile: 56,
-                    desktop: 72
+                    desktop: 16,
+                    mobile: 14
                 }
             },
             chipLabel: {
-                weight: "medium",
-                size: {
-                    mobile: 14,
-                    desktop: 16
-                },
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
-                }
-            },
-            cardPretitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16
+                    desktop: 24,
+                    mobile: 20
                 },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24
-                }
-            },
-            cardTitleSnap: {
                 size: {
-                    mobile: 14,
-                    desktop: 16
+                    desktop: 16,
+                    mobile: 14
                 },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24
-                }
+                weight: "medium"
             },
-            cardSubtitleSnap: {
+            drawerTitle: {
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 14,
-                    desktop: 16
+                    desktop: 28,
+                    mobile: 20
                 },
+                weight: "regular"
+            },
+            indicator: {
+                weight: "medium"
+            },
+            inputHelperText: {
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
+                    desktop: 20,
+                    mobile: 16
+                },
+                size: {
+                    desktop: 14,
+                    mobile: 12
                 }
             },
-            cardDescriptionSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16
-                },
+            inputLabel: {
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
+                    desktop: 20,
+                    mobile: 16
+                },
+                size: {
+                    desktop: 14,
+                    mobile: 12
                 }
             },
-            cardPretitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16
-                },
+            inputValue: {
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
                 }
             },
-            cardTitleDefault: {
-                size: {
-                    mobile: 18,
-                    desktop: 20
-                },
+            link: {
+                weight: "medium"
+            },
+            loadingScreenTitle: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 28
+                    desktop: 28,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 20,
+                    mobile: 18
                 }
             },
-            cardSubtitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16
-                },
+            navigationBar: {
+                weight: "medium"
+            },
+            rowTitle: {
+                weight: "regular"
+            },
+            stepperStepLabel: {
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
-            cardDescriptionDefault: {
+            tabsLabel: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 14,
-                    desktop: 16
+                    desktop: 18,
+                    mobile: 16
                 },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24
-                }
+                weight: "medium"
             },
             text1: {
-                size: {
-                    mobile: 12,
-                    desktop: 14
-                },
                 lineHeight: {
-                    mobile: 16,
-                    desktop: 20
+                    desktop: 20,
+                    mobile: 16
+                },
+                size: {
+                    desktop: 14,
+                    mobile: 12
                 }
             },
             text2: {
-                size: {
-                    mobile: 14,
-                    desktop: 16
-                },
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
                 }
             },
             text3: {
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 24
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
                 }
             },
             text4: {
-                size: {
-                    mobile: 18,
-                    desktop: 20
-                },
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 28
+                    desktop: 28,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 20,
+                    mobile: 18
                 }
             },
-            inputLabel: {
+            text5: {
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 12,
-                    desktop: 14
+                    desktop: 28,
+                    mobile: 20
                 },
+                weight: "regular"
+            },
+            text6: {
                 lineHeight: {
-                    mobile: 16,
-                    desktop: 20
-                }
+                    desktop: 40,
+                    mobile: 32
+                },
+                size: {
+                    desktop: 32,
+                    mobile: 24
+                },
+                weight: "regular"
             },
-            inputValue: {
+            text7: {
+                lineHeight: {
+                    desktop: 48,
+                    mobile: 32
+                },
                 size: {
-                    mobile: 16,
-                    desktop: 18
+                    desktop: 40,
+                    mobile: 28
                 },
+                weight: "regular"
+            },
+            text8: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 24
-                }
+                    desktop: 56,
+                    mobile: 40
+                },
+                size: {
+                    desktop: 48,
+                    mobile: 32
+                },
+                weight: "regular"
             },
-            inputHelperText: {
+            text9: {
+                lineHeight: {
+                    desktop: 64,
+                    mobile: 48
+                },
                 size: {
-                    mobile: 12,
-                    desktop: 14
+                    desktop: 56,
+                    mobile: 40
                 },
+                weight: "regular"
+            },
+            text10: {
                 lineHeight: {
-                    mobile: 16,
-                    desktop: 20
-                }
+                    desktop: 72,
+                    mobile: 56
+                },
+                size: {
+                    desktop: 64,
+                    mobile: 48
+                },
+                weight: "regular"
             },
-            stepperStepLabel: {
+            title1: {
+                lineHeight: {
+                    desktop: 20,
+                    mobile: 16
+                },
                 size: {
-                    mobile: 14,
-                    desktop: 16
+                    desktop: 14,
+                    mobile: 12
                 },
+                weight: "medium"
+            },
+            title2: {
                 lineHeight: {
-                    mobile: 20,
-                    desktop: 24
-                }
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
             },
-            loadingScreenTitle: {
+            title3: {
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 18,
-                    desktop: 20
+                    desktop: 28,
+                    mobile: 20
                 },
+                weight: "regular"
+            },
+            title4: {
                 lineHeight: {
-                    mobile: 24,
-                    desktop: 28
-                }
+                    desktop: 40,
+                    mobile: 32
+                },
+                size: {
+                    desktop: 32,
+                    mobile: 24
+                },
+                weight: "regular"
             }
         },
         themeVariants: {
             successFeedback: "inverse",
             brandLoadingScreen: "inverse"
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: !0,
+                brand: !0,
+                negative: !0,
+                alternative: !0,
+                media: !0
+            }
+        },
         spacing: {
             buttonDefaultPadding: {
                 left: {
@@ -1055,6 +1088,10 @@ const t = "Cyber", e = {
                     mobile: 8,
                     desktop: 8
                 },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                },
                 bottom: {
                     mobile: 8,
                     desktop: 8
@@ -1062,10 +1099,6 @@ const t = "Cyber", e = {
                 left: {
                     mobile: 12,
                     desktop: 12
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 16
                 }
             },
             tagPadding: {