@lucca-front/scss 21.3.0-rc.5 → 22.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.3.0-rc.5",
+  "version": "22.0.0-rc.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.3.0-rc.5",
-    "@lucca/prisme": "21.3.0-rc.5"
+    "@lucca-front/icons": "22.0.0-rc.2",
+    "@lucca/prisme": "22.0.0-rc.2"
   }
 }

package/src/commons/config.scss

@@ -109,24 +109,10 @@ $borderRadiusTokens: (
 	'input': var(--pr-t-border-radius-default),
 );
 
-$colorAI: orchid, brand;
-
-$paletteAI: (
-	angle: 'to bottom right',
-	color1stop: 0%,
-	color2stop: 80%,
-);
-
-$tokenAI: (
-	border: var(--palettes-ai-300),
-	background: var(--palettes-ai-50),
-	icon: var(--palettes-ai-600),
-);
-
 $product: 'brand' !default;
 $palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
 $palettesStates: 'critical', 'error', 'warning', 'success', 'successContrasted', 'warningContrasted';
-$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'orchid';
+$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
@@ -163,17 +149,9 @@ $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
-$orchid: (
-	50: #f9ebff,
-	100: #f3d6ff,
-	200: #edc2ff,
-	300: #de9ff9,
-	400: #cc7ded,
-	500: #b95ae2,
+$ai: (
+	500: #bc6fdd,
 	600: #a440cf,
-	700: #8133a3,
-	800: #680094,
-	900: #4c006b,
 );
 
 $brand: (
@@ -594,6 +572,7 @@ $productsInterpolation: (
 );
 
 $palettesInterpolation: (
+	'AI': $ai,
 	'lucca': $brand,
 	'brand': $brand,
 	'brandContrasted': $brandContrasted,
@@ -603,7 +582,6 @@ $palettesInterpolation: (
 	'secondary': map.get($productsInterpolation, $product),
 	'product': map.get($productsInterpolation, $product),
 	'navigation': $navigation,
-	'orchid': $orchid,
 	'success': $success,
 	'successContrasted': $successContrasted,
 	'error': $critical,

package/src/commons/utils/color.scss

@@ -32,14 +32,14 @@
 	@include core.rosetta('--palettes-pineapple', '--palettes-pineappleContrasted', config.$palettesShades);
 }
 
-@mixin borderGradient($gradient: linear-gradient(to bottom right, var(--palettes-neutral-0), var(--palettes-neutral-900)), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
+@mixin borderGradient($angle: 0, $color1: var(--palettes-neutral-0) , $color2:  var(--palettes-neutral-900), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
 	&::before {
 		content: '';
 		pointer-events: none;
 		position: absolute;
 		inset: calc(#{$width} * -1);
 		padding: #{$width};
-		background-image: #{$gradient};
+		background-image: conic-gradient(from #{$angle}, #{$color1}, #{$color2}, #{$color1});
 		border-radius: calc(#{$radius} + #{$width});
 		mask: linear-gradient(var(--palettes-neutral-0)) content-box, linear-gradient(var(--palettes-neutral-0));
 		mask-composite: exclude;

package/src/commons/utils/index.scss

@@ -580,10 +580,6 @@
 	@include core.classes('text-decoration', core.$decoration);
 	@include core.classes('overflow', core.$overflow);
 
-	.pr-u-overflowWrapAnywhere {
-		overflow-wrap: anywhere !important;
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
 		@include core.classes('scroll-behavior', core.$scrollBehavior);
 	}

package/src/commons/vars.scss

@@ -82,20 +82,6 @@
 	@include core.cssvars('colors', config.$colors, '-color');
 	@include core.cssvars('colors', config.$colorsRgb, '-rgb');
 
-	@include core.cssvars('palettes-ai', config.$paletteAI);
-	@include core.cssvars('pr-t-color', config.$tokenAI, '-ai');
-
-	@each $shade in config.$palettesShades {
-		@if $shade != text and $shade != 0 and $shade != 25 {
-			--palettes-ai-#{$shade}:
-				linear-gradient(
-					var(--palettes-ai-angle),
-					var(#{'--palettes-'}#{list.nth(config.$colorAI, 1)}-#{$shade}) var(--palettes-ai-color1stop),
-					var(#{'--palettes-'}#{list.nth(config.$colorAI, 2)}-#{max($shade - 100, 50)}) var(--palettes-ai-color2stop)
-				);
-		}
-	}
-
 	--commons-banner-height: 50px;
 	--commons-divider-width: 1px;
 	--commons-divider-style: solid;

package/src/components/avatar/index.scss

@@ -36,38 +36,10 @@
 		&.mod-placeholder {
 			@include placeholder;
 		}
+	}
 
-		&.mod-AI {
-			@include AI;
-		}
-
-		&.mod-softRounded {
-			&.mod-XS {
-				@include softRoundedXS;
-			}
-
-			&.mod-S {
-				@include softRoundedS;
-			}
-
-			@include softRounded;
-
-			&.mod-L {
-				@include softRoundedL;
-			}
-
-			&.mod-XL {
-				@include softRoundedXL;
-			}
-
-			&.mod-XXL {
-				@include softRoundedXXL;
-			}
-
-			&.mod-XXXL {
-				@include softRoundedXXXL;
-			}
-		}
+	&.mod-AI {
+		@include AI;
 	}
 }
 

package/src/components/avatar/mods.scss

@@ -102,31 +102,3 @@
 		}
 	}
 }
-
-@mixin softRoundedXXXL {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-400);
-}
-
-@mixin softRoundedXXL {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-300);
-}
-
-@mixin softRoundedXL {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-300);
-}
-
-@mixin softRoundedL {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-200);
-}
-
-@mixin softRounded {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-200);
-}
-
-@mixin softRoundedS {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-150);
-}
-
-@mixin softRoundedXS {
-	--components-avatar-borderRadius: var(--pr-t-border-radius-100);
-}

package/src/components/button/mods.scss

@@ -280,12 +280,10 @@
 	@include outlined;
 
 	&:not(:disabled) {
-		@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
 
-		&:not(.mod-invert) {
-			.lucca-icon {
-				@include icons.AI;
-			}
+		&:not(.mod-invert) .lucca-icon {
+			@include icons.AI;
 		}
 	}
 }
@@ -296,9 +294,9 @@
 
 	background-image:
 		linear-gradient(
-			var(--palettes-ai-angle),
-			color-mix(in srgb, var(--palettes-orchid-300) var(--components-button-AI-background-opacity), transparent),
-			color-mix(in srgb, var(--palettes-brand-200) var(--components-button-AI-background-opacity), transparent)
+			225deg,
+			color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
+			color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
 		);
 
 	&:hover,

package/src/components/callout/mods.scss

@@ -34,7 +34,7 @@
 	--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);
 	--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised);
 
-	@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
+	@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
 
 	.callout-icon {
 		.lucca-icon {

package/src/components/code/component.scss

@@ -9,5 +9,4 @@
 	padding-block: 0;
 	padding-inline: 0.3rem;
 	tab-size: 2;
-	overflow-wrap: anywhere;
 }

package/src/components/comment/component.scss

@@ -75,7 +75,7 @@
 
 		.comment-content-text {
 			margin-block-end: 0;
-			overflow-wrap: anywhere;
+			overflow-wrap: break-word;
 			font: var(--components-comment-text-font);
 		}
 

package/src/components/dataTable/component.scss

@@ -92,16 +92,11 @@
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
-				inset-inline-start: 0;
 
 				.checkboxField {
 					--component-checkboxField-top: 0;
 				}
 			}
-
-			&:last-child {
-				inset-inline-end: 0;
-			}
 		}
 
 		.dataTable-body-row-cell,
@@ -136,7 +131,7 @@
 
 		.dataTable-body-row-cell-expand-button.button {
 			vertical-align: top;
-			margin-inline-start: calc(var(--pr-t-spacings-25) * -1);
+			margin-left: calc(var(--pr-t-spacings-25) * -1);
 
 			.lucca-icon {
 				transform: rotate(var(--components-dataTable-expand-rotation));

package/src/components/dialog/component.scss

@@ -108,7 +108,7 @@
 		}
 
 		.dialog-inside-header-actionOptional {
-			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
+			margin-right: calc(var(--pr-t-spacings-100) * -1);
 
 			&:empty {
 				display: none;
@@ -155,8 +155,7 @@
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
-			overflow: var(--components-dialog-insideContent-overflow);
-			display: block;
+			overflow: auto;
 			outline: none;
 		}
 

package/src/components/dialog/index.scss

@@ -62,10 +62,6 @@
 			@include withAction;
 		}
 
-		&:has(.horizontalNavigation) {
-			@include withHorizontalNavigation;
-		}
-
 		&.mod-fancy {
 			@include fancy;
 

package/src/components/dialog/mods.scss

@@ -150,9 +150,3 @@
 		--components-footer-paddingInline: var(--pr-t-spacings-150);
 	}
 }
-
-@mixin withHorizontalNavigation {
-	--components-dialog-insideContent-overflow: none;
-	--components-dialog-inside-header-boxShadow: none;
-	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
-}

package/src/components/dialog/vars.scss

@@ -19,7 +19,6 @@
 	--components-dialog-insideContent-background: transparent;
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
-	--components-dialog-insideContent-overflow: auto;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);

package/src/components/fieldset/mods.scss

@@ -7,8 +7,6 @@
 
 @mixin horizontal {
 	grid-template-columns: 1fr auto;
-
-	--components-form-maxWidth: initial;
 }
 
 @mixin expandable {
@@ -20,10 +18,6 @@
 		&:focus-visible {
 			@include a11y.focusVisible;
 		}
-
-		.lucca-icon {
-			margin-block-start: var(--pr-t-spacings-50);
-		}
 	}
 }
 

package/src/components/fieldset/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
 	--components-fieldset-title: var(--pr-t-font-heading-3);
 	--components-fieldset-gap: var(--pr-t-spacings-100);
-	--components-fieldset-contentMaxWidth: var(--components-form-maxWidth, 50rem);
+	--components-fieldset-contentMaxWidth: 40rem;
 	--components-fieldset-title-iconRotation: 0deg;
 	--components-fieldset-title-content-flexWrap: nowrap;
 }

package/src/components/fileEntry/component.scss

@@ -3,13 +3,14 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/text';
 
+@use '@lucca-front/scss/src/components/loading/exports' as loading;
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border: 1px solid var(--components-fileEntry-borderColor);
 	padding: var(--components-fileEntry-padding);
 	margin: 0;
-	border-radius: var(--pr-t-border-radius-default);
+	border-radius: var(--components-fileEntry-borderRadius);
 	background-color: var(--pr-t-elevation-surface-raised);
 	gap: 0 var(--components-fileEntry-gapInline);
 	position: relative;
@@ -31,6 +32,12 @@
 	}
 
 	@at-root ($atRoot) {
+		.fileEntry-status-content-inside-icon {
+			color: var(--palettes-critical-700);
+
+			@include icon.S;
+		}
+
 		.fileEntryDisplayWrapper {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
@@ -41,7 +48,7 @@
 			}
 
 			.form-field:has(.fileUpload) + & {
-				margin-block-start: var(--pr-t-spacings-100);
+				margin-top: var(--pr-t-spacings-100);
 			}
 		}
 
@@ -78,14 +85,11 @@
 			inline-size: 100%;
 		}
 
-		.fileEntry-status-content-inside-icon {
-			color: var(--palettes-critical-700);
-		}
-
 		.fileEntry-status-content-inlineMessage.inlineMessage {
 			flex-direction: column;
 			align-items: center;
 			text-align: center;
+			padding: var(--pr-t-spacings-100);
 
 			.inlineMessage-statusIcon:first-child {
 				@include icon.M;
@@ -176,7 +180,7 @@
 		}
 
 		.fileEntry_box.box {
-			margin-block-start: var(--pr-t-spacings-150);
+			margin-top: var(--pr-t-spacings-150);
 		}
 
 		.fileEntry_box-field {
@@ -194,5 +198,9 @@
 			flex-basis: 0;
 			min-inline-size: fit-content;
 		}
+
+		.fileEntry-status-content-inside-loading.loading {
+			@include loading.S;
+		}
 	}
 }

package/src/components/fileEntry/index.scss

@@ -7,38 +7,46 @@
 	}
 
 	@layer mods {
-		&.mod-S {
-			@include S;
+		&.mod-L {
+			@include L;
+
+			&.mod-structure {
+				@include structure;
+			}
 		}
 
 		&.mod-media {
 			@include media;
 
-			&.mod-S {
-				@include mediaS;
+			&.mod-L {
+				@include mediaL;
 			}
 		}
 
 		&.is-error {
 			@include error;
 
-			&.mod-S {
-				@include errorS;
+			&.mod-L {
+				@include errorL;
+
+				&.mod-media {
+					@include mediaErrorL;
+				}
 			}
 		}
 
 		&.is-loading {
 			@include loading;
 
-			&.mod-S {
-				@include loadingS;
+			&.mod-L {
+				@include loadingL;
 			}
 		}
 	}
 }
 
-.fileEntry-description-divider.divider.mod-vertical {
-	@layer mods {
+@layer mods {
+	.fileEntry-description-divider.divider.mod-vertical {
 		@include divider;
 	}
 }

package/src/components/fileEntry/mods.scss

@@ -1,42 +1,47 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
-@mixin S {
-	--components-fileEntry-padding: var(--pr-t-spacings-50);
-	--components-fileEntry-status-inlineSize: 32px;
-	--components-fileEntry-description-display: none;
-	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
-	--components-fileEntry-filename-alignSelf: center;
-	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
-	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);
+@mixin L {
+	--components-fileEntry-padding: var(--pr-t-spacings-150);
+	--components-fileEntry-status-inlineSize: 48px;
+	--components-fileEntry-description-display: flex;
+	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
+	--components-fileEntry-filename-alignSelf: end;
+	--components-fileEntry-gapInline: var(--components-fileEntry-padding);
+	--components-fileEntry-status-content-svg-margin: 0;
+	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
 
 	.fileEntry-status-content-inside-icon {
-		@include icon.S;
+		@include icon.M;
 	}
 }
 
 @mixin media {
 	--components-fileEntry-padding: var(--pr-t-spacings-75);
-	--components-fileEntry-status-aspectRatio: auto;
 	--components-fileEntry-status-inlineSize: 100%;
-	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
 	--components-fileEntry-description-display: none;
 	--components-fileEntry-display: block;
-	--components-fileEntry-gridColumn: 1 / -1;
 	--components-fileEntry-status-content-svg-width: 72px;
+	--components-fileEntry-gridColumn: auto;
+	--components-fileEntry-status-blockSize: auto;
+	--components-fileEntry-status-aspectRatio: 1;
 
 	&:has(.fileEntry-status-content-fileName) {
 		--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
 	}
 }
 
-@mixin mediaS {
+@mixin mediaL {
 	--components-fileEntry-minHeight: calc(5rem + 2px);
-	--components-fileEntry-gridColumn: auto;
-	--components-fileEntry-status-blockSize: auto;
-	--components-fileEntry-status-aspectRatio: 1;
+	--components-fileEntry-gridColumn: 1 / -1;
+	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
+	--components-fileEntry-status-aspectRatio: auto;
 }
 
 @mixin divider {
 	--components-divider-marginBlock: var(--pr-t-spacings-25);
 	--components-divider-marginInline: 0;
 }
+
+@mixin structure {
+	--components-fileEntry-borderRadius: var(--pr-t-border-radius-structure);
+}

package/src/components/fileEntry/states.scss

@@ -5,18 +5,23 @@
 	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
 	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);
 	--components-fileEntry-minHeight: 3.75rem;
+	--components-fileEntry-description-display: flex;
 }
 
 @mixin loading {
 	--components-fileEntry-status-content-img-opacity: 0.08;
 }
 
-@mixin loadingS {
+@mixin loadingL {
 	.fileEntry-status-content-inside-loading.loading {
-		@include loading.S;
+		@include loading.M;
 	}
 }
 
-@mixin errorS {
-	--components-fileEntry-status-blockSize: 100%;
+@mixin errorL {
+	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
+}
+
+@mixin mediaErrorL {
+	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
 }

package/src/components/fileEntry/vars.scss

@@ -1,26 +1,23 @@
 @mixin vars {
-	--components-fileEntry-padding: var(--pr-t-spacings-150);
-	--components-fileEntry-gapInline: var(--components-fileEntry-padding);
+	--components-fileEntry-borderRadius: var(--pr-t-border-radius-default);
 	--components-fileEntry-gridColumn: 1 / -1;
 	--components-fileEntry-borderColor: var(--palettes-neutral-100);
 	--components-fileEntry-minHeight: auto;
-	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
-
 	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);
-
 	--components-fileEntry-status-content-img-opacity: 1;
 	--components-fileEntry-status-content-svg-width: 48px;
 	--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);
-	--components-fileEntry-status-content-svg-margin: 0;
-
-	--components-fileEntry-filename-alignSelf: end;
-
-	--components-fileEntry-status-inlineSize: 48px;
-	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
+	--components-fileEntry-status-blockSize: 100%;
 	--components-fileEntry-status-margin: 0;
-	--components-fileEntry-description-display: flex;
 	--components-fileEntry-display: grid;
 	--components-fileEntry-status-content-padding: 0;
-
 	--components-fileEntry-status-content-inside-insetBlockEnd: 0;
+
+	--components-fileEntry-padding: var(--pr-t-spacings-50);
+	--components-fileEntry-status-inlineSize: 32px;
+	--components-fileEntry-description-display: none;
+	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
+	--components-fileEntry-filename-alignSelf: center;
+	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
+	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);
 }

package/src/components/fileToolbar/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
 
-@use '@lucca-front/icons/src/icon/exports' as icon;
-
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border-radius: var(--pr-t-border-radius-default);
 	position: absolute;

package/src/components/fileToolbar/index.scss

@@ -10,8 +10,8 @@
 		&.mod-disablePositioning {
 			@include disablePositioning;
 
-			&.mod-S {
-				@include disablePositioningS;
+			&.mod-L {
+				@include disablePositioningL;
 			}
 		}
 	}