@lucca-front/scss 20.4.0-rc.1 → 21.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.4.0-rc.1",
+  "version": "21.0.0-rc.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "20.4.0-rc.1"
+    "@lucca-front/icons": "21.0.0-rc.2"
   }
 }

package/src/commons/config.scss

@@ -604,11 +604,11 @@ $elevation: (
 
 // Tokens : Colors
 $colorInput: (
-	text: var(--palettes-neutral-800),
+	text: var(--pr-t-color-text),
 	text-placeholder: var(--palettes-neutral-400),
 	text-placeholder-critical: var(--palettes-critical-400),
-	text-suffix: var(--palettes-neutral-600),
-	text-disabled: var(--palettes-neutral-500),
+	text-suffix: var(--pr-t-color-text-subtle),
+	text-disabled: var(--palettes-neutral-700),
 	icon: var(--palettes-neutral-600),
 	icon-disabled: var(--palettes-neutral-500),
 	background: var(--palettes-neutral-0),

package/src/components/breadcrumbs/component.scss

@@ -31,7 +31,8 @@
 			}
 		}
 
-		.breadcrumbs-list-item-action {
+		// Second selector to get rid of breadcrumbs-list-item-action on angular component
+		.breadcrumbs-list-item-action, .breadcrumbs-list-item > a  {
 			color: var(--pr-t-color-text-subtle);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: color;

package/src/components/breadcrumbs/index.scss

@@ -14,7 +14,8 @@
 	}
 }
 
-.breadcrumbs-list-item-action {
+// Second selector to get rid of breadcrumbs-list-item-action on angular component
+.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
 	@layer mods {
 		// .active is deprecated
 		&.is-active,

package/src/components/breadcrumbs/mods.scss

@@ -10,7 +10,8 @@
 			}
 
 			&:first-child {
-				.breadcrumbs-list-item-action {
+				// Second selector to get rid of breadcrumbs-list-item-action on angular component
+				.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
 					&::before {
 						@include icon.generate('arrow_left');
 

package/src/components/button/index.scss

@@ -8,13 +8,8 @@
 
 	@layer mods {
 		&.mod-AI {
-			&:not(.invert) {
 			@include AI;
 
-			&.mod-invert {
-				@include invertIA;
-			}
-
 			&.is-success {
 				@include successAI;
 			}
@@ -22,7 +17,6 @@
 			&.is-loading {
 				@include loadingAI;
 			}
-			}
 		}
 
 		&.mod-block {

package/src/components/button/mods.scss

@@ -253,29 +253,8 @@
 	&:not(:disabled) {
 		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
 
-		&:not(.mod-invert) .lucca-icon {
+		.lucca-icon {
 			@include icons.AI;
 		}
 	}
 }
-
-@mixin invertIA {
-	--components-button-backgroundColor: transparent;
-	--components-button-color: var(--palettes-neutral-0);
-
-	background-image: linear-gradient(
-		-135deg,
-		color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
-		color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
-	);
-
-	&:hover,
-	&:focus-visible {
-		--components-button-AI-background-opacity: 15%;
-		--components-button-color: var(--palettes-neutral-0);
-	}
-
-	&:active {
-		--components-button-AI-background-opacity: 5%;
-	}
-}

package/src/components/button/vars.scss

@@ -19,7 +19,6 @@
 	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
 	--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
 	--components-button-arrow-transform: none;
-	--components-button-AI-background-opacity: 25%;
 
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-M-fontSize);

package/src/components/calendar/component.scss

@@ -182,6 +182,8 @@
 		.calendar-table-head-row-cell,
 		.calendar-table-body-row-cell {
 			padding: var(--pr-t-spacings-25);
+			block-size: var(--pr-t-spacings-400);
+			box-sizing: content-box;
 		}
 
 		.calendar-table-head-row-cell {
@@ -216,20 +218,14 @@
 			color: var(--components-calendar-table-body-row-cell-actionColor);
 			background-color: var(--components-calendar-table-body-row-cell-actionHighlight);
 			display: var(--components-calendar-table-body-row-cell-actionDisplay);
-			block-size: var(--pr-t-spacings-400);
+			block-size: 100%;
 			text-transform: lowercase;
+			cursor: var(--components-calendar-table-body-row-cell-actionCursor);
+			text-decoration: var(--components-calendar-table-body-row-cell-actionTextDecoration);
 			box-shadow:
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight) inset;
 
-			&:disabled,
-			&[aria-disabled='true'] {
-				--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
-
-				text-decoration: line-through;
-				cursor: default;
-			}
-
 			&:not(:disabled, [aria-disabled='true']) {
 				&:hover {
 					@include a11y.focusVisible;

package/src/components/calendar/index.scss

@@ -84,5 +84,13 @@
 				@include endInProgress;
 			}
 		}
+
+		.calendar-table-body-row-cell-action {
+			&:disabled,
+			&[aria-disabled='true'] {
+				@include disabled;
+			}
+		}
 	}
 }
+

package/src/components/calendar/states.scss

@@ -165,6 +165,12 @@
 
 @mixin overflow {
 	.calendar-table-body-row-cell-action {
-		--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-600);
+		--components-calendar-table-body-row-cell-actionColor: var(--pr-t-color-text-subtle);
 	}
 }
+
+@mixin disabled {
+	--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
+	--components-calendar-table-body-row-cell-actionTextDecoration: line-through;
+	--components-calendar-table-body-row-cell-actionCursor: default;
+}

package/src/components/calendar/vars.scss

@@ -8,9 +8,11 @@
 	--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-neutral-200);
 	--components-calendar-table-body-row-cell-actionHighlight: transparent;
 	--components-calendar-table-body-row-cell-actionFontWeight: 400;
-	--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-700);
+	--components-calendar-table-body-row-cell-actionColor: var(--pr-t-color-text);
 	--components-calendar-table-body-row-cell-actionOutlineWidth: 2px;
 	--components-calendar-table-body-row-cell-actionOutlineOffset: -1px;
+	--components-calendar-table-body-row-cell-actionCursor: pointer;
+	--components-calendar-table-body-row-cell-actionTextDecoration: none;
 	--components-calendar-table-body-row-cellSelectedBeforeContent: none;
 	--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0;
 	--components-calendar-table-body-row-cell-actionDisplay: block;

package/src/components/callout/component.scss

@@ -48,7 +48,6 @@
 
 		}
 
-
 		.callout-content-description-actions {
 			display: flex;
 			gap: var(--pr-t-spacings-75);

package/src/components/calloutPopover/component.scss

@@ -22,6 +22,12 @@
 	}
 
 	@at-root ($atRoot) {
+		.calloutPopover-content {
+			&:empty {
+				display: none;
+			}
+		}
+
 		.calloutPopover-icon {
 			color: var(--palettes-700, var(--palettes-neutral-700));
 		}
@@ -29,33 +35,30 @@
 		.calloutPopover-overlay {
 			inline-size: var(--components-calloutPopover-width);
 			max-inline-size: 100vw;
-		}
-
-		.calloutPopover-overlay-head {
 			display: flex;
 			gap: var(--pr-t-spacings-100);
 		}
 
 		.calloutPopover-overlay-head-title {
+			display: block;
 			font: var(--pr-t-font-body-M);
 			font-weight: var(--pr-t-font-fontWeight-semibold);
-			margin: 0;
 			padding: 0;
+			margin: 0;
+			padding-block-end: var(--pr-t-spacings-100);
+			margin-block-end: var(--pr-t-spacings-100);
+			border-block-end: var(--commons-divider-width) solid var(--palettes-neutral-200);
 		}
 
-		.calloutPopover-overlay-head-icon {
+		.calloutPopover-overlay-icon {
 			@include icon.M;
 
 			color: var(--palettes-700, var(--palettes-neutral-700));
+
 		}
 
 		.calloutPopover-overlay-content {
-			margin-block-start: var(--pr-t-spacings-100);
-			margin-inline-end: var(--pr-t-spacings-150);
 			margin-block-end: var(--pr-t-spacings-100);
-			margin-inline-start: var(--components-calloutPopover-content-margin);
-			padding-block-start: var(--pr-t-spacings-100);
-			border-block-start: var(--commons-divider-width) solid var(--palettes-neutral-200);
 		}
 	}
 }

package/src/components/calloutPopover/mods.scss

@@ -24,9 +24,8 @@
 
 @mixin overlayS {
 	--components-calloutPopover-width: 20rem;
-	--components-calloutPopover-content-margin: 1.75rem;
 
-	.calloutPopover-overlay-head-icon {
+	.calloutPopover-overlay-icon {
 		@include icon.S;
 	}
 
@@ -41,9 +40,7 @@
 }
 
 @mixin overlayIconless {
-	--components-calloutPopover-content-margin: 0;
-
-	.calloutPopover-overlay-head-icon {
+	.calloutPopover-overlay-icon {
 		display: none;
 	}
 }

package/src/components/calloutPopover/vars.scss

@@ -4,7 +4,6 @@
 	@at-root ($atRoot) {
 		:root {
 			--components-calloutPopover-width: 30rem;
-			--components-calloutPopover-content-margin: 2rem;
 		}
 	}
 }

package/src/components/checkboxField/component.scss

@@ -56,7 +56,9 @@
 				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: var(--component-checkboxField-icon-fontSize);
 				direction: ltr;
-				font-family: var(--icon-fontFamily);
+
+				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
+				font-family: 'Lucca icons';
 				font-feature-settings: 'liga';
 				font-style: normal;
 				letter-spacing: normal;

package/src/components/chip/component.scss

@@ -1,22 +1,33 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-chip-backgroundColor);
+	border: none;
 	border-radius: var(--components-chip-borderRadius);
 	color: var(--components-chip-color);
 	display: inline-flex;
 	align-items: center;
-	gap: var(--pr-t-spacings-100);
 	position: relative;
 	vertical-align: middle;
 	padding-block: calc(var(--pr-t-spacings-50) / 2);
 	padding-inline: var(--pr-t-spacings-100);
 	font: var(--components-chip-font);
+	max-inline-size: 100%;
+
+	.lucca-icon {
+		@include icon.XS;
+
+		margin-inline-end: var(--pr-t-spacings-50);
+	}
 
 	@at-root ($atRoot) {
+		.chip-content {
+			outline: none;
+		}
+
 		.chip-kill {
 			@include reset.button;
 
@@ -28,6 +39,7 @@
 			inline-size: var(--pr-t-spacings-300);
 			block-size: var(--pr-t-spacings-300);
 			margin: calc(var(--pr-t-spacings-75) * -1);
+			margin-inline-start: var(--pr-t-spacings-25);
 			flex-shrink: 0;
 			cursor: pointer;
 
@@ -41,19 +53,18 @@
 
 			&::before {
 				border-radius: var(--pr-t-border-radius-full);
-				background-color: var(--components-chip-kill-disk-color, var(--palettes-neutral-700));
+				background-color: var(--components-chip-kill-disk-color);
 			}
 
 			&::after {
 				mask-image: var(--components-chip-kill-background-image);
 				mask-size: var(--components-chip-kill-size);
 				mask-repeat: no-repeat;
-				background-color: var(--components-chip-kill-cross-color, var(--palettes-neutral-0));
+				background-color: var(--components-chip-kill-cross-color);
 			}
 
 			&:hover {
-				--components-chip-kill-disk-color: var(--palettes-neutral-600);
-				--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0));
+				--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700));
 			}
 
 			&:focus-visible {
@@ -61,7 +72,7 @@
 			}
 
 			&:active {
-				--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-neutral-800));
+				--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900));
 			}
 		}
 	}

package/src/components/chip/index.scss

@@ -11,12 +11,6 @@
 			@include S;
 		}
 
-		// .palette-primary is deprecated
-		&.palette-product,
-		&.palette-primary {
-			@include product;
-		}
-
 		&.mod-unkillable {
 			@include unkillable;
 		}
@@ -28,5 +22,9 @@
 		&.is-disabled {
 			@include disabled;
 		}
+
+		&:has(.chip-content:focus-visible) {
+			@include focusVisible;
+		}
 	}
 }

package/src/components/chip/mods.scss

@@ -1,26 +1,12 @@
+@use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin S {
 	--components-chip-font: var(--pr-t-font-body-XS);
 	--components-chip-borderRadius: var(--pr-t-border-radius-small);
-}
-
-@mixin product {
-	.chip-kill {
-		--components-chip-kill-cross-color: var(--palettes-product-700);
-		--components-chip-kill-disk-color: var(--palettes-neutral-0);
-
-		&:hover {
-			--components-chip-kill-disk-color: var(--palettes-product-50);
-		}
 
-		&:active {
-			--components-chip-kill-disk-color: var(--palettes-product-50);
-		}
-
-		&:focus-visible {
-			@include a11y.focusVisible($color: var(--palettes-neutral-0), $offset: -4px, $borderRadius: var(--pr-t-border-radius-full));
-		}
+	.lucca-icon {
+		@include icon.XXS;
 	}
 }
 
@@ -33,8 +19,8 @@
 @mixin clickable {
 	cursor: pointer;
 	text-decoration: none;
+}
 
-	&:hover {
-		background-color: var(--palettes-600, var(--palettes-neutral-100));
-	}
+@mixin focusVisible {
+	@include a11y.focusVisible;
 }

package/src/components/chip/states.scss

@@ -1,6 +1,6 @@
 @mixin disabled {
-	--components-chip-backgroundColor: var(--commons-disabled-background);
-	--components-chip-color: var(--pr-t-color-text-disabled);
+	--components-chip-backgroundColor: var(--palettes-neutral-200);
+	--components-chip-color: var(--pr-t-color-text-subtle);
 
 	.chip-kill {
 		display: none;

package/src/components/chip/vars.scss

@@ -1,9 +1,11 @@
 @mixin vars {
 	--components-chip-font: var(--pr-t-font-body-S);
-	--components-chip-backgroundColor: var(--palettes-700, var(--palettes-neutral-200));
-	--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));
+	--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
+	--components-chip-color: var(--palettes-800, var(--pr-t-color-text));
 	--components-chip-borderRadius: var(--pr-t-border-radius-default);
 	--components-chip-kill-size: 0.75rem;
+	--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));
+	--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));
 	--components-chip-kill-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E");
 
 	// Deprecated

package/src/components/clear/component.scss

@@ -5,7 +5,7 @@
 @mixin component {
 	@include reset.button;
 
-	display: grid;
+	display: var(--components-clear-display);
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr;
 	grid-template-areas: 'main';
@@ -34,8 +34,8 @@
 	}
 
 	&:hover {
-		--components-clear-cross-color: var(--palettes-neutral-0);
-		--components-clear-background: var(--palettes-neutral-600);
+		--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));
+		--components-clear-background: var(--palettes-700, var(--palettes-neutral-700));
 	}
 
 	&:focus-visible {
@@ -43,7 +43,7 @@
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-neutral-800);
+		--components-clear-background: var(--palettes-900, var(--palettes-neutral-900));
 	}
 
 	// to prevent breaking change. lucca-icon is no longer needed.

package/src/components/clear/index.scss

@@ -11,24 +11,27 @@
 			@include S;
 		}
 
-		// .palette-primary is deprecated
-		&.palette-product:not([disabled]),
-		&.palette-primary:not([disabled]) {
-			@include product;
-		}
-
-		&.mod-inverted:not([disabled]) {
+		&.mod-inverted {
 			@include inverted;
-
-			&.palette-product:not([disabled]) {
-				@include invertedProduct;
-			}
 		}
 
 		&[disabled] {
+			cursor: default;
+
 			@include disabled;
+		}
 
-			cursor: default;
+		&[hidden],
+		.filterPill[disabled] &,
+		.filterPill:not(.is-filled) &,
+		.textfield-input[disabled] &,
+		.textfield-input:not(.is-filled) &,
+		.textfield-input:not(.is-selected) & {
+			@include hidden;
+		}
+
+		.multiSelect.is-selected:has(.multipleSelect-clear) & {
+			--components-clear-display: grid;
 		}
 	}
 }

package/src/components/clear/mods.scss

@@ -1,13 +1,13 @@
 @mixin product {
 	--components-clear-cross-color: var(--palettes-neutral-0);
-	--components-clear-background: var(--palettes-product-700);
+	--components-clear-background: var(--palettes-product-800);
 
 	&:hover {
-		--components-clear-background: var(--palettes-product-600);
+		--components-clear-background: var(--palettes-product-700);
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-product-800);
+		--components-clear-background: var(--palettes-product-900);
 	}
 }
 
@@ -17,27 +17,14 @@
 }
 
 @mixin inverted {
-	--components-clear-cross-color: var(--palettes-neutral-700);
-	--components-clear-background: var(--palettes-neutral-0);
+	--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));
+	--components-clear-background: var(--palettes-0, var(--palettes-neutral-0));
 
 	&:hover {
-		--components-clear-background: var(--palettes-neutral-50);
+		--components-clear-background: var(--palettes-50, var(--palettes-neutral-50));
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-neutral-100);
-	}
-}
-
-@mixin invertedProduct {
-	--components-clear-cross-color: var(--palettes-product-700);
-	--components-clear-background: var(--palettes-neutral-0);
-
-	&:hover {
-		--components-clear-background: var(--palettes-product-50);
-	}
-
-	&:active {
-		--components-clear-background: var(--palettes-product-50);
+		--components-clear-background: var(--palettes-100, var(--palettes-neutral-100));
 	}
 }

package/src/components/clear/states.scss

@@ -1,4 +1,13 @@
 @mixin disabled {
 	--components-clear-cross-color: var(--palettes-neutral-500); // disabled token candidate
-	--components-clear-background: var(--palettes-neutral-300); // disabled token candidate
+
+	&,
+	&:hover,
+	&:active {
+		--components-clear-background: var(--palettes-neutral-300); // disabled token candidate
+	}
+}
+
+@mixin hidden {
+	--components-clear-display: none;
 }

package/src/components/clear/vars.scss

@@ -1,6 +1,7 @@
 @mixin vars {
+	--components-clear-display: grid;
 	--components-clear-size: 1rem;
-	--components-clear-background: var(--palettes-neutral-700);
-	--components-clear-cross-color: var(--palettes-neutral-0);
+	--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));
+	--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));
 	--components-clear-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E");
 }

package/src/components/dataTable/component.scss

@@ -19,7 +19,7 @@
 		.dataTableWrapper {
 			border-radius: var(--components-dataTable-borderRadius);
 			border: 1px solid var(--commons-border-200);
-			overflow: var(--components-dataTable-overflow);
+			overflow: auto;
 			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
 			display: block;
@@ -31,6 +31,17 @@
 
 		.dataTableWrapper-pagination {
 			border-block-start: 1px solid var(--commons-border-200);
+			background-color: var(--components-dataTable-cell-background);
+			display: flex;
+			justify-content: flex-end;
+			position: sticky;
+			inset-block-end: 0;
+			z-index: 4;
+
+			> * {
+				position: sticky;
+				inset-inline-end: 0;
+			}
 
 			&:empty {
 				display: none;