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

package/src/components/button/mods.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin S {
@@ -83,6 +84,7 @@
 @mixin ghost {
 	--components-button-backgroundColor: transparent;
 	--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));
+	--components-button-boxShadow: none;
 
 	&:hover,
 	&:focus-visible {
@@ -118,14 +120,32 @@
 	--components-button-minWidth: 2rem;
 	--components-button-padding: 0;
 
-	&::before {
+	&::after {
 		@include icon.generate('arrow_chevron_bottom');
 
 		block-size: 0;
+		order: -1;
 		vertical-align: text-top;
 	}
 }
 
+@mixin moreInsideUl {
+	block-size: 100%;
+	min-block-size: 2.25rem;
+
+	&.mod-S {
+		min-block-size: 2rem;
+	}
+
+	&.mod-XS {
+		min-block-size: 1.5rem;
+	}
+
+	&::before {
+		content: none;
+	}
+}
+
 @mixin moreS {
 	--components-button-minWidth: 1.75rem;
 }
@@ -226,3 +246,15 @@
 @mixin counterXS {
 	--components-button-paddingInlineEnd: var(--pr-t-spacings-50);
 }
+
+@mixin AI {
+	@include outlined;
+
+	&:not(:disabled) {
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}

package/src/components/button/states.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/icons/src/icon/exports' as icons;
 @use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/scss/src/commons/core';
 @use '@lucca-front/scss/src/commons/utils/keyframe';
@@ -22,6 +23,7 @@
 	--components-button-pointerEvents: none;
 	--components-button-color: transparent;
 	--components-button-userSelect: none;
+	--components-button-boxShadow: none;
 	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
 	--commons-loading-frontground: var(--palettes-50, var(--palettes-product-50));
 
@@ -39,9 +41,7 @@
 @mixin loadingXS {
 	@include loading.spinner(var(--pr-t-font-body-XS-lineHeight));
 
-	& {
-		--commons-loading-borderWidth: 2px;
-	}
+	--commons-loading-borderWidth: 2px;
 }
 
 @mixin loadingOutlined {
@@ -77,6 +77,30 @@
 	}
 }
 
+@mixin loadingAI {
+	.lucca-icon {
+		@include icons.transparent;
+	}
+
+	&::before {
+		content: none;
+	}
+}
+
+@mixin successAI {
+	.lucca-icon {
+		@include icons.transparent;
+	}
+
+	&::before {
+		content: none;
+	}
+
+	&::after {
+		@include icons.AI;
+	}
+}
+
 @mixin successS {
 	&::after {
 		font-size: var(--pr-t-font-body-S-lineHeight);
@@ -111,6 +135,8 @@
 
 
 @mixin error {
+	@include keyframe.shake;
+
 	animation-name: shake;
 	animation-iteration-count: 1;
 	animation-duration: var(--commons-animations-durations-standard);

package/src/components/button/vars.scss

@@ -15,7 +15,7 @@
 	--components-button-width: auto;
 	--components-button-minWidth: none;
 	--components-button-userSelect: auto;
-	--components-button-boxShadow: none;
+	--components-button-boxShadow: var(--pr-t-elevation-shadow-button);
 	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
 	--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
 	--components-button-arrow-transform: none;

package/src/components/buttonGroup/component.scss

@@ -79,7 +79,7 @@
 				min-block-size: 1.5rem;
 			}
 
-			&::before {
+			&::after {
 				content: none;
 			}
 		}

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 states {
+		&.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/component.scss

@@ -9,9 +9,9 @@
 	align-items: flex-start;
 	position: relative;
 	border-radius: var(--pr-t-border-radius-default);
-	background-color: var(--palettes-50, var(--palettes-neutral-50));
+	background-color: var(--components-callout-backgroundColor);
 	color: var(--pr-t-color-text);
-	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
+	box-shadow: var(--components-callout-boxShadow);
 	gap: var(--components-callout-gap);
 	padding: var(--components-callout-padding);
 	font: var(--components-callout-font);
@@ -40,11 +40,20 @@
 			font-weight: 600;
 		}
 
+		.callout-content-description {
+			display: var(--components-callout-content-description-display);
+			justify-content: space-between;
+			gap: var(--pr-t-spacings-150);
+			align-items: flex-start;
+
+		}
+
+
 		.callout-content-description-actions {
 			display: flex;
 			gap: var(--pr-t-spacings-75);
-			margin-block-start: var(--pr-t-spacings-50);
-			padding-block: var(--pr-t-spacings-50);
+			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
+			padding-block: var(--components-callout-content-description-action-paddingBlock);
 			padding-inline: 0;
 
 			.button {

package/src/components/callout/index.scss

@@ -1,10 +1,23 @@
 @use 'exports' as *;
 
 .callout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+	}
 
-	&.mod-S {
-		@include S;
+	&.mod-AI {
+		@include AI;
+	}
+
+	&:has(.callout-content-description-actions.mod-inline) {
+		@include actionsInline;
 	}
 }
+

package/src/components/callout/mods.scss

@@ -1,4 +1,5 @@
-@use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
@@ -7,7 +8,7 @@
 	--components-callout-kill-size: 1.25rem;
 
 	.callout-icon {
-		@include icon.S;
+		@include icons.S;
 	}
 
 	.callout-content-description-actions {
@@ -26,3 +27,30 @@
 	--components-callout-display: inline-flex;
 	--components-callout-padding: var(--pr-t-spacings-100);
 }
+
+@mixin AI {
+	--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);
+	--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised);
+
+	@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+
+	.callout-icon {
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}
+
+@mixin actionsInline {
+	--components-callout-content-description-display: flex;
+	--components-callout-content-description-action-marginBlockStart: 0;
+	--components-callout-content-description-action-paddingBlock: 0;
+
+	.button {
+		@include button.XS;
+	}
+
+	.button.mod-onlyIcon {
+		@include button.onlyIconXS;
+	}
+}

package/src/components/callout/vars.scss

@@ -4,6 +4,11 @@
 	--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
 	--components-callout-font: inherit;
 	--components-callout-kill-size: 1.5rem;
+	--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
+	--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
+	--components-callout-content-description-display: block;
+	--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);
+	--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);
 
 	// Deprecated
 	--components-callout-fontSize: inherit;

package/src/components/calloutDisclosure/index.scss

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

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,32 +1,38 @@
 @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-action {
+			@include action;
+		}
 
-	&.mod-nested {
-		@include nested;
+		&.mod-nested {
+			@include nested;
+		}
 	}
 
-	&:is(.is-disabled, .disabled) {
-		@include disabled;
+	@layer states {
+		&:is(.is-disabled, .disabled) {
+			@include disabled;
+		}
 	}
 }

package/src/components/checkbox/index.scss

@@ -1,48 +1,54 @@
 @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');
-	}
+	@layer states {
+		&: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;
+			}
 		}
 	}
 }