@lucca-front/scss 20.3.0-rc.5 → 20.3.0

package/src/components/tableStickedDeprecated/index.scss

@@ -3,68 +3,74 @@
 @use 'exports' as *;
 
 .table {
-	@include vars;
-
-	&.mod-stickyColumn {
-		@include stickyColumn;
+	@layer components {
+		@include vars;
 	}
 
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			&.mod-stickyColumn\@mediaMin#{$breakpoint} {
-				@include stickyColumn;
+	@layer mods {
+		&.mod-stickyColumn {
+			@include stickyColumn;
+		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			@include media.min($breakpoint) {
+				&.mod-stickyColumn\@mediaMin#{$breakpoint} {
+					@include stickyColumn;
+				}
 			}
 		}
-	}
 
-	&.mod-stickyColumn-shadow {
-		@include shadow;
-	}
+		&.mod-stickyColumn-shadow {
+			@include shadow;
+		}
 
-	&[class*='mod-stickyColumn'] {
-		.table-head-row-cell,
-		.table-body-row-cell,
-		.table-foot-row-cell {
-			@for $i from 0 through 50 {
-				&.mod-stickyColumn-leftOffset#{$i} {
-					@include leftOffset($i);
-				}
+		&[class*='mod-stickyColumn'] {
+			.table-head-row-cell,
+			.table-body-row-cell,
+			.table-foot-row-cell {
+				@for $i from 0 through 50 {
+					&.mod-stickyColumn-leftOffset#{$i} {
+						@include leftOffset($i);
+					}
 
-				&.mod-stickyColumn-rightOffset#{$i} {
-					@include rightOffset($i);
+					&.mod-stickyColumn-rightOffset#{$i} {
+						@include rightOffset($i);
+					}
 				}
 			}
 		}
-	}
 
-	[class*='sticky'][class*='shadow-wrapper'] {
-		@include wrapper;
-	}
+		[class*='sticky'][class*='shadow-wrapper'] {
+			@include wrapper;
+		}
 
-	&[class*='mod-stickyHeader'] {
-		@include stickyHeaderCommon;
+		&[class*='mod-stickyHeader'] {
+			@include stickyHeaderCommon;
 
-		@each $breakpoint, $value in config.$breakpoints {
-			@include media.max($breakpoint) {
-				&.mod-stickyColumn\@mediaMin#{$breakpoint} {
-					@include stickyColumnBreakpoint;
+			@each $breakpoint, $value in config.$breakpoints {
+				@include media.max($breakpoint) {
+					&.mod-stickyColumn\@mediaMin#{$breakpoint} {
+						@include stickyColumnBreakpoint;
+					}
 				}
 			}
 		}
-	}
 
-	&.mod-stickyHeader {
-		@include stickyHeader;
-	}
+		&.mod-stickyHeader {
+			@include stickyHeader;
+		}
 
-	&.mod-stickyHeader-withBanner {
-		@include stickyHeaderBanner;
+		&.mod-stickyHeader-withBanner {
+			@include stickyHeaderBanner;
+		}
 	}
 }
 
 .table-body-row,
 .table-foot-row {
-	&.mod-stickyHeader-shadow {
-		@include stickyHeaderShadow;
+	@layer mods {
+		&.mod-stickyHeader-shadow {
+			@include stickyHeaderShadow;
+		}
 	}
 }

package/src/components/tag/component.scss

@@ -20,7 +20,7 @@
 	font-size: var(--components-tag-fontSize); // Deprecated
 	line-height: var(--components-tag-lineHeight); // Deprecated
 	max-inline-size: 100%;
-	position: relative;
+	position: var(--components-tag-position);
 
 	&,
 	&:is(a, button) {

package/src/components/tag/index.scss

@@ -1,36 +1,40 @@
 @use 'exports' as *;
 
 .tag {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-L {
-		@include L;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	// .mod-clickable is deprecated
-	&:is(a, button),
-	&.mod-clickable {
-		@include clickable;
-	}
+		&.mod-L {
+			@include L;
+		}
 
-	&.mod-outlined {
-		@include outlined;
-	}
+		// .mod-clickable is deprecated
+		&:is(a, button),
+		&.mod-clickable {
+			@include clickable;
+		}
 
-	&.mod-disabled {
-		@include disabled;
-	}
+		&.mod-outlined {
+			@include outlined;
+		}
 
-	&:has(.tag-content:focus-visible) {
-		@include focusVisible;
-	}
+		&.mod-AI {
+			@include AI;
+		}
+
+		&.mod-disabled {
+			@include disabled;
+		}
 
-	&.mod-AI {
-		@include AI;
+		&:has(.tag-content:focus-visible) {
+			@include focusVisible;
+		}
 	}
 }

package/src/components/tag/mods.scss

@@ -61,6 +61,7 @@
 
 	&:not(:disabled) {
 		--components-tag-boxShadow: none;
+		--components-tag-position: relative;
 
 		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
 

package/src/components/tag/vars.scss

@@ -7,6 +7,7 @@
 	--components-tag-decoration: none;
 	--components-tag-cursor: inherit;
 	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
+	--components-tag-position: static;
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/index.scss

@@ -1,37 +1,41 @@
 @use 'exports' as *;
 
 .textField {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-XS {
-		@include XS;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-valueAlignRight {
-		@include valueAlignRight;
-	}
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.is-invalid,
-	&:has(.textField-input-value[aria-invalid='true']) {
-		@include invalid;
-	}
+		&.mod-valueAlignRight {
+			@include valueAlignRight;
+		}
 
-	&.is-disabled,
-	&:has(.textField-input-value:disabled) {
-		@include disabled;
-	}
+		&.is-invalid,
+		&:has(.textField-input-value[aria-invalid='true']) {
+			@include invalid;
+		}
 
-	&.mod-autoResize {
-		@include autoResize;
-	}
+		&.is-disabled,
+		&:has(.textField-input-value:disabled) {
+			@include disabled;
+		}
+
+		&.mod-autoResize {
+			@include autoResize;
+		}
 
-	&.mod-filterPill {
-		@include filterPill;
+		&.mod-filterPill {
+			@include filterPill;
+		}
 	}
 
 	&.is-lineThrough {

package/src/components/textField/mods.scss

@@ -77,7 +77,7 @@
 		visibility: hidden;
 
 		&::after {
-			/* stylelint-disable-next-line no-irregular-whitespace */
+			// stylelint-disable-next-line no-irregular-whitespace
 			content: ' ' / '';
 		}
 	}

package/src/components/textFlow/index.scss

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