@lucca-front/scss 19.0.0 → 19.1.0

package/src/components/divider/component.scss

@@ -1,38 +1,58 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border: 0;
+	display: block;
+	margin-block: var(--components-divider-margin);
+	align-self: var(--components-divider-alignSelf);
 
 	&:where(:empty) {
-		border-top-color: var(--commons-divider-color);
-		border-top-width: var(--commons-divider-width);
-		border-top: var(--commons-divider-border);
-		margin-block: var(--components-divider-margin);
+		margin-inline: 0;
+		height: auto;
+
+		&:not(.mod-vertical) {
+			border-top: var(--commons-divider-border);
+		}
 	}
 
 	&:not(:empty) {
-		--components-divider-margin: 0;
 		display: flex;
+		flex-direction: var(--components-divider-direction);
 		align-items: center;
-		gap: var(--pr-t-spacings-100);
 		text-wrap: balance;
 		text-align: center;
 		font-size: var(--components-divider-fontSize);
 		line-height: var(--components-divider-lineHeight);
 		color: var(--palettes-neutral-600);
+		gap: var(--pr-t-spacings-100);
+		justify-content: var(--components-divider-justify);
 
 		&::before,
 		&::after {
-			border-top-color: var(--commons-divider-color);
-			border-top-width: var(--commons-divider-width);
-			border-top: var(--commons-divider-border);
 			flex-grow: 1;
-			min-width: var(--pr-t-spacings-300);
 			content: '';
 		}
 
 		.lucca-icon {
 			color: var(--palettes-neutral-600);
 		}
+
+		&:not(.mod-vertical) {
+			&::before,
+			&::after {
+				border-top: var(--commons-divider-border);
+				min-width: var(--components-divider-minSize);
+			}
+		}
+
+		.lucca-icon {
+			position: relative;
+			bottom: var(--components-divider-iconBottom);
+		}
+	}
+
+	.button {
+		@include button.outlined;
 	}
 }

package/src/components/divider/index.scss

@@ -1,6 +1,4 @@
 @use 'exports' as *;
-@use '@lucca-front/scss/src/components/button/exports' as button;
-@use '@lucca-front/icons/src/icon/exports' as icon;
 
 .divider {
 	@include vars;
@@ -8,17 +6,9 @@
 
 	&.mod-S {
 		@include S;
-
-		.button {
-			@include button.S;
-		}
-
-		.lucca-icon {
-			@include icon.S;
-		}
 	}
 
-	.button {
-		@include button.outlined;
+	&.mod-vertical {
+		@include vertical;
 	}
 }

package/src/components/divider/mods.scss

@@ -1,4 +1,35 @@
+@use '@lucca-front/scss/src/components/button/exports' as button;
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
 @mixin S {
 	--components-divider-fontSize: var(--sizes-S-fontSize);
 	--components-divider-lineHeight: var(--sizes-S-lineHeight);
+
+	.button {
+		@include button.S;
+	}
+
+	.lucca-icon {
+		@include icon.S;
+	}
+}
+
+@mixin vertical {
+	--components-divider-alignSelf: stretch;
+
+	&:where(:empty) {
+		border-left: var(--commons-divider-border);
+	}
+
+	&:not(:empty) {
+		--components-divider-direction: column;
+		--components-divider-iconBottom: var(--pr-t-spacings-25);
+		--components-divider-justify: center;
+
+		&::before,
+		&::after {
+			border-left: var(--commons-divider-border);
+			min-height: var(--components-divider-minSize);
+		}
+	}
 }

package/src/components/divider/vars.scss

@@ -2,4 +2,9 @@
 	--components-divider-fontSize: var(--sizes-M-fontSize);
 	--components-divider-lineHeight: var(--sizes-M-lineHeight);
 	--components-divider-margin: var(--pr-t-spacings-50);
+	--components-divider-minSize: var(--pr-t-spacings-150);
+	--components-divider-direction: row;
+	--components-divider-iconBottom: 0;
+	--components-divider-justify: normal;
+	--components-divider-alignSelf: '';
 }

package/src/components/fancyBox/component.scss

@@ -0,0 +1,71 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	overflow: hidden;
+	padding-inline: var(--pr-t-spacings-200);
+	display: block;
+
+	@at-root ($atRoot) {
+		.fancyBox-content {
+			display: flex;
+			flex-direction: column;
+			margin: 0 auto;
+			min-height: 10rem;
+			min-width: min(20rem, 100%);
+			padding-block: var(--pr-t-spacings-300);
+			width: fit-content;
+			position: relative;
+		}
+
+		.fancyBox-content-box {
+			position: relative;
+			padding: var(--pr-t-spacings-300) var(--pr-t-spacings-700);
+			background-color: var(--pr-t-elevation-surface-raised);
+			border-radius: 16px;
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			&::before,
+			&::after {
+				content: '';
+				z-index: -1;
+				position: absolute;
+				width: var(--components-fancyBox-imageWidth);
+				height: var(--components-fancyBox-imageHeight);
+				background-repeat: no-repeat;
+				background-size: contain;
+				transition-duration: var(--commons-animations-durations-slow);
+			}
+
+			&::before {
+				transition-property: width, height, bottom, left;
+				bottom: var(--components-fancyBox-offsetBlock);
+				left: var(--components-fancyBox-offsetInline);
+				background-image: var(--components-fancyBox-background-left);
+			}
+
+			&::after {
+				transition-property: width, height, top, right;
+				top: var(--components-fancyBox-offsetBlock);
+				right: var(--components-fancyBox-offsetInline);
+				background-image: var(--components-fancyBox-background-right);
+			}
+		}
+
+		.fancyBox-content-box-foreground {
+			position: absolute;
+			width: var(--components-fancyBox-imageWidth);
+			height: var(--components-fancyBox-imageHeight);
+			background-repeat: no-repeat;
+			top: var(--components-fancyBox-offsetBlock);
+			right: var(--components-fancyBox-offsetInline);
+			background-image: var(--components-fancyBox-foreground);
+			background-size: contain;
+			transition-property: width, height, top, right;
+			transition-duration: var(--commons-animations-durations-slow);
+		}
+	}
+}

package/src/components/fancyBox/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/fancyBox/index.scss

@@ -0,0 +1,11 @@
+@use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+
+.fancyBox {
+	@include vars;
+	@include component;
+
+	@include media.max('XS') {
+		@include narrow;
+	}
+}

package/src/components/fancyBox/mods.scss

@@ -0,0 +1,6 @@
+@mixin narrow {
+	--components-fancyBox-imageWidth: 11.25rem;
+	--components-fancyBox-imageHeight: 9rem;
+	--components-fancyBox-offsetInline: -8.75rem;
+	--components-fancyBox-offsetBlock: -0.5rem;
+}

package/src/components/fancyBox/vars.scss

@@ -0,0 +1,9 @@
+@mixin vars {
+	--components-fancyBox-background-left: none;
+	--components-fancyBox-background-right: none;
+	--components-fancyBox-foreground: none;
+	--components-fancyBox-imageWidth: 12.5rem;
+	--components-fancyBox-imageHeight: 10rem;
+	--components-fancyBox-offsetInline: -10rem;
+	--components-fancyBox-offsetBlock: -1.5rem;
+}

package/src/components/fieldset/component.scss

@@ -32,6 +32,13 @@
 			justify-content: space-between;
 			gap: var(--components-fieldset-gap);
 			max-width: var(--components-fieldset-contentMaxWidth);
+
+			.lucca-icon {
+				transform: rotate(var(--components-fieldset-title-iconRotation));
+				transition-property: transform;
+				transition-duration: var(--commons-animations-durations-fast);
+				color: var(--palettes-neutral-700);
+			}
 		}
 
 		.fieldset-title-content-text-helper {

package/src/components/fieldset/index.scss

@@ -15,4 +15,8 @@
 	&.mod-expandable {
 		@include expandable;
 	}
+
+	&:has(.fieldset-title-content[aria-expanded='true']) {
+		@include expanded;
+	}
 }

package/src/components/fieldset/states.scss

@@ -0,0 +1,3 @@
+@mixin expanded {
+	--components-fieldset-title-iconRotation: 180deg;
+}

package/src/components/fieldset/vars.scss

@@ -1,4 +1,5 @@
 @mixin vars {
 	--components-fieldset-gap: var(--pr-t-spacings-150);
 	--components-fieldset-contentMaxWidth: 40rem;
+	--components-fieldset-title-iconRotation: 0deg;
 }

package/src/components/form/index.scss

@@ -55,11 +55,15 @@
 		@include checkable;
 	}
 
-	&:has(.textField-input-value[aria-invalid='true']),
-	&:has(.timePicker-fieldset-group-textfield-input[aria-invalid='true']),
-	&:has(.simpleSelect-input[aria-invalid='true']),
-	&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
-		@include invalid;
+	&:not(lu-form-field) {
+		&:has(
+				.textField-input-value[aria-invalid='true'],
+				.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
+				.simpleSelect-input[aria-invalid='true'],
+				.multipleSelect-displayer-search[aria-invalid='true']
+			) {
+			@include invalid;
+		}
 	}
 
 	&:has(.radioField-input:disabled),

package/src/components/index.scss

@@ -28,7 +28,6 @@
 @forward 'breadcrumbs'; // 2 Ko
 @forward 'buttonGroup'; // 2 Ko
 @forward 'header'; // 3 Ko
-@forward 'actionIcon'; // 3 Ko
 @forward 'menu'; // 4 Ko
 @forward 'radio'; // 4 Ko
 @forward 'radioField'; // new component for radio
@@ -50,6 +49,7 @@
 @forward 'segmentedControl';
 @forward 'calendar';
 @forward 'skipLinks';
+@forward 'fancyBox';
 
 // caution: the two components cannot be loaded at the same time
 @forward 'grid';
@@ -87,10 +87,11 @@
 @forward 'popover';
 @forward 'userTile';
 @forward 'plgPush';
+@forward 'dateField';
+@forward 'dateRangeField';
+@forward 'dataTable';
+@forward 'dataTableSticked';
 
 // Deprecated CSS components
-// @forward 'gridLegacy'; // 40 Ko
-// @forward 'emptyStateDeprecated';
-
 // @forward 'tableFixedDeprecated'; // 33 Ko
 // @forward 'tableStickedDeprecated'; // 67 Ko

package/src/components/list/mods.scss

@@ -42,7 +42,7 @@
 	// if no hover on list item
 	@media (hover: hover) {
 		&:not(:hover) {
-			.actionIcon {
+			.button {
 				&:not(:focus) {
 					@include a11y.mask;
 					opacity: 0;

package/src/components/multiSelect/component.scss

@@ -14,7 +14,7 @@
 	cursor: pointer;
 
 	&:hover {
-		--components-multiSelect-border-color: var(--palettes-neutral-400);
+		--components-multiSelect-border-color: var(--pr-t-color-input-border-hover);
 	}
 
 	&:has(.multipleSelect-displayer-search:focus-visible) {
@@ -49,7 +49,7 @@
 			border: 0;
 			padding: 0;
 			outline: none;
-			color: var(--palettes-neutral-800);
+			color: var(--pr-t-color-input-text);
 			font-size: var(--components-multiSelect-fontSize);
 			line-height: var(--components-multiSelect-lineHeight);
 			background-color: transparent;

package/src/components/multiSelect/states.scss

@@ -5,16 +5,15 @@
 }
 
 @mixin invalid {
-	--components-multiSelect-border-color: var(--palettes-error-400);
-	--components-multiSelect-background: var(--palettes-error-50);
-	--components-multiSelect-placeholder: var(--palettes-error-400);
+	--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);
+	--components-multiSelect-background: var(--pr-t-color-input-background-critical);
+	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 }
 
 @mixin disabled {
-	--components-multiSelect-border-color: var(--palettes-neutral-300); // disabled token candidate
 	--components-multiSelect-background: var(--commons-disabled-background);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
-	--components-multiSelect-arrow-color: var(--palettes-neutral-500); // disabled token candidate
+	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 	pointer-events: none;
 }
 

package/src/components/multiSelect/vars.scss

@@ -3,8 +3,8 @@
 	--components-multiSelect-lineHeight: var(--sizes-M-lineHeight);
 	--components-multiSelect-padding: var(--pr-t-spacings-100);
 	--components-multiSelect-gap: var(--pr-t-spacings-100);
-	--components-multiSelect-background: var(--palettes-neutral-0);
-	--components-multiSelect-border-color: var(--palettes-neutral-300);
-	--components-multiSelect-placeholder: var(--palettes-neutral-400);
-	--components-multiSelect-arrow-color: var(--palettes-neutral-600);
+	--components-multiSelect-background: var(--pr-t-color-input-background);
+	--components-multiSelect-border-color: var(--pr-t-color-input-border);
+	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);
+	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);
 }

package/src/components/navside/mods.scss

@@ -15,6 +15,10 @@
 			&:has(.navSide.mod-compact, .mod-withMenuCompact) {
 				--commons-navSide-width: 7.5rem;
 			}
+
+			@supports not selector(:has(*)) {
+				--commons-navSide-width: 15rem;
+			}
 		}
 	}
 

package/src/components/numericBadge/component.scss

@@ -15,4 +15,13 @@
 	transition-duration: var(--commons-animations-durations-fast);
 	transition-timing-function: ease;
 	white-space: nowrap;
+	position: relative;
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-property: color;
+
+	&:empty {
+		&::before {
+			content: ' ';
+		}
+	}
 }

package/src/components/numericBadge/index.scss

@@ -11,4 +11,16 @@
 	&.mod-XS {
 		@include XS;
 	}
+
+	&.is-loading {
+		@include loading;
+
+		&.mod-S {
+			@include loadingS;
+		}
+
+		&.mod-XS {
+			@include loadingXS;
+		}
+	}
 }

package/src/components/numericBadge/states.scss

@@ -1,4 +1,23 @@
+@use '@lucca-front/scss/src/commons/utils/loading';
+
 @mixin disabled {
 	background-color: var(--palettes-neutral-200); // disabled token candidate
 	color: var(--palettes-neutral-500); // disabled token candidate
 }
+
+@mixin loading {
+	@include loading.spinner(calc(var(--components-numericBadge-size) - var(--pr-t-spacings-100)));
+
+	--commons-loading-frontground: var(--components-numericBadge-loadingColor);
+	--components-numericBadge-color: transparent;
+
+	--commons-loading-borderWidth: 2px;
+}
+
+@mixin loadingS {
+	--commons-loading-borderWidth: 1.5px;
+}
+
+@mixin loadingXS {
+	--commons-loading-borderWidth: 1px;
+}

package/src/components/numericBadge/vars.scss

@@ -1,6 +1,7 @@
 @mixin vars {
 	--components-numericBadge-background: var(--palettes-200, var(--palettes-neutral-200));
 	--components-numericBadge-color: var(--palettes-800, var(--palettes-neutral-700));
+	--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-neutral-500));
 	--components-numericBadge-size: 1.5rem;
 	--components-numericBadge-fontSize: var(--sizes-S-fontSize);
 	--components-numericBadge-lineHeight: var(--sizes-S-lineHeight);

package/src/components/simpleSelect/component.scss

@@ -14,7 +14,7 @@
 	cursor: pointer;
 
 	&:hover {
-		--components-simpleSelect-border-color: var(--palettes-neutral-400);
+		--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover);
 	}
 
 	@at-root ($atRoot) {

package/src/components/simpleSelect/states.scss

@@ -49,16 +49,15 @@
 }
 
 @mixin invalid {
-	--components-simpleSelect-border-color: var(--palettes-error-400);
-	--components-simpleSelect-background: var(--palettes-error-50);
-	--components-simpleSelect-placeholder: var(--palettes-error-400);
+	--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical);
+	--components-simpleSelect-background: var(--pr-t-color-input-background-critical);
+	--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 }
 
 @mixin disabled {
-	--components-simpleSelect-border-color: var(--palettes-neutral-300); // disabled token candidate
-	--components-simpleSelect-background: var(--commons-disabled-background);
-	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder);
-	--components-simpleSelect-value-color: var(--palettes-neutral-700); // disabled token candidate
-	--components-simpleSelect-arrow-color: var(--palettes-neutral-500); // disabled token candidate
+	--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);
+	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder); // Deprecated: no placeholder with disabled state
+	--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);
+	--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 	pointer-events: none;
 }

package/src/components/simpleSelect/vars.scss

@@ -3,9 +3,9 @@
 	--components-simpleSelect-lineHeight: var(--sizes-M-lineHeight);
 	--components-simpleSelect-padding: var(--pr-t-spacings-100);
 	--components-simpleSelect-gap: var(--pr-t-spacings-100);
-	--components-simpleSelect-background: var(--palettes-neutral-0);
-	--components-simpleSelect-value-color: var(--palettes-neutral-800);
-	--components-simpleSelect-border-color: var(--palettes-neutral-300);
-	--components-simpleSelect-placeholder: var(--palettes-neutral-400);
-	--components-simpleSelect-arrow-color: var(--palettes-neutral-600);
+	--components-simpleSelect-background: var(--pr-t-color-input-background);
+	--components-simpleSelect-value-color: var(--pr-t-color-input-text);
+	--components-simpleSelect-border-color: var(--pr-t-color-input-border);
+	--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder);
+	--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon);
 }

package/src/components/statusBadge/component.scss

@@ -15,7 +15,7 @@
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));
 		border-radius: var(--commons-borderRadius-full);
-		content: "\a0"; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
+		content: '\a0'; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
 		display: block;
 		height: var(--components-statusBadge-dot-size);
 		flex-shrink: 0;

package/src/components/statusBadge/index.scss

@@ -5,6 +5,6 @@
 	@include component;
 
 	&.mod-L {
-		@include l;
+		@include L;
 	}
 }

package/src/components/statusBadge/mods.scss

@@ -1,6 +1,6 @@
-@mixin l {
-  --components-statusBadge-fontSize: var(--sizes-M-fontSize);
-  --components-statusBadge-lineHeight: var(--sizes-S-lineHeight);
-  --components-statusBadge-dot-size: .625rem;
-  --components-statusBadge-dot-top: .325rem;
+@mixin L {
+	--components-statusBadge-fontSize: var(--sizes-M-fontSize);
+	--components-statusBadge-lineHeight: var(--sizes-S-lineHeight);
+	--components-statusBadge-dot-size: 0.625rem;
+	--components-statusBadge-dot-top: 0.325rem;
 }

package/src/components/statusBadge/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
-  --components-statusBadge-fontSize: var(--sizes-S-fontSize);
-  --components-statusBadge-lineHeight: var(--sizes-XS-lineHeight);
-  --components-statusBadge-dot-size: .5rem;
-  --components-statusBadge-dot-top: var(--pr-t-spacings-50);
+	--components-statusBadge-fontSize: var(--sizes-S-fontSize);
+	--components-statusBadge-lineHeight: var(--sizes-XS-lineHeight);
+	--components-statusBadge-dot-size: 0.5rem;
+	--components-statusBadge-dot-top: var(--pr-t-spacings-50);
 }

package/src/components/tableSortable/index.scss

@@ -20,6 +20,7 @@
 }
 
 .table-head-row-cell,
+.dataTable-head-row-cell,
 .indexTable-head-row-cell {
 	&.mod-alignRight {
 		// .table-head-row-cell-sortableButton is deprecated

package/src/components/textField/component.scss

@@ -12,7 +12,7 @@
 	box-shadow: 0 0 0 1px var(--component-textField-border);
 
 	&:hover {
-		--component-textField-border: var(--palettes-neutral-400);
+		--component-textField-border: var(--pr-t-color-input-border-hover);
 	}
 
 	&:has(.textField-input-value:focus-visible) {
@@ -23,7 +23,7 @@
 		pointer-events: auto;
 		width: var(--component-textField-affix-size);
 		height: var(--component-textField-affix-size);
-		color: var(--palettes-neutral-600);
+		color: var(--pr-t-color-input-icon);
 	}
 
 	@at-root ($atRoot) {
@@ -105,7 +105,7 @@
 
 		.textField-input-affix-icon {
 			@include icon.M;
-			color: var(--palettes-neutral-600);
+			color: var(--pr-t-color-input-icon);
 			pointer-events: none;
 		}
 
@@ -117,7 +117,7 @@
 			display: flex;
 			padding-left: var(--component-textField-padding);
 			align-items: center;
-			color: var(--component-textField-prefix-color);
+			color: var(--pr-t-color-input-text-suffix);
 			line-height: var(--component-textField-lineHeight);
 			font-size: var(--component-textField-fontSize);
 			border-top-left-radius: var(--commons-borderRadius-M);
@@ -134,7 +134,7 @@
 			display: flex;
 			padding-right: var(--component-textField-padding);
 			align-items: center;
-			color: var(--component-textField-prefix-color);
+			color: var(--pr-t-color-input-text-suffix);
 			line-height: var(--component-textField-lineHeight);
 			font-size: var(--component-textField-fontSize);
 			border-top-right-radius: var(--commons-borderRadius-M);

package/src/components/textField/states.scss

@@ -1,15 +1,14 @@
 @mixin invalid {
-	--component-textField-border: var(--palettes-error-400);
-	--component-textField-background: var(--palettes-error-50);
-	--component-textField-placeholder: var(--palettes-error-400);
+	--component-textField-border: var(--pr-t-color-input-border-critical);
+	--component-textField-background: var(--pr-t-color-input-background-critical);
+	--component-textField-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 
 	&:hover {
-		--component-textField-border: var(--palettes-error-600);
+		--component-textField-border: var(--pr-t-color-input-border-critical-hover);
 	}
 }
 
 @mixin disabled {
-	--component-textField-border: var(--palettes-neutral-300); // disabled token candidate
-	--component-textField-background: var(--commons-disabled-background);
-	--component-textField-color: var(--palettes-neutral-700); // disabled token candidate
+	--component-textField-background: var(--pr-t-color-input-background-disabled);
+	--component-textField-color: var(--pr-t-color-input-text-disabled);
 }