@lucca-front/scss 20.3.2 → 20.3.3-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.2",
+  "version": "20.3.3-rc.3",
   "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.3.2"
+    "@lucca-front/icons": "20.3.3-rc.3"
   }
 }

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

@@ -192,7 +192,7 @@
 		// .disabled is deprecated
 		&.is-disabled,
 		&.disabled,
-		&[aria-disabled="true"] {
+		&[aria-disabled] {
 			@include disabled;
 		}
 	}

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,7 +218,7 @@
 			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;
 			box-shadow:
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),

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

@@ -15,8 +15,13 @@
 	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%;
 
 	@at-root ($atRoot) {
+		.chip-content {
+			outline: none;
+		}
+
 		.chip-kill {
 			@include reset.button;
 

package/src/components/chip/index.scss

@@ -28,5 +28,9 @@
 		&.is-disabled {
 			@include disabled;
 		}
+
+		&:has(.chip-content:focus-visible) {
+			@include focusVisible;
+		}
 	}
 }

package/src/components/chip/mods.scss

@@ -38,3 +38,7 @@
 		background-color: var(--palettes-600, var(--palettes-neutral-100));
 	}
 }
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}

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

package/src/components/clear/index.scss

@@ -12,23 +12,36 @@
 		}
 
 		// .palette-primary is deprecated
-		&.palette-product:not([disabled]),
-		&.palette-primary:not([disabled]) {
+		&.palette-product,
+		&.palette-primary {
 			@include product;
 		}
 
-		&.mod-inverted:not([disabled]) {
+		&.mod-inverted {
 			@include inverted;
 
-			&.palette-product:not([disabled]) {
+			&:where(.palette-product) {
 				@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

@@ -38,6 +38,6 @@
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-product-50);
+		--components-clear-background: var(--palettes-product-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,4 +1,5 @@
 @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);

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;
@@ -80,10 +80,6 @@
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
-
-				.checkboxField {
-					--component-checkboxField-top: 0;
-				}
 			}
 		}
 
@@ -104,6 +100,12 @@
 
 		.dataTable-body-row-cell {
 			vertical-align: var(--components-dataTable-cell-verticalAlign);
+
+			&:first-child {
+				&:has(.checkboxField-input) {
+					padding-bottom: var(--pr-t-spacings-150);
+				}
+			}
 		}
 
 		.dataTable-foot-row-cell {
@@ -114,7 +116,6 @@
 			display: flex;
 			gap: var(--pr-t-spacings-100);
 			align-items: flex-start;
-			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.dataTable-body-row-cell-expand-button.button {

package/src/components/dataTable/mods.scss

@@ -95,7 +95,7 @@
 
 @mixin actions {
 	padding-block: 0;
-	padding-inline: var(--pr-t-spacings-50);
+	padding-inline: 0 var(--pr-t-spacings-50);
 	text-align: end;
 	white-space: nowrap;
 
@@ -142,7 +142,7 @@
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--dataTable-layoutFixed-width, auto);
 	inline-size: var(--dataTable-layoutFixed-width, auto);
 }
@@ -152,7 +152,7 @@
 		.dataTable-head-row-cell,
 		.dataTable-body-row-cell,
 		.dataTable-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -162,7 +162,7 @@
 				.dataTable-head-row-cell,
 				.dataTable-body-row-cell,
 				.dataTable-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}

package/src/components/dataTable/vars.scss

@@ -11,7 +11,6 @@
 	--components-dataTable-tableLayout: auto;
 	--components-dataTable-cellFirst-width: auto;
 	--components-dataTable-row-display: table-row;
-	--components-dataTable-overflow: hidden;
 	--components-dataTable-expand-rotation: 180deg;
 	--components-dataTable-borderRadius: var(--pr-t-border-radius-structure);
 }

package/src/components/dataTableSticked/index.scss

@@ -12,10 +12,12 @@
 			@include stickyHeader;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-columnsOverflow) {
 			@include columnsOverflow;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-rowsOverflow) {
 			@include rowsOverflow;
 		}
@@ -43,6 +45,14 @@
 				@include stickyColumnBorder;
 			}
 		}
+
+		&:has(.dataTable.is-firstColumnVisibleAfterColsStart) {
+			@include firstColumnVisibleAfterColsStart;
+		}
+
+		&:has(.dataTable.is-lastColumnVisibleBeforeColsEnd) {
+			@include lastColumnVisibleBeforeColsEnd;
+		}
 	}
 
 	&:has(.dataTable-head.is-firstBodyRowVisible) {

package/src/components/dataTableSticked/mods.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin stickyHeader {
-	--components-dataTable-overflow: auto;
-
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
@@ -22,8 +20,6 @@
 }
 
 @mixin columnsOverflow {
-	--components-dataTable-overflow: auto;
-
 	display: flex;
 
 	&::before,
@@ -52,11 +48,10 @@
 }
 
 @mixin rowsOverflow {
-	--components-dataTable-overflow: auto;
-
 	.dataTableShadows {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 
 		&::before,
 		&::after {
@@ -85,8 +80,6 @@
 }
 
 @mixin stickyColumn {
-	--components-dataTable-overflow: auto;
-
 	%addShadow {
 		content: '';
 		position: absolute;
@@ -130,6 +123,8 @@
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {
 						@extend %addShadow;
+
+						opacity: var(--components-dataTable-shadow-colsStart-opacity);
 					}
 				}
 			}
@@ -143,6 +138,7 @@
 					inset-inline-start: auto;
 					inset-inline-end: 100%;
 					transform: scaleX(-1);
+					opacity: var(--components-dataTable-shadow-colsEnd-opacity);
 				}
 
 				& ~ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn {

package/src/components/dataTableSticked/states.scss

@@ -18,3 +18,10 @@
 	--components-dataTable-header-shadow-opacity: 0;
 }
 
+@mixin firstColumnVisibleAfterColsStart {
+	--components-dataTable-shadow-colsStart-opacity: 0;
+}
+
+@mixin lastColumnVisibleBeforeColsEnd {
+	--components-dataTable-shadow-colsEnd-opacity: 0;
+}

package/src/components/dataTableSticked/vars.scss

@@ -4,4 +4,6 @@
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
 	--components-dataTable-header-shadow-opacity: 1;
+	--components-dataTable-shadow-colsStart-opacity: 1;
+	--components-dataTable-shadow-colsEnd-opacity: 1;
 }

package/src/components/dropdown/mods.scss

@@ -1,12 +1,12 @@
 @mixin critical {
-	--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
-
 	&:hover,
 	&:focus-visible {
-		--components-dropdown-list-option-action-backgroundColor: var(--palettes-critical-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-list-option-action-backgroundColor: var(--palettes-critical-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/filterPill/component.scss

@@ -104,7 +104,6 @@
 			margin-inline-end: var(--pr-t-spacings-25);
 			position: relative;
 			z-index: 1;
-			display: var(--components-filterPill-clear-display);
 
 			@include clear.product;
 		}

package/src/components/filterPill/states.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/clear/exports' as clear;
 
 @mixin checkboxChecked {
 	--components-filterPill-borderColor: var(--palettes-product-300);
@@ -66,7 +67,6 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
-	--components-filterPill-clear-display: grid;
 }
 
 @mixin notFilled {
@@ -91,7 +91,6 @@
 }
 
 @mixin disabled {
-	--components-filterPill-clear-display: none;
 	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
 	--components-filterPill-borderColor: var(--palettes-neutral-300) !important;
 	--components-filterPill-color: var(--palettes-neutral-500);
@@ -102,6 +101,8 @@
 
 	box-shadow: var(--components-filterPill-shadow);
 
+	@include clear.hidden;
+
 	// TODO
 	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }

package/src/components/filterPill/vars.scss

@@ -12,7 +12,6 @@
 	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
 	--components-filterPill-checkbox-icon-scale: 0;
 	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
-	--components-filterPill-clear-display: none;
 	--components-filterPill-toggle-rotation: 0;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);

package/src/components/form/component.scss

@@ -1,9 +1,12 @@
 @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) {
+	display: block;
+
 	.divider {
 		margin-block: var(--pr-t-spacings-300);
 	}
@@ -34,12 +37,13 @@
 
 	@at-root ($atRoot) {
 		.form-header {
+			display: block;
 			margin-block-end: var(--pr-t-spacings-300);
 		}
 
 		.form-header-title {
-			margin: 0;
-			padding: 0;
+			@include title.component;
+			@include title.h1;
 		}
 
 		.form-header-mandatory {

package/src/components/highlightData/mods.scss

@@ -30,7 +30,7 @@
 @mixin illustrations {
 	--components-highlightData-display: flex;
 	--components-highlightData-alignItem: start;
-	--components-highlightData-action-padding: var(--pr-t-spacings-100);
+	--components-highlightData-action-padding: var(--pr-t-spacings-150);
 
 	padding-inline-end: calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline));
 }

package/src/components/indexTable/mods.scss

@@ -310,7 +310,7 @@
 		.indexTable-head-row-cell,
 		.indexTable-body-row-cell,
 		.indexTable-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -323,14 +323,14 @@
 				.indexTable-head-row-cell,
 				.indexTable-body-row-cell,
 				.indexTable-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--cell-width, auto);
 	max-inline-size: var(--cell-width, auto);
 	inline-size: var(--cell-width, auto);