[sass] update

.storybook/styles.scss

@@ -1,6 +1,6 @@
-@import '../packages/icons/src/main';
-@import '../packages/scss/src/main-all';
-@import '../packages/ng/styles/main';
+@use '../packages/icons/src/main' as icons;
+@use '../packages/scss/src/main-all' as scss;
+@use '../packages/ng/styles/main' as ng;
 
 .demo-utilityWrapper {
 	display: flex;

packages/ng/api/select/input/api-select-input.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;

packages/ng/api/select/searcher/api-searcher.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include optionSearcherStyle;
+@use '_definitions';
+@include definitions.optionSearcherStyle;

packages/ng/core-select/option/option.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include optionItemStyle;
+@use '_definitions';
+@include definitions.optionItemStyle;
 
 .is-disabled {
 	color: var(--palettes-neutral-500); // disabled token candidate

packages/ng/date/calendar/calendar-input.component.scss

@@ -1,5 +1,4 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
-@import '_definitions';
 
 .calendar {
 	background-color: var(--pr-t-elevation-surface-raised);

packages/ng/date/select/date-select-input.component.scss

@@ -1,7 +1,7 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;
 
 :host {
 	&::after {

packages/ng/department/select/input/department-select-input.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;
 
 .lu-picker-header {
 	.option-selector {

packages/ng/establishment/select/input/establishment-select-input.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;
 
 .lu-picker-header {
 	.option-selector {

packages/ng/establishment/select/searcher/establishment-searcher.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include optionSearcherStyle;
+@use '_definitions';
+@include definitions.optionSearcherStyle;

packages/ng/establishment/select/select-all/establishment-select-all.component.scss

@@ -1,7 +1,9 @@
-@import "_definitions";
+@use '_definitions';
+
 :host {
-	@include optionSelectorStyle;
+	@include definitions.optionSelectorStyle;
 }
+
 button[disabled]:hover {
 	// TODO: remove hover animation when disabled
 }

packages/ng/formly/style/main.scss

@@ -1,2 +1,2 @@
-@import 'theming';
-@import 'components';
+@forward 'theming';
+@forward 'components';

packages/ng/input/clearer/clearer.component.scss

@@ -1,2 +1,3 @@
-@import '_definitions';
-@include selectClearerStyle;
+@use '_definitions';
+
+@include definitions.selectClearerStyle;

packages/ng/option/item/option-item.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include optionItemStyle;
+@use '_definitions';
+@include definitions.optionItemStyle;
 
 .is-disabled {
 	color: var(--palettes-neutral-500); // disabled token candidate

packages/ng/option/item/tree-option-item.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include optionItemStyle;
+@use '_definitions';
+@include definitions.optionItemStyle;
 
 :host {
 	--components-options-tree-multiple-padding: 2.25rem;

packages/ng/option/operator/searcher/option-searcher.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include optionSearcherStyle;
+@use '_definitions';
+@include definitions.optionSearcherStyle;

packages/ng/option/placeholder/option-placeholder.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include optionPlaceholderStyle;
+@use '_definitions';
+@include definitions.optionPlaceholderStyle;

packages/ng/option/selector/all/select-all.component.scss

@@ -1,4 +1,5 @@
-@import '_definitions';
+@use '_definitions';
+
 :host {
-	@include optionSelectorStyle;
+	@include definitions.optionSelectorStyle;
 }

packages/ng/qualification/select/input/qualification-select-input.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;
 
 .optionItem-groupKey {
 	padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--pr-t-spacings-50);

packages/ng/select/input/select-input.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;

packages/ng/simple-select/panel/panel.component.scss

@@ -1,3 +1,3 @@
-@import '_definitions';
-@include optionSearcherStyle;
-@include optionPlaceholderStyle;
+@use '_definitions';
+@include definitions.optionSearcherStyle;
+@include definitions.optionPlaceholderStyle;

packages/ng/styles/_components.scss

@@ -1,12 +1,13 @@
-@import 'components/calendar';
-@import 'components/input';
-@import 'components/picker';
-@import 'components/popover';
-@import 'components/popup';
-@import 'components/dropdown';
-@import 'components/sidepanel';
-@import 'components/cdk/overlay';
-@import 'components/cdk/textarea';
-@import 'components/cdk/misc';
-@import 'components/cdk/global';
-@import 'components/cdk/dragDrop';
+@forward 'components/calendar';
+@forward 'components/input';
+@forward 'components/popover';
+@forward 'components/picker';
+@forward 'components/popup';
+@forward 'components/dropdown';
+@forward 'components/sidepanel';
+
+@forward 'components/cdk/overlay';
+@forward 'components/cdk/textarea';
+@forward 'components/cdk/misc';
+@forward 'components/cdk/global';
+@forward 'components/cdk/dragDrop';

packages/ng/styles/_definitions.scss

@@ -1,6 +1,6 @@
-@import 'definitions/select/select-input';
-@import 'definitions/select/select-clearer';
-@import 'definitions/option/option-item';
-@import 'definitions/option/option-searcher';
-@import 'definitions/option/option-selector';
-@import 'definitions/option/option-placeholder';
+@forward 'definitions/select/select-input';
+@forward 'definitions/select/select-clearer';
+@forward 'definitions/option/option-item';
+@forward 'definitions/option/option-searcher';
+@forward 'definitions/option/option-selector';
+@forward 'definitions/option/option-placeholder';

packages/ng/styles/components/_picker.scss

@@ -1,3 +1,5 @@
+@use 'popover';
+
 .lu-picker-panel {
 	@extend %popover-panel;
 }

packages/ng/styles/components/cdk/_overlay.scss

@@ -60,9 +60,9 @@
 }
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
-	@include keyframe.fadeIn;
-
 	opacity: var(--pr-t-elevation-surface-backdrop);
+
+	@include keyframe.fadeIn;
 }
 
 // MODS

packages/ng/styles/main.scss

@@ -1,2 +1,2 @@
-@import 'definitions';
-@import 'components';
+@use 'definitions';
+@use 'components';

packages/ng/user/select/input/user-select-input.component.scss

@@ -1,5 +1,5 @@
-@import '_definitions';
-@include selectInputStyle;
+@use '_definitions';
+@include definitions.selectInputStyle;
 
 .lu-select-value {
 	padding-right: 3.5rem;
@@ -8,5 +8,5 @@
 .lu-select-additionalInformation {
 	font-size: 80%;
 	font-style: italic;
-	margin-top: -.25em;
+	margin-top: -0.25em;
 }

packages/ng/user/select/searcher/user-searcher.component.scss

@@ -1,2 +1,2 @@
-@import '_definitions';
-@include optionSearcherStyle;
+@use '_definitions';
+@include definitions.optionSearcherStyle;

packages/scss/src/commons/config.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:map';
 
 $isNamespaced: false !default;
 
@@ -382,7 +383,7 @@ $pineapple: (
 ) !default;
 
 // switch case
-$prod: map-get(
+$prod: map.get(
 	(
 		'brand': $brand,
 		'cleemy': $cleemy,
@@ -567,7 +568,8 @@ $loading: (
 $textLink: (
 	color: var(--palettes-product-700),
 	hover: var(--palettes-product-600),
-	disabled: var(--palettes-neutral-500), // disabled token candidate
+	disabled: var(--palettes-neutral-500),
+	// disabled token candidate
 );
 
 // Deprecated

packages/scss/src/commons/core.scss

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:math';
@@ -112,9 +113,9 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 }
 
 @mixin rosetta($before, $after, $iterations) {
-	@if type-of($iterations) == map {
+	@if meta.type-of($iterations) == map {
 		@each $iterationBefore, $iterationAfter in $iterations {
-			@if type-of($iterationAfter) == string {
+			@if meta.type-of($iterationAfter) == string {
 				#{$before}-#{$iterationBefore}: var(#{$after}-#{$iterationAfter});
 			} @else {
 				#{$before}-#{$iterationBefore}: #{$iterationAfter};

packages/scss/src/commons/utils/index.scss

@@ -38,88 +38,88 @@
 .u-animated {
 	&FadeIn,
 	&FadeOut {
-		@include keyframe.fadeIn;
-
 		animation-name: fadeIn;
+
+		@include keyframe.fadeIn;
 	}
 
 	&ScaleIn,
 	&ScaleOut {
-		@include keyframe.scaleIn;
-
 		animation-name: scaleIn;
+
+		@include keyframe.scaleIn;
 	}
 
 	&ScaleInTop,
 	&ScaleOutTop {
-		@include keyframe.scaleIn;
-
 		animation-name: scaleInTop;
+
+		@include keyframe.scaleIn;
 	}
 
 	&ScaleInRight,
 	&ScaleOutRight {
-		@include keyframe.scaleInRight;
-
 		animation-name: scaleInRight;
+
+		@include keyframe.scaleInRight;
 	}
 
 	&ScaleInBottom,
 	&ScaleOutBottom {
-		@include keyframe.scaleInBottom;
-
 		animation-name: scaleInBottom;
+
+		@include keyframe.scaleInBottom;
 	}
 
 	&ScaleInLeft,
 	&ScaleOutLeft {
-		@include keyframe.scaleInLeft;
-
 		animation-name: scaleInLeft;
+
+		@include keyframe.scaleInLeft;
 	}
 
 	&SlideIn,
 	&SlideInTop,
 	&SlideOut,
 	&SlideOutTop {
-		@include keyframe.slideIn;
-
 		animation-name: slideIn;
+
+		@include keyframe.slideIn;
 	}
 
 	&SlideInRight,
 	&SlideOutRight {
-		@include keyframe.slideInRight;
-
 		animation-name: slideInRight;
+
+		@include keyframe.slideInRight;
 	}
 
 	&SlideInBottom,
 	&SlideOutBottom {
-		@include keyframe.slideInBottom;
-
 		animation-name: slideInBottom;
+
+		@include keyframe.slideInBottom;
 	}
 
 	&SlideInLeft,
 	&SlideOutLeft {
-		@include keyframe.slideInLeft;
-
 		animation-name: slideInLeft;
+
+		@include keyframe.slideInLeft;
 	}
 
 	&Shake {
-		@include keyframe.shake;
-
 		animation-name: shake;
+
+		@include keyframe.shake;
 	}
 
 	&Pulse {
-		@include keyframe.pulse;
-
 		animation-name: pulse;
 		animation-direction: alternate;
 		animation-iteration-count: var(--commons-animations-iteration-count);
+
+		@include keyframe.pulse;
 	}
 
 	&FadeOut,