@lucca-front/scss 20.3.0-rc.10 → 20.3.0-rc.11

package/src/components/calendar/index.scss

@@ -2,75 +2,87 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .calendarWrapper {
-	@include wrapperVars;
-
-	&.mod-daysOffHidden {
-		@include daysOffHidden;
+	@layer components {
+		@include wrapperVars;
 	}
 
-	&.mod-daysOverflowingHidden {
-		@include daysOverflowingHidden;
+	@layer mods {
+		&.mod-daysOffHidden {
+			@include daysOffHidden;
+		}
+
+		&.mod-daysOverflowingHidden {
+			@include daysOverflowingHidden;
+		}
 	}
 }
 
 .calendar {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	// if rows have three columns (display for months and years)
-	&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
-		@include third;
+	@layer mods {
+		// if rows have three columns (display for months and years)
+		&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
+			@include third;
+		}
 	}
 }
 
 .calendarShortcuts {
-	@include media.max('S') {
-		display: none;
+	@layer components {
+		@include media.max('S') {
+			display: none;
+		}
 	}
 }
 
 .calendar-table-body-row-cell {
-	&.is-daysOff {
-		@include daysOff;
-	}
-
-	&.is-overflow {
-		@include overflow;
-	}
+	@layer mods {
+		&.is-daysOff {
+			@include daysOff;
+		}
 
-	&.is-current {
-		@include current;
-	}
+		&.is-overflow {
+			@include overflow;
+		}
 
-	&.is-selected,
-	&.is-selectionInProgress {
-		&:not(.is-overflow) {
-			@include selected;
+		&.is-current {
+			@include current;
 		}
-	}
 
-	&.is-singleDayInProgress,
-	&.is-start {
-		@include start;
-	}
+		&.is-selected,
+		&.is-selectionInProgress {
+			&:not(.is-overflow) {
+				@include selected;
+			}
+		}
 
-	&.is-end {
-		@include end;
-	}
+		&.is-singleDayInProgress,
+		&.is-start {
+			@include start;
+		}
 
-	&.is-startInProgress {
-		&:not(.is-endInProgress) {
-			@include startInProgress;
+		&.is-end {
+			@include end;
 		}
 
-		&.is-endInProgress {
-			@include startEndInProgress;
+		&.is-startInProgress {
+			&:not(.is-endInProgress) {
+				@include startInProgress;
+			}
+
+			&.is-endInProgress {
+				@include startEndInProgress;
+			}
 		}
-	}
 
-	&.is-endInProgress {
-		&:not(.is-startInProgress) {
-			@include endInProgress;
+		&.is-endInProgress {
+			&:not(.is-startInProgress) {
+				@include endInProgress;
+			}
 		}
 	}
 }

package/src/components/callout/index.scss

@@ -1,11 +1,15 @@
 @use 'exports' as *;
 
 .callout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 
 	&.mod-AI {

package/src/components/calloutDisclosure/index.scss

@@ -1,18 +1,22 @@
 @use 'exports' as *;
 
 .calloutDisclosure {
-	@include vars;
-	@include component;
-
-	&[open] {
-		@include open;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&[open] {
+			@include open;
+		}
+
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-iconless {
-		@include iconless;
+		&.mod-iconless {
+			@include iconless;
+		}
 	}
 }

package/src/components/calloutFeedbackList/index.scss

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

package/src/components/calloutPopover/index.scss

@@ -1,24 +1,30 @@
 @use 'exports' as *;
 
 .calloutPopover {
-	@include component;
-	@include vars;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include component;
+		@include vars;
 	}
 
-	&.mod-XS {
-		@include XS;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-XS {
+			@include XS;
+		}
 	}
 }
 
 .calloutPopover-overlay {
-	&.mod-S {
-		@include overlayS;
-	}
+	@layer mods {
+		&.mod-S {
+			@include overlayS;
+		}
 
-	&.mod-iconless {
-		@include overlayIconless;
+		&.mod-iconless {
+			@include overlayIconless;
+		}
 	}
 }

package/src/components/card/index.scss

@@ -1,36 +1,40 @@
 @use 'exports' as *;
 
 .card {
-	@include vars;
-	@include component;
-
-	// .mod-grey is deprecated
-	&.mod-neutral,
-	&.mod-grey {
-		@include neutral;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-clickable {
-		@include clickable;
-	}
+	@layer mods {
+		// .mod-grey is deprecated
+		&.mod-neutral,
+		&.mod-grey {
+			@include neutral;
+		}
 
-	&.mod-elevated {
-		@include elevated;
-	}
+		&.mod-clickable {
+			@include clickable;
+		}
 
-	&.mod-action {
-		@include action;
-	}
+		&.mod-elevated {
+			@include elevated;
+		}
 
-	&.mod-nested {
-		@include nested;
-	}
+		&.mod-action {
+			@include action;
+		}
 
-	&.mod-expand {
-		@include expand;
-	}
+		&.mod-nested {
+			@include nested;
+		}
+
+		&.mod-expand {
+			@include expand;
+		}
 
-	&:is(.is-disabled, .disabled) {
-		@include disabled;
+		&:is(.is-disabled, .disabled) {
+			@include disabled;
+		}
 	}
 }

package/src/components/checkbox/index.scss

@@ -1,48 +1,52 @@
 @use 'exports' as *;
 
 .checkbox {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-noLabel {
-		@include noLabel;
-	}
+	@layer mods {
+		&.mod-inline {
+			@include inline;
+		}
 
-	&:is(.is-required, .required) {
-		@include required;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&:is(.is-error, .error) {
-		@include state('error');
-	}
+		&.mod-noLabel {
+			@include noLabel;
+		}
 
-	&:is(.is-warning, .warning) {
-		@include state('warning');
-	}
+		&:is(.is-required, .required) {
+			@include required;
+		}
 
-	&:is(.is-success, .success) {
-		@include state('success');
-	}
+		&:is(.is-error, .error) {
+			@include state('error');
+		}
 
-	.checkbox-input {
-		&:is(.is-incomplete, .incomplete) {
-			@include incomplete;
+		&:is(.is-warning, .warning) {
+			@include state('warning');
 		}
 
-		&:is([disabled], [read-only]) {
-			@include disabled;
+		&:is(.is-success, .success) {
+			@include state('success');
 		}
 
-		&:is([aria-required]) {
-			@include required;
+		.checkbox-input {
+			&:is(.is-incomplete, .incomplete) {
+				@include incomplete;
+			}
+
+			&:is([disabled], [read-only]) {
+				@include disabled;
+			}
+
+			&:is([aria-required]) {
+				@include required;
+			}
 		}
 	}
 }

package/src/components/checkboxField/index.scss

@@ -1,52 +1,56 @@
 @use 'exports' as *;
 
 .checkboxField {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-checklist {
-		@include checklist;
-
-		.checkboxField-input {
-			&:hover {
-				@include checklistHover;
-			}
-
-			&:active {
-				@include checklistActive;
-			}
-
-			&:disabled {
-				@include checklistDisabled;
-			}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-			&:checked {
-				@include checklistChecked;
+		&.mod-checklist {
+			@include checklist;
 
+			.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 +58,89 @@
 }
 
 .checkboxField-input {
-	&[aria-checked='mixed'] {
-		@include checked;
-		@include mixed;
-	}
-
-	&:focus-visible {
-		@include focusVisible;
-	}
-
-	&:hover {
-		@include hover;
-
+	@layer mods {
 		&[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,32 @@
 @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-clickable {
-		@include clickable;
-	}
+		&.mod-unkillable {
+			@include unkillable;
+		}
+
+		&.mod-clickable {
+			@include clickable;
+		}
 
-	&.is-disabled {
-		@include disabled;
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }