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

package/src/components/indexTable/mods.scss

@@ -192,7 +192,7 @@
 
 		&::before {
 			content: attr(data-label);
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 	}
 

package/src/components/inlineMessage/index.scss

@@ -10,9 +10,7 @@
 		&.mod-S {
 			@include S;
 		}
-	}
 
-	@layer states {
 		&.is-success {
 			@include success;
 		}

package/src/components/inputFramed/component.scss

@@ -16,7 +16,7 @@
 	@at-root ($atRoot) {
 		.inputFramed-header-label.formLabel {
 			position: static;
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 
 
 			&::after {
@@ -56,6 +56,7 @@
 			justify-content: space-between;
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);
+			align-items: var(--components-inputFramed-header-alignItems);
 		}
 
 		.inputFramed-header-illustration {

package/src/components/inputFramed/index.scss

@@ -7,7 +7,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:hover {
 			@include hover;
 		}
@@ -39,6 +39,10 @@
 			}
 		}
 	}
+
+	&.mod-center {
+		@include center;
+	}
 }
 
 .inputFramedWrapper {

package/src/components/inputFramed/mods.scss

@@ -0,0 +1,3 @@
+@mixin center {
+	--components-inputFramed-header-alignItems: center;
+}

package/src/components/inputFramed/vars.scss

@@ -5,4 +5,5 @@
 	--components-inputFramed-padding: var(--pr-t-spacings-150);
 	--components-inputFramed-header-backgroundColor: transparent;
 	--components-inputFramed-header-info-color: inherit;
+	--components-inputFramed-header-alignItems: normal;
 }

package/src/components/label/component.scss

@@ -9,7 +9,7 @@
 	border-radius: var(--pr-t-border-radius-full);
 	font-size: var(--pr-t-font-body-S-fontSize);
 	line-height: var(--pr-t-font-body-XS-lineHeight);
-	font-weight: 600;
+	font-weight: var(--pr-t-font-fontWeight-semibold);
 	padding-block: var(--pr-t-spacings-50);
 	padding-inline: var(--pr-t-spacings-100);
 

package/src/components/layout/index.scss

@@ -66,7 +66,7 @@
 }
 
 html {
-	@layer states {
+	@layer mods {
 		&:is(.has-overlay, .withOverlay) {
 			@include overlay;
 		}

package/src/components/link/index.scss

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

package/src/components/listboxOption/index.scss

@@ -51,9 +51,7 @@
 		&[aria-hidden="true"] {
 			@include empty;
 		}
-	}
 
-	@layer states {
 		&[aria-selected="true"],
 		&[aria-checked="true"] {
 			> .listboxOption-content {
@@ -94,7 +92,7 @@
 		@include varsContent;
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-hovered,
 		&:hover {
 			@include hover;
@@ -120,13 +118,11 @@
 		}
 	}
 
-	@layer states {
+	@layer mods {
 		&[aria-busy="true"] {
 			@include busy;
 		}
-	}
 
-	@layer mods {
 		&.mod-empty {
 			@include empty;
 		}

package/src/components/main/index.scss

@@ -1,7 +1,7 @@
 @use 'exports' as *;
 
 .main {
-	@layer states {
+	@layer mods {
 		&:is(.is-notScrollable, .notScrollable) {
 			@include notScrollable;
 		}

package/src/components/mainLayout/index.scss

@@ -24,8 +24,8 @@
 	}
 }
 
-.mainLayout-content-inside {
-	@layer mods {
+@layer mods {
+	.mainLayout-content-inside {
 		&:has(.mainLayout-content-inside-block.mod-overflow) {
 			.mainLayout-content-inside-header {
 				@include stickyHeader;

package/src/components/mobileNavigation/component.scss

@@ -43,7 +43,7 @@
 
 			&[aria-current='page'] {
 				color: var(--palettes-product-700);
-				font-weight: 600;
+				font-weight: var(--pr-t-font-fontWeight-semibold);
 			}
 		}
 

package/src/components/multiSelect/component.scss

@@ -86,7 +86,7 @@
 		}
 
 		.multipleSelect-pill-displayer-label {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 	}
 }

package/src/components/multiSelect/index.scss

@@ -13,10 +13,18 @@
 
 		&.mod-filterPill {
 			@include filterPill;
+
+			&:has(.multipleSelect-displayer-search:focus-visible) {
+				@include filterPillFocused;
+			}
+
+			.multipleSelect-displayer {
+				&:has(.multipleSelect-displayer-search:focus-visible) {
+					@include filterPillDisplayerFocused;
+				}
+			}
 		}
-	}
 
-	@layer states {
 		&.is-selected {
 			@include selected;
 		}
@@ -48,14 +56,14 @@
 	}
 }
 
-.multipleSelect-displayer-filter {
-	@layer components {
+@layer components {
+	.multipleSelect-displayer-filter {
 		min-inline-size: 0;
 	}
 }
 
-.multipleSelect-displayer {
-	@layer mods {
+@layer mods {
+	.multipleSelect-displayer {
 		&.mod-filter {
 			@include displayerFilter;
 

package/src/components/multiSelect/mods.scss

@@ -73,20 +73,12 @@
 	inline-size: 21rem;
 	max-inline-size: calc(100vw - 2.5rem);
 
-	&:has(.multipleSelect-displayer-search:focus-visible) {
-		outline: none;
-	}
-
 	.multipleSelect-displayer {
 		box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
 		border-radius: var(--pr-t-border-radius-input);
 		padding: var(--components-multiSelect-padding);
 		z-index: 1;
 		position: relative;
-
-		&:has(.multipleSelect-displayer-search:focus-visible) {
-			@include a11y.focusVisible($offset: 3px);
-		}
 	}
 
 	.lu-picker-content {

package/src/components/multiSelect/states.scss

@@ -59,3 +59,11 @@
 		}
 	}
 }
+
+@mixin filterPillFocused {
+	outline: none;
+}
+
+@mixin filterPillDisplayerFocused {
+	@include a11y.focusVisible($offset: 3px);
+}

package/src/components/navside/component.scss

@@ -123,7 +123,7 @@
 			line-height: var(--pr-t-font-body-S-lineHeight);
 			padding-block: var(--pr-t-spacings-150);
 			padding-inline: var(--pr-t-spacings-200);
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.navSide-item-link-badgesOptional {
@@ -157,7 +157,7 @@
 		}
 
 		.navSide-item-subMenu-link {
-			font-weight: 400;
+			font-weight: var(--pr-t-font-fontWeight-regular);
 			padding-block: var(--pr-t-spacings-100);
 			padding-inline: var(--pr-t-spacings-600) var(--pr-t-spacings-200);
 			font-size: var(--pr-t-font-body-S-fontSize);

package/src/components/navside/index.scss

@@ -38,15 +38,11 @@
 				}
 			}
 		}
-	}
 
-	@layer mods {
 		@include media.max('S') {
 			@include mobile;
 		}
-	}
 
-	@layer states {
 		@include media.max('S') {
 			&:not(.is-open, .open) {
 				.navSide-item {
@@ -64,9 +60,7 @@
 				}
 			}
 		}
-	}
 
-	@layer mods {
 		@include media.max('S') {
 			&.mod-withBanner {
 				.navSide-item {
@@ -79,14 +73,12 @@
 	}
 }
 
-.navSide-item {
-	@layer mods {
+@layer mods {
+	.navSide-item {
 		&.mod-mobileToggle {
 			@include mobileToggle;
 		}
-	}
 
-	@layer states {
 		&:not(.is-open) {
 			@include notOpen;
 		}
@@ -105,11 +97,9 @@
 			}
 		}
 	}
-}
 
-.navSide-item-subMenu-link,
-.navSide-item-link {
-	@layer states {
+	.navSide-item-subMenu-link,
+	.navSide-item-link {
 		&:is(.is-active, .active) {
 			@include active;
 		}
@@ -118,10 +108,8 @@
 			@include expanded;
 		}
 	}
-}
 
-html {
-	@layer states {
+	html {
 		&:is(.hasMenu, .withMenu) {
 			@include media.max('S') {
 				@include overlay;

package/src/components/newBadge/component.scss

@@ -1,7 +1,7 @@
 @mixin component {
 	display: inline-flex;
 	font: var(--pr-t-font-body-XS);
-	font-weight: 600;
+	font-weight: var(--pr-t-font-fontWeight-semibold);
 	background-color: var(--components-newBadge-backgroundColor);
 	color: var(--components-newBadge-color);
 	padding-block: 0;

package/src/components/numericBadge/component.scss

@@ -10,7 +10,7 @@
 	font: var(--components-numericBadge-font);
 	font-size: var(--components-numericBadge-fontSize); // Deprecated
 	line-height: var(--components-numericBadge-lineHeight); // Deprecated
-	font-weight: 600;
+	font-weight: var(--pr-t-font-fontWeight-semibold);
 	background-color: var(--components-numericBadge-background);
 	color: var(--components-numericBadge-color);
 	border-radius: var(--components-numericBadge-borderRadius);

package/src/components/numericBadge/index.scss

@@ -14,9 +14,7 @@
 		&.mod-XS {
 			@include XS;
 		}
-	}
 
-	@layer states {
 		&.is-loading {
 			@include loading;
 

package/src/components/numericBadge/states.scss

@@ -25,3 +25,8 @@
 @mixin focusVisible {
 	@include a11y.focusVisible;
 }
+
+@mixin state {
+	--components-numericBadge-background: transparent;
+	--components-numericBadge-color: transparent;
+}

package/src/components/pagination/index.scss

@@ -14,7 +14,7 @@
 }
 
 .pagination-navigation-item {
-	@layer states {
+	@layer mods {
 		&:is(.is-ellipsis, .ellipsis) {
 			@include ellipsis;
 		}

package/src/components/plgPush/component.scss

@@ -50,7 +50,7 @@
 		}
 
 		.plgPush-content-title {
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
 		.plgPush-content-link {

package/src/components/popover/component.scss

@@ -36,23 +36,6 @@
 		.popover-contentOptional {
 			padding: var(--components-popover-padding);
 		}
-
-		.popover-close {
-			@include button.outlined;
-			@include button.XS;
-			@include button.onlyIconXS;
-
-			padding: 0;
-			border-radius: 50%;
-			position: absolute;
-			inset-inline-start: calc(var(--pr-t-spacings-100) * -1);
-			inset-block-start: calc(var(--pr-t-spacings-100) * -1);
-			z-index: 2;
-
-			&:not(:focus-visible) {
-				@include a11y.mask;
-			}
-		}
 	}
 
 	@keyframes popup {

package/src/components/progress/index.scss

@@ -10,9 +10,7 @@
 		&.mod-indeterminate {
 			@include indeterminate;
 		}
-	}
 
-	@layer states {
 		&:is(.is-success, .success, .palette-success) {
 			@include success;
 		}

package/src/components/radio/index.scss

@@ -18,7 +18,7 @@
 }
 
 .radio-input {
-	@layer states {
+	@layer mods {
 		&[disabled],
 		&[read-only] {
 			@include disabled;

package/src/components/radioButtons/index.scss

@@ -17,8 +17,8 @@
 	}
 }
 
-.radioButtons-item-input {
-	@layer states {
+@layer mods {
+	.radioButtons-item-input {
 		&:is(:disabled, .is-disabled, .disabled) {
 			@include disabled;
 		}

package/src/components/radioField/index.scss

@@ -14,7 +14,7 @@
 }
 
 .radioField-input {
-	@layer states {
+	@layer mods {
 		&:focus-visible {
 			@include focusVisible;
 		}

package/src/components/readMore/component.scss

@@ -20,7 +20,7 @@
 				var(--components-readMore-link-backgroudColor) calc(var(--components-readMore-link-paddingInlineStart) - var(--pr-t-spacings-100))
 			);
 			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
-			font-weight: 600;
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			text-decoration: none;
 
 			&::before {
@@ -44,7 +44,8 @@
 			content: var(--components-readMore-content-lastChild-content) / '';
 			visibility: hidden;
 			white-space: nowrap;
-			font-weight: 600;
+			font: var(--pr-t-font-body-M);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
 		}
 
@@ -56,17 +57,32 @@
 			padding: var(--pr-t-spacings-50);
 			margin: calc(var(--pr-t-spacings-50) * -1);
 
-			&:not(:has(> p)) {
+			$notPlainText: '> p, > ul, > ol, > h1, > h2, > h3, > h4, > h5, > h6';
+			$wrappingElements: 'ol, ul';
+
+			&:not(:has(#{$notPlainText})) {
 				&::after {
 					@extend %after;
 				}
 			}
 
-			&:has(> p) {
+			&:has(#{$notPlainText}) {
 				> * {
 					&:last-child {
-						&::after {
-							@extend %after;
+						&:not(#{$wrappingElements}) {
+							&::after {
+								@extend %after;
+							}
+						}
+
+						&:is(#{$wrappingElements}) {
+							> * {
+								&:last-child {
+									&::after {
+										@extend %after;
+									}
+								}
+							}
 						}
 					}
 				}

package/src/components/readMore/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
 			@include expanded;
 		}
@@ -14,9 +14,7 @@
 		&.is-disabled {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
 		&.mod-openOnly {
 			&:has(.readMore-link[aria-expanded='true']) {
 				@include disabled;

package/src/components/readMore/states.scss

@@ -6,6 +6,8 @@
 }
 
 @mixin disabled {
+	--components-readMore-content-lastChild-content: none !important;
+
 	.readMore-link.link {
 		@include a11y.mask;
 	}

package/src/components/richText/component.scss

@@ -131,9 +131,7 @@
 		}
 
 		.richTextField-toolbar-chips-item {
-			@include reset.button;
-
-			width: auto;
+			border: 0;
 		}
 
 		.richTextField-content {

package/src/components/richText/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:hover {
 			@include hover;
 		}
@@ -22,9 +22,7 @@
 		&.is-disabled {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
 		&.mod-autoResize {
 			@include autoResize;
 		}

package/src/components/scrollBox/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&.is-firstVisible {
 			@include firstVisible;
 		}

package/src/components/segmentedControl/component.scss

@@ -100,6 +100,7 @@
 		.segmentedControl_panel,
 		.viewTabs_panel {
 			display: var(--components-segmentedControl-display, block);
+			border-radius: var(--pr-t-border-radius-default);
 
 			&:focus-visible {
 				@include a11y.focusVisible;

package/src/components/segmentedControl/index.scss

@@ -24,28 +24,24 @@
 	}
 }
 
-// .viewTabs-item-tab is deprecated
-.segmentedControl-item-action,
-.viewTabs-item-tab {
-	@layer states {
+@layer mods {
+	// .viewTabs-item-tab is deprecated
+	.segmentedControl-item-action,
+	.viewTabs-item-tab {
 		.segmentedControl-item-input:checked + &,
 		&[aria-selected='true'] {
 			@include selected;
 		}
 	}
-}
 
-.segmentedControl-item-action:disabled,
-.segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
-	@layer states {
+	.segmentedControl-item-action:disabled,
+	.segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
 		@include disabled;
 	}
-}
 
-// .viewTabs_panel is deprecated
-.segmentedControl_panel,
-.viewTabs_panel {
-	@layer states {
+	// .viewTabs_panel is deprecated
+	.segmentedControl_panel,
+	.viewTabs_panel {
 		&:not(.is-active, .active) {
 			@include panelInactive;
 		}

package/src/components/simpleSelect/index.scss

@@ -6,7 +6,7 @@
 		@include component;
 	}
 
-	@layer states {
+	@layer mods {
 		&:has(.simpleSelect-field-input:focus-visible) {
 			@include focused;
 
@@ -31,9 +31,7 @@
 		&:has(.simpleSelect-field-input:disabled) {
 			@include disabled;
 		}
-	}
 
-	@layer mods {
 		&.mod-S {
 			@include S;
 		}
@@ -45,9 +43,7 @@
 		&.mod-filterPill {
 			@include filterPill;
 		}
-	}
 
-	@layer states {
 		&.is-searchFilled {
 			@include searchFilled;
 		}