@lucca-front/scss 21.1.2 → 21.2.0-rc.1

package/package.json

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

package/src/commons/base.scss

@@ -10,6 +10,7 @@
 	color: var(--pr-t-color-text);
 	font: var(--pr-t-font-body-M);
 	text-rendering: geometricPrecision;
+	margin-inline-end: var(--commons-pushPanel-width);
 
 	@supports (-webkit-touch-callout: none) {
 		min-block-size: -webkit-fill-available;
@@ -46,6 +47,7 @@
 		}
 
 		@if config.$isNamespaced {
+			// stylelint-disable-next-line block-no-redundant-nested-style-rules -- & references the selector calling this mixin.
 			& {
 				@include body;
 				@include html;
@@ -99,7 +101,8 @@
 			}
 		}
 
-		button, button[type] {
+		button,
+		button[type] {
 			text-rendering: inherit;
 
 			&:focus-visible {
@@ -126,5 +129,26 @@
 				}
 			}
 		}
+
+		@each $productName, $productMap in config.$palettesAssets {
+			.palette-#{$productName} {
+				--palettes-assets-primary-lighter: var(--palettes-#{$productName}-50);
+				--palettes-assets-primary-light: var(--palettes-#{$productName}-100);
+				--palettes-assets-primary-dark: var(--palettes-#{$productName}-200);
+
+				@each $level, $palette in $productMap {
+					@if $level == 'secondary' {
+						--palettes-assets-secondary-lighter: var(--palettes-#{$palette}-50);
+						--palettes-assets-secondary-light: var(--palettes-#{$palette}-100);
+					}
+
+					@if $level == 'brand' {
+						--palettes-assets-brand-lighter: var(--palettes-#{$palette}-50);
+						--palettes-assets-brand-light: var(--palettes-#{$palette}-100);
+						--palettes-assets-brand-dark: var(--palettes-#{$palette}-200);
+					}
+				}
+			}
+		}
 	}
 }

package/src/commons/config.scss

@@ -109,15 +109,16 @@ $borderRadiusTokens: (
 	'input': var(--pr-t-border-radius-default),
 );
 
-
 $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';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
-$palettesDecorative: 'kiwi', 'lime', 'cucumber', 'mint', 'glacier', 'lagoon', 'blueberry', 'lavender', 'grape', 'watermelon', 'pumpkin',
-	'pineapple' !default;
+$palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
+$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier';
+
+// pineapple, lime, grape, glacier
 $palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;
 
 @if $palettesOtherProduct == 'all' {
@@ -130,16 +131,27 @@ $palettesAll: function.flatMap(
 	$palettesProduct,
 	$palettesOtherProduct,
 	$palettesDecorative,
+	$palettesDecorativeMandatory,
 	$palettesDeprecated
 );
 
+$palettesAssets: (
+	'brand': ('brand': 'pineapple', 'secondary': 'lime'),
+	'cc': ('brand': 'brand', 'secondary': 'lime'),
+	'pagga': ('brand': 'brand', 'secondary': 'lime'),
+	'poplee': ('brand': 'brand', 'secondary': 'pineapple'),
+	'coreHR': ('brand': 'brand', 'secondary': 'pineapple'),
+	'cleemy': ('brand': 'brand', 'secondary': 'grape'),
+	'timmi': ('brand': 'brand', 'secondary': 'glacier')
+);
+
 $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
 $ai: (
-	500: #BC6FDD,
-	600: #A440CF,
+	500: #bc6fdd,
+	600: #a440cf,
 );
 
 $brand: (
@@ -348,17 +360,17 @@ $warning: (
 $warningContrasted: (
 	// text is deprecated
 	text: #ffffff,
-	0: #FFFFFF,
-	50: #FFF2DB,
-	100: #FFE9C2,
-	200: #FFDB9E,
-	300: #FFD080,
-	400: #FFC35C,
-	500: #FFB13D,
+	0: #ffffff,
+	50: #fff2db,
+	100: #ffe9c2,
+	200: #ffdb9e,
+	300: #ffd080,
+	400: #ffc35c,
+	500: #ffb13d,
 	600: #d97e26,
-	700: #B34B0F,
-	800: #9A3B08,
-	900: #802A00
+	700: #b34b0f,
+	800: #9a3b08,
+	900: #802a00
 );
 
 $critical: (
@@ -592,13 +604,10 @@ $elevation: (
 		'backdrop': color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent),
 	),
 	shadow: (
-		'raised':
-			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-400) 20%, transparent)',
+		'raised': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-400) 20%, transparent)',
 		'button': '0 2px 2px 0 color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
-		'overflow':
-			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 0 4px color-mix(in srgb, var(--palettes-neutral-400) 32%, transparent), 0 0 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent)',
-		'overlay':
-			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent), 0 4px 12px 2px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent)',
+		'overflow': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 0 4px color-mix(in srgb, var(--palettes-neutral-400) 32%, transparent), 0 0 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent)',
+		'overlay': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent), 0 4px 12px 2px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent)',
 	),
 );
 

package/src/commons/index.scss

@@ -1,9 +1,9 @@
-@use "sass:meta";
+@use 'sass:meta';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/config';
 @use 'exports' as *;
 
-/* stylelint-disable-next-line layer-name-pattern */
+// stylelint-disable-next-line layer-name-pattern
 @layer #{config.$layers};
 
 @layer reset {

package/src/commons/utils/a11y.scss

@@ -1,6 +1,6 @@
 @mixin mask($suffix: '') {
 	border: 0 #{$suffix};
-	clip: rect(1px, 1px, 1px, 1px) #{$suffix};
+	clip-path: rect(1px 1px 1px 1px) #{$suffix};
 	margin: -1px #{$suffix};
 	overflow: hidden #{$suffix};
 	padding: 0 #{$suffix};

package/src/commons/utils/highlight-prisme.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable @stylistic/selector-max-empty-lines */
+
 .pr-u-highlightPrisme {
 	// HTML COMPONENTS OUTSIDE
 
@@ -154,7 +156,8 @@
 	lu-data-presentation,
 
 	// Lists
-	lu-chip, [luChip]
+	lu-chip,
+	[luChip],
 	lu-data-table .dataTable,
 	lu-index-table,
 	lu-sortable-list .sortableList,

package/src/commons/utils/index.scss

@@ -279,8 +279,6 @@
 		place-items: center;
 	}
 
-
-
 	[data-content-before] {
 		&::before {
 			content: attr(data-content-before);
@@ -406,7 +404,8 @@
 	}
 
 	// textPlaceholder is deprecated
-	.pr-u-textPlaceholder, .pr-u-colorInputTextPlaceholder {
+	.pr-u-textPlaceholder,
+	.pr-u-colorInputTextPlaceholder {
 		@extend %textPlaceholder;
 	}
 
@@ -530,7 +529,7 @@
 
 	@each $colorText, $value in config.$colorText {
 		.pr-u-color#{transform.capitalize(transform.camelize($colorText))} {
-			color: var(--pr-t-color-#{$colorText}) !important
+			color: var(--pr-t-color-#{$colorText}) !important;
 		}
 	}
 
@@ -663,21 +662,22 @@
 			@extend %bodyXS;
 		}
 
-		// textLeft is deprecated
+		// stylelint-disable-next-line selector-disallowed-list -- textLeft is deprecated
 		.u-textLeft {
 			@extend %textLeft;
 		}
 
-		// textRight is deprecated
+		// stylelint-disable-next-line selector-disallowed-list -- textRight is deprecated
 		.u-textRight {
 			@extend %textRight;
 		}
 
-		// textCenter is deprecated
+		// stylelint-disable-next-line selector-disallowed-list -- textCenter is deprecated
 		.u-textCenter {
 			@extend %textCenter;
 		}
 
+		// stylelint-disable-next-line selector-disallowed-list -- textLight is deprecated
 		.u-textLight {
 			@extend %textLight;
 		}
@@ -714,7 +714,6 @@
 			@extend %fontFamilyBrand;
 		}
 
-
 		@each $display in core.$displays {
 			@if $display != 'none' {
 				.u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {

package/src/commons/utils/media.scss

@@ -126,18 +126,18 @@
 }
 
 @mixin pointer($query, $any: false, $reversed: false) {
-$mediaString: 'media';
-$anyString: '';
+	$mediaString: 'media';
+	$anyString: '';
 
-@if $reversed {
-	$mediaString: 'media not';
-}
+	@if $reversed {
+		$mediaString: 'media not';
+	}
 
-@if $any {
-	$anyString: 'any-';
-}
+	@if $any {
+		$anyString: 'any-';
+	}
 
-	// stylelint-disable-next-line scss/at-rule-no-unknown
+	// stylelint-disable-next-line scss/at-rule-no-unknown, @stylistic/at-rule-name-case
 	@#{$mediaString} (#{$anyString}pointer: #{$query}) {
 		@content;
 	}

package/src/commons/utils/namespace.scss

@@ -9,6 +9,7 @@ $defaultAtRoot: 'without: rule';
 
 @mixin appendRootVars {
 	@if config.$isNamespaced {
+		// stylelint-disable-next-line block-no-redundant-nested-style-rules -- & references the selector calling this mixin.
 		& {
 			@content;
 		}

package/src/commons/utils/overflow.scss

@@ -1,15 +1,14 @@
 @mixin hide($suffix: '') {
-	-ms-overflow-style: none #{$suffix};
 	scrollbar-width: none #{$suffix};
 
 	&::-webkit-scrollbar {
 		display: none #{$suffix};
-  }
+	}
 }
 
 @mixin scrollblock($suffix: '') {
 	overflow: hidden #{$suffix};
-	
+
 	&,
 	body {
 		touch-action: none #{$suffix};

package/src/commons/utils/reset.scss

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

package/src/commons/vars.scss

@@ -22,16 +22,16 @@
 	@include core.cssvars('pr-t-font-fontWeight', config.$fontWeights);
 	@include core.cssvars('pr-t-font', config.$fontTokens);
 
-	--pr-t-font-heading-1: var(--pr-t-font-heading-1-fontWeight) var(--pr-t-font-heading-1-fontSize)/var(--pr-t-font-heading-1-lineHeight) var(--pr-t-font-family-brand);
-	--pr-t-font-heading-2: var(--pr-t-font-heading-2-fontWeight) var(--pr-t-font-heading-2-fontSize)/var(--pr-t-font-heading-2-lineHeight) var(--pr-t-font-family-brand);
-	--pr-t-font-heading-3: var(--pr-t-font-heading-3-fontWeight) var(--pr-t-font-heading-3-fontSize)/var(--pr-t-font-heading-3-lineHeight) var(--pr-t-font-family);
-	--pr-t-font-heading-4: var(--pr-t-font-heading-4-fontWeight) var(--pr-t-font-heading-4-fontSize)/var(--pr-t-font-heading-4-lineHeight) var(--pr-t-font-family);
-	--pr-t-font-highlight-XXL: var(--pr-t-font-highlight-XXL-fontWeight) var(--pr-t-font-highlight-XXL-fontSize)/var(--pr-t-font-highlight-XXL-lineHeight) var(--pr-t-font-family-brand);
-	--pr-t-font-highlight-XL: var(--pr-t-font-highlight-XL-fontWeight) var(--pr-t-font-highlight-XL-fontSize)/var(--pr-t-font-highlight-XL-lineHeight) var(--pr-t-font-family-brand);
-	--pr-t-font-highlight-L: var(--pr-t-font-highlight-L-fontWeight) var(--pr-t-font-highlight-L-fontSize)/var(--pr-t-font-highlight-L-lineHeight) var(--pr-t-font-family-brand);
-	--pr-t-font-body-M: var(--pr-t-font-body-M-fontSize)/var(--pr-t-font-body-M-lineHeight) var(--pr-t-font-family);
-	--pr-t-font-body-S: var(--pr-t-font-body-S-fontSize)/var(--pr-t-font-body-S-lineHeight) var(--pr-t-font-family);
-	--pr-t-font-body-XS: var(--pr-t-font-body-XS-fontSize)/var(--pr-t-font-body-XS-lineHeight) var(--pr-t-font-family);
+	--pr-t-font-heading-1: var(--pr-t-font-heading-1-fontWeight) var(--pr-t-font-heading-1-fontSize) / var(--pr-t-font-heading-1-lineHeight) var(--pr-t-font-family-brand);
+	--pr-t-font-heading-2: var(--pr-t-font-heading-2-fontWeight) var(--pr-t-font-heading-2-fontSize) / var(--pr-t-font-heading-2-lineHeight) var(--pr-t-font-family-brand);
+	--pr-t-font-heading-3: var(--pr-t-font-heading-3-fontWeight) var(--pr-t-font-heading-3-fontSize) / var(--pr-t-font-heading-3-lineHeight) var(--pr-t-font-family);
+	--pr-t-font-heading-4: var(--pr-t-font-heading-4-fontWeight) var(--pr-t-font-heading-4-fontSize) / var(--pr-t-font-heading-4-lineHeight) var(--pr-t-font-family);
+	--pr-t-font-highlight-XXL: var(--pr-t-font-highlight-XXL-fontWeight) var(--pr-t-font-highlight-XXL-fontSize) / var(--pr-t-font-highlight-XXL-lineHeight) var(--pr-t-font-family-brand);
+	--pr-t-font-highlight-XL: var(--pr-t-font-highlight-XL-fontWeight) var(--pr-t-font-highlight-XL-fontSize) / var(--pr-t-font-highlight-XL-lineHeight) var(--pr-t-font-family-brand);
+	--pr-t-font-highlight-L: var(--pr-t-font-highlight-L-fontWeight) var(--pr-t-font-highlight-L-fontSize) / var(--pr-t-font-highlight-L-lineHeight) var(--pr-t-font-family-brand);
+	--pr-t-font-body-M: var(--pr-t-font-body-M-fontSize) / var(--pr-t-font-body-M-lineHeight) var(--pr-t-font-family);
+	--pr-t-font-body-S: var(--pr-t-font-body-S-fontSize) / var(--pr-t-font-body-S-lineHeight) var(--pr-t-font-family);
+	--pr-t-font-body-XS: var(--pr-t-font-body-XS-fontSize) / var(--pr-t-font-body-XS-lineHeight) var(--pr-t-font-family);
 
 	// TOKENS : RADIUS
 
@@ -68,6 +68,20 @@
 		@include core.cssvars('palettes-#{$palette}', map.get(config.$palettesInterpolation, $palette));
 	}
 
+	// Provided by Lucca.Store Push Panel
+	--commons-pushPanel-width: var(--component-lu-app-lifecycle-push-panel, 0px);
+
+	// stylelint-disable custom-property-pattern
+	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50);
+	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100);
+	--palettes-assets-primary-dark: var(--palettes-#{config.$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);
+	--palettes-assets-secondary-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'secondary')}-50);
+	--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');
 

package/src/components/activityFeed/component.scss

@@ -0,0 +1,76 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	list-style-type: '';
+	padding: 0;
+	font: var(--pr-t-font-body-M);
+	color: var(--pr-t-color-text);
+
+	@at-root ($atRoot) {
+		.activityFeed-step {
+			position: relative;
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+
+			&:not(:last-child) {
+				padding-block-end: var(--pr-t-spacings-200);
+
+				&::before {
+					content: '';
+					inline-size: var(--pr-t-spacings-25);
+					background-color: var(--palettes-neutral-100);
+					position: absolute;
+					inset-block-end: 0;
+					border-radius: var(--pr-t-border-radius-full);
+					inset-block-start: calc(var(--pr-t-spacings-500) + var(--pr-t-spacings-50));
+					inset-inline-start: calc(var(--pr-t-spacings-200) - var(--pr-t-spacings-25) / 2);
+				}
+			}
+		}
+
+		.activityFeed-step-avatar {
+			margin-block: var(--pr-t-spacings-75);
+		}
+
+		.activityFeed-step-description {
+			flex-grow: 1;
+		}
+
+		.activityFeed-step-description-time {
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+			display: block;
+		}
+
+		.activityFeed-content-update-icon {
+			display: var(--components-activityFeed-content-update-icon-display);
+		}
+
+		.activityFeed-content-update {
+			display: var(--components-activityFeed-content-update-display);
+			align-items: center;
+			gap: var(--pr-t-spacings-100);
+		}
+
+		.activityFeed-content-update-before,
+		.activityFeed-content-update-after {
+			display: flex;
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.activityFeed-content {
+			margin-block-start: var(--pr-t-spacings-100);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+			align-items: flex-start;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+}

package/src/components/activityFeed/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/activityFeed/index.scss

@@ -0,0 +1,29 @@
+@use 'exports' as *;
+@use '@lucca-front/scss/src/components/avatar/exports' as avatar;
+
+.activityFeed {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+}
+
+.activityFeed-step-avatar {
+	@layer mods {
+		@include avatar.S;
+	}
+}
+
+.activityFeed-content-update {
+	@layer mods {
+		&:has(.activityFeed-content-update-before:empty, .activityFeed-content-update-after:empty) {
+			@include single;
+		}
+
+		&:has(.activityFeed-content-update-before:empty) {
+			&:has(.activityFeed-content-update-after:empty) {
+				@include empty;
+			}
+		}
+	}
+}

package/src/components/activityFeed/states.scss

@@ -0,0 +1,7 @@
+@mixin empty {
+	--components-activityFeed-content-update-display: none;
+}
+
+@mixin single {
+	--components-activityFeed-content-update-icon-display: none;
+}

package/src/components/activityFeed/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-activityFeed-content-update-display: flex;
+	--components-activityFeed-content-update-icon-display: flex;
+}

package/src/components/appLayout/component.scss

@@ -1,4 +1,3 @@
-
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 

package/src/components/appLayout/mods.scss

@@ -1,15 +1,15 @@
-
 @mixin wide {
-	--components-appLayout-gridTemplate: "banner  banner" var(--commons-banner-height)
-																			 "navSide main  " 1fr
-																			/ auto    1fr;
-
+	--components-appLayout-gridTemplate:
+		'banner  banner' var(--commons-banner-height)
+		'navSide main  ' 1fr
+		/ auto    1fr;
 }
 
 @mixin mobileNavSideBottom {
-	--components-appLayout-gridTemplate: "banner " var(--commons-banner-height)
-																			 "main"    1fr
-																			 "navSide" auto;
+	--components-appLayout-gridTemplate:
+		'banner ' var(--commons-banner-height)
+		'main'    1fr
+		'navSide' auto;
 	--components-appLayout-navSide-overflowX: visible;
 	--components-appLayout-navSide-overflowY: visible;
 }

package/src/components/appLayout/vars.scss

@@ -1,10 +1,10 @@
 @mixin vars {
 	--components-appLayout-blockSize: 100dvh;
-	--components-appLayout-inlineSize: 100dvw;
+	--components-appLayout-inlineSize: 100%;
 	--components-appLayout-navSide-overflowX: hidden;
 	--components-appLayout-navSide-overflowY: auto;
-	--components-appLayout-gridTemplate: "banner " var(--commons-banner-height)
-																			 "navSide" auto
-																			 "main   " 1fr;
-
+	--components-appLayout-gridTemplate:
+		'banner ' var(--commons-banner-height)
+		'navSide' auto
+		'main   ' 1fr;
 }

package/src/components/avatar/mods.scss

@@ -86,7 +86,6 @@
 			font-size: var(--components-avatar-placeholder-size);
 		}
 	}
-
 }
 
 @mixin AI {

package/src/components/breadcrumbs/component.scss

@@ -32,7 +32,8 @@
 		}
 
 		// Second selector to get rid of breadcrumbs-list-item-action on angular component
-		.breadcrumbs-list-item-action, .breadcrumbs-list-item > a  {
+		.breadcrumbs-list-item-action,
+		.breadcrumbs-list-item > a {
 			color: var(--pr-t-color-text-subtle);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: color;

package/src/components/breadcrumbs/index.scss

@@ -15,11 +15,12 @@
 }
 
 // Second selector to get rid of breadcrumbs-list-item-action on angular component
-.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
+.breadcrumbs-list-item-action,
+.breadcrumbs-list-item > a {
 	@layer mods {
 		// .active is deprecated
-		&.is-active,
 		&.active,
+		&.is-active,
 		&[aria-current='page'] {
 			@include active;
 		}

package/src/components/breadcrumbs/mods.scss

@@ -11,7 +11,8 @@
 
 			&:first-child {
 				// Second selector to get rid of breadcrumbs-list-item-action on angular component
-				.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
+				.breadcrumbs-list-item-action,
+				.breadcrumbs-list-item > a {
 					&::before {
 						@include icon.generate('arrow_left');
 

package/src/components/bubbleIcon/index.scss

@@ -1,5 +1,3 @@
-
-
 @use 'exports' as *;
 
 .bubbleIcon {

package/src/components/bubbleIllustration/component.scss

@@ -1,4 +1,3 @@
-
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {

package/src/components/bubbleIllustration/states.scss

@@ -1,6 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
-
 @mixin success {
 	@include color.palette('success');
 }