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

package/src/components/callout/vars.scss

@@ -4,6 +4,11 @@
 	--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
 	--components-callout-font: inherit;
 	--components-callout-kill-size: 1.5rem;
+	--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
+	--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
+	--components-callout-content-description-display: block;
+	--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);
+	--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);
 
 	// Deprecated
 	--components-callout-fontSize: inherit;

package/src/components/calloutAccordion/component.scss

@@ -31,7 +31,7 @@
 		}
 
 		.calloutAccordion-summary-title {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.calloutAccordion-summary-icon {

package/src/components/calloutDisclosure/component.scss

@@ -49,7 +49,7 @@
 		}
 
 		.calloutDisclosure-summary-title {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.calloutDisclosure-summary-chevron {

package/src/components/calloutDisclosure/index.scss

@@ -6,13 +6,11 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&[open] {
 			@include open;
 		}
-	}
 
-	@layer mods {
 		&.mod-S {
 			@include S;
 		}

package/src/components/card/component.scss

@@ -19,6 +19,7 @@
 	@at-root ($atRoot) {
 		.card-content {
 			padding: var(--components-card-content-padding);
+			position: relative;
 		}
 
 		.card-title {

package/src/components/card/index.scss

@@ -28,9 +28,11 @@
 		&.mod-nested {
 			@include nested;
 		}
-	}
 
-	@layer states {
+		&.mod-expand {
+			@include expand;
+		}
+
 		&:is(.is-disabled, .disabled) {
 			@include disabled;
 		}

package/src/components/card/mods.scss

@@ -59,3 +59,34 @@
 @mixin nested {
 	--components-card-border-radius: var(--pr-t-border-radius-default);
 }
+
+@mixin expand {
+	border: 0;
+	background-color: transparent;
+	box-shadow: none;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background-color: var(--pr-t-elevation-surface-raised);
+		border-radius: var(--components-card-border-radius);
+		box-shadow: var(--pr-t-elevation-shadow-raised);
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: inset, box-shadow;
+	}
+
+	&:hover {
+		box-shadow: none;
+
+		&::before {
+			inset: -2px -6px;
+			box-shadow: var(--pr-t-elevation-shadow-overlay);
+		}
+	}
+
+	.card-content {
+		z-index: 1;
+	}
+}

package/src/components/checkbox/index.scss

@@ -18,9 +18,7 @@
 		&.mod-noLabel {
 			@include noLabel;
 		}
-	}
 
-	@layer states {
 		&:is(.is-required, .required) {
 			@include required;
 		}

package/src/components/checkboxField/component.scss

@@ -53,7 +53,7 @@
 			}
 
 			&::before {
-				font-weight: 400;
+				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: var(--component-checkboxField-icon-fontSize);
 				direction: ltr;
 

package/src/components/checkboxField/index.scss

@@ -6,18 +6,14 @@
 		@include component;
 	}
 
-	&.mod-S {
-		@layer mods {
+	@layer mods {
+		&.mod-S {
 			@include S;
 		}
-	}
 
-	&.mod-checklist {
-		@layer mods {
+		&.mod-checklist {
 			@include checklist;
-		}
 
-		@layer states {
 			.checkboxField-input {
 				&:hover {
 					@include checklistHover;
@@ -62,7 +58,7 @@
 }
 
 .checkboxField-input {
-	@layer states {
+	@layer mods {
 		&[aria-checked='mixed'] {
 			@include checked;
 			@include mixed;

package/src/components/chip/index.scss

@@ -24,9 +24,7 @@
 		&.mod-clickable {
 			@include clickable;
 		}
-	}
 
-	@layer states {
 		&.is-disabled {
 			@include disabled;
 		}

package/src/components/clear/index.scss

@@ -10,9 +10,7 @@
 		&.mod-S {
 			@include S;
 		}
-	}
 
-	@layer states {
 		// .palette-primary is deprecated
 		&.palette-product:not([disabled]),
 		&.palette-primary:not([disabled]) {

package/src/components/collapse/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:not(.is-open, .open, [open]) {
 			@include close;
 		}

package/src/components/dataTable/component.scss

@@ -32,7 +32,7 @@
 			color: var(--pr-t-color-text-subtle);
 			padding: var(--components-dataTable-cell-padding);
 			display: table-cell;
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 
 			.checkboxField {
 				margin-block-end: 0.125rem;
@@ -65,6 +65,8 @@
 			box-shadow: var(--components-dataTable-cell-shadow);
 			background-color: var(--components-dataTable-cell-background);
 			text-align: var(--components-dataTable-cell-textAlign);
+			transition-property: background-color;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
@@ -91,7 +93,7 @@
 		}
 
 		.dataTable-foot-row-cell {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.dataTable-body-row-cell-expand {

package/src/components/dataTable/index.scss

@@ -38,27 +38,45 @@
 		&[class*='mod-layoutFixed'] {
 			@include layoutFixedCells;
 		}
+
+		&.mod-hover {
+			:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+				&:hover {
+					@include hover;
+				}
+
+				&.mod-selectable {
+					&:has(input:checked) {
+						&:hover {
+							@include selectedHover;
+						}
+					}
+				}
+			}
+		}
 	}
 }
 
-:is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
-	@layer mods {
+@layer mods {
+	:is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
 		&.mod-group {
 			@include group;
 		}
 
 		&.mod-selectable {
 			@include selectable;
+
+			&:has(input:checked) {
+				@include selected;
+			}
 		}
 
 		&.mod-draggable {
 			@include draggable;
 		}
 	}
-}
 
-:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-	@layer mods {
+	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
 		&.mod-actions {
 			@include actions;
 		}
@@ -79,10 +97,8 @@
 			@include tree;
 		}
 	}
-}
 
-.dataTable-body-row {
-	@layer states {
+	.dataTable-body-row {
 		&.is-collapsed {
 			@include collapsed;
 		}
@@ -95,10 +111,8 @@
 			}
 		}
 	}
-}
 
-.dataTable-body-row-cell-expand-button {
-	@layer states {
+	.dataTable-body-row-cell-expand-button {
 		&[aria-expanded='true'] {
 			@include expanded;
 		}

package/src/components/dataTable/mods.scss

@@ -38,17 +38,16 @@
 @mixin group {
 	@include buttonExpand;
 
-	--components-dataTable-cell-background: var(--palettes-neutral-25);
-
 	font: var(--pr-t-font-heading-4);
+
+	&,
+	&:hover {
+		--components-dataTable-cell-background: var(--palettes-neutral-50);
+	}
 }
 
 @mixin selectable {
 	--components-dataTable-cellFirst-width: 2.5rem;
-
-	&:has(input:checked) {
-		--components-dataTable-cell-background: var(--palettes-product-50);
-	}
 }
 
 @mixin draggable {

package/src/components/dataTable/states.scss

@@ -5,3 +5,15 @@
 @mixin expanded {
 	--components-dataTable-expand-rotation: 0deg;
 }
+
+@mixin hover {
+	--components-dataTable-cell-background: var(--palettes-neutral-25);
+}
+
+@mixin selected {
+	--components-dataTable-cell-background: var(--palettes-product-50);
+}
+
+@mixin selectedHover {
+	--components-dataTable-cell-background: var(--palettes-product-100);
+}

package/src/components/dataTableSticked/index.scss

@@ -19,9 +19,7 @@
 		&:has(.dataTable.mod-rowsOverflow) {
 			@include rowsOverflow;
 		}
-	}
 
-	@layer states {
 		&:has(.dataTable.is-firstColumnVisible) {
 			@include firstColumnVisible;
 		}
@@ -37,9 +35,7 @@
 		&:has(.dataTable.is-lastRowVisible) {
 			@include lastRowVisible;
 		}
-	}
 
-	@layer mods {
 		&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
 			@include stickyColumn;
 

package/src/components/dialog/component.scss

@@ -10,15 +10,15 @@
 	inset: var(--components-dialog-inset);
 	inline-size: var(--components-dialog-width);
 	block-size: var(--components-dialog-height);
-	max-inline-size: var(--components-dialog-maxWidth);
-	max-block-size: var(--components-dialog-maxHeight);
 	background-color: var(--palettes-neutral-0);
 	border-radius: var(--components-dialog-borderRadius);
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
-	position: fixed !important;
 	margin: auto;
-	display: flex;
 	flex-direction: column;
+	display: flex !important;
+	position: fixed !important;
+	max-inline-size: var(--components-dialog-maxWidth) !important;
+	max-block-size: var(--components-dialog-maxHeight) !important;
 
 	@supports not (height: 1dvh) {
 		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);
@@ -43,7 +43,7 @@
 					flex-grow: 1;
 					min-block-size: 0;
 
-					&:has(.dialog-content:focus-visible) {
+					&:has(.dialog-inside-content:focus-visible) {
 						&::after {
 							@include a11y.focusVisible($offset: -4px);
 
@@ -64,7 +64,7 @@
 				flex-grow: 1;
 				min-block-size: 0;
 
-				&:has(.dialog-content:focus-visible) {
+				&:has(.dialog-inside-content:focus-visible) {
 					&::after {
 						@include a11y.focusVisible($offset: -4px);
 

package/src/components/dialog/index.scss

@@ -33,6 +33,10 @@
 			@include XL;
 		}
 
+		&.mod-XXL {
+			@include XXL;
+		}
+
 		&.mod-neutralBackground {
 			@include neutralBackground;
 		}

package/src/components/dialog/mods.scss

@@ -22,6 +22,10 @@
 	--components-dialog-size: 60rem;
 }
 
+@mixin XXL {
+	--components-dialog-size: 100rem;
+}
+
 @mixin drawer {
 	--components-dialog-animationOpening: slideFromRight;
 	--components-dialog-maxHeight: none;

package/src/components/dropdown/component.scss

@@ -4,11 +4,11 @@
 @use '@lucca-front/scss/src/components/divider/exports' as divider;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	margin: calc(var(--pr-t-spacings-100) * -1);
 	padding: 0 !important;
 	border-radius: var(--pr-t-border-radius-structure);
-	max-inline-size: 90vw;
-	max-block-size: var(--components-dropdown-max-height);
+	min-inline-size: var(--components-dropdown-minInlineSize);
+	max-inline-size: var(--components-dropdown-maxInlineSize);
+	max-block-size: var(--components-dropdown-maxBlockSize);
 	overflow-x: hidden;
 	overflow-y: auto;
 
@@ -20,30 +20,49 @@
 			padding-block: var(--pr-t-spacings-50);
 			padding-inline: 0;
 			margin: 0;
-			min-inline-size: var(--components-dropdown-min-width);
-			max-inline-size: var(--components-dropdown-max-width);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-25);
+
+			.dropdown-list {
+				padding-block: 0;
+			}
 		}
 
 		// .lu-dropdown-options-item is deprecated
 		.dropdown-list-option,
 		.lu-dropdown-options-item {
 			padding-block: 0;
-			padding-inline: var(--pr-t-spacings-50);
 
-			&.mod-divider {
-				padding: 0;
+			&:not(:has(.divider.dropdown-list-option-divider, .dropdown-list-option), &.mod-divider) {
+				padding-inline: var(--pr-t-spacings-50);
+			}
+
+			&:has(> .dropdown-list) {
+				padding-block-start: var(--pr-t-spacings-100);
+				padding-inline: var(--pr-t-spacings-150);
+				color: var(--pr-t-color-text-subtle);
+				font: var(--pr-t-font-body-S);
+				font-weight: var(--pr-t-font-fontWeight-semibold);
+			}
+
+			> .dropdown-list {
+				color: var(--pr-t-color-text);
+				font: var(--pr-t-font-body-M);
+				font-weight: var(--pr-t-font-fontWeight-regular);
+				margin-block-start: var(--pr-t-spacings-50);
+				margin-inline: calc(var(--pr-t-spacings-150) * -1);
 			}
 		}
 
 		// .lu-dropdown-options-item-action is deprecated
 		.dropdown-list-option-action,
 		.lu-dropdown-options-item-action {
-			align-items: flex-start;
 			border: 0;
 			border-radius: var(--pr-t-border-radius-default);
-			color: var(--components-dropdown-optionColor);
-			background-color: var(--components-dropdown-option-actionBackground);
+			background-color: var(--components-dropdown-list-option-action-backgroundColor);
 			display: flex;
+			align-items: flex-start;
 			gap: var(--pr-t-spacings-100);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
@@ -51,32 +70,39 @@
 			transition: background-color var(--commons-animations-durations-fast);
 			text-decoration: none;
 			inline-size: 100%;
-			pointer-events: var(--components-dropdown-option-actionEvents);
+			pointer-events: var(--components-dropdown-list-option-action-pointerEvents);
 			cursor: pointer;
 
 			.lucca-icon {
 				@include icon.S;
 
-				margin-block-start: var(--pr-t-spacings-25);
+				margin-block: var(--pr-t-spacings-25);
 			}
 
 			&,
 			&:hover {
-				color: var(--components-dropdown-option-actionColor);
+				color: var(--components-dropdown-list-option-action-color);
 			}
 
 			&:hover,
 			&:focus-visible {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-25);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-50);
 			}
 
 			&:active {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-50);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-100);
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible;
+				@include a11y.focusVisible($offset: 0);
+
+				z-index: 1;
+				position: relative;
 			}
 		}
+
+		.divider.dropdown-list-option-divider {
+			--components-divider-marginBlock: var(--pr-t-spacings-25);
+		}
 	}
 }

package/src/components/dropdown/index.scss

@@ -9,16 +9,17 @@
 	}
 }
 
+// .lu-dropdown-options-item-action is deprecated
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	@layer states {
+	@layer mods {
+		&[disabled],
 		&.is-disabled {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
-		&.mod-critical, &.mod-delete {
+		&.mod-critical,
+		&.mod-delete {
 			@include critical;
 		}
 	}

package/src/components/dropdown/mods.scss

@@ -1,12 +1,12 @@
 @mixin critical {
-	--components-dropdown-option-actionColor: var(--pr-t-color-text-critical);
-
 	&:hover,
 	&:focus-visible {
-		--components-dropdown-option-actionBackground: var(--palettes-error-50);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-error-50);
+		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
 	}
 
 	&:active {
-		--components-dropdown-option-actionBackground: var(--palettes-error-100);
+		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-error-100);
 	}
 }

package/src/components/dropdown/states.scss

@@ -1,9 +1,10 @@
 @mixin disabled {
-	--components-dropdown-option-actionColor: var(--pr-t-color-text-disabled);
-	--components-dropdown-option-actionEvents: none;
+	--components-dropdown-list-option-action-color: var(--pr-t-color-text-disabled);
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: none;
 
 	&,
 	&:hover {
-		--components-dropdown-option-actionBackground: var(--palettes-neutral-0);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-0);
 	}
 }

package/src/components/dropdown/vars.scss

@@ -1,8 +1,10 @@
 @mixin vars {
-	--components-dropdown-min-width: 10rem;
-	--components-dropdown-max-width: 30rem;
-	--components-dropdown-max-height: 60vh;
-	--components-dropdown-option-actionColor: currentColor;
-	--components-dropdown-option-actionBackground: transparent;
-	--components-dropdown-option-actionEvents: auto;
+	--components-dropdown-minInlineSize: 10rem;
+
+	--components-dropdown-maxInlineSize: 30rem;
+	--components-dropdown-maxBlockSize: min(60vh, 30rem);
+
+	--components-dropdown-list-option-action-color: currentColor;
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: auto;
 }