@telefonica/mistica 16.3.1 → 16.5.0

package/dist/skins/telefonica.js

@@ -124,12 +124,14 @@ const e = {
             controlInverse: e.grey1,
             controlActivatedInverse: e.white,
             controlError: e.coral,
-            barTrack: e.grey3,
+            barTrack: e.grey2,
+            barTrackInverse: (0, _color.applyAlpha)(e.white, 0.3),
             loadingBar: e.telefonicaBlue30,
             loadingBarBackground: e.telefonicaBlue70,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.grey2,
             iosControlKnob: e.white,
+            controlKnobInverse: e.telefonicaBlue,
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.telefonicaBlue,
@@ -257,11 +259,13 @@ const e = {
             controlActivatedInverse: e.telefonicaBlue,
             controlError: e.coral,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.telefonicaBlue,
             loadingBarBackground: e.grey6,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.telefonicaBlue20,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
@@ -335,154 +339,154 @@ const e = {
             mediaSmall: "0px"
         },
         textPresets: {
+            button: {
+                weight: "medium"
+            },
             cardTitle: {
                 weight: "regular"
             },
-            button: {
+            indicator: {
                 weight: "medium"
             },
-            tabsLabel: {
-                weight: "medium",
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24
-                }
-            },
             link: {
                 weight: "medium"
             },
-            title1: {
+            navigationBar: {
                 weight: "medium"
             },
-            title2: {
-                weight: "regular"
-            },
-            title3: {
-                weight: "regular",
+            tabsLabel: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 20,
-                    desktop: 28
+                    desktop: 18,
+                    mobile: 16
                 },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32
-                }
-            },
-            indicator: {
-                weight: "medium"
-            },
-            navigationBar: {
                 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
                 }
             },
             text5: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 20,
-                    desktop: 28
+                    desktop: 28,
+                    mobile: 20
                 },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32
-                }
+                weight: "regular"
             },
             text6: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 40,
+                    mobile: 32
+                },
                 size: {
-                    mobile: 24,
-                    desktop: 32
+                    desktop: 32,
+                    mobile: 24
                 },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40
-                }
+                weight: "regular"
             },
             text7: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 48,
+                    mobile: 32
+                },
                 size: {
-                    mobile: 28,
-                    desktop: 40
+                    desktop: 40,
+                    mobile: 28
                 },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 48
-                }
+                weight: "regular"
             },
             text8: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 56,
+                    mobile: 40
+                },
                 size: {
-                    mobile: 32,
-                    desktop: 48
+                    desktop: 48,
+                    mobile: 32
                 },
-                lineHeight: {
-                    mobile: 40,
-                    desktop: 56
-                }
+                weight: "regular"
             },
             text9: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 64,
+                    mobile: 48
+                },
                 size: {
-                    mobile: 40,
-                    desktop: 56
+                    desktop: 56,
+                    mobile: 40
                 },
-                lineHeight: {
-                    mobile: 48,
-                    desktop: 64
-                }
+                weight: "regular"
             },
             text10: {
-                weight: "regular",
+                lineHeight: {
+                    desktop: 72,
+                    mobile: 56
+                },
                 size: {
-                    mobile: 48,
-                    desktop: 64
+                    desktop: 64,
+                    mobile: 48
                 },
+                weight: "regular"
+            },
+            title1: {
+                weight: "medium"
+            },
+            title2: {
+                weight: "regular"
+            },
+            title3: {
                 lineHeight: {
-                    mobile: 56,
-                    desktop: 72
-                }
+                    desktop: 32,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 28,
+                    mobile: 20
+                },
+                weight: "regular"
             }
         }
     });

package/dist/skins/tu.js

@@ -129,11 +129,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.red,
             barTrack: e.grey2,
+            barTrackInverse: (0, _color.applyAlpha)(e.white, 0.36),
             loadingBar: e.green40,
             loadingBarBackground: e.green,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.primary15,
             iosControlKnob: e.white,
+            controlKnobInverse: e.primary,
             divider: e.grey2,
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.primary,
@@ -261,11 +263,13 @@ const e = {
             controlActivatedInverse: e.blue30,
             controlError: e.red,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.green40,
             loadingBarBackground: e.green,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.blue20,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
@@ -339,154 +343,154 @@ const e = {
             mediaSmall: "8px"
         },
         textPresets: {
-            cardTitle: {
-                weight: "medium"
-            },
             button: {
                 weight: "medium"
             },
-            tabsLabel: {
-                weight: "medium",
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24
-                }
+            cardTitle: {
+                weight: "medium"
             },
-            link: {
+            indicator: {
                 weight: "medium"
             },
-            title1: {
+            link: {
                 weight: "medium"
             },
-            title2: {
+            navigationBar: {
                 weight: "medium"
             },
-            title3: {
-                weight: "medium",
+            tabsLabel: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 20,
-                    desktop: 28
+                    desktop: 18,
+                    mobile: 16
                 },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32
-                }
-            },
-            indicator: {
-                weight: "medium"
-            },
-            navigationBar: {
                 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
                 }
             },
             text5: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 24
+                },
                 size: {
-                    mobile: 20,
-                    desktop: 28
+                    desktop: 28,
+                    mobile: 20
                 },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32
-                }
+                weight: "medium"
             },
             text6: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 40,
+                    mobile: 32
+                },
                 size: {
-                    mobile: 24,
-                    desktop: 32
+                    desktop: 32,
+                    mobile: 24
                 },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40
-                }
+                weight: "medium"
             },
             text7: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 48,
+                    mobile: 32
+                },
                 size: {
-                    mobile: 28,
-                    desktop: 40
+                    desktop: 40,
+                    mobile: 28
                 },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 48
-                }
+                weight: "medium"
             },
             text8: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 56,
+                    mobile: 40
+                },
                 size: {
-                    mobile: 32,
-                    desktop: 48
+                    desktop: 48,
+                    mobile: 32
                 },
-                lineHeight: {
-                    mobile: 40,
-                    desktop: 56
-                }
+                weight: "medium"
             },
             text9: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 64,
+                    mobile: 48
+                },
                 size: {
-                    mobile: 40,
-                    desktop: 56
+                    desktop: 56,
+                    mobile: 40
                 },
-                lineHeight: {
-                    mobile: 48,
-                    desktop: 64
-                }
+                weight: "medium"
             },
             text10: {
-                weight: "medium",
+                lineHeight: {
+                    desktop: 72,
+                    mobile: 56
+                },
                 size: {
-                    mobile: 48,
-                    desktop: 64
+                    desktop: 64,
+                    mobile: 48
                 },
+                weight: "medium"
+            },
+            title1: {
+                weight: "medium"
+            },
+            title2: {
+                weight: "medium"
+            },
+            title3: {
                 lineHeight: {
-                    mobile: 56,
-                    desktop: 72
-                }
+                    desktop: 32,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 28,
+                    mobile: 20
+                },
+                weight: "medium"
             }
         }
     });

package/dist/skins/types/colors.d.ts

@@ -66,11 +66,13 @@ export type Colors = {
     controlActivatedInverse: string;
     controlError: string;
     barTrack: string;
+    barTrackInverse: string;
     loadingBar: string;
     loadingBarBackground: string;
     toggleAndroidInactive: string;
     toggleAndroidBackgroundActive: string;
     iosControlKnob: string;
+    controlKnobInverse: string;
     divider: string;
     dividerInverse: string;
     navigationBarDivider: string;