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

package/package.json

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

package/src/components/breadcrumbs/component.scss

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

package/src/components/breadcrumbs/index.scss

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

package/src/components/breadcrumbs/mods.scss

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

package/src/components/button/index.scss

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

package/src/components/calendar/component.scss

@@ -182,8 +182,6 @@
 		.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 {
@@ -218,7 +216,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: 100%;
+			block-size: var(--pr-t-spacings-400);
 			text-transform: lowercase;
 			box-shadow:
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),

package/src/components/callout/component.scss

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

package/src/components/calloutPopover/component.scss

@@ -22,12 +22,6 @@
 	}
 
 	@at-root ($atRoot) {
-		.calloutPopover-content {
-			&:empty {
-				display: none;
-			}
-		}
-
 		.calloutPopover-icon {
 			color: var(--palettes-700, var(--palettes-neutral-700));
 		}
@@ -35,30 +29,33 @@
 		.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);
-			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);
+			padding: 0;
 		}
 
-		.calloutPopover-overlay-icon {
+		.calloutPopover-overlay-head-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,8 +24,9 @@
 
 @mixin overlayS {
 	--components-calloutPopover-width: 20rem;
+	--components-calloutPopover-content-margin: 1.75rem;
 
-	.calloutPopover-overlay-icon {
+	.calloutPopover-overlay-head-icon {
 		@include icon.S;
 	}
 
@@ -40,7 +41,9 @@
 }
 
 @mixin overlayIconless {
-	.calloutPopover-overlay-icon {
+	--components-calloutPopover-content-margin: 0;
+
+	.calloutPopover-overlay-head-icon {
 		display: none;
 	}
 }

package/src/components/calloutPopover/vars.scss

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

package/src/components/chip/component.scss

@@ -15,13 +15,8 @@
 	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,9 +28,5 @@
 		&.is-disabled {
 			@include disabled;
 		}
-
-		&:has(.chip-content:focus-visible) {
-			@include focusVisible;
-		}
 	}
 }

package/src/components/chip/mods.scss

@@ -38,7 +38,3 @@
 		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: var(--components-clear-display);
+	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr;
 	grid-template-areas: 'main';

package/src/components/clear/index.scss

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

package/src/components/clear/mods.scss

@@ -38,6 +38,6 @@
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-product-100);
+		--components-clear-background: var(--palettes-product-50);
 	}
 }

package/src/components/clear/states.scss

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

package/src/components/clear/vars.scss

@@ -1,5 +1,4 @@
 @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: auto;
+			overflow: var(--components-dataTable-overflow);
 			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
 			display: block;
@@ -80,6 +80,10 @@
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
+
+				.checkboxField {
+					--component-checkboxField-top: 0;
+				}
 			}
 		}
 
@@ -100,12 +104,6 @@
 
 		.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 {
@@ -116,6 +114,7 @@
 			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: 0 var(--pr-t-spacings-50);
+	padding-inline: var(--pr-t-spacings-50);
 	text-align: end;
 	white-space: nowrap;
 
@@ -142,7 +142,7 @@
 	}
 }
 
-@mixin cellInlineSize {
+@mixin cellFixedWidth {
 	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 cellInlineSize;
+			@include cellFixedWidth;
 		}
 	}
 
@@ -162,7 +162,7 @@
 				.dataTable-head-row-cell,
 				.dataTable-body-row-cell,
 				.dataTable-foot-row-cell {
-					@include cellInlineSize;
+					@include cellFixedWidth;
 				}
 			}
 		}

package/src/components/dataTable/vars.scss

@@ -11,6 +11,7 @@
 	--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,12 +12,10 @@
 			@include stickyHeader;
 		}
 
-		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-columnsOverflow) {
 			@include columnsOverflow;
 		}
 
-		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-rowsOverflow) {
 			@include rowsOverflow;
 		}
@@ -45,14 +43,6 @@
 				@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,6 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin stickyHeader {
+	--components-dataTable-overflow: auto;
+
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
@@ -20,6 +22,8 @@
 }
 
 @mixin columnsOverflow {
+	--components-dataTable-overflow: auto;
+
 	display: flex;
 
 	&::before,
@@ -48,10 +52,11 @@
 }
 
 @mixin rowsOverflow {
+	--components-dataTable-overflow: auto;
+
 	.dataTableShadows {
 		display: flex;
 		flex-direction: column;
-		flex-grow: 1;
 
 		&::before,
 		&::after {
@@ -80,6 +85,8 @@
 }
 
 @mixin stickyColumn {
+	--components-dataTable-overflow: auto;
+
 	%addShadow {
 		content: '';
 		position: absolute;
@@ -123,8 +130,6 @@
 				&: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);
 					}
 				}
 			}
@@ -138,7 +143,6 @@
 					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,10 +18,3 @@
 	--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,6 +4,4 @@
 	--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-error-50);
-		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-critical-50);
 	}
 
 	&:active {
-		--components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
-		--components-dropdown-list-option-action-backgroundColor: var(--palettes-error-100);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-critical-100);
 	}
 }

package/src/components/filterPill/component.scss

@@ -104,6 +104,7 @@
 			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,5 +1,4 @@
 @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);
@@ -67,6 +66,7 @@
 	--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,6 +91,7 @@
 }
 
 @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);
@@ -101,8 +102,6 @@
 
 	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,6 +12,7 @@
 	--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,12 +1,9 @@
 @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);
 	}
@@ -37,13 +34,12 @@
 
 	@at-root ($atRoot) {
 		.form-header {
-			display: block;
 			margin-block-end: var(--pr-t-spacings-300);
 		}
 
 		.form-header-title {
-			@include title.component;
-			@include title.h1;
+			margin: 0;
+			padding: 0;
 		}
 
 		.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-150);
+	--components-highlightData-action-padding: var(--pr-t-spacings-100);
 
 	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 cellInlineSize;
+			@include cellFixedWidth;
 		}
 	}
 
@@ -323,14 +323,14 @@
 				.indexTable-head-row-cell,
 				.indexTable-body-row-cell,
 				.indexTable-foot-row-cell {
-					@include cellInlineSize;
+					@include cellFixedWidth;
 				}
 			}
 		}
 	}
 }
 
-@mixin cellInlineSize {
+@mixin cellFixedWidth {
 	min-inline-size: var(--cell-width, auto);
 	max-inline-size: var(--cell-width, auto);
 	inline-size: var(--cell-width, auto);