Fix react native paper elevation colors

package/src/subpaths/react-native-paper/modules/paper-color-adapter/PaperColorAdapter.ts

@@ -1,13 +1,7 @@
 // from react-native-paper
 import Color from "color"
 
-// import {
-// 	normal as normalBlend,
-// } from "color-blend"
-
 import {
-	MD3DarkTheme,
-	MD3LightTheme,
 	type MD3Theme,
 } from "react-native-paper"
 
@@ -124,6 +118,7 @@
 		this.inversePrimary = data.colorScheme.inversePrimary
 		this.shadow = data.colorScheme.shadow
 		this.scrim = data.colorScheme.scrim
+		this.elevation = prepareElevations(data.colorScheme.primary, data.colorScheme.surface)
 
 		// +++++ fix inexistence props +++++
 
@@ -150,33 +145,6 @@
 				.alpha(0.4)
 				.rgb()
 				.string()
-
-			// can't figure it out
-			// this.elevation = {
-			// 	level0: "transparent",
-			// 	level1: blendColor(
-			// 		data.primaryPalette.tone(80),
-			// 		Color(data.primaryPalette.tone(80)).alpha(0.05).rgb().string(),
-			// 	),
-			// 	level2: blendColor(
-			// 		data.primaryPalette.tone(80),
-			// 		Color(data.primaryPalette.tone(80)).alpha(0.08).rgb().string(),
-			// 	),
-			// 	level3: blendColor(
-			// 		data.primaryPalette.tone(80),
-			// 		Color(data.primaryPalette.tone(80)).alpha(0.11).rgb().string(),
-			// 	),
-			// 	level4: blendColor(
-			// 		data.primaryPalette.tone(80),
-			// 		Color(data.primaryPalette.tone(80)).alpha(0.12).rgb().string(),
-			// 	),
-			// 	level5: blendColor(
-			// 		data.primaryPalette.tone(80),
-			// 		Color(data.primaryPalette.tone(80)).alpha(0.14).rgb().string(),
-			// 	),
-			// }
-
-			this.elevation = MD3DarkTheme.colors.elevation
 		} else {
 			this.surfaceDisabled = Color(data.neutralPalette.tone(10))
 				.alpha(0.12)
@@ -191,33 +159,6 @@
 			this.scrim = data.neutralPalette.tone(0)
 
 			this.backdrop = Color(data.neutralVariantPalette.tone(20)).alpha(0.4).rgb().string()
-
-			// can't figure it out
-			// this.elevation = {
-			// 	level0: "transparent",
-			// 	level1: blendColor(
-			// 		data.primaryPalette.tone(99),
-			// 		Color(data.primaryPalette.tone(40)).alpha(0.05).rgb().string(),
-			// 	),
-			// 	level2: blendColor(
-			// 		data.primaryPalette.tone(99),
-			// 		Color(data.primaryPalette.tone(40)).alpha(0.08).rgb().string(),
-			// 	),
-			// 	level3: blendColor(
-			// 		data.primaryPalette.tone(99),
-			// 		Color(data.primaryPalette.tone(40)).alpha(0.11).rgb().string(),
-			// 	),
-			// 	level4: blendColor(
-			// 		data.primaryPalette.tone(99),
-			// 		Color(data.primaryPalette.tone(40)).alpha(0.12).rgb().string(),
-			// 	),
-			// 	level5: blendColor(
-			// 		data.primaryPalette.tone(99),
-			// 		Color(data.primaryPalette.tone(40)).alpha(0.14).rgb().string(),
-			// 	),
-			// }
-
-			this.elevation = MD3LightTheme.colors.elevation
 		}
 
 		// ----- fix inexistence props -----
@@ -226,27 +167,18 @@
 
 }
 
-// function blendColor(
-// 	backgroundHex: string,
-// 	foregroundHex: string,
-// ) {
-// 	const bg = Color(backgroundHex)
-// 	const fg = Color(foregroundHex)
-
-// 	const blended = normalBlend(
-// 		{
-// 			r: bg.red(),
-// 			g: bg.green(),
-// 			b: bg.blue(),
-// 			a: bg.alpha(),
-// 		},
-// 		{
-// 			r: fg.red(),
-// 			g: fg.green(),
-// 			b: fg.blue(),
-// 			a: fg.alpha(),
-// 		},
-// 	)
-
-// 	return Color.rgb(blended.r, blended.g, blended.b).string()
-// }
+const elevationLevels = [0.05, 0.08, 0.11, 0.12, 0.14];
+function prepareElevations(primary: string, surface: string): MD3Colors['elevation'] {
+  let elevations: Record<string, string> = {
+    level0: 'transparent',
+  }
+
+  for (let i = 0; i < elevationLevels.length; i++) {
+    elevations[`level${i + 1}`] = Color(surface)
+      .mix(Color(primary), Number(elevationLevels[i]))
+      .rgb()
+      .string()
+  }
+
+  return elevations as MD3Colors['elevation']
+}