@lucca-front/scss 20.3.0-rc.2 → 20.3.0-rc.4

package/src/components/dialog/index.scss

@@ -3,58 +3,54 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-XS {
-			@include XS;
-		}
+	@include vars;
+	@include component;
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-fitContent {
-			@include fitContent;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-maxContent {
-			@include maxContent;
-		}
+	&.mod-fitContent {
+		@include fitContent;
+	}
 
-		&.mod-L {
-			@include L;
-		}
+	&.mod-maxContent {
+		@include maxContent;
+	}
 
-		&.mod-XL {
-			@include XL;
-		}
+	&.mod-L {
+		@include L;
+	}
 
-		&.mod-XXL {
-			@include XXL;
-		}
+	&.mod-XL {
+		@include XL;
+	}
 
-		&.mod-neutralBackground {
-			@include neutralBackground;
-		}
+	&.mod-XXL {
+		@include XXL;
+	}
 
-		&:where(.mod-drawer) {
-			@include drawer;
+	&.mod-neutralBackground {
+		@include neutralBackground;
+	}
 
-			&:where(.mod-fromBottom) {
-				@include fromBottom;
-			}
+	&:where(.mod-drawer) {
+		@include drawer;
 
-			@include media.max('XXS') {
-				@include fromBottom;
-			}
+		&:where(.mod-fromBottom) {
+			@include fromBottom;
 		}
 
-		&.mod-fullScreen {
-			@include fullScreen;
+		@include media.max('XXS') {
+			@include fromBottom;
 		}
 	}
+
+	&.mod-fullScreen {
+		@include fullScreen;
+	}
 }

package/src/components/divider/index.scss

@@ -1,18 +1,14 @@
 @use 'exports' as *;
 
 .divider {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-vertical {
-			@include vertical;
-		}
+	&.mod-vertical {
+		@include vertical;
 	}
 }

package/src/components/dropdown/component.scss

@@ -4,11 +4,11 @@
 @use '@lucca-front/scss/src/components/divider/exports' as divider;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	margin: calc(var(--pr-t-spacings-100) * -1);
 	padding: 0 !important;
 	border-radius: var(--pr-t-border-radius-structure);
-	max-inline-size: 90vw;
-	max-block-size: var(--components-dropdown-max-height);
+	min-inline-size: var(--components-dropdown-minInlineSize);
+	max-inline-size: var(--components-dropdown-maxInlineSize);
+	max-block-size: var(--components-dropdown-maxBlockSize);
 	overflow-x: hidden;
 	overflow-y: auto;
 
@@ -20,30 +20,49 @@
 			padding-block: var(--pr-t-spacings-50);
 			padding-inline: 0;
 			margin: 0;
-			min-inline-size: var(--components-dropdown-min-width);
-			max-inline-size: var(--components-dropdown-max-width);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-25);
+
+			.dropdown-list {
+				padding-block: 0;
+			}
 		}
 
 		// .lu-dropdown-options-item is deprecated
 		.dropdown-list-option,
 		.lu-dropdown-options-item {
 			padding-block: 0;
-			padding-inline: var(--pr-t-spacings-50);
 
-			&.mod-divider {
-				padding: 0;
+			&:not(:has(.divider.dropdown-list-option-divider, .dropdown-list-option), &.mod-divider) {
+				padding-inline: var(--pr-t-spacings-50);
+			}
+
+			&:has(> .dropdown-list) {
+				padding-block-start: var(--pr-t-spacings-100);
+				padding-inline: var(--pr-t-spacings-150);
+				color: var(--pr-t-color-text-subtle);
+				font: var(--pr-t-font-body-S);
+				font-weight: var(--pr-t-font-fontWeight-semibold);
+			}
+
+			> .dropdown-list {
+				color: var(--pr-t-color-text);
+				font: var(--pr-t-font-body-M);
+				font-weight: var(--pr-t-font-fontWeight-regular);
+				margin-block-start: var(--pr-t-spacings-50);
+				margin-inline: calc(var(--pr-t-spacings-150) * -1);
 			}
 		}
 
 		// .lu-dropdown-options-item-action is deprecated
 		.dropdown-list-option-action,
 		.lu-dropdown-options-item-action {
-			align-items: flex-start;
 			border: 0;
 			border-radius: var(--pr-t-border-radius-default);
-			color: var(--components-dropdown-optionColor);
-			background-color: var(--components-dropdown-option-actionBackground);
+			background-color: var(--components-dropdown-list-option-action-backgroundColor);
 			display: flex;
+			align-items: flex-start;
 			gap: var(--pr-t-spacings-100);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
@@ -51,32 +70,39 @@
 			transition: background-color var(--commons-animations-durations-fast);
 			text-decoration: none;
 			inline-size: 100%;
-			pointer-events: var(--components-dropdown-option-actionEvents);
+			pointer-events: var(--components-dropdown-list-option-action-pointerEvents);
 			cursor: pointer;
 
 			.lucca-icon {
 				@include icon.S;
 
-				margin-block-start: var(--pr-t-spacings-25);
+				margin-block: var(--pr-t-spacings-25);
 			}
 
 			&,
 			&:hover {
-				color: var(--components-dropdown-option-actionColor);
+				color: var(--components-dropdown-list-option-action-color);
 			}
 
 			&:hover,
 			&:focus-visible {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-25);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-50);
 			}
 
 			&:active {
-				--components-dropdown-option-actionBackground: var(--palettes-neutral-50);
+				--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-100);
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible;
+				@include a11y.focusVisible($offset: 0);
+
+				z-index: 1;
+				position: relative;
 			}
 		}
+
+		.divider.dropdown-list-option-divider {
+			--components-divider-marginBlock: var(--pr-t-spacings-25);
+		}
 	}
 }

package/src/components/dropdown/index.scss

@@ -3,23 +3,20 @@
 // .lu-dropdown-content is deprecated
 .dropdown,
 .lu-dropdown-content.lu-popover-content {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
+// .lu-dropdown-options-item-action is deprecated
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	@layer states {
-		&.is-disabled {
-			@include disabled;
-		}
+	&[disabled],
+	&.is-disabled {
+		@include disabled;
 	}
 
-	@layer mods {
-		&.mod-critical, &.mod-delete {
-			@include critical;
-		}
+	&.mod-critical,
+	&.mod-delete {
+		@include critical;
 	}
 }

package/src/components/dropdown/mods.scss

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

@@ -1,9 +1,10 @@
 @mixin disabled {
-	--components-dropdown-option-actionColor: var(--pr-t-color-text-disabled);
-	--components-dropdown-option-actionEvents: none;
+	--components-dropdown-list-option-action-color: var(--pr-t-color-text-disabled);
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: none;
 
 	&,
 	&:hover {
-		--components-dropdown-option-actionBackground: var(--palettes-neutral-0);
+		--components-dropdown-list-option-action-backgroundColor: var(--palettes-neutral-0);
 	}
 }

package/src/components/dropdown/vars.scss

@@ -1,8 +1,10 @@
 @mixin vars {
-	--components-dropdown-min-width: 10rem;
-	--components-dropdown-max-width: 30rem;
-	--components-dropdown-max-height: 60vh;
-	--components-dropdown-option-actionColor: currentColor;
-	--components-dropdown-option-actionBackground: transparent;
-	--components-dropdown-option-actionEvents: auto;
+	--components-dropdown-minInlineSize: 10rem;
+
+	--components-dropdown-maxInlineSize: 30rem;
+	--components-dropdown-maxBlockSize: min(60vh, 30rem);
+
+	--components-dropdown-list-option-action-color: currentColor;
+	--components-dropdown-list-option-action-backgroundColor: transparent;
+	--components-dropdown-list-option-action-pointerEvents: auto;
 }

package/src/components/emptyState/index.scss

@@ -1,18 +1,14 @@
 @use 'exports' as *;
 
 .emptyState {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-page {
-			@include page;
-		}
+	&.mod-page {
+		@include page;
+	}
 
-		&.mod-center {
-			@include center;
-		}
+	&.mod-center {
+		@include center;
 	}
 }

package/src/components/errorPage/index.scss

@@ -2,14 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .errorPage {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		@include media.max('S') {
-			@include compact;
-		}
+	@include media.max('S') {
+		@include compact;
 	}
 }

package/src/components/fancyBox/index.scss

@@ -2,14 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .fancyBox {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		@include media.max('XS') {
-			@include narrow;
-		}
+	@include media.max('XS') {
+		@include narrow;
 	}
 }

package/src/components/field/index.scss

@@ -2,105 +2,91 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 .form.mod-framed {
-	@layer mods {
-		.textfield,
-		.radiosfield,
-		.checkboxesfield {
-			@include framed;
-		}
-	}
-
-	@layer states {
-		.is-error {
-			@include fieldFramedState('error');
-			@include fieldFramedError('textfield');
-			@include fieldFramedError('radiosfield');
-			@include fieldFramedError('checkboxesfield');
-		}
-
-		.is-warning {
-			@include fieldFramedState('warning');
-		}
-
-		.is-valid,
-		.is-success {
-			@include fieldFramedState('success');
-		}
+	.textfield,
+	.radiosfield,
+	.checkboxesfield {
+		@include framed;
 	}
 }
 
 .textfield,
 .radiosfield,
 .checkboxesfield {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
 	}
 
-	@layer mods {
-		&.mod-inline {
-			@include inline;
-		}
+	&.mod-block {
+		@include block;
+	}
 
-		&.mod-block {
-			@include block;
-		}
+	&:is(.is-required, .required) {
+		@include required;
 	}
 
-	@layer states {
-		&:is(.is-required, .required) {
-			@include required;
-		}
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
 
-		&:is(.is-loading, .loading) {
-			@include loading;
-		}
+	&:is(.is-success, .success, .is-valid, .valid) {
+		@include success;
+	}
 
-		&:is(.is-success, .success, .is-valid, .valid) {
-			@include success;
-		}
+	&:is(.is-error, .error, .is-invalid, .invalid) {
+		@include error;
+	}
+
+	&.mod-compact {
+		@include compact;
 
-		&:is(.is-error, .error, .is-invalid, .invalid) {
-			@include error;
+		&.mod-block {
+			@include compactBlock;
 		}
 	}
 
-	@layer mods {
-		&.mod-compact {
-			@include compact;
+	&.mod-framed {
+		@include framed;
 
-			&.mod-block {
-				@include compactBlock;
-			}
+		&.mod-search {
+			@include framedSearch;
 		}
-	}
 
-	@layer mods {
-		&.mod-framed {
-			@include framed;
+		&.is-error {
+			@include fieldFramedState('error');
+			@include fieldFramedError('textfield');
+			@include fieldFramedError('radiosfield');
+			@include fieldFramedError('checkboxesfield');
+		}
 
-			&.mod-search {
-				@include framedSearch;
-			}
+		&.is-warning {
+			@include fieldFramedState('warning');
 		}
-	}
 
-	@layer states {
-		&.mod-framed {
-			&.is-error {
-				@include fieldFramedState('error');
-				@include fieldFramedError('textfield');
-				@include fieldFramedError('radiosfield');
-				@include fieldFramedError('checkboxesfield');
-			}
+		&.is-valid,
+		&.is-success {
+			@include fieldFramedState('success');
+		}
 
-			&.is-warning {
-				@include fieldFramedState('warning');
-			}
+		@at-root (namespace.$defaultAtRoot) {
+			.form.mod-framed {
+				.is-error {
+					@include fieldFramedState('error');
+					@include fieldFramedError('textfield');
+					@include fieldFramedError('radiosfield');
+					@include fieldFramedError('checkboxesfield');
+				}
+
+				.is-warning {
+					@include fieldFramedState('warning');
+				}
 
-			&.is-valid,
-			&.is-success {
-				@include fieldFramedState('success');
+				.is-valid,
+				.is-success {
+					@include fieldFramedState('success');
+				}
 			}
 		}
 	}
@@ -108,28 +94,24 @@
 	.textfield-input,
 	.radiosfield-input,
 	.checkboxesfield-input {
-		@layer states {
-			&:is([disabled], [readonly]) {
-				@include inputDisabled;
-			}
+		&:is([disabled], [readonly]) {
+			@include inputDisabled;
+		}
 
-			&:is(.is-valid, .valid, .is-success, .success) {
-				@include inputState('success');
-			}
+		&:is(.is-valid, .valid, .is-success, .success) {
+			@include inputState('success');
+		}
 
-			&:is(.is-warning, .warning) {
-				@include inputState('warning');
-			}
+		&:is(.is-warning, .warning) {
+			@include inputState('warning');
+		}
 
-			&:is(.is-invalid, .invalid, .is-error, .error) {
-				@include inputState('error');
-			}
+		&:is(.is-invalid, .invalid, .is-error, .error) {
+			@include inputState('error');
 		}
 
-		@layer mods {
-			&.mod-row {
-				@include inputRow;
-			}
+		&.mod-row {
+			@include inputRow;
 		}
 	}
 }
@@ -137,10 +119,8 @@
 .textfield-input,
 .radiosfield-input,
 .checkboxesfield-input {
-	@layer states {
-		&:is([required]),
-		&:is([aria-required='true']) {
-			@include required;
-		}
+	&:is([required]),
+	&:is([aria-required='true']) {
+		@include required;
 	}
 }

package/src/components/fieldset/index.scss

@@ -1,28 +1,22 @@
 @use 'exports' as *;
 
 .fieldset {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-horizontal {
-			@include horizontal;
-		}
+	&.mod-horizontal {
+		@include horizontal;
+	}
 
-		&.mod-expandable {
-			@include expandable;
-		}
+	&.mod-expandable {
+		@include expandable;
 	}
 
-	@layer states {
-		&:has(.fieldset-title-content[aria-expanded='true']) {
-			@include expanded;
-		}
+	&:has(.fieldset-title-content[aria-expanded='true']) {
+		@include expanded;
 	}
 }