Some Colors are not included in Type MD3Colors

crystalarcus commented 3 months ago

Current behaviour

Using surfaceContainer color gives following error in TypeScript:

Property 'surfaceContainer' does not exist on type 'MD3Colors'.ts(2339)

After looking at Type MD3Colors, I found out these Colors are not included in React-Native-Paper's MD3Color type : surfaceContainer surfaceContainerHigh surfaceContainerHighest surfaceContainerLow surfaceContainerLowest

_Note: There are 2 MD3Colors . The one I am talking about is a type from node_modules\react-native-paper\src\types.tsx , which contains type definitions. The other MD3Colors is a const object from file node_modules\react-native-paper\src\styles\themes\v3\tokens.tsx which contains palette_

Expected behaviour

These colors should be included in MD3Colors and should not get any error's as these are part of Material You's Color Roles :

I used useMaterial3Theme from pchmn/expo-material3-theme to generate my theme colors, and it gives all the SurfaceContainer colors. But Paper's default theme and Type MD3Colors don't have it. So whenever I use SurfaceContainer Colors, I get errors in VS Code. Just want to know why is it not included ?

How to reproduce?

Create expo app Install react-native-paper Try using surfaceContianer Color to a background of View, You will get error.

Preview

What have you tried so far?

Nothing much, except, editing MD3Colors type in and including all missing colors, but I still got the error. I don't really know how these things work. I checked React-Native-Paper's docs on Theming, but even there, there's no word about surfaceContianer Colors. I think it's just not included/was missed while creating paper's MD3Colors or was not present in Material You by that time, but now it is and should be included in paper too. Surface Container and its variants are unique and provides amazing theming for surfaces. Please try to include them as fast as possible ✨.

Your Environment

software	version
android	13
react-native	0.72.10
react-native-paper	5.11.1
node	20.10.0
npm or yarn	1.22.21
expo sdk	50.0.13

crystalarcus commented 2 months ago

@lukewalczak any thoughts on this ?

macinjoke commented 1 month ago

I noticed this problem too. And I found this article https://material.io/blog/tone-based-surface-color-m3

Surface Container Lowest is a new role Surface at elevation +1 becomes Surface Container Low Surface at elevation +2 becomes Surface Container Surface at elevation +3 becomes Surface Container High Surface at elevation +4 and +5 are being deprecated, it is recommended to use Surface Container Highest by default as a replacement. As an alternative Surface Container High, or Surface Dim can be used depending on the specific use case. Surface Variant becomes Surface Container Highest

So I set my theme like this:

/**
 * copy from Material Theme Builder
 * @see https://material-foundation.github.io/material-theme-builder/
 */
export const lightColors = {
  primary: '#7b5800',
  // ...
  surfaceContainerHighest: '#e9e1d9',
  surfaceContainerHigh: '#efe7de',
  surfaceContainer: '#f5ede4',
  surfaceContainerLow: '#fbf2e9',
  surfaceContainerLowest: '#ffffff',

  // manually added 
  elevation: {
    ...MD3LightTheme.colors.elevation,
    level1: '#fbf2e9', // surfaceContainerLow
    level2: '#f5ede4', // surfaceContainer
    level3: '#efe7de', // surfaceContainerHigh
    level4: '#e9e1d9', // surfaceContainerHighest
    level5: '#e9e1d9', // surfaceContainerHighest
  },
}

This has been confirmed to work correctly with the background color of the Card in elevated mode. https://callstack.github.io/react-native-paper/docs/components/Card/#theme-colors

callstack / react-native-paper