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

package/src/components/tableFixedDeprecated/index.scss

@@ -3,23 +3,27 @@
 @use 'exports' as *;
 
 .table {
-	&.mod-layoutFixed {
-		@include layoutFixed;
+	@layer mods {
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 	}
 }
 
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
-	@for $i from 2 through 20 {
-		&.mod-layoutFixed-#{$i} {
-			@include layoutFixedCell($i);
-		}
+	@layer mods {
+		@for $i from 2 through 20 {
+			&.mod-layoutFixed-#{$i} {
+				@include layoutFixedCell($i);
+			}
 
-		@each $breakpoint, $value in config.$breakpoints {
-			@include media.min($breakpoint) {
-				&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
-					@include layoutFixedCell($i);
+			@each $breakpoint, $value in config.$breakpoints {
+				@include media.min($breakpoint) {
+					&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
+						@include layoutFixedCell($i);
+					}
 				}
 			}
 		}

package/src/components/tableOfContent/index.scss

@@ -1,42 +1,46 @@
 @use 'exports' as *;
 
 .tableOfContent {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .tableOfContent-list-item-action {
-	&:not(.disabled, .is-disabled, [disabled]) {
-		&:is(:hover) {
-			@include hover;
-		}
-
-		&:is(:focus) {
-			@include focus;
-		}
-
-		&:is(:active) {
-			@include active;
-		}
-
-		&.is-active {
-			@include isActive;
-
+	@layer states {
+		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {
-				@include isActiveHover;
+				@include hover;
 			}
 
 			&:is(:focus) {
-				@include isActiveFocus;
+				@include focus;
 			}
 
 			&:is(:active) {
-				@include isActiveActive;
+				@include active;
+			}
+
+			&.is-active {
+				@include isActive;
+
+				&:is(:hover) {
+					@include isActiveHover;
+				}
+
+				&:is(:focus) {
+					@include isActiveFocus;
+				}
+
+				&:is(:active) {
+					@include isActiveActive;
+				}
 			}
 		}
-	}
 
-	&:is(.disabled, .is-disabled, [disabled]) {
-		@include disabled;
+		&:is(.disabled, .is-disabled, [disabled]) {
+			@include disabled;
+		}
 	}
 }

package/src/components/tableSortable/index.scss

@@ -1,34 +1,40 @@
 @use 'exports' as *;
 
 .tableSortable.button {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .table-head-row-cell,
 .dataTable-head-row-cell,
 .indexTable-head-row-cell {
-	&.mod-alignRight {
-		.tableSortable {
-			@include sortAlignRight;
+	@layer mods {
+		&.mod-alignRight {
+			.tableSortable {
+				@include sortAlignRight;
+			}
 		}
-	}
 
-	&.mod-alignCenter {
-		.tableSortable {
-			@include sortAlignCenter;
+		&.mod-alignCenter {
+			.tableSortable {
+				@include sortAlignCenter;
+			}
 		}
 	}
 
-	&[aria-sort='ascending'] {
-		.tableSortable{
-			@include sortAscending;
+	@layer states {
+		&[aria-sort='ascending'] {
+			.tableSortable{
+				@include sortAscending;
+			}
 		}
-	}
 
-	&[aria-sort='descending'] {
-		.tableSortable {
-			@include sortDescending;
+		&[aria-sort='descending'] {
+			.tableSortable {
+				@include sortDescending;
+			}
 		}
 	}
 }

package/src/components/tableSticked/index.scss

@@ -3,39 +3,43 @@
 @use 'exports' as *;
 
 .table {
-	@include vars;
-
-	// For both mod-stickyColumn + responsive variant
-	&[class*='mod-stickyColumn'] {
-		@include stickyColumn;
+	@layer components {
+		@include vars;
 	}
 
-	&.mod-stickyColumn {
-		@include stickyColumnOffset;
-	}
+	@layer mods {
+		// For both mod-stickyColumn + responsive variant
+		&[class*='mod-stickyColumn'] {
+			@include stickyColumn;
+		}
 
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			&.mod-stickyColumnAtMediaMin#{$breakpoint} {
-				@include stickyColumnOffset;
+		&.mod-stickyColumn {
+			@include stickyColumnOffset;
+		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			@include media.min($breakpoint) {
+				&.mod-stickyColumnAtMediaMin#{$breakpoint} {
+					@include stickyColumnOffset;
+				}
 			}
 		}
-	}
 
-	// For both stickyHeader + -withBanner variant
-	&[class*='mod-stickyHeader'] {
-		@include stickyHeaderCommon;
+		// For both stickyHeader + -withBanner variant
+		&[class*='mod-stickyHeader'] {
+			@include stickyHeaderCommon;
 
-		.mod-stickyHeader-shadow {
-			@include stickyHeaderShadow;
+			.mod-stickyHeader-shadow {
+				@include stickyHeaderShadow;
+			}
 		}
-	}
 
-	&.mod-stickyHeader {
-		@include stickyHeader;
-	}
+		&.mod-stickyHeader {
+			@include stickyHeader;
+		}
 
-	&.mod-stickyHeader-withBanner {
-		@include stickyHeaderBanner;
+		&.mod-stickyHeader-withBanner {
+			@include stickyHeaderBanner;
+		}
 	}
 }

package/src/components/tableSticked/mods.scss

@@ -104,9 +104,9 @@
 	}
 }
 
-/*****
- Sticky header
-****/
+// *****
+// Sticky header
+// ****
 
 @mixin stickyHeader {
 	.table-head-row-cell {
@@ -144,9 +144,9 @@
 	}
 }
 
-/*****
- Sticky header drop shadow
-****/
+// *****
+// Sticky header drop shadow
+// ****
 
 @mixin stickyHeaderShadow {
 	.indexTable-head-row-cell,

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

@@ -8,7 +8,7 @@
 	padding-inline: var(--pr-t-spacings-50);
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
-	gap: var(--pr-t-spacings-50);
+	gap: var(--components-tag-gap);
 	cursor: var(--components-tag-cursor);
 	display: inline-flex;
 	align-items: center;
@@ -19,6 +19,8 @@
 	font: var(--components-tag-font);
 	font-size: var(--components-tag-fontSize); // Deprecated
 	line-height: var(--components-tag-lineHeight); // Deprecated
+	max-inline-size: 100%;
+	position: relative;
 
 	&,
 	&:is(a, button) {
@@ -31,6 +33,7 @@
 
 	@at-root ($atRoot) {
 		.tag-content {
+			outline: none;
 			text-decoration: var(--components-tag-decoration);
 		}
 	}

package/src/components/tag/index.scss

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

package/src/components/tag/mods.scss

@@ -1,4 +1,5 @@
-@use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin clickable {
 	--components-tag-cursor: pointer;
@@ -20,12 +21,24 @@
 	}
 }
 
+@mixin S {
+	--components-tag-font: var(--pr-t-font-body-XS);
+	--components-tag-gap: var(--pr-t-spacings-25);
+
+	.lucca-icon {
+		@include icons.XXS;
+	}
+
+	// Deprecated
+	--components-tag-fontSize: var(--pr-t-font-body-XS-fontSize);
+	--components-tag-lineHeight: var(--pr-t-font-body-XS-lineHeight);
+}
+
 @mixin L {
 	--components-tag-font: var(--pr-t-font-body-M);
-	--components-tag-iconBottom: 0;
 
 	.lucca-icon {
-		@include icon.S;
+		@include icons.S;
 	}
 
 	// Deprecated
@@ -42,3 +55,17 @@
 	--components-tag-background: var(--palettes-100, var(--palettes-product-100));
 	--components-tag-color: var(--palettes-800, var(--palettes-product-800));
 }
+
+@mixin AI {
+	@include outlined;
+
+	&:not(:disabled) {
+		--components-tag-boxShadow: none;
+
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
+
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}

package/src/components/tag/states.scss

@@ -1,4 +1,10 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
 @mixin disabled {
 	--components-tag-background: var(--commons-disabled-background);
 	--components-tag-color: var(--commons-disabled-color);
 }
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}

package/src/components/tag/vars.scss

@@ -3,8 +3,10 @@
 	--components-tag-color: var(--palettes-800, var(--palettes-neutral-800));
 	--components-tag-shadow: transparent;
 	--components-tag-font: var(--pr-t-font-body-S);
+	--components-tag-gap: var(--pr-t-spacings-50);
 	--components-tag-decoration: none;
 	--components-tag-cursor: inherit;
+	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/component.scss

@@ -67,6 +67,7 @@
 			padding-inline: var(--component-textField-padding) var(--component-textField-affix-padding);
 			background-color: transparent;
 			color: var(--component-textField-color);
+			text-decoration: var(--component-textField-textDecoration);
 			text-overflow: ellipsis;
 
 			&:is(textarea, div) {

package/src/components/textField/index.scss

@@ -1,36 +1,48 @@
 @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;
+	@layer states {
+		&.is-invalid,
+		&:has(.textField-input-value[aria-invalid='true']) {
+			@include invalid;
+		}
+
+		&.is-disabled,
+		&:has(.textField-input-value:disabled) {
+			@include disabled;
+		}
 	}
 
-	&.mod-autoResize {
-		@include autoResize;
+	@layer mods {
+		&.mod-autoResize {
+			@include autoResize;
+		}
+
+		&.mod-filterPill {
+			@include filterPill;
+		}
 	}
 
-	&.mod-filterPill {
-		@include filterPill;
+	&.is-lineThrough {
+		@include 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/textField/states.scss

@@ -12,3 +12,8 @@
 	--component-textField-background: var(--pr-t-color-input-background-disabled);
 	--component-textField-color: var(--pr-t-color-input-text-disabled);
 }
+
+@mixin lineThrough {
+	--component-textField-color: var(--pr-t-color-text-subtle);
+	--component-textField-textDecoration: line-through;
+}

package/src/components/textField/vars.scss

@@ -5,6 +5,7 @@
 	--component-textField-border: var(--pr-t-color-input-border);
 	--component-textField-borderHover: var(--pr-t-color-input-border-hover);
 	--component-textField-color: var(--pr-t-color-input-text);
+	--component-textField-textDecoration: none;
 	--component-textField-padding: var(--pr-t-spacings-100);
 	--component-textField-affix-padding: var(--component-textField-padding);
 	--component-textField-affix-size: 1.75rem;

package/src/components/textFlow/index.scss

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