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

package/src/components/inputFramed/component.scss

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

package/src/components/inputFramed/index.scss

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

package/src/components/inputFramed/mods.scss

@@ -1,3 +1,13 @@
 @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,11 +28,3 @@
 @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,8 +2,14 @@
 	--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-150);
+	--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-header-backgroundColor: transparent;
-	--components-inputFramed-header-info-color: inherit;
 	--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);
 }

package/src/components/multiSelect/component.scss

@@ -34,13 +34,6 @@
 			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/plgPush/component.scss

@@ -59,5 +59,9 @@
 			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,6 +19,10 @@
 	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));
 
@@ -32,6 +36,32 @@
 		}
 	}
 
+	// 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);
@@ -102,8 +132,12 @@
 			border-block-start: 0;
 		}
 
-		.richTextField-toolbar-chips-item {
+		.richTextField-toolbar-chips-chip {
 			border: 0;
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
 		}
 
 		.richTextField-content {

package/src/components/richText/index.scss

@@ -1,6 +1,5 @@
 @use 'exports' as *;
 
-
 .richTextField {
 	@layer components {
 		@include vars;
@@ -8,10 +7,6 @@
 	}
 
 	@layer mods {
-		&:has(.richTextField-content:focus-visible) {
-			@include focusVisible;
-		}
-
 		&:hover {
 			@include hover;
 		}
@@ -33,27 +28,3 @@
 		}
 	}
 }
-
-@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,9 +1,3 @@
-@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);
 }
@@ -25,26 +19,3 @@
 @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,6 +16,10 @@
 	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 cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -36,14 +36,14 @@
 				.table-head-row-cell,
 				.table-body-row-cell,
 				.table-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--cell-width, auto);
 	inline-size: var(--cell-width, auto);
 }

package/src/components/tableOfContent/component.scss

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

package/src/components/tableOfContent/index.scss

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

package/src/components/textfields/index.scss

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

package/src/components/textfields/states.scss

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

package/src/components/tooltip/component.scss

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