Merge pull request #58 from etn-ccis/release/md3

Publishing alpha version 7.0.0-alpha.0

.gitignore

@@ -24,3 +24,4 @@
 **/**/npm-debug.log*
 **/**/yarn-debug.log*
 **/**/yarn-error.log*
+**/**/.vscode

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v7.0.0 (Unreleased)
+
+### Changed
+
+-   Updated themes to use Material Design 3 styled palettes and React Native Paper v5 theme structure.
+
 ## v6.0.0 (November 9, 2021)
 
 ### Changed
@@ -19,6 +25,7 @@ Previous versions listed after this indicator refer to our deprecated `@pxblue`
 -   Many new theme color properties to give greater control over the styles of various components. Note that the global ReactNativePaper namespace will need to be updated in your application to use these properties.
 
 ### Removed
+
 -   The `blueDarkAlt` theme has been consolidated into the `blueDark` theme and a selection of wrapper components in the `@pxblue/react-native-components` library. This eliminates the need for using two theme providers and writing your own wrappers for these components.
 -   `theme.colors.textSecondary` — use `theme.colors.textPalette.secondary` instead.
 

package.json

@@ -2,7 +2,7 @@
     "name": "@brightlayer-ui/react-native-themes",
     "author": "Brightlayer UI <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "6.0.0",
+    "version": "7.0.0-alpha.0",
     "description": "React Native themes for Brightlayer UI applications",
     "main": "./dist/index.js",
     "scripts": {
@@ -39,19 +39,21 @@
         "React Native"
     ],
     "dependencies": {
-        "@brightlayer-ui/colors": "^3.0.0",
+        "@brightlayer-ui/colors": "4.0.0-alpha.0",
         "color": "^4.2.3"
     },
     "peerDependencies": {
-        "react-native-paper": "^3.0.0 || ^4.0.0"
+        "react-native-paper": "^5.0.0"
     },
     "devDependencies": {
         "@brightlayer-ui/prettier-config": "^1.0.3",
         "@types/color": "^3.0.1",
         "npm-license-crawler": "^0.2.1",
         "prettier": "^3.0.0",
-        "react-native-paper": "^4.0.0",
-        "typescript": "^5.0.4"
+        "react-native-paper": "^5.0.0",
+        "typescript": "^5.0.4",
+        "react-native": "~0.72.6",
+        "react": "^18.2.0"
     },
     "prettier": "@brightlayer-ui/prettier-config",
     "files": [

src/blueDarkTheme.ts

@@ -6,88 +6,83 @@ All rights reserved.
 This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
 **/
 
-import { configureFonts, DefaultTheme } from 'react-native-paper';
-import { blue, red, darkBlack, black, white, lightBlue } from '@brightlayer-ui/colors';
-import { fontConfig, ThemeOpacity } from './shared';
+import { MD3DarkTheme, configureFonts } from 'react-native-paper';
+import { fontConfig } from './shared';
+import { BLUIColors } from '@brightlayer-ui/colors';
 import Color from 'color';
 
-const themeOpacity: ThemeOpacity = {
-    disabled: 0.36,
-    divider: 0.36,
-    disabledBackground: 0.24,
-    actionOpacity: 0.1,
-};
-
-export const blueDarkTheme: ReactNativePaper.Theme = {
-    ...DefaultTheme,
-    dark: true,
-    roundness: 4,
-    fonts: {
-        ...configureFonts(fontConfig),
-        bold: {
-            fontFamily: 'OpenSans-Bold',
-            fontWeight: '700',
-        },
-    },
+export const MD3BluiDarkTheme = {
+    ...MD3DarkTheme,
+    fonts: configureFonts({ config: fontConfig }),
     colors: {
-        ...DefaultTheme.colors,
-        primary: blue[200],
-        primaryPalette: {
-            light: blue[50],
-            main: blue[200],
-            dark: blue[500],
-        },
-        accent: lightBlue[200],
-        accentPalette: {
-            light: lightBlue[50],
-            main: lightBlue[200],
-            dark: lightBlue[500],
-        },
-        error: red[200],
-        errorPalette: {
-            light: red[50],
-            main: red[200],
-            dark: red[500],
-        },
-        divider: Color(black[200]).alpha(themeOpacity.divider).string(),
-        background: darkBlack[800],
-        surface: black[900],
-        text: black[50],
-        placeholder: black[200],
-        onSurface: black[50],
-        textPalette: {
-            primary: black[50],
-            secondary: black[200],
-            onPrimary: {
-                light: black[500],
-                main: black[500],
-                dark: white[50],
-            },
-            disabled: black[400],
-        },
-        actionPalette: {
-            active: black[500],
-            background: black[800],
-            disabled: Color(black[300]).alpha(themeOpacity.disabled).string(),
-            disabledBackground: Color(black[200]).alpha(themeOpacity.disabledBackground).string(),
-        },
-        disabled: Color(black[300]).alpha(themeOpacity.disabled).string(),
-        notification: lightBlue[200],
-        opacity: themeOpacity,
-        overrides: {
-            avatar: {
-                background: Color(black[50]).alpha(themeOpacity.actionOpacity).string(),
-            },
-            chip: {
-                flat: {
-                    background: black[500],
-                },
-            },
-            toggleButtonGroup: {
-                checked: {
-                    background: Color(blue[500]).alpha(0.36).string(),
-                },
-            },
+        ...MD3DarkTheme.colors,
+        // React Native Paper default theme color variants
+        primary: BLUIColors.primary[80],
+        onPrimary: BLUIColors.primary[20],
+        primaryContainer: BLUIColors.primary[30],
+        onPrimaryContainer: BLUIColors.primary[90],
+        secondary: BLUIColors.primary[80],
+        onSecondary: BLUIColors.primary[20],
+        secondaryContainer: BLUIColors.primary[30],
+        onSecondaryContainer: BLUIColors.primary[90],
+        tertiary: BLUIColors.primary[80],
+        onTertiary: BLUIColors.primary[20],
+        tertiaryContainer: BLUIColors.primary[30],
+        onTertiaryContainer: BLUIColors.primary[90],
+        error: BLUIColors.error[80],
+        onError: BLUIColors.error[20],
+        errorContainer: BLUIColors.error[30],
+        onErrorContainer: BLUIColors.error[90],
+        background: BLUIColors.neutral[6],
+        onBackground: BLUIColors.neutral[95],
+        surface: BLUIColors.neutral[6],
+        onSurface: BLUIColors.neutral[95],
+        surfaceVariant: BLUIColors.neutralVariant[30],
+        onSurfaceVariant: BLUIColors.neutralVariant[70],
+        outline: BLUIColors.neutralVariant[60],
+        outlineVariant: Color(BLUIColors.neutralVariant[60]).alpha(0.25),
+        shadow: BLUIColors.primary[0],
+        scrim: BLUIColors.primary[0],
+        inverseSurface: BLUIColors.neutral[90],
+        inverseOnSurface: BLUIColors.neutral[10],
+        inversePrimary: BLUIColors.primary[40],
+        elevation: {
+            level0: 'transparent',
+            level1: BLUIColors.neutral[4],
+            level2: BLUIColors.neutral[10],
+            level3: BLUIColors.neutral[12],
+            level4: BLUIColors.neutral[17],
+            level5: BLUIColors.neutral[20],
         },
+
+        // Custom color variants
+        primaryNonText: BLUIColors.primary[60],
+        errorNonText: BLUIColors.error[60],
+        disabled: Color(BLUIColors.neutral[90]).alpha(0.2),
+        warning: BLUIColors.warning[90],
+        warningNonText: BLUIColors.warning[80],
+        onWarning: BLUIColors.warning[20],
+        warningContainer: BLUIColors.warning[30],
+        onWarningContainer: BLUIColors.warning[90],
+        success: BLUIColors.success[80],
+        successNonText: BLUIColors.success[70],
+        onSuccess: BLUIColors.success[20],
+        successContainer: BLUIColors.success[30],
+        onSuccessContainer: BLUIColors.success[90],
+        orange: BLUIColors.orange[80],
+        orangeNonText: BLUIColors.orange[70],
+        onOrange: BLUIColors.orange[20],
+        orangeContainer: BLUIColors.orange[30],
+        onOrangeContainer: BLUIColors.orange[90],
+        purple: BLUIColors.purple[80],
+        purpleNonText: BLUIColors.purple[60],
+        onPurple: BLUIColors.purple[20],
+        purpleContainer: BLUIColors.purple[30],
+        onPurpleContainer: BLUIColors.purple[90],
+        surfaceContainerLowest: BLUIColors.neutral[4],
+        surfaceContainerLow: BLUIColors.neutral[10],
+        surfaceContainer: BLUIColors.neutral[12],
+        surfaceContainerHigh: BLUIColors.neutral[17],
+        surfaceContainerHighest: BLUIColors.neutral[20],
     },
 };

src/blueTheme.ts

@@ -6,88 +6,83 @@ All rights reserved.
 This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
 **/
 
-import { configureFonts, DefaultTheme } from 'react-native-paper';
-import { blue, red, black, gray, lightBlue, white } from '@brightlayer-ui/colors';
-import { fontConfig, ThemeOpacity } from './shared';
+import { MD3LightTheme, configureFonts } from 'react-native-paper';
+import { BLUIColors } from '@brightlayer-ui/colors';
+import { fontConfig } from './shared';
 import Color from 'color';
 
-const themeOpacity: ThemeOpacity = {
-    disabled: 0.3,
-    divider: 0.36,
-    disabledBackground: 0.24,
-    actionOpacity: 1,
-};
-
-export const blueTheme: ReactNativePaper.Theme = {
-    ...DefaultTheme,
-    dark: false,
-    roundness: 4,
-    fonts: {
-        ...configureFonts(fontConfig),
-        bold: {
-            fontFamily: 'OpenSans-Bold',
-            fontWeight: '700',
-        },
-    },
+export const MD3BluiLightTheme = {
+    ...MD3LightTheme,
+    fonts: configureFonts({ config: fontConfig }),
     colors: {
-        ...DefaultTheme.colors,
-        primary: blue[500],
-        primaryPalette: {
-            light: blue[50],
-            main: blue[500],
-            dark: blue[700],
-        },
-        accent: lightBlue[500],
-        accentPalette: {
-            light: lightBlue[50],
-            main: lightBlue[500],
-            dark: lightBlue[700],
-        },
-        error: red[500],
-        errorPalette: {
-            light: red[50],
-            main: red[500],
-            dark: red[700],
-        },
-        divider: Color(black[200]).alpha(themeOpacity.divider).string(),
-        background: white[200],
-        surface: white[50],
-        text: black[500],
-        placeholder: gray[500],
-        onSurface: black[500],
-        textPalette: {
-            primary: black[500],
-            secondary: gray[500],
-            onPrimary: {
-                light: black[500],
-                main: white[50],
-                dark: white[50],
-            },
-            disabled: Color(black[500]).alpha(themeOpacity.disabled).string(),
-        },
-        actionPalette: {
-            active: gray[500],
-            background: white[500],
-            disabled: Color(black[500]).alpha(themeOpacity.disabled).string(),
-            disabledBackground: Color(black[200]).alpha(themeOpacity.disabledBackground).string(),
-        },
-        disabled: Color(black[500]).alpha(themeOpacity.disabled).string(),
-        notification: lightBlue[500],
-        opacity: themeOpacity,
-        overrides: {
-            snackbar: {
-                accent: blue[200],
-            },
-            bottomNavigation: {
-                inactive: blue[200],
-            },
-            button: {
-                contained: {
-                    text: {
-                        disabled: blue[200],
-                    },
-                },
-            },
+        ...MD3LightTheme.colors,
+        // React Native Paper default theme color variants
+        primary: BLUIColors.primary[40],
+        onPrimary: BLUIColors.primary[100],
+        primaryContainer: BLUIColors.primary[80],
+        onPrimaryContainer: BLUIColors.primary[30],
+        secondary: BLUIColors.primary[40],
+        onSecondary: BLUIColors.primary[100],
+        secondaryContainer: BLUIColors.primary[80],
+        onSecondaryContainer: BLUIColors.primary[30],
+        tertiary: BLUIColors.primary[40],
+        onTertiary: BLUIColors.primary[100],
+        tertiaryContainer: BLUIColors.primary[80],
+        onTertiaryContainer: BLUIColors.primary[30],
+        error: BLUIColors.error[40],
+        onError: BLUIColors.primary[100],
+        errorContainer: BLUIColors.error[90],
+        onErrorContainer: BLUIColors.error[30],
+        background: BLUIColors.neutral[98],
+        onBackground: BLUIColors.neutral[10],
+        surface: BLUIColors.neutral[98],
+        onSurface: BLUIColors.neutral[10],
+        surfaceVariant: BLUIColors.neutralVariant[90],
+        onSurfaceVariant: BLUIColors.neutralVariant[30],
+        outline: BLUIColors.neutralVariant[50],
+        outlineVariant: Color(BLUIColors.neutralVariant[50]).alpha(0.25),
+        shadow: BLUIColors.primary[0],
+        scrim: BLUIColors.primary[0],
+        inverseSurface: BLUIColors.neutral[20],
+        inverseOnSurface: BLUIColors.neutral[95],
+        inversePrimary: BLUIColors.primary[80],
+        elevation: {
+            level0: 'transparent',
+            level1: BLUIColors.primary[100],
+            level2: BLUIColors.neutral[97],
+            level3: BLUIColors.neutral[94],
+            level4: BLUIColors.neutral[92],
+            level5: BLUIColors.neutral[90],
         },
+
+        // Custom color variants
+        primaryNonText: BLUIColors.primary[50],
+        errorNonText: BLUIColors.error[50],
+        disabled: Color(BLUIColors.neutral[10]).alpha(0.2),
+        warning: BLUIColors.warning[40],
+        warningNonText: BLUIColors.warning[60],
+        onWarning: BLUIColors.primary[100],
+        warningContainer: BLUIColors.warning[90],
+        onWarningContainer: BLUIColors.warning[30],
+        success: BLUIColors.success[40],
+        successNonText: BLUIColors.success[50],
+        onSuccess: BLUIColors.primary[100],
+        successContainer: BLUIColors.success[90],
+        onSuccessContainer: BLUIColors.success[30],
+        orange: BLUIColors.orange[40],
+        orangeNonText: BLUIColors.orange[50],
+        onOrange: BLUIColors.primary[100],
+        orangeContainer: BLUIColors.orange[90],
+        onOrangeContainer: BLUIColors.orange[30],
+        purple: BLUIColors.purple[40],
+        purpleNonText: BLUIColors.purple[50],
+        onPurple: BLUIColors.primary[100],
+        purpleContainer: BLUIColors.purple[90],
+        onPurpleContainer: BLUIColors.purple[30],
+        surfaceContainerLowest: BLUIColors.primary[100],
+        surfaceContainerLow: BLUIColors.neutral[97],
+        surfaceContainer: BLUIColors.neutral[94],
+        surfaceContainerHigh: BLUIColors.neutral[92],
+        surfaceContainerHighest: BLUIColors.neutral[90],
     },
 };