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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "22.0.0-rc.2",
+  "version": "22.0.0-rc.4",
   "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": "22.0.0-rc.2",
-    "@lucca/prisme": "22.0.0-rc.2"
+    "@lucca-front/icons": "22.0.0-rc.4",
+    "@lucca/prisme": "22.0.0-rc.4"
   }
 }

package/src/commons/config.scss

@@ -109,18 +109,29 @@ $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', 'AI';
+$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'orchid';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
 $palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier', 'pineappleContrasted';
 
-// pineapple, lime, grape, glacier
-$palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;
-
 @if $palettesOtherProduct == 'all' {
 	$palettesOtherProduct: ('pagga', 'poplee', 'coreHR', 'timmi', 'cleemy', 'cc');
 }
@@ -132,7 +143,6 @@ $palettesAll: function.flatMap(
 	$palettesOtherProduct,
 	$palettesDecorative,
 	$palettesDecorativeMandatory,
-	$palettesDeprecated
 );
 
 $palettesAssets: (
@@ -149,9 +159,17 @@ $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
-$ai: (
-	500: #bc6fdd,
+$orchid: (
+	50: #f9ebff,
+	100: #f3d6ff,
+	200: #edc2ff,
+	300: #de9ff9,
+	400: #cc7ded,
+	500: #b95ae2,
 	600: #a440cf,
+	700: #8133a3,
+	800: #680094,
+	900: #4c006b,
 );
 
 $brand: (
@@ -572,16 +590,12 @@ $productsInterpolation: (
 );
 
 $palettesInterpolation: (
-	'AI': $ai,
-	'lucca': $brand,
 	'brand': $brand,
 	'brandContrasted': $brandContrasted,
-	'grey': $neutral,
 	'neutral': $neutral,
-	'primary': map.get($productsInterpolation, $product),
-	'secondary': map.get($productsInterpolation, $product),
 	'product': map.get($productsInterpolation, $product),
 	'navigation': $navigation,
+	'orchid': $orchid,
 	'success': $success,
 	'successContrasted': $successContrasted,
 	'error': $critical,
@@ -767,21 +781,6 @@ $textLink: (
 
 // Deprecated
 
-// $colors are deprecated
-$colors: (
-	'white': #ffffff,
-	'black': #121212,
-);
-
-// $colorsRgb are deprecated
-$colorsRgb: (
-	'white': '255, 255, 255',
-	'neutral-400': '172, 187, 215',
-	'neutral-900': '19, 29, 53',
-	'grey-400': '172, 187, 215',
-	'grey-900': '19, 29, 53',
-) !default;
-
 // $borderRadius are deprecated
 $borderRadius: (
 	'M': 4px,

package/src/commons/utils/a11y.scss

@@ -11,8 +11,8 @@
 	contain: paint #{$suffix};
 }
 
-@mixin focusVisible($offset: 2px, $borderRadius: false, $color: var(--palettes-700, var(--palettes-product-700))) {
-	outline: 2px solid $color;
+@mixin focusVisible($offset: 2px, $borderRadius: false, $color: var(--palettes-700, var(--palettes-product-700)), $width: 2px) {
+	outline: $width solid $color;
 	outline-offset: $offset;
 
 	@if $borderRadius != false {

package/src/commons/utils/color.scss

@@ -12,14 +12,18 @@
 	@return color-mix(in $space, $color $amount, transparent);
 }
 
-@mixin palette($name, $shades: config.$palettesShades, $palette: false) {
+@mixin palette($name: '', $shades: config.$palettesShades, $palette: false) {
+	@if $name != '' {
+		$name: '-' + $name;
+	}
+
 	@each $shade in $shades {
 		@if $palette {
 			@if map.get($palette, $shade) {
-				--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+				--palettes-#{$shade}: var(--palettes#{$name}-#{$shade});
 			}
 		} @else {
-			--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+			--palettes-#{$shade}: var(--palettes#{$name}-#{$shade});
 		}
 	}
 }
@@ -32,14 +36,19 @@
 	@include core.rosetta('--palettes-pineapple', '--palettes-pineappleContrasted', config.$palettesShades);
 }
 
-@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 {
+@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),
+	$pseudo: '::before',
+) {
+	&#{$pseudo} {
 		content: '';
 		pointer-events: none;
 		position: absolute;
 		inset: calc(#{$width} * -1);
 		padding: #{$width};
-		background-image: conic-gradient(from #{$angle}, #{$color1}, #{$color2}, #{$color1});
+		background-image: #{$gradient};
 		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/highlight-prisme.scss

@@ -26,6 +26,7 @@
 	.textFlow,
 	.mobilePush,
 	.presentation,
+	.highlightText,
 
 	// Lists
 	.chip,
@@ -106,6 +107,7 @@
 	.avatar,
 	.userPopover,
 	.userTile,
+	.impersonation,
 
 	// Loaders
 	.loading,
@@ -142,7 +144,7 @@
 
 	// Icons
 	lu-bubble-illustration .bubbleIllustration,
-	lu-bubble-icon .bubbleIcon,
+	lu-bubble-icon,
 	lu-software-icon .softwareIcon,
 	lu-icon .lucca-icon,
 
@@ -158,6 +160,7 @@
 	lu-text-flow,
 	lu-mobile-push,
 	lu-data-presentation,
+	lu-highlight-text,
 
 	// Lists
 	lu-chip,
@@ -239,6 +242,7 @@
 	// Users
 	lu-user-picture,
 	lu-user-tile,
+	lu-impersonation,
 
 	// Loaders
 	lu-loading,
@@ -262,7 +266,7 @@
 	lu-dialog-content,
 	lu-dialog-footer,
 	lu-footer .footer,
-	lu-horizontal-navigation,
+	lu-horizontal-navigation .horizontalNavigation,
 	lu-vertical-navigation,
 	[luDataTableRow] {
 		outline: 2px solid springgreen;

package/src/commons/utils/index.scss

@@ -580,6 +580,10 @@
 	@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

@@ -69,9 +69,9 @@
 	}
 
 	// stylelint-disable custom-property-pattern
-	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50, var(--palettes-50));
-	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100, var(--palettes-100));
-	--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200, var(--palettes-200));
+	--palettes-assets-primary-lighter: var(--palettes-product-50);
+	--palettes-assets-primary-light: var(--palettes-product-100);
+	--palettes-assets-primary-dark: var(--palettes-product-200);
 	--palettes-assets-brand-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-50);
 	--palettes-assets-brand-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-100);
 	--palettes-assets-brand-dark: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-200);
@@ -79,8 +79,19 @@
 	--palettes-assets-secondary-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'secondary')}-100);
 	// stylelint-enable custom-property-pattern
 
-	@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;
@@ -159,4 +170,8 @@
 			@extend %prefersContrastMore;
 		}
 	}
+
+	body:has(.lucca-banner-wrapper.pr-u-prefersContrastMore) {
+		@extend %prefersContrastMore;
+	}
 }

package/src/components/activityFeed/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	list-style-type: '';
@@ -65,18 +66,44 @@
 			display: block;
 		}
 
-		.activityFeed-content-update-icon {
-			display: var(--components-activityFeed-content-update-icon-display);
+		.activityFeed-content-update-item-icon {
+			display: var(--components-activityFeed-content-update-item-icon-display);
 		}
 
 		.activityFeed-content-update {
-			display: var(--components-activityFeed-content-update-display);
+			@include reset.list;
+
+			padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
+			border-radius: var(--pr-t-border-radius-structure);
+			border: 1px solid var(--pr-t-color-input-border);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-50);
+		}
+
+		.activityFeed-content-update-item {
+			display: var(--components-activityFeed-content-update-item-display);
 			align-items: center;
-			gap: var(--pr-t-spacings-100);
+			gap: var(--pr-t-spacings-75);
+			min-block-size: var(--pr-t-spacings-300);
+		}
+
+		.activityFeed-content-update-item-object {
+			margin-inline-end: calc(var(--pr-t-spacings-75) * -1);
+			color: var(--pr-t-color-text-subtle);
+			display: flex;
+
+			&::after {
+				content: ' ';
+			}
+
+			&:empty {
+				display: none;
+			}
 		}
 
-		.activityFeed-content-update-before,
-		.activityFeed-content-update-after {
+		.activityFeed-content-update-item-before,
+		.activityFeed-content-update-item-after {
 			display: flex;
 
 			&:empty {

package/src/components/activityFeed/index.scss

@@ -34,13 +34,13 @@
 		@include critical;
 	}
 
-	.activityFeed-content-update {
-		&:has(.activityFeed-content-update-before:empty, .activityFeed-content-update-after:empty) {
+	.activityFeed-content-update-item {
+		&:has(.activityFeed-content-update-item-before:empty, .activityFeed-content-update-item-after:empty) {
 			@include single;
 		}
 
-		&:has(.activityFeed-content-update-before:empty) {
-			&:has(.activityFeed-content-update-after:empty) {
+		&:has(.activityFeed-content-update-item-before:empty) {
+			&:has(.activityFeed-content-update-item-after:empty) {
 				@include empty;
 			}
 		}

package/src/components/activityFeed/states.scss

@@ -2,11 +2,11 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 
 @mixin empty {
-	--components-activityFeed-content-update-display: none;
+	--components-activityFeed-content-update-item-display: none;
 }
 
 @mixin single {
-	--components-activityFeed-content-update-icon-display: none;
+	--components-activityFeed-content-update-item-icon-display: none;
 }
 
 @mixin success {

package/src/components/activityFeed/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
-	--components-activityFeed-content-update-display: flex;
-	--components-activityFeed-content-update-icon-display: flex;
+	--components-activityFeed-content-update-item-display: flex;
+	--components-activityFeed-content-update-item-icon-display: flex;
 	--components-activityFeed-step-description-alignSelf: auto;
 	--components-activityFeed-step-description-fontStyle: normal;
 	--components-activityFeed-step-description-color: inherit;

package/src/components/appLayout/component.scss

@@ -2,7 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	block-size: var(--components-appLayout-blockSize);
+	@media screen {
+		block-size: var(--components-appLayout-blockSize);
+	}
+
 	inline-size: var(--components-appLayout-inlineSize);
 	grid-template: var(--components-appLayout-gridTemplate);
 	display: grid;
@@ -20,8 +23,8 @@
 		.appLayout-navSide {
 			min-inline-size: 0;
 			grid-area: navSide;
-			overflow-y: var(--components-appLayout-navSide-overflowX);
-			overflow-x: var(--components-appLayout-navSide-overflowY);
+			overflow-x: var(--components-appLayout-navSide-overflowX);
+			overflow-y: var(--components-appLayout-navSide-overflowY);
 
 			&:focus-visible {
 				@include a11y.focusVisible($offset: -4px);

package/src/components/avatar/component.scss

@@ -80,6 +80,8 @@
 			inline-size: var(--components-avatar-size);
 			block-size: var(--components-avatar-size);
 			font-size: var(--components-avatarWrapper-fontSize);
+			border-radius: var(--pr-t-border-radius-full);
+			background-color: var(--palettes-neutral-200);
 		}
 	}
 }

package/src/components/avatar/index.scss

@@ -36,10 +36,38 @@
 		&.mod-placeholder {
 			@include placeholder;
 		}
-	}
 
-	&.mod-AI {
-		@include AI;
+		&.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;
+			}
+		}
 	}
 }
 

package/src/components/avatar/mods.scss

@@ -102,3 +102,31 @@
 		}
 	}
 }
+
+@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/box/index.scss

@@ -7,9 +7,7 @@
 	}
 
 	@layer mods {
-		// .mod-grey is deprecated
-		&.mod-neutral,
-		&.mod-grey {
+		&.mod-neutral {
 			@include neutral;
 		}
 

package/src/components/box/mods.scss

@@ -35,9 +35,7 @@
 	inset-block-end: var(--components-box-arrow-bottom);
 	inset-inline-start: var(--components-box-arrow-left);
 
-	// .mod-grey is deprecated
-	&.mod-neutral,
-	&.mod-grey {
+	&.mod-neutral {
 		--components-box-arrow-background: var(--palettes-neutral-25);
 	}
 }

package/src/components/bubbleIcon/index.scss

@@ -7,6 +7,10 @@
 	}
 
 	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
+
 		&.mod-S {
 			@include S;
 		}

package/src/components/bubbleIcon/mods.scss

@@ -1,10 +1,18 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
+@mixin XS {
+	--components-bubbleIcon-size: var(--pr-t-spacings-300);
+
+	.lucca-icon {
+		@include icon.XS;
+	}
+}
+
 @mixin S {
 	--components-bubbleIcon-size: var(--pr-t-spacings-400);
 
 	.lucca-icon {
-		@include icon.XS;
+		@include icon.S;
 	}
 }
 

package/src/components/button/mods.scss

@@ -280,10 +280,12 @@
 	@include outlined;
 
 	&:not(:disabled) {
-		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+		@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
-		&:not(.mod-invert) .lucca-icon {
-			@include icons.AI;
+		&:not(.mod-invert) {
+			.lucca-icon {
+				@include icons.AI;
+			}
 		}
 	}
 }
@@ -294,9 +296,9 @@
 
 	background-image:
 		linear-gradient(
-			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)
+			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)
 		);
 
 	&:hover,

package/src/components/button/states.scss

@@ -21,7 +21,6 @@
 
 @mixin loading {
 	--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));
@@ -29,6 +28,11 @@
 
 	@include loading.spinner(var(--pr-t-font-body-M-lineHeight));
 
+	&,
+	&:disabled {
+		--components-button-color: transparent;
+	}
+
 	.numericBadge {
 		@include numericBadge.state;
 	}