@lucca-front/scss 22.1.0-rc.1 → 22.1.0-rc.2

package/src/components/tableSortable/vars.scss

@@ -7,4 +7,6 @@
 	--components-sortable-fontSize: var(--pr-t-font-body-M-fontSize);
 	--components-sortable-lineHeight: var(--pr-t-font-body-M-lineHeight);
 	--components-sortable-arrowsOffset: var(--pr-t-spacings-50);
+	--components-sortable-minInlineSize: auto;
+	--components-sortable-maxInlineSize: none;
 }

package/src/components/tag/component.scss

@@ -5,7 +5,7 @@
 	background-color: var(--components-tag-background);
 	border-radius: var(--pr-t-border-radius-small);
 	padding-block: 0;
-	padding-inline: var(--pr-t-spacings-50);
+	padding-inline: var(--components-tag-padding-inline);
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
 	gap: var(--components-tag-gap);

package/src/components/tag/index.scss

@@ -40,6 +40,13 @@
 
 		&:has(.lucca-icon) {
 			@include withIcon;
+
+			// mask condition is necessary for hiddenLabel
+			&:not(:has(.tag-content)),
+			&:has(.tag-content:empty),
+			&:has(.tag-content.pr-u-mask) {
+				@include onlyIcon;
+			}
 		}
 
 		&:has(.tag-content:empty) {

package/src/components/tag/mods.scss

@@ -1,5 +1,4 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
-@use '@lucca-front/scss/src/components/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin clickable {
@@ -70,16 +69,16 @@
 			$pseudo: '::after',
 		);
 
-		@include icon.whenRawIcon {
+		.lucca-icon {
 			@include icons.AI;
 		}
-
-		@include icon.whenIconComponent {
-			@include icon.AI;
-		}
 	}
 }
 
 @mixin withIcon {
 	--components-tag-before-content: ' ';
 }
+
+@mixin onlyIcon {
+	--components-tag-padding-inline: var(--pr-t-spacings-25);
+}

package/src/components/tag/vars.scss

@@ -10,6 +10,7 @@
 	--components-tag-position: static;
 	--components-tag-before-content: none;
 	--components-tag-display: inline-flex;
+	--components-tag-padding-inline: var(--pr-t-spacings-50);
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @use 'exports' as *;
 
 .textField {
@@ -23,6 +25,12 @@
 			@include XS;
 		}
 
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
+		}
+
 		&.mod-valueAlignRight {
 			@include valueAlignRight;
 		}

package/src/components/textField/mods.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/icons/src/icon/exports' as icon;
@@ -64,6 +65,10 @@
 	}
 }
 
+@mixin width($value) {
+	--component-textField-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin valueAlignRight {
 	.textField-input-value {
 		text-align: end;

package/src/components/tooltip/component.scss

@@ -13,13 +13,25 @@
 	margin: var(--components-tooltip-margin);
 	text-align: center;
 	inline-size: fit-content;
-	animation-name: scaleIn;
+	animation-name: scaleIn, tooltipPointerEventsIn;
+	animation-delay: var(--components-tooltip-animationDelay);
 	animation-duration: var(--commons-animations-durations-fast);
 	animation-iteration-count: 1;
+	animation-fill-mode: backwards;
 	overflow-wrap: break-word;
 
 	@include keyframe.scaleIn;
 
+	@keyframes tooltipPointerEventsIn {
+		0% {
+			pointer-events: none;
+		}
+
+		1% {
+			pointer-events: auto;
+		}
+	}
+
 	&:empty {
 		display: none;
 	}

package/src/components/tooltip/vars.scss

@@ -4,4 +4,5 @@
 	--components-tooltip-max-width: 15rem;
 	--components-tooltip-transformOrigin: center;
 	--components-tooltip-margin: 0;
+	--components-tooltip-animationDelay: 300ms;
 }

package/src/components/userPopover/component.scss

@@ -42,15 +42,17 @@
 		}
 
 		.userPopover-details-info-name-linkOptional {
-			color: currentColor;
-			text-decoration: underline;
 			text-decoration-thickness: 0.75px;
 			text-underline-offset: 3px;
 
 			&:hover {
-				color: currentColor;
 				text-decoration-thickness: 1.5px;
 			}
+
+			&.link {
+				--components-link-color: var(--pr-t-color-text-highlight);
+				--components-link-color-hover: var(--pr-t-color-text-highlight);
+			}
 		}
 
 		.userPopover-details-info-detail {
@@ -62,19 +64,6 @@
 			display: flex;
 			align-items: flex-start;
 			gap: var(--pr-t-spacings-50);
-			color: currentColor;
-			text-decoration: none;
-
-			&:is(a, button) {
-				&:hover,
-				&:focus {
-					color: currentColor;
-
-					.userPopover-details-info-detail-workplace-state {
-						text-decoration: underline;
-					}
-				}
-			}
 		}
 	}
 

package/src/components/icon/component.scss

@@ -1,8 +0,0 @@
-@use '@lucca-front/scss/src/commons/utils/namespace';
-
-@mixin component($atRoot: namespace.$defaultAtRoot) {
-	block-size: var(--components-icon-size, var(--icon-size, var(--components-icon-sizeDefault)));
-	inline-size: var(--components-icon-size, var(--icon-size, var(--components-icon-sizeDefault)));
-	color: var(--components-icon-color);
-	fill: currentColor;
-}

package/src/components/icon/index.scss

@@ -1,67 +0,0 @@
-@use 'exports' as *;
-
-// where is for specificity here
-:where(lu-icon, pr-icon) .lucca-icon {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-XXS {
-			@include XXS;
-		}
-
-		&.mod-XS {
-			@include XS;
-		}
-
-		&.mod-S {
-			@include S;
-		}
-
-		&.mod-M {
-			@include M;
-		}
-
-		&.mod-L {
-			@include L;
-		}
-
-		&.mod-XL {
-			@include XL;
-		}
-
-		&.mod-XXL {
-			@include XXL;
-		}
-
-		&.icon-color-product {
-			@include colorProduct;
-		}
-
-		&.icon-color-error {
-			@include colorError;
-		}
-
-		&.icon-color-warning {
-			@include colorWarning;
-		}
-
-		&.icon-color-success {
-			@include colorSuccess;
-		}
-
-		&.icon-color-light {
-			@include colorLight;
-		}
-
-		&.icon-color-placeholder {
-			@include colorPlaceholder;
-		}
-
-		&.mod-AI {
-			@include AI;
-		}
-	}
-}

package/src/components/icon/mods.scss

@@ -1,67 +0,0 @@
-@mixin XXS {
-	--components-icon-size: 0.75rem;
-}
-
-@mixin XS {
-	--components-icon-size: 1rem;
-}
-
-@mixin S {
-	--components-icon-size: 1.25rem;
-}
-
-@mixin M {
-	--components-icon-size: 1.5rem;
-}
-
-@mixin L {
-	--components-icon-size: 1.75rem;
-}
-
-@mixin XL {
-	--components-icon-size: 2rem;
-}
-
-@mixin XXL {
-	--components-icon-size: 2.5rem;
-}
-
-@mixin colorProduct {
-	--components-icon-color: var(--palettes-product-700);
-}
-
-@mixin colorError {
-	--components-icon-color: var(--palettes-error-700);
-}
-
-@mixin colorWarning {
-	--components-icon-color: var(--palettes-warning-700);
-}
-
-@mixin colorSuccess {
-	--components-icon-color: var(--palettes-success-700);
-}
-
-@mixin colorLight {
-	--components-icon-color: var(--palettes-neutral-600);
-}
-
-@mixin colorPlaceholder {
-	--components-icon-color: var(--palettes-neutral-400);
-}
-
-@mixin AI {
-	fill: url('#lu-icon-ai-gradient');
-}
-
-@mixin whenIconComponent {
-	:where(lu-icon, pr-icon) .lucca-icon {
-		@content;
-	}
-}
-
-@mixin whenRawIcon {
-	.lucca-icon:where(:not(:where(lu-icon, pr-icon) .lucca-icon)) {
-		@content;
-	}
-}

package/src/components/icon/vars.scss

@@ -1,4 +0,0 @@
-@mixin vars {
-	--components-icon-color: inherit;
-	--components-icon-sizeDefault: 1.5rem;
-}