@lucca-front/scss 20.3.0-rc.5 → 20.3.0

package/src/components/buttonGroup/index.scss

@@ -1,15 +1,27 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 .button-group {
-	@include vars;
-	@include component;
-
-	&.mod-outlined {
-		@include outlined;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	// .mod-text deprecated
-	&.mod-text, .mod-ghost {
-		@include ghost;
+	@layer mods {
+		&.mod-outlined {
+			@include outlined;
+		}
+
+		// .mod-text deprecated
+		&.mod-text,
+		&.mod-ghost {
+			@include ghost;
+		}
+
+		&:is(ul) {
+			.button.mod-more {
+				@include button.moreInsideUl;
+			}
+		}
 	}
 }

package/src/components/calendar/index.scss

@@ -2,75 +2,87 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .calendarWrapper {
-	@include wrapperVars;
-
-	&.mod-daysOffHidden {
-		@include daysOffHidden;
+	@layer components {
+		@include wrapperVars;
 	}
 
-	&.mod-daysOverflowingHidden {
-		@include daysOverflowingHidden;
+	@layer mods {
+		&.mod-daysOffHidden {
+			@include daysOffHidden;
+		}
+
+		&.mod-daysOverflowingHidden {
+			@include daysOverflowingHidden;
+		}
 	}
 }
 
 .calendar {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	// if rows have three columns (display for months and years)
-	&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
-		@include third;
+	@layer mods {
+		// if rows have three columns (display for months and years)
+		&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
+			@include third;
+		}
 	}
 }
 
 .calendarShortcuts {
-	@include media.max('S') {
-		display: none;
+	@layer components {
+		@include media.max('S') {
+			display: none;
+		}
 	}
 }
 
 .calendar-table-body-row-cell {
-	&.is-daysOff {
-		@include daysOff;
-	}
-
-	&.is-overflow {
-		@include overflow;
-	}
+	@layer mods {
+		&.is-daysOff {
+			@include daysOff;
+		}
 
-	&.is-current {
-		@include current;
-	}
+		&.is-overflow {
+			@include overflow;
+		}
 
-	&.is-selected,
-	&.is-selectionInProgress {
-		&:not(.is-overflow) {
-			@include selected;
+		&.is-current {
+			@include current;
 		}
-	}
 
-	&.is-singleDayInProgress,
-	&.is-start {
-		@include start;
-	}
+		&.is-selected,
+		&.is-selectionInProgress {
+			&:not(.is-overflow) {
+				@include selected;
+			}
+		}
 
-	&.is-end {
-		@include end;
-	}
+		&.is-singleDayInProgress,
+		&.is-start {
+			@include start;
+		}
 
-	&.is-startInProgress {
-		&:not(.is-endInProgress) {
-			@include startInProgress;
+		&.is-end {
+			@include end;
 		}
 
-		&.is-endInProgress {
-			@include startEndInProgress;
+		&.is-startInProgress {
+			&:not(.is-endInProgress) {
+				@include startInProgress;
+			}
+
+			&.is-endInProgress {
+				@include startEndInProgress;
+			}
 		}
-	}
 
-	&.is-endInProgress {
-		&:not(.is-startInProgress) {
-			@include endInProgress;
+		&.is-endInProgress {
+			&:not(.is-startInProgress) {
+				@include endInProgress;
+			}
 		}
 	}
 }

package/src/components/callout/index.scss

@@ -1,11 +1,15 @@
 @use 'exports' as *;
 
 .callout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 
 	&.mod-AI {

package/src/components/callout/mods.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
+	--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	--components-callout-gap: var(--pr-t-spacings-100);
 	--components-callout-font: var(--pr-t-font-body-S);
 	--components-callout-kill-size: 1.25rem;

package/src/components/calloutDisclosure/component.scss

@@ -18,9 +18,8 @@
 	@at-root ($atRoot) {
 		.calloutDisclosure-summary {
 			display: flex;
-			gap: var(--pr-t-spacings-150);
-			padding-block: var(--pr-t-spacings-100);
-			padding-inline: var(--components-calloutDisclosure-paddingHorizontal);
+			gap: var(--components-calloutDisclosure-gap);
+			padding: var(--components-calloutDisclosure-padding);
 			border-radius: var(--pr-t-border-radius-default);
 			transition: background-color var(--commons-animations-durations-fast) ease;
 			cursor: pointer;

package/src/components/calloutDisclosure/index.scss

@@ -1,18 +1,22 @@
 @use 'exports' as *;
 
 .calloutDisclosure {
-	@include vars;
-	@include component;
-
-	&[open] {
-		@include open;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&[open] {
+			@include open;
+		}
+
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-iconless {
-		@include iconless;
+		&.mod-iconless {
+			@include iconless;
+		}
 	}
 }

package/src/components/calloutDisclosure/mods.scss

@@ -2,8 +2,13 @@
 @use '@lucca-front/scss/src/components/calloutFeedbackList/exports' as calloutFeedbackList;
 
 @mixin S {
+	--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-100);
+
 	.calloutDisclosure-summary-title {
 		font: var(--pr-t-font-body-S);
+		font-weight: var(--pr-t-font-fontWeight-semibold);
 	}
 
 	.calloutDisclosure-summary-icon {

package/src/components/calloutDisclosure/vars.scss

@@ -1,3 +1,6 @@
 @mixin vars {
+	--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);
   --components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-150);
 }

package/src/components/calloutFeedbackList/index.scss

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

package/src/components/calloutPopover/index.scss

@@ -1,24 +1,30 @@
 @use 'exports' as *;
 
 .calloutPopover {
-	@include component;
-	@include vars;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include component;
+		@include vars;
 	}
 
-	&.mod-XS {
-		@include XS;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-XS {
+			@include XS;
+		}
 	}
 }
 
 .calloutPopover-overlay {
-	&.mod-S {
-		@include overlayS;
-	}
+	@layer mods {
+		&.mod-S {
+			@include overlayS;
+		}
 
-	&.mod-iconless {
-		@include overlayIconless;
+		&.mod-iconless {
+			@include overlayIconless;
+		}
 	}
 }

package/src/components/card/index.scss

@@ -1,36 +1,40 @@
 @use 'exports' as *;
 
 .card {
-	@include vars;
-	@include component;
-
-	// .mod-grey is deprecated
-	&.mod-neutral,
-	&.mod-grey {
-		@include neutral;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-clickable {
-		@include clickable;
-	}
+	@layer mods {
+		// .mod-grey is deprecated
+		&.mod-neutral,
+		&.mod-grey {
+			@include neutral;
+		}
 
-	&.mod-elevated {
-		@include elevated;
-	}
+		&.mod-clickable {
+			@include clickable;
+		}
 
-	&.mod-action {
-		@include action;
-	}
+		&.mod-elevated {
+			@include elevated;
+		}
 
-	&.mod-nested {
-		@include nested;
-	}
+		&.mod-action {
+			@include action;
+		}
 
-	&.mod-expand {
-		@include expand;
-	}
+		&.mod-nested {
+			@include nested;
+		}
+
+		&.mod-expand {
+			@include expand;
+		}
 
-	&:is(.is-disabled, .disabled) {
-		@include disabled;
+		&:is(.is-disabled, .disabled) {
+			@include disabled;
+		}
 	}
 }

package/src/components/checkbox/index.scss

@@ -1,48 +1,52 @@
 @use 'exports' as *;
 
 .checkbox {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-noLabel {
-		@include noLabel;
-	}
+	@layer mods {
+		&.mod-inline {
+			@include inline;
+		}
 
-	&:is(.is-required, .required) {
-		@include required;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&:is(.is-error, .error) {
-		@include state('error');
-	}
+		&.mod-noLabel {
+			@include noLabel;
+		}
 
-	&:is(.is-warning, .warning) {
-		@include state('warning');
-	}
+		&:is(.is-required, .required) {
+			@include required;
+		}
 
-	&:is(.is-success, .success) {
-		@include state('success');
-	}
+		&:is(.is-error, .error) {
+			@include state('error');
+		}
 
-	.checkbox-input {
-		&:is(.is-incomplete, .incomplete) {
-			@include incomplete;
+		&:is(.is-warning, .warning) {
+			@include state('warning');
 		}
 
-		&:is([disabled], [read-only]) {
-			@include disabled;
+		&:is(.is-success, .success) {
+			@include state('success');
 		}
 
-		&:is([aria-required]) {
-			@include required;
+		.checkbox-input {
+			&:is(.is-incomplete, .incomplete) {
+				@include incomplete;
+			}
+
+			&:is([disabled], [read-only]) {
+				@include disabled;
+			}
+
+			&:is([aria-required]) {
+				@include required;
+			}
 		}
 	}
 }