@telefonica/mistica 17.1.0 → 17.3.0

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

@@ -29,6 +29,7 @@ const t = "Cyber", e = {
     teal40: "#9ED3D8",
     teal70: "#528889",
     teal80: "#253D3C",
+    grey10: "#F2F2F2",
     grey15: "#F5F5F5",
     grey100: "#D1D5E4",
     grey200: "#B0B6CA",
@@ -69,15 +70,15 @@ const t = "Cyber", e = {
             backgroundSkeletonBrand: e.brand70,
             navigationBarBackground: e.brand,
             backgroundAlternative: e.brand10,
-            backgroundSelected: r(e.brand, 0.15),
-            backgroundSelectedHover: r(e.brand, 0.2),
-            backgroundSelectedPressed: r(e.brand, 0.25),
-            backgroundSelectedBrand: e.brand10,
-            backgroundSelectedBrandHover: e.brand15,
-            backgroundSelectedBrandPressed: e.brand15,
-            backgroundSelectedNegative: r(e.white, 0.1),
-            backgroundSelectedNegativeHover: r(e.white, 0.12),
-            backgroundSelectedNegativePressed: r(e.white, 0.15),
+            backgroundSelected: r(e.brand, 0.08),
+            backgroundSelectedHover: r(e.brand, 0.12),
+            backgroundSelectedPressed: r(e.brand, 0.16),
+            backgroundSelectedBrand: r(e.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: r(e.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: r(e.darkModeBlack, 0.32),
+            backgroundSelectedNegative: r(e.white, 0.2),
+            backgroundSelectedNegativeHover: r(e.white, 0.28),
+            backgroundSelectedNegativePressed: r(e.white, 0.35),
             backgroundBrandTop: e.brand,
             backgroundBrandBottom: e.brand,
             backgroundDropZoneHover: r(e.brand70, 0.05),
@@ -112,13 +113,13 @@ const t = "Cyber", e = {
             buttonLinkBackgroundNegativePressed: r(e.white, 0.08),
             buttonLinkBackgroundBrandPressed: r(e.white, 0.08),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
-            buttonLinkNeutralBackgroundPressed: e.brand10,
-            buttonLinkNeutralBackgroundBrand: r(e.white, 0.08),
-            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.12),
-            buttonLinkNeutralBackgroundNegative: r(e.white, 0.08),
-            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.12),
-            buttonLinkNeutralBackgroundMedia: r(e.white, 0.08),
-            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.12),
+            buttonLinkNeutralBackgroundPressed: e.grey10,
+            buttonLinkNeutralBackgroundBrand: e.white,
+            buttonLinkNeutralBackgroundBrandPressed: e.grey10,
+            buttonLinkNeutralBackgroundNegative: e.white,
+            buttonLinkNeutralBackgroundNegativePressed: e.grey10,
+            buttonLinkNeutralBackgroundMedia: e.white,
+            buttonLinkNeutralBackgroundMediaPressed: e.grey10,
             buttonPrimaryBackground: e.black,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -182,11 +183,11 @@ const t = "Cyber", e = {
             textLinkDanger: e.red50,
             textLinkDangerMedia: e.red50,
             textLinkSnackbar: e.brand30,
-            textLinkNeutral: e.black,
-            textLinkNeutralBrand: e.white,
-            textLinkNeutralNegative: e.white,
-            textLinkNeutralAlternative: e.grey500,
-            textLinkNeutralMedia: e.white,
+            textLinkNeutral: e.grey900,
+            textLinkNeutralBrand: e.grey900,
+            textLinkNeutralNegative: e.grey900,
+            textLinkNeutralAlternative: e.grey900,
+            textLinkNeutralMedia: e.grey900,
             textActivated: e.brand70,
             textBrand: e.brand70,
             inputBorder: e.grey400,
@@ -355,6 +356,15 @@ const t = "Cyber", e = {
         darkModeColors: {
             background: e.darkModeBlack,
             backgroundAlternative: e.darkModeBlack,
+            backgroundSelected: r(e.darkModeBrand, 0.18),
+            backgroundSelectedHover: r(e.darkModeBrand, 0.25),
+            backgroundSelectedPressed: r(e.darkModeBrand, 0.33),
+            backgroundSelectedBrand: r(e.darkModeBrand, 0.18),
+            backgroundSelectedBrandHover: r(e.darkModeBrand, 0.25),
+            backgroundSelectedBrandPressed: r(e.darkModeBrand, 0.33),
+            backgroundSelectedNegative: r(e.darkModeBrand, 0.18),
+            backgroundSelectedNegativeHover: r(e.darkModeBrand, 0.25),
+            backgroundSelectedNegativePressed: r(e.darkModeBrand, 0.33),
             backgroundBrand: e.darkModeBlack,
             backgroundNegative: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
@@ -410,6 +420,13 @@ const t = "Cyber", e = {
             buttonLinkBackgroundNegativePressed: r(e.brand30, 0.16),
             buttonLinkBackgroundBrandPressed: r(e.brand30, 0.16),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.brand,
             buttonPrimaryBackgroundInverse: e.white,
             buttonPrimaryBackgroundNegative: e.white,
@@ -473,6 +490,11 @@ const t = "Cyber", e = {
             textLinkDanger: e.red30,
             textLinkDangerMedia: e.red50,
             textLinkSnackbar: e.darkModeBrand,
+            textLinkNeutral: e.brand10,
+            textLinkNeutralBrand: e.brand10,
+            textLinkNeutralNegative: e.brand10,
+            textLinkNeutralAlternative: e.brand10,
+            textLinkNeutralMedia: e.white,
             textActivated: e.darkModeBrand,
             textBrand: e.brand30,
             inputBorder: e.grey400,
@@ -650,345 +672,355 @@ const t = "Cyber", e = {
             input: "12px",
             popup: "4px",
             sheet: "0px",
-            mediaSmall: "2px"
+            mediaSmall: "2px",
+            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: {
@@ -1033,9 +1065,17 @@ const t = "Cyber", e = {
                     mobile: 8,
                     desktop: 8
                 },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                },
                 bottom: {
                     mobile: 8,
                     desktop: 8
+                },
+                left: {
+                    mobile: 12,
+                    desktop: 12
                 }
             },
             tagPadding: {