npm - @brightlayer-ui/react-native-themes - Versions diffs - 6.0.0 → 7.0.0-alpha.1 - Mend

@brightlayer-ui/react-native-themes 6.0.0 → 7.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -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/LICENSES.json ADDED Viewed

@@ -0,0 +1,158 @@
+{
+    "@brightlayer-ui/colors@3.0.1": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/colors",
+        "licenseUrl": "https://github.com/brightlayer-ui/colors/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@brightlayer-ui/colors@4.0.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/etn-ccis/blui-colors",
+        "licenseUrl": "https://github.com/etn-ccis/blui-colors/raw/master/LICENSE",
+        "parents": "@brightlayer-ui/react-native-themes"
+    },
+    "@brightlayer-ui/icons-svg@1.7.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/icons",
+        "licenseUrl": "https://github.com/brightlayer-ui/icons",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@brightlayer-ui/react-native-components@6.0.1": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/react-native-component-library",
+        "licenseUrl": "https://github.com/brightlayer-ui/react-native-component-library/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@brightlayer-ui/react-native-progress-icons@1.0.2": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/progress-icons",
+        "licenseUrl": "https://github.com/brightlayer-ui/progress-icons/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@brightlayer-ui/react-native-themes@7.0.0-alpha.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/etn-ccis/blui-react-native-themes",
+        "licenseUrl": "https://github.com/etn-ccis/blui-react-native-themes",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@brightlayer-ui/react-native-vector-icons@1.3.1": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/icons",
+        "licenseUrl": "https://github.com/brightlayer-ui/icons/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@react-native-community/masked-view@0.1.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-native-community/react-native-masked-view",
+        "licenseUrl": "https://github.com/react-native-community/react-native-masked-view",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@react-navigation/drawer@5.12.9": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-navigation/react-navigation",
+        "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@react-navigation/native@5.9.8": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-navigation/react-navigation",
+        "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "@react-navigation/stack@5.14.9": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-navigation/react-navigation",
+        "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "color@3.2.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/Qix-/color",
+        "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "color@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/Qix-/color",
+        "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
+        "parents": "@brightlayer-ui/react-native-themes"
+    },
+    "lodash.clonedeep@4.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/lodash/lodash",
+        "licenseUrl": "https://github.com/lodash/lodash/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-collapsible@1.6.0": {
+        "licenses": "MIT",
+        "repository": "https://oblador@github.com/oblador/react-native-collapsible",
+        "licenseUrl": "https://oblador@github.com/oblador/react-native-collapsible/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-gesture-handler@1.10.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/software-mansion/react-native-gesture-handler",
+        "licenseUrl": "https://github.com/software-mansion/react-native-gesture-handler/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-modal@11.10.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-native-community/react-native-modal",
+        "licenseUrl": "https://github.com/react-native-community/react-native-modal/raw/master/LICENSE.md",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-paper@4.10.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/callstack/react-native-paper",
+        "licenseUrl": "https://github.com/callstack/react-native-paper/raw/master/LICENSE.md",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-reanimated@2.2.4": {
+        "licenses": "MIT",
+        "repository": "https://github.com/software-mansion/react-native-reanimated",
+        "licenseUrl": "https://github.com/software-mansion/react-native-reanimated/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-restart@0.0.17": {
+        "licenses": "MIT",
+        "repository": "https://github.com/avishayil/react-native-restart",
+        "licenseUrl": "https://github.com/avishayil/react-native-restart/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-safe-area-context@3.3.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/th3rdwave/react-native-safe-area-context",
+        "licenseUrl": "https://github.com/th3rdwave/react-native-safe-area-context/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-screens@3.9.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/software-mansion/react-native-screens",
+        "licenseUrl": "https://github.com/software-mansion/react-native-screens/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-svg@12.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-native-community/react-native-svg",
+        "licenseUrl": "https://github.com/react-native-community/react-native-svg/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native-vector-icons@8.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/oblador/react-native-vector-icons",
+        "licenseUrl": "https://github.com/oblador/react-native-vector-icons/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react-native@0.64.3": {
+        "licenses": "MIT",
+        "repository": "github:facebook/react-native",
+        "licenseUrl": "github:facebook/react-native",
+        "parents": "reactNativeShowcaseDemo"
+    },
+    "react@17.0.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/facebook/react",
+        "licenseUrl": "https://github.com/facebook/react/raw/master/LICENSE",
+        "parents": "reactNativeShowcaseDemo"
+    }
+}

package/README.md CHANGED Viewed

@@ -1,9 +1,9 @@
 # Brightlayer UI themes for React Native applications
-[![](https://img.shields.io/circleci/project/github/brightlayer-ui/react-native-themes/master.svg?style=flat)](https://circleci.com/gh/brightlayer-ui/react-native-themes/tree/master)
+[![](https://img.shields.io/circleci/project/github/etn-ccis/blui-react-native-themes/master.svg?style=flat)](https://circleci.com/gh/etn-ccis/blui-react-native-themes/tree/master)
 [![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-themes.svg?label=@brightlayer-ui/react-native-themes&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes)
-This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
+This package provides [theming](https://brightlayer-ui.github.io/style/themes) support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
 For other frameworks, check out our related packages:
@@ -61,7 +61,7 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
 The default theme structure for React Native Paper components does not offer us enough control to make some components look exactly the way they should for Brightlayer UI applications. Because of this, we have extended the default theme type definition (see below) and created wrapper components with the correct styles to use in place of some of the standard React Native Paper components.
-In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/brightlayer-ui/react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper.
+In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/etn-ccis/blui-react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper.
 ### TypeScript
@@ -116,5 +116,5 @@ declare global {
 <!--
 ## Demo
-[Check it out](https://github.com/brightlayer-ui/react-native-showcase-demo/tree/master)
+[Check it out](https://github.com/etn-ccis/blui-react-native-showcase-demo/tree/master)
 -->

package/dist/blueDarkTheme.d.ts CHANGED Viewed

@@ -5,4 +5,87 @@ 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.
 **/
-export declare const blueDarkTheme: ReactNativePaper.Theme;
+export declare const MD3BluiDarkTheme: {
+    fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
+    colors: {
+        primary: string;
+        onPrimary: string;
+        primaryContainer: string;
+        onPrimaryContainer: string;
+        secondary: string;
+        onSecondary: string;
+        secondaryContainer: string;
+        onSecondaryContainer: string;
+        tertiary: string;
+        onTertiary: string;
+        tertiaryContainer: string;
+        onTertiaryContainer: string;
+        error: string;
+        onError: string;
+        errorContainer: string;
+        onErrorContainer: string;
+        background: string;
+        onBackground: string;
+        surface: string;
+        onSurface: string;
+        surfaceVariant: string;
+        onSurfaceVariant: string;
+        surfaceDisabled: string;
+        onSurfaceDisabled: string;
+        outline: string;
+        outlineVariant: string;
+        shadow: string;
+        scrim: string;
+        inverseSurface: string;
+        inverseOnSurface: string;
+        inversePrimary: string;
+        elevation: {
+            level0: string;
+            level1: string;
+            level2: string;
+            level3: string;
+            level4: string;
+            level5: string;
+        };
+        primaryNonText: string;
+        errorNonText: string;
+        disabled: string;
+        warning: string;
+        warningNonText: string;
+        onWarning: string;
+        warningContainer: string;
+        onWarningContainer: string;
+        success: string;
+        successNonText: string;
+        onSuccess: string;
+        successContainer: string;
+        onSuccessContainer: string;
+        orange: string;
+        orangeNonText: string;
+        onOrange: string;
+        orangeContainer: string;
+        onOrangeContainer: string;
+        purple: string;
+        purpleNonText: string;
+        onPurple: string;
+        purpleContainer: string;
+        onPurpleContainer: string;
+        surfaceContainerLowest: string;
+        surfaceContainerLow: string;
+        surfaceContainer: string;
+        surfaceContainerHigh: string;
+        surfaceContainerHighest: string;
+        disabledContainer: string;
+        onDisabledContainer: string;
+        backdrop: string;
+    };
+    dark: boolean;
+    mode?: ("adaptive" | "exact") | undefined;
+    roundness: number;
+    animation: {
+        scale: number;
+        defaultAnimationDuration?: number | undefined;
+    };
+    version: 3;
+    isV3: true;
+};

package/dist/blueDarkTheme.js CHANGED Viewed

@@ -21,58 +21,82 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.blueDarkTheme = void 0;
+exports.MD3BluiDarkTheme = void 0;
 var react_native_paper_1 = require("react-native-paper");
-var colors_1 = require("@brightlayer-ui/colors");
 var shared_1 = require("./shared");
+var colors_1 = __importDefault(require("@brightlayer-ui/colors"));
 var color_1 = __importDefault(require("color"));
-var themeOpacity = {
-    disabled: 0.36,
-    divider: 0.36,
-    disabledBackground: 0.24,
-    actionOpacity: 0.1,
-};
-exports.blueDarkTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: true, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
-            fontFamily: 'OpenSans-Bold',
-            fontWeight: '700',
-        } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[200], primaryPalette: {
-            light: colors_1.blue[50],
-            main: colors_1.blue[200],
-            dark: colors_1.blue[500],
-        }, accent: colors_1.lightBlue[200], accentPalette: {
-            light: colors_1.lightBlue[50],
-            main: colors_1.lightBlue[200],
-            dark: colors_1.lightBlue[500],
-        }, error: colors_1.red[200], errorPalette: {
-            light: colors_1.red[50],
-            main: colors_1.red[200],
-            dark: colors_1.red[500],
-        }, divider: color_1.default(colors_1.black[200]).alpha(themeOpacity.divider).string(), background: colors_1.darkBlack[800], surface: colors_1.black[900], text: colors_1.black[50], placeholder: colors_1.black[200], onSurface: colors_1.black[50], textPalette: {
-            primary: colors_1.black[50],
-            secondary: colors_1.black[200],
-            onPrimary: {
-                light: colors_1.black[500],
-                main: colors_1.black[500],
-                dark: colors_1.white[50],
-            },
-            disabled: colors_1.black[400],
-        }, actionPalette: {
-            active: colors_1.black[500],
-            background: colors_1.black[800],
-            disabled: color_1.default(colors_1.black[300]).alpha(themeOpacity.disabled).string(),
-            disabledBackground: color_1.default(colors_1.black[200]).alpha(themeOpacity.disabledBackground).string(),
-        }, disabled: color_1.default(colors_1.black[300]).alpha(themeOpacity.disabled).string(), notification: colors_1.lightBlue[200], opacity: themeOpacity, overrides: {
-            avatar: {
-                background: color_1.default(colors_1.black[50]).alpha(themeOpacity.actionOpacity).string(),
-            },
-            chip: {
-                flat: {
-                    background: colors_1.black[500],
-                },
-            },
-            toggleButtonGroup: {
-                checked: {
-                    background: color_1.default(colors_1.blue[500]).alpha(0.36).string(),
-                },
-            },
-        } }) });
+exports.MD3BluiDarkTheme = __assign(__assign({}, react_native_paper_1.MD3DarkTheme), { fonts: (0, react_native_paper_1.configureFonts)({ config: shared_1.fontConfig }), colors: __assign(__assign({}, react_native_paper_1.MD3DarkTheme.colors), {
+        // React Native Paper default theme color variants
+        primary: colors_1.default.primary[80], onPrimary: colors_1.default.primary[20], primaryContainer: colors_1.default.primary[30], onPrimaryContainer: colors_1.default.primary[90], secondary: colors_1.default.primary[80], onSecondary: colors_1.default.primary[20], secondaryContainer: colors_1.default.primary[30], onSecondaryContainer: colors_1.default.primary[90], tertiary: colors_1.default.primary[80], onTertiary: colors_1.default.primary[20], tertiaryContainer: colors_1.default.primary[30], onTertiaryContainer: colors_1.default.primary[90], error: colors_1.default.error[80], onError: colors_1.default.error[20], errorContainer: colors_1.default.error[30], onErrorContainer: colors_1.default.error[90], background: colors_1.default.neutral[6], onBackground: colors_1.default.neutral[95], surface: colors_1.default.neutral[6], onSurface: colors_1.default.neutral[95], surfaceVariant: colors_1.default.neutralVariant[30], onSurfaceVariant: colors_1.default.neutralVariant[70],
+        // surfaceDisabled is the same as disabledContainer in design files
+        surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.1).rgb().string(),
+        // onSurfaceDisabled is the same as onDisabledContainer in design files
+        onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.15).rgb().string(), outline: colors_1.default.neutralVariant[60], outlineVariant: (0, color_1.default)(colors_1.default.neutralVariant[60]).alpha(0.25).rgb().string(), shadow: colors_1.default.primary[0], scrim: colors_1.default.primary[0], inverseSurface: colors_1.default.neutral[90], inverseOnSurface: colors_1.default.neutral[10], inversePrimary: colors_1.default.primary[40], elevation: {
+            level0: 'transparent',
+            level1: colors_1.default.neutral[4],
+            level2: colors_1.default.neutral[10],
+            level3: colors_1.default.neutral[12],
+            level4: colors_1.default.neutral[17],
+            level5: colors_1.default.neutral[20],
+        },
+        // Custom color variants
+        // High-emphasis primary non-text variant, can be used on non-text elements like icons
+        primaryNonText: colors_1.default.primary[60],
+        // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
+        errorNonText: colors_1.default.error[60],
+        // variant used to render disabled elements
+        disabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.25).rgb().string(),
+        // warning variant fills, texts, and icons which communicate warning states
+        warning: colors_1.default.warning[90],
+        // can be used on non-text warning elements like icons
+        warningNonText: colors_1.default.warning[80],
+        // can be used on warning text and icons against warning
+        onWarning: colors_1.default.warning[20],
+        // Standout fill warning color against surface
+        warningContainer: colors_1.default.warning[30],
+        // Text and icons against warning container
+        onWarningContainer: colors_1.default.warning[90],
+        // success color variant fills, texts, and icons which communicate success states
+        success: colors_1.default.success[80],
+        // can be used on non-text success elements like icons
+        successNonText: colors_1.default.success[70],
+        // can be used on success text and icons against success
+        onSuccess: colors_1.default.success[20],
+        // Standout fill success color against surface
+        successContainer: colors_1.default.success[30],
+        // Text and icons against success container
+        onSuccessContainer: colors_1.default.success[90],
+        // orange color variant fills, texts, and icons
+        orange: colors_1.default.orange[80],
+        // non-text orange variant can be used on non-text elements like icons
+        orangeNonText: colors_1.default.orange[70],
+        // can be used on text and icons against orange
+        onOrange: colors_1.default.orange[20],
+        // Standout fill orange color against surface
+        orangeContainer: colors_1.default.orange[30],
+        // Text and icons against orange container
+        onOrangeContainer: colors_1.default.orange[90],
+        // purple color variant fills, texts, and icons
+        purple: colors_1.default.purple[80],
+        // non-text purple variant can be used on non-text elements like icons
+        purpleNonText: colors_1.default.purple[60],
+        // can be used on text and icons against purple
+        onPurple: colors_1.default.purple[20],
+        // Standout fill purple color against surface
+        purpleContainer: colors_1.default.purple[30],
+        // Text and icons against purple container
+        onPurpleContainer: colors_1.default.purple[90],
+        // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
+        // Lowest-emphasis container color
+        surfaceContainerLowest: colors_1.default.neutral[4],
+        // Low-emphasis container color
+        surfaceContainerLow: colors_1.default.neutral[10],
+        // Default container color
+        surfaceContainer: colors_1.default.neutral[12],
+        // High-emphasis container color
+        surfaceContainerHigh: colors_1.default.neutral[17],
+        // Highest-emphasis container color
+        surfaceContainerHighest: colors_1.default.neutral[20],
+        // This is alias for surface disabled, used as disabled container background
+        disabledContainer: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.1).rgb().string(), onDisabledContainer: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.15).rgb().string() }) });

package/dist/blueTheme.d.ts CHANGED Viewed

@@ -5,4 +5,87 @@ 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.
 **/
-export declare const blueTheme: ReactNativePaper.Theme;
+export declare const MD3BluiLightTheme: {
+    fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
+    colors: {
+        primary: string;
+        onPrimary: string;
+        primaryContainer: string;
+        onPrimaryContainer: string;
+        secondary: string;
+        onSecondary: string;
+        secondaryContainer: string;
+        onSecondaryContainer: string;
+        tertiary: string;
+        onTertiary: string;
+        tertiaryContainer: string;
+        onTertiaryContainer: string;
+        error: string;
+        onError: string;
+        errorContainer: string;
+        onErrorContainer: string;
+        background: string;
+        onBackground: string;
+        surface: string;
+        onSurface: string;
+        surfaceDisabled: string;
+        onSurfaceDisabled: string;
+        surfaceVariant: string;
+        onSurfaceVariant: string;
+        outline: string;
+        outlineVariant: string;
+        shadow: string;
+        scrim: string;
+        inverseSurface: string;
+        inverseOnSurface: string;
+        inversePrimary: string;
+        elevation: {
+            level0: string;
+            level1: string;
+            level2: string;
+            level3: string;
+            level4: string;
+            level5: string;
+        };
+        primaryNonText: string;
+        errorNonText: string;
+        disabled: string;
+        warning: string;
+        warningNonText: string;
+        onWarning: string;
+        warningContainer: string;
+        onWarningContainer: string;
+        success: string;
+        successNonText: string;
+        onSuccess: string;
+        successContainer: string;
+        onSuccessContainer: string;
+        orange: string;
+        orangeNonText: string;
+        onOrange: string;
+        orangeContainer: string;
+        onOrangeContainer: string;
+        purple: string;
+        purpleNonText: string;
+        onPurple: string;
+        purpleContainer: string;
+        onPurpleContainer: string;
+        surfaceContainerLowest: string;
+        surfaceContainerLow: string;
+        surfaceContainer: string;
+        surfaceContainerHigh: string;
+        surfaceContainerHighest: string;
+        disabledContainer: string;
+        onDisabledContainer: string;
+        backdrop: string;
+    };
+    dark: boolean;
+    mode?: ("adaptive" | "exact") | undefined;
+    roundness: number;
+    animation: {
+        scale: number;
+        defaultAnimationDuration?: number | undefined;
+    };
+    version: 3;
+    isV3: true;
+};

package/dist/blueTheme.js CHANGED Viewed

@@ -21,58 +21,82 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.blueTheme = void 0;
+exports.MD3BluiLightTheme = void 0;
 var react_native_paper_1 = require("react-native-paper");
-var colors_1 = require("@brightlayer-ui/colors");
+var colors_1 = __importDefault(require("@brightlayer-ui/colors"));
 var shared_1 = require("./shared");
 var color_1 = __importDefault(require("color"));
-var themeOpacity = {
-    disabled: 0.3,
-    divider: 0.36,
-    disabledBackground: 0.24,
-    actionOpacity: 1,
-};
-exports.blueTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: false, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
-            fontFamily: 'OpenSans-Bold',
-            fontWeight: '700',
-        } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[500], primaryPalette: {
-            light: colors_1.blue[50],
-            main: colors_1.blue[500],
-            dark: colors_1.blue[700],
-        }, accent: colors_1.lightBlue[500], accentPalette: {
-            light: colors_1.lightBlue[50],
-            main: colors_1.lightBlue[500],
-            dark: colors_1.lightBlue[700],
-        }, error: colors_1.red[500], errorPalette: {
-            light: colors_1.red[50],
-            main: colors_1.red[500],
-            dark: colors_1.red[700],
-        }, divider: color_1.default(colors_1.black[200]).alpha(themeOpacity.divider).string(), background: colors_1.white[200], surface: colors_1.white[50], text: colors_1.black[500], placeholder: colors_1.gray[500], onSurface: colors_1.black[500], textPalette: {
-            primary: colors_1.black[500],
-            secondary: colors_1.gray[500],
-            onPrimary: {
-                light: colors_1.black[500],
-                main: colors_1.white[50],
-                dark: colors_1.white[50],
-            },
-            disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(),
-        }, actionPalette: {
-            active: colors_1.gray[500],
-            background: colors_1.white[500],
-            disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(),
-            disabledBackground: color_1.default(colors_1.black[200]).alpha(themeOpacity.disabledBackground).string(),
-        }, disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(), notification: colors_1.lightBlue[500], opacity: themeOpacity, overrides: {
-            snackbar: {
-                accent: colors_1.blue[200],
-            },
-            bottomNavigation: {
-                inactive: colors_1.blue[200],
-            },
-            button: {
-                contained: {
-                    text: {
-                        disabled: colors_1.blue[200],
-                    },
-                },
-            },
-        } }) });
+exports.MD3BluiLightTheme = __assign(__assign({}, react_native_paper_1.MD3LightTheme), { fonts: (0, react_native_paper_1.configureFonts)({ config: shared_1.fontConfig }), colors: __assign(__assign({}, react_native_paper_1.MD3LightTheme.colors), {
+        // React Native Paper default theme color variants
+        primary: colors_1.default.primary[40], onPrimary: colors_1.default.primary[100], primaryContainer: colors_1.default.primary[80], onPrimaryContainer: colors_1.default.primary[30], secondary: colors_1.default.primary[40], onSecondary: colors_1.default.primary[100], secondaryContainer: colors_1.default.primary[80], onSecondaryContainer: colors_1.default.primary[30], tertiary: colors_1.default.primary[40], onTertiary: colors_1.default.primary[100], tertiaryContainer: colors_1.default.primary[80], onTertiaryContainer: colors_1.default.primary[30], error: colors_1.default.error[40], onError: colors_1.default.primary[100], errorContainer: colors_1.default.error[90], onErrorContainer: colors_1.default.error[30], background: colors_1.default.neutral[98], onBackground: colors_1.default.neutral[10], surface: colors_1.default.neutral[98], onSurface: colors_1.default.neutral[10],
+        // surfaceDisabled is the same as disabledContainer in design files
+        surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.05).rgb().string(),
+        // onSurfaceDisabled is the same as onDisabledContainer in design files
+        onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.25).rgb().string(), surfaceVariant: colors_1.default.neutralVariant[90], onSurfaceVariant: colors_1.default.neutralVariant[30], outline: colors_1.default.neutralVariant[50], outlineVariant: (0, color_1.default)(colors_1.default.neutralVariant[50]).alpha(0.25).rgb().string(), shadow: colors_1.default.primary[0], scrim: colors_1.default.primary[0], inverseSurface: colors_1.default.neutral[20], inverseOnSurface: colors_1.default.neutral[95], inversePrimary: colors_1.default.primary[80], elevation: {
+            level0: 'transparent',
+            level1: colors_1.default.primary[100],
+            level2: colors_1.default.neutral[97],
+            level3: colors_1.default.neutral[94],
+            level4: colors_1.default.neutral[92],
+            level5: colors_1.default.neutral[90],
+        },
+        // Custom color variants
+        // High-emphasis primary non-text variant, can be used on non-text elements like icons
+        primaryNonText: colors_1.default.primary[50],
+        // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
+        errorNonText: colors_1.default.error[50],
+        // variant used to render disabled elements
+        disabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.2).rgb().string(),
+        // warning variant fills, texts, and icons which communicate warning states
+        warning: colors_1.default.warning[40],
+        // can be used on non-text warning elements like icons
+        warningNonText: colors_1.default.warning[60],
+        // can be used on warning text and icons against warning
+        onWarning: colors_1.default.primary[100],
+        // Standout fill warning color against surface
+        warningContainer: colors_1.default.warning[90],
+        // Text and icons against warning container
+        onWarningContainer: colors_1.default.warning[30],
+        // success color variant fills, texts, and icons which communicate success states
+        success: colors_1.default.success[40],
+        // can be used on non-text success elements like icons
+        successNonText: colors_1.default.success[50],
+        // can be used on success text and icons against success
+        onSuccess: colors_1.default.primary[100],
+        // Standout fill success color against surface
+        successContainer: colors_1.default.success[90],
+        // Text and icons against success container
+        onSuccessContainer: colors_1.default.success[30],
+        // orange color variant fills, texts, and icons
+        orange: colors_1.default.orange[40],
+        // non-text orange variant can be used on non-text elements like icons
+        orangeNonText: colors_1.default.orange[50],
+        // can be used on text and icons against orange
+        onOrange: colors_1.default.primary[100],
+        // Standout fill orange color against surface
+        orangeContainer: colors_1.default.orange[90],
+        // Text and icons against orange container
+        onOrangeContainer: colors_1.default.orange[30],
+        // purple color variant fills, texts, and icons
+        purple: colors_1.default.purple[40],
+        // non-text purple variant can be used on non-text elements like icons
+        purpleNonText: colors_1.default.purple[50],
+        // can be used on text and icons against purple
+        onPurple: colors_1.default.primary[100],
+        // Standout fill purple color against surface
+        purpleContainer: colors_1.default.purple[90],
+        // Text and icons against purple container
+        onPurpleContainer: colors_1.default.purple[30],
+        // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
+        // Lowest-emphasis container color
+        surfaceContainerLowest: colors_1.default.primary[100],
+        // Low-emphasis container color
+        surfaceContainerLow: colors_1.default.neutral[97],
+        // Default container color
+        surfaceContainer: colors_1.default.neutral[94],
+        // High-emphasis container color
+        surfaceContainerHigh: colors_1.default.neutral[92],
+        // Highest-emphasis container color
+        surfaceContainerHighest: colors_1.default.neutral[90],
+        // This is alias for surface disabled, used as disabled container background
+        disabledContainer: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.05).rgb().string(), onDisabledContainer: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.25).rgb().string() }) });

package/dist/index.d.ts CHANGED Viewed

@@ -5,51 +5,6 @@ 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.
 **/
-export { blueTheme as blue } from './blueTheme';
-export { blueDarkTheme as blueDark } from './blueDarkTheme';
-export { ThemeOpacity, ThemeOverrides } from './shared';
-import { $DeepPartial } from '@callstack/react-theme-provider';
-import { ThemeOpacity, ThemeOverrides } from './shared';
-declare global {
-    namespace ReactNativePaper {
-        interface ThemeColors {
-            primaryPalette: {
-                light: string;
-                main: string;
-                dark: string;
-            };
-            accentPalette: {
-                light: string;
-                main: string;
-                dark: string;
-            };
-            errorPalette: {
-                light: string;
-                main: string;
-                dark: string;
-            };
-            divider: string;
-            textPalette: {
-                primary: string;
-                secondary: string;
-                onPrimary: {
-                    light: string;
-                    main: string;
-                    dark: string;
-                };
-                disabled: string;
-            };
-            actionPalette: {
-                active: string;
-                background: string;
-                disabled: string;
-                disabledBackground: string;
-            };
-            overrides: $DeepPartial<ThemeOverrides>;
-            opacity: Partial<ThemeOpacity>;
-        }
-        interface ThemeFonts {
-            bold: ThemeFont;
-        }
-    }
-}
+export { MD3BluiLightTheme as blue } from './blueTheme';
+export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
+export { ExtendedTheme, useExtendedTheme } from './shared';

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExtendedTheme = exports.blueDark = exports.blue = void 0;
 /**
 Copyright (c) 2021-present, Eaton
@@ -8,6 +9,8 @@ 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.
 **/
 var blueTheme_1 = require("./blueTheme");
-Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.blueTheme; } });
+Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.MD3BluiLightTheme; } });
 var blueDarkTheme_1 = require("./blueDarkTheme");
-Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.blueDarkTheme; } });
+Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.MD3BluiDarkTheme; } });
+var shared_1 = require("./shared");
+Object.defineProperty(exports, "useExtendedTheme", { enumerable: true, get: function () { return shared_1.useExtendedTheme; } });

package/dist/shared.d.ts CHANGED Viewed

@@ -1,95 +1,222 @@
-declare type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+import { MD3Theme } from 'react-native-paper';
+import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types';
+import { $DeepPartial } from '@callstack/react-theme-provider';
 export declare const fontConfig: {
-    default: {
-        regular: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        medium: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        light: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        thin: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
+    displaySmall: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
     };
-    ios: {
-        regular: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        medium: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        light: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        thin: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
+    displayMedium: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
     };
-    android: {
-        regular: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        medium: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        light: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
-        thin: {
-            fontFamily: string;
-            fontWeight: FontWeight;
-        };
+    displayLarge: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
     };
-};
-export declare type ThemeOverrides = {
-    avatar: {
-        background: string;
+    headlineSmall: {
+        fontFamily: string;
+        fontWeight: "500";
+        fontSize: number;
+        lineHeight: number;
     };
-    bottomNavigation: {
-        inactive: string;
+    headlineMedium: {
+        fontFamily: string;
+        fontWeight: "500";
+        fontSize: number;
+        lineHeight: number;
     };
-    button: {
-        contained: {
-            text: {
-                disabled: string;
-            };
-        };
+    headlineLarge: {
+        fontFamily: string;
+        fontWeight: "500";
+        fontSize: number;
+        lineHeight: number;
     };
-    chip: {
-        outlined: {
-            background: string;
-        };
-        flat: {
-            background: string;
-        };
+    titleSmall: {
+        fontFamily: string;
+        fontWeight: "600";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
     };
-    snackbar: {
-        accent: string;
+    titleMedium: {
+        fontFamily: string;
+        fontWeight: "600";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
     };
-    toggleButtonGroup: {
-        checked: {
-            background: string;
-        };
+    titleLarge: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
+    };
+    labelSmall: {
+        fontFamily: string;
+        fontWeight: "600";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    labelMedium: {
+        fontFamily: string;
+        fontWeight: "600";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    labelLarge: {
+        fontFamily: string;
+        fontWeight: "600";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    bodySmall: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
+    };
+    bodyMedium: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
+    };
+    bodyLarge: {
+        fontFamily: string;
+        fontWeight: "400";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
     };
 };
-export declare type ThemeOpacity = {
-    disabled: number;
-    divider: number;
-    disabledBackground: number;
-    actionOpacity: number;
+export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
+    colors: {
+        primary: string;
+        primaryContainer: string;
+        secondary: string;
+        secondaryContainer: string;
+        tertiary: string;
+        tertiaryContainer: string;
+        surface: string;
+        surfaceVariant: string;
+        surfaceDisabled: string;
+        background: string;
+        error: string;
+        errorContainer: string;
+        onPrimary: string;
+        onPrimaryContainer: string;
+        onSecondary: string;
+        onSecondaryContainer: string;
+        onTertiary: string;
+        onTertiaryContainer: string;
+        onSurface: string;
+        onSurfaceVariant: string;
+        onSurfaceDisabled: string;
+        onError: string;
+        onErrorContainer: string;
+        onBackground: string;
+        outline: string;
+        outlineVariant: string;
+        inverseSurface: string;
+        inverseOnSurface: string;
+        inversePrimary: string;
+        shadow: string;
+        scrim: string;
+        backdrop: string;
+        elevation: {
+            level0: string;
+            level1: string;
+            level2: string;
+            level3: string;
+            level4: string;
+            level5: string;
+        };
+        primaryNonText: string;
+        errorNonText: string;
+        disabled: string;
+        warning: string;
+        warningNonText: string;
+        onWarning: string;
+        warningContainer: string;
+        onWarningContainer: string;
+        success: string;
+        successNonText: string;
+        onSuccess: string;
+        successContainer: string;
+        onSuccessContainer: string;
+        orange: string;
+        orangeNonText: string;
+        onOrange: string;
+        orangeContainer: string;
+        onOrangeContainer: string;
+        purple: string;
+        purpleNonText: string;
+        onPurple: string;
+        purpleContainer: string;
+        onPurpleContainer: string;
+        surfaceContainerLowest: string;
+        surfaceContainerLow: string;
+        surfaceContainer: string;
+        surfaceContainerHigh: string;
+        surfaceContainerHighest: string;
+        disabledContainer: string;
+        onDisabledContainer: string;
+        errorFilledContainer: string;
+        onErrorFilledContainer: string;
+        errorShadedContainer: string;
+        onErrorShadedContainer: string;
+        errorOutlinedContainerOutline: string;
+        onErrorOutlinedContainerOutline: string;
+        orangeFilledContainer: string;
+        onOrangeFilledContainer: string;
+        orangeShadedContainer: string;
+        onOrangeShadedContainer: string;
+        orangeOutlinedContainer: string;
+        onOrangeOutlinedContainer: string;
+        warningFilledContainer: string;
+        onWarningFilledContainer: string;
+        warningShadedContainer: string;
+        onWarningShadedContainer: string;
+        warningOutlinedContainerOutline: string;
+        onWarningOutlinedContainer: string;
+        successFilledContainer: string;
+        onSuccessFilledContainer: string;
+        successShadedContainer: string;
+        successShadedLabel: string;
+        successOutlinedContainerOutline: string;
+        onSuccessOutlinedContainer: string;
+        primaryFilledContainer: string;
+        onPrimaryFilledContainer: string;
+        primaryShadedContainer: string;
+        onPrimaryShadedContainer: string;
+        primaryOutlinedContainerOutline: string;
+        onPrimaryOutlinedContainer: string;
+        purpleFilledContainer: string;
+        onPurpleFilledContainer: string;
+        purpleShadedContainer: string;
+        onPurpleShadedContainer: string;
+        purpleOutlinedContainerOutline: string;
+        onPurpleOutlinedContainer: string;
+        neutralFilledContainer: string;
+        onNeutralFilledContainer: string;
+        neutralShadedContainer: string;
+        onNeutralShadedContainer: string;
+        neutralOutlinedContainerOutline: string;
+        onNeutralOutlinedContainer: string;
+    };
+    fonts: MD3Typescale & {
+        customVariant: MD3Type;
+    };
 };
-export {};
+export declare const useExtendedTheme: (overrides?: $DeepPartial<ExtendedTheme>) => ExtendedTheme;

package/dist/shared.js CHANGED Viewed

@@ -1,26 +1,107 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontConfig = void 0;
-var defaultFontConfig = {
-    regular: {
+exports.useExtendedTheme = exports.fontConfig = void 0;
+var react_native_paper_1 = require("react-native-paper");
+exports.fontConfig = {
+    displaySmall: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 36,
+        lineHeight: 45,
+    },
+    displayMedium: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 45,
+        lineHeight: 56,
+    },
+    displayLarge: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 54,
+        lineHeight: 68,
+        letterSpacing: 1,
+    },
+    headlineSmall: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '500',
+        fontSize: 24,
+        lineHeight: 32,
+    },
+    headlineMedium: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '500',
+        fontSize: 27,
+        lineHeight: 40,
+    },
+    headlineLarge: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '500',
+        fontSize: 32,
+        lineHeight: 40,
+    },
+    titleSmall: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '600',
+        fontSize: 14,
+        lineHeight: 20,
+        letterSpacing: 0.1,
+    },
+    titleMedium: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '600',
+        fontSize: 16,
+        lineHeight: 24,
+        letterSpacing: 0.15,
+    },
+    titleLarge: {
         fontFamily: 'OpenSans-Regular',
         fontWeight: '400',
+        fontSize: 22,
+        lineHeight: 28,
+    },
+    labelSmall: {
+        fontFamily: 'OpenSans-SemiBold',
+        fontWeight: '600',
+        fontSize: 11,
+        lineHeight: 16,
+        letterSpacing: 0.5,
+    },
+    labelMedium: {
+        fontFamily: 'OpenSans-SemiBold',
+        fontWeight: '600',
+        fontSize: 12,
+        lineHeight: 16,
+        letterSpacing: 0.2,
     },
-    medium: {
+    labelLarge: {
         fontFamily: 'OpenSans-SemiBold',
         fontWeight: '600',
+        fontSize: 14,
+        lineHeight: 20,
+        letterSpacing: 0.1,
     },
-    light: {
-        fontFamily: 'OpenSans-Light',
-        fontWeight: '300',
+    bodySmall: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 12,
+        lineHeight: 16,
     },
-    thin: {
-        fontFamily: 'OpenSans-Light',
-        fontWeight: '100',
+    bodyMedium: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    bodyLarge: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+        fontSize: 16,
+        lineHeight: 24,
+        letterSpacing: 0.15,
     },
 };
-exports.fontConfig = {
-    default: defaultFontConfig,
-    ios: defaultFontConfig,
-    android: defaultFontConfig,
+var useExtendedTheme = function (overrides) {
+    return (0, react_native_paper_1.useTheme)(overrides);
 };
+exports.useExtendedTheme = useExtendedTheme;

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
     "name": "@brightlayer-ui/react-native-themes",
     "author": "Brightlayer UI <brightlayer-ui@eaton.com>",
     "license": "BSD-3-Clause",
-    "version": "6.0.0",
+    "version": "7.0.0-alpha.1",
     "description": "React Native themes for Brightlayer UI applications",
     "main": "./dist/index.js",
     "scripts": {
@@ -17,19 +17,21 @@
         "link:themes": "bash ./scripts/linkThemes.sh",
         "test": "bash ./scripts/buildTest.sh",
         "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
-        "tag:package": "npx -p @brightlayer-ui/tag blui-tag",
+        "tag:package": "npx -p @brightlayer-ui/tag blui-tag -s -blui-react-native-themes",
         "update:submodule": "git submodule update --remote",
         "prettier": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --write",
-        "prettier:check": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --check"
+        "prettier:check": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --check",
+        "generate:licenses": "npm-license-crawler -onlyDirectDependencies -json LICENSES.json",
+        "precommit": "yarn build && yarn generate:licenses && yarn prettier && yarn test"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/brightlayer-ui/react-native-themes.git"
+        "url": "git+https://github.com/etn-ccis/blui-react-native-themes.git"
     },
     "bugs": {
-        "url": "https://github.com/brightlayer-ui/react-native-themes/issues"
+        "url": "https://github.com/etn-ccis/blui-react-native-themes/issues"
     },
-    "homepage": "https://github.com/brightlayer-ui/react-native-themes/tree/master",
+    "homepage": "https://github.com/etn-ccis/blui-react-native-themes/tree/master",
     "keywords": [
         "Brightlayer UI",
         "themes",
@@ -37,24 +39,28 @@
         "React Native"
     ],
     "dependencies": {
-        "@brightlayer-ui/colors": "^3.0.0",
-        "color": "^3.1.3"
+        "@brightlayer-ui/colors": "4.0.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",
-        "prettier": "^2.4.1",
-        "react-native-paper": "^4.0.0",
-        "typescript": "^3.7.2"
+        "npm-license-crawler": "^0.2.1",
+        "prettier": "^3.0.0",
+        "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": [
         "package.json",
         "README.md",
         "LICENSE",
+        "LICENSES.json",
         "CHANGELOG.md",
         "/dist"
     ]