@telefonica/mistica 17.2.0 → 17.4.0

package/src/community/skins/cyber-skin.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {applyAlpha} from '../../utils/color';
 
 import type {Skin} from '../../skins/types';
@@ -88,6 +94,8 @@ export const getCyberSkin = (): Skin => {
             backgroundContainerNegative: applyAlpha(palette.white, 0.1),
             backgroundContainerBrandOverBrand: palette.brand70,
             backgroundContainerAlternative: palette.brand10,
+            backgroundContainerAlternativeOverAlternative: palette.white,
+            backgroundContainerAlternativeOverBrand: palette.brand70,
             backgroundBrand: palette.brand,
             backgroundNegative: palette.grey900,
             backgroundBrandSecondary: palette.brand,
@@ -98,15 +106,15 @@ export const getCyberSkin = (): Skin => {
             backgroundSkeletonBrand: palette.brand70,
             navigationBarBackground: palette.brand,
             backgroundAlternative: palette.brand10,
-            backgroundSelected: applyAlpha(palette.brand, 0.15),
-            backgroundSelectedHover: applyAlpha(palette.brand, 0.2),
-            backgroundSelectedPressed: applyAlpha(palette.brand, 0.25),
-            backgroundSelectedBrand: palette.brand10,
-            backgroundSelectedBrandHover: palette.brand15,
-            backgroundSelectedBrandPressed: palette.brand15,
-            backgroundSelectedNegative: applyAlpha(palette.white, 0.1),
-            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.12),
-            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.15),
+            backgroundSelected: applyAlpha(palette.brand, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.brand, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.brand, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrandTop: palette.brand,
             backgroundBrandBottom: palette.brand,
             backgroundDropZoneHover: applyAlpha(palette.brand70, 0.05),
@@ -136,17 +144,17 @@ export const getCyberSkin = (): Skin => {
             buttonLinkDangerBackgroundNegativePressed: palette.red10,
             buttonLinkDangerBackgroundBrandPressed: palette.red10,
             buttonLinkDangerBackgroundMediaPressed: palette.red10,
-            buttonLinkBackgroundPressed: palette.brand10,
+            buttonLinkBackgroundPressed: applyAlpha(palette.brand, 0.08),
             buttonLinkBackgroundInversePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundPressed: palette.brand10,
-            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey400, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
             buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.12),
-            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
             buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.12),
-            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
             buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.12),
             buttonPrimaryBackground: palette.black,
             buttonPrimaryBackgroundInverse: palette.white,
@@ -211,7 +219,7 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red50,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.brand30,
-            textLinkNeutral: palette.black,
+            textLinkNeutral: palette.grey900,
             textLinkNeutralBrand: palette.white,
             textLinkNeutralNegative: palette.white,
             textLinkNeutralAlternative: palette.grey500,
@@ -384,6 +392,15 @@ export const getCyberSkin = (): Skin => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.darkModeBrand, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBrand, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.darkModeBrand, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -398,6 +415,8 @@ export const getCyberSkin = (): Skin => {
             backgroundContainerNegative: palette.darkModeGrey,
             backgroundContainerBrandOverBrand: palette.darkModeGrey,
             backgroundContainerAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
             backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
             backgroundSkeleton: palette.grey700,
             backgroundSkeletonInverse: palette.grey700,
@@ -439,6 +458,13 @@ export const getCyberSkin = (): Skin => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.brand30, 0.16),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.brand30, 0.16),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.brand,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -502,6 +528,10 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
+            textLinkNeutral: palette.grey100,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,
             inputBorder: palette.grey400,
@@ -683,475 +713,133 @@ export const getCyberSkin = (): Skin => {
             snackbar: '4px',
         },
         textPresets: {
-            cardTitle: {
+            button: {weight: 'medium'},
+            cardDescriptionDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardTitle: {weight: 'medium'},
+            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            chipLabel: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {
-                weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-            },
-            rowTitle: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
             },
-            button: {
-                weight: 'medium',
-            },
+            indicator: {weight: 'medium'},
+            inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            inputValue: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            link: {weight: 'medium'},
+            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            navigationBar: {weight: 'medium'},
+            rowTitle: {weight: 'regular'},
+            stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             tabsLabel: {
-                weight: 'medium',
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            link: {
-                weight: 'medium',
-            },
-            title1: {
-                weight: 'medium',
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
-            },
-            title2: {
-                weight: 'regular',
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            title3: {
-                weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-            },
-            title4: {
-                weight: 'regular',
-                size: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40,
-                },
-            },
-            indicator: {
-                weight: 'medium',
-            },
-            navigationBar: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
             },
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             text5: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
             },
             text6: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
                 weight: 'regular',
-                size: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40,
-                },
             },
             text7: {
+                lineHeight: {desktop: 48, mobile: 32},
+                size: {desktop: 40, mobile: 28},
                 weight: 'regular',
-                size: {
-                    mobile: 28,
-                    desktop: 40,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 48,
-                },
             },
             text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
                 weight: 'regular',
-                size: {
-                    mobile: 32,
-                    desktop: 48,
-                },
-                lineHeight: {
-                    mobile: 40,
-                    desktop: 56,
-                },
             },
             text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
                 weight: 'regular',
-                size: {
-                    mobile: 40,
-                    desktop: 56,
-                },
-                lineHeight: {
-                    mobile: 48,
-                    desktop: 64,
-                },
             },
             text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
                 weight: 'regular',
-                size: {
-                    mobile: 48,
-                    desktop: 64,
-                },
-                lineHeight: {
-                    mobile: 56,
-                    desktop: 72,
-                },
             },
-            chipLabel: {
+            title1: {
+                lineHeight: {desktop: 20, mobile: 16},
+                size: {desktop: 14, mobile: 12},
                 weight: 'medium',
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardPretitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardTitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardSubtitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardDescriptionSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardPretitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardTitleDefault: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
-            },
-            cardSubtitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardDescriptionDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            text1: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
-            },
-            text2: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            text3: {
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            text4: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
-            },
-            inputLabel: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
             },
-            inputValue: {
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            inputHelperText: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
+            title2: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
             },
-            stepperStepLabel: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
+            title3: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
+                weight: 'regular',
             },
-            loadingScreenTitle: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
+            title4: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'regular',
             },
         },
         themeVariants: {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
-            buttonDefaultPadding: {
-                left: {
-                    mobile: 20,
-                    desktop: 20,
-                },
-                right: {
-                    mobile: 20,
-                    desktop: 20,
-                },
-            },
-            buttonSmallPadding: {
-                left: {
-                    mobile: 14,
-                    desktop: 14,
-                },
-                right: {
-                    mobile: 14,
-                    desktop: 14,
-                },
-            },
+            buttonDefaultPadding: {left: {mobile: 20, desktop: 20}, right: {mobile: 20, desktop: 20}},
+            buttonSmallPadding: {left: {mobile: 14, desktop: 14}, right: {mobile: 14, desktop: 14}},
             cardDefaultPadding: {
-                top: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 24,
-                },
+                top: {mobile: 16, desktop: 24},
+                bottom: {mobile: 16, desktop: 24},
+                left: {mobile: 16, desktop: 24},
+                right: {mobile: 16, desktop: 24},
             },
             inputPadding: {
-                top: {
-                    mobile: 8,
-                    desktop: 8,
-                },
-                bottom: {
-                    mobile: 8,
-                    desktop: 8,
-                },
-                left: {
-                    mobile: 12,
-                    desktop: 12,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 16,
-                },
-            },
-            tagPadding: {
-                top: {
-                    mobile: 4,
-                    desktop: 4,
-                },
-                bottom: {
-                    mobile: 4,
-                    desktop: 4,
-                },
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
             },
+            tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
-                top: {
-                    mobile: 64,
-                    desktop: 64,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-            },
-            heroPadding: {
-                top: {
-                    mobile: 24,
-                    desktop: 56,
-                },
-                bottom: {
-                    mobile: 24,
-                    desktop: 56,
-                },
-            },
-            headerPadding: {
-                top: {
-                    mobile: 24,
-                    desktop: 48,
-                },
-                bottom: {
-                    mobile: 24,
-                    desktop: 48,
-                },
+                top: {mobile: 64, desktop: 64},
+                bottom: {mobile: 16, desktop: 64},
+                left: {mobile: 16, desktop: 64},
+                right: {mobile: 16, desktop: 64},
             },
+            heroPadding: {top: {mobile: 24, desktop: 56}, bottom: {mobile: 24, desktop: 56}},
+            headerPadding: {top: {mobile: 24, desktop: 48}, bottom: {mobile: 24, desktop: 48}},
             drawerPadding: {
-                top: {
-                    mobile: 32,
-                    desktop: 40,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 40,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 40,
-                },
-            },
-            boxedDefaultPadding: {
-                left: {
-                    mobile: 16,
-                    desktop: 16,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 16,
-                },
+                top: {mobile: 32, desktop: 40},
+                bottom: {mobile: 16, desktop: 24},
+                left: {mobile: 16, desktop: 40},
+                right: {mobile: 16, desktop: 40},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };