@telefonica/mistica 17.3.0 → 17.4.0

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

@@ -94,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,
@@ -142,18 +144,18 @@ 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.grey10,
-            buttonLinkNeutralBackgroundBrand: palette.white,
-            buttonLinkNeutralBackgroundBrandPressed: palette.grey10,
-            buttonLinkNeutralBackgroundNegative: palette.white,
-            buttonLinkNeutralBackgroundNegativePressed: palette.grey10,
-            buttonLinkNeutralBackgroundMedia: palette.white,
-            buttonLinkNeutralBackgroundMediaPressed: palette.grey10,
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey400, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.12),
             buttonPrimaryBackground: palette.black,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -218,10 +220,10 @@ export const getCyberSkin = (): Skin => {
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.brand30,
             textLinkNeutral: palette.grey900,
-            textLinkNeutralBrand: palette.grey900,
-            textLinkNeutralNegative: palette.grey900,
-            textLinkNeutralAlternative: palette.grey900,
-            textLinkNeutralMedia: palette.grey900,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
+            textLinkNeutralAlternative: palette.grey500,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.brand70,
             textBrand: palette.brand70,
             inputBorder: palette.grey400,
@@ -413,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,
@@ -524,10 +528,9 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
-            textLinkNeutral: palette.brand10,
-            textLinkNeutralBrand: palette.brand10,
-            textLinkNeutralNegative: palette.brand10,
-            textLinkNeutralAlternative: palette.brand10,
+            textLinkNeutral: palette.grey100,
+            textLinkNeutralBrand: palette.white,
+            textLinkNeutralNegative: palette.white,
             textLinkNeutralMedia: palette.white,
             textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,

package/src/index.tsx

@@ -114,6 +114,20 @@ export {Grid, GridItem} from './grid';
 export {default as Drawer} from './drawer';
 export {default as Timeline, TimelineItem} from './timeline';
 export {default as SkipLink, SkipLinkNav} from './skip-link';
+export {SidenavBar} from './sidenav-bar';
+export {SidenavLayout} from './sidenav-bar-layout';
+export type {SidenavBarProps} from './sidenav-bar';
+export type {SidenavLayoutProps} from './sidenav-bar-layout';
+export type {
+    SidenavEntry,
+    SidenavSection,
+    SidenavFirstLevelItem,
+    SidenavSecondLevelItem,
+    SidenavSectionTitle,
+    SidenavSlot,
+    SidenavSlotRenderProps,
+    SidenavCollapseState,
+} from './sidenav-bar-types';
 
 // Sheets
 export {default as SheetRoot, showSheet} from './sheet-root';

package/src/list.css.ts

@@ -1,8 +1,10 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import * as mq from './media-queries.css';
 import {vars} from './skins/skin-contract.css';
 import {sprinkles} from './sprinkles.css';
 
+import type {StyleRule} from '@vanilla-extract/css';
+
 export const disabled = style({
     opacity: 0.5,
 });
@@ -11,8 +13,41 @@ export const row = style({
     width: '100%',
 });
 
+const selectionOutlineWidth = 2;
+const selectionOutlineOffset = 2;
+
+export const selectionOutline = style({
+    position: 'relative',
+    borderRadius: vars.borderRadii.container,
+    selectors: {
+        '&::after': {
+            content: '',
+            position: 'absolute',
+            inset: -(selectionOutlineWidth + selectionOutlineOffset),
+            border: `${selectionOutlineWidth}px solid transparent`,
+            borderRadius: `calc(${vars.borderRadii.container} + 3px)`,
+            pointerEvents: 'none',
+            transition: 'border-color 0.08s ease-in-out',
+        },
+    },
+});
+
 export const boxed = style({});
 
+const selectedOutlineStyles = (outlineColor: string): StyleRule => ({
+    selectors: {
+        '&::after': {borderColor: outlineColor},
+    },
+});
+
+export const selectionOutlineColor = styleVariants({
+    default: selectedOutlineStyles(vars.colors.controlActivated),
+    alternative: selectedOutlineStyles(vars.colors.controlActivated),
+    brand: selectedOutlineStyles(vars.colors.controlActivatedBrand),
+    media: selectedOutlineStyles(vars.colors.controlActivatedBrand),
+    negative: selectedOutlineStyles(vars.colors.controlActivatedNegative),
+});
+
 export const touchableBackground = style({
     transition: 'background-color 0.1s ease-in-out',
     ':active': {