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

package/src/components/inputFramed/component.scss

@@ -3,7 +3,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	position: relative;
 	overflow: hidden;
-	padding: var(--components-inputFramed-padding);
+	padding: var(--pr-t-spacings-50);
 	border: solid 1px var(--components-inputFramed-borderColor);
 	border-radius: var(--pr-t-border-radius-default);
 	background-color: var(--palettes-neutral-0);
@@ -16,7 +16,8 @@
 	@at-root ($atRoot) {
 		.inputFramed-header-label.formLabel {
 			position: static;
-			font-weight: var(--components-inputFramed-header-label-fontWeight);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
+
 
 			&::after {
 				content: '';
@@ -26,24 +27,16 @@
 		}
 
 		.inputFramed-header-field {
+			flex: 1;
+
 			&.form-field.form-field {
 				position: static;
 				margin-block: 0;
 			}
 		}
 
-		.inputFramed-header-input.radioField-input,
-		.inputFramed-header-input.checkboxField-input {
-			~ .inputFramed-header-icon.radioField-icon,
-			~ .inputFramed-header-icon.checkboxField-icon {
-				&::after {
-					outline: none;
-				}
-			}
-		}
-
 		.inputFramed-header {
-			padding: var(--components-inputFramed-header-padding);
+			padding: var(--components-inputFramed-padding);
 			border-radius: var(--pr-t-border-radius-50);
 			background-color: var(--components-inputFramed-header-backgroundColor);
 			transition-property: background-color;
@@ -51,6 +44,7 @@
 			position: relative;
 			flex-grow: 1;
 			display: flex;
+			flex-wrap: wrap;
 			justify-content: space-between;
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);
@@ -66,8 +60,8 @@
 		.inputFramed-header-info {
 			flex-basis: 100%;
 			border-block-start: 1px solid var(--components-inputFramed-header-info-borderColor);
-			padding-block-start: var(--components-inputFramed-header-info-paddingBlockStart);
-			margin-block-start: var(--components-inputFramed-header-info-marginBlockStart);
+			margin-block-start: var(--pr-t-spacings-100);
+			padding-block-start: var(--pr-t-spacings-200);
 			color: var(--components-inputFramed-header-info-color);
 
 			&:empty {
@@ -77,8 +71,8 @@
 
 		.inputFramed-content {
 			display: var(--components-inputFramed-content-display);
-			padding: var(--components-inputFramed-content-padding);
-			margin-block-start: var(--components-inputFramed-content-marginBlockStart);
+			padding: var(--components-inputFramed-padding);
+			margin-block-start: var(--pr-t-spacings-50);
 		}
 	}
 }

package/src/components/inputFramed/index.scss

@@ -22,6 +22,8 @@
 
 		&:has(.inputFramed-header-input:focus-visible) {
 			@include a11y.focusVisible;
+
+			@include focusVisible;
 		}
 
 		&:has(.inputFramed-header-input[aria-invalid="true"]) {
@@ -38,14 +40,10 @@
 				@include disabled;
 			}
 		}
+	}
 
-		&.mod-center {
-			@include center;
-		}
-
-		&.mod-L {
-			@include L;
-		}
+	&.mod-center {
+		@include center;
 	}
 }
 

package/src/components/inputFramed/mods.scss

@@ -1,13 +1,3 @@
 @mixin center {
 	--components-inputFramed-header-alignItems: center;
 }
-
-@mixin L {
-	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);
-	--components-inputFramed-padding: var(--pr-t-spacings-50);
-	--components-inputFramed-header-padding: var(--pr-t-spacings-150);
-	--components-inputFramed-content-padding: var(--pr-t-spacings-150);
-	--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);
-	--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);
-	--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200);
-}

package/src/components/inputFramed/states.scss

@@ -28,3 +28,11 @@
 @mixin criticalHover {
 	--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover);
 }
+
+@mixin focusVisible {
+	.inputFramed-header-icon {
+		&::after {
+			outline: none;
+		}
+	}
+}

package/src/components/inputFramed/vars.scss

@@ -2,14 +2,8 @@
 	--components-inputFramed-content-display: none;
 	--components-inputFramed-borderColor: var(--palettes-neutral-300);
 	--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);
-	--components-inputFramed-padding: var(--pr-t-spacings-25);
-	--components-inputFramed-header-padding: var(--pr-t-spacings-75);
-	--components-inputFramed-content-padding: var(--pr-t-spacings-75);
-	--components-inputFramed-content-marginBlockStart: 0;
+	--components-inputFramed-padding: var(--pr-t-spacings-150);
 	--components-inputFramed-header-backgroundColor: transparent;
-	--components-inputFramed-header-alignItems: normal;
-	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-regular);
 	--components-inputFramed-header-info-color: inherit;
-	--components-inputFramed-header-info-marginBlockStart: 0;
-	--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);
+	--components-inputFramed-header-alignItems: normal;
 }

package/src/components/multiSelect/component.scss

@@ -34,6 +34,13 @@
 			min-inline-size: 0;
 		}
 
+		.multipleSelect-displayer-chip-value {
+			max-inline-size: 8rem;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
 		.multipleSelect-displayer-search {
 			display: block;
 			min-inline-size: 2rem;

package/src/components/multiSelect/index.scss

@@ -25,6 +25,22 @@
 			}
 		}
 
+		&:not(.mod-filterPill) {
+			.multipleSelect-displayer {
+				&.mod-filter {
+					@include displayerFilter;
+
+					&.is-filled {
+						@include displayerFilterFilled;
+					}
+
+					&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
+						@include displayerFilterExpanded;
+					}
+				}
+			}
+		}
+
 		&.is-selected {
 			@include selected;
 		}
@@ -61,19 +77,3 @@
 		min-inline-size: 0;
 	}
 }
-
-@layer mods {
-	.multipleSelect-displayer {
-		&.mod-filter {
-			@include displayerFilter;
-
-			&.is-filled {
-				@include displayerFilterFilled;
-			}
-
-			&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
-				@include displayerFilterExpanded;
-			}
-		}
-	}
-}

package/src/components/multiSelect/mods.scss

@@ -79,6 +79,8 @@
 		padding: var(--components-multiSelect-padding);
 		z-index: 1;
 		position: relative;
+		max-block-size: min(14rem, 80vh);
+		overflow: auto;
 	}
 
 	.lu-picker-content {

package/src/components/plgPush/component.scss

@@ -59,9 +59,5 @@
 			gap: var(--pr-t-spacings-25);
 			padding: var(--pr-t-spacings-0);
 		}
-
-		.plgPush-close {
-			margin-inline-start: auto;
-		}
 	}
 }

package/src/components/richText/component.scss

@@ -19,10 +19,6 @@
 	max-block-size: var(--components-richTextField-maxHeight);
 	block-size: calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));
 
-	&:has(.richTextField-content:focus-visible) {
-		@include a11y.focusVisible;
-	}
-
 	&:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) {
 		min-block-size: calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600));
 
@@ -36,32 +32,6 @@
 		}
 	}
 
-	// specificity must be higher here
-	.richTextField-toolbar-button.button.button {
-		&[aria-pressed='true'] {
-			--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
-			--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
-
-			&:hover {
-				--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
-				--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600));
-			}
-
-			&:active {
-				--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
-			}
-
-			&:focus-visible {
-				@include a11y.focusVisible;
-			}
-
-			&:disabled {
-				--components-button-color: var(--commons-disabled-background);
-				--components-button-backgroundColor: var(--palettes-neutral-500);
-			}
-		}
-	}
-
 	@at-root ($atRoot) {
 		.richTextField-toolbar {
 			display: var(--components-richTextField-toolbar-display);
@@ -132,12 +102,8 @@
 			border-block-start: 0;
 		}
 
-		.richTextField-toolbar-chips-chip {
+		.richTextField-toolbar-chips-item {
 			border: 0;
-
-			&:focus-visible {
-				@include a11y.focusVisible;
-			}
 		}
 
 		.richTextField-content {

package/src/components/richText/index.scss

@@ -1,5 +1,6 @@
 @use 'exports' as *;
 
+
 .richTextField {
 	@layer components {
 		@include vars;
@@ -7,6 +8,10 @@
 	}
 
 	@layer mods {
+		&:has(.richTextField-content:focus-visible) {
+			@include focusVisible;
+		}
+
 		&:hover {
 			@include hover;
 		}
@@ -28,3 +33,27 @@
 		}
 	}
 }
+
+@layer mods {
+	.richTextField-toolbar-button.button.mod-onlyIcon {
+		&[aria-pressed='true'] {
+			@include buttonPressed;
+
+			&:hover {
+				@include buttonPressedHover;
+			}
+
+			&:active {
+				@include buttonPressedActive;
+			}
+
+			&:focus-visible {
+				@include buttonPressedFocusVisible;
+			}
+
+			&:disabled {
+				@include buttonPressedDisabled;
+			}
+		}
+	}
+}

package/src/components/richText/states.scss

@@ -1,3 +1,9 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}
+
 @mixin hover {
 	--components-richTextField-borderColor: var(--pr-t-color-input-border-hover);
 }
@@ -19,3 +25,26 @@
 @mixin errorHover {
 	--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover);
 }
+
+@mixin buttonPressed {
+	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
+	--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
+}
+
+@mixin buttonPressedHover {
+	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
+	--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600));
+}
+
+@mixin buttonPressedActive {
+	--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
+}
+
+@mixin buttonPressedFocusVisible {
+	@include a11y.focusVisible;
+}
+
+@mixin buttonPressedDisabled {
+	--components-button-color: var(--commons-disabled-background);
+	--components-button-backgroundColor: var(--palettes-neutral-500);
+}

package/src/components/scrollBox/component.scss

@@ -16,10 +16,6 @@
 	margin-block: var(--components-scrollBox-marginBlock);
 	border-radius: var(--pr-t-border-radius-default);
 
-	> * {
-		flex-shrink: 0;
-	}
-
 	&:focus-visible {
 		@include a11y.focusVisible($offset: 0);
 	}

package/src/components/tableFixed/mods.scss

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

package/src/components/tableOfContent/component.scss

@@ -12,8 +12,7 @@
 			@include reset.list;
 		}
 
-		// Second selector to get rid of tableOfContent-list-item-action on angular component
-		.tableOfContent-list-item-action, .tableOfContent-list-item > a {
+		.tableOfContent-list-item-action {
 			@include reset.button;
 
 			border-radius: var(--pr-t-border-radius-default);

package/src/components/tableOfContent/index.scss

@@ -7,8 +7,7 @@
 	}
 }
 
-// Second selector to get rid of tableOfContent-list-item-action on angular component
-.tableOfContent-list-item-action, .tableOfContent-list-item > a  {
+.tableOfContent-list-item-action {
 	@layer mods {
 		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {

package/src/components/textfields/index.scss

@@ -391,15 +391,15 @@
 
 		.textfield-input {
 			&:is(:hover) {
-				@include inputFramedHover;
+				@include framedInputHover;
 			}
 
 			&:is(:focus) {
-				@include inputFramedFocus;
+				@include framedInputFocus;
 			}
 
 			&:is(:invalid, .is-invalid, .invalid) {
-				@include inputFramedInvalid;
+				@include framedInputInvalid;
 			}
 		}
 	}

package/src/components/textfields/states.scss

@@ -40,7 +40,7 @@
 	}
 }
 
-@mixin inputFramedHover {
+@mixin framedInputHover {
 	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 		position: relative;
 		z-index: 1;
@@ -49,7 +49,7 @@
 	}
 }
 
-@mixin inputFramedFocus {
+@mixin framedInputFocus {
 	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 		position: relative;
 		z-index: 4;
@@ -60,7 +60,7 @@
 	}
 }
 
-@mixin inputFramedInvalid {
+@mixin framedInputInvalid {
 	~ .textfield-label {
 		color: var(--palettes-error-700);
 	}

package/src/components/tooltip/component.scss

@@ -16,7 +16,6 @@
 	animation-name: scaleIn;
 	animation-duration: var(--commons-animations-durations-fast);
 	animation-iteration-count: 1;
-	hyphens: auto;
 	overflow-wrap: break-word;
 
 	@include keyframe.scaleIn;

package/src/components/verticalNavigation/component.scss

@@ -17,7 +17,6 @@
 		.verticalNavigation-list {
 			@include reset.list;
 
-			background-color: var(--pr-t-elevation-surface-raised);
 			margin-block-end: var(--pr-t-spacings-200);
 		}
 

package/src/components/verticalNavigation/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-  --components-verticalNavigation-link-background: var(--pr-t-elevation-surface-raised);
+  --components-verticalNavigation-link-background: transparent;
   --components-verticalNavigation-link-color: var(--pr-t-color-text);
   --components-verticalNavigation-horizontalPadding: var(--pr-t-spacings-150);
 }