diff --git a/package/src/subpaths/react-native-paper/modules/paper-color-adapter/PaperColorAdapter.ts b/package/src/subpaths/react-native-paper/modules/paper-color-adapter/PaperColorAdapter.ts index c278c01..0373160 100644 --- a/package/src/subpaths/react-native-paper/modules/paper-color-adapter/PaperColorAdapter.ts +++ b/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 @@ export class PaperColorAdapter implements MD3Colors { 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 @@ export class PaperColorAdapter implements MD3Colors { .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 @@ export class PaperColorAdapter implements MD3Colors { 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 @@ export class PaperColorAdapter implements MD3Colors { } -// 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 = { + 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'] +}