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

package/src/commons/utils/reset.scss

@@ -33,7 +33,7 @@
 @mixin clearfix($suffix: '') {
 	&::before,
 	&::after {
-		/* stylelint-disable-next-line no-irregular-whitespace */
+		// stylelint-disable-next-line no-irregular-whitespace
 		content: ' ' / '' #{$suffix};
 		display: table #{$suffix};
 	}

package/src/components/_sample/index.scss

@@ -6,14 +6,22 @@
 @use 'exports' as *;
 
 .sample {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-sampleModifierA {
-		@include sampleModifierA;
+	@layer mods {
+		&.mod-sampleModifierA {
+			@include sampleModifierA;
+		}
 	}
 
-	&.is-sampleStateA {
-		@include sampleStateA;
+	@layer states {
+		&.is-sampleStateA {
+			@include sampleStateA;
+		}
 	}
+
+	color: blue;
 }

package/src/components/appLayout/index.scss

@@ -2,16 +2,20 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .appLayout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
 
-	@include media.min('S') {
-		@include wide;
+		@include media.min('S') {
+			@include wide;
+		}
 	}
 
-	@include media.max('S') {
-		&.mod-mobileNavSideBottom {
-			@include mobileNavSideBottom;
+	@layer mods {
+		@include media.max('S') {
+			&.mod-mobileNavSideBottom {
+				@include mobileNavSideBottom;
+			}
 		}
 	}
 }

package/src/components/avatar/component.scss

@@ -5,14 +5,14 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: inline-block;
 	vertical-align: middle;
-	border-radius: var(--pr-t-border-radius-full);
+	border-radius: var(--components-avatar-borderRadius);
 	inline-size: var(--components-avatar-size);
 	aspect-ratio: 1;
 
 	@at-root ($atRoot) {
 		.avatar-picture {
-			background-color: var(--palettes-neutral-200);
-			border-radius: var(--pr-t-border-radius-full);
+			background-color: var(--components-avatar-picture-background);
+			border-radius: var(--components-avatar-borderRadius);
 			background-position: center;
 			background-size: cover;
 			background-repeat: no-repeat;
@@ -31,6 +31,7 @@
 			font-family: var(--pr-t-font-family-brand);
 			line-height: 1;
 			color: var(--pr-t-color-text-reverse);
+			display: var(--components-avatar-picture-initials-display);
 		}
 
 		.avatarWrapper {

package/src/components/avatar/index.scss

@@ -1,56 +1,68 @@
 @use 'exports' as *;
 
+// lu-user-picture is deprecated
 .avatar,
 .lu-user-picture {
-	// lu-user-picture is deprecated
-	@include vars;
-	@include component;
-
-	&.mod-XS {
-		@include XS;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-L {
-		@include L;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-XL {
-		@include XL;
-	}
+		&.mod-L {
+			@include L;
+		}
 
-	&.mod-XXL {
-		@include XXL;
-	}
+		&.mod-XL {
+			@include XL;
+		}
+
+		&.mod-XXL {
+			@include XXL;
+		}
 
-	&.mod-XXXL {
-		@include XXXL;
+		&.mod-XXXL {
+			@include XXXL;
+		}
+
+		&.mod-placeholder {
+			@include placeholder;
+		}
 	}
 
-	&.mod-placeholder {
-		@include placeholder;
+	&.mod-AI {
+		@include AI;
 	}
 }
 
 .avatarWrapper {
-	@include varsWrapper;
-
-	&.mod-XL {
-		@include wrapperXL;
+	@layer components {
+		@include varsWrapper;
 	}
 
-	&.mod-L {
-		@include wrapperL;
-	}
+	@layer mods {
+		&.mod-XL {
+			@include wrapperXL;
+		}
 
-	&.mod-S {
-		@include wrapperS;
-	}
+		&.mod-L {
+			@include wrapperL;
+		}
+
+		&.mod-S {
+			@include wrapperS;
+		}
 
-	&.mod-XS {
-		@include wrapperXS;
+		&.mod-XS {
+			@include wrapperXS;
+		}
 	}
 }

package/src/components/avatar/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin XS {
 	--components-avatar-size: 1.5rem;
@@ -72,6 +73,8 @@
 }
 
 @mixin placeholder {
+	--components-avatar-picture-initials-display: none;
+
 	.avatar-picture {
 		background-color: var(--palettes-neutral-200) !important;
 
@@ -84,7 +87,19 @@
 		}
 	}
 
-	.avatar-picture-initials {
-		display: none;
+}
+
+@mixin AI {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-default);
+	--components-avatar-picture-background: var(--palettes-neutral-0);
+	--components-avatar-picture-initials-display: none;
+
+	.avatar-picture {
+		&::before {
+			@include icons.AI;
+			@include icon.generate('weather_stars');
+
+			font-size: var(--components-avatar-AI-size);
+		}
 	}
 }

package/src/components/avatar/vars.scss

@@ -5,6 +5,10 @@
 	--components-avatar-scale: 1;
 	--components-avatar-background: var(--pr-t-elevation-surface-default);
 	--components-avatar-placeholder-size: 1.25rem;
+	--components-avatar-AI-size: var(--pr-t-font-fontSize-200);
+	--components-avatar-borderRadius: var(--pr-t-border-radius-full);
+	--components-avatar-picture-background: var(--palettes-neutral-200);
+	--components-avatar-picture-initials-display: block;
 }
 
 @mixin varsWrapper {

package/src/components/box/index.scss

@@ -1,25 +1,31 @@
 @use 'exports' as *;
 
 .box {
-	@include vars;
-	@include component;
-
-	// .mod-grey is deprecated
-	&.mod-neutral,
-	&.mod-grey {
-		@include neutral;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-withArrow {
-		@include withArrow;
-	}
+	@layer mods {
+		// .mod-grey is deprecated
+		&.mod-neutral,
+		&.mod-grey {
+			@include neutral;
+		}
 
-	// .mod-toggle is deprecated
-	&.mod-toggle {
-		@include toggle;
+		&.mod-withArrow {
+			@include withArrow;
+		}
+
+		// .mod-toggle is deprecated
+		&.mod-toggle {
+			@include toggle;
+		}
 	}
 }
 
 .box-arrow {
-	@include arrow;
+	@layer components {
+		@include arrow;
+	}
 }

package/src/components/breadcrumbs/index.scss

@@ -1,20 +1,26 @@
 @use 'exports' as *;
 
 .breadcrumbs {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	// .mod-compact is deprecated
-	&.mod-compact {
-		@include compact;
+	@layer mods {
+		// .mod-compact is deprecated
+		&.mod-compact {
+			@include compact;
+		}
 	}
 }
 
 .breadcrumbs-list-item-action {
-	// .active is deprecated
-	&.is-active,
-	&.active,
-	&[aria-current='page'] {
-		@include active;
+	@layer states {
+		// .active is deprecated
+		&.is-active,
+		&.active,
+		&[aria-current='page'] {
+			@include active;
+		}
 	}
 }

package/src/components/button/index.scss

@@ -1,181 +1,201 @@
 @use 'exports' as *;
 
 .button {
-	@include vars;
-	@include component;
-
-	&.mod-block {
-		@include block;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-AI {
+			@include AI;
 
-	&.mod-XS {
-		@include XS;
-	}
+			&.is-success {
+				@include successAI;
+			}
 
-	&.mod-disclosure {
-		@include disclosure;
-	}
+			&.is-loading {
+				@include loadingAI;
+			}
+		}
 
-	// .mod-outline is deprecated
-	&.mod-outlined,
-	&.mod-outline {
-		&:where(:not(.is-success, .is-error)) {
-			@include outlined;
+		&.mod-block {
+			@include block;
 		}
-	}
 
-	// .mod-link .mod-text deprecated
-	&.mod-text,
-	&.mod-link,
-	&.mod-ghost {
-		&:where(:not(.is-success, .is-error)) {
-			@include ghost;
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-XS {
+			@include XS;
 		}
-	}
 
-	&.mod-withIcon {
-		&.mod-iconOnLeft {
-			@include iconOnLeft;
+		&.mod-disclosure {
+			@include disclosure;
+		}
 
-			&.mod-S {
-				@include iconOnLeftS;
+		// .mod-outline is deprecated
+		&.mod-outlined,
+		&.mod-outline {
+			&:where(:not(.is-success, .is-error)) {
+				@include outlined;
 			}
+		}
 
-			&.mod-XS {
-				@include iconOnLeftXS;
+		// .mod-link .mod-text deprecated
+		&.mod-text,
+		&.mod-link,
+		&.mod-ghost {
+			&:where(:not(.is-success, .is-error)) {
+				@include ghost;
 			}
 		}
 
-		&.mod-iconOnRight {
-			@include iconOnRight;
+		&.mod-withIcon {
+			&.mod-iconOnLeft {
+				@include iconOnLeft;
 
-			&.mod-S {
-				@include iconOnRightS;
+				&.mod-S {
+					@include iconOnLeftS;
+				}
+
+				&.mod-XS {
+					@include iconOnLeftXS;
+				}
 			}
 
-			&.mod-XS {
-				@include iconOnRightXS;
+			&.mod-iconOnRight {
+				@include iconOnRight;
+
+				&.mod-S {
+					@include iconOnRightS;
+				}
+
+				&.mod-XS {
+					@include iconOnRightXS;
+				}
 			}
 		}
-	}
 
-	&.mod-onlyIcon {
-		@include onlyIcon;
+		&.mod-onlyIcon {
+			@include onlyIcon;
 
-		&.mod-S {
-			@include onlyIconS;
-		}
+			&.mod-S {
+				@include onlyIconS;
+			}
 
-		&.mod-XS {
-			@include onlyIconXS;
+			&.mod-XS {
+				@include onlyIconXS;
+			}
 		}
-	}
 
-	&:has(.numericBadge) {
-		@include counter;
+		&:has(.numericBadge) {
+			@include counter;
 
-		&.mod-S {
-			@include counterS;
-		}
+			&.mod-S {
+				@include counterS;
+			}
 
-		&.mod-XS {
-			@include counterXS;
+			&.mod-XS {
+				@include counterXS;
+			}
 		}
-	}
 
-	// .mod-delete is deprecated
-	&.mod-critical, &.mod-delete {
-		@include critical;
+		// .mod-delete is deprecated
+		&.mod-critical, &.mod-delete {
+			@include critical;
 
-		// .mod-link is deprecated
-		&.mod-text,
-		&.mod-link {
-			@include criticalGhost;
-		}
+			// .mod-link is deprecated
+			&.mod-text,
+			&.mod-link {
+				@include criticalGhost;
+			}
 
-		// .mod-outline is deprecated
-		&.mod-outlined,
-		&.mod-outline {
-			@include criticalOutlined;
+			// .mod-outline is deprecated
+			&.mod-outlined,
+			&.mod-outline {
+				@include criticalOutlined;
+			}
 		}
-	}
 
-	// .mod-invert is deprecated
-	&.mod-inverted,
-	&.mod-invert {
-		@include inverted;
-	}
+		// .mod-invert is deprecated
+		&.mod-inverted,
+		&.mod-invert {
+			@include inverted;
+		}
 
-	&.mod-more {
-		@include more;
+		&.mod-more {
+			@include more;
 
-		&.mod-S {
-			@include moreS;
-		}
+			&.mod-S {
+				@include moreS;
+			}
 
-		&.mod-XS {
-			@include moreXS;
+			&.mod-XS {
+				@include moreXS;
+			}
 		}
 	}
 
-	// .loading is deprecated
-	&.is-loading,
-	&.loading {
-		@include loading;
+	@layer states {
+		// .loading is deprecated
+		&.is-loading,
+		&.loading {
+			@include loading;
 
-		&.mod-S {
-			@include loadingS;
-		}
+			&.mod-S {
+				@include loadingS;
+			}
 
-		&.mod-XS {
-			@include loadingXS;
-		}
+			&.mod-XS {
+				@include loadingXS;
+			}
 
-		&.mod-outlined {
-			@include loadingOutlined;
+			&.mod-AI,
+			&.mod-outlined {
+				@include loadingOutlined;
+			}
+
+			&.mod-ghost {
+				@include loadingGhost;
+			}
 		}
 
-		&.mod-ghost {
-			@include loadingGhost;
+		// .error is deprecated
+		&.is-error,
+		&.error {
+			@include error;
 		}
-	}
 
-	// .error is deprecated
-	&.is-error,
-	&.error {
-		@include error;
-	}
+		// .success is deprecated
+		&.is-success,
+		&.success {
+			@include success;
 
-	// .success is deprecated
-	&.is-success,
-	&.success {
-		@include success;
+			&.mod-AI,
+			&.mod-outlined {
+				@include successOutlined;
+			}
 
-		&.mod-outlined {
-			@include successOutlined;
-		}
+			&.mod-ghost {
+				@include successGhost;
+			}
 
-		&.mod-ghost {
-			@include successGhost;
-		}
+			&.mod-S {
+				@include successS;
+			}
 
-		&.mod-S {
-			@include successS;
+			&.mod-XS {
+				@include successXS;
+			}
 		}
 
-		&.mod-XS {
-			@include successXS;
+		// .disabled is deprecated
+		&.is-disabled,
+		&.disabled,
+		&[aria-disabled] {
+			@include disabled;
 		}
 	}
-
-	// .disabled is deprecated
-	&.is-disabled,
-	&.disabled,
-	&[aria-disabled] {
-		@include disabled;
-	}
 }