@lucca-front/scss 20.2.0-rc.1 → 20.2.0-rc.3

package/src/components/comment/index.scss

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

package/src/components/container/index.scss

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

package/src/components/contentSection/index.scss

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

package/src/components/dataTable/index.scss

@@ -1,106 +1,90 @@
 @use 'exports' as *;
 
 .dataTableWrapper {
-	@layer components {
-		@include vars;
-	}
+	@include vars;
 
-	@layer mods {
-		&.mod-nested {
-			@include nested;
-		}
+	&.mod-nested {
+		@include nested;
 	}
 }
 
 .dataTable {
-	@layer components {
-		@include component;
-	}
+	@include component;
 
-	@layer mods {
-		&.mod-cellBorder {
-			@include cellBorder;
-		}
+	&.mod-cellBorder {
+		@include cellBorder;
+	}
 
-		&.mod-alignTop {
-			@include alignTop;
-		}
+	&.mod-alignTop {
+		@include alignTop;
+	}
 
-		&.mod-layoutFixed {
-			@include layoutFixed;
-		}
+	&.mod-layoutFixed {
+		@include layoutFixed;
+	}
 
-		&[class*='mod-layoutFixedAtMediaMin'] {
-			@include layoutFixedWithBreakpoint;
-		}
+	&[class*='mod-layoutFixedAtMediaMin'] {
+		@include layoutFixedWithBreakpoint;
+	}
 
-		// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
-		&[class*='mod-layoutFixed'] {
-			@include layoutFixedCells;
-		}
+	// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
+	&[class*='mod-layoutFixed'] {
+		@include layoutFixedCells;
 	}
 }
 
 :is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
-	@layer mods {
-		&.mod-group {
-			@include group;
-		}
+	&.mod-group {
+		@include group;
+	}
 
-		&.mod-selectable {
-			@include selectable;
-		}
+	&.mod-selectable {
+		@include selectable;
+	}
 
-		&.mod-draggable {
-			@include draggable;
-		}
+	&.mod-draggable {
+		@include draggable;
 	}
 }
 
 :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-	@layer mods {
-		&.mod-actions {
-			@include actions;
-		}
+	&.mod-actions {
+		@include actions;
+	}
 
-		&.mod-alignCenter {
-			@include alignCenter;
-		}
+	&.mod-alignCenter {
+		@include alignCenter;
+	}
 
-		&.mod-alignRight {
-			@include alignRight;
-		}
+	&.mod-alignRight {
+		@include alignRight;
+	}
 
-		&.mod-editable {
-			@include editable;
-		}
+	&.mod-editable {
+		@include editable;
+	}
 
-		&.mod-tree {
-			@include tree;
-		}
+	&.mod-tree {
+		@include tree;
 	}
 }
 
 .dataTable-body-row {
-	@layer states {
-		&.is-collapsed {
-			@include collapsed;
-		}
+	&.is-collapsed {
+		@include collapsed;
+	}
 
-		&:first-child {
-			&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
-				~ .dataTable-body-row {
-					@include collapsed;
-				}
+	&:first-child {
+		&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
+			~ .dataTable-body-row {
+				@include collapsed;
 			}
 		}
 	}
 }
 
 .dataTable-body-row-cell-expand-button {
-	@layer states {
-		&[aria-expanded='true'] {
-			@include expanded;
-		}
+	&[aria-expanded='true'] {
+		@include expanded;
 	}
 }

package/src/components/dataTable/mods.scss

@@ -38,9 +38,9 @@
 @mixin group {
 	@include buttonExpand;
 
-	--components-dataTable-cell-background: var(--palettes-neutral-25);
-
 	font: var(--pr-t-font-heading-4);
+
+	--components-dataTable-cell-background: var(--palettes-neutral-25);
 }
 
 @mixin selectable {

package/src/components/dataTableSticked/index.scss

@@ -3,49 +3,41 @@
 @use 'exports' as *;
 
 .dataTableWrapper {
-	@layer components {
-		@include vars;
-	}
+	@include vars;
 
-	@layer mods {
-		&:has(.dataTable.mod-stickyHeader) {
-			@include stickyHeader;
-		}
+	&:has(.dataTable.mod-stickyHeader) {
+		@include stickyHeader;
+	}
 
-		&:has(.dataTable.mod-columnsOverflow) {
-			@include columnsOverflow;
-		}
+	&:has(.dataTable.mod-columnsOverflow) {
+		@include columnsOverflow;
+	}
 
-		&:has(.dataTable.mod-rowsOverflow) {
-			@include rowsOverflow;
-		}
+	&:has(.dataTable.is-firstColumnVisible) {
+		@include firstColumnVisible;
 	}
 
-	@layer states {
-		&:has(.dataTable.is-firstColumnVisible) {
-			@include firstColumnVisible;
-		}
+	&:has(.dataTable.is-lastColumnVisible) {
+		@include lastColumnVisible;
+	}
 
-		&:has(.dataTable.is-lastColumnVisible) {
-			@include lastColumnVisible;
-		}
+	&:has(.dataTable.mod-rowsOverflow) {
+		@include rowsOverflow;
+	}
 
-		&:has(.dataTable.is-firstRowVisible) {
-			@include firstRowVisible;
-		}
+	&:has(.dataTable.is-firstRowVisible) {
+		@include firstRowVisible;
+	}
 
-		&:has(.dataTable.is-lastRowVisible) {
-			@include lastRowVisible;
-		}
+	&:has(.dataTable.is-lastRowVisible) {
+		@include lastRowVisible;
 	}
 
-	@layer mods {
-		&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
-			@include stickyColumn;
+	&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
+		@include stickyColumn;
 
-			&:has(.dataTable.mod-cellBorder) {
-				@include stickyColumnBorder;
-			}
+		&:has(.dataTable.mod-cellBorder) {
+			@include stickyColumnBorder;
 		}
 	}
 }

package/src/components/dateField/index.scss

@@ -1,39 +1,35 @@
 @use 'exports' as *;
 
 .dateField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-filterPill {
-			@include filterPill;
-		}
+	&.mod-filterPill {
+		@include filterPill;
+	}
 
-		&:not(.mod-auto, .mod-filterPill) {
-			&.mod-day {
-				@include day;
+	&:not(.mod-auto, .mod-filterPill) {
+		&.mod-day {
+			@include day;
 
-				.form-field.mod-S & {
-					@include dayS;
-				}
+			.form-field.mod-S & {
+				@include dayS;
 			}
+		}
 
-			&.mod-month {
-				@include month;
+		&.mod-month {
+			@include month;
 
-				.form-field.mod-S & {
-					@include monthS;
-				}
+			.form-field.mod-S & {
+				@include monthS;
 			}
+		}
 
-			&.mod-year {
-				@include year;
+		&.mod-year {
+			@include year;
 
-				.form-field.mod-S & {
-					@include yearS;
-				}
+			.form-field.mod-S & {
+				@include yearS;
 			}
 		}
 	}

package/src/components/dateRangeField/index.scss

@@ -2,47 +2,43 @@
 @use 'exports' as *;
 
 .dateRangeField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		.form-field.mod-S & {
-			@include S;
-		}
+	.form-field.mod-S & {
+		@include S;
+	}
 
-		&.mod-filterPill {
-			@include filterPill;
+	&.mod-filterPill {
+		@include filterPill;
 
-			@include media.max('XS') {
-				@include filterPillCompact;
-			}
+		@include media.max('XS') {
+			@include filterPillCompact;
 		}
+	}
 
-		&:not(.mod-auto, .mod-filterPill) {
-			&.mod-day {
-				@include day;
+	&:not(.mod-auto, .mod-filterPill) {
+		&.mod-day {
+			@include day;
 
-				.form-field.mod-S & {
-					@include dayS;
-				}
+			.form-field.mod-S & {
+				@include dayS;
 			}
+		}
 
-			&.mod-month {
-				@include month;
+		&.mod-month {
+			@include month;
 
-				.form-field.mod-S & {
-					@include monthS;
-				}
+			.form-field.mod-S & {
+				@include monthS;
 			}
+		}
 
-			&.mod-year {
-				@include year;
+		&.mod-year {
+			@include year;
 
-				.form-field.mod-S & {
-					@include yearS;
-				}
+			.form-field.mod-S & {
+				@include yearS;
 			}
 		}
 	}

package/src/components/dialog/index.scss

@@ -3,54 +3,50 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-XS {
-			@include XS;
-		}
+	@include vars;
+	@include component;
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-fitContent {
-			@include fitContent;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-maxContent {
-			@include maxContent;
-		}
+	&.mod-fitContent {
+		@include fitContent;
+	}
 
-		&.mod-L {
-			@include L;
-		}
+	&.mod-maxContent {
+		@include maxContent;
+	}
 
-		&.mod-XL {
-			@include XL;
-		}
+	&.mod-L {
+		@include L;
+	}
 
-		&.mod-neutralBackground {
-			@include neutralBackground;
-		}
+	&.mod-XL {
+		@include XL;
+	}
 
-		&:where(.mod-drawer) {
-			@include drawer;
+	&.mod-neutralBackground {
+		@include neutralBackground;
+	}
 
-			&:where(.mod-fromBottom) {
-				@include fromBottom;
-			}
+	&:where(.mod-drawer) {
+		@include drawer;
 
-			@include media.max('XXS') {
-				@include fromBottom;
-			}
+		&:where(.mod-fromBottom) {
+			@include fromBottom;
 		}
 
-		&.mod-fullScreen {
-			@include fullScreen;
+		@include media.max('XXS') {
+			@include fromBottom;
 		}
 	}
+
+	&.mod-fullScreen {
+		@include fullScreen;
+	}
 }

package/src/components/divider/index.scss

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

package/src/components/dropdown/index.scss

@@ -3,23 +3,17 @@
 // .lu-dropdown-content is deprecated
 .dropdown,
 .lu-dropdown-content.lu-popover-content {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	@layer states {
-		&.is-disabled {
-			@include disabled;
-		}
+	&.is-disabled {
+		@include disabled;
 	}
 
-	@layer mods {
-		&.mod-critical, &.mod-delete {
-			@include critical;
-		}
+	&.mod-critical, &.mod-delete {
+		@include critical;
 	}
 }

package/src/components/emptyState/component.scss

@@ -36,6 +36,9 @@
 		.emptyState-content-icon {
 			--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));
 			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));
+
+			display: inline-flex;
+			margin-block-end: var(--pr-t-spacings-200);
 		}
 
 		.emptyState-content-text {