@lucca-front/scss 17.3.1 → 17.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "17.3.1",
+  "version": "17.3.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "v17.3.1"
+    "@lucca-front/icons": "v17.3.2"
   }
 }

package/src/commons/utils/color.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+@use '@lucca-front/scss/src/commons/config';
+
+// future mixin if you need to use palette CSS vars without using a class
+@mixin palette($palette) {
+	$paletteExists: map.get(config.$palettesInterpolation, $palette);
+
+	@if $paletteExists {
+		@each $shade in config.$palettesShades {
+			@if map.get($paletteExists, $shade) {
+				--palettes-#{$shade}: var(--palettes-#{$palette}-#{$shade});
+			}
+		}
+	}
+}

package/src/commons/utils/index.scss

@@ -7,3 +7,4 @@
 @forward 'form' as form-*; // 0 Ko
 @forward 'loading' as loading-*; // 0 Ko
 @forward 'text' as text-*; // 0 Ko
+@forward 'color' as color-*; // 0 Ko

package/src/components/navside/component.scss

@@ -1,5 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/loading';
+@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component($atRoot: 'without: rule') {
@@ -15,6 +17,9 @@
 	width: var(--commons-navSide-width);
 
 	.numericBadge {
+		@include numericBadge.S;
+		@include numericBadge.brand;
+
 		margin-left: auto;
 	}
 
@@ -104,8 +109,8 @@
 			font-weight: 600;
 		}
 
+		// .navSide-item-alert is deprecated
 		.navSide-item-alert {
-			// deprecated
 			font-size: var(--sizes-XS-fontSize);
 			font-weight: 600;
 			background-color: var(--components-navSide-fullwidth-palette-alert-color);
@@ -124,6 +129,8 @@
 		}
 
 		.navSide-item-arrow {
+			@include icon.S;
+
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: transform;
 			transition-timing-function: ease-out;
@@ -134,7 +141,6 @@
 			flex-shrink: 0;
 			transform-origin: 50% 50%;
 			transform: rotate(90deg);
-			@include icon.S;
 		}
 
 		.navSide-item-subMenu {
@@ -152,6 +158,27 @@
 			line-height: var(--sizes-S-lineHeight);
 		}
 
+		.navSide-item-subMenu-item {
+			@include keyframe.slideInLeft;
+
+			opacity: 0;
+			animation-fill-mode: forwards;
+			animation-name: slideInLeft;
+			animation-duration: var(--commons-animations-durations-fast);
+			animation-delay: var(--delay);
+
+			@media (prefers-reduced-motion) {
+				animation: none;
+				opacity: 1;
+			}
+
+			@for $i from 0 through 10 {
+				&:nth-child(#{$i}n) {
+					--delay: #{$i * 25ms};
+				}
+			}
+		}
+
 		.navSide-bottomSection {
 			height: var(--components-navSide-bottom-section-height);
 			width: var(--commons-navSide-width);
@@ -177,8 +204,8 @@
 				}
 			}
 
+			// .navSide-item-alert is deprecated
 			.navSide-item-alert {
-				// deprecated
 				background-color: var(--components-navSide-bottom-section-palette-alert-color);
 				color: var(--components-navSide-bottom-section-palette-alert-text);
 			}

package/src/components/navside/vars.scss

@@ -18,11 +18,14 @@
 	--components-navSide-fullwidth-palette-selected-text: var(--colors-white-color);
 	--components-navSide-fullwidth-palette-hovered-bg: var(--palettes-navigation-700);
 	--components-navSide-fullwidth-palette-hovered-text: var(--colors-white-color);
-	--components-navSide-fullwidth-palette-alert-color: var(--palettes-product-200);
-	--components-navSide-fullwidth-palette-alert-text: var(--palettes-product-800);
 	--components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-product-700);
 	--components-navSide-fullwidth-palette-selected-alert-text: var(--colors-white-color);
 
+	// --components-navSide-fullwidth-palette-alert-color is deprecated
+	// --components-navSide-fullwidth-palette-alert-text is deprecated
+	--components-navSide-fullwidth-palette-alert-color: var(--palettes-brand-200);
+	--components-navSide-fullwidth-palette-alert-text: var(--palettes-brand-800);
+
 	--components-navSide-compact-palette-bg-color: var(--palettes-navigation-800);
 	--components-navSide-compact-palette-text: var(--colors-white-color);
 	--components-navSide-compact-palette-selected-bg: var(--palettes-product-700);

package/src/components/numericBadge/mods.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @mixin S {
 	--components-numericBadge-size: 1.25rem;
 	--components-numericBadge-borderRadius: 6px;
@@ -16,3 +18,8 @@
 	--components-numericBadge-background: var(--palettes-product-200);
 	--components-numericBadge-color: var(--palettes-product-800);
 }
+
+@mixin brand {
+	--components-numericBadge-background: var(--palettes-brand-200);
+	--components-numericBadge-color: var(--palettes-brand-800);
+}