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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.0.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": "21.0.0-rc.1"
+    "@lucca-front/icons": "21.0.0-rc.2"
   }
 }

package/src/components/calendar/states.scss

@@ -165,7 +165,7 @@
 
 @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);
 	}
 }
 

package/src/components/calendar/vars.scss

@@ -8,7 +8,7 @@
 	--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;

package/src/components/chip/component.scss

@@ -1,15 +1,15 @@
-@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);
@@ -17,6 +17,12 @@
 	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;
@@ -33,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;
 
@@ -46,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 {
@@ -66,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;
 		}

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,10 +19,6 @@
 @mixin clickable {
 	cursor: pointer;
 	text-decoration: none;
-
-	&:hover {
-		background-color: var(--palettes-600, var(--palettes-neutral-100));
-	}
 }
 
 @mixin 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

@@ -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,18 +11,8 @@
 			@include S;
 		}
 
-		// .palette-primary is deprecated
-		&.palette-product,
-		&.palette-primary {
-			@include product;
-		}
-
 		&.mod-inverted {
 			@include inverted;
-
-			&:where(.palette-product) {
-				@include invertedProduct;
-			}
 		}
 
 		&[disabled] {

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-100);
+		--components-clear-background: var(--palettes-100, var(--palettes-neutral-100));
 	}
 }

package/src/components/clear/vars.scss

@@ -1,7 +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

@@ -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;

package/src/components/dataTableSticked/index.scss

@@ -10,6 +10,7 @@
 	@layer mods {
 		&:has(.dataTable.mod-stickyHeader, .dataTable-head.mod-sticky) {
 			@include stickyHeader;
+			@include firstRowVisible;
 		}
 
 		&:has(.dataTableShadows),
@@ -53,6 +54,10 @@
 		&:has(.dataTable.is-lastColumnVisibleBeforeColsEnd) {
 			@include lastColumnVisibleBeforeColsEnd;
 		}
+
+		&:has(.dataTableWrapper-pagination:not(:empty)) {
+			@include pagination;
+		}
 	}
 
 	&:has(.dataTable-head.is-firstBodyRowVisible) {

package/src/components/dataTableSticked/mods.scss

@@ -72,7 +72,7 @@
 		}
 
 		&::after {
-			inset-block-end: 0;
+			inset-block-end: var(--components-dataTable-shadow-lastRowInsetBlockEnd);
 			transform: scaleY(-1);
 			opacity: var(--components-dataTable-shadow-lastRowOpacity);
 		}
@@ -169,3 +169,7 @@
 		}
 	}
 }
+
+@mixin pagination {
+	--components-dataTable-shadow-lastRowInsetBlockEnd: var(--pr-t-spacings-600);
+}

package/src/components/dataTableSticked/vars.scss

@@ -6,4 +6,5 @@
 	--components-dataTable-header-shadow-opacity: 1;
 	--components-dataTable-shadow-colsStart-opacity: 1;
 	--components-dataTable-shadow-colsEnd-opacity: 1;
+	--components-dataTable-shadow-lastRowInsetBlockEnd: 0;
 }

package/src/components/fieldset/component.scss

@@ -40,6 +40,10 @@
 			}
 		}
 
+		.fieldset-title-content-text {
+			padding-block: var(--pr-t-spacings-50);
+		}
+
 		.fieldset-title-content-text-helper {
 			font: var(--pr-t-font-body-S);
 			font-weight: var(--pr-t-font-fontWeight-regular);

package/src/components/fieldset/index.scss

@@ -22,5 +22,9 @@
 		&:has(.fieldset-title-content[aria-expanded='true']) {
 			@include expanded;
 		}
+
+		&:has(.fieldset-title-content-action:not(:empty)) {
+			@include withAction;
+		}
 	}
 }

package/src/components/fieldset/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
 	--components-fieldset-title: var(--pr-t-font-heading-4);
@@ -19,3 +20,12 @@
 		}
 	}
 }
+
+@mixin withAction {
+	.fieldset-title-content-action {
+		.button {
+			@include button.outlined;
+			@include button.S;
+		}
+	}
+}

package/src/components/fieldset/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
 	--components-fieldset-title: var(--pr-t-font-heading-3);
-	--components-fieldset-gap: var(--pr-t-spacings-150);
+	--components-fieldset-gap: var(--pr-t-spacings-100);
 	--components-fieldset-contentMaxWidth: 40rem;
 	--components-fieldset-title-iconRotation: 0deg;
 }

package/src/components/form/component.scss

@@ -1,7 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/form';
 @use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
 @use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
-@use '@lucca-front/scss/src/components/title/exports' as title;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -42,8 +41,7 @@
 		}
 
 		.form-header-title {
-			@include title.component;
-			@include title.h1;
+			font: var(--pr-t-font-heading-2);
 		}
 
 		.form-header-mandatory {

package/src/components/multiSelect/component.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/commons/utils/text';
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
@@ -32,6 +33,8 @@
 
 		.multipleSelect-displayer-chip {
 			min-inline-size: 0;
+
+			@include color.palette('product');
 		}
 
 		.multipleSelect-displayer-chip-value {

package/src/components/multiSelect/states.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/chip/exports' as chip;
 
 @mixin focused {
 	@include a11y.focusVisible($offset: 3px);
@@ -16,6 +17,10 @@
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 
 	pointer-events: none;
+
+	.multipleSelect-displayer-chip {
+		@include chip.disabled;
+	}
 }
 
 @mixin expanded {

package/src/components/popover/component.scss

@@ -10,6 +10,7 @@
 	position: relative;
 	min-block-size: var(--pr-t-spacings-500);
 	min-inline-size: var(--pr-t-spacings-500);
+	max-inline-size:  var(--components-popover-maxInlineSize);
 	animation: popup var(--commons-animations-durations-fast) ease 1 forwards;
 
 	// need of a higher specificity

package/src/components/popover/vars.scss

@@ -1,3 +1,4 @@
 @mixin vars {
 	--components-popover-padding: var(--pr-t-spacings-100);
+	--components-popover-maxInlineSize: 25rem;
 }

package/src/components/richText/index.scss

@@ -26,10 +26,6 @@
 
 		&.is-disabled {
 			@include disabled;
-
-			.richTextField-content-chip {
-				@include chipDisabled;
-			}
 		}
 
 		&.mod-autoResize {

package/src/components/richText/states.scss

@@ -16,11 +16,6 @@
 	--components-richTextField-borderColor: var(--pr-t-color-input-border);
 }
 
-@mixin chipDisabled {
-	--components-chip-backgroundColor: var(--palettes-neutral-200);
-	--components-chip-color: var(--pr-t-color-text-subtle);
-}
-
 @mixin error {
 	--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);
 	--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);