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

package/src/components/skeleton/index.scss

@@ -11,9 +11,7 @@
 		&.mod-dark {
 			@include dark;
 		}
-	}
 
-	@layer states {
 		&.is-loading {
 			@include loading;
 

package/src/components/skeleton/mods.scss

@@ -4,7 +4,7 @@
 }
 
 @mixin square {
-	border-radius: var(--pr-t-border-radius-structure);
+	border-radius: var(--pr-t-border-radius-small);
 	block-size: var(--components-skeleton-shape-height);
 	inline-size: var(--components-skeleton-shape-width);
 }

package/src/components/skipLinks/component.scss

@@ -17,7 +17,7 @@
 			margin: 0;
 			border-radius: var(--pr-t-border-radius-default);
 			font: var(--pr-t-font-body-XS);
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			padding-block: var(--pr-t-spacings-50);
 			padding-inline: var(--pr-t-spacings-100);
 			transition: all var(--commons-animations-durations-fast);

package/src/components/statusBadge/component.scss

@@ -11,7 +11,7 @@
 	padding-block: calc(var(--pr-t-spacings-50) / 2);
 	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	white-space: nowrap;
-	font-weight: normal;
+	font-weight: var(--pr-t-font-fontWeight-regular);
 
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));

package/src/components/suggestion/component.scss

@@ -0,0 +1,19 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--pr-t-spacings-50);
+
+	@at-root ($atRoot) {
+		.suggestion-form-field {
+			z-index: 1;
+			position: relative;
+		}
+
+		.suggestion-callout-text {
+			text-decoration: var(--components-suggestion-textDecoration);
+			color: var(--components-suggestion-color);
+		}
+	}
+}

package/src/components/suggestion/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/suggestion/index.scss

@@ -0,0 +1,16 @@
+@use 'exports' as *;
+
+.suggestion {
+	@include vars;
+	@include component;
+
+	&:has(.suggestion-callout-accept:hover),
+	&:has(.suggestion-callout-accept:focus-visible) {
+		@include accept;
+	}
+
+	&:has(.suggestion-callout-reject:hover),
+	&:has(.suggestion-callout-reject:focus-visible) {
+		@include reject;
+	}
+}

package/src/components/suggestion/states.scss

@@ -0,0 +1,12 @@
+@use '@lucca-front/scss/src/components/textField/exports' as textField;
+
+@mixin reject {
+	--components-suggestion-textDecoration: line-through;
+	--components-suggestion-color: var(--pr-t-color-text-subtle);
+}
+
+@mixin accept {
+	.textField {
+		@include textField.lineThrough;
+	}
+}

package/src/components/suggestion/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-suggestion-textDecoration: none;
+	--components-suggestion-color: inherit;
+}

package/src/components/switch/index.scss

@@ -17,7 +17,7 @@
 	}
 }
 
-@layer states {
+@layer mods {
 	.switch-input {
 		&:is(:checked) {
 			@include checked;

package/src/components/switchField/index.scss

@@ -14,7 +14,7 @@
 }
 
 .switchField-input {
-	@layer states {
+	@layer mods {
 		&:checked {
 			@include checked;
 		}

package/src/components/table/component.scss

@@ -34,7 +34,7 @@
 			border-block-end-style: solid;
 			display: table-cell;
 			text-align: start;
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.table-body {

package/src/components/table/index.scss

@@ -52,9 +52,9 @@
 	}
 }
 
-.table-body-row,
-.table-foot-row {
-	@layer mods {
+@layer mods {
+	.table-body-row,
+	.table-foot-row {
 		&.mod-header {
 			@include header;
 		}
@@ -71,12 +71,10 @@
 			}
 		}
 	}
-}
 
-.table-head-row,
-.table-body-row,
-.table-foot-row {
-	@layer mods {
+	.table-head-row,
+	.table-body-row,
+	.table-foot-row {
 		&.mod-selectable {
 			@include selectable;
 		}
@@ -85,29 +83,23 @@
 			@include draggable;
 		}
 	}
-}
 
-.table-head-row {
-	@layer mods {
+	.table-head-row {
 		&.mod-twoLines {
 			@include twoLines;
 		}
 	}
-}
 
-.table-body-row-cell,
-.table-foot-row-cell {
-	@layer mods {
+	.table-body-row-cell,
+	.table-foot-row-cell {
 		&.mod-avatar {
 			@include avatar;
 		}
 	}
-}
 
-.table-head-row-cell,
-.table-body-row-cell,
-.table-foot-row-cell {
-	@layer mods {
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
 		&.mod-actions {
 			@include actions;
 

package/src/components/table/mods.scss

@@ -147,7 +147,7 @@
 		background-color: var(--palettes-neutral-50);
 		font-size: var(--pr-t-font-body-S-fontSize);
 		line-height: var(--pr-t-font-body-S-lineHeight);
-		font-weight: 600;
+		font-weight: var(--pr-t-font-fontWeight-semibold);
 	}
 }
 
@@ -171,7 +171,7 @@
 			@include icon.generate('arrow_chevron_top');
 
 			font-size: var(--pr-t-font-body-M-lineHeight);
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 			margin-inline-end: var(--pr-t-spacings-100);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: transform;
@@ -267,7 +267,7 @@
 		.table-head-row-cell-secondLine {
 			margin-block-start: var(--pr-t-spacings-50);
 			display: block;
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 		}
 	}
 
@@ -284,7 +284,7 @@
 	.table-head-row-cell-secondLine {
 		margin-block-start: var(--pr-t-spacings-50);
 		display: block;
-		font-weight: 400;
+		font-weight: var(--pr-t-font-fontWeight-regular);
 	}
 }
 

package/src/components/tableOfContent/index.scss

@@ -8,7 +8,7 @@
 }
 
 .tableOfContent-list-item-action {
-	@layer states {
+	@layer mods {
 		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {
 				@include hover;

package/src/components/tableSortable/index.scss

@@ -22,9 +22,7 @@
 				@include sortAlignCenter;
 			}
 		}
-	}
 
-	@layer states {
 		&[aria-sort='ascending'] {
 			.tableSortable{
 				@include sortAscending;

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

@@ -7,6 +7,10 @@
 	}
 
 	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
 		&.mod-L {
 			@include L;
 		}
@@ -20,11 +24,17 @@
 		&.mod-outlined {
 			@include outlined;
 		}
-	}
 
-	@layer states {
+		&.mod-AI {
+			@include AI;
+		}
+
 		&.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

@@ -18,9 +18,7 @@
 		&.mod-valueAlignRight {
 			@include valueAlignRight;
 		}
-	}
 
-	@layer states {
 		&.is-invalid,
 		&:has(.textField-input-value[aria-invalid='true']) {
 			@include invalid;
@@ -30,9 +28,7 @@
 		&:has(.textField-input-value:disabled) {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
 		&.mod-autoResize {
 			@include autoResize;
 		}
@@ -41,4 +37,8 @@
 			@include filterPill;
 		}
 	}
+
+	&.is-lineThrough {
+		@include lineThrough;
+	}
 }

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/component.scss

@@ -36,5 +36,11 @@
 
 	& > :last-child {
 		margin-block-end: 0;
+
+		&:is(ul, ol) {
+			> :last-child {
+				margin-block-end: 0;
+			}
+		}
 	}
 }

package/src/components/textfields/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		.textfield-input {
 			&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
 				@include inputDisabled;
@@ -17,9 +17,7 @@
 		&:is(.is-open, .open) {
 			@include open;
 		}
-	}
 
-	@layer mods {
 		&.mod-password {
 			@include password;
 
@@ -190,9 +188,7 @@
 				@include compactSize('longest');
 			}
 		}
-	}
 
-	@layer mods {
 		&.mod-material {
 			@include material;
 
@@ -224,11 +220,7 @@
 			&.mod-radio {
 				@include materialRadio;
 			}
-		}
-	}
 
-	@layer states {
-		&.mod-material {
 			.textfield-input {
 				&:is(:focus, .is-focused, .focused) {
 					@include materialInputFocus;
@@ -266,7 +258,7 @@
 	}
 }
 
-@layer states {
+@layer mods {
 	.textfield-input {
 		&:is(:hover) {
 			@include inputHover;
@@ -282,17 +274,13 @@
 			@include entryHover;
 		}
 	}
-}
 
-@layer mods {
 	.textfield-suffix {
 		&.mod-icon {
 			@include suffixIcon;
 		}
 	}
-}
 
-@layer mods {
 	.textfield.mod-framed,
 	.form.mod-framed .textfield {
 		@include framed;
@@ -308,12 +296,7 @@
 		&.mod-search {
 			@include framedSearch;
 		}
-	}
-}
 
-@layer states {
-	.textfield.mod-framed,
-	.form.mod-framed .textfield {
 		&:is(.is-error, .error) {
 			@include framedState('error');
 

package/src/components/textfields/mods.scss

@@ -288,7 +288,7 @@
 		color: var(--palettes-neutral-600);
 		inset-inline-start: var(--pr-t-spacings-200);
 		font-size: var(--pr-t-font-body-S-fontSize);
-		font-weight: 400;
+		font-weight: var(--pr-t-font-fontWeight-regular);
 		line-height: var(--pr-t-font-body-S-lineHeight);
 		pointer-events: none;
 		position: absolute;
@@ -308,7 +308,7 @@
 		&::after {
 			inset-block-end: var(--pr-t-spacings-100);
 			color: var(--palettes-neutral-600);
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 		}
 	}
 }
@@ -500,7 +500,7 @@
 		font-size: var(--components-textfield-material-label-font-size);
 		position: absolute;
 		pointer-events: none;
-		font-weight: 400;
+		font-weight: var(--pr-t-font-fontWeight-regular);
 		line-height: var(--pr-t-font-body-M-lineHeight);
 		inline-size: 100%;
 		inset-block-start: var(--pr-t-spacings-300);

package/src/components/timeline/component.scss

@@ -35,7 +35,7 @@
 			position: relative;
 			display: block;
 			color: var(--palettes-product-700);
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			margin: 0;
 			font-size: var(--components-timeline-title-fontSize);
 			line-height: var(--components-timeline-title-lineHeight);

package/src/components/timeline/index.scss

@@ -1,7 +1,7 @@
 @use 'exports' as *;
 
 .timeline-step {
-	@layer states {
+	@layer mods {
 		&:is([aria-current='step']) {
 			@include current;
 		}

package/src/components/timeline/mods.scss

@@ -85,7 +85,7 @@
 	}
 
 	.timeline-step-description {
-		padding-inline-start: var(--pr-t-spacings-400);
+		padding-inline-start: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 	}
 
 	.timeline-stepAddBetweenStep {
@@ -117,7 +117,7 @@
 	}
 
 	.timeline-step-description {
-		padding-inline-start: var(--pr-t-spacings-300);
+		padding-inline-start: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
 	}
 }
 
@@ -137,7 +137,7 @@
 	}
 
 	.timeline-step-description {
-		padding-inline-start: 2.5rem;
+		padding-inline-start: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
 		min-block-size: var(--pr-t-spacings-400);
 	}
 }

package/src/components/timepicker/index.scss

@@ -19,9 +19,7 @@
 		&.mod-stepperHover {
 			@include stepperHover;
 		}
-	}
 
-	@layer states {
 		&:has([aria-invalid='true']) {
 			@include invalid;
 		}

package/src/components/title/index.scss

@@ -42,4 +42,15 @@
 			@include XXXL;
 		}
 	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		&.mod-elementAfterText {
+			@include elementAfterText;
+		}
+	}
 }

package/src/components/title/mods.scss

@@ -33,3 +33,9 @@
 	--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
 }
+
+@mixin elementAfterText {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: var(--pr-t-spacings-100);
+}

package/src/components/titleSection/component.scss

@@ -28,7 +28,7 @@
 			color: var(--palettes-neutral-600);
 			font-size: var(--pr-t-font-body-M-fontSize);
 			line-height: var(--pr-t-font-body-M-lineHeight);
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 			margin: 0;
 		}
 	}

package/src/components/tooltip/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-above {
 			@include above;
 		}

package/src/components/userPopover/component.scss

@@ -31,6 +31,7 @@
 
 		.userPopover-details-info {
 			min-inline-size: 0;
+			flex-grow: 1;
 		}
 
 		.userPopover-details-info-name {