@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/src/components/checkboxField/index.scss

@@ -1,52 +1,60 @@
 @use 'exports' as *;
 
 .checkboxField {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
 	&.mod-S {
-		@include S;
+		@layer mods {
+			@include S;
+		}
 	}
 
 	&.mod-checklist {
-		@include checklist;
-
-		.checkboxField-input {
-			&:hover {
-				@include checklistHover;
-			}
-
-			&:active {
-				@include checklistActive;
-			}
-
-			&:disabled {
-				@include checklistDisabled;
-			}
-
-			&:checked {
-				@include checklistChecked;
+		@layer mods {
+			@include checklist;
+		}
 
+		@layer states {
+			.checkboxField-input {
 				&:hover {
-					@include checklistCheckedHover;
+					@include checklistHover;
 				}
 
 				&:active {
-					@include checklistCheckedActive;
+					@include checklistActive;
 				}
 
 				&:disabled {
-					@include checklistCheckedDisabled;
+					@include checklistDisabled;
+				}
+
+				&:checked {
+					@include checklistChecked;
+
+					&:hover {
+						@include checklistCheckedHover;
+					}
+
+					&:active {
+						@include checklistCheckedActive;
+					}
+
+					&:disabled {
+						@include checklistCheckedDisabled;
+					}
 				}
 			}
-		}
 
-		&:has(.checkboxField-input:focus-visible) {
-			.checkboxField-input {
-				@include checklistHover;
+			&:has(.checkboxField-input:focus-visible) {
+				.checkboxField-input {
+					@include checklistHover;
 
-				&:checked {
-					@include checklistCheckedHover;
+					&:checked {
+						@include checklistCheckedHover;
+					}
 				}
 			}
 		}
@@ -54,87 +62,89 @@
 }
 
 .checkboxField-input {
-	&[aria-checked='mixed'] {
-		@include checked;
-		@include mixed;
-	}
-
-	&:focus-visible {
-		@include focusVisible;
-	}
-
-	&:hover {
-		@include hover;
-
+	@layer states {
 		&[aria-checked='mixed'] {
-			@include checkedHover;
+			@include checked;
+			@include mixed;
 		}
-	}
 
-	&:active {
-		@include active;
-
-		&[aria-checked='mixed'] {
-			@include checkedActive;
+		&:focus-visible {
+			@include focusVisible;
 		}
-	}
 
-	&:disabled {
-		@include disabled;
+		&:hover {
+			@include hover;
 
-		&[aria-checked='mixed'] {
-			@include checkedDisabled;
+			&[aria-checked='mixed'] {
+				@include checkedHover;
+			}
 		}
-	}
 
-	&[aria-invalid='true'] {
-		@include invalid;
+		&:active {
+			@include active;
 
-		&[aria-checked='mixed'] {
-			@include checkedInvalid;
+			&[aria-checked='mixed'] {
+				@include checkedActive;
+			}
 		}
 
-		&:hover {
-			@include invalidHover;
+		&:disabled {
+			@include disabled;
 
 			&[aria-checked='mixed'] {
-				@include checkedInvalidHover;
+				@include checkedDisabled;
 			}
 		}
 
-		&:active {
-			@include invalidActive;
+		&[aria-invalid='true'] {
+			@include invalid;
 
 			&[aria-checked='mixed'] {
-				@include checkedInvalidActive;
+				@include checkedInvalid;
 			}
-		}
-	}
 
-	&:checked {
-		@include checked;
+			&:hover {
+				@include invalidHover;
 
-		&:hover {
-			@include checkedHover;
-		}
+				&[aria-checked='mixed'] {
+					@include checkedInvalidHover;
+				}
+			}
 
-		&:active {
-			@include checkedActive;
-		}
+			&:active {
+				@include invalidActive;
 
-		&:disabled {
-			@include checkedDisabled;
+				&[aria-checked='mixed'] {
+					@include checkedInvalidActive;
+				}
+			}
 		}
 
-		&[aria-invalid='true'] {
-			@include checkedInvalid;
+		&:checked {
+			@include checked;
 
 			&:hover {
-				@include checkedInvalidHover;
+				@include checkedHover;
 			}
 
 			&:active {
-				@include checkedInvalidActive;
+				@include checkedActive;
+			}
+
+			&:disabled {
+				@include checkedDisabled;
+			}
+
+			&[aria-invalid='true'] {
+				@include checkedInvalid;
+
+				&:hover {
+					@include checkedInvalidHover;
+				}
+
+				&:active {
+					@include checkedInvalidActive;
+				}
 			}
 		}
 	}

package/src/components/chip/index.scss

@@ -1,28 +1,34 @@
 @use 'exports' as *;
 
 .chip {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	// .palette-primary is deprecated
-	&.palette-product,
-	&.palette-primary {
-		@include product;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-unkillable {
-		@include unkillable;
-	}
+		// .palette-primary is deprecated
+		&.palette-product,
+		&.palette-primary {
+			@include product;
+		}
+
+		&.mod-unkillable {
+			@include unkillable;
+		}
 
-	&.mod-clickable {
-		@include clickable;
+		&.mod-clickable {
+			@include clickable;
+		}
 	}
 
-	&.is-disabled {
-		@include disabled;
+	@layer states {
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }

package/src/components/clear/index.scss

@@ -1,30 +1,36 @@
 @use 'exports' as *;
 
 .clear {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	// .palette-primary is deprecated
-	&.palette-product:not([disabled]),
-	&.palette-primary:not([disabled]) {
-		@include product;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 
-	&.mod-inverted:not([disabled]) {
-		@include inverted;
+	@layer states {
+		// .palette-primary is deprecated
+		&.palette-product:not([disabled]),
+		&.palette-primary:not([disabled]) {
+			@include product;
+		}
+
+		&.mod-inverted:not([disabled]) {
+			@include inverted;
 
-		&.palette-product:not([disabled]) {
-			@include invertedProduct;
+			&.palette-product:not([disabled]) {
+				@include invertedProduct;
+			}
 		}
-	}
 
-	&[disabled] {
-		@include disabled;
+		&[disabled] {
+			@include disabled;
 
-		cursor: default;
+			cursor: default;
+		}
 	}
 }

package/src/components/code/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .code {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-block {
-		@include block;
+	@layer mods {
+		&.mod-block {
+			@include block;
+		}
 	}
 }

package/src/components/collapse/index.scss

@@ -1,14 +1,18 @@
 @use 'exports' as *;
 
 .collapse {
-	@include vars;
-	@include component;
-
-	&:not(.is-open, .open, [open]) {
-		@include close;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:is(.is-open, .open, [open]) {
-		@include open;
+	@layer states {
+		&:not(.is-open, .open, [open]) {
+			@include close;
+		}
+
+		&:is(.is-open, .open, [open]) {
+			@include open;
+		}
 	}
 }

package/src/components/comment/index.scss

@@ -3,38 +3,48 @@
 @use 'exports' as *;
 
 .comment {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-noAvatar {
-		@include noAvatar;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	@include container.max(25rem, $name: 'comment') {
-		@include narrow;
+		&.mod-noAvatar {
+			@include noAvatar;
+		}
+
+		@include container.max(25rem, $name: 'comment') {
+			@include narrow;
+		}
 	}
 }
 
 .commentWrapper {
-	@include vars;
-
-	&.mod-S {
-		@include wrapperS;
+	@layer components {
+		@include vars;
 	}
 
-	&.mod-compact {
-		@include wrapperCompact;
-	}
+	@layer mods {
+		&.mod-S {
+			@include wrapperS;
+		}
+
+		&.mod-compact {
+			@include wrapperCompact;
+		}
 
-	&.mod-chatAnswer {
-		@include chatAnswer;
+		&.mod-chatAnswer {
+			@include chatAnswer;
+		}
 	}
 }
 
 .commentWrapperChat {
-	@include chat;
+	@layer components {
+		@include chat;
+	}
 }

package/src/components/container/index.scss

@@ -2,38 +2,42 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .container {
-	@include vars;
-	@include component;
-
-	&.mod-center {
-		@include center;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-center {
+			@include center;
+		}
 
-	&.mod-maxM {
-		@include maxM;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-maxL {
-		@include maxL;
-	}
+		&.mod-maxM {
+			@include maxM;
+		}
 
-	&.mod-maxXL {
-		@include maxXL;
-	}
+		&.mod-maxL {
+			@include maxL;
+		}
 
-	&.mod-maxXXL {
-		@include maxXXL;
-	}
+		&.mod-maxXL {
+			@include maxXL;
+		}
 
-	&.mod-maxXXXL {
-		@include maxXXXL;
-	}
+		&.mod-maxXXL {
+			@include maxXXL;
+		}
+
+		&.mod-maxXXXL {
+			@include maxXXXL;
+		}
 
-	&.mod-overflow {
-		@include overflow;
+		&.mod-overflow {
+			@include overflow;
+		}
 	}
 }

package/src/components/contentSection/index.scss

@@ -1,6 +1,8 @@
 @use 'exports' as *;
 
 .contentSection {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }

package/src/components/dataTable/component.scss

@@ -65,6 +65,8 @@
 			box-shadow: var(--components-dataTable-cell-shadow);
 			background-color: var(--components-dataTable-cell-background);
 			text-align: var(--components-dataTable-cell-textAlign);
+			transition-property: background-color;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);