From 1a1abc8af8e3dfde427b82af4c10fc941c96ed62 Mon Sep 17 00:00:00 2001
From: Vincent Valentin <64789527+vvalentin-lucca@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:47:06 +0100
Subject: [PATCH] remove circular dependency (#3280)

---
 packages/scss/src/commons/base.scss           |  2 +-
 packages/scss/src/commons/config.scss         | 35 +++++++++----------
 packages/scss/src/commons/utils/color.scss    |  3 +-
 .../src/components/callout/component.scss     |  3 +-
 .../calloutFeedbackList/component.scss        |  3 +-
 5 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/scss/src/commons/base.scss b/packages/scss/src/commons/base.scss
index 0e1449a8ec..31474584d6 100644
--- a/packages/scss/src/commons/base.scss
+++ b/packages/scss/src/commons/base.scss
@@ -89,7 +89,7 @@
 
 			@if $paletteExists {
 				.palette-#{$palette} {
-					@include color.palette($name: $palette, $shades: config.$palettesShades, $palette: $paletteExists);
+					@include color.palette($name: $palette, $palette: $paletteExists);
 				}
 			}
 		}
diff --git a/packages/scss/src/commons/config.scss b/packages/scss/src/commons/config.scss
index ddd535d358..763e36d501 100644
--- a/packages/scss/src/commons/config.scss
+++ b/packages/scss/src/commons/config.scss
@@ -1,5 +1,4 @@
 @use 'sass:list';
-@use '@lucca-front/scss/src/commons/utils/color';
 
 $importDeprecatedSpacings: true !default;
 $isNamespaced: false !default;
@@ -437,15 +436,15 @@ $elevation: (
 		'sunken': var(--palettes-neutral-50),
 		'default': var(--palettes-neutral-25),
 		'raised': var(--palettes-neutral-0),
-		'backdrop': color.transparentize(var(--palettes-neutral-400), 0.4),
+		'backdrop': color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent),
 	),
 	shadow: (
 		'raised':
-			'0 0 0 1px #{color.transparentize(var(--palettes-neutral-400), 0.08)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-400), 0.4)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-400), 0.2)}',
+			'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) 4%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-400) 2%, transparent)',
 		'overflow':
-			'0 0 0 1px #{color.transparentize(var(--palettes-neutral-400), 0.08)}, 0 0 4px #{color.transparentize(var(--palettes-neutral-400), 0.32)}, 0 0 8px #{color.transparentize(var(--palettes-neutral-400), 0.24)}',
+			'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.transparentize(var(--palettes-neutral-400), 0.08)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-400), 0.24)}, 0 4px 12px 2px #{color.transparentize(var(--palettes-neutral-400), 0.08)}',
+			'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)',
 	),
 );
 
@@ -554,17 +553,17 @@ $borderRadius: (
 // $elevations are deprecated
 $elevations: (
 	'1':
-		'0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}',
+		'0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
 	'2':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 2px 6px #{color.transparentize(var(--palettes-neutral-900), 0.05)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 2px 6px color-mix(in srgb, var(--palettes-neutral-900) 5%, transparent)',
 	'3':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 4px 10px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 4px 10px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
 	'4':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 3px 6px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, 0 4px 16px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 3px 6px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), 0 4px 16px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
 	'5':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 12px 32px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
 	'6':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, -2px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, -12px 6px 24px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), -2px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), -12px 6px 24px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
 );
 
 // opacity is deprecated
@@ -605,19 +604,19 @@ $textLink: (
 // $boxShadows are deprecated
 $boxShadows: (
 	'XXS':
-		'0 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.2)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.15)}',
+		'0 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 15%, transparent)',
 	'XS':
-		'0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}',
+		'0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
 	'S':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 2px 6px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 2px 6px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
 	'M':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 4px 10px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 4px 10px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
 	'L':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 3px 6px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, 0 4px 16px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 3px 6px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), 0 4px 16px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
 	'XL':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 12px 32px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
 	'XXL':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, -2px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, -12px 6px 24px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
+		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), -2px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), -12px 6px 24px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
 );
 
 // $colors are deprecated
diff --git a/packages/scss/src/commons/utils/color.scss b/packages/scss/src/commons/utils/color.scss
index d7e0ea8429..7d7e157ed9 100644
--- a/packages/scss/src/commons/utils/color.scss
+++ b/packages/scss/src/commons/utils/color.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
+@use '@lucca-front/scss/src/commons/config';
 
 @function transparentize($color, $amount: 50%, $space: var(--commons-colorSpace, srgb)) {
 	@if math.unit($amount) != '%' {
@@ -8,7 +9,7 @@
 	@return color-mix(in $space, $color $amount, transparent);
 }
 
-@mixin palette($name, $shades, $palette: false) {
+@mixin palette($name, $shades: config.$palettesShades, $palette: false) {
 	@each $shade in $shades {
 		@if $palette {
 			@if map.get($palette, $shade) {
diff --git a/packages/scss/src/components/callout/component.scss b/packages/scss/src/components/callout/component.scss
index 1ec8a36c1e..15ef1ccf74 100644
--- a/packages/scss/src/components/callout/component.scss
+++ b/packages/scss/src/components/callout/component.scss
@@ -1,4 +1,3 @@
-@use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
@@ -47,7 +46,7 @@
 			padding: var(--pr-t-spacings-50) 0;
 
 			.button {
-				@include color.palette('neutral', config.$palettesShades);
+				@include color.palette('neutral');
 				@include button.S;
 			}
 		}
diff --git a/packages/scss/src/components/calloutFeedbackList/component.scss b/packages/scss/src/components/calloutFeedbackList/component.scss
index 331a6d2d9a..4d5eb560d0 100644
--- a/packages/scss/src/components/calloutFeedbackList/component.scss
+++ b/packages/scss/src/components/calloutFeedbackList/component.scss
@@ -1,4 +1,3 @@
-@use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/color';
@@ -14,7 +13,7 @@
 	gap: var(--components-calloutFeedbackList-gap);
 
 	.button {
-		@include color.palette('neutral', config.$palettesShades);
+		@include color.palette('neutral');
 		@include button.S;
 	}